import { useState } from "react";
import { Button } from "~/ui/Button";
import { TextAreaField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { EmptyState } from "~/ui/EmptyState";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
type Item = {
name: string;
value?: string;
updatedAt: number;
detail?: string;
/** Extra form fields resubmitted unchanged when only the value is edited (e.g. an owner value's access policy). */
keep?: Record<string, string>;
};
type Props = {
title: string;
kind: "secret" | "variable";
items: Item[];
pending: boolean;
error: string | null;
onSave: (name: string, value: string, form: FormData) => Promise<boolean>;
onDelete: (name: string) => void;
extraFields?: React.ReactNode;
description?: React.ReactNode;
};
function ValueField({
kind,
editing,
defaultValue,
}: {
kind: Props["kind"];
editing?: boolean;
defaultValue?: string;
}) {
return kind === "secret" ? (
<TextAreaField