[MDS-6011] Fix buttons in modal footers, only show allowed type in re…

…place modal (#3220) * add space around buttons in modal footers * fix an actions/consistency issue, clean up document table, clean up & test doc modals, only show the actual allowed type in replace doc modal * move test * fix spelling, remove imports from proptypes, fix duplicate key in datamocks * fix a nesting issue for spatial doc modal test, add in missing test id * test if the only CSS change is breaking the build * see if adding a default geomark URL helps Index.js pass, and if adding an equivalent rule on MS helps the build error * update styles * attempt to target the correct actions button
bcgov · Aug 20, 2024 · a7ce8b4 · a7ce8b4
1 parent a0fff42
commit a7ce8b4
Show file tree

Hide file tree

Showing 24 changed files with 933 additions and 439 deletions.
diff --git a/services/common/src/components/common/ActionMenu.tsx b/services/common/src/components/common/ActionMenu.tsx
@@ -25,6 +25,7 @@ export const generateActionMenuItems = (actionItems: ITableAction[], record) =>
         <button
           type="button"
           className={`full actions-dropdown-button`}
+          data-testid={`action-button-${action.key}`}
           onClick={(event) => action.clickFunction(event, record)}
         >
           <div>{action.label}</div>

diff --git a/services/common/src/components/documents/ArchiveDocumentModal.spec.tsx b/services/common/src/components/documents/ArchiveDocumentModal.spec.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { ReduxWrapper } from "@mds/common/tests/utils/ReduxWrapper";
+import { MINEDOCUMENTS } from "@mds/common/tests/mocks/dataMocks";
+import ArchiveDocumentModal from "./ArchiveDocumentModal";
+
+describe("ArchiveDocumentModal", () => {
+  it("renders correctly and matches the snapshot", () => {
+    const { container } = render(
+      <ReduxWrapper>
+        <ArchiveDocumentModal
+          documents={MINEDOCUMENTS.records}
+          handleSubmit={jest.fn().mockReturnValue(Promise.resolve())}
+        />
+      </ReduxWrapper>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/services/common/src/components/documents/ArchiveDocumentModal.tsx b/services/common/src/components/documents/ArchiveDocumentModal.tsx
@@ -1,25 +1,24 @@
 import React, { FC } from "react";
-
-import { Alert, Button, Form, Typography } from "antd";
-import { IMineDocument } from "@mds/common";
+import { Alert, Typography } from "antd";
+import { IMineDocument } from "@mds/common/interfaces/mineDocument.interface";
 import { MineDocument } from "@mds/common/models/documents/document";
 import DocumentTable from "./DocumentTable";
+import FormWrapper from "../forms/FormWrapper";
+import RenderCancelButton from "../forms/RenderCancelButton";
+import RenderSubmitButton from "../forms/RenderSubmitButton";
+import { FORM } from "@mds/common/constants";
 
 interface ArchiveDocumentModalProps {
   documents: IMineDocument[];
   handleSubmit(documents: IMineDocument[]): Promise<void>;
-  closeModal(): void;
 }
 
 const transformDocs = (documents: IMineDocument[]): MineDocument[] =>
   documents.map((doc) => new MineDocument(doc));
 
-const ArchiveDocumentModal: FC<ArchiveDocumentModalProps> = (props: ArchiveDocumentModalProps) => {
+const ArchiveDocumentModal: FC<ArchiveDocumentModalProps> = ({ documents, handleSubmit }) => {
   return (
-    <Form
-      layout="vertical"
-      onFinish={() => props.handleSubmit(props.documents).then(props.closeModal)}
-    >
+    <FormWrapper name={FORM.ARCHIVE_DOCUMENT} isModal onSubmit={() => handleSubmit(documents)}>
       <Typography.Paragraph>
         <Alert
           message="Archived files are not reviewed as part of the submission"
@@ -30,24 +29,20 @@ const ArchiveDocumentModal: FC<ArchiveDocumentModalProps> = (props: ArchiveDocum
       </Typography.Paragraph>
 
       <Typography.Paragraph strong>
-        You&apos;re about to archive the following file{props.documents?.length > 1 ? "s" : ""}:
+        You&apos;re about to archive the following file{documents?.length > 1 ? "s" : ""}:
       </Typography.Paragraph>
 
       <DocumentTable
-        documents={transformDocs(props.documents)}
+        documents={transformDocs(documents)}
         view="minimal"
         excludedColumnKeys={["actions", "category"]}
       />
 
       <div className="ant-modal-footer">
-        <Button className="full-mobile" onClick={props.closeModal}>
-          Cancel
-        </Button>
-        <Button className="full-mobile" type="primary" htmlType="submit">
-          Archive
-        </Button>
+        <RenderCancelButton />
+        <RenderSubmitButton buttonText="Archive" disableOnClean={false} />
       </div>
-    </Form>
+    </FormWrapper>
   );
 };
 

diff --git a/services/common/src/components/documents/DeleteDocumentModal.spec.tsx b/services/common/src/components/documents/DeleteDocumentModal.spec.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { ReduxWrapper } from "@mds/common/tests/utils/ReduxWrapper";
+import { MINEDOCUMENTS } from "@mds/common/tests/mocks/dataMocks";
+import DeleteDocumentModal from "./DeleteDocumentModal";
+import { MineDocument } from "@mds/common/models/documents/document";
+
+describe("DeleteDocumentModal", () => {
+  it("renders correctly and matches the snapshot", () => {
+    const { container } = render(
+      <ReduxWrapper>
+        <DeleteDocumentModal
+          documents={MINEDOCUMENTS.records.map((d) => new MineDocument(d))}
+          handleSubmit={jest.fn().mockReturnValue(Promise.resolve())}
+        />
+      </ReduxWrapper>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/services/common/src/components/documents/DeleteDocumentModal.tsx b/services/common/src/components/documents/DeleteDocumentModal.tsx
@@ -1,21 +1,20 @@
 import React, { FC } from "react";
-
-import { Alert, Button, Form, Typography } from "antd";
+import { Alert, Typography } from "antd";
 import { MineDocument } from "@mds/common/models/documents/document";
 import DocumentTable from "./DocumentTable";
+import FormWrapper from "../forms/FormWrapper";
+import RenderCancelButton from "../forms/RenderCancelButton";
+import RenderSubmitButton from "../forms/RenderSubmitButton";
+import { FORM } from "@mds/common/constants";
 
 interface DeleteDocumentModalProps {
   documents: MineDocument[];
   handleSubmit(documents: MineDocument[]): Promise<void>;
-  closeModal(): void;
 }
 
-const DeleteDocumentModal: FC<DeleteDocumentModalProps> = (props: DeleteDocumentModalProps) => {
+const DeleteDocumentModal: FC<DeleteDocumentModalProps> = ({ documents, handleSubmit }) => {
   return (
-    <Form
-      layout="vertical"
-      onFinish={() => props.handleSubmit(props.documents).then(props.closeModal)}
-    >
+    <FormWrapper name={FORM.DELETE_DOCUMENT} onSubmit={() => handleSubmit(documents)} isModal>
       <Typography.Paragraph>
         <Alert
           message="Deleted files are not reviewed as part of the submission"
@@ -26,24 +25,20 @@ const DeleteDocumentModal: FC<DeleteDocumentModalProps> = (props: DeleteDocument
       </Typography.Paragraph>
 
       <Typography.Paragraph strong>
-        You&apos;re about to delete the following file{props.documents?.length > 1 ? "s" : ""}:
+        You&apos;re about to delete the following file{documents?.length > 1 ? "s" : ""}:
       </Typography.Paragraph>
 
       <DocumentTable
-        documents={props.documents}
+        documents={documents}
         view="minimal"
         excludedColumnKeys={["actions", "category"]}
       />
 
       <div className="ant-modal-footer">
-        <Button className="full-mobile" onClick={props.closeModal}>
-          Cancel
-        </Button>
-        <Button className="full-mobile" type="primary" htmlType="submit">
-          Delete
-        </Button>
+        <RenderCancelButton />
+        <RenderSubmitButton buttonText="Delete" disableOnClean={false} />
       </div>
-    </Form>
+    </FormWrapper>
   );
 };
 

diff --git a/services/common/src/components/documents/DocumentTable.spec.tsx b/services/common/src/components/documents/DocumentTable.spec.tsx
@@ -1,19 +1,37 @@
 import React from "react";
-import { render } from "@testing-library/react";
+import { render, fireEvent } from "@testing-library/react";
 import * as MOCK from "@mds/common/tests/mocks/dataMocks";
 import DocumentTable from "./DocumentTable";
 import { MineDocument } from "@mds/common/models/documents/document";
 import { ReduxWrapper } from "@mds/common/tests/utils/ReduxWrapper";
+import * as modalActions from "@mds/common/redux/actions/modalActions";
 
 const documents = MOCK.PROJECT_SUMMARY.documents.map((d) => new MineDocument(d));
 
 describe("DocumentTable", () => {
-  it("renders properly", () => {
-    const { container } = render(
+  const removeFunc = jest.fn();
+  const onArchiveFunc = jest.fn();
+  const onReplaceFunc = jest.fn();
+
+  const openModalSpy = jest.spyOn(modalActions, "openModal");
+  it("renders properly", async () => {
+    const { container, getAllByText, findByTestId } = render(
       <ReduxWrapper>
-        <DocumentTable documents={documents} />
+        <DocumentTable
+          documents={documents}
+          showVersionHistory
+          canArchiveDocuments
+          removeDocument={removeFunc}
+          onArchivedDocuments={onArchiveFunc}
+          onReplaceDocument={onReplaceFunc}
+        />
       </ReduxWrapper>
     );
     expect(container).toMatchSnapshot();
+    const actionsButton = getAllByText("Actions")[0];
+    fireEvent.mouseEnter(actionsButton);
+    const archiveAction = await findByTestId("action-button-archive");
+    fireEvent.click(archiveAction);
+    expect(openModalSpy).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/services/common/src/components/documents/DocumentTable.tsx b/services/common/src/components/documents/DocumentTable.tsx
@@ -63,8 +63,8 @@ export const DocumentTable: FC<DocumentTableProps> = ({
   };
 
   const [rowSelection, setRowSelection] = useState([]);
-  const [isCompressionModal, setCompressionModal] = useState(false);
-  const [isCompressionInProgress, setCompressionInProgress] = useState(false);
+  const [isCompressionModal, setIsCompressionModal] = useState(false);
+  const [isCompressionInProgress, setIsCompressionInProgress] = useState(false);
   const [documentsCanBulkDropDown, setDocumentsCanBulkDropDown] = useState(false);
   const { isFeatureEnabled } = useFeatureFlag();
 
@@ -114,7 +114,6 @@ export const DocumentTable: FC<DocumentTableProps> = ({
       openModal({
         props: {
           title: `Archive ${docs?.length > 1 ? "Multiple Files" : "File"}`,
-          closeModal: handleCloseModal,
           handleSubmit: async () => {
             await dispatch(
               archiveMineDocuments(
@@ -123,8 +122,9 @@ export const DocumentTable: FC<DocumentTableProps> = ({
               )
             );
             if (props.onArchivedDocuments) {
-              props.onArchivedDocuments(docs);
+              await props.onArchivedDocuments(docs);
             }
+            handleCloseModal();
           },
           documents: docs,
         },
@@ -139,16 +139,12 @@ export const DocumentTable: FC<DocumentTableProps> = ({
       openModal({
         props: {
           title: `Delete ${docs?.length > 1 ? "Multiple Files" : "File"}`,
-          closeModal: handleCloseModal,
           handleSubmit: async () => {
-            for (const doc of docs) {
-              await removeDocument(event, doc.key, documentParent);
-            }
+            await Promise.all(docs.map((doc) => removeDocument(event, doc.key, documentParent)));
             handleCloseModal();
           },
           documents: docs,
         },
-
         content: DeleteDocumentModal,
       })
     );
@@ -160,7 +156,6 @@ export const DocumentTable: FC<DocumentTableProps> = ({
       openModal({
         props: {
           title: `Replace File`,
-          closeModal: handleCloseModal,
           handleSubmit: async (document: MineDocument) => {
             const newDocuments = documents.map((d) =>
               d.mine_document_guid === document.mine_document_guid ? document : d
@@ -281,22 +276,22 @@ export const DocumentTable: FC<DocumentTableProps> = ({
 
   const bulkItems: MenuProps["items"] = [
     {
-      key: "0",
+      key: FileOperations.Download,
       icon: <DownloadOutlined />,
       label: (
         <button
           type="button"
           className="full add-permit-dropdown-button"
           onClick={() => {
-            setCompressionModal(true);
+            setIsCompressionModal(true);
           }}
         >
           <div>Download File(s)</div>
         </button>
       ),
     },
     {
-      key: "1",
+      key: FileOperations.Archive,
       icon: <InboxOutlined />,
       label: (
         <button
@@ -310,15 +305,15 @@ export const DocumentTable: FC<DocumentTableProps> = ({
         </button>
       ),
     },
-  ];
+  ].filter((a) => allowedTableActions[a.key]);
 
   const renderBulkActions = () => {
     let element = (
       <Button
         className="ant-btn ant-btn-primary"
         disabled={rowSelection.length === 0 || isCompressionInProgress}
         onClick={() => {
-          setCompressionModal(true);
+          setIsCompressionModal(true);
         }}
       >
         <div>Download</div>
@@ -385,9 +380,9 @@ export const DocumentTable: FC<DocumentTableProps> = ({
     <div>
       <DocumentCompression
         mineDocuments={rowSelection}
-        setCompressionModalVisible={setCompressionModal}
+        setCompressionModalVisible={setIsCompressionModal}
         isCompressionModalVisible={isCompressionModal}
-        setCompressionInProgress={setCompressionInProgress}
+        setCompressionInProgress={setIsCompressionInProgress}
         showDownloadWarning={showVersionHistory || canArchiveDocuments}
       />
       {renderBulkActions()}

diff --git a/...odalContent/ReplaceDocumentModal.spec.tsx → ...s/documents/ReplaceDocumentModal.spec.tsx b/...odalContent/ReplaceDocumentModal.spec.tsx → ...s/documents/ReplaceDocumentModal.spec.tsx
@@ -4,22 +4,17 @@ import ReplaceDocumentModal from "@mds/common/components/documents/ReplaceDocume
 import { render } from "@testing-library/react";
 import { ReduxWrapper } from "@mds/common/tests/utils/ReduxWrapper";
 import { MINEDOCUMENTS } from "@mds/common/tests/mocks/dataMocks";
-import FormWrapper from "@mds/common/components/forms/FormWrapper";
-import { FORM } from "@mds/common/constants/forms";
-
-const props = {
-  document: MINEDOCUMENTS.records[0],
-  handleSubmit: jest.fn().mockReturnValue(Promise.resolve()),
-  closeModal: jest.fn(),
-  postNewDocumentVersion: jest.fn().mockReturnValue(Promise.resolve()),
-  alertMessage: "This is a test alert message.",
-};
+import { MineDocument } from "@mds/common/models/documents/document";
 
 describe("ReplaceDocumentModal", () => {
   it("renders correctly and matches the snapshot", () => {
     const { container } = render(
-      <ReduxWrapper initialState={{}}>
-        <ReplaceDocumentModal {...props} />
+      <ReduxWrapper>
+        <ReplaceDocumentModal
+          document={new MineDocument(MINEDOCUMENTS.records[0])}
+          handleSubmit={jest.fn().mockReturnValue(Promise.resolve())}
+          alertMessage="This is a test alert message."
+        />
       </ReduxWrapper>
     );
     expect(container.firstChild).toMatchSnapshot();