migrate the create volume dialog

koyeb · Jan 10, 2025 · 06bd307 · 06bd307
1 parent 10a0947
commit 06bd307
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 43 deletions.
diff --git a/src/pages/secrets/secrets.page.tsx b/src/pages/secrets/secrets.page.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { Button } from '@koyeb/design-system';
 import { useSecretsQuery } from 'src/api/hooks/secret';
@@ -10,6 +10,7 @@ import { IconListPlus, IconPlus } from 'src/components/icons';
 import { QueryGuard } from 'src/components/query-error';
 import { Title } from 'src/components/title';
 import { useSet } from 'src/hooks/collection';
+import { useMount } from 'src/hooks/lifecycle';
 import { useHistoryState } from 'src/hooks/router';
 import { createTranslate } from 'src/intl/translate';
 import { CreateSecretDialog } from 'src/modules/secrets/simple/create-secret-dialog';
@@ -25,11 +26,11 @@ export function SecretsPage() {
   const openDialog = Dialog.useOpen();
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
-  useEffect(() => {
+  useMount(() => {
     if (historyState.create) {
       openDialog('CreateSecret');
     }
-  }, [historyState, openDialog]);
+  });
 
   const query = useSecretsQuery('simple');
   const secrets = query.data;

diff --git a/src/pages/volumes/create-volume-dialog.tsx b/src/pages/volumes/create-volume-dialog.tsx
@@ -1,46 +1,40 @@
-import { Button, Dialog } from '@koyeb/design-system';
+import { Button } from '@koyeb/design-system';
 import { VolumeSnapshot } from 'src/api/model';
 import { routes } from 'src/application/routes';
+import { CloseDialogButton, Dialog, DialogFooter, DialogHeader } from 'src/components/dialog';
 import { useNavigate } from 'src/hooks/router';
 import { createTranslate, Translate } from 'src/intl/translate';
 
 import { VolumeForm } from './volume-form';
 
 const T = createTranslate('pages.volumes.createDialog');
 
-type CreateVolumeDialogProps = {
-  open: boolean;
-  onClose: () => void;
-  snapshot?: VolumeSnapshot;
-};
-
-export function CreateVolumeDialog({ open, onClose, snapshot }: CreateVolumeDialogProps) {
+export function CreateVolumeDialog({ snapshot }: { snapshot?: VolumeSnapshot }) {
   const navigate = useNavigate();
+  const closeDialog = Dialog.useClose();
 
   return (
-    <Dialog
-      isOpen={open}
-      onClose={onClose}
-      title={<T id="title" />}
-      description={<T id="description" />}
-      width="lg"
-    >
+    <Dialog id="CreateVolume" className="col w-full max-w-xl gap-4">
+      <DialogHeader title={<T id="title" />} />
+
+      <p className="text-dim">{<T id="description" />}</p>
+
       <VolumeForm
         snapshot={snapshot}
         onSubmitted={() => {
-          onClose();
+          closeDialog();
           navigate(routes.volumes.index());
         }}
         renderFooter={(formState) => (
-          <footer className="row mt-2 justify-end gap-2">
-            <Button variant="ghost" color="gray" onClick={onClose}>
+          <DialogFooter className="mt-4">
+            <CloseDialogButton>
               <Translate id="common.cancel" />
-            </Button>
+            </CloseDialogButton>
 
             <Button type="submit" loading={formState.isSubmitting} autoFocus>
               <Translate id="common.create" />
             </Button>
-          </footer>
+          </DialogFooter>
         )}
       />
     </Dialog>

diff --git a/src/pages/volumes/volume-snapshots/volume-snapshots-list.tsx b/src/pages/volumes/volume-snapshots/volume-snapshots-list.tsx
@@ -5,6 +5,7 @@ import { ButtonMenuItem, Table, Tooltip, useBreakpoint } from '@koyeb/design-sys
 import { useVolumes } from 'src/api/hooks/volume';
 import { VolumeSnapshot } from 'src/api/model';
 import { ActionsMenu } from 'src/components/actions-menu';
+import { Dialog } from 'src/components/dialog';
 import { NoResource } from 'src/components/no-resource';
 import { RegionFlag } from 'src/components/region-flag';
 import { RegionName } from 'src/components/region-name';
@@ -80,7 +81,8 @@ export function VolumeSnapshotsList({ snapshots }: { snapshots: VolumeSnapshot[]
 }
 
 function Actions({ snapshot }: { snapshot: VolumeSnapshot }) {
-  const [openDialog, setOpenDialog] = useState<'create' | 'update' | 'delete'>();
+  const [openedDialog, setOpenedDialog] = useState<'update' | 'delete'>();
+  const openDialog = Dialog.useOpen();
   const canCreate = snapshot.status === 'available' && snapshot.type === 'remote';
 
   return (
@@ -93,39 +95,35 @@ function Actions({ snapshot }: { snapshot: VolumeSnapshot }) {
                 <ButtonMenuItem
                   {...props}
                   disabled={!canCreate}
-                  onClick={withClose(() => setOpenDialog('create'))}
+                  onClick={withClose(() => openDialog('CreateVolume'))}
                 >
                   <T id="actions.createVolume" />
                 </ButtonMenuItem>
               )}
             </Tooltip>
 
-            <ButtonMenuItem onClick={withClose(() => setOpenDialog('update'))}>
+            <ButtonMenuItem onClick={withClose(() => setOpenedDialog('update'))}>
               <T id="actions.update" />
             </ButtonMenuItem>
 
-            <ButtonMenuItem onClick={withClose(() => setOpenDialog('delete'))}>
+            <ButtonMenuItem onClick={withClose(() => setOpenedDialog('delete'))}>
               <T id="actions.delete" />
             </ButtonMenuItem>
           </>
         )}
       </ActionsMenu>
 
-      <CreateVolumeDialog
-        open={openDialog === 'create'}
-        onClose={() => setOpenDialog(undefined)}
-        snapshot={snapshot}
-      />
+      <CreateVolumeDialog snapshot={snapshot} />
 
       <UpdateSnapshotDialog
-        open={openDialog === 'update'}
-        onClose={() => setOpenDialog(undefined)}
+        open={openedDialog === 'update'}
+        onClose={() => setOpenedDialog(undefined)}
         snapshot={snapshot}
       />
 
       <DeleteSnapshotDialog
-        open={openDialog === 'delete'}
-        onClose={() => setOpenDialog(undefined)}
+        open={openedDialog === 'delete'}
+        onClose={() => setOpenedDialog(undefined)}
         snapshot={snapshot}
       />
     </>

diff --git a/src/pages/volumes/volumes-list/volumes-list.page.tsx b/src/pages/volumes/volumes-list/volumes-list.page.tsx
@@ -1,11 +1,11 @@
-import { useState } from 'react';
-
 import { Button } from '@koyeb/design-system';
 import { useVolumesQuery } from 'src/api/hooks/volume';
+import { Dialog } from 'src/components/dialog';
 import { DocumentTitle } from 'src/components/document-title';
 import { Loading } from 'src/components/loading';
 import { QueryError } from 'src/components/query-error';
 import { Title } from 'src/components/title';
+import { useMount } from 'src/hooks/lifecycle';
 import { useHistoryState } from 'src/hooks/router';
 import { createTranslate } from 'src/intl/translate';
 
@@ -17,9 +17,15 @@ const T = createTranslate('pages.volumes');
 
 export function VolumesListPage() {
   const historyState = useHistoryState<{ create: boolean }>();
-  const [createDialogOpen, setCreateDialogOpen] = useState(Boolean(historyState.create));
+  const openDialog = Dialog.useOpen();
   const t = T.useTranslate();
 
+  useMount(() => {
+    if (historyState.create) {
+      openDialog('CreateVolume');
+    }
+  });
+
   const volumesQuery = useVolumesQuery();
 
   if (volumesQuery.isPending) {
@@ -40,15 +46,15 @@ export function VolumesListPage() {
         title={<T id="header.title" />}
         end={
           volumes.length > 0 && (
-            <Button onClick={() => setCreateDialogOpen(true)}>
+            <Button onClick={() => openDialog('CreateVolume')}>
               <T id="header.createVolume" />
             </Button>
           )
         }
       />
 
-      <VolumesList volumes={volumes} onCreate={() => setCreateDialogOpen(true)} />
-      <CreateVolumeDialog open={createDialogOpen} onClose={() => setCreateDialogOpen(false)} />
+      <VolumesList volumes={volumes} onCreate={() => openDialog('CreateVolume')} />
+      <CreateVolumeDialog />
     </div>
   );
 }
diff --git a/src/pages/volumes/volumes-list/volumes-list.stories.tsx b/src/pages/volumes/volumes-list/volumes-list.stories.tsx
@@ -51,4 +51,4 @@ const volumes = [
 
 export const volumesList = () => <VolumesList volumes={volumes} onCreate={action('onCreate')} />;
 
-export const createVolumeDialog = () => <CreateVolumeDialog open onClose={action('onClose')} />;
+export const createVolumeDialog = () => <CreateVolumeDialog />;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -51,4 +51,4 @@ const volumes = [

		export const volumesList = () => <VolumesList volumes={volumes} onCreate={action('onCreate')} />;

		export const createVolumeDialog = () => <CreateVolumeDialog open onClose={action('onClose')} />;
		export const createVolumeDialog = () => <CreateVolumeDialog />;