fix up some issues with inputs, finish writing tests

bcgov · Nov 8, 2024 · d4c9b80 · d4c9b80
1 parent d14a9b3
commit d4c9b80
Show file tree

Hide file tree

Showing 14 changed files with 242 additions and 107 deletions.
diff --git a/services/common/src/components/documents/__snapshots__/ReplaceDocumentModal.spec.tsx.snap b/services/common/src/components/documents/__snapshots__/ReplaceDocumentModal.spec.tsx.snap
@@ -121,6 +121,7 @@ exports[`ReplaceDocumentModal renders correctly and matches the snapshot 1`] = `
               >
                 <input
                   accept="application/pdf"
+                  id="fileUpload"
                   multiple=""
                   name="file"
                   type="file"

diff --git a/...mon/src/components/documents/spatial/__snapshots__/AddSpatialDocumentsModal.spec.tsx.snap b/...mon/src/components/documents/spatial/__snapshots__/AddSpatialDocumentsModal.spec.tsx.snap
@@ -202,6 +202,7 @@ exports[`AddSpatialDocumentsModal renders properly 1`] = `
                   >
                     <input
                       accept="application/dbf,application/x-dbf,application/x-dbase,application/vnd.google-earth.kml+xml,application/vnd.google-earth.kmz,application/octet-stream,application/xml"
+                      id="fieldName"
                       multiple=""
                       name="file"
                       type="file"

diff --git a/services/common/src/components/forms/RenderFileUpload.tsx b/services/common/src/components/forms/RenderFileUpload.tsx
@@ -78,21 +78,21 @@ export const FileUpload: FC<FileUploadProps> = ({
   maxFileSize = "750MB",
   maxFileNameLength = null,
   acceptedFileTypesMap = {},
-  onFileLoad = () => {},
-  onRemoveFile = () => {},
-  addFileStart = () => {},
+  onFileLoad = () => { },
+  onRemoveFile = () => { },
+  addFileStart = () => { },
   chunkSize = 1048576, // 1MB
   allowRevert = false,
   allowMultiple = true,
   allowReorder = false,
-  onProcessFiles = () => {},
-  onAbort = () => {},
-  onInit = () => {},
+  onProcessFiles = () => { },
+  onAbort = () => { },
+  onInit = () => { },
   itemInsertLocation = "before" as ItemInsertLocationType,
   labelInstruction = '<strong>Drag & Drop your files or <span class="filepond--label-action">Browse</span></strong>',
   abbrevLabel = false,
-  beforeAddFile = () => {},
-  beforeDropFile = () => {},
+  beforeAddFile = () => { },
+  beforeDropFile = () => { },
   labelHref,
   label,
   required,
@@ -160,9 +160,8 @@ export const FileUpload: FC<FileUploadProps> = ({
     const secondLine = abbrevLabel
       ? `<div>We accept most common ${fileTypeDisplayString} files${fileSize}.</div>`
       : `<div>Accepted filetypes: ${fileTypeDisplayString}</div>`;
-    return `${labelInstruction}<br>${
-      maxFileNameLength ? secondLineWithNamingConvention : secondLine
-    }`;
+    return `${labelInstruction}<br>${maxFileNameLength ? secondLineWithNamingConvention : secondLine
+      }`;
   };
 
   // Stores metadata and process function for each file, so we can manually
@@ -197,9 +196,8 @@ export const FileUpload: FC<FileUploadProps> = ({
         )
       ) {
         notification.error({
-          message: `Failed to upload ${file && file.name ? file.name : ""}: ${
-            errorMessage ? errorMessage : err
-          }`,
+          message: `Failed to upload ${file && file.name ? file.name : ""}: ${errorMessage ? errorMessage : err
+            }`,
           duration: 10,
         });
       }
@@ -254,9 +252,8 @@ export const FileUpload: FC<FileUploadProps> = ({
           }
 
           notification.error({
-            message: `Failed to upload ${file && file.name ? file.name : ""}: ${
-              response.data.status
-            }`,
+            message: `Failed to upload ${file && file.name ? file.name : ""}: ${response.data.status
+              }`,
             duration: 10,
           });
 
@@ -539,6 +536,7 @@ export const FileUpload: FC<FileUploadProps> = ({
         />
       )}
       <Form.Item
+        id={input?.name}
         name={input?.name}
         required={required}
         label={getLabel()}
@@ -551,50 +549,49 @@ export const FileUpload: FC<FileUploadProps> = ({
             (meta?.warning && <span>{meta?.warning}</span>))
         }
       >
-        <>
-          <FilePond
-            ref={(ref) => (filepond = ref)}
-            server={server}
-            name="file"
-            beforeDropFile={beforeDropFile}
-            beforeAddFile={beforeAddFile}
-            allowRevert={allowRevert}
-            onremovefile={onRemoveFile}
-            allowMultiple={allowMultiple}
-            onaddfilestart={addFileStart}
-            allowReorder={allowReorder}
-            maxParallelUploads={1}
-            maxFileSize={maxFileSize}
-            minFileSize="1"
-            allowFileTypeValidation={acceptedFileMimeTypes.length > 0}
-            acceptedFileTypes={acceptedFileMimeTypes}
-            onaddfile={handleFileAdd}
-            onprocessfiles={onProcessFiles}
-            onprocessfileabort={onAbort}
-            oninit={onInit}
-            labelIdle={getFilePondLabel()}
-            itemInsertLocation={itemInsertLocation}
-            credits={null}
-            fileValidateTypeLabelExpectedTypes={getfileValidateTypeLabelExpectedTypes()}
-            fileValidateTypeDetectType={(source, type) =>
-              new Promise((resolve, reject) => {
-                // If the browser can't automatically detect the file's MIME type, use the one stored in the "accepted file types" map.
-                if (!type) {
-                  const exts = source.name.split(".");
-                  const ext = exts?.length > 0 && `.${exts.pop().toLowerCase()}`;
-
-                  if (ext && acceptedFileTypeExtensions.includes(ext)) {
-                    const match = acceptedFileTypesMap[ext];
-                    type = Array.isArray(match) ? match[0] : match;
-                  } else {
-                    reject(type);
-                  }
+        <FilePond
+          id={input?.name}
+          ref={(ref) => (filepond = ref)}
+          server={server}
+          name="file"
+          beforeDropFile={beforeDropFile}
+          beforeAddFile={beforeAddFile}
+          allowRevert={allowRevert}
+          onremovefile={onRemoveFile}
+          allowMultiple={allowMultiple}
+          onaddfilestart={addFileStart}
+          allowReorder={allowReorder}
+          maxParallelUploads={1}
+          maxFileSize={maxFileSize}
+          minFileSize="1"
+          allowFileTypeValidation={acceptedFileMimeTypes.length > 0}
+          acceptedFileTypes={acceptedFileMimeTypes}
+          onaddfile={handleFileAdd}
+          onprocessfiles={onProcessFiles}
+          onprocessfileabort={onAbort}
+          oninit={onInit}
+          labelIdle={getFilePondLabel()}
+          itemInsertLocation={itemInsertLocation}
+          credits={null}
+          fileValidateTypeLabelExpectedTypes={getfileValidateTypeLabelExpectedTypes()}
+          fileValidateTypeDetectType={(source, type) =>
+            new Promise((resolve, reject) => {
+              // If the browser can't automatically detect the file's MIME type, use the one stored in the "accepted file types" map.
+              if (!type) {
+                const exts = source.name.split(".");
+                const ext = exts?.length > 0 && `.${exts.pop().toLowerCase()}`;
+
+                if (ext && acceptedFileTypeExtensions.includes(ext)) {
+                  const match = acceptedFileTypesMap[ext];
+                  type = Array.isArray(match) ? match[0] : match;
+                } else {
+                  reject(type);
                 }
-                resolve(type);
-              })
-            }
-          />
-        </>
+              }
+              resolve(type);
+            })
+          }
+        />
       </Form.Item>
     </div>
   );

diff --git a/services/common/src/components/forms/RenderGroupCheckbox.tsx b/services/common/src/components/forms/RenderGroupCheckbox.tsx
@@ -38,6 +38,7 @@ const RenderGroupCheckbox: FC<CheckboxProps> = ({
   if (!isEditMode) {
     return (
       <Form.Item
+        id={input.name}
         name={input.name}
         label={<div className="view-item-label">{label}</div>}
         getValueProps={() => ({ value: input.value })}

diff --git a/services/common/src/components/forms/RenderOrgBookSearch.tsx b/services/common/src/components/forms/RenderOrgBookSearch.tsx
@@ -120,26 +120,28 @@ const RenderOrgBookSearch: FC<OrgBookSearchProps> = ({
       required={required}
       getValueProps={() => input?.value !== "" && { value: input?.value }}
     >
-      <Select
-        virtual={false}
-        showSearch
-        showArrow
-        labelInValue
-        placeholder="Start typing to search OrgBook..."
-        notFoundContent={isSearching ? <Spin size="small" indicator={<LoadingOutlined />} /> : null}
-        filterOption={false}
-        onSearch={handleSearchDebounced}
-        onChange={handleChange}
-        onSelect={handleSelect}
-        style={{ width: "100%" }}
-        disabled={disabled}
-        value={options.length === 1 ? { key: options[0].text } : null}
-      >
-        {options.map((option) => (
-          <Select.Option key={option.value}>{option.text}</Select.Option>
-        ))}
-      </Select>
-      {help && <div className={`form-item-help ${input?.name}-form-help`}>{help}</div>}
+      <>
+        <Select
+          virtual={false}
+          showSearch
+          showArrow
+          labelInValue
+          placeholder="Start typing to search OrgBook..."
+          notFoundContent={isSearching ? <Spin size="small" indicator={<LoadingOutlined />} /> : null}
+          filterOption={false}
+          onSearch={handleSearchDebounced}
+          onChange={handleChange}
+          onSelect={handleSelect}
+          style={{ width: "100%" }}
+          disabled={disabled}
+          value={options.length === 1 ? { key: options[0].text } : null}
+        >
+          {options.map((option) => (
+            <Select.Option key={option.value}>{option.text}</Select.Option>
+          ))}
+        </Select>
+        {help && <div className={`form-item-help ${input?.name}-form-help`}>{help}</div>}
+      </>
     </Form.Item>
   );
 };

diff --git a/services/common/src/components/projectSummary/AuthorizationSupportDocumentUpload.tsx b/services/common/src/components/projectSummary/AuthorizationSupportDocumentUpload.tsx
@@ -91,7 +91,7 @@ export const AuthorizationSupportDocumentUpload: FC<AuthorizationSupportDocument
   const acceptedFileTypesMap = { ...DOCUMENT, ...EXCEL, ...IMAGE, ...SPATIAL };
 
   return (
-    <div>
+    <div className={isDisabled ? "authorization-documents-disabled" : "authorization-documents-enabled"}>
       {!isDisabled && (
         <Field
           id="LocationMapDocumentUpload"

diff --git a/services/common/src/components/projectSummary/AuthorizationsInvolved.tsx b/services/common/src/components/projectSummary/AuthorizationsInvolved.tsx
@@ -649,6 +649,7 @@ export const AuthorizationsInvolved: FC<ProjectSummaryFormComponentProps> = ({ f
                             <Checkbox
                               disabled={!isEditMode || isDisabled}
                               data-cy={`checkbox-authorization-${child.code}`}
+                              id={`authorizations-${child.code}`}
                               value={child.code}
                               checked={checked}
                               onChange={(e) => handleChange(e, child.code)}

diff --git a/services/common/src/components/projectSummary/ProjectSummaryFileUpload.tsx b/services/common/src/components/projectSummary/ProjectSummaryFileUpload.tsx
@@ -20,6 +20,7 @@ interface ProjectSummaryFileUploadProps {
   documents: IDocument[];
   label?: string | ReactNode;
   labelIdle?: string;
+  input?: any;
 }
 
 export const ProjectSummaryFileUpload: FC<WrappedFieldProps & ProjectSummaryFileUploadProps> = (
@@ -204,8 +205,8 @@ export const ProjectSummaryFileUpload: FC<WrappedFieldProps & ProjectSummaryFile
         {...(props.listedFileTypes ? { listedFileTypes: props.listedFileTypes } : {})}
         abbrevLabel={true}
         maxFileNameLength={MAX_DOCUMENT_NAME_LENGTHS.MAJOR_PROJECTS}
-        id="fileUpload"
-        name="fileUpload"
+        id={props.input?.name}
+        name={props.input?.name}
         component={RenderFileUpload}
         shouldReplaceFile={shouldReplaceFile}
         uploadUrl={uploadUrl}