@checkstack/gitops-frontend 0.2.0

package/src/components/ProviderList.tsx

@@ -0,0 +1,294 @@
+import { useState } from "react";
+import {
+  usePluginClient,
+  useApi,
+  accessApiRef,
+} from "@checkstack/frontend-api";
+import { GitOpsApi, gitopsAccess } from "@checkstack/gitops-common";
+import {
+  Card,
+  CardHeader,
+  CardHeaderRow,
+  CardTitle,
+  CardContent,
+  Button,
+  EmptyState,
+  ConfirmationModal,
+  Badge,
+  useToast,
+} from "@checkstack/ui";
+import {
+  Plus,
+  RefreshCw,
+  Trash2,
+  Pencil,
+  Github,
+  GitlabIcon,
+} from "lucide-react";
+import { extractErrorMessage } from "@checkstack/common";
+import { ProviderEditor } from "./ProviderEditor";
+
+const formatInterval = (seconds: number) => {
+  if (seconds < 60) return `${seconds}s`;
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m`;
+  return `${Math.floor(seconds / 3600)}h`;
+};
+
+const formatLastSync = (date: Date | null) => {
+  if (!date) return "Never";
+  return new Date(date).toLocaleString();
+};
+
+export const ProviderList = () => {
+  const client = usePluginClient(GitOpsApi);
+  const accessApi = useApi(accessApiRef);
+  const toast = useToast();
+
+  const { allowed: canManage } = accessApi.useAccess(
+    gitopsAccess.provider.manage,
+  );
+
+  const [isEditorOpen, setIsEditorOpen] = useState(false);
+  const [editingProvider, setEditingProvider] = useState<{
+    id: string;
+    type: "github" | "gitlab";
+    target: string;
+    pathPattern: string;
+    baseUrl?: string;
+    syncInterval: number;
+    deletionPolicy: "orphan" | "auto";
+  }>();
+  const [confirmModal, setConfirmModal] = useState<{
+    isOpen: boolean;
+    providerId: string;
+    providerTarget: string;
+  }>({ isOpen: false, providerId: "", providerTarget: "" });
+
+  const {
+    data: providers,
+    isLoading,
+    refetch,
+  } = client.listProviders.useQuery({});
+
+  const createMutation = client.createProvider.useMutation({
+    onSuccess: () => {
+      toast.success("Provider created successfully");
+      setIsEditorOpen(false);
+      void refetch();
+    },
+    onError: (error) => {
+      toast.error(extractErrorMessage(error, "Failed to create provider"));
+    },
+  });
+
+  const updateMutation = client.updateProvider.useMutation({
+    onSuccess: () => {
+      toast.success("Provider updated successfully");
+      setIsEditorOpen(false);
+      setEditingProvider(undefined);
+      void refetch();
+    },
+    onError: (error) => {
+      toast.error(extractErrorMessage(error, "Failed to update provider"));
+    },
+  });
+
+  const deleteMutation = client.deleteProvider.useMutation({
+    onSuccess: () => {
+      toast.success("Provider deleted successfully");
+      setConfirmModal({ isOpen: false, providerId: "", providerTarget: "" });
+      void refetch();
+    },
+    onError: (error) => {
+      toast.error(extractErrorMessage(error, "Failed to delete provider"));
+    },
+  });
+
+  const syncMutation = client.triggerSync.useMutation({
+    onSuccess: () => {
+      toast.success("Sync triggered successfully");
+      void refetch();
+    },
+    onError: (error) => {
+      toast.error(extractErrorMessage(error, "Failed to trigger sync"));
+    },
+  });
+
+  const handleSave = (data: {
+    type: "github" | "gitlab";
+    target: string;
+    pathPattern: string;
+    baseUrl?: string;
+    authToken?: string;
+    syncInterval?: number;
+    deletionPolicy?: "orphan" | "auto";
+  }) => {
+    if (editingProvider) {
+      updateMutation.mutate({
+        id: editingProvider.id,
+        data: {
+          target: data.target,
+          pathPattern: data.pathPattern,
+          baseUrl: data.baseUrl ?? undefined,
+          authToken: data.authToken,
+          syncInterval: data.syncInterval,
+          deletionPolicy: data.deletionPolicy,
+        },
+      });
+    } else {
+      createMutation.mutate(data);
+    }
+  };
+
+  return (
+    <>
+      <Card>
+        <CardHeader>
+          <CardHeaderRow>
+            <CardTitle>Git Providers</CardTitle>
+            {canManage && (
+              <Button size="sm" onClick={() => setIsEditorOpen(true)}>
+                <Plus className="w-4 h-4 mr-2" />
+                Add Provider
+              </Button>
+            )}
+          </CardHeaderRow>
+        </CardHeader>
+        <CardContent>
+          {isLoading ? (
+            <div className="text-center py-8 text-muted-foreground">
+              Loading...
+            </div>
+          ) : !providers || providers.length === 0 ? (
+            <EmptyState
+              title="No providers configured"
+              description="Add a GitHub or GitLab provider to start syncing infrastructure definitions."
+            />
+          ) : (
+            <div className="space-y-3">
+              {providers.map((provider) => (
+                <div
+                  key={provider.id}
+                  className="flex items-center justify-between p-4 rounded-lg border border-border bg-background/50 hover:bg-background/80 transition-colors"
+                >
+                  <div className="flex items-center gap-3 min-w-0">
+                    {provider.type === "github" ? (
+                      <Github className="w-5 h-5 text-muted-foreground shrink-0" />
+                    ) : (
+                      <GitlabIcon className="w-5 h-5 text-muted-foreground shrink-0" />
+                    )}
+                    <div className="min-w-0">
+                      <div className="font-medium truncate">
+                        {provider.target}
+                      </div>
+                      <div className="text-xs text-muted-foreground flex items-center gap-2 mt-0.5">
+                        <span className="truncate">{provider.pathPattern}</span>
+                        <span>·</span>
+                        <span>
+                          every {formatInterval(provider.syncInterval)}
+                        </span>
+                        <span>·</span>
+                        <Badge
+                          variant={
+                            provider.deletionPolicy === "auto"
+                              ? "destructive"
+                              : "outline"
+                          }
+                        >
+                          {provider.deletionPolicy}
+                        </Badge>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex items-center gap-4 shrink-0">
+                    <div className="text-right text-xs text-muted-foreground hidden md:block">
+                      <div>
+                        Last sync: {formatLastSync(provider.lastSyncAt)}
+                      </div>
+                      {provider.lastSyncError && (
+                        <div className="text-destructive truncate max-w-48">
+                          {provider.lastSyncError}
+                        </div>
+                      )}
+                    </div>
+
+                    {canManage && (
+                      <div className="flex items-center gap-1">
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() =>
+                            syncMutation.mutate({ providerId: provider.id })
+                          }
+                          title="Trigger sync"
+                        >
+                          <RefreshCw className="w-4 h-4" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => {
+                            setEditingProvider({
+                              id: provider.id,
+                              type: provider.type,
+                              target: provider.target,
+                              pathPattern: provider.pathPattern,
+                              baseUrl: provider.baseUrl ?? undefined,
+                              syncInterval: provider.syncInterval,
+                              deletionPolicy: provider.deletionPolicy,
+                            });
+                            setIsEditorOpen(true);
+                          }}
+                          title="Edit provider"
+                        >
+                          <Pencil className="w-4 h-4" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() =>
+                            setConfirmModal({
+                              isOpen: true,
+                              providerId: provider.id,
+                              providerTarget: provider.target,
+                            })
+                          }
+                          title="Delete provider"
+                        >
+                          <Trash2 className="w-4 h-4" />
+                        </Button>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <ProviderEditor
+        open={isEditorOpen}
+        onClose={() => {
+          setIsEditorOpen(false);
+          setEditingProvider(undefined);
+        }}
+        onSave={handleSave}
+        initialData={editingProvider}
+      />
+
+      <ConfirmationModal
+        isOpen={confirmModal.isOpen}
+        onClose={() =>
+          setConfirmModal({ isOpen: false, providerId: "", providerTarget: "" })
+        }
+        onConfirm={() => deleteMutation.mutate({ id: confirmModal.providerId })}
+        title="Delete Provider"
+        message={`Are you sure you want to delete the provider for "${confirmModal.providerTarget}"? All provenance tracking will be removed.`}
+        confirmText="Delete"
+        variant="danger"
+      />
+    </>
+  );
+};

package/src/components/SecretEditor.tsx

@@ -0,0 +1,110 @@
+import React, { useState, useEffect } from "react";
+import {
+  Button,
+  Input,
+  Label,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@checkstack/ui";
+
+interface SecretEditorProps {
+  open: boolean;
+  onClose: () => void;
+  onSave: (data: { name: string; value: string; description?: string }) => void;
+}
+
+export const SecretEditor: React.FC<SecretEditorProps> = ({
+  open,
+  onClose,
+  onSave,
+}) => {
+  const [name, setName] = useState("");
+  const [value, setValue] = useState("");
+  const [description, setDescription] = useState("");
+
+  useEffect(() => {
+    if (open) {
+      setName("");
+      setValue("");
+      setDescription("");
+    }
+  }, [open]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim() || !value.trim()) return;
+
+    onSave({
+      name: name.trim(),
+      value: value.trim(),
+      description: description.trim() || undefined,
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <DialogContent size="default">
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>Create Secret</DialogTitle>
+            <DialogDescription className="sr-only">
+              Create a new secret for use in GitOps YAML descriptors
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="secret-name">Name</Label>
+              <Input
+                id="secret-name"
+                placeholder="e.g. GITHUB_TOKEN"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="font-mono"
+                required
+              />
+              <p className="text-xs text-muted-foreground">
+                Referenced as <code className="text-xs">{"${{ secrets.NAME }}"}</code> in descriptors.
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="secret-value">Value</Label>
+              <Input
+                id="secret-value"
+                type="password"
+                placeholder="Secret value..."
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+                required
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="secret-description">Description (optional)</Label>
+              <Input
+                id="secret-description"
+                placeholder="What this secret is used for..."
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!name.trim() || !value.trim()}>
+              Create Secret
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/components/SecretList.tsx

@@ -0,0 +1,204 @@
+import { useState } from "react";
+import {
+  usePluginClient,
+  useApi,
+  accessApiRef,
+} from "@checkstack/frontend-api";
+import { GitOpsApi, gitopsAccess } from "@checkstack/gitops-common";
+import {
+  Card,
+  CardHeader,
+  CardHeaderRow,
+  CardTitle,
+  CardContent,
+  Button,
+  EmptyState,
+  ConfirmationModal,
+  useToast,
+} from "@checkstack/ui";
+import { Plus, RotateCw, Trash2, KeyRound } from "lucide-react";
+import { extractErrorMessage } from "@checkstack/common";
+import { SecretEditor } from "./SecretEditor";
+import { SecretRotateDialog } from "./SecretRotateDialog";
+
+const formatDate = (date: Date) => new Date(date).toLocaleString();
+
+export const SecretList = () => {
+  const client = usePluginClient(GitOpsApi);
+  const accessApi = useApi(accessApiRef);
+  const toast = useToast();
+
+  const { allowed: canManage } = accessApi.useAccess(
+    gitopsAccess.secret.manage,
+  );
+
+  const [isEditorOpen, setIsEditorOpen] = useState(false);
+  const [rotatingSecret, setRotatingSecret] = useState<{
+    id: string;
+    name: string;
+  }>();
+  const [confirmModal, setConfirmModal] = useState<{
+    isOpen: boolean;
+    secretId: string;
+    secretName: string;
+  }>({ isOpen: false, secretId: "", secretName: "" });
+
+  const { data: secrets, isLoading, refetch } = client.listSecrets.useQuery({});
+
+  const createMutation = client.createSecret.useMutation({
+    onSuccess: () => {
+      toast.success("Secret created successfully");
+      setIsEditorOpen(false);
+      void refetch();
+    },
+    onError: (error) => {
+      toast.error(extractErrorMessage(error, "Failed to create secret"));
+    },
+  });
+
+  const rotateMutation = client.rotateSecret.useMutation({
+    onSuccess: () => {
+      toast.success("Secret rotated successfully");
+      setRotatingSecret(undefined);
+      void refetch();
+    },
+    onError: (error) => {
+      toast.error(extractErrorMessage(error, "Failed to rotate secret"));
+    },
+  });
+
+  const deleteMutation = client.deleteSecret.useMutation({
+    onSuccess: () => {
+      toast.success("Secret deleted successfully");
+      setConfirmModal({ isOpen: false, secretId: "", secretName: "" });
+      void refetch();
+    },
+    onError: (error) => {
+      toast.error(extractErrorMessage(error, "Failed to delete secret"));
+    },
+  });
+
+  return (
+    <>
+      <Card>
+        <CardHeader>
+          <CardHeaderRow>
+            <CardTitle>Secrets</CardTitle>
+            {canManage && (
+              <Button size="sm" onClick={() => setIsEditorOpen(true)}>
+                <Plus className="w-4 h-4 mr-2" />
+                Add Secret
+              </Button>
+            )}
+          </CardHeaderRow>
+          <p className="text-xs text-muted-foreground mt-1">
+            Secrets can be referenced in YAML descriptors using{" "}
+            <code className="text-xs">{"${{ secrets.NAME }}"}</code> syntax.
+          </p>
+        </CardHeader>
+        <CardContent>
+          {isLoading ? (
+            <div className="text-center py-8 text-muted-foreground">
+              Loading...
+            </div>
+          ) : !secrets || secrets.length === 0 ? (
+            <EmptyState
+              title="No secrets created"
+              description="Create secrets to securely reference sensitive values in your YAML descriptors."
+            />
+          ) : (
+            <div className="space-y-3">
+              {secrets.map((secret) => (
+                <div
+                  key={secret.id}
+                  className="flex items-center justify-between p-4 rounded-lg border border-border bg-background/50 hover:bg-background/80 transition-colors"
+                >
+                  <div className="flex items-center gap-3 min-w-0">
+                    <KeyRound className="w-4 h-4 text-muted-foreground shrink-0" />
+                    <div className="min-w-0">
+                      <div className="font-medium font-mono text-sm">
+                        {secret.name}
+                      </div>
+                      {secret.description && (
+                        <div className="text-xs text-muted-foreground mt-0.5 truncate">
+                          {secret.description}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="flex items-center gap-4 shrink-0">
+                    <div className="text-right text-xs text-muted-foreground hidden md:block">
+                      <div>Updated: {formatDate(secret.updatedAt)}</div>
+                    </div>
+
+                    {canManage && (
+                      <div className="flex items-center gap-1">
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() =>
+                            setRotatingSecret({
+                              id: secret.id,
+                              name: secret.name,
+                            })
+                          }
+                          title="Rotate secret"
+                        >
+                          <RotateCw className="w-4 h-4" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() =>
+                            setConfirmModal({
+                              isOpen: true,
+                              secretId: secret.id,
+                              secretName: secret.name,
+                            })
+                          }
+                          title="Delete secret"
+                        >
+                          <Trash2 className="w-4 h-4" />
+                        </Button>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <SecretEditor
+        open={isEditorOpen}
+        onClose={() => setIsEditorOpen(false)}
+        onSave={(data) => createMutation.mutate(data)}
+      />
+
+      <SecretRotateDialog
+        open={!!rotatingSecret}
+        secretName={rotatingSecret?.name ?? ""}
+        onClose={() => setRotatingSecret(undefined)}
+        onSave={(value) => {
+          if (rotatingSecret) {
+            rotateMutation.mutate({ id: rotatingSecret.id, value });
+          }
+        }}
+      />
+
+      <ConfirmationModal
+        isOpen={confirmModal.isOpen}
+        onClose={() =>
+          setConfirmModal({ isOpen: false, secretId: "", secretName: "" })
+        }
+        onConfirm={() => deleteMutation.mutate({ id: confirmModal.secretId })}
+        title="Delete Secret"
+        message={`Are you sure you want to delete the secret "${confirmModal.secretName}"? Any descriptors referencing this secret will fail validation.`}
+        confirmText="Delete"
+        variant="danger"
+      />
+    </>
+  );
+};

package/src/components/SecretRotateDialog.tsx

@@ -0,0 +1,79 @@
+import React, { useState, useEffect } from "react";
+import {
+  Button,
+  Input,
+  Label,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@checkstack/ui";
+
+interface SecretRotateDialogProps {
+  open: boolean;
+  secretName: string;
+  onClose: () => void;
+  onSave: (value: string) => void;
+}
+
+export const SecretRotateDialog: React.FC<SecretRotateDialogProps> = ({
+  open,
+  secretName,
+  onClose,
+  onSave,
+}) => {
+  const [value, setValue] = useState("");
+
+  useEffect(() => {
+    if (open) {
+      setValue("");
+    }
+  }, [open]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!value.trim()) return;
+    onSave(value.trim());
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <DialogContent size="default">
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>Rotate Secret</DialogTitle>
+            <DialogDescription>
+              Enter a new value for <code className="font-mono text-sm">{secretName}</code>.
+              The old value will be permanently replaced.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="rotate-value">New Value</Label>
+              <Input
+                id="rotate-value"
+                type="password"
+                placeholder="New secret value..."
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+                required
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!value.trim()}>
+              Rotate Secret
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};