@shipfox/client-secrets 0.2.0

package/src/components/workspace-secrets-section.tsx

@@ -0,0 +1,231 @@
+import type {SecretDto} from '@shipfox/api-secrets-dto';
+import {QueryLoadError} from '@shipfox/client-ui';
+import {Button, IconButton} from '@shipfox/react-ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@shipfox/react-ui/dropdown-menu';
+import {EmptyState} from '@shipfox/react-ui/empty-state';
+import {Modal, ModalContent, ModalHeader, ModalTitle} from '@shipfox/react-ui/modal';
+import {RelativeTime, RelativeTimeProvider} from '@shipfox/react-ui/relative-time';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@shipfox/react-ui/table';
+import {toast} from '@shipfox/react-ui/toast';
+import {Code, Header, Text} from '@shipfox/react-ui/typography';
+import {useMemo, useState} from 'react';
+import {useDeleteSecretMutation, useSecretsQuery} from '#hooks/api/secrets.js';
+import {copyKeyName} from './copy-key.js';
+import {DeleteEntryDialog} from './delete-entry-dialog.js';
+import {secretsErrorToFormError} from './form-errors.js';
+import {SecretForm} from './secret-form.js';
+import {StoreRowsSkeleton, StoreSurface} from './store-section-shell.js';
+
+const SECRETS_DESCRIPTION =
+  'Encrypted, write-only values for sensitive data like API keys, tokens, and passwords.';
+const EMPTY_SECRETS_DESCRIPTION =
+  'Create a secret to store sensitive values like API keys, tokens, and passwords.';
+
+type FormState = {mode: 'create'} | {mode: 'edit'; key: string} | null;
+
+export function WorkspaceSecretsSection({workspaceId}: {workspaceId: string}) {
+  const secretsQuery = useSecretsQuery(workspaceId);
+  const deleteSecret = useDeleteSecretMutation();
+  const [formState, setFormState] = useState<FormState>(null);
+  const [deleteKey, setDeleteKey] = useState<string | null>(null);
+  const [deleteError, setDeleteError] = useState<string | undefined>();
+
+  const secrets = useMemo(
+    () => [...(secretsQuery.data ?? [])].sort((a, b) => a.key.localeCompare(b.key)),
+    [secretsQuery.data],
+  );
+
+  function closeDelete() {
+    setDeleteKey(null);
+    setDeleteError(undefined);
+  }
+
+  return (
+    <RelativeTimeProvider>
+      <section className="flex flex-col gap-16" aria-label="Secrets">
+        <div className="flex items-start justify-between gap-16">
+          <div className="flex flex-col gap-4">
+            <Header variant="h3">Secrets</Header>
+            <Text size="sm" className="text-foreground-neutral-muted">
+              {SECRETS_DESCRIPTION}
+            </Text>
+          </div>
+          <Button size="sm" onClick={() => setFormState({mode: 'create'})}>
+            Create secret
+          </Button>
+        </div>
+
+        {secretsQuery.isPending ? <StoreRowsSkeleton label="Loading secrets" /> : null}
+
+        {secretsQuery.isError && secretsQuery.data === undefined ? (
+          <StoreSurface className="px-16">
+            <QueryLoadError query={secretsQuery} subject="secrets" />
+          </StoreSurface>
+        ) : null}
+
+        {secretsQuery.data !== undefined && secrets.length === 0 ? (
+          <StoreSurface className="px-16">
+            <EmptyState
+              icon="keyLine"
+              title="No secrets yet"
+              description={EMPTY_SECRETS_DESCRIPTION}
+              action={
+                <Button size="sm" onClick={() => setFormState({mode: 'create'})}>
+                  Create secret
+                </Button>
+              }
+            />
+          </StoreSurface>
+        ) : null}
+
+        {secrets.length > 0 ? (
+          <StoreSurface>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Name</TableHead>
+                  <TableHead>Value</TableHead>
+                  <TableHead>Last edited</TableHead>
+                  <TableHead className="w-40 text-right">
+                    <span className="sr-only">Actions</span>
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {secrets.map((secret) => (
+                  <SecretRow
+                    key={secret.key}
+                    secret={secret}
+                    onEdit={() => setFormState({mode: 'edit', key: secret.key})}
+                    onDelete={() => setDeleteKey(secret.key)}
+                  />
+                ))}
+              </TableBody>
+            </Table>
+          </StoreSurface>
+        ) : null}
+      </section>
+
+      <Modal
+        open={formState !== null}
+        onOpenChange={(open) => {
+          if (!open) setFormState(null);
+        }}
+      >
+        <ModalContent>
+          <ModalHeader>
+            <ModalTitle>
+              {formState?.mode === 'edit' ? 'Update secret' : 'Create secret'}
+            </ModalTitle>
+          </ModalHeader>
+          {formState ? (
+            <SecretForm
+              workspaceId={workspaceId}
+              mode={formState.mode}
+              existingKey={formState.mode === 'edit' ? formState.key : undefined}
+              reservedKeys={secrets.map((secret) => secret.key)}
+              onSaved={() => {
+                const wasEdit = formState.mode === 'edit';
+                setFormState(null);
+                toast.success(wasEdit ? 'Secret updated' : 'Secret created');
+              }}
+              onCancel={() => setFormState(null)}
+            />
+          ) : null}
+        </ModalContent>
+      </Modal>
+
+      <DeleteEntryDialog
+        open={deleteKey !== null}
+        onOpenChange={(open) => {
+          if (!open) closeDelete();
+        }}
+        entryKey={deleteKey ?? ''}
+        isLoading={deleteSecret.isPending}
+        errorMessage={deleteError}
+        onConfirm={async () => {
+          if (deleteKey === null) return;
+          setDeleteError(undefined);
+          try {
+            await deleteSecret.mutateAsync({workspaceId, key: deleteKey});
+            toast.success('Secret deleted');
+            closeDelete();
+          } catch (error) {
+            setDeleteError(secretsErrorToFormError(error).message);
+          }
+        }}
+      />
+    </RelativeTimeProvider>
+  );
+}
+
+function SecretRow({
+  secret,
+  onEdit,
+  onDelete,
+}: {
+  secret: SecretDto;
+  onEdit: () => void;
+  onDelete: () => void;
+}) {
+  return (
+    <TableRow>
+      <TableCell>
+        <button
+          type="button"
+          className="inline-flex min-w-0 cursor-pointer rounded-4 border-none bg-transparent p-0 text-left text-foreground-neutral-base outline-none transition-colors hover:text-foreground-highlight-interactive focus-visible:shadow-border-interactive-with-active"
+          aria-label={`Copy secret name ${secret.key}`}
+          onClick={() => void copyKeyName(secret.key)}
+        >
+          <Code as="span" variant="paragraph" className="truncate">
+            {secret.key}
+          </Code>
+        </button>
+      </TableCell>
+      <TableCell>
+        <span
+          role="img"
+          aria-label="Value hidden"
+          className="font-code text-foreground-neutral-muted"
+        >
+          ••••••••
+        </span>
+      </TableCell>
+      <TableCell className="text-foreground-neutral-muted">
+        <RelativeTime value={secret.updated_at} />
+      </TableCell>
+      <TableCell className="text-right">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <IconButton
+              size="sm"
+              variant="transparent"
+              icon="more2Line"
+              aria-label={`Actions for ${secret.key}`}
+            />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem icon="editLine" onSelect={onEdit}>
+              Edit value
+            </DropdownMenuItem>
+            <DropdownMenuItem icon="deleteBinLine" onSelect={onDelete}>
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </TableCell>
+    </TableRow>
+  );
+}

package/src/components/workspace-variables-section.stories.tsx

@@ -0,0 +1,121 @@
+import type {VariableListItemDto} from '@shipfox/api-secrets-dto';
+import {configureApiClient} from '@shipfox/client-api';
+import {Toaster} from '@shipfox/react-ui/toast';
+import type {Decorator, Meta, StoryObj} from '@storybook/react';
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import {useEffect, useMemo} from 'react';
+import {within} from 'storybook/test';
+import {WorkspaceVariablesSection} from './workspace-variables-section.js';
+
+// Freeze the clock only while a story is mounted so RelativeTime renders a stable
+// string in argos snapshots, without leaking the override to other stories.
+const FROZEN_NOW = Date.parse('2026-07-02T00:00:00.000Z');
+const realDateNow = Date.now;
+const withFrozenClock: Decorator = (Story) => {
+  Date.now = () => FROZEN_NOW;
+  useEffect(
+    () => () => {
+      Date.now = realDateNow;
+    },
+    [],
+  );
+  return <Story />;
+};
+
+const WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';
+const EDITOR_ID = '22222222-2222-4222-8222-222222222222';
+
+const VARIABLES: VariableListItemDto[] = [
+  {
+    key: 'LOG_LEVEL',
+    value: 'debug',
+    value_truncated: false,
+    project_id: null,
+    created_at: '2026-05-01T10:00:00.000Z',
+    updated_at: '2026-06-30T12:00:00.000Z',
+    last_edited_by: EDITOR_ID,
+  },
+  {
+    key: 'FEATURE_FLAG',
+    value: '',
+    value_truncated: false,
+    project_id: null,
+    created_at: '2026-04-01T10:00:00.000Z',
+    updated_at: '2026-06-25T12:00:00.000Z',
+    last_edited_by: EDITOR_ID,
+  },
+  {
+    key: 'TLS_CERT',
+    value: '-----BEGIN CERTIFICATE-----',
+    value_truncated: true,
+    project_id: null,
+    created_at: '2026-03-15T10:00:00.000Z',
+    updated_at: '2026-06-22T12:00:00.000Z',
+    last_edited_by: EDITOR_ID,
+  },
+  {
+    key: 'REGION',
+    value: 'eu-west-1',
+    value_truncated: false,
+    project_id: null,
+    created_at: '2026-03-01T10:00:00.000Z',
+    updated_at: '2026-06-20T12:00:00.000Z',
+    last_edited_by: null,
+  },
+];
+
+type Scenario = 'loaded' | 'empty';
+
+function fetchForScenario(scenario: Scenario): typeof fetch {
+  return (() => {
+    const variables = scenario === 'empty' ? [] : VARIABLES;
+    return Promise.resolve(
+      new Response(JSON.stringify({variables, next_cursor: null}), {
+        status: 200,
+        headers: {'content-type': 'application/json'},
+      }),
+    );
+  }) as unknown as typeof fetch;
+}
+
+function SectionStory({scenario}: {scenario: Scenario}) {
+  configureApiClient({baseUrl: 'https://api.example.test', fetchImpl: fetchForScenario(scenario)});
+  const queryClient = useMemo(
+    () => new QueryClient({defaultOptions: {queries: {retry: false}}}),
+    [],
+  );
+  return (
+    <QueryClientProvider client={queryClient}>
+      <div className="w-[720px] p-24">
+        <WorkspaceVariablesSection workspaceId={WORKSPACE_ID} />
+      </div>
+      <Toaster />
+    </QueryClientProvider>
+  );
+}
+
+const meta: Meta<typeof SectionStory> = {
+  title: 'Secrets/WorkspaceVariablesSection',
+  component: SectionStory,
+  decorators: [withFrozenClock],
+};
+export default meta;
+
+type Story = StoryObj<typeof SectionStory>;
+
+export const Loaded: Story = {
+  args: {scenario: 'loaded'},
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+
+    await canvas.findByText('LOG_LEVEL');
+    await canvas.findByRole('button', {name: 'Copy variable name LOG_LEVEL'});
+  },
+};
+
+export const Empty: Story = {
+  args: {scenario: 'empty'},
+  play: async ({canvasElement}) => {
+    await within(canvasElement).findByText('No variables yet');
+  },
+};

package/src/components/workspace-variables-section.tsx

@@ -0,0 +1,238 @@
+import type {VariableListItemDto} from '@shipfox/api-secrets-dto';
+import {QueryLoadError} from '@shipfox/client-ui';
+import {Button, IconButton} from '@shipfox/react-ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@shipfox/react-ui/dropdown-menu';
+import {EmptyState} from '@shipfox/react-ui/empty-state';
+import {Modal, ModalContent, ModalHeader, ModalTitle} from '@shipfox/react-ui/modal';
+import {RelativeTime, RelativeTimeProvider} from '@shipfox/react-ui/relative-time';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@shipfox/react-ui/table';
+import {toast} from '@shipfox/react-ui/toast';
+import {Code, Header, Text} from '@shipfox/react-ui/typography';
+import {useMemo, useState} from 'react';
+import {useDeleteVariableMutation, useVariablesQuery} from '#hooks/api/variables.js';
+import {copyKeyName} from './copy-key.js';
+import {DeleteEntryDialog} from './delete-entry-dialog.js';
+import {secretsErrorToFormError} from './form-errors.js';
+import {StoreRowsSkeleton, StoreSurface} from './store-section-shell.js';
+import {VariableForm} from './variable-form.js';
+
+const VARIABLES_DESCRIPTION =
+  'Plaintext configuration values for non-sensitive data like regions, flags, and log levels.';
+const EMPTY_VARIABLES_DESCRIPTION =
+  'Create a variable to store non-sensitive configuration like regions, flags, and log levels.';
+
+type FormState = {mode: 'create'} | {mode: 'edit'; variable: VariableListItemDto} | null;
+
+export function WorkspaceVariablesSection({workspaceId}: {workspaceId: string}) {
+  const variablesQuery = useVariablesQuery(workspaceId);
+  const deleteVariable = useDeleteVariableMutation();
+  const [formState, setFormState] = useState<FormState>(null);
+  const [deleteKey, setDeleteKey] = useState<string | null>(null);
+  const [deleteError, setDeleteError] = useState<string | undefined>();
+
+  const variables = useMemo(
+    () => [...(variablesQuery.data ?? [])].sort((a, b) => a.key.localeCompare(b.key)),
+    [variablesQuery.data],
+  );
+
+  function closeDelete() {
+    setDeleteKey(null);
+    setDeleteError(undefined);
+  }
+
+  return (
+    <RelativeTimeProvider>
+      <section className="flex flex-col gap-16" aria-label="Variables">
+        <div className="flex items-start justify-between gap-16">
+          <div className="flex flex-col gap-4">
+            <Header variant="h3">Variables</Header>
+            <Text size="sm" className="text-foreground-neutral-muted">
+              {VARIABLES_DESCRIPTION}
+            </Text>
+          </div>
+          <Button size="sm" onClick={() => setFormState({mode: 'create'})}>
+            Create variable
+          </Button>
+        </div>
+
+        {variablesQuery.isPending ? <StoreRowsSkeleton label="Loading variables" /> : null}
+
+        {variablesQuery.isError && variablesQuery.data === undefined ? (
+          <StoreSurface className="px-16">
+            <QueryLoadError query={variablesQuery} subject="variables" />
+          </StoreSurface>
+        ) : null}
+
+        {variablesQuery.data !== undefined && variables.length === 0 ? (
+          <StoreSurface className="px-16">
+            <EmptyState
+              icon="bracesLine"
+              title="No variables yet"
+              description={EMPTY_VARIABLES_DESCRIPTION}
+              action={
+                <Button size="sm" onClick={() => setFormState({mode: 'create'})}>
+                  Create variable
+                </Button>
+              }
+            />
+          </StoreSurface>
+        ) : null}
+
+        {variables.length > 0 ? (
+          <StoreSurface>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Name</TableHead>
+                  <TableHead>Value</TableHead>
+                  <TableHead>Last edited</TableHead>
+                  <TableHead className="w-40 text-right">
+                    <span className="sr-only">Actions</span>
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {variables.map((variable) => (
+                  <VariableRow
+                    key={variable.key}
+                    variable={variable}
+                    onEdit={() => setFormState({mode: 'edit', variable})}
+                    onDelete={() => setDeleteKey(variable.key)}
+                  />
+                ))}
+              </TableBody>
+            </Table>
+          </StoreSurface>
+        ) : null}
+      </section>
+
+      <Modal
+        open={formState !== null}
+        onOpenChange={(open) => {
+          if (!open) setFormState(null);
+        }}
+      >
+        <ModalContent>
+          <ModalHeader>
+            <ModalTitle>
+              {formState?.mode === 'edit' ? 'Update variable' : 'Create variable'}
+            </ModalTitle>
+          </ModalHeader>
+          {formState ? (
+            <VariableForm
+              workspaceId={workspaceId}
+              mode={formState.mode}
+              existingKey={formState.mode === 'edit' ? formState.variable.key : undefined}
+              existingValue={formState.mode === 'edit' ? formState.variable.value : undefined}
+              existingValueTruncated={
+                formState.mode === 'edit' ? formState.variable.value_truncated : undefined
+              }
+              reservedKeys={variables.map((variable) => variable.key)}
+              onSaved={() => {
+                const wasEdit = formState.mode === 'edit';
+                setFormState(null);
+                toast.success(wasEdit ? 'Variable updated' : 'Variable created');
+              }}
+              onCancel={() => setFormState(null)}
+            />
+          ) : null}
+        </ModalContent>
+      </Modal>
+
+      <DeleteEntryDialog
+        open={deleteKey !== null}
+        onOpenChange={(open) => {
+          if (!open) closeDelete();
+        }}
+        entryKey={deleteKey ?? ''}
+        isLoading={deleteVariable.isPending}
+        errorMessage={deleteError}
+        onConfirm={async () => {
+          if (deleteKey === null) return;
+          setDeleteError(undefined);
+          try {
+            await deleteVariable.mutateAsync({workspaceId, key: deleteKey});
+            toast.success('Variable deleted');
+            closeDelete();
+          } catch (error) {
+            setDeleteError(secretsErrorToFormError(error).message);
+          }
+        }}
+      />
+    </RelativeTimeProvider>
+  );
+}
+
+function VariableRow({
+  variable,
+  onEdit,
+  onDelete,
+}: {
+  variable: VariableListItemDto;
+  onEdit: () => void;
+  onDelete: () => void;
+}) {
+  return (
+    <TableRow>
+      <TableCell>
+        <button
+          type="button"
+          className="inline-flex min-w-0 cursor-pointer rounded-4 border-none bg-transparent p-0 text-left text-foreground-neutral-base outline-none transition-colors hover:text-foreground-highlight-interactive focus-visible:shadow-border-interactive-with-active"
+          aria-label={`Copy variable name ${variable.key}`}
+          onClick={() => void copyKeyName(variable.key)}
+        >
+          <Code as="span" variant="paragraph" className="truncate">
+            {variable.key}
+          </Code>
+        </button>
+      </TableCell>
+      <TableCell>
+        <span
+          title={variable.value}
+          className="block max-w-[280px] truncate font-code text-foreground-neutral-base"
+        >
+          {variable.value === '' ? (
+            <span className="text-foreground-neutral-muted">(empty)</span>
+          ) : (
+            variable.value
+          )}
+        </span>
+      </TableCell>
+      <TableCell className="text-foreground-neutral-muted">
+        <RelativeTime value={variable.updated_at} />
+      </TableCell>
+      <TableCell className="text-right">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <IconButton
+              size="sm"
+              variant="transparent"
+              icon="more2Line"
+              aria-label={`Actions for ${variable.key}`}
+            />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem icon="editLine" onSelect={onEdit}>
+              Edit value
+            </DropdownMenuItem>
+            <DropdownMenuItem icon="deleteBinLine" onSelect={onDelete}>
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </TableCell>
+    </TableRow>
+  );
+}