From 66db3a9cc99301db460cb60e2254c6f2ede2f092 Mon Sep 17 00:00:00 2001
From: Nik Nasr <nik@restate.dev>
Date: Thu, 24 Oct 2024 17:53:54 +0100
Subject: [PATCH 1/3] make register dialog sync with query

Signed-off-by: Nik Nasr <nik@restate.dev>
---
 .../src/lib/RegisterDeployment/Dialog.tsx     | 15 +++++---
 .../src/lib/RegisterDeployment/constant.ts    |  1 +
 libs/ui/dialog/src/lib/Dialog.tsx             | 36 ++++++++++++++++++-
 3 files changed, 47 insertions(+), 5 deletions(-)
 create mode 100644 libs/features/overview-route/src/lib/RegisterDeployment/constant.ts

diff --git a/libs/features/overview-route/src/lib/RegisterDeployment/Dialog.tsx b/libs/features/overview-route/src/lib/RegisterDeployment/Dialog.tsx
index b067f629..fe3b7646 100644
--- a/libs/features/overview-route/src/lib/RegisterDeployment/Dialog.tsx
+++ b/libs/features/overview-route/src/lib/RegisterDeployment/Dialog.tsx
@@ -5,11 +5,14 @@ import {
   DialogContent,
   DialogFooter,
   DialogTrigger,
+  DialogWithQuery,
 } from '@restate/ui/dialog';
 import { Icon, IconName } from '@restate/ui/icons';
 import { PropsWithChildren } from 'react';
 import { ErrorBanner } from '@restate/ui/error';
 import { RegistrationForm } from './Form';
+import { REGISTER_DEPLOYMENT_QUERY } from './constant';
+import { Link } from '@restate/ui/link';
 
 function RegisterDeploymentFooter({
   isDryRun,
@@ -67,16 +70,20 @@ export function TriggerRegisterDeploymentDialog({
   children = 'Register deployment',
 }: PropsWithChildren<NonNullable<unknown>>) {
   return (
-    <Dialog>
+    <DialogWithQuery query={REGISTER_DEPLOYMENT_QUERY}>
       <DialogTrigger>
-        <Button variant="secondary" className="flex gap-2 items-center px-3">
+        <Link
+          variant="secondary-button"
+          className="flex gap-2 items-center px-3"
+          href={`?${REGISTER_DEPLOYMENT_QUERY}=true`}
+        >
           <Icon name={IconName.Plus} />
           {children}
-        </Button>
+        </Link>
       </DialogTrigger>
       <DialogContent className="max-w-lg">
         <RegistrationForm>{RegisterDeploymentFooter}</RegistrationForm>
       </DialogContent>
-    </Dialog>
+    </DialogWithQuery>
   );
 }
diff --git a/libs/features/overview-route/src/lib/RegisterDeployment/constant.ts b/libs/features/overview-route/src/lib/RegisterDeployment/constant.ts
new file mode 100644
index 00000000..2b8d3b35
--- /dev/null
+++ b/libs/features/overview-route/src/lib/RegisterDeployment/constant.ts
@@ -0,0 +1 @@
+export const REGISTER_DEPLOYMENT_QUERY = 'register-deployment';
diff --git a/libs/ui/dialog/src/lib/Dialog.tsx b/libs/ui/dialog/src/lib/Dialog.tsx
index f98ef782..845d1507 100644
--- a/libs/ui/dialog/src/lib/Dialog.tsx
+++ b/libs/ui/dialog/src/lib/Dialog.tsx
@@ -1,4 +1,5 @@
-import { PropsWithChildren } from 'react';
+import { useSearchParams } from '@remix-run/react';
+import { PropsWithChildren, useCallback } from 'react';
 import { DialogTrigger } from 'react-aria-components';
 
 interface DialogProps {
@@ -17,3 +18,36 @@ export function Dialog({
     </DialogTrigger>
   );
 }
+
+export function DialogWithQuery({
+  children,
+  query,
+  onOpenChange,
+}: PropsWithChildren<Pick<DialogProps, 'onOpenChange'> & { query: string }>) {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const isOpen = Boolean(searchParams.has(query));
+
+  const close = useCallback(() => {
+    setSearchParams(
+      (perv) => {
+        perv.delete(query);
+        return perv;
+      },
+      { preventScrollReset: true }
+    );
+  }, [query, setSearchParams]);
+
+  return (
+    <DialogTrigger
+      isOpen={isOpen}
+      onOpenChange={(isOpen) => {
+        onOpenChange?.(isOpen);
+        if (!isOpen) {
+          close();
+        }
+      }}
+    >
+      {children}
+    </DialogTrigger>
+  );
+}

From 69c5a8b15422eabe8a2d1b103a1ff30b97ffbd35 Mon Sep 17 00:00:00 2001
From: Nik Nasr <nik@restate.dev>
Date: Thu, 24 Oct 2024 17:59:37 +0100
Subject: [PATCH 2/3] update some styling

Signed-off-by: Nik Nasr <nik@restate.dev>
---
 libs/features/invocations-route/src/lib/invocations.route.tsx | 4 ++--
 libs/ui/tooltip/src/lib/InlineTooltip.tsx                     | 4 ++--
 libs/ui/tooltip/src/lib/TooltipContent.tsx                    | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/libs/features/invocations-route/src/lib/invocations.route.tsx b/libs/features/invocations-route/src/lib/invocations.route.tsx
index 73f51cd6..f920da9a 100644
--- a/libs/features/invocations-route/src/lib/invocations.route.tsx
+++ b/libs/features/invocations-route/src/lib/invocations.route.tsx
@@ -3,7 +3,7 @@ import { Link } from '@restate/ui/link';
 
 function Component() {
   return (
-    <div className="justify-center flex md:sticky md:top-[11rem] flex-col items-center w-fit 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)]">
+    <div className="flex md:sticky md:top-[11rem] flex-col items-center 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)]">
       <div className="flex flex-col gap-2 items-center relative w-full text-center mt-6">
         <h3 className="text-sm font-semibold text-gray-600">Coming soon!</h3>
         <p className="text-sm text-gray-500 px-4 max-w-md">
@@ -19,7 +19,7 @@ function Component() {
           to manage invocations. Below are a few examples of how you can use CLI
           commands to perform tasks:
         </p>
-        <Code className="bg-black/80 py-4 pr-8 pl-4 text-code mt-4">
+        <Code className="bg-zinc-700 py-4 pr-8 pl-4 text-code mt-4">
           <Snippet language="bash">#List the invocations</Snippet>
           <Snippet className="[filter:invert(1)]" language="bash">
             restate invocations list
diff --git a/libs/ui/tooltip/src/lib/InlineTooltip.tsx b/libs/ui/tooltip/src/lib/InlineTooltip.tsx
index b3d5b44f..7c3fad04 100644
--- a/libs/ui/tooltip/src/lib/InlineTooltip.tsx
+++ b/libs/ui/tooltip/src/lib/InlineTooltip.tsx
@@ -25,11 +25,11 @@ export function InlineTooltip({
       <TooltipTrigger ref={triggerRef}>{children}</TooltipTrigger>
       <InternalTooltipContent triggerRef={triggerRef}>
         <div className="flex flex-col gap-2 items-start">
-          <h6 className="text-base font-semibold">{title}</h6>
+          <h6 className="text-sm font-semibold text-gray-100">{title}</h6>
           {description}
           {learnMoreHref && (
             <Link
-              className="mt-2 bg-zinc-500/80 hover:bg-zinc-500 pressed:bg-zinc-400 text-gray-100 px-2 py-1 text-sm rounded-lg inline-flex items-center gap-2"
+              className="mt-2 bg-zinc-600 hover:bg-zinc-500 pressed:bg-zinc-400 text-gray-100 px-2 py-1 text-sm rounded-lg inline-flex items-center gap-2"
               rel="noopener noreferrer"
               target="_blank"
               variant="button"
diff --git a/libs/ui/tooltip/src/lib/TooltipContent.tsx b/libs/ui/tooltip/src/lib/TooltipContent.tsx
index 63a1dc14..e22da44d 100644
--- a/libs/ui/tooltip/src/lib/TooltipContent.tsx
+++ b/libs/ui/tooltip/src/lib/TooltipContent.tsx
@@ -11,7 +11,7 @@ interface TooltipContentProps {
 }
 
 const styles = tv({
-  base: 'max-w-sm p-4 group bg-zinc-800/80 backdrop-blur-xl border border-zinc-700 shadow-[inset_0_1px_0_0_theme(colors.gray.500)] text-gray-200 text-sm rounded-xl drop-shadow-xl will-change-transform',
+  base: 'max-w-sm p-4 group bg-zinc-800/90 backdrop-blur-xl border border-zinc-900/80 shadow-[inset_0_1px_0_0_theme(colors.gray.500)] text-gray-300 text-sm rounded-xl drop-shadow-xl will-change-transform',
   variants: {
     isEntering: {
       true: 'animate-in fade-in placement-bottom:slide-in-from-top-0.5 placement-top:slide-in-from-bottom-0.5 placement-left:slide-in-from-right-0.5 placement-right:slide-in-from-left-0.5 ease-out duration-200',

From 58371fe0acf2d6da7344a6732883344c0df57a83 Mon Sep 17 00:00:00 2001
From: Nik Nasr <nik@restate.dev>
Date: Thu, 24 Oct 2024 18:05:18 +0100
Subject: [PATCH 3/3] rename

Signed-off-by: Nik Nasr <nik@restate.dev>
---
 .../overview-route/src/lib/RegisterDeployment/Dialog.tsx   | 7 +++----
 libs/ui/dialog/src/lib/Dialog.tsx                          | 6 ++----
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/libs/features/overview-route/src/lib/RegisterDeployment/Dialog.tsx b/libs/features/overview-route/src/lib/RegisterDeployment/Dialog.tsx
index fe3b7646..bf3d2406 100644
--- a/libs/features/overview-route/src/lib/RegisterDeployment/Dialog.tsx
+++ b/libs/features/overview-route/src/lib/RegisterDeployment/Dialog.tsx
@@ -1,11 +1,10 @@
 import { Button, SubmitButton } from '@restate/ui/button';
 import {
-  Dialog,
   DialogClose,
   DialogContent,
   DialogFooter,
   DialogTrigger,
-  DialogWithQuery,
+  QueryDialog,
 } from '@restate/ui/dialog';
 import { Icon, IconName } from '@restate/ui/icons';
 import { PropsWithChildren } from 'react';
@@ -70,7 +69,7 @@ export function TriggerRegisterDeploymentDialog({
   children = 'Register deployment',
 }: PropsWithChildren<NonNullable<unknown>>) {
   return (
-    <DialogWithQuery query={REGISTER_DEPLOYMENT_QUERY}>
+    <QueryDialog query={REGISTER_DEPLOYMENT_QUERY}>
       <DialogTrigger>
         <Link
           variant="secondary-button"
@@ -84,6 +83,6 @@ export function TriggerRegisterDeploymentDialog({
       <DialogContent className="max-w-lg">
         <RegistrationForm>{RegisterDeploymentFooter}</RegistrationForm>
       </DialogContent>
-    </DialogWithQuery>
+    </QueryDialog>
   );
 }
diff --git a/libs/ui/dialog/src/lib/Dialog.tsx b/libs/ui/dialog/src/lib/Dialog.tsx
index 845d1507..4cbd3407 100644
--- a/libs/ui/dialog/src/lib/Dialog.tsx
+++ b/libs/ui/dialog/src/lib/Dialog.tsx
@@ -19,11 +19,10 @@ export function Dialog({
   );
 }
 
-export function DialogWithQuery({
+export function QueryDialog({
   children,
   query,
-  onOpenChange,
-}: PropsWithChildren<Pick<DialogProps, 'onOpenChange'> & { query: string }>) {
+}: PropsWithChildren<{ query: string }>) {
   const [searchParams, setSearchParams] = useSearchParams();
   const isOpen = Boolean(searchParams.has(query));
 
@@ -41,7 +40,6 @@ export function DialogWithQuery({
     <DialogTrigger
       isOpen={isOpen}
       onOpenChange={(isOpen) => {
-        onOpenChange?.(isOpen);
         if (!isOpen) {
           close();
         }