Query Dialog

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

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

@@ -1,15 +1,17 @@
 import { Button, SubmitButton } from '@restate/ui/button';
 import {
-  Dialog,
   DialogClose,
   DialogContent,
   DialogFooter,
   DialogTrigger,
+  QueryDialog,
 } 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 +69,20 @@ export function TriggerRegisterDeploymentDialog({
   children = 'Register deployment',
 }: PropsWithChildren<NonNullable<unknown>>) {
   return (
-    <Dialog>
+    <QueryDialog 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>
+    </QueryDialog>
   );
 }

libs/features/overview-route/src/lib/RegisterDeployment/constant.ts

@@ -0,0 +1 @@
+export const REGISTER_DEPLOYMENT_QUERY = 'register-deployment';

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,34 @@ export function Dialog({
     </DialogTrigger>
   );
 }
+
+export function QueryDialog({
+  children,
+  query,
+}: PropsWithChildren<{ 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) => {
+        if (!isOpen) {
+          close();
+        }
+      }}
+    >
+      {children}
+    </DialogTrigger>
+  );
+}

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"

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',