From c37d0d9f56c610fab3bbc29d64c63838105ad971 Mon Sep 17 00:00:00 2001
From: Munyua123 <earlmunyua96@gmail.com>
Date: Wed, 18 Sep 2024 16:05:05 +0300
Subject: [PATCH] Added the Import & infomration modal/changed the action
 buttons to icons

---
 .../modals/import-modal.component.tsx         |  42 +++++
 .../modals/info-modal.component.tsx           |  50 ++++++
 .../src/components/styles/modals.scss         |  11 ++
 .../esm-import-export-app/src/data/dummy.ts   |  14 +-
 .../src/hooks/useBackup.ts                    |  17 +-
 .../src/views/export.component.tsx            | 168 ++++++++++++++----
 .../src/views/styles/index.scss               |  14 +-
 7 files changed, 271 insertions(+), 45 deletions(-)
 create mode 100644 packages/esm-import-export-app/src/components/modals/import-modal.component.tsx
 create mode 100644 packages/esm-import-export-app/src/components/modals/info-modal.component.tsx

diff --git a/packages/esm-import-export-app/src/components/modals/import-modal.component.tsx b/packages/esm-import-export-app/src/components/modals/import-modal.component.tsx
new file mode 100644
index 0000000..f49ed1f
--- /dev/null
+++ b/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;
diff --git a/packages/esm-import-export-app/src/components/modals/info-modal.component.tsx b/packages/esm-import-export-app/src/components/modals/info-modal.component.tsx
new file mode 100644
index 0000000..7d88d7b
--- /dev/null
+++ b/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;
diff --git a/packages/esm-import-export-app/src/components/styles/modals.scss b/packages/esm-import-export-app/src/components/styles/modals.scss
index ebdabbe..4c92b62 100644
--- a/packages/esm-import-export-app/src/components/styles/modals.scss
+++ b/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;
+}
\ No newline at end of file
diff --git a/packages/esm-import-export-app/src/data/dummy.ts b/packages/esm-import-export-app/src/data/dummy.ts
index 708c890..e8308d8 100644
--- a/packages/esm-import-export-app/src/data/dummy.ts
+++ b/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",
   },
-]
+];
diff --git a/packages/esm-import-export-app/src/hooks/useBackup.ts b/packages/esm-import-export-app/src/hooks/useBackup.ts
index 931650d..7ee8359 100644
--- a/packages/esm-import-export-app/src/hooks/useBackup.ts
+++ b/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,
+  };
+};
diff --git a/packages/esm-import-export-app/src/views/export.component.tsx b/packages/esm-import-export-app/src/views/export.component.tsx
index fb2646c..af88fcf 100644
--- a/packages/esm-import-export-app/src/views/export.component.tsx
+++ b/packages/esm-import-export-app/src/views/export.component.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import styles from "./styles/index.scss"
+import React, { useState } from "react";
+import styles from "./styles/index.scss";
 import ImportExportIllustrationComponent from "../components/import-export-illustration.component";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
 import MetricCardComponent from "../components/metric-card.component";
 import {
   Button,
@@ -14,14 +14,23 @@ import {
   TableHeader,
   TableRow,
   TableToolbar,
-  TableToolbarContent
+  TableToolbarContent,
+  Tooltip,
 } from "@carbon/react";
-import {dummyBackupTableData} from "../data/dummy";
-import {useBackup} from "../hooks/useBackup";
+import { dummyBackupTableData } from "../data/dummy";
+import { useBackup } from "../hooks/useBackup";
 import DownloadModalComponent from "../components/modals/download-modal.component";
 import DeleteModalComponent from "../components/modals/delete-modal.component";
 import NewBackupModal from "../components/modals/new-backup.component";
 import RetryModalComponent from "../components/modals/retry-modal.component";
+import ImportModalComponent from "../components/modals/import-modal.component";
+import InfoModalComponent from "../components/modals/info-modal.component";
+import {
+  Download,
+  Information,
+  TrashCan,
+  RetryFailed,
+} from "@carbon/react/icons";
 
 interface tableHeader {
   key: string;
@@ -29,7 +38,7 @@ interface tableHeader {
 }
 
 const Home: React.FC = () => {
-  const {t} = useTranslation()
+  const { t } = useTranslation();
   const {
     tableHeaders,
     isDownloadModalOpen,
@@ -40,62 +49,135 @@ const Home: React.FC = () => {
     isNewModalOpen,
     isRetryModalOpen,
     setIsRetryModalOpen,
-  } = useBackup()
+    isImportModalOpen,
+    setIsImportModalOpen,
+    isInfoModalOpen,
+    setIsInfoModalOpen,
+  } = useBackup();
+
+  const [selectedRowId, setSelectedRowId] = useState<string | null>(null);
 
+  const handleOpenInfoModal = (rowId: string) => {
+    setSelectedRowId(rowId);
+    setIsInfoModalOpen(true);
+  };
 
   return (
     <div className={styles.page}>
-
       <div className={styles.header}>
-        <ImportExportIllustrationComponent/>
+        <ImportExportIllustrationComponent />
         <div className={styles.headerTextWrapper}>
-          <p className={styles.headerSubText}>{t("importExport", "Import Export")}</p>
+          <p className={styles.headerSubText}>
+            {t("importExport", "Import Export")}
+          </p>
           <p className={styles.headerTitle}>{t("home", "Home")}</p>
         </div>
       </div>
 
       <div className={styles.body}>
-        <MetricCardComponent stat={new Date().toLocaleString()} title={t("dateOfLastBackup", "Date of last backup")}/>
+        <MetricCardComponent
+          stat={new Date().toLocaleString()}
+          title={t("dateOfLastBackup", "Date of last backup")}
+        />
 
         <div className={styles.datatableWrapper}>
           <DataTable
             rows={dummyBackupTableData}
             headers={tableHeaders}
-            render={({rows, headers, getHeaderProps, getTableProps, getRowProps, getTableContainerProps, getToolbarProps}) => (
+            render={({
+              rows,
+              headers,
+              getHeaderProps,
+              getTableProps,
+              getRowProps,
+              getTableContainerProps,
+              getToolbarProps,
+            }) => (
               <TableContainer title="Backup History">
-                <TableToolbar {...getToolbarProps()} >
-                  <TableToolbarContent >
-                    <Button onClick={()=> setIsNewModalOpen(true)} size="sm" className={styles.newButton} kind="primary">New Backup</Button>
+                <TableToolbar {...getToolbarProps()}>
+                  <TableToolbarContent>
+                    <Button
+                      onClick={() => setIsImportModalOpen(true)}
+                      size="sm"
+                      className={styles.importButton}
+                    >
+                      Import Backup
+                    </Button>
+                    <Button
+                      onClick={() => setIsNewModalOpen(true)}
+                      size="sm"
+                      className={styles.newButton}
+                      kind="primary"
+                    >
+                      New Backup
+                    </Button>
                   </TableToolbarContent>
                 </TableToolbar>
                 <Table {...getTableProps()}>
                   <TableHead>
                     <TableRow>
                       {headers.map((header: tableHeader) => (
-                        <TableHeader {...getHeaderProps({header})}>
+                        <TableHeader {...getHeaderProps({ header })}>
                           {header.header}
                         </TableHeader>
                       ))}
-                      <TableHeader>
-                        Actions
-                      </TableHeader>
+                      <TableHeader>Actions</TableHeader>
                     </TableRow>
                   </TableHead>
                   <TableBody>
-                    {rows.map(row => (
-                      <TableRow {...getRowProps({row})}>
-                        {row.cells.map(cell => (
+                    {rows.map((row) => (
+                      <TableRow {...getRowProps({ row })}>
+                        {row.cells.map((cell) => (
                           <TableCell key={cell.id}>{cell.value}</TableCell>
                         ))}
                         <TableCell className={styles.actionCell}>
-                          {(row.cells.find(cell => cell.info.header === "status")).value === "completed" ? (
-                            <Button onClick={() => setIsDownloadModalOpen(true)} className={styles.actionButton}
-                                    size="sm">Download</Button>
+                          {row.cells.find(
+                            (cell) => cell.info.header === "status"
+                          ).value === "completed" ? (
+                            <Tooltip label="Download">
+                              <Button
+                                onClick={() => setIsDownloadModalOpen(true)}
+                                className={styles.actionButton}
+                                size="sm"
+                              >
+                                <Download size={20} />
+                              </Button>
+                            </Tooltip>
                           ) : (
-                            <Button onClick={() => setIsRetryModalOpen(true)} className={styles.actionButton} size="sm">Retry</Button>
+                            <Tooltip label="Retry">
+                              <Button
+                                onClick={() => setIsRetryModalOpen(true)}
+                                className={styles.actionButton}
+                                size="sm"
+                              >
+                                <RetryFailed size={20} />
+                              </Button>
+                            </Tooltip>
                           )}
-                          <Button onClick={() => setIsDeleteModalOpen(true)} className={styles.actionButton} size="sm"
-                                  kind="danger">Delete</Button>
+                          <Tooltip label="Delete">
+                            <Button
+                              onClick={() => setIsDeleteModalOpen(true)}
+                              className={styles.actionButton}
+                              size="sm"
+                              kind="danger"
+                            >
+                              <TrashCan size={20} />
+                            </Button>
+                          </Tooltip>
+                          <Tooltip
+                            label="More Info"
+                            enterDelayMs={0}
+                            leaveDelayMs={300}
+                          >
+                            <Button
+                              onClick={() => handleOpenInfoModal(row.id)}
+                              className={styles.actionButton}
+                              kind="secondary"
+                              size="sm"
+                            >
+                              <Information size={20} />
+                            </Button>
+                          </Tooltip>
                         </TableCell>
                       </TableRow>
                     ))}
@@ -106,10 +188,30 @@ const Home: React.FC = () => {
           />
         </div>
       </div>
-      <DeleteModalComponent isOpen={isDeleteModalOpen} setOpen={setIsDeleteModalOpen}/>
-      <DownloadModalComponent isOpen={isDownloadModalOpen} setOpen={setIsDownloadModalOpen}/>
-      <NewBackupModal isOpen={isNewModalOpen} setOpen={setIsNewModalOpen}/>
-      <RetryModalComponent isOpen={isRetryModalOpen} setOpen={setIsRetryModalOpen}/>
+      <DeleteModalComponent
+        isOpen={isDeleteModalOpen}
+        setOpen={setIsDeleteModalOpen}
+      />
+      <DownloadModalComponent
+        isOpen={isDownloadModalOpen}
+        setOpen={setIsDownloadModalOpen}
+      />
+      <NewBackupModal isOpen={isNewModalOpen} setOpen={setIsNewModalOpen} />
+      <RetryModalComponent
+        isOpen={isRetryModalOpen}
+        setOpen={setIsRetryModalOpen}
+      />
+      <ImportModalComponent
+        isOpen={isImportModalOpen}
+        setOpen={setIsImportModalOpen}
+      />
+      {selectedRowId && (
+        <InfoModalComponent
+          isOpen={isInfoModalOpen}
+          setOpen={setIsInfoModalOpen}
+          rowId={selectedRowId}
+        />
+      )}
     </div>
   );
 };
diff --git a/packages/esm-import-export-app/src/views/styles/index.scss b/packages/esm-import-export-app/src/views/styles/index.scss
index 65c23d3..57171a2 100644
--- a/packages/esm-import-export-app/src/views/styles/index.scss
+++ b/packages/esm-import-export-app/src/views/styles/index.scss
@@ -60,15 +60,25 @@
   width: fit-content;
 }
 
+.importButton{
+  margin-bottom: 5rem;
+  width: fit-content;
+  margin-right: 2rem;
+}
+
 .actionCell{
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(3, 1fr);
   padding: 0.5rem;
 }
 
 .actionButton{
-  width: 50%;
+  width: 55%;
+  display: flex;
+  align-items: center;
+  justify-content:center;
+  padding: 0;
 }