Update overview layout and fix few styling issue (#88)

Signed-off-by: Nik Nasr <[email protected]>
restatedev · Nov 7, 2024 · 8e4c02a · 8e4c02a
1 parent 6dc18ef
commit 8e4c02a
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 72 deletions.
diff --git a/libs/features/overview-route/src/lib/RestateServer.tsx b/libs/features/overview-route/src/lib/RestateServer.tsx
@@ -12,14 +12,15 @@ export function RestateServer({
           viewBox="0 0 120 120"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
-          className="w-full h-full drop-shadow-xl shadow-zinc-800/5 backdrop-blur-xl backdrop-saturate-200"
+          className="w-full h-full drop-shadow-xl shadow-zinc-800/5"
         >
           <path
             fillRule="evenodd"
             clipRule="evenodd"
             d="M60 0C10.59 0 0 10.59 0 60C0 109.41 10.59 120 60 120C109.41 120 120 109.41 120 60C120 10.59 109.41 0 60 0ZM43.6831 47.9347C43.238 48.6013 43 49.3889 43 50.195V73.0429C43 73.8188 43.86 74.2711 44.4811 73.8219L46.7463 72.1839C47.3731 71.7306 47.7455 70.9963 47.7455 70.2134V53.2027C47.7455 52.7307 48.2679 52.4546 48.6468 52.7265L58.6944 59.9365C59.0214 60.1711 59.0169 60.6664 58.6857 60.895L55.473 63.1117C54.3788 63.8667 54.1068 65.3898 54.8699 66.489C55.6175 67.5658 57.0775 67.8278 58.1415 67.076L63.0318 63.6206C64.0796 62.8803 64.7046 61.6639 64.7046 60.3651C64.7046 59.0915 64.1035 57.8956 63.0892 57.1509L48.6051 46.5165C47.0324 45.5379 44.9824 45.9886 43.946 47.5408L43.6831 47.9347ZM58.7713 47.0291C58.019 48.1128 58.2649 49.6116 59.3223 50.3872L72.1304 59.7826C72.4408 60.0103 72.4485 60.4781 72.1458 60.7163L61.4445 69.1358C60.4247 69.9382 60.2184 71.422 60.9793 72.4811C61.7666 73.5769 63.2846 73.799 64.3429 72.9733L76.3875 63.5753C77.404 62.7822 78 61.5524 78 60.2483C78 58.8988 77.362 57.6318 76.2859 56.8444L62.0949 46.4613C61.0244 45.6781 59.5324 45.9329 58.7713 47.0291Z"
             fill="white"
             fillOpacity="0.9"
+            className="backdrop-blur-xl backdrop-saturate-200"
           />
         </svg>
       </Button>

diff --git a/libs/features/overview-route/src/lib/overview.route.tsx b/libs/features/overview-route/src/lib/overview.route.tsx
@@ -2,49 +2,20 @@ import { useListDeployments } from '@restate/data-access/admin-api';
 import { RestateServer } from './RestateServer';
 import { tv } from 'tailwind-variants';
 import { TriggerRegisterDeploymentDialog } from './RegisterDeployment/Dialog';
-import { ServiceDetails } from './Details.tsx/Service';
-import { DeploymentDetails } from './Details.tsx/Deployment';
 import {
   ServiceDeploymentExplainer,
   ServiceExplainer,
 } from '@restate/features/explainers';
 import { Service } from './Service';
-
-const deploymentsStyles = tv({
-  base: 'w-full md:row-start-1 md:col-start-1 grid gap-8 gap-x-20 gap2-x-[calc(8rem+150px)]',
-  variants: {
-    isEmpty: {
-      true: 'gap-0 h-full [grid-template-columns:1fr]',
-      false:
-        'h-fit [grid-template-columns:1fr] md:[grid-template-columns:1fr_150px_1fr]',
-    },
-  },
-  defaultVariants: {
-    isEmpty: false,
-  },
-});
-const reactServerStyles = tv({
-  base: 'justify-center flex md:sticky md:top-[11rem] flex-col items-center w-fit',
-  variants: {
-    isEmpty: {
-      true: 'md:h-[calc(100vh-150px-6rem)] py-8 flex-auto w-full justify-center rounded-xl border bg-gray-200/50 shadow-[inset_0_1px_0px_0px_rgba(0,0,0,0.03)]',
-      false:
-        'h-fit md:max-h-[calc(100vh-150px-6rem)] min-h-[min(100%,calc(100vh-150px-6rem))]',
-    },
-  },
-  defaultVariants: {
-    isEmpty: false,
-  },
-});
+import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry';
+import { useLayoutEffect, useState } from 'react';
 
 function MultipleDeploymentsPlaceholder() {
   return (
-    <div className="flex flex-col gap-2 items-center relative w-full text-center mt-6">
-      <div className="mt-4">
-        <TriggerRegisterDeploymentDialog>
-          Deployment
-        </TriggerRegisterDeploymentDialog>
-      </div>
+    <div className="[&_a]:px-5 [&_a]:py-1.5 [&_a]:rounded-xl [&_a]:shadow-[inset_0_1px_0_0_theme(colors.gray.500)] [&_a]:[filter:drop-shadow(0_8px_6px_rgb(39_39_42/0.15))_drop-shadow(0_4px_3px_rgb(39_39_42/0.2))] [&_a:hover]:[filter:drop-shadow(0_12px_9px_rgb(39_39_42/0.15))_drop-shadow(0_8px_6px_rgb(39_39_42/0.2))] [&_a]:backdrop-blur-xl [&_a]:text-zinc-200 [&_a]:border-zinc-900/80 [&_a]:bg-zinc-900/90 [&_a:hover]:bg-zinc-900/85 [&_a[data-pressed=true]]:bg-zinc-900/80 fixed bottom-[2.5rem] left-[50vw] -translate-x-1/2 flex flex-col gap-2 items-center text-center [&_a:hover]:scale-105 [&_a[data-pressed=true]]:scale-100 will-change-transform">
+      <TriggerRegisterDeploymentDialog>
+        Deployment
+      </TriggerRegisterDeploymentDialog>
     </div>
   );
 }
@@ -87,6 +58,45 @@ function NoDeploymentPlaceholder() {
   );
 }
 
+const deploymentsStyles = tv({
+  base: '',
+  variants: {
+    isEmpty: {
+      true: 'hidden',
+      false: 'min-h-full',
+    },
+  },
+  defaultVariants: {
+    isEmpty: false,
+  },
+});
+const layoutStyles = tv({
+  base: 'min-h-full [&>*]:items-center',
+  variants: {
+    isScrolling: {
+      true: 'items-start',
+      false: 'items-center',
+    },
+  },
+  defaultVariants: {
+    isScrolling: false,
+  },
+});
+
+const reactServerStyles = tv({
+  base: 'justify-center flex flex-col items-center w-fit',
+  variants: {
+    isEmpty: {
+      true: 'mb-[-6rem] pb-8 pt-24 flex-auto w-full justify-center rounded-xl border bg-gray-200/50 shadow-[inset_0_1px_0px_0px_rgba(0,0,0,0.03)]',
+      false:
+        'hidden lg:block lg:fixed top-[50vh] left-[50vw] -translate-y-1/2 -translate-x-1/2',
+    },
+  },
+  defaultVariants: {
+    isEmpty: false,
+  },
+});
+
 // TODO: refactor layout
 function Component() {
   const {
@@ -96,39 +106,49 @@ function Component() {
   } = useListDeployments();
   const size = services ? services.size : 0;
   const isEmpty = isSuccess && (!deployments || deployments.size === 0);
+  const [isScrolling, setIsScrolling] = useState(false);
+
+  useLayoutEffect(() => {
+    let isCanceled = false;
+    const resizeObserver = new ResizeObserver(() => {
+      if (!isCanceled) {
+        setIsScrolling(document.body.scrollHeight > document.body.clientHeight);
+      }
+    });
+    resizeObserver.observe(document.body);
+    return () => {
+      isCanceled = true;
+      resizeObserver.unobserve(document.body);
+    };
+  }, [sortedServiceNames]);
+
   // Handle isLoading & isError
 
   return (
     <>
-      <div className="flex flex-col gap-2 relative justify-items-center">
-        <div className={deploymentsStyles({ isEmpty })}>
-          <div className="flex flex-col min-w-0 gap-6 justify-start">
-            {sortedServiceNames?.map((serviceName, i) => (
-              <Service
-                key={serviceName}
-                serviceName={serviceName}
-                className={i % 2 === 1 ? 'md:hidden' : 'md:block'}
-              />
-            ))}
-          </div>
-          <RestateServer className={reactServerStyles({ isEmpty })}>
-            {isEmpty && <NoDeploymentPlaceholder />}
-            {size > 1 && <MultipleDeploymentsPlaceholder />}
-          </RestateServer>
-          <div className="flex flex-col min-w-0 gap-6 justify-start">
-            {sortedServiceNames?.map((serviceName, i) => (
-              <Service
-                key={serviceName}
-                serviceName={serviceName}
-                className={i % 2 === 0 ? 'hidden' : 'hidden md:block'}
-              />
-            ))}
-            {size === 1 && <OneDeploymentPlaceholder />}
-          </div>
-        </div>
-      </div>
-      <ServiceDetails />
-      <DeploymentDetails />
+      <ResponsiveMasonry
+        columnsCountBreakPoints={{ 0: 1, 1024: 2 }}
+        className={deploymentsStyles({ isEmpty })}
+      >
+        <Masonry
+          gutter="1.5rem"
+          style={{ gap: 'calc(8rem + 150px)' }}
+          className={layoutStyles({ isScrolling })}
+        >
+          {sortedServiceNames?.map((serviceName, i) => (
+            <Service
+              key={serviceName}
+              serviceName={serviceName}
+              className="max-w-lg"
+            />
+          ))}
+          {size === 1 && <OneDeploymentPlaceholder />}
+        </Masonry>
+      </ResponsiveMasonry>
+      <RestateServer className={reactServerStyles({ isEmpty })}>
+        {isEmpty && <NoDeploymentPlaceholder />}
+      </RestateServer>
+      {size > 1 && <MultipleDeploymentsPlaceholder />}
     </>
   );
 }

diff --git a/libs/ui/layout/src/lib/Layout.tsx b/libs/ui/layout/src/lib/Layout.tsx
@@ -16,7 +16,7 @@ export function LayoutProvider({ children }: PropsWithChildren<LayoutProps>) {
       <div className="flex-auto flex flex-row 3xl:w-[calc(100%+700px+4rem)] 3xl:ml-[calc(-350px-2rem)] 3xl:grid 3xl:[grid-template-columns:350px_1fr_350px] 3xl:gap-8">
         <main
           id={ZONE_IDS[LayoutZone.Content]}
-          className="py-14 px-4 flex-auto flex flex-col relative col-start-2 col-end-3"
+          className="pb-[8rem] pt-[2rem] px-4 flex-auto flex flex-col relative col-start-2 col-end-3"
         ></main>
         <ComplementaryOutlet id={ZONE_IDS[LayoutZone.Complementary]} />
       </div>

diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "react-aria": "3.35.1",
     "react-aria-components": "1.4.1",
     "react-dom": "19.0.0-rc-83825814-20241015",
+    "react-responsive-masonry": "2.2.0",
     "react-stately": "3.32.2",
     "tailwind-variants": "0.2.1",
     "tiny-invariant": "1.3.3",
@@ -72,10 +73,11 @@
     "@types/node": "18.16.9",
     "@types/react": "18.3.1",
     "@types/react-dom": "18.3.0",
+    "@types/react-responsive-masonry": "2.1.3",
     "@typescript-eslint/eslint-plugin": "8.9.0",
     "@typescript-eslint/parser": "8.9.0",
     "@vitejs/plugin-react": "4.3.1",
-    "@vitest/coverage-v8": "^1.6.0",
+    "@vitest/coverage-v8": "1.6.0",
     "@vitest/ui": "1.6.0",
     "autoprefixer": "10.4.13",
     "esbuild": "0.19.12",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml