Add toast component

apps/web-ui/tsconfig.app.json

@@ -1,11 +1,7 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "types": [
-      "../../@types/vite.d.ts",
-      "../../@types/load-context.d.ts",
-      "../../@types/global-env.d.ts"
-    ]
+    "types": ["../../@types/vite.d.ts", "../../@types/global-env.d.ts"]
   },
   "include": [
     "remix.env.d.ts",

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

@@ -12,6 +12,7 @@ export function getName() {
 export const adminApiDb = factory({
   handler: {
     name: primaryKey(() => `${getName()}`),
+    service: oneOf('service'),
     ty: () =>
       faker.helpers.arrayElement(['Exclusive', 'Shared', 'Workflow'] as const),
     input_description: () =>

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

@@ -168,10 +168,87 @@ const versionHandler = http.get<
   });
 });
 
+const deploymentDetailsHandler = http.get<
+  adminApi.operations['get_deployment']['parameters']['path'],
+  never,
+  adminApi.operations['get_deployment']['responses']['200']['content']['application/json'],
+  GetPath<'/deployments/{deployment}'>
+>('/deployments/:deployment', async ({ params }) => {
+  const deployment = adminApiDb.deployment.findFirst({
+    where: {
+      id: {
+        equals: params.deployment,
+      },
+    },
+  });
+
+  if (!deployment) {
+    return HttpResponse.json(
+      { code: 500, message: 'Server internal error' } as any,
+      { status: 500 }
+    );
+  }
+  return HttpResponse.json({
+    id: deployment.id,
+    services: adminApiDb.service
+      .findMany({
+        where: { deployment: { id: { equals: deployment.id } } },
+      })
+      .map((service) => ({
+        name: service.name,
+        deployment_id: deployment.id,
+        public: service.public,
+        revision: service.revision,
+        ty: service.ty,
+        idempotency_retention: service.idempotency_retention,
+        workflow_completion_retention: service.idempotency_retention,
+        handlers: adminApiDb.handler.findMany({
+          where: { service: { name: { equals: service.name } } },
+        }),
+      })),
+    uri: deployment.endpoint,
+    protocol_type: 'RequestResponse',
+    created_at: new Date().toISOString(),
+    http_version: 'HTTP/2.0',
+    min_protocol_version: 1,
+    max_protocol_version: 1,
+  });
+});
+
+const serviceDetailsHandler = http.get<
+  adminApi.operations['get_service']['parameters']['path'],
+  never,
+  adminApi.operations['get_service']['responses']['200']['content']['application/json'],
+  GetPath<'/services/{service}'>
+>('/services/:service', async ({ params }) => {
+  const service = adminApiDb.service.findFirst({
+    where: {
+      name: {
+        equals: params.service,
+      },
+    },
+  })!;
+
+  return HttpResponse.json({
+    name: service.name,
+    deployment_id: service.deployment!.id!,
+    public: service.public,
+    revision: service.revision,
+    ty: service.ty,
+    idempotency_retention: service.idempotency_retention,
+    workflow_completion_retention: service.idempotency_retention,
+    handlers: adminApiDb.handler.findMany({
+      where: { service: { name: { equals: service.name } } },
+    }),
+  });
+});
+
 export const adminApiMockHandlers = [
   listDeploymentsHandler,
   healthHandler,
   openApiHandler,
   registerDeploymentHandler,
   versionHandler,
+  deploymentDetailsHandler,
+  serviceDetailsHandler,
 ];

libs/data-access/admin-api/src/api.ts

@@ -1,4 +1,4 @@
-import adminSpec from './lib/api/spec.json';
+import adminSpec from './lib/api/output.json';
 
 export type * from './lib/api';
 export const spec = adminSpec;

libs/data-access/admin-api/src/lib/api/index.d.ts

@@ -723,7 +723,7 @@ export interface components {
           min_protocol_version: number;
           /** Format: int32 */
           max_protocol_version: number;
-          id?: components['schemas']['String'];
+          id: components['schemas']['String'];
           /**
            * Services
            * @description List of services exposed by this deployment.

libs/data-access/admin-api/src/lib/api/output.json

@@ -2177,7 +2177,7 @@
               "created_at",
               "max_protocol_version",
               "min_protocol_version",
-              "ide",
+              "id",
               "services"
             ],
             "properties": {

libs/data-access/admin-api/src/lib/api/query.json

@@ -335,7 +335,7 @@
               "created_at",
               "max_protocol_version",
               "min_protocol_version",
-              "ide",
+              "id",
               "services"
             ],
             "properties": {

libs/features/health/src/lib/HealthCheckNotification.tsx

@@ -1,42 +1,7 @@
-import { useRestateContext } from '@restate/features/restate-context';
-import { Button } from '@restate/ui/button';
-import { Icon, IconName } from '@restate/ui/icons';
-import { HideNotification, LayoutOutlet, LayoutZone } from '@restate/ui/layout';
-import { useDeferredValue, useState } from 'react';
+import { useHealthCheckNotification } from './useHealthCheck';
 
 export function HealthCheckNotification() {
-  const { status } = useRestateContext();
-  const isDegraded = status === 'DEGRADED';
-  const deferredIsDegraded = useDeferredValue(isDegraded);
-  const [canBeOpened, setCanBeOpened] = useState(true);
-  const deferredCanBeOpened = useDeferredValue(canBeOpened);
-
-  if (deferredIsDegraded && deferredCanBeOpened) {
-    return (
-      <LayoutOutlet zone={LayoutZone.Notification}>
-        <div className="flex items-center gap-2 bg-orange-100 rounded-xl bg-orange-200/60 shadow-lg shadow-zinc-800/5 border border-orange-200 text-orange-800 px-3 text-sm">
-          <Icon
-            name={IconName.TriangleAlert}
-            className="w-4 h-4 fill-current2"
-          />{' '}
-          Your Restate server is currently experiencing issues.
-          <Button
-            variant="icon"
-            className="ml-auto"
-            onClick={(event) => {
-              event.target.dataset.variant = 'hidden';
-              setTimeout(() => {
-                setCanBeOpened(false);
-              }, 100);
-            }}
-          >
-            <Icon name={IconName.X} />
-          </Button>
-        </div>
-        {(!isDegraded || !canBeOpened) && <HideNotification />}
-      </LayoutOutlet>
-    );
-  }
+  useHealthCheckNotification();
 
   return null;
 }

libs/features/health/src/lib/useHealthCheck.ts

@@ -0,0 +1,22 @@
+import { useRestateContext } from '@restate/features/restate-context';
+import { showWarningNotification } from '@restate/ui/notification';
+import { useEffect } from 'react';
+
+export function useHealthCheckNotification() {
+  const { status } = useRestateContext();
+  const isDegraded = status === 'DEGRADED';
+
+  useEffect(() => {
+    let hide: VoidFunction | undefined = undefined;
+    if (isDegraded) {
+      const notification = showWarningNotification(
+        'Your Restate server is currently experiencing issues.'
+      );
+      hide = notification.hide;
+    }
+
+    return () => {
+      hide?.();
+    };
+  }, [isDegraded]);
+}

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

@@ -18,6 +18,7 @@ import {
   useListDeployments,
 } from '@restate/data-access/admin-api';
 import { getEndpoint } from './types';
+import { showSuccessNotification } from '@restate/ui/notification';
 
 export function DeleteDeployment() {
   const formId = useId();
@@ -36,12 +37,18 @@ export function DeleteDeployment() {
   const { mutate, isPending, error } = useDeleteDeployment(
     String(deploymentId),
     {
-      onSuccess() {
+      onSuccess(data, variables) {
         setSearchParams((old) => {
           old.delete(DELETE_DEPLOYMENT_QUERY_PARAM);
           old.delete(DEPLOYMENT_QUERY_PARAM);
           return old;
         });
+        showSuccessNotification(
+          <>
+            <code>{variables.parameters?.path.deployment}</code> has been
+            successfully deleted.
+          </>
+        );
         refetch();
       },
     }

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

@@ -70,7 +70,7 @@ export function Deployment({
           />
         </Link>
       </div>
-      <Revision revision={revision} className="ml-auto" />
+      <Revision revision={revision} className="ml-auto z-[2]" />
     </div>
   );
 }

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

@@ -28,6 +28,7 @@ import { Link } from '@restate/ui/link';
 import { useQueryClient } from '@tanstack/react-query';
 import { ErrorBanner } from '@restate/ui/error';
 import { ServicePlaygroundTrigger } from '../ServicePlayground';
+import { showSuccessNotification } from '@restate/ui/notification';
 
 export function ServiceDetails() {
   const formId = useId();
@@ -52,8 +53,13 @@ export function ServiceDetails() {
     error: mutationError,
     isPending: isSubmitting,
   } = useModifyService(String(service), {
-    onSuccess(data) {
+    onSuccess(data, variables) {
       queryClient.setQueryData(queryKey, data);
+      showSuccessNotification(
+        <>
+          "{variables.parameters?.path.service}" has been successfully updated.
+        </>
+      );
       setKey((k) => k + 1);
     },
   });

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

@@ -43,7 +43,7 @@ export function MiniService({
           />
         </Link>
       </div>
-      <Revision revision={service.revision} className="ml-auto" />
+      <Revision revision={service.revision} className="ml-auto z-[2]" />
     </div>
   );
 }

libs/features/overview-route/src/lib/RegisterDeployment/Context.tsx

@@ -17,6 +17,7 @@ import {
 } from '@restate/data-access/admin-api';
 import { useDialog } from '@restate/ui/dialog';
 import { getEndpoint } from '../types';
+import { showSuccessNotification } from '@restate/ui/notification';
 
 type NavigateToAdvancedAction = {
   type: 'NavigateToAdvancedAction';
@@ -216,6 +217,11 @@ export function DeploymentRegistrationState(props: PropsWithChildren<unknown>) {
       if (state.stage === 'confirm') {
         refetch();
         close();
+        showSuccessNotification(
+          <>
+            <code>{data?.id}</code> has been successfully registered.
+          </>
+        );
       } else {
         goToConfirm();
       }

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

@@ -8,7 +8,7 @@ import {
 } from '@restate/features/explainers';
 import { Service } from './Service';
 import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry';
-import { useLayoutEffect, useState } from 'react';
+import { useId, useLayoutEffect, useState } from 'react';
 import { LayoutOutlet, LayoutZone } from '@restate/ui/layout';
 
 function MultipleDeploymentsPlaceholder() {
@@ -66,7 +66,7 @@ const deploymentsStyles = tv({
   variants: {
     isEmpty: {
       true: 'hidden',
-      false: 'min-h-full',
+      false: 'min-h-[calc(100vh-9rem-9rem)] sticky top-[9rem]',
     },
   },
   defaultVariants: {
@@ -110,22 +110,34 @@ function Component() {
   const size = services ? services.size : 0;
   const isEmpty = isSuccess && (!deployments || deployments.size === 0);
   const [isScrolling, setIsScrolling] = useState(false);
+  const masonryId = useId();
 
   useLayoutEffect(() => {
     let isCanceled = false;
     const resizeObserver = new ResizeObserver(() => {
       if (!isCanceled) {
-        setIsScrolling(document.body.scrollHeight > document.body.clientHeight);
+        const escapedMasonryId = masonryId.replace(/:/g, '\\:');
+        const masonryContainerHeight =
+          document.querySelector(`.${escapedMasonryId}`)?.clientHeight ?? 0;
+        const columnHeight = Math.max(
+          ...Array.from(
+            document.querySelectorAll(`.${escapedMasonryId} > *`)
+          ).map((el) => el.clientHeight)
+        );
+        setIsScrolling(
+          document.body.scrollHeight > document.body.clientHeight &&
+            masonryContainerHeight <= columnHeight
+        );
       }
     });
     resizeObserver.observe(document.body);
     return () => {
       isCanceled = true;
       resizeObserver.unobserve(document.body);
     };
-  }, [sortedServiceNames]);
+  }, [masonryId, sortedServiceNames]);
 
-  // Handle isLoading & isError
+  // TODO: Handle isLoading & isError
 
   return (
     <>
@@ -136,7 +148,7 @@ function Component() {
         <Masonry
           gutter="1.5rem"
           style={{ gap: 'calc(8rem + 150px)' }}
-          className={layoutStyles({ isScrolling })}
+          className={layoutStyles({ isScrolling, className: masonryId })}
         >
           {sortedServiceNames?.map((serviceName, i) => (
             <Service

libs/ui/dialog/src/lib/DialogContent.tsx

@@ -9,7 +9,7 @@ import { tv } from 'tailwind-variants';
 import { DialogFooterContainer } from './DialogFooter';
 
 const overlayStyles = tv({
-  base: 'fixed top-0 left-0 w-full isolate z-50 bg-gray-800 bg-opacity-30 transition-opacity flex text-center [height:100vh] [min-height:100vh]',
+  base: 'fixed top-0 left-0 w-full isolate z-[100] bg-gray-800 bg-opacity-30 transition-opacity flex text-center [height:100vh] [min-height:100vh]',
   variants: {
     isEntering: {
       true: 'animate-in fade-in duration-200 ease-out',

libs/ui/layout/src/index.ts

@@ -1,6 +1,5 @@
 export * from './lib/Layout';
 export { LayoutZone } from './lib/LayoutZone';
-export { HideNotification } from './lib/Notification';
 export {
   Complementary,
   ComplementaryWithSearchParam,

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

@@ -9,7 +9,7 @@ interface AppBarProps {
 export function AppBar(props: PropsWithChildren<AppBarProps>) {
   return (
     <header
-      className={`${styles.header} [&:has(>*>*)]:animate-in [&:has(>*>*)]:slide-in-from-top duration-300 [&:has([data-variant="hidden"])]:invisible [&:has([data-variant="secondary"])]:shadow-none [&:has([data-variant="secondary"])]:border-none [&:has([data-variant="secondary"])]:bg-transparent [&:has([data-variant="secondary"])]:backdrop-blur-0 sticky top-3 sm:top-6 rounded-xl border z-40 flex flex-none flex-wrap items-stretch justify-between gap-4 backdrop-blur-xl backdrop-saturate-200 shadow-lg shadow-zinc-800/5 bg-gray-50/80`}
+      className={`${styles.header} [&:has(>*>*)]:animate-in [&:has(>*>*)]:slide-in-from-top duration-300 [&:has([data-variant="hidden"])]:invisible [&:has([data-variant="secondary"])]:shadow-none [&:has([data-variant="secondary"])]:border-none [&:has([data-variant="secondary"])]:bg-transparent [&:has([data-variant="secondary"])]:backdrop-blur-0 sticky top-3 sm:top-6 rounded-xl border z-[100] flex flex-none flex-wrap items-stretch justify-between gap-4 backdrop-blur-xl backdrop-saturate-200 shadow-lg shadow-zinc-800/5 bg-gray-50/80`}
     >
       <div {...props} className="m-[-1px] flex items-stretch flex-1" />
       <nav