#591 - server-ssh-keys

resources/js/pages/ssh-keys/components/add-ssh-key.tsx

@@ -23,7 +23,7 @@ type SshKeyForm = {
   public_key: string;
 };
 
-export default function AddSshKey({ children }: { children: ReactNode }) {
+export default function AddSshKey({ children, onKeyAdded }: { children: ReactNode; onKeyAdded?: () => void }) {
   const [open, setOpen] = useState(false);
 
   const form = useForm<Required<SshKeyForm>>({
@@ -36,6 +36,9 @@ export default function AddSshKey({ children }: { children: ReactNode }) {
     form.post(route('ssh-keys.store'), {
       onSuccess: () => {
         setOpen(false);
+        if (onKeyAdded) {
+          onKeyAdded();
+        }
       },
     });
   };

resources/js/pages/ssh-keys/components/columns.tsx

@@ -16,9 +16,9 @@ import { useForm } from '@inertiajs/react';
 import { LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
 import FormSuccessful from '@/components/form-successful';
 import { useState } from 'react';
-import { SSHKey } from '@/types/ssh-key';
+import { SshKey } from '@/types/ssh-key';
 
-function Delete({ sshKey }: { sshKey: SSHKey }) {
+function Delete({ sshKey }: { sshKey: SshKey }) {
   const [open, setOpen] = useState(false);
   const form = useForm();
 
@@ -57,7 +57,7 @@ function Delete({ sshKey }: { sshKey: SSHKey }) {
   );
 }
 
-export const columns: ColumnDef<SSHKey>[] = [
+export const columns: ColumnDef<SshKey>[] = [
   {
     accessorKey: 'id',
     header: 'ID',

resources/js/pages/ssh-keys/components/ssh-key-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 { SshKey } from '@/types/ssh-key';
+import AddSshKey from '@/pages/ssh-keys/components/add-ssh-key';
+import { Button } from '@/components/ui/button';
+import { PlusIcon } from 'lucide-react';
+
+export default function SshKeySelect({
+  value,
+  onValueChange,
+  ...props
+}: {
+  value: string;
+  onValueChange: (value: string) => void;
+} & SelectTriggerProps) {
+  const query = useQuery<SshKey[]>({
+    queryKey: ['sshKey'],
+    queryFn: async () => {
+      return (await axios.get(route('ssh-keys.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 key'} />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            {query.isSuccess &&
+              query.data.map((sshKey: SshKey) => (
+                <SelectItem key={`db-${sshKey.name}`} value={sshKey.id.toString()}>
+                  {sshKey.name}
+                </SelectItem>
+              ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <AddSshKey onKeyAdded={() => query.refetch()}>
+        <Button variant="outline">
+          <PlusIcon />
+        </Button>
+      </AddSshKey>
+    </div>
+  );
+}

resources/js/pages/ssh-keys/index.tsx

@@ -4,13 +4,13 @@ import Container from '@/components/container';
 import Heading from '@/components/heading';
 import { Button } from '@/components/ui/button';
 import { DataTable } from '@/components/data-table';
-import { SSHKey } from '@/types/ssh-key';
+import { SshKey } from '@/types/ssh-key';
 import { columns } from '@/pages/ssh-keys/components/columns';
 import AddSshKey from '@/pages/ssh-keys/components/add-ssh-key';
 import { PaginatedData } from '@/types';
 
 type Page = {
-  sshKeys: PaginatedData<SSHKey>;
+  sshKeys: PaginatedData<SshKey>;
 };
 
 export default function SshKeys() {