Initial commit

src/pages/DeploymentGroupsPage.tsx

@@ -0,0 +1,84 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  Button,
+  Field,
+  Input,
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+} from "@fluentui/react-components";
+import { useState } from "react";
+import { portalApi } from "../api/portalApi";
+import { DataState } from "../components/DataState";
+import { FormActions, FormGrid, FormSection } from "../components/FormSection";
+import { PageHeader } from "../components/PageHeader";
+
+export function DeploymentGroupsPage() {
+  const queryClient = useQueryClient();
+  const [templateId, setTemplateId] = useState("");
+  const [status, setStatus] = useState("New");
+  const { data, error, isLoading } = useQuery({
+    queryKey: ["deploymentGroups"],
+    queryFn: ({ signal }) => portalApi.getDeploymentGroups(signal),
+  });
+  const addDeploymentGroup = useMutation({
+    mutationFn: portalApi.addDeploymentGroup,
+    onSuccess: async () => {
+      setTemplateId("");
+      setStatus("New");
+      await queryClient.invalidateQueries({ queryKey: ["deploymentGroups"] });
+    },
+  });
+
+  return (
+    <>
+      <PageHeader title="Deployment Groups" description="Gruppen von Bereitstellungen je Template." />
+      <FormSection
+        onSubmit={(event) => {
+          event.preventDefault();
+          addDeploymentGroup.mutate({ status, templateId });
+        }}
+      >
+        <FormGrid>
+          <Field label="Template Id" required>
+            <Input value={templateId} onChange={(_, data) => setTemplateId(data.value)} />
+          </Field>
+          <Field label="Status" required validationMessage={addDeploymentGroup.error?.message}>
+            <Input value={status} onChange={(_, data) => setStatus(data.value)} />
+          </Field>
+        </FormGrid>
+        <FormActions>
+          <Button
+            appearance="primary"
+            disabled={!templateId || !status || addDeploymentGroup.isPending}
+            type="submit"
+          >
+            Add deployment group
+          </Button>
+        </FormActions>
+      </FormSection>
+      <DataState isLoading={isLoading} error={error} />
+      {data && (
+        <Table aria-label="Deployment groups">
+          <TableHeader>
+            <TableRow>
+              <TableHeaderCell>Status</TableHeaderCell>
+              <TableHeaderCell>Id</TableHeaderCell>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {data.map((deploymentGroup) => (
+              <TableRow key={deploymentGroup.id}>
+                <TableCell>{deploymentGroup.status ?? "Unknown"}</TableCell>
+                <TableCell>{deploymentGroup.id}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
+    </>
+  );
+}