Merge branch 'dev'

AAFC-BICoE · Dec 23, 2020 · cb069dc · cb069dc
2 parents a78397b + c578c11
commit cb069dc
Show file tree

Hide file tree

Showing 14 changed files with 151 additions and 63 deletions.
diff --git a/packages/common-ui/lib/bulk-data-editor/BulkDataEditor.tsx b/packages/common-ui/lib/bulk-data-editor/BulkDataEditor.tsx
@@ -12,6 +12,7 @@ import { LoadingSpinner } from "../loading-spinner/LoadingSpinner";
 import { difference, RecursivePartial } from "./difference";
 import { getUserFriendlyAutoCompleteRenderer } from "./resource-select-cell";
 import { useBulkEditorFrontEndValidation } from "./useBulkEditorFrontEndValidation";
+import { useHeaderWidthFix } from "./useHeaderWidthFix";
 
 export interface RowChange<TRow> {
   original: TRow;
@@ -51,6 +52,8 @@ export function BulkDataEditor<TRow>({
     validationAlertJsx
   } = useBulkEditorFrontEndValidation();
 
+  const { tableWrapperRef } = useHeaderWidthFix({ columns });
+
   // Loads the initial data and shows an error message on fail:
   const loadDataInternal = safeSubmit(async () => {
     setLoading(true);
@@ -98,12 +101,12 @@ export function BulkDataEditor<TRow>({
   };
 
   return (
-    <>
+    <div ref={tableWrapperRef}>
       <style>{`
         /* Prevent the handsontable header from covering the Dropdown menu options: */
-        .ht_clone_top {
+        .ht_clone_top, .ht_clone_left, .ht_clone_top_left_corner {
           z-index: 0 !important;
-        }  
+        }
       `}</style>
       <ErrorViewer />
       {validationAlertJsx}
@@ -124,7 +127,7 @@ export function BulkDataEditor<TRow>({
       >
         <CommonMessage id="submitBtnText" />
       </FormikButton>
-    </>
+    </div>
   );
 }
 

diff --git a/packages/common-ui/lib/bulk-data-editor/useHeaderWidthFix.tsx b/packages/common-ui/lib/bulk-data-editor/useHeaderWidthFix.tsx
@@ -0,0 +1,37 @@
+import { GridSettings } from "handsontable";
+import { useEffect, useRef } from "react";
+
+interface HeaderWidthFixParams {
+  columns: GridSettings[];
+}
+
+/** Fixes a bug with HandsOnTable where enabling the rowHeaders
+ * (numbered cells on the left side of the grid) cuts off the right side of the
+ * column headers.
+ */
+export function useHeaderWidthFix({ columns }: HeaderWidthFixParams) {
+  const tableWrapperRef = useRef<HTMLDivElement>(null);
+
+  // Whenever the columns change, run some code to manually set the width of the header row:
+  useEffect(() => {
+    setImmediate(() => {
+      const wrapper = tableWrapperRef.current;
+
+      if (wrapper) {
+        const header = wrapper.querySelector<HTMLDivElement>(
+          ".ht_clone_top .wtHider"
+        );
+        const htCore = wrapper.querySelector<HTMLDivElement>(
+          ".ht_master .htCore"
+        );
+
+        if (header && htCore) {
+          const requiredHeaderWidth = `${htCore.clientWidth}px`;
+          header.style.width = requiredHeaderWidth;
+        }
+      }
+    });
+  }, [columns.map(col => col.data).join()]);
+
+  return { tableWrapperRef };
+}
diff --git a/packages/common-ui/lib/formik-connected/GroupedCheckBoxFields.tsx b/packages/common-ui/lib/formik-connected/GroupedCheckBoxFields.tsx
@@ -101,7 +101,7 @@ export function useGroupedCheckBoxes<TData extends KitsuResource>({
       <div className="grouped-checkbox-header text-center">
         <CommonMessage id="select" /> <CheckAllCheckBox />
         <Tooltip id="checkAllTooltipMessage" />
-        <div>
+        <div aria-describedby="checkAllTooltipMessage">
           ({totalChecked} <CommonMessage id="selected" />)
         </div>
       </div>

diff --git a/packages/common-ui/lib/intl/LanguageSelector.tsx b/packages/common-ui/lib/intl/LanguageSelector.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useContext } from "react";
+import { useContext } from "react";
 import { intlContext } from "./IntlSupport";
 
 const LANGUAGE_LABELS = {
@@ -17,29 +17,26 @@ export function LanguageSelector() {
 
   return (
     <div>
-      {Object.keys(LANGUAGE_LABELS).map((key, i, arr) => {
-        const divider = i < arr.length - 1 && " | ";
+      {Object.keys(LANGUAGE_LABELS)
+        .filter(key => key !== locale)
+        .map(key => {
+          function onClick() {
+            setLocale(key);
+          }
 
-        function onClick() {
-          setLocale(key);
-        }
-
-        return (
-          <div key={key} className="d-inline">
-            <button
-              className="btn btn-link px-0"
-              disabled={locale === key}
-              onClick={onClick}
-              lang={key}
-            >
-              {LANGUAGE_LABELS[key]}
-            </button>
-            <div className="d-inline" style={{ paddingTop: "0.375rem" }}>
-              {divider}
+          return (
+            <div key={locale} className="d-inline">
+              <button
+                className="btn btn-link px-0"
+                style={{ color: "#006FE6" }}
+                onClick={onClick}
+                lang={locale}
+              >
+                {LANGUAGE_LABELS[key]}
+              </button>
             </div>
-          </div>
-        );
-      })}
+          );
+        })}
     </div>
   );
 }
diff --git a/packages/common-ui/lib/intl/__tests__/LanguageSelector.test.tsx b/packages/common-ui/lib/intl/__tests__/LanguageSelector.test.tsx
@@ -14,32 +14,23 @@ describe("LanguageSelector component", () => {
   it("Renders the language selector.", () => {
     const wrapper = mountWithAppContext(<LanguageSelector />);
 
-    expect(wrapper.find("button[children='English']").exists()).toEqual(true);
+    expect(wrapper.find("button[children='English']").exists()).toEqual(false);
     expect(wrapper.find("button[children='Français']").exists()).toEqual(true);
   });
 
   it("Lets you change the locale.", () => {
     const wrapper = mountWithAppContext(<LanguageSelector />);
 
     // Initially the locale should be set to "en":
-    expect(wrapper.find("button[children='English']").prop("disabled")).toEqual(
-      true
-    );
-    expect(
-      wrapper.find("button[children='Français']").prop("disabled")
-    ).toEqual(false);
+    expect(wrapper.find("button[children='Français']").exists()).toEqual(true);
 
     wrapper.find("button[children='Français']").simulate("click");
 
     wrapper.update();
 
     // The locale should have been changed to "fr":
-    expect(wrapper.find("button[children='English']").prop("disabled")).toEqual(
-      false
-    );
-    expect(
-      wrapper.find("button[children='Français']").prop("disabled")
-    ).toEqual(true);
+    expect(wrapper.find("button[children='Français']").exists()).toEqual(false);
+    expect(wrapper.find("button[children='English']").exists()).toEqual(true);
   });
 
   it("Doesn't render server-side.", () => {

diff --git a/packages/common-ui/lib/table/QueryTable.tsx b/packages/common-ui/lib/table/QueryTable.tsx
@@ -204,7 +204,7 @@ export function QueryTable<TData extends KitsuResource>({
         <Tooltip
           id="queryTableMultiSortExplanation"
           visibleElement={
-            <a href="#">
+            <a href="#" aria-describedby="queryTableMultiSortExplanation">
               <CommonMessage id="queryTableMultiSortTooltipTitle" />
             </a>
           }

diff --git a/packages/common-ui/lib/tooltip/Tooltip.tsx b/packages/common-ui/lib/tooltip/Tooltip.tsx
@@ -17,6 +17,7 @@ export function Tooltip({ id, visibleElement }: TooltipProps) {
   return (
     <span className="m-2">
       <RcTooltip
+        id={id}
         overlay={
           <div style={{ maxWidth: "15rem" }}>
             <FormattedMessage id={id} />
@@ -25,7 +26,13 @@ export function Tooltip({ id, visibleElement }: TooltipProps) {
         placement="top"
       >
         <span>
-          {visibleElement ?? <img src="/static/images/iconInformation.gif" />}
+          {visibleElement ?? (
+            <img
+              src="/static/images/iconInformation.gif"
+              alt=""
+              aria-describedby={id}
+            />
+          )}
         </span>
       </RcTooltip>
     </span>

diff --git a/packages/dina-ui/components/button-bar/nav/nav.tsx b/packages/dina-ui/components/button-bar/nav/nav.tsx
@@ -26,21 +26,22 @@ export function Nav() {
           </div>
           <section id="wb-lng" className="text-right ml-auto col-7 col-md-8">
             <ul className="list-inline">
-              <li className="list-inline-item mx-2">
-                <LanguageSelector />
-              </li>
               <li className="list-inline-item mx-2">
                 <NavbarUserControl />
               </li>
               <li className="list-inline-item mx-2 my-auto">
                 <a
                   className="btn btn-info"
+                  style={{ backgroundColor: "#117C8D" }}
                   href="https://github.com/AAFC-BICoE/dina-planning/issues/new?labels=demo%20feedback"
                   target="_blank"
                 >
                   <DinaMessage id="feedbackButtonText" />
                 </a>
               </li>
+              <li className="list-inline-item mx-2">
+                <LanguageSelector />
+              </li>
             </ul>
           </section>
         </div>

diff --git a/packages/dina-ui/components/button-bar/nav/wet-beow-bootstrap-4.css b/packages/dina-ui/components/button-bar/nav/wet-beow-bootstrap-4.css
@@ -368,3 +368,13 @@ a.btn,
     padding-bottom: 15px;
   }
 }
+
+.btn-info {
+  background-color: #117c8d;
+  border-color: #117c8d;
+}
+
+.btn-info:hover {
+  background-color: #18666d;
+  border-color: #18666d;
+}
diff --git a/packages/dina-ui/intl/dina-ui-en.ts b/packages/dina-ui/intl/dina-ui-en.ts
@@ -61,6 +61,9 @@ export const DINAUI_MESSAGES_ENGLISH = {
   field_managedAttributeMandatoryFieldsError:
     "Both name and type are mandatory fields",
   field_managedAttributeName: "Attribute Name",
+  field_managedAttributeType_integer_label: "Numerical",
+  field_managedAttributeType_picklist_label: "Pick List",
+  field_managedAttributeType_text_label: "Text",
   field_originalFilename: "Original Filename",
   field_organizationMandatoryFieldsError:
     "At least one orgnization name is required",

diff --git a/packages/dina-ui/package.json b/packages/dina-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dina-ui",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "scripts": {
     "build": "run-s next:build next:export",
     "dev": "next",

diff --git a/packages/dina-ui/pages/object-store/managedAttributesView/detailsView.tsx b/packages/dina-ui/pages/object-store/managedAttributesView/detailsView.tsx
@@ -20,7 +20,10 @@ import { NextRouter, withRouter } from "next/router";
 import { useContext, useState } from "react";
 import { Footer, Head, Nav } from "../../../components";
 import { DinaMessage, useDinaIntl } from "../../../intl/dina-ui-intl";
-import { ManagedAttribute } from "../../../types/objectstore-api/resources/ManagedAttribute";
+import {
+  ManagedAttribute,
+  ManagedAttributeType
+} from "../../../types/objectstore-api/resources/ManagedAttribute";
 
 interface AcceptedValueProps extends LabelWrapperParams {
   initialValues?: string[];
@@ -31,17 +34,6 @@ interface ManagedAttributeFormProps {
   router: NextRouter;
 }
 
-const ATTRIBUTE_TYPE_OPTIONS = [
-  {
-    label: "Integer",
-    value: "INTEGER"
-  },
-  {
-    label: "String",
-    value: "STRING"
-  }
-];
-
 export function ManagedAttributesDetailsPage({ router }: WithRouterProps) {
   const { id } = router.query;
 
@@ -90,13 +82,32 @@ export function ManagedAttributesDetailsPage({ router }: WithRouterProps) {
 
 function ManagedAttributeForm({ profile, router }: ManagedAttributeFormProps) {
   const { save } = useContext(ApiClientContext);
+  const acceptedValueLen = profile?.acceptedValues?.length;
+  if (acceptedValueLen && profile)
+    profile.managedAttributeType = ManagedAttributeType.PICKLIST;
+
   const [type, setType] = useState(
     profile ? profile.managedAttributeType : undefined
   );
   const id = profile?.id;
   const initialValues = profile || { type: "managed-attribute" };
   const { formatMessage } = useDinaIntl();
 
+  const ATTRIBUTE_TYPE_OPTIONS = [
+    {
+      label: formatMessage("field_managedAttributeType_integer_label"),
+      value: ManagedAttributeType.INTEGER
+    },
+    {
+      label: formatMessage("field_managedAttributeType_text_label"),
+      value: ManagedAttributeType.STRING
+    },
+    {
+      label: formatMessage("field_managedAttributeType_picklist_label"),
+      value: ManagedAttributeType.PICKLIST
+    }
+  ];
+
   async function onSubmit(
     submittedValues,
     { setStatus, setSubmitting }: FormikContextType<any>
@@ -108,7 +119,17 @@ function ManagedAttributeForm({ profile, router }: ManagedAttributeFormProps) {
       setStatus(formatMessage("field_managedAttributeMandatoryFieldsError"));
       setSubmitting(false);
       return;
+    } else if (
+      submittedValues.managedAttributeType === ManagedAttributeType.PICKLIST
+    ) {
+      submittedValues.managedAttributeType = ManagedAttributeType.STRING;
+    } else if (
+      submittedValues.managedAttributeType === ManagedAttributeType.INTEGER ||
+      submittedValues.managedAttributeType === ManagedAttributeType.STRING
+    ) {
+      submittedValues.acceptedValues = [];
     }
+
     try {
       await save(
         [
@@ -162,7 +183,7 @@ function ManagedAttributeForm({ profile, router }: ManagedAttributeFormProps) {
             onChange={selectValue => setType(selectValue)}
           />
         </div>
-        {type === "STRING" && (
+        {type === ManagedAttributeType.PICKLIST && (
           <div>
             <h4>
               <DinaMessage id="field_managedAttributeAcceptedValue" />