From d54115c9960205b13e5019175dca2417a4694d0d Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Wed, 20 Jul 2022 14:50:23 +1000
Subject: [PATCH] sync changes with rowy.app

---
 src/components/AccessDenied.tsx               |  1 +
 src/components/ErrorFallback.tsx              | 48 ++++++++++++-------
 .../NavDrawer/NavDrawerContents.tsx           |  6 +--
 .../Navigation/NavDrawer/NavTableSection.tsx  |  2 +-
 src/pages/NotFoundPage.tsx                    |  7 ++-
 src/theme/components.tsx                      |  6 +++
 6 files changed, 45 insertions(+), 25 deletions(-)

diff --git a/src/components/AccessDenied.tsx b/src/components/AccessDenied.tsx
index fbc0b81f..792e9af3 100644
--- a/src/components/AccessDenied.tsx
+++ b/src/components/AccessDenied.tsx
@@ -31,6 +31,7 @@ export default function AccessDenied({ resetErrorBoundary }: FallbackProps) {
 
   return (
     <EmptyState
+      role="alert"
       fullScreen
       Icon={SecurityIcon}
       message="Access denied"
diff --git a/src/components/ErrorFallback.tsx b/src/components/ErrorFallback.tsx
index 93764d63..d1c541b5 100644
--- a/src/components/ErrorFallback.tsx
+++ b/src/components/ErrorFallback.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import { FallbackProps } from "react-error-boundary";
 import { useLocation, Link } from "react-router-dom";
 
-import { Button } from "@mui/material";
+import { Typography, Button } from "@mui/material";
 import ReloadIcon from "@mui/icons-material/Refresh";
 import InlineOpenInNewIcon from "@src/components/InlineOpenInNewIcon";
 import { Tables as TablesIcon } from "@src/assets/icons";
@@ -17,18 +17,11 @@ export const ERROR_TABLE_NOT_FOUND = "Table not found";
 
 export interface IErrorFallbackProps extends FallbackProps, IEmptyStateProps {}
 
-export default function ErrorFallback({
+export function ErrorFallbackContents({
   error,
   resetErrorBoundary,
   ...props
 }: IErrorFallbackProps) {
-  // Reset error boundary when navigating away from the page
-  const location = useLocation();
-  const [errorPathname] = useState(location.pathname);
-  useEffect(() => {
-    if (errorPathname !== location.pathname) resetErrorBoundary();
-  }, [errorPathname, location.pathname, resetErrorBoundary]);
-
   if ((error as any).code === "permission-denied")
     return (
       <AccessDenied error={error} resetErrorBoundary={resetErrorBoundary} />
@@ -38,13 +31,17 @@ export default function ErrorFallback({
     message: "Something went wrong",
     description: (
       <>
-        <span>
+        <Typography variant="inherit" style={{ whiteSpace: "pre-line" }}>
           {(error as any).code && <b>{(error as any).code}: </b>}
           {error.message}
-        </span>
+        </Typography>
         <Button
           size={props.basic ? "small" : "medium"}
-          href={meta.repository.url.replace(".git", "") + "/issues/new/choose"}
+          href={
+            meta.repository.url.replace(".git", "") +
+            "/issues/new?labels=bug&template=bug_report.md&title=Error: " +
+            error.message.replace("\n", " ")
+          }
           target="_blank"
           rel="noopener noreferrer"
         >
@@ -60,7 +57,9 @@ export default function ErrorFallback({
       message: ERROR_TABLE_NOT_FOUND,
       description: (
         <>
-          <span>Make sure you have the right ID</span>
+          <Typography variant="inherit">
+            Make sure you have the right ID
+          </Typography>
           <code>{error.message.replace(ERROR_TABLE_NOT_FOUND + ": ", "")}</code>
           <Button
             size={props.basic ? "small" : "medium"}
@@ -84,7 +83,9 @@ export default function ErrorFallback({
       message: "New update available",
       description: (
         <>
-          <span>Reload this page to get the latest update</span>
+          <Typography variant="inherit">
+            Reload this page to get the latest update
+          </Typography>
           <Button
             size={props.basic ? "small" : "medium"}
             variant="outlined"
@@ -99,12 +100,25 @@ export default function ErrorFallback({
     };
   }
 
-  return <EmptyState fullScreen {...renderProps} {...props} />;
+  return <EmptyState role="alert" fullScreen {...renderProps} {...props} />;
+}
+
+export default function ErrorFallback(props: IErrorFallbackProps) {
+  const { resetErrorBoundary } = props;
+
+  // Reset error boundary when navigating away from the page
+  const location = useLocation();
+  const [errorPathname] = useState(location.pathname);
+  useEffect(() => {
+    if (errorPathname !== location.pathname) resetErrorBoundary();
+  }, [errorPathname, location.pathname, resetErrorBoundary]);
+
+  return <ErrorFallbackContents {...props} />;
 }
 
 export function InlineErrorFallback(props: IErrorFallbackProps) {
   return (
-    <ErrorFallback
+    <ErrorFallbackContents
       {...props}
       fullScreen={false}
       basic
@@ -115,5 +129,5 @@ export function InlineErrorFallback(props: IErrorFallbackProps) {
 }
 
 export function NonFullScreenErrorFallback(props: IErrorFallbackProps) {
-  return <ErrorFallback {...props} fullScreen={false} />;
+  return <ErrorFallbackContents {...props} fullScreen={false} />;
 }
diff --git a/src/layouts/Navigation/NavDrawer/NavDrawerContents.tsx b/src/layouts/Navigation/NavDrawer/NavDrawerContents.tsx
index 75214827..04f1062c 100644
--- a/src/layouts/Navigation/NavDrawer/NavDrawerContents.tsx
+++ b/src/layouts/Navigation/NavDrawer/NavDrawerContents.tsx
@@ -2,7 +2,7 @@ import { useAtom, useSetAtom } from "jotai";
 import { find, groupBy } from "lodash-es";
 
 import { ListItemIcon, ListItemText, Divider } from "@mui/material";
-import HomeIcon from "@mui/icons-material/HomeOutlined";
+import { Tables as TablesIcon } from "@src/assets/icons";
 import AddIcon from "@mui/icons-material/Add";
 
 import NavItem from "./NavItem";
@@ -54,9 +54,9 @@ export default function NavDrawerContents({
       <li>
         <NavItem to={ROUTES.tables} onClick={closeDrawer}>
           <ListItemIcon>
-            <HomeIcon />
+            <TablesIcon />
           </ListItemIcon>
-          <ListItemText primary="Home" />
+          <ListItemText primary="Tables" />
         </NavItem>
       </li>
 
diff --git a/src/layouts/Navigation/NavDrawer/NavTableSection.tsx b/src/layouts/Navigation/NavDrawer/NavTableSection.tsx
index 6867fae6..5a1c0930 100644
--- a/src/layouts/Navigation/NavDrawer/NavTableSection.tsx
+++ b/src/layouts/Navigation/NavDrawer/NavTableSection.tsx
@@ -48,7 +48,7 @@ export default function NavTableSection({
           {isFavorites ? <FavoriteIcon /> : <FolderIcon />}
         </ListItemIcon>
 
-        <ListItemText primary={section} style={{ textAlign: "left" }} />
+        <ListItemText primary={section} />
 
         <ListItemSecondaryAction>
           <ChevronDown
diff --git a/src/pages/NotFoundPage.tsx b/src/pages/NotFoundPage.tsx
index 6a93e35f..41a3f22c 100644
--- a/src/pages/NotFoundPage.tsx
+++ b/src/pages/NotFoundPage.tsx
@@ -2,8 +2,7 @@ import { useAtom } from "jotai";
 import { Link } from "react-router-dom";
 
 import { Button } from "@mui/material";
-import { Go as GoIcon } from "@src/assets/icons";
-import HomeIcon from "@mui/icons-material/HomeOutlined";
+import { Go as GoIcon, Tables as TablesIcon } from "@src/assets/icons";
 
 import AuthLayout from "@src/layouts/AuthLayout";
 import Navigation from "@src/layouts/Navigation";
@@ -29,9 +28,9 @@ export default function NotFound() {
               sx={{ mt: 3 }}
               component={Link}
               to={ROUTES.home}
-              startIcon={<HomeIcon />}
+              startIcon={<TablesIcon />}
             >
-              Home
+              Tables
             </Button>
           }
           style={{ marginTop: -TOP_BAR_HEIGHT }}
diff --git a/src/theme/components.tsx b/src/theme/components.tsx
index 342a92ea..6cf7c4ca 100644
--- a/src/theme/components.tsx
+++ b/src/theme/components.tsx
@@ -1339,6 +1339,12 @@ export const components = (theme: Theme): ThemeOptions => {
         },
       },
 
+      MuiSkeleton: {
+        styleOverrides: {
+          rectangular: { borderRadius: theme.shape.borderRadius },
+        },
+      },
+
       MuiRating: {
         styleOverrides: {
           iconFilled: { color: theme.palette.text.secondary },