Added the Import & information modal/changed the action buttons to icons

Added the Import & information modal/changed the action buttons to icons

packages/esm-import-export-app/src/components/modals/import-modal.component.tsx

@@ -0,0 +1,42 @@
+import React, { Dispatch, SetStateAction } from "react";
+import { Form, FormGroup, Modal, FileUploader } from "@carbon/react";
+import styles from "../styles/modals.scss";
+
+const ImportModalComponent: React.FC<{
+  isOpen: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+}> = ({ isOpen, setOpen }) => {
+  const handleSubmit = () => {
+    setOpen(false);
+  };
+  return (
+    <Modal
+      open={isOpen}
+      onRequestSubmit={handleSubmit}
+      onRequestClose={() => setOpen(false)}
+      modalHeading="Import"
+      modalLabel="Import"
+      primaryButtonText="Import"
+      secondaryButtonText="Cancel"
+    >
+      <div className={styles.importBody}>
+        <Form>
+          <FormGroup controlId="form">
+            <FileUploader
+              buttonLabel="Choose the file"
+              labelTitle="Choose Import File"
+              buttonKind="primary"
+              filenameStatus="edit"
+              accept={[".jpg", ".png"]}
+              multiple={true}
+              disabled={false}
+              name=""
+            />
+          </FormGroup>
+        </Form>
+      </div>
+    </Modal>
+  );
+};
+
+export default ImportModalComponent;

packages/esm-import-export-app/src/components/modals/info-modal.component.tsx

@@ -0,0 +1,50 @@
+import React, { Dispatch, SetStateAction } from "react";
+import { Modal } from "@carbon/react";
+import styles from "../styles/modals.scss";
+import { dummyBackupTableData } from "../../data/dummy";
+import { CheckmarkFilled, Misuse } from "@carbon/react/icons";
+
+const InfoModalComponent: React.FC<{
+  isOpen: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+  rowId: string;
+}> = ({ isOpen, setOpen, rowId }) => {
+  const row = dummyBackupTableData.find((row) => row.id === rowId);
+
+  if (!row) return null;
+  return (
+    <Modal
+      open={isOpen}
+      onRequestClose={() => setOpen(false)}
+      // modalHeading="Info Module"
+      // modalLabel="Info"
+      passiveModal={true}
+    >
+      <div key={row.id}>
+        {row.status === "completed" ? (
+          <div className={styles.infoBody}>
+            <CheckmarkFilled size={80} />
+            <h3>Success</h3>
+            <p>
+              The file can be found on <strong>{row.downloadPath} </strong>
+            </p>
+          </div>
+        ) : (
+          <div className={styles.infoBody}>
+            <Misuse size={80} />
+            <h3 className={styles.infoBody}>Failed</h3>
+            <p>
+              Error:
+              <p style={{ color: "red" }}>
+                <strong>{row.errorMessage} </strong>{" "}
+              </p>
+              Try Again!!{" "}
+            </p>
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+};
+
+export default InfoModalComponent;

packages/esm-import-export-app/src/components/styles/modals.scss

@@ -4,3 +4,14 @@
   flex-direction: column;
   padding: 2rem;
 }
+
+.importBody{
+  display: flex;
+  flex-direction: column;
+  padding-left: 2rem;
+  margin-bottom: -3rem;
+}
+
+.infoBody{
+  text-align: center;
+}

packages/esm-import-export-app/src/data/dummy.ts

@@ -3,24 +3,28 @@ export const dummyBackupTableData = [
     id: "e022fa8d-1bb5-4d14-bef8-8637ec385d56",
     date: new Date(2020, 2, 1).toLocaleString(),
     user: "Dr Amina",
-    status: "completed"
+    status: "completed",
+    downloadPath: "./downloads/backupe022",
   },
   {
     id: "dc8cef03-5ef6-4dce-9bb5-347a8218431b",
     date: new Date(2021, 2, 31).toLocaleString(),
     user: "Dr. Amina",
-    status: "failed"
+    status: "failed",
+    errorMessage: "Low Storage",
   },
   {
     id: "fc96cd48-80d6-4ca3-8974-9856a179cd4b",
     date: new Date(2024, 12, 1).toLocaleString(),
     user: "Data Clerk",
-    status: "failed"
+    status: "failed",
+    errorMessage: "Server Error 500",
   },
   {
     id: "3e7ed04c-a4fe-410e-a557-ed91f22d0e5a",
     date: new Date(2022, 2, 1).toLocaleString(),
     user: "Dr Khalif",
-    status: "completed"
+    status: "completed",
+    downloadPath: "./downloads/backup3e7ed",
   },
-]
+];

packages/esm-import-export-app/src/hooks/useBackup.ts

@@ -1,10 +1,13 @@
-import {useState} from "react";
+import { useState } from "react";
 
 export const useBackup = () => {
-  const [isDownloadModalOpen, setIsDownloadModalOpen] = useState<boolean>(false);
+  const [isDownloadModalOpen, setIsDownloadModalOpen] =
+    useState<boolean>(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState<boolean>(false);
   const [isNewModalOpen, setIsNewModalOpen] = useState<boolean>(false);
   const [isRetryModalOpen, setIsRetryModalOpen] = useState<boolean>(false);
+  const [isImportModalOpen, setIsImportModalOpen] = useState<boolean>(false);
+  const [isInfoModalOpen, setIsInfoModalOpen] = useState<boolean>(false);
 
   const tableHeaders = [
     {
@@ -19,7 +22,7 @@ export const useBackup = () => {
       key: "status",
       header: "Status",
     },
-  ]
+  ];
 
   return {
     tableHeaders,
@@ -31,5 +34,9 @@ export const useBackup = () => {
     setIsNewModalOpen,
     setIsRetryModalOpen,
     isRetryModalOpen,
-  }
-}
+    setIsImportModalOpen,
+    isImportModalOpen,
+    isInfoModalOpen,
+    setIsInfoModalOpen,
+  };
+};