#591 - backups

resources/js/pages/backups/components/columns.tsx

@@ -10,7 +10,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/components/ui/dialog';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
 import { useForm } from '@inertiajs/react';
 import { LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
@@ -18,13 +18,15 @@ import FormSuccessful from '@/components/form-successful';
 import { useState } from 'react';
 import { Badge } from '@/components/ui/badge';
 import { Backup } from '@/types/backup';
+import BackupFiles from '@/pages/backups/components/files';
+import EditBackup from '@/pages/backups/components/edit-backup';
 
 function Delete({ backup }: { backup: Backup }) {
   const [open, setOpen] = useState(false);
   const form = useForm();
 
   const submit = () => {
-    form.delete(route('database-backups.destroy', { server: backup.server_id, backup: backup.id }), {
+    form.delete(route('backups.destroy', { server: backup.server_id, backup: backup.id }), {
       onSuccess: () => {
         setOpen(false);
       },
@@ -122,6 +124,13 @@ export const columns: ColumnDef<Backup>[] = [
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
+              <EditBackup backup={row.original}>
+                <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit</DropdownMenuItem>
+              </EditBackup>
+              <BackupFiles backup={row.original}>
+                <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Files</DropdownMenuItem>
+              </BackupFiles>
+              <DropdownMenuSeparator />
               <Delete backup={row.original} />
             </DropdownMenuContent>
           </DropdownMenu>

resources/js/pages/backups/components/create-backup.tsx

@@ -4,21 +4,17 @@ import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHe
 import { Form, FormField, FormFields } from '@/components/ui/form';
 import { useForm, usePage } from '@inertiajs/react';
 import { Button } from '@/components/ui/button';
-import { LoaderCircle, WifiIcon } from 'lucide-react';
+import { LoaderCircle } from 'lucide-react';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Database } from '@/types/database';
-import axios from 'axios';
 import InputError from '@/components/ui/input-error';
-import { StorageProvider } from '@/types/storage-provider';
-import ConnectStorageProvider from '@/pages/storage-providers/components/connect-storage-provider';
 import { SharedData } from '@/types';
 import { Input } from '@/components/ui/input';
+import DatabaseSelect from '@/pages/database-users/components/database-select';
+import StorageProviderSelect from '@/pages/storage-providers/components/storage-provider-select';
 
 export default function CreateBackup({ server, children }: { server: Server; children: ReactNode }) {
   const [open, setOpen] = useState(false);
-  const [databases, setDatabases] = useState<Database[]>([]);
-  const [storageProviders, setStorageProviders] = useState<StorageProvider[]>([]);
   const page = usePage<SharedData>();
 
   const form = useForm<{
@@ -37,87 +33,45 @@ export default function CreateBackup({ server, children }: { server: Server; chi
 
   const submit = (e: FormEvent) => {
     e.preventDefault();
-    form.post(route('database-backups.store', { server: server.id }), {
+    form.post(route('backups.store', { server: server.id }), {
       onSuccess: () => {
         setOpen(false);
       },
     });
   };
 
-  const onOpenChange = (open: boolean) => {
-    setOpen(open);
-    if (open) {
-      fetchDatabases();
-      fetchStorageProviders();
-    }
-  };
-
-  const fetchDatabases = () => {
-    axios.get(route('databases.json', { server: server.id })).then((response) => {
-      setDatabases(response.data);
-    });
-  };
-
-  const fetchStorageProviders = () => {
-    axios.get(route('storage-providers.json')).then((response) => {
-      setStorageProviders(response.data);
-    });
-  };
-
   return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
+    <Sheet open={open} onOpenChange={setOpen}>
       <SheetTrigger asChild>{children}</SheetTrigger>
       <SheetContent className="sm:max-w-3xl">
         <SheetHeader>
           <SheetTitle>Create backup</SheetTitle>
           <SheetDescription className="sr-only">Create a new backup</SheetDescription>
         </SheetHeader>
-        <Form id="create-backup" onSubmit={submit} className="p-4">
+        <Form id="create-backup-form" onSubmit={submit} className="p-4">
           <FormFields>
             {/*database*/}
             <FormField>
               <Label htmlFor="database">Database</Label>
-              <Select value={form.data.database} onValueChange={(value) => form.setData('database', value)}>
-                <SelectTrigger id="database">
-                  <SelectValue placeholder="Select a database" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    {databases.map((database) => (
-                      <SelectItem key={`db-${database.name}`} value={database.id.toString()}>
-                        {database.name}
-                      </SelectItem>
-                    ))}
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
+              <DatabaseSelect
+                id="database"
+                name="database"
+                serverId={server.id}
+                value={form.data.database}
+                onValueChange={(value) => form.setData('database', value)}
+              />
               <InputError message={form.errors.database} />
             </FormField>
 
             {/*storage*/}
             <FormField>
               <Label htmlFor="storage">Storage</Label>
-              <div className="flex items-center gap-2">
-                <Select value={form.data.storage} onValueChange={(value) => form.setData('storage', value)}>
-                  <SelectTrigger id="storage">
-                    <SelectValue placeholder="Select a storage" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectGroup>
-                      {storageProviders.map((storageProvider) => (
-                        <SelectItem key={`sp-${storageProvider.name}`} value={storageProvider.id.toString()}>
-                          {storageProvider.name}
-                        </SelectItem>
-                      ))}
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
-                <ConnectStorageProvider onProviderAdded={() => fetchStorageProviders()}>
-                  <Button variant="outline">
-                    <WifiIcon />
-                  </Button>
-                </ConnectStorageProvider>
-              </div>
+              <StorageProviderSelect
+                id="storage"
+                name="storage"
+                value={form.data.storage}
+                onValueChange={(value) => form.setData('storage', value)}
+              />
               <InputError message={form.errors.storage} />
             </FormField>
 
@@ -166,7 +120,7 @@ export default function CreateBackup({ server, children }: { server: Server; chi
         </Form>
         <SheetFooter>
           <div className="flex items-center gap-2">
-            <Button type="button" onClick={submit} disabled={form.processing}>
+            <Button form="create-backup-form" type="button" onClick={submit} disabled={form.processing}>
               {form.processing && <LoaderCircle className="animate-spin" />}
               Create
             </Button>

resources/js/pages/backups/components/edit-backup.tsx

@@ -0,0 +1,113 @@
+import React, { FormEvent, ReactNode, useState } from 'react';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { useForm, usePage } from '@inertiajs/react';
+import { Button } from '@/components/ui/button';
+import { LoaderCircle } from 'lucide-react';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import InputError from '@/components/ui/input-error';
+import { SharedData } from '@/types';
+import { Input } from '@/components/ui/input';
+import { Backup } from '@/types/backup';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+
+export default function EditBackup({ backup, children }: { backup: Backup; children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+  const page = usePage<SharedData>();
+
+  const form = useForm<{
+    interval: string;
+    custom_interval: string;
+    keep: string;
+  }>({
+    interval: page.props.configs.cronjob_intervals[backup.interval] ? backup.interval : 'custom',
+    custom_interval: backup.interval,
+    keep: backup.keep_backups.toString(),
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.patch(route('backups.update', { server: backup.server_id, backup: backup.id }), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Create backup</DialogTitle>
+          <DialogDescription className="sr-only">Create a new backup</DialogDescription>
+        </DialogHeader>
+        <Form id="create-backup-form" onSubmit={submit} className="p-4">
+          <FormFields>
+            {/*interval*/}
+            <FormField>
+              <Label htmlFor="interval">Interval</Label>
+              <Select value={form.data.interval} onValueChange={(value) => form.setData('interval', value)}>
+                <SelectTrigger id="interval">
+                  <SelectValue placeholder="Select an interval" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    {Object.entries(page.props.configs.cronjob_intervals).map(([key, value]) => (
+                      <SelectItem key={`interval-${key}`} value={key}>
+                        {value}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <InputError message={form.errors.interval} />
+            </FormField>
+
+            {/*custom interval*/}
+            {form.data.interval === 'custom' && (
+              <FormField>
+                <Label htmlFor="custom_interval">Custom interval (crontab)</Label>
+                <Input
+                  id="custom_interval"
+                  name="custom_interval"
+                  value={form.data.custom_interval}
+                  onChange={(e) => form.setData('custom_interval', e.target.value)}
+                  placeholder="* * * * *"
+                />
+                <InputError message={form.errors.custom_interval} />
+              </FormField>
+            )}
+
+            {/*backups to keep*/}
+            <FormField>
+              <Label htmlFor="keep">Backups to keep</Label>
+              <Input id="keep" name="keep" value={form.data.keep} onChange={(e) => form.setData('keep', e.target.value)} />
+              <InputError message={form.errors.keep} />
+            </FormField>
+          </FormFields>
+        </Form>
+        <DialogFooter>
+          <div className="flex items-center gap-2">
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button form="create-backup-form" type="button" onClick={submit} disabled={form.processing}>
+              {form.processing && <LoaderCircle className="animate-spin" />}
+              Save
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

resources/js/pages/backups/components/files.tsx

@@ -0,0 +1,193 @@
+import { Backup } from '@/types/backup';
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import React, { ReactNode, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { LoaderCircle, LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
+import { useForm } from '@inertiajs/react';
+import { BackupFile } from '@/types/backup-file';
+import { ColumnDef } from '@tanstack/react-table';
+import DateTime from '@/components/date-time';
+import { Badge } from '@/components/ui/badge';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { DataTable } from '@/components/data-table';
+import axios from 'axios';
+import { useQuery } from '@tanstack/react-query';
+import { TableSkeleton } from '@/components/table-skeleton';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import RestoreBackup from '@/pages/backups/components/restore-backup';
+
+function Delete({ file, onDeleted }: { file: BackupFile; onDeleted?: (file: BackupFile) => void }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm();
+
+  const submit = () => {
+    form.delete(
+      route('backup-files.destroy', {
+        server: file.server_id,
+        backup: file.backup_id,
+        backupFile: file.id,
+      }),
+      {
+        onSuccess: () => {
+          setOpen(false);
+          if (onDeleted) {
+            onDeleted(file);
+          }
+        },
+      },
+    );
+  };
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
+          Delete
+        </DropdownMenuItem>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete backup file</DialogTitle>
+          <DialogDescription className="sr-only">Delete backup file</DialogDescription>
+        </DialogHeader>
+        <p className="p-4">Are you sure you want to this backup file?</p>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button variant="destructive" disabled={form.processing} onClick={submit}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default function BackupFiles({ backup, children }: { backup: Backup; children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+
+  const fetchFilesQuery = useQuery({
+    queryKey: ['fetchFiles'],
+    queryFn: async () => {
+      const res = await axios.get(
+        route('backup-files', {
+          server: backup.server_id,
+          backup: backup.id,
+        }),
+      );
+      return res.data;
+    },
+    enabled: open,
+  });
+
+  const runBackupForm = useForm();
+  const runBackup = () => {
+    runBackupForm.post(route('backups.run', { server: backup.server_id, backup: backup.id }), {
+      onSuccess: () => {
+        fetchFilesQuery.refetch();
+      },
+    });
+  };
+
+  const columns: ColumnDef<BackupFile>[] = [
+    {
+      accessorKey: 'name',
+      header: 'Name',
+      enableColumnFilter: true,
+      enableSorting: true,
+    },
+    {
+      accessorKey: 'created_at',
+      header: 'Created at',
+      enableColumnFilter: true,
+      enableSorting: true,
+      cell: ({ row }) => {
+        return <DateTime date={row.original.created_at} />;
+      },
+    },
+    {
+      accessorKey: 'restored_to',
+      header: 'Restored to',
+      enableColumnFilter: true,
+      enableSorting: true,
+    },
+    {
+      accessorKey: 'restored_at',
+      header: 'Restored at',
+      enableColumnFilter: true,
+      enableSorting: true,
+      cell: ({ row }) => {
+        return row.original.restored_at ? <DateTime date={row.original.restored_at} /> : '';
+      },
+    },
+    {
+      accessorKey: 'status',
+      header: 'Status',
+      enableColumnFilter: true,
+      enableSorting: true,
+      cell: ({ row }) => {
+        return <Badge variant={row.original.status_color}>{row.original.status}</Badge>;
+      },
+    },
+    {
+      id: 'actions',
+      enableColumnFilter: false,
+      enableSorting: false,
+      cell: ({ row }) => {
+        return (
+          <div className="flex items-center justify-end">
+            <DropdownMenu modal={false}>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" className="h-8 w-8 p-0">
+                  <span className="sr-only">Open menu</span>
+                  <MoreVerticalIcon />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <RestoreBackup backup={backup} file={row.original} onBackupRestored={() => fetchFilesQuery.refetch()}>
+                  <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Restore</DropdownMenuItem>
+                </RestoreBackup>
+                <Delete file={row.original} onDeleted={() => fetchFilesQuery.refetch()} />
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        );
+      },
+    },
+  ];
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>{children}</SheetTrigger>
+      <SheetContent className="sm:max-w-4xl">
+        <SheetHeader>
+          <SheetTitle>Backup files of [{backup.database.name}]</SheetTitle>
+          <SheetDescription className="sr-only">Backup files</SheetDescription>
+        </SheetHeader>
+        {fetchFilesQuery.isLoading && <TableSkeleton modal />}
+        {fetchFilesQuery.isSuccess && !fetchFilesQuery.isLoading && <DataTable columns={columns} data={fetchFilesQuery.data.data} modal />}
+        <SheetFooter>
+          <div className="flex items-center gap-2">
+            <Button type="button" onClick={runBackup} disabled={runBackupForm.processing}>
+              {runBackupForm.processing && <LoaderCircle className="animate-spin" />}
+              Run backup
+            </Button>
+            <SheetClose asChild>
+              <Button variant="outline">Close</Button>
+            </SheetClose>
+          </div>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

resources/js/pages/backups/components/restore-backup.tsx

@@ -0,0 +1,95 @@
+import { Backup } from '@/types/backup';
+import { BackupFile } from '@/types/backup-file';
+import { useForm } from '@inertiajs/react';
+import { FormEvent, ReactNode, useState } from 'react';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { LoaderCircleIcon } from 'lucide-react';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { Label } from '@/components/ui/label';
+import DatabaseSelect from '@/pages/database-users/components/database-select';
+import InputError from '@/components/ui/input-error';
+
+export default function RestoreBackup({
+  backup,
+  file,
+  onBackupRestored,
+  children,
+}: {
+  backup: Backup;
+  file: BackupFile;
+  onBackupRestored?: () => void;
+  children: ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+
+  const form = useForm({
+    database: '',
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.post(
+      route('backup-files.restore', {
+        server: backup.server_id,
+        backup: backup.id,
+        backupFile: file.id,
+      }),
+      {
+        onSuccess: () => {
+          setOpen(false);
+          if (onBackupRestored) {
+            onBackupRestored();
+          }
+        },
+      },
+    );
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Restore backup</DialogTitle>
+          <DialogDescription className="sr-only">Restore backup</DialogDescription>
+        </DialogHeader>
+        <Form id="restore-backup-form" onSubmit={submit} className="p-4">
+          <FormFields>
+            <FormField>
+              <Label htmlFor="database">To database</Label>
+              <DatabaseSelect
+                id="database"
+                name="database"
+                serverId={backup.server_id}
+                value={form.data.database}
+                onValueChange={(value) => form.setData('database', value)}
+              />
+              <InputError message={form.errors.database} />
+            </FormField>
+          </FormFields>
+        </Form>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="outline" disabled={form.processing}>
+              Cancel
+            </Button>
+          </DialogClose>
+          <Button form="restore-backup-form" type="submit" disabled={form.processing}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            Restore
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

resources/js/pages/backups/index.tsx

@@ -9,8 +9,8 @@ import React from 'react';
 import { BookOpenIcon, PlusIcon } from 'lucide-react';
 import { Backup } from '@/types/backup';
 import { DataTable } from '@/components/data-table';
-import { columns } from '@/pages/database-backups/components/columns';
-import CreateBackup from '@/pages/database-backups/components/create-backup';
+import { columns } from '@/pages/backups/components/columns';
+import CreateBackup from '@/pages/backups/components/create-backup';
 
 type Page = {
   server: Server;

resources/js/pages/database-users/components/database-select.tsx

@@ -0,0 +1,42 @@
+import { useQuery } from '@tanstack/react-query';
+import { Database } from '@/types/database';
+import axios from 'axios';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import React from 'react';
+import { SelectTriggerProps } from '@radix-ui/react-select';
+
+export default function DatabaseSelect({
+  serverId,
+  value,
+  onValueChange,
+  ...props
+}: {
+  serverId: number;
+  value: string;
+  onValueChange: (value: string) => void;
+} & SelectTriggerProps) {
+  const databasesQuery = useQuery<Database[]>({
+    queryKey: ['databases', serverId],
+    queryFn: async () => {
+      return (await axios.get(route('databases.json', { server: serverId }))).data;
+    },
+  });
+
+  return (
+    <Select value={value} onValueChange={onValueChange} disabled={databasesQuery.isFetching}>
+      <SelectTrigger {...props}>
+        <SelectValue placeholder={databasesQuery.isFetching ? 'Loading...' : 'Select a database'} />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          {databasesQuery.isSuccess &&
+            databasesQuery.data.map((database: Database) => (
+              <SelectItem key={`db-${database.name}`} value={database.id.toString()}>
+                {database.name}
+              </SelectItem>
+            ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  );
+}

resources/js/pages/server-providers/components/connect-server-provider.tsx

@@ -27,12 +27,10 @@ type ServerProviderForm = {
 };
 
 export default function ConnectServerProvider({
-  providers,
   defaultProvider,
   onProviderAdded,
   children,
 }: {
-  providers: string[];
   defaultProvider?: string;
   onProviderAdded?: () => void;
   children: ReactNode;
@@ -62,7 +60,7 @@ export default function ConnectServerProvider({
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="sm:max-w-xl">
+      <DialogContent className="max-h-screen overflow-y-auto sm:max-w-xl">
         <DialogHeader>
           <DialogTitle>Connect to server provider</DialogTitle>
           <DialogDescription className="sr-only">Connect to a new server provider</DialogDescription>
@@ -83,7 +81,7 @@ export default function ConnectServerProvider({
                 </SelectTrigger>
                 <SelectContent>
                   <SelectGroup>
-                    {providers.map(
+                    {page.props.configs.server_providers.map(
                       (provider) =>
                         provider !== 'custom' && (
                           <SelectItem key={provider} value={provider}>
@@ -108,21 +106,25 @@ export default function ConnectServerProvider({
               />
               <InputError message={form.errors.name} />
             </FormField>
-            {page.props.configs.server_providers_custom_fields[form.data.provider]?.map((item: string) => (
-              <FormField key={item}>
-                <Label htmlFor={item} className="capitalize">
-                  {item.replaceAll('_', ' ')}
-                </Label>
-                <Input
-                  type="text"
-                  name={item}
-                  id={item}
-                  value={(form.data[item as keyof ServerProviderForm] as string) ?? ''}
-                  onChange={(e) => form.setData(item as keyof ServerProviderForm, e.target.value)}
-                />
-                <InputError message={form.errors[item as keyof ServerProviderForm]} />
-              </FormField>
-            ))}
+            <div
+              className={page.props.configs.server_providers_custom_fields[form.data.provider].length > 1 ? 'grid grid-cols-2 items-start gap-6' : ''}
+            >
+              {page.props.configs.server_providers_custom_fields[form.data.provider]?.map((item: string) => (
+                <FormField key={item}>
+                  <Label htmlFor={item} className="capitalize">
+                    {item.replaceAll('_', ' ')}
+                  </Label>
+                  <Input
+                    type="text"
+                    name={item}
+                    id={item}
+                    value={(form.data[item as keyof ServerProviderForm] as string) ?? ''}
+                    onChange={(e) => form.setData(item as keyof ServerProviderForm, e.target.value)}
+                  />
+                  <InputError message={form.errors[item as keyof ServerProviderForm]} />
+                </FormField>
+              ))}
+            </div>
             <FormField>
               <div className="flex items-center space-x-3">
                 <Checkbox id="global" name="global" checked={form.data.global} onClick={() => form.setData('global', !form.data.global)} />

resources/js/pages/server-providers/components/server-provider-select.tsx

@@ -0,0 +1,50 @@
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import React from 'react';
+import { SelectTriggerProps } from '@radix-ui/react-select';
+import { ServerProvider } from '@/types/server-provider';
+import ConnectServerProvider from '@/pages/server-providers/components/connect-server-provider';
+import { Button } from '@/components/ui/button';
+import { WifiIcon } from 'lucide-react';
+
+export default function ServerProviderSelect({
+  value,
+  onValueChange,
+  ...props
+}: {
+  value: string;
+  onValueChange: (value: string) => void;
+} & SelectTriggerProps) {
+  const query = useQuery<ServerProvider[]>({
+    queryKey: ['serverProvider'],
+    queryFn: async () => {
+      return (await axios.get(route('server-providers.json'))).data;
+    },
+  });
+
+  return (
+    <div className="flex items-center gap-2">
+      <Select value={value} onValueChange={onValueChange} disabled={query.isFetching}>
+        <SelectTrigger {...props}>
+          <SelectValue placeholder={query.isFetching ? 'Loading...' : 'Select a provider'} />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            {query.isSuccess &&
+              query.data.map((serverProvider: ServerProvider) => (
+                <SelectItem key={`db-${serverProvider.name}`} value={serverProvider.id.toString()}>
+                  {serverProvider.name}
+                </SelectItem>
+              ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <ConnectServerProvider onProviderAdded={() => query.refetch()}>
+        <Button variant="outline">
+          <WifiIcon />
+        </Button>
+      </ConnectServerProvider>
+    </div>
+  );
+}

resources/js/pages/server-providers/index.tsx

@@ -28,7 +28,7 @@ export default function ServerProviders() {
         <div className="flex items-start justify-between">
           <Heading title="Server Providers" description="Here you can manage all of the server provider connectinos" />
           <div className="flex items-center gap-2">
-            <ConnectServerProvider providers={page.props.configs.server_providers}>
+            <ConnectServerProvider>
               <Button>Connect</Button>
             </ConnectServerProvider>
           </div>

resources/js/pages/servers/components/create-server.tsx

@@ -1,6 +1,6 @@
 import { ClipboardCheckIcon, ClipboardIcon, LoaderCircle, TriangleAlert, WifiIcon } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
 import { useForm, usePage } from '@inertiajs/react';
 import React, { FormEventHandler, useState } from 'react';
 import { Label } from '@/components/ui/label';
@@ -150,11 +150,7 @@ export default function CreateServer({ children }: { children: React.ReactNode }
                       </SelectGroup>
                     </SelectContent>
                   </Select>
-                  <ConnectServerProvider
-                    providers={page.props.configs.server_providers.filter((item) => item !== 'custom')}
-                    defaultProvider={form.data.provider}
-                    onProviderAdded={fetchServerProviders}
-                  >
+                  <ConnectServerProvider defaultProvider={form.data.provider} onProviderAdded={fetchServerProviders}>
                     <Button variant="outline">
                       <WifiIcon />
                     </Button>
@@ -339,10 +335,15 @@ export default function CreateServer({ children }: { children: React.ReactNode }
           </FormFields>
         </Form>
         <SheetFooter>
-          <div className="flex items-center">
+          <div className="flex items-center gap-2">
             <Button type="submit" form="create-server-form" tabIndex={4} disabled={form.processing}>
               {form.processing && <LoaderCircle className="animate-spin" />} Create
             </Button>
+            <SheetClose asChild>
+              <Button variant="outline" disabled={form.processing}>
+                Cancel
+              </Button>
+            </SheetClose>
           </div>
         </SheetFooter>
       </SheetContent>

resources/js/pages/servers/components/delete-server.tsx

@@ -34,13 +34,18 @@ export default function DeleteServer({ server, children }: { server: Server; chi
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Delete {server.name}</DialogTitle>
-          <DialogDescription>Delete server and its resources.</DialogDescription>
+          <DialogDescription className="sr-only">Delete server and its resources.</DialogDescription>
         </DialogHeader>
 
+        <p className="p-4">
+          Are you sure you want to delete this server: <strong>{server.name}</strong>? All resources associated with this server will be deleted and
+          this action cannot be undone.
+        </p>
+
         <Form id="delete-server-form" onSubmit={submit} className="p-4">
           <FormFields>
             <FormField>
-              <Label htmlFor="server-name">Name</Label>
+              <Label htmlFor="server-name">Server name</Label>
               <Input id="server-name" value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} />
               <InputError message={form.errors.name} />
             </FormField>

resources/js/pages/servers/components/header.tsx

@@ -17,7 +17,7 @@ export default function ServerHeader({ server }: { server: Server }) {
                 <div className="hidden lg:inline-flex">{server.name}</div>
               </div>
             </TooltipTrigger>
-            <TooltipContent>
+            <TooltipContent side="bottom">
               <span className="lg:hidden">{server.name}</span>
               <span className="hidden lg:inline-flex">Server Name</span>
             </TooltipContent>
@@ -30,7 +30,7 @@ export default function ServerHeader({ server }: { server: Server }) {
                 <div className="hidden lg:inline-flex">{server.provider}</div>
               </div>
             </TooltipTrigger>
-            <TooltipContent>
+            <TooltipContent side="bottom">
               <div>
                 <span className="lg:hidden">{server.provider}</span>
                 <span className="hidden lg:inline-flex">Server Provider</span>
@@ -45,7 +45,7 @@ export default function ServerHeader({ server }: { server: Server }) {
                 <div className="hidden lg:inline-flex">{server.ip}</div>
               </div>
             </TooltipTrigger>
-            <TooltipContent>
+            <TooltipContent side="bottom">
               <span className="lg:hidden">{server.ip}</span>
               <span className="hidden lg:inline-flex">Server IP</span>
             </TooltipContent>
@@ -60,7 +60,7 @@ export default function ServerHeader({ server }: { server: Server }) {
                     <div>%{parseInt(server.progress || '0')}</div>
                   </div>
                 </TooltipTrigger>
-                <TooltipContent>Installation Progress</TooltipContent>
+                <TooltipContent side="bottom">Installation Progress</TooltipContent>
               </Tooltip>
             </>
           )}

resources/js/pages/storage-providers/components/storage-provider-select.tsx

@@ -0,0 +1,50 @@
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import React from 'react';
+import { SelectTriggerProps } from '@radix-ui/react-select';
+import { StorageProvider } from '@/types/storage-provider';
+import ConnectStorageProvider from '@/pages/storage-providers/components/connect-storage-provider';
+import { Button } from '@/components/ui/button';
+import { WifiIcon } from 'lucide-react';
+
+export default function StorageProviderSelect({
+  value,
+  onValueChange,
+  ...props
+}: {
+  value: string;
+  onValueChange: (value: string) => void;
+} & SelectTriggerProps) {
+  const query = useQuery<StorageProvider[]>({
+    queryKey: ['storageProvider'],
+    queryFn: async () => {
+      return (await axios.get(route('storage-providers.json'))).data;
+    },
+  });
+
+  return (
+    <div className="flex items-center gap-2">
+      <Select value={value} onValueChange={onValueChange} disabled={query.isFetching}>
+        <SelectTrigger {...props}>
+          <SelectValue placeholder={query.isFetching ? 'Loading...' : 'Select a provider'} />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            {query.isSuccess &&
+              query.data.map((storageProvider: StorageProvider) => (
+                <SelectItem key={`db-${storageProvider.name}`} value={storageProvider.id.toString()}>
+                  {storageProvider.name}
+                </SelectItem>
+              ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <ConnectStorageProvider onProviderAdded={() => query.refetch()}>
+        <Button variant="outline">
+          <WifiIcon />
+        </Button>
+      </ConnectStorageProvider>
+    </div>
+  );
+}