Control info dialogs from URL (#201)

* Control info dialogs from URL * Tweak redirect from /
RolnickLab · Aug 10, 2023 · bcf915e · bcf915e
1 parent 63f8852
commit bcf915e
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git a/ui/src/app.tsx b/ui/src/app.tsx
@@ -25,7 +25,18 @@ export const App = () => {
           <main className={styles.main}>
             <div className={styles.content}>
               <Routes>
-                <Route path="/" element={<Navigate to="/overview" />} />
+                <Route
+                  path="/"
+                  element={
+                    <Navigate
+                      to={{
+                        pathname: '/overview',
+                        search: location.search,
+                      }}
+                      replace={true}
+                    />
+                  }
+                />
                 <Route path="/overview" element={<Overview />} />
                 <Route path="/jobs/:id?" element={<Jobs />} />
                 <Route path="/deployments/:id?" element={<Deployments />} />

diff --git a/ui/src/components/info-dialog/info-dialog.tsx b/ui/src/components/info-dialog/info-dialog.tsx
@@ -3,12 +3,17 @@ import { Button, ButtonTheme } from 'design-system/components/button/button'
 import * as Dialog from 'design-system/components/dialog/dialog'
 import { STRING, translate } from 'utils/language'
 import styles from './info-dialog.module.scss'
+import { useActivePage } from './useActivePage'
 
 export const InfoDialog = ({ name, slug }: { name: string; slug: string }) => {
+  const { activePage, setActivePage } = useActivePage()
   const { page, isLoading } = usePageDetails(slug)
 
   return (
-    <Dialog.Root>
+    <Dialog.Root
+      open={activePage === slug}
+      onOpenChange={(open) => setActivePage(open ? slug : undefined)}
+    >
       <Dialog.Trigger>
         <Button label={name} theme={ButtonTheme.Plain} />
       </Dialog.Trigger>

diff --git a/ui/src/components/info-dialog/useActivePage.ts b/ui/src/components/info-dialog/useActivePage.ts
@@ -0,0 +1,19 @@
+import { useSearchParams } from 'react-router-dom'
+
+const SEARCH_PARAM_KEY = 'page'
+
+export const useActivePage = () => {
+  const [searchParams, setSearchParams] = useSearchParams()
+
+  const activePage = searchParams.get(SEARCH_PARAM_KEY) ?? undefined
+
+  const setActivePage = (pageSlug?: string) => {
+    searchParams.delete(SEARCH_PARAM_KEY)
+    if (pageSlug?.length) {
+      searchParams.set(SEARCH_PARAM_KEY, pageSlug)
+    }
+    setSearchParams(searchParams)
+  }
+
+  return { activePage, setActivePage }
+}