Limit number of deployments per service in overview page (#112)

Signed-off-by: Nik Nasr <[email protected]>

apps/web-ui/app/root.tsx

@@ -8,7 +8,6 @@ import {
   useNavigate,
 } from '@remix-run/react';
 import styles from './tailwind.css?url';
-import '@stoplight/elements/styles.min.css';
 import type { LinksFunction } from '@remix-run/node';
 import { LayoutOutlet, LayoutProvider, LayoutZone } from '@restate/ui/layout';
 import { RouterProvider } from 'react-aria-components';

apps/web-ui/app/tailwind.css

@@ -1,7 +1,8 @@
+@import '@stoplight/elements/styles.min.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
 @layer base {
   html {
     font-family: 'Inter var', 'Helvetica', system-ui, sans-serif;

libs/data-access/admin-api-fixtures/src/lib/adminApiDb.ts

@@ -19,7 +19,8 @@ export const adminApiDb = factory({
     output_description: () => "value of content-type 'application/json'",
   },
   service: {
-    name: primaryKey<string>(() => `${getName()}Service`),
+    id: primaryKey<number>(() => faker.number.int()),
+    name: () => `${getName()}Service`,
     handlers: manyOf('handler'),
     deployment: oneOf('deployment'),
     ty: () =>
@@ -44,13 +45,21 @@ export const adminApiDb = factory({
 const isE2E = process.env['SCENARIO'] === 'E2E';
 
 if (!isE2E) {
-  Array(30)
+  const deployments = Array(30)
     .fill(null)
     .map(() => {
       const deployment = adminApiDb.deployment.create();
-      Array(Math.floor(Math.random() * 3 + 1))
-        .fill(null)
-        .map(() => adminApiDb.service.create({ deployment }));
       return deployment;
     });
+
+  const serviceNames = Array(10)
+    .fill(null)
+    .map(() => `${getName()}Service`);
+  serviceNames.forEach((name) => {
+    deployments.forEach((deployment) => {
+      if (Math.random() < 0.5) {
+        adminApiDb.service.create({ deployment, name });
+      }
+    });
+  });
 }

libs/features/overview-route/src/lib/Service.tsx

@@ -18,6 +18,8 @@ const styles = tv({
   },
 });
 
+const MAX_NUMBER_OF_DEPLOYMENTS = 5;
+
 export function Service({
   className,
   serviceName,
@@ -34,6 +36,16 @@ export function Service({
   const isSelected = searchParams.get(SERVICE_QUERY_PARAM) === serviceName;
   const linkRef = useRef<HTMLAnchorElement>(null);
 
+  const deploymentRevisionPairs = revisions
+    .map((revision) =>
+      serviceDeployments?.[revision]?.map((id) => ({ id, revision }))
+    )
+    .flat()
+    .filter(Boolean) as {
+    id: string;
+    revision: number;
+  }[];
+
   return (
     <div className={styles({ className, isSelected })}>
       <div className="relative p-2 w-full rounded-[calc(0.75rem-0.125rem)] flex items-center gap-2 flex-row text-sm">
@@ -69,10 +81,26 @@ export function Service({
             Deployments
           </div>
           <div className="flex flex-col gap-1.5">
-            {revisions.map((revision) =>
-              serviceDeployments?.[revision]?.map((id) => (
+            {deploymentRevisionPairs
+              .slice(0, MAX_NUMBER_OF_DEPLOYMENTS)
+              .map(({ id, revision }) => (
                 <Deployment deploymentId={id} revision={revision} key={id} />
-              ))
+              ))}
+
+            {deploymentRevisionPairs.length > MAX_NUMBER_OF_DEPLOYMENTS && (
+              <Link
+                href={`?${SERVICE_QUERY_PARAM}=${serviceName}`}
+                variant="secondary"
+                aria-label={serviceName}
+                className="text-gray-500 text-code bg-transparent no-underline border-none shadow-none text-left px-8 py-1 cursor-pointer rounded-lg  hover:bg-black/[0.03] pressed:bg-black/5"
+              >
+                +{deploymentRevisionPairs.length - MAX_NUMBER_OF_DEPLOYMENTS}{' '}
+                deployment
+                {deploymentRevisionPairs.length - MAX_NUMBER_OF_DEPLOYMENTS > 1
+                  ? 's'
+                  : ''}
+                …
+              </Link>
             )}
           </div>
         </div>

libs/features/overview-route/src/lib/ServicePlayground.tsx

@@ -75,7 +75,7 @@ export function ServicePlayground() {
     <QueryDialog query={SERVICE_PLAYGROUND_QUERY_PARAM}>
       <DialogContent
         variant="sheet"
-        className='[&_*:has(>[data-test="mobile-top-nav"])]:w-[calc(100vw-1rem)] [&_*:has(>[data-test="mobile-top-nav"])]:rounded-t-[0.7rem]'
+        className='[&_*:has(>[data-test="mobile-top-nav"])]:w-[calc(100vw-1rem)] [&_*:has(>[data-test="mobile-top-nav"])]:rounded-t-[0.7rem] [&_.sl-inverted_input]:text-gray-700'
       >
         {apiSpec ? (
           <>

libs/ui/layout/src/lib/Layout.tsx

@@ -4,6 +4,14 @@ import { AppBar } from './AppBar';
 import { Notification } from './Notification';
 import { ZONE_IDS, LayoutZone } from './LayoutZone';
 import { ComplementaryOutlet } from './ComplementaryOutlet';
+import { defaultConfig } from 'tailwind-variants';
+
+// TODO: refactor to a separate pacakge
+defaultConfig.twMergeConfig = {
+  classGroups: {
+    'font-size': [{ text: ['code', '2xs'] }],
+  },
+};
 
 /* eslint-disable-next-line */
 export interface LayoutProps {}

libs/ui/link/src/lib/Link.tsx

@@ -19,6 +19,7 @@ interface LinkProps
       | 'aria-label'
     >,
     Pick<AriaAttributes, 'aria-current'> {
+  className?: string;
   variant?: 'primary' | 'secondary' | 'button' | 'secondary-button';
 }
 

package.json

@@ -29,7 +29,7 @@
     "react-dom": "19.0.0-rc-83825814-20241015",
     "react-responsive-masonry": "2.2.0",
     "react-stately": "3.32.2",
-    "tailwind-variants": "0.2.1",
+    "tailwind-variants": "0.3.0",
     "tiny-invariant": "1.3.3",
     "tslib": "2.6.3",
     "use-dehydrated-state": "0.1.0"
@@ -120,8 +120,8 @@
       "cookie@<0.7.0": ">=0.7.0",
       "@stoplight/json-schema-viewer": "4.16.2",
       "@sentry/browser@<7.119.1": ">=7.119.1",
-      "cross-spawn@<7.0.5": ">=7.0.5",
-      "@eslint/plugin-kit@<0.2.3": ">=0.2.3"
+      "@eslint/plugin-kit@<0.2.3": ">=0.2.3",
+      "cross-spawn@<7.0.5": ">=7.0.5"
     },
     "peerDependencyRules": {
       "allowAny": [