[MDS-6129] project summary status: frontend

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"

services/common/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"

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?.name ?? ""}: ${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?.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>
   );

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 })}

services/common/src/components/forms/RenderOrgBookSearch.tsx

@@ -16,7 +16,6 @@ import { BaseInputProps, getFormItemLabel } from "./BaseInput";
 
 interface OrgBookSearchProps extends BaseInputProps {
   data?: any;
-  isDisabled?: boolean;
   setCredential: (credential: IOrgbookCredential) => void;
 }
 
@@ -29,7 +28,7 @@ const RenderOrgBookSearch: FC<OrgBookSearchProps> = ({
   input,
   meta,
   required,
-  isDisabled = false,
+  disabled = false,
   setCredential,
 }) => {
   const dispatch = useDispatch();
@@ -121,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={isDisabled}
-        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 } : undefined}
+        >
+          {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>
   );
 };

services/common/src/components/projectSummary/Agent.spec.tsx

@@ -7,19 +7,20 @@ import FormWrapper from "../forms/FormWrapper";
 import * as MOCK from "@mds/common/tests/mocks/dataMocks";
 import { Agent } from "./Agent";
 
+const formValues = {
+  values: {
+    status_code: "DFT",
+    agent: {
+      credential_id: 1000,
+      party_type_code: null,
+      address: { address_type_code: "CAN", sub_division_code: "BC" },
+    },
+    is_agent: true,
+  },
+};
 const initialState = {
   form: {
-    [FORM.ADD_EDIT_PROJECT_SUMMARY]: {
-      values: {
-        status_code: "DFT",
-        agent: {
-          credential_id: 1000,
-          party_type_code: null,
-          address: { address_type_code: "CAN", sub_division_code: "BC" },
-        },
-        is_agent: true,
-      },
-    },
+    [FORM.ADD_EDIT_PROJECT_SUMMARY]: { values: formValues },
   },
   [PROJECTS]: {
     projectSummary: MOCK.PROJECT_SUMMARY,
@@ -38,10 +39,10 @@ describe("Agent Component", () => {
       <ReduxWrapper initialState={initialState}>
         <FormWrapper
           name={FORM.ADD_EDIT_PROJECT_SUMMARY}
-          initialValues={initialState}
-          onSubmit={() => {}}
+          initialValues={formValues}
+          onSubmit={() => { }}
         >
-          <Agent />
+          <Agent fieldsDisabled={false} />
         </FormWrapper>
       </ReduxWrapper>
     );