Merge branch 'dev'

AAFC-BICoE · Oct 7, 2021 · 4169143 · 4169143
2 parents 317226e + 48d2055
commit 4169143
Show file tree

Hide file tree

Showing 26 changed files with 268 additions and 169 deletions.
diff --git a/packages/common-ui/lib/formik-connected/AutoSuggestTextField.tsx b/packages/common-ui/lib/formik-connected/AutoSuggestTextField.tsx
@@ -6,17 +6,15 @@ import {
 } from "common-ui";
 import { FormikContextType, useFormikContext } from "formik";
 import { KitsuResource, PersistedResource } from "kitsu";
-import { castArray, uniq } from "lodash";
+import { castArray, compact, uniq } from "lodash";
 import React, {
   ChangeEvent,
   InputHTMLAttributes,
+  useCallback,
   useEffect,
   useState
 } from "react";
-import AutoSuggest, {
-  InputProps,
-  ShouldRenderReasons
-} from "react-autosuggest";
+import AutoSuggest, { InputProps } from "react-autosuggest";
 import { useDebounce } from "use-debounce";
 import { OnFormikSubmit } from "./safeSubmit";
 
@@ -28,11 +26,16 @@ interface AutoSuggestConfig<T extends KitsuResource> {
     searchValue: string,
     formikCtx: FormikContextType<any>
   ) => JsonApiQuerySpec;
+  /** Hard-coded suggestions */
+  suggestions?: (
+    searchValue: string,
+    formikCtx: FormikContextType<any>
+  ) => (string | null | undefined)[];
+  /** Configures a  */
   suggestion?: (
     resource: PersistedResource<T>,
     searchValue: string
   ) => string | string[] | undefined;
-  configSuggestion?: (resource: PersistedResource<T>) => string[];
   onSuggestionSelected?: OnFormikSubmit<ChangeEvent<HTMLInputElement>>;
   timeoutMs?: number;
   /** Show the suggestions even when the input is blank. */
@@ -46,7 +49,7 @@ interface AutoSuggestConfig<T extends KitsuResource> {
 export function AutoSuggestTextField<T extends KitsuResource>({
   query,
   suggestion,
-  configSuggestion,
+  suggestions,
   onSuggestionSelected,
   timeoutMs,
   alwaysShowSuggestions,
@@ -59,6 +62,7 @@ export function AutoSuggestTextField<T extends KitsuResource>({
         <AutoSuggestTextFieldInternal
           query={query}
           suggestion={suggestion}
+          suggestions={suggestions}
           {...inputProps}
           onSuggestionSelected={onSuggestionSelected}
           alwaysShowSuggestions={alwaysShowSuggestions}
@@ -72,36 +76,40 @@ export function AutoSuggestTextField<T extends KitsuResource>({
 
 function AutoSuggestTextFieldInternal<T extends KitsuResource>({
   query,
+  suggestions,
   suggestion = (it, searchVal) => (!searchVal ? String(it) : String(searchVal)),
   onSuggestionSelected,
   id,
   timeoutMs = 250,
   alwaysShowSuggestions,
   ...inputProps
 }: InputHTMLAttributes<any> & AutoSuggestConfig<T>) {
-  const formikCtx = useFormikContext<any>();
+  const formik = useFormikContext<any>();
 
   const [searchValue, setSearchValue] = useState("");
   const [debouncedSearchValue] = timeoutMs
     ? useDebounce(searchValue, timeoutMs)
     : [searchValue];
 
   const { loading, response } = useQuery<T[]>(
-    query?.(debouncedSearchValue, formikCtx) as any,
+    query?.(debouncedSearchValue, formik) as any,
     {
       // Don't show results when the search is empty:
-      disabled: !alwaysShowSuggestions && !debouncedSearchValue?.trim()
+      disabled:
+        !query || (!alwaysShowSuggestions && !debouncedSearchValue?.trim())
     }
   );
 
-  const suggestions =
-    response && !loading
+  const allSuggestions = compact([
+    ...(suggestions?.(searchValue, formik) || []),
+    ...(response && !loading
       ? uniq(
           castArray(response.data).flatMap(it =>
             suggestion(it, debouncedSearchValue)
           )
         )
-      : [];
+      : [])
+  ]);
 
   useEffect(() => {
     const autosuggestGeneratedDivs =
@@ -137,14 +145,14 @@ function AutoSuggestTextFieldInternal<T extends KitsuResource>({
       <div className="autosuggest">
         <AutoSuggest
           id={id}
-          suggestions={suggestions}
+          suggestions={allSuggestions}
           getSuggestionValue={s => s}
           onSuggestionsFetchRequested={({ value }) => setSearchValue(value)}
           onSuggestionSelected={(_, data) => {
             inputProps.onChange?.({
               target: { value: data.suggestion }
             } as any);
-            onSuggestionSelected?.(data.suggestion, formikCtx);
+            onSuggestionSelected?.(data.suggestion, formik);
           }}
           onSuggestionsClearRequested={() => setSearchValue("")}
           renderSuggestion={text => <div>{text}</div>}

diff --git a/packages/common-ui/lib/formik-connected/TextField.tsx b/packages/common-ui/lib/formik-connected/TextField.tsx
@@ -14,7 +14,10 @@ export interface TextFieldProps extends LabelWrapperParams {
   numberOnly?: boolean;
   letterOnly?: boolean;
   noSpace?: boolean;
-  customInput?: (inputProps: InputHTMLAttributes<any>) => JSX.Element;
+  customInput?: (
+    inputProps: InputHTMLAttributes<any>,
+    form: FormikProps<any>
+  ) => JSX.Element;
   onChangeExternal?: (
     form: FormikProps<any>,
     name: string,
@@ -76,7 +79,7 @@ export function TextField(props: TextFieldProps) {
         // controlled input that we manually pass the "onChange" and "value" props. Otherwise
         // we will get React's warning about switching from an uncontrolled to controlled input.
         return (
-          customInput?.(inputPropsInternal) ??
+          customInput?.(inputPropsInternal, formik) ??
           (multiLines ? (
             <TextareaAutosize
               minRows={4}

diff --git a/packages/common-ui/lib/formik-connected/__tests__/AutoSuggestTextField.test.tsx b/packages/common-ui/lib/formik-connected/__tests__/AutoSuggestTextField.test.tsx
@@ -51,4 +51,22 @@ describe("AutoSuggestTextField", () => {
       filter: { rsql: "name==*p*" }
     });
   });
+
+  it("Can render custom suggestions passed via props.", async () => {
+    const wrapper = mountWithAppContext(
+      <DinaForm initialValues={{}}>
+        <AutoSuggestTextField<Person>
+          name="examplePersonNameField"
+          suggestions={() => ["suggestion-1", "suggestion-2"]}
+          timeoutMs={0}
+        />
+      </DinaForm>,
+      { apiContext }
+    );
+
+    expect(wrapper.find(AutoSuggest).prop("suggestions")).toEqual([
+      "suggestion-1",
+      "suggestion-2"
+    ]);
+  });
 });
diff --git a/packages/common-ui/lib/intl/LanguageSelector.tsx b/packages/common-ui/lib/intl/LanguageSelector.tsx
@@ -30,7 +30,7 @@ export function LanguageSelector() {
                 className="btn btn-link px-0"
                 style={{ color: "#0000cc" }}
                 onClick={onClick}
-                lang={locale}
+                lang={key}
               >
                 {LANGUAGE_LABELS[key]}
               </button>

diff --git a/packages/common-ui/lib/intl/common-ui-en.ts b/packages/common-ui/lib/intl/common-ui-en.ts
@@ -32,9 +32,12 @@ export const COMMON_UI_MESSAGES_ENGLISH = {
   errorPageTitle: "Error",
   existing: "Existing",
   false: "False",
+  field_address: "Address",
   field_author: "Author",
   field_changedProperties: "Changed Properties",
   field_commitDateTime: "Commit Date and Time",
+  field_familyNames: "Family Names",
+  field_givenNames: "Given Names",
   field_group: "Group",
   field_resourceName: "Resource Name",
   field_snapshotType: "Snapshot Type",
@@ -52,6 +55,8 @@ export const COMMON_UI_MESSAGES_ENGLISH = {
   geoSuggest: "Geo-Suggest",
   geoSuggestTooltip:
     "This button shows some suggested geo-locations based on what you've typed into the field.",
+  jumpToPage: "jump to page",
+  rowsPerPage: "rows per page",
   loadingText: "Loading...",
   loggedInAsUser: "Logged in as:",
   logoutBtn: "Logout",

diff --git a/packages/common-ui/package.json b/packages/common-ui/package.json
@@ -49,6 +49,7 @@
     "yup": "^0.32.9"
   },
   "devDependencies": {
+    "@types/dompurify": "^2.3.1",
     "@types/lodash": "^4.14.172",
     "@types/react": "^17.0.19",
     "@types/react-autosuggest": "^10.1.4",

diff --git a/packages/dina-ui/components/add-person/PersonForm.tsx b/packages/dina-ui/components/add-person/PersonForm.tsx
@@ -10,7 +10,6 @@ import {
 } from "common-ui";
 import { ResourceSelectField } from "common-ui/lib";
 import { PersistedResource } from "kitsu";
-import { IdentifierType } from "../../../dina-ui/types/agent-api/resources/Identifier";
 import { Organization } from "../../../dina-ui/types/agent-api/resources/Organization";
 import { DinaMessage } from "../../intl/dina-ui-intl";
 import { Person } from "../../types/objectstore-api";
@@ -88,6 +87,12 @@ export function PersonForm({ onSubmitSuccess, person }: PersonFormProps) {
         />
       </div>
       <PersonFormFields width="30rem" />
+      <div style={{ width: "30rem" }}>
+        <TextField name="webpage" />
+      </div>
+      <div style={{ width: "30rem" }}>
+        <TextField name="remarks" multiLines={true} />
+      </div>
       <div className="mb-3 list-inline">
         <div className="list-inline-item">
           <SubmitButton />

diff --git a/packages/dina-ui/components/button-bar/nav/nav.tsx b/packages/dina-ui/components/button-bar/nav/nav.tsx
@@ -18,25 +18,18 @@ export function Nav() {
 
   return (
     <>
-      <nav>
-        <ul id="wb-tphp" className="wb-inv wb-init wb-disable-inited">
-          <li className="wb-slc">
-            <a className="wb-sl" href="#wb-cont">
-              <DinaMessage id="skipToMainContent" />
-            </a>
-          </li>
-          <li className="wb-slc visible-sm visible-md visible-lg">
-            <a className="wb-sl" href="#wb-info">
-              <DinaMessage id="skipToAboutThisApplication" />
-            </a>
-          </li>
-          <li className="wb-slc">
-            <a className="wb-sl" rel="alternate" href="?wbdisable=true">
-              <DinaMessage id="skipToBasicHtmlVersion" />
-            </a>
-          </li>
-        </ul>
-      </nav>
+      <div id="wb-tphp" className="d-flex flex-column align-items-center">
+        <a className="wb-link-inv wb-sl" href="#wb-cont">
+          <DinaMessage id="skipToMainContent" />
+        </a>
+        <a className="wb-link-inv wb-sl" href="#wb-info">
+          <DinaMessage id="skipToAboutThisApplication" />
+        </a>
+        <a className="wb-link-inv wb-sl" rel="alternate" href="?wbdisable=true">
+          <DinaMessage id="skipToBasicHtmlVersion" />
+        </a>
+      </div>
+
       <header className="py-3">
         <div id="wb-bnr" className="container">
           <div className="row d-flex">
@@ -50,7 +43,7 @@ export function Nav() {
                 alt={formatMessage("governmentOfCanada")}
                 property="logo"
               />
-              <span className="wb-inv" property="name" tabIndex={0}>
+              <span className="wb-inv" property="name">
                 <span lang={locale}>
                   <DinaMessage id="governmentOfCanada" />
                 </span>
@@ -349,6 +342,7 @@ function NavCollectionDropdown() {
 }
 
 export function Footer() {
+  const { formatMessage } = useDinaIntl();
   return (
     <footer id="wb-info" className="my-3" style={{ zIndex: 0 }}>
       <div className="brand">
@@ -391,7 +385,7 @@ export function Footer() {
             <div className="col-6 col-md-3 col-lg-2 text-end">
               <img
                 src="https://www.canada.ca/etc/designs/canada/cdts/gcweb/v4_0_32/assets/wmms-blk.svg"
-                alt="Symbol of the Government of Canada"
+                alt={formatMessage("governmentOfCanadaSymbol")}
               />
             </div>
           </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
@@ -403,12 +403,3 @@ a.btn,
 .btn-outline-secondary {
   color: #3838f3;
 }
-
-.wb-inv {
-  clip: rect(1px, 1px, 1px, 1px);
-  height: 1px;
-  margin: 0;
-  overflow: hidden;
-  position: absolute;
-  width: 1px;
-}
diff --git a/packages/dina-ui/components/button-bar/nav/wet-beow-override.css b/packages/dina-ui/components/button-bar/nav/wet-beow-override.css
@@ -0,0 +1,37 @@
+/* Below css are emulating WET/CDTS css or override as needed */
+
+.wb-inv {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  margin: 0;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+}
+
+/* css for the 3 non visible skip links, make the background color same as the app bar */
+a.wb-link-inv:focus {
+  background-color: #26374a;
+  display: block;
+  color: white;
+  text-decoration: none;
+  margin-top: 25px;
+}
+
+a.wb-link-inv {
+  color: transparent;
+  background-color: transparent;
+  clip: auto;
+  height: auto;
+  margin-top: 15px;
+  overflow: hidden;
+  position: absolute;
+  width: auto;
+}
+.wb-sl {
+  background: #26374a;
+  color: #fff;
+  font-weight: 700;
+  padding: 5px;
+  z-index: 501;
+}
diff --git a/packages/dina-ui/components/collection/CollectingEventFormLayout.tsx b/packages/dina-ui/components/collection/CollectingEventFormLayout.tsx
@@ -371,17 +371,17 @@ export function CollectingEventFormLayout({
             )}
             <TextField
               name="verbatimEventDateTime"
-              label={formatMessage("verbatimEventDateTimeLabel")}
+              label={formatMessage("verbatimEventDateTime")}
             />
             <FormattedTextField
               name="startEventDateTime"
               className="startEventDateTime"
-              label={formatMessage("startEventDateTimeLabel")}
+              label={formatMessage("startEventDateTime")}
               placeholder={"YYYY-MM-DDTHH:MM:SS.MMM"}
             />
             <FormattedTextField
               name="endEventDateTime"
-              label={formatMessage("endEventDateTimeLabel")}
+              label={formatMessage("endEventDateTime")}
               placeholder={"YYYY-MM-DDTHH:MM:SS.MMM"}
             />
           </FieldSet>