168 lines · 5.1 KB
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