refactor: replace dialog components with FormDrawer for improved UI consistency

Updated multiple components to utilize the new FormDrawer for modal dialogs, enhancing the user interface and streamlining the layout. This change includes the ConfirmDialog, ApiKeyCreateDialog, FirewallRuleCreateDialog, and others, ensuring a more cohesive and modern design across the application. Additionally, refactored the ConfirmDialog to improve confirmation handling and user feedback during actions.

apps/web/src/components/access/api-key-create-dialog.tsx

@@ -2,16 +2,10 @@ import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
 
 import { Button } from '@evobgp/ui/components/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@evobgp/ui/components/dialog'
 import { Input } from '@evobgp/ui/components/input'
 import { Label } from '@evobgp/ui/components/label'
 
+import { FormDrawer } from '@/components/form-drawer'
 import { LoadingButton } from '@/components/loading-button'
 import { SelectField } from '@/components/select-field'
 import { API_KEY_ROLE_ITEMS } from '@/lib/access/api-key-labels'
@@ -68,48 +62,48 @@ export function ApiKeyCreateDialog({ open, onOpenChange, onCreated }: ApiKeyCrea
   }
 
   return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent className="sm:max-w-sm">
-        <DialogHeader>
-          <DialogTitle>Новый API-ключ</DialogTitle>
-        </DialogHeader>
-        <div className="flex flex-col gap-4 py-2">
-          <div className="flex flex-col gap-2">
-            <Label htmlFor="key-name">Имя</Label>
-            <Input
-              id="key-name"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              placeholder="CI / оператор UI"
-            />
-          </div>
-          <SelectField
-            id="key-role"
-            label="Роль"
-            items={[...API_KEY_ROLE_ITEMS]}
-            value={role}
-            placeholder="Выберите роль"
-            onValueChange={(v) => v && setRole(v as ApiKeyRole)}
-          />
-          <div className="flex flex-col gap-2">
-            <Label htmlFor="key-expires">Истекает (опционально)</Label>
-            <Input
-              id="key-expires"
-              type="datetime-local"
-              value={expiresLocal}
-              onChange={(e) => setExpiresLocal(e.target.value)}
-            />
-          </div>
-        </div>
-        <DialogFooter>
+    <FormDrawer
+      open={open}
+      onOpenChange={handleOpenChange}
+      title="Новый API-ключ"
+      className="sm:max-w-sm"
+      footer={
+        <>
           <Button variant="outline" onClick={() => handleOpenChange(false)}>
             Отмена
           </Button>
           <LoadingButton onClick={save} loading={createMutation.isPending}>
             Создать
           </LoadingButton>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        </>
+      }
+    >
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="key-name">Имя</Label>
+        <Input
+          id="key-name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="CI / оператор UI"
+        />
+      </div>
+      <SelectField
+        id="key-role"
+        label="Роль"
+        items={[...API_KEY_ROLE_ITEMS]}
+        value={role}
+        placeholder="Выберите роль"
+        onValueChange={(v) => v && setRole(v as ApiKeyRole)}
+      />
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="key-expires">Истекает (опционально)</Label>
+        <Input
+          id="key-expires"
+          type="datetime-local"
+          value={expiresLocal}
+          onChange={(e) => setExpiresLocal(e.target.value)}
+        />
+      </div>
+    </FormDrawer>
   )
 }