Initial commit

src/pages/RunbooksPage.tsx

@@ -0,0 +1,89 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  Button,
+  Field,
+  Input,
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+  Textarea,
+} from "@fluentui/react-components";
+import { useState } from "react";
+import { portalApi } from "../api/portalApi";
+import { DataState } from "../components/DataState";
+import { FormActions, FormGrid, FormSection, FormWide } from "../components/FormSection";
+import { PageHeader } from "../components/PageHeader";
+
+export function RunbooksPage() {
+  const queryClient = useQueryClient();
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const { data, error, isLoading } = useQuery({
+    queryKey: ["runbooks"],
+    queryFn: ({ signal }) => portalApi.getRunbooks(signal),
+  });
+  const addRunbook = useMutation({
+    mutationFn: portalApi.addRunbook,
+    onSuccess: async () => {
+      setName("");
+      setDescription("");
+      await queryClient.invalidateQueries({ queryKey: ["runbooks"] });
+    },
+  });
+
+  return (
+    <>
+      <PageHeader title="Runbooks" description="Automatisierungen fuer Portalereignisse." />
+      <FormSection
+        onSubmit={(event) => {
+          event.preventDefault();
+          addRunbook.mutate({ description, name });
+        }}
+      >
+        <FormGrid>
+          <Field label="Name" required>
+            <Input value={name} onChange={(_, data) => setName(data.value)} />
+          </Field>
+          <FormWide>
+            <Field label="Description" required validationMessage={addRunbook.error?.message}>
+              <Textarea value={description} onChange={(_, data) => setDescription(data.value)} />
+            </Field>
+          </FormWide>
+        </FormGrid>
+        <FormActions>
+          <Button
+            appearance="primary"
+            disabled={!name || !description || addRunbook.isPending}
+            type="submit"
+          >
+            Add runbook
+          </Button>
+        </FormActions>
+      </FormSection>
+      <DataState isLoading={isLoading} error={error} />
+      {data && (
+        <Table aria-label="Runbooks">
+          <TableHeader>
+            <TableRow>
+              <TableHeaderCell>Name</TableHeaderCell>
+              <TableHeaderCell>Description</TableHeaderCell>
+              <TableHeaderCell>Id</TableHeaderCell>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {data.map((runbook) => (
+              <TableRow key={runbook.id}>
+                <TableCell>{runbook.name}</TableCell>
+                <TableCell>{runbook.decription ?? "-"}</TableCell>
+                <TableCell>{runbook.id}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
+    </>
+  );
+}