App drawer redesign (#686)

* Start on AppDrawer redesign * Add hover * Add settings * ProfileMenu updates * App Drawer Collapse * Fixes and tests * Better settings suspense handling * Fix code style issues with ESLint * Add test * Another test --------- Co-authored-by: Lint Action <github-actions[bot]@users.noreply.github.com>
grai-io · Oct 3, 2023 · bf11e6d · bf11e6d
1 parent 340ef69
commit bf11e6d
Show file tree

Hide file tree

Showing 23 changed files with 882 additions and 192 deletions.
diff --git a/grai-frontend/src/Routes.tsx b/grai-frontend/src/Routes.tsx
@@ -143,13 +143,7 @@ const Routes: React.FC = () => (
               <Route
                 path="settings"
                 element={
-                  <SuspenseOutlet
-                    fallback={
-                      <SettingsLayout>
-                        <Loading />
-                      </SettingsLayout>
-                    }
-                  />
+                  <SuspenseOutlet fallback={<SettingsLayout loading />} />
                 }
               >
                 <Route index element={<Settings />} />

diff --git a/grai-frontend/src/components/icons/Connections.tsx b/grai-frontend/src/components/icons/Connections.tsx
@@ -6,32 +6,29 @@ type ConnectionsProps = {
 
 const Connections: React.FC<ConnectionsProps> = ({ stroke }) => (
   <svg
-    width="48"
-    height="48"
-    viewBox="0 0 48 48"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M33 28V20C32.9996 19.6493 32.9071 19.3048 32.7315 19.0012C32.556 18.6975 32.3037 18.4454 32 18.27L25 14.27C24.696 14.0945 24.3511 14.0021 24 14.0021C23.6489 14.0021 23.304 14.0945 23 14.27L16 18.27C15.6963 18.4454 15.444 18.6975 15.2685 19.0012C15.0929 19.3048 15.0004 19.6493 15 20V28C15.0004 28.3508 15.0929 28.6952 15.2685 28.9989C15.444 29.3025 15.6963 29.5547 16 29.73L23 33.73C23.304 33.9056 23.6489 33.998 24 33.998C24.3511 33.998 24.696 33.9056 25 33.73L32 29.73C32.3037 29.5547 32.556 29.3025 32.7315 28.9989C32.9071 28.6952 32.9996 28.3508 33 28Z"
-      stroke={stroke ?? "white"}
-      strokeOpacity="0.72"
+      d="M21 15.9999V7.9999C20.9996 7.64918 20.9071 7.30471 20.7315 7.00106C20.556 6.69742 20.3037 6.44526 20 6.2699L13 2.2699C12.696 2.09437 12.3511 2.00195 12 2.00195C11.6489 2.00195 11.304 2.09437 11 2.2699L4 6.2699C3.69626 6.44526 3.44398 6.69742 3.26846 7.00106C3.09294 7.30471 3.00036 7.64918 3 7.9999V15.9999C3.00036 16.3506 3.09294 16.6951 3.26846 16.9987C3.44398 17.3024 3.69626 17.5545 4 17.7299L11 21.7299C11.304 21.9054 11.6489 21.9979 12 21.9979C12.3511 21.9979 12.696 21.9054 13 21.7299L20 17.7299C20.3037 17.5545 20.556 17.3024 20.7315 16.9987C20.9071 16.6951 20.9996 16.3506 21 15.9999Z"
+      stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <path
-      d="M15.27 18.96L24 24.01L32.73 18.96"
-      stroke={stroke ?? "white"}
-      strokeOpacity="0.72"
+      d="M3.27002 6.95996L12 12.01L20.73 6.95996"
+      stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <path
-      d="M24 34.08V24"
-      stroke={stroke ?? "white"}
-      strokeOpacity="0.72"
+      d="M12 22.08V12"
+      stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"

diff --git a/grai-frontend/src/components/icons/Edge.tsx b/grai-frontend/src/components/icons/Edge.tsx
@@ -0,0 +1,28 @@
+import React from "react"
+
+const Edge: React.FC = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M14.7273 7.45459H17.4545C18.0515 7.45459 18.6425 7.57216 19.194 7.80059C19.7455 8.02902 20.2466 8.36384 20.6687 8.78592C21.0908 9.20801 21.4256 9.70909 21.654 10.2606C21.8824 10.8121 22 11.4031 22 12C22 12.597 21.8824 13.188 21.654 13.7395C21.4256 14.291 21.0908 14.7921 20.6687 15.2142C20.2466 15.6363 19.7455 15.9711 19.194 16.1995C18.6425 16.4279 18.0515 16.5455 17.4545 16.5455H14.7273M9.27273 16.5455H6.54545C5.94854 16.5455 5.35746 16.4279 4.80598 16.1995C4.2545 15.9711 3.75342 15.6363 3.33133 15.2142C2.47889 14.3617 2 13.2056 2 12C2 10.7945 2.47889 9.63836 3.33133 8.78592C4.18377 7.93348 5.33993 7.45459 6.54545 7.45459H9.27273"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8.36353 12H15.6363"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+export default Edge
diff --git a/grai-frontend/src/components/icons/Graph.tsx b/grai-frontend/src/components/icons/Graph.tsx
@@ -2,33 +2,30 @@ import React from "react"
 
 const Graph: React.FC = () => (
   <svg
-    width="48"
-    height="48"
-    viewBox="0 0 48 48"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M30 32V22"
-      stroke="white"
-      strokeOpacity="0.72"
-      strokeWidth="2"
+      d="M18 20V10"
+      stroke="currentColor"
+      strokeWidth="2.5"
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <path
-      d="M24 32V16"
-      stroke="white"
-      strokeOpacity="0.72"
-      strokeWidth="2"
+      d="M12 20V4"
+      stroke="currentColor"
+      strokeWidth="2.5"
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <path
-      d="M18 32V26"
-      stroke="white"
-      strokeOpacity="0.72"
-      strokeWidth="2"
+      d="M6 20V14"
+      stroke="currentColor"
+      strokeWidth="2.5"
       strokeLinecap="round"
       strokeLinejoin="round"
     />

diff --git a/grai-frontend/src/components/icons/Nodes.tsx b/grai-frontend/src/components/icons/Nodes.tsx
@@ -2,16 +2,15 @@ import React from "react"
 
 const Tables: React.FC = () => (
   <svg
-    width="48"
-    height="48"
-    viewBox="0 0 48 48"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M21 15H17C16.4696 15 15.9609 15.2107 15.5858 15.5858C15.2107 15.9609 15 16.4696 15 17V21M21 15H31C31.5304 15 32.0391 15.2107 32.4142 15.5858C32.7893 15.9609 33 16.4696 33 17V21M21 15V33M15 21V31C15 31.5304 15.2107 32.0391 15.5858 32.4142C15.9609 32.7893 16.4696 33 17 33H21M15 21H33M33 21V31C33 31.5304 32.7893 32.0391 32.4142 32.4142C32.0391 32.7893 31.5304 33 31 33H21"
-      stroke="white"
-      strokeOpacity="0.72"
+      d="M9 3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5V9M9 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V9M9 3V21M3 9V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H9M3 9H21M21 9V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H9"
+      stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"

diff --git a/grai-frontend/src/components/icons/Reports.tsx b/grai-frontend/src/components/icons/Reports.tsx
@@ -2,22 +2,22 @@ import React from "react"
 
 const Reports: React.FC = () => (
   <svg
-    width="48"
-    height="48"
-    viewBox="0 0 48 48"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M33.2099 27.89C32.5737 29.3944 31.5787 30.7202 30.3118 31.7513C29.0449 32.7823 27.5447 33.4874 25.9424 33.8047C24.34 34.1221 22.6843 34.0421 21.1201 33.5718C19.5558 33.1014 18.1305 32.255 16.9689 31.1066C15.8073 29.9582 14.9447 28.5427 14.4565 26.9839C13.9684 25.4251 13.8695 23.7704 14.1685 22.1646C14.4675 20.5587 15.1554 19.0506 16.172 17.772C17.1885 16.4934 18.5028 15.4833 19.9999 14.83"
-      stroke="white"
+      d="M21.2099 15.8901C20.5737 17.3946 19.5787 18.7203 18.3118 19.7514C17.0449 20.7825 15.5447 21.4875 13.9424 21.8049C12.34 22.1222 10.6843 22.0422 9.12006 21.5719C7.55578 21.1015 6.13054 20.2551 4.96893 19.1067C3.80733 17.9583 2.94473 16.5428 2.45655 14.984C1.96837 13.4252 1.86948 11.7706 2.16851 10.1647C2.46755 8.55886 3.15541 7.05071 4.17196 5.77211C5.18851 4.49351 6.5028 3.4834 7.99992 2.83008"
+      stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <path
-      d="M34 24C34 22.6868 33.7413 21.3864 33.2388 20.1732C32.7362 18.9599 31.9997 17.8575 31.0711 16.9289C30.1425 16.0003 29.0401 15.2638 27.8268 14.7612C26.6136 14.2587 25.3132 14 24 14V24H34Z"
-      stroke="white"
+      d="M22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2V12H22Z"
+      stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"

diff --git a/grai-frontend/src/components/icons/Settings.tsx b/grai-frontend/src/components/icons/Settings.tsx
@@ -0,0 +1,35 @@
+import React from "react"
+
+const Settings: React.FC = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_371_180)">
+      <path
+        d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_371_180">
+        <rect width="24" height="24" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+export default Settings
diff --git a/grai-frontend/src/components/layout/AppDrawer.test.tsx b/grai-frontend/src/components/layout/AppDrawer.test.tsx
@@ -1,6 +1,6 @@
 import React from "react"
-import userEvent from "@testing-library/user-event"
-import { act, render, screen, waitFor } from "testing"
+import { userEvent } from "@testing-library/user-event"
+import { act, fireEvent, render, screen, waitFor } from "testing"
 import AppDrawer from "./AppDrawer"
 
 test("renders", async () => {
@@ -9,31 +9,30 @@ test("renders", async () => {
   })
 
   await waitFor(() => {
-    expect(screen.getByText("Profile")).toBeTruthy()
+    expect(screen.getByText("Graph")).toBeTruthy()
   })
 })
 
 test("collapse", async () => {
+  const user = userEvent.setup()
+
   render(<AppDrawer />, {
     withRouter: true,
   })
 
   await waitFor(() => {
-    expect(screen.getByText("Collapse")).toBeTruthy()
+    expect(screen.getByText("Graph")).toBeTruthy()
   })
 
-  await act(async () => await userEvent.click(screen.getByText("Collapse")))
+  fireEvent.mouseEnter(screen.getByText("Graph"))
 
   await waitFor(() => {
-    expect(screen.queryByText("Collapse")).toBeFalsy()
+    expect(screen.getByTestId("LeftIcon")).toBeInTheDocument()
   })
 
-  await act(
-    async () =>
-      await userEvent.click(screen.getByTestId("KeyboardArrowRightIcon"))
-  )
+  await act(async () => await user.click(screen.getByTestId("LeftIcon")))
 
   await waitFor(() => {
-    expect(screen.getByText("Collapse")).toBeTruthy()
+    expect(screen.queryByTestId("LeftIcon")).not.toBeInTheDocument()
   })
 })