From 4c387fb5c911e075e39c82b66f796c0090d9a8f5 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Fri, 21 Oct 2022 11:39:25 +1100
Subject: [PATCH] implement requested changes in PR #10

---
 src/assets/icons/index.ts                     |  3 -
 .../TableInformationDrawer/Details.tsx        | 90 +++++--------------
 ...eDrawer.tsx => TableInformationDrawer.tsx} |  2 +-
 .../TableInformationDrawer/index.ts           |  4 +-
 .../TableInformationDrawer/withTemplate.tsx   | 61 -------------
 src/components/TableSettingsDialog/form.tsx   |  2 +-
 .../TableToolbar/TableInformation.tsx         | 10 +--
 src/components/TableToolbar/TableToolbar.tsx  |  7 +-
 src/components/Tables/TableGrid/TableCard.tsx | 14 ++-
 src/pages/Table/TablePage.tsx                 |  2 +-
 src/pages/TablesPage.tsx                      | 14 ++-
 11 files changed, 47 insertions(+), 162 deletions(-)
 rename src/components/TableInformationDrawer/{SideDrawer.tsx => TableInformationDrawer.tsx} (98%)
 delete mode 100644 src/components/TableInformationDrawer/withTemplate.tsx

diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
index 4e60591f..3503e99b 100644
--- a/src/assets/icons/index.ts
+++ b/src/assets/icons/index.ts
@@ -103,9 +103,6 @@ export { FileTableBoxOutline as Project };
 import { TableColumn } from "mdi-material-ui";
 export { TableColumn };
 
-import { InformationOutline } from "mdi-material-ui";
-export { InformationOutline as TableInformation };
-
 export * from "./AddRow";
 export * from "./AddRowTop";
 export * from "./ChevronDown";
diff --git a/src/components/TableInformationDrawer/Details.tsx b/src/components/TableInformationDrawer/Details.tsx
index a3d4640d..3f93721b 100644
--- a/src/components/TableInformationDrawer/Details.tsx
+++ b/src/components/TableInformationDrawer/Details.tsx
@@ -1,15 +1,9 @@
 import { useMemo } from "react";
 import { format } from "date-fns";
+import { find } from "lodash-es";
 import MDEditor from "@uiw/react-md-editor";
 
-import {
-  Box,
-  Grid,
-  IconButton,
-  Stack,
-  Typography,
-  useTheme,
-} from "@mui/material";
+import { Box, IconButton, Stack, Typography } from "@mui/material";
 
 import EditIcon from "@mui/icons-material/EditOutlined";
 
@@ -21,13 +15,9 @@ import {
   tableSettingsDialogAtom,
   userRolesAtom,
 } from "@src/atoms/projectScope";
-import { find } from "lodash-es";
+import { DATE_TIME_FORMAT } from "@src/constants/dates";
 
-export interface IDetailsProps {
-  handleOpenTemplate?: any;
-}
-
-export default function Details({ handleOpenTemplate }: IDetailsProps) {
+export default function Details() {
   const [userRoles] = useAtom(userRolesAtom, projectScope);
   const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
   const [tables] = useAtom(tablesAtom, projectScope);
@@ -41,18 +31,13 @@ export default function Details({ handleOpenTemplate }: IDetailsProps) {
     [tables, tableSettings.id]
   );
 
-  const theme = useTheme();
-
   if (!settings) {
     return null;
   }
 
   const editButton = userRoles.includes("ADMIN") && (
     <IconButton
-      sx={{
-        position: "absolute",
-        right: 0,
-      }}
+      aria-label="Edit"
       onClick={() =>
         openTableSettingsDialog({
           mode: "update",
@@ -68,27 +53,26 @@ export default function Details({ handleOpenTemplate }: IDetailsProps) {
   const { description, details, _createdBy } = settings;
 
   return (
-    <Grid
-      container
-      flexDirection="column"
+    <Stack
+      direction="column"
       gap={3}
       sx={{
-        paddingTop: theme.spacing(3),
-        paddingRight: theme.spacing(3),
-        paddingBottom: theme.spacing(5),
+        paddingTop: 3,
+        paddingRight: 3,
+        paddingBottom: 5,
         "& > .MuiGrid-root": {
           position: "relative",
         },
       }}
     >
       {/* Description */}
-      <Grid container direction="column" gap={1}>
+      <Stack direction="column" gap={1}>
         <Stack
           direction="row"
           justifyContent="space-between"
-          alignItems="center"
+          alignItems="flex-end"
         >
-          <Typography variant="body1" sx={{ fontWeight: 500 }}>
+          <Typography variant="subtitle1" component="h3">
             Description
           </Typography>
           {editButton}
@@ -96,16 +80,16 @@ export default function Details({ handleOpenTemplate }: IDetailsProps) {
         <Typography variant="body2" color="text.secondary">
           {description ? description : "No description"}
         </Typography>
-      </Grid>
+      </Stack>
 
       {/* Details */}
-      <Grid container direction="column" gap={1}>
+      <Stack direction="column" gap={1}>
         <Stack
           direction="row"
           justifyContent="space-between"
-          alignItems="center"
+          alignItems="flex-end"
         >
-          <Typography variant="body1" sx={{ fontWeight: 500 }}>
+          <Typography variant="subtitle1" component="h3">
             Details
           </Typography>
           {editButton}
@@ -123,16 +107,11 @@ export default function Details({ handleOpenTemplate }: IDetailsProps) {
             <MDEditor.Markdown source={details} />
           </Box>
         )}
-      </Grid>
+      </Stack>
 
       {/* Table Audits */}
       {_createdBy && (
-        <Grid
-          container
-          sx={{
-            fontSize: theme.typography.body2,
-          }}
-        >
+        <Stack>
           <Typography
             variant="caption"
             color="text.secondary"
@@ -143,36 +122,13 @@ export default function Details({ handleOpenTemplate }: IDetailsProps) {
             <Typography variant="caption" color="text.primary">
               {_createdBy.displayName}
             </Typography>{" "}
-            at{" "}
+            on{" "}
             <Typography variant="caption" color="text.primary">
-              {format(_createdBy.timestamp.toDate(), "LLL d, yyyy · p")}
+              {format(_createdBy.timestamp.toDate(), DATE_TIME_FORMAT)}
             </Typography>
           </Typography>
-        </Grid>
+        </Stack>
       )}
-
-      {/* Template Settings */}
-      {/* {handleOpenTemplate && (
-        <Divider sx={{ my: 1.5 }} />
-         <Button
-      sx={{ width: "100%", boxShadow: "none", padding: 0 }}
-      onClick={handleOpenTemplate}
-      >
-      <Stack
-      direction="row"
-      justify-content="flex-start"
-      alignItems="center"
-      sx={{ width: "100%" }}
-      >
-      <ChevronLeft />
-      <ListItemText
-      primary="Template - Roadmap"
-      secondary={<StepsProgress steps={5} value={3} />}
-      sx={{ maxWidth: "188px" }}
-      />
-      </Stack
-    </Button> 
-      )} */}
-    </Grid>
+    </Stack>
   );
 }
diff --git a/src/components/TableInformationDrawer/SideDrawer.tsx b/src/components/TableInformationDrawer/TableInformationDrawer.tsx
similarity index 98%
rename from src/components/TableInformationDrawer/SideDrawer.tsx
rename to src/components/TableInformationDrawer/TableInformationDrawer.tsx
index 2221230d..f2074049 100644
--- a/src/components/TableInformationDrawer/SideDrawer.tsx
+++ b/src/components/TableInformationDrawer/TableInformationDrawer.tsx
@@ -107,7 +107,7 @@ export default function SideDrawer() {
                 alignItems="center"
                 py={1}
               >
-                <Typography variant="h5" sx={{ fontWeight: "bold" }}>
+                <Typography variant="h5" component="h2">
                   Information
                 </Typography>
               </Stack>
diff --git a/src/components/TableInformationDrawer/index.ts b/src/components/TableInformationDrawer/index.ts
index 374e8a86..d2fbb0f2 100644
--- a/src/components/TableInformationDrawer/index.ts
+++ b/src/components/TableInformationDrawer/index.ts
@@ -1,2 +1,2 @@
-export * from "../TableToolbar/TableInformation";
-export { default } from "../TableToolbar/TableInformation";
+export * from "./TableInformationDrawer";
+export { default } from "./TableInformationDrawer";
diff --git a/src/components/TableInformationDrawer/withTemplate.tsx b/src/components/TableInformationDrawer/withTemplate.tsx
deleted file mode 100644
index a42bc9c5..00000000
--- a/src/components/TableInformationDrawer/withTemplate.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-// import {
-//   projectScope,
-//   tablesAtom,
-//   templateSettingsDialogAtom,
-// } from "@src/atoms/projectScope";
-// import { TemplateSettings } from "@src/components/Tables/Templates";
-// import { getTemplateById } from "@src/components/Tables/Templates/utills";
-// import { useAtom, useSetAtom } from "jotai";
-// import { useEffect, useState } from "react";
-import Details from "./Details";
-
-export default function withTemplate(DetailsComponent: typeof Details) {
-  //     const [tables] = useAtom(tablesAtom, projectScope);
-  //     const setTemplateSettingsDialog = useSetAtom(
-  //       templateSettingsDialogAtom,
-  //       projectScope
-  //     );
-  //     const [templateData, setTemplateData] = useState<TemplateSettings | null>(
-  //       null
-  //     );
-  //     const { templateSettings } = tableSettings;
-  //     const { draftId, templateId } = templateSettings || {};
-  //     useEffect(() => {
-  //       if (!templateId) {
-  //         throw Error("Template not found");
-  //       }
-  //       getTemplateById(templateId).then((template) => setTemplateData(template));
-  //     }, [templateId]);
-  //     const dialogStateInitializer = () => {
-  //       const matchingTables =
-  //         tables.filter((table) => table.templateSettings?.draftId === draftId) ||
-  //         [];
-  //       const templateTables = templateData!.tables.map((templateTable) => ({
-  //         ...templateTable,
-  //         ...matchingTables.find(
-  //           (matchingTable) =>
-  //             matchingTable.templateSettings?.tableId === templateTable.id
-  //         ),
-  //       }));
-  //       const steps = templateData?.steps.map((step) =>
-  //         step.type === "create_table" ? { ...step, completed: true } : step
-  //       );
-  //       return {
-  //         ...templateData,
-  //         tables: templateTables,
-  //         steps,
-  //       } as TemplateSettings;
-  //     };
-  //     const handleOpenTemplate = () => {
-  //       setTemplateSettingsDialog({
-  //         type: "set_open",
-  //         data: dialogStateInitializer(),
-  //       });
-  //     };
-  //     if (!templateData) {
-  //       return null;
-  //     }
-  return <DetailsComponent handleOpenTemplate={() => {}} />;
-}
-
-// export const DetailsWithTemplate = withTemplate(Details);
diff --git a/src/components/TableSettingsDialog/form.tsx b/src/components/TableSettingsDialog/form.tsx
index 190b02bf..0dddff69 100644
--- a/src/components/TableSettingsDialog/form.tsx
+++ b/src/components/TableSettingsDialog/form.tsx
@@ -255,7 +255,7 @@ export const tableSettings = (
       step: "display",
       type: "tableThumbnail",
       name: "thumbnailFile",
-      label: "Thumbnail Image (optional)",
+      label: "Thumbnail image (optional)",
     },
     {
       step: "display",
diff --git a/src/components/TableToolbar/TableInformation.tsx b/src/components/TableToolbar/TableInformation.tsx
index f53688f1..18169a7d 100644
--- a/src/components/TableToolbar/TableInformation.tsx
+++ b/src/components/TableToolbar/TableInformation.tsx
@@ -1,23 +1,23 @@
 import { useAtom } from "jotai";
 import { RESET } from "jotai/utils";
 
+import TableToolbarButton from "@src/components/TableToolbar/TableToolbarButton";
+import InfoIcon from "@mui/icons-material/InfoOutlined";
+
 import {
   sideDrawerAtom,
   tableScope,
   tableSettingsAtom,
 } from "@src/atoms/tableScope";
 
-import TableToolbarButton from "@src/components/TableToolbar/TableToolbarButton";
-import { TableInformation as TableInformationIcon } from "@src/assets/icons";
-
 export default function TableInformation() {
   const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
   const [sideDrawer, setSideDrawer] = useAtom(sideDrawerAtom, tableScope);
 
   return (
     <TableToolbarButton
-      title="Table Information"
-      icon={<TableInformationIcon />}
+      title="Table information"
+      icon={<InfoIcon />}
       onClick={() => setSideDrawer(sideDrawer ? RESET : "table-information")}
       disabled={!setSideDrawer || tableSettings.id.includes("/")}
     />
diff --git a/src/components/TableToolbar/TableToolbar.tsx b/src/components/TableToolbar/TableToolbar.tsx
index 3e288a88..7af0f6b9 100644
--- a/src/components/TableToolbar/TableToolbar.tsx
+++ b/src/components/TableToolbar/TableToolbar.tsx
@@ -16,6 +16,7 @@ import LoadedRowsStatus from "./LoadedRowsStatus";
 import TableSettings from "./TableSettings";
 import HiddenFields from "./HiddenFields";
 import RowHeight from "./RowHeight";
+import TableInformation from "./TableInformation";
 
 import {
   projectScope,
@@ -36,8 +37,6 @@ import { FieldType } from "@src/constants/fields";
 const Filters = lazy(() => import("./Filters" /* webpackChunkName: "Filters" */));
 // prettier-ignore
 const ImportData = lazy(() => import("./ImportData/ImportData" /* webpackChunkName: "ImportData" */));
-// prettier-ignore
-const TableInformation = lazy(() => import("./TableInformation" /* webpackChunkName: "TableInformation" */));
 
 // prettier-ignore
 const ReExecute = lazy(() => import("./ReExecute" /* webpackChunkName: "ReExecute" */));
@@ -150,9 +149,7 @@ export default function TableToolbar() {
           <TableSettings />
         </>
       )}
-      <Suspense fallback={<ButtonSkeleton />}>
-        <TableInformation />
-      </Suspense>
+      <TableInformation />
       <div className="end-spacer" />
     </Stack>
   );
diff --git a/src/components/Tables/TableGrid/TableCard.tsx b/src/components/Tables/TableGrid/TableCard.tsx
index b601b90a..dd5489a9 100644
--- a/src/components/Tables/TableGrid/TableCard.tsx
+++ b/src/components/Tables/TableGrid/TableCard.tsx
@@ -37,8 +37,8 @@ export default function TableCard({
           </Typography>
         </CardContent>
       </CardActionArea>
-      {thumbnailURL && (
-        <CardContent style={{ flexGrow: 1, paddingTop: 0 }}>
+      <CardContent style={{ flexGrow: 1, paddingTop: 0 }}>
+        {thumbnailURL && (
           <Box
             sx={{
               paddingBottom: "56.25%",
@@ -60,10 +60,8 @@ export default function TableCard({
               }}
             />
           </Box>
-        </CardContent>
-      )}
-      {description && (
-        <CardContent style={{ flexGrow: 1, paddingTop: 0, paddingBottom: 0 }}>
+        )}
+        {description && (
           <Typography
             color="textSecondary"
             sx={{
@@ -75,8 +73,8 @@ export default function TableCard({
           >
             {description}
           </Typography>
-        </CardContent>
-      )}
+        )}
+      </CardContent>
 
       <CardActions>
         <Button
diff --git a/src/pages/Table/TablePage.tsx b/src/pages/Table/TablePage.tsx
index 5f63201f..20671792 100644
--- a/src/pages/Table/TablePage.tsx
+++ b/src/pages/Table/TablePage.tsx
@@ -8,7 +8,7 @@ import { Fade } from "@mui/material";
 import ErrorFallback, {
   InlineErrorFallback,
 } from "@src/components/ErrorFallback";
-import TableInformationDrawer from "@src/components/TableInformationDrawer/SideDrawer";
+import TableInformationDrawer from "@src/components/TableInformationDrawer/TableInformationDrawer";
 import TableToolbarSkeleton from "@src/components/TableToolbar/TableToolbarSkeleton";
 import TableSkeleton from "@src/components/Table/TableSkeleton";
 import EmptyTable from "@src/components/Table/EmptyTable";
diff --git a/src/pages/TablesPage.tsx b/src/pages/TablesPage.tsx
index 757cdf23..e48ab4f3 100644
--- a/src/pages/TablesPage.tsx
+++ b/src/pages/TablesPage.tsx
@@ -1,6 +1,6 @@
 import { useAtom, useSetAtom } from "jotai";
 import { find, groupBy, sortBy } from "lodash-es";
-import { useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 
 import {
   Container,
@@ -21,7 +21,7 @@ import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
 import FavoriteIcon from "@mui/icons-material/Favorite";
 import EditIcon from "@mui/icons-material/EditOutlined";
 import AddIcon from "@mui/icons-material/Add";
-import { TableInformation as TableInformationIcon } from "@src/assets/icons";
+import InfoIcon from "@mui/icons-material/InfoOutlined";
 
 import FloatingSearch from "@src/components/FloatingSearch";
 import SlideTransition from "@src/components/Modal/SlideTransition";
@@ -57,7 +57,6 @@ export default function TablesPage() {
     tableSettingsDialogAtom,
     projectScope
   );
-  const navigate = useNavigate();
   useScrollToHash();
 
   const [results, query, handleQuery] = useBasicSearch(
@@ -163,14 +162,13 @@ export default function TablesPage() {
         color="secondary"
       />
       <IconButton
-        aria-label="Table Information"
+        aria-label="Table information"
         size={view === "list" ? "large" : undefined}
-        onClick={() => {
-          navigate(`${getLink(table)}#sideDrawer="table-information"`);
-        }}
+        component={Link}
+        to={`${getLink(table)}#sideDrawer="table-information"`}
         style={{ marginLeft: 0 }}
       >
-        <TableInformationIcon />
+        <InfoIcon />
       </IconButton>
     </>
   );