@shipfox/client-secrets 0.2.0

package/src/components/store-key.test.ts

@@ -0,0 +1,53 @@
+import {STORE_KEY_HELP, validateNewStoreKey, validateStoreKey} from './store-key.js';
+
+describe('validateStoreKey', () => {
+  test('accepts a valid uppercase identifier', () => {
+    expect(validateStoreKey('MY_TOKEN')).toBeUndefined();
+  });
+
+  test('rejects a malformed key', () => {
+    expect(validateStoreKey('my token')).toBe(STORE_KEY_HELP);
+  });
+});
+
+describe('validateNewStoreKey', () => {
+  test('blocks a create that collides with an existing key', () => {
+    const error = validateNewStoreKey('API_TOKEN', {
+      mode: 'create',
+      reservedKeys: ['API_TOKEN', 'DATABASE_URL'],
+      kind: 'secret',
+    });
+
+    expect(error).toBe('A secret with this name already exists. Edit it instead.');
+  });
+
+  test('allows a create with a fresh key', () => {
+    const error = validateNewStoreKey('NEW_KEY', {
+      mode: 'create',
+      reservedKeys: ['API_TOKEN'],
+      kind: 'secret',
+    });
+
+    expect(error).toBeUndefined();
+  });
+
+  test('does not treat the locked key as a collision in edit mode', () => {
+    const error = validateNewStoreKey('LOG_LEVEL', {
+      mode: 'edit',
+      reservedKeys: ['LOG_LEVEL'],
+      kind: 'variable',
+    });
+
+    expect(error).toBeUndefined();
+  });
+
+  test('enforces the format before the collision check', () => {
+    const error = validateNewStoreKey('bad key', {
+      mode: 'create',
+      reservedKeys: [],
+      kind: 'secret',
+    });
+
+    expect(error).toBe(STORE_KEY_HELP);
+  });
+});

package/src/components/store-key.ts

@@ -0,0 +1,36 @@
+import {secretKeySchema} from '@shipfox/api-secrets-dto';
+
+export const STORE_KEY_HELP =
+  'Uppercase letters, digits and underscores; must start with a letter or underscore.';
+
+/**
+ * Validates a store key against the shared `secretKeySchema` and returns a
+ * human-readable message (not Zod's default) when it fails. The name input is
+ * also auto-uppercased at the call site, so the common case never trips this.
+ */
+export function validateStoreKey(value: string): string | undefined {
+  return secretKeySchema.safeParse(value).success ? undefined : STORE_KEY_HELP;
+}
+
+/**
+ * Format validation plus a create-mode collision guard. `PUT /:key` is an
+ * upsert and single writes never return a duplicate-key error, so without this
+ * a create with an existing name would silently overwrite the current value —
+ * unrecoverable for write-only secrets. Edit mode locks the key, so it skips
+ * the collision check.
+ */
+export function validateNewStoreKey(
+  value: string,
+  {
+    mode,
+    reservedKeys,
+    kind,
+  }: {mode: 'create' | 'edit'; reservedKeys: readonly string[]; kind: 'secret' | 'variable'},
+): string | undefined {
+  const formatError = validateStoreKey(value);
+  if (formatError) return formatError;
+  if (mode === 'create' && reservedKeys.includes(value)) {
+    return `A ${kind} with this name already exists. Edit it instead.`;
+  }
+  return undefined;
+}

package/src/components/store-section-shell.tsx

@@ -0,0 +1,32 @@
+import {Skeleton} from '@shipfox/react-ui/skeleton';
+import {cn} from '@shipfox/react-ui/utils';
+
+export const STORE_SURFACE_CLASS =
+  'overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base';
+
+/** Placeholder rows shown while the store list loads. */
+export function StoreRowsSkeleton({label}: {label: string}) {
+  return (
+    <div role="status" aria-label={label} className={STORE_SURFACE_CLASS}>
+      <ul className="divide-y divide-border-neutral-base">
+        {[0, 1, 2].map((row) => (
+          <li key={row} className="flex items-center gap-12 px-16 py-12">
+            <Skeleton className="h-16 w-140" />
+            <Skeleton className="h-16 w-96" />
+            <Skeleton className="ml-auto h-14 w-80 shrink-0" />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export function StoreSurface({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return <div className={cn(STORE_SURFACE_CLASS, className)}>{children}</div>;
+}

package/src/components/variable-form.stories.tsx

@@ -0,0 +1,58 @@
+import {Toaster} from '@shipfox/react-ui/toast';
+import type {Meta, StoryObj} from '@storybook/react';
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import type {ReactNode} from 'react';
+import {useMemo} from 'react';
+import {userEvent, within} from 'storybook/test';
+import {VariableForm} from './variable-form.js';
+
+const WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';
+
+function Wrapper({children}: {children: ReactNode}) {
+  const queryClient = useMemo(
+    () => new QueryClient({defaultOptions: {queries: {retry: false}, mutations: {retry: false}}}),
+    [],
+  );
+  return (
+    <QueryClientProvider client={queryClient}>
+      <div className="w-[520px] overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base">
+        {children}
+      </div>
+      <Toaster />
+    </QueryClientProvider>
+  );
+}
+
+const meta: Meta<typeof VariableForm> = {
+  title: 'Secrets/VariableForm',
+  component: VariableForm,
+  args: {
+    workspaceId: WORKSPACE_ID,
+    mode: 'create',
+    onSaved: () => undefined,
+    onCancel: () => undefined,
+  },
+  decorators: [
+    (Story) => (
+      <Wrapper>
+        <Story />
+      </Wrapper>
+    ),
+  ],
+};
+export default meta;
+
+type Story = StoryObj<typeof VariableForm>;
+
+export const Playground: Story = {};
+
+export const Edit: Story = {
+  args: {mode: 'edit', existingKey: 'LOG_LEVEL', existingValue: 'debug'},
+};
+
+export const SensitiveNameWarning: Story = {
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByLabelText('Name'), 'MY_TOKEN');
+  },
+};

package/src/components/variable-form.test.tsx

@@ -0,0 +1,60 @@
+import {configureApiClient} from '@shipfox/client-api';
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import {render, screen, waitFor} from '@testing-library/react';
+import {variable} from '#test/fixtures/secrets.js';
+import {VariableForm} from './variable-form.js';
+
+const FULL_VALUE_ERROR = /Could not load the current value/;
+
+function jsonResponse(body: unknown, init: ResponseInit = {}): Response {
+  return new Response(JSON.stringify(body), {
+    headers: {'content-type': 'application/json'},
+    status: 200,
+    ...init,
+  });
+}
+
+function renderTruncatedEdit(fetchImpl: typeof fetch) {
+  configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
+  const queryClient = new QueryClient({defaultOptions: {queries: {retry: false}}});
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <VariableForm
+        workspaceId="11111111-1111-4111-8111-111111111111"
+        mode="edit"
+        existingKey="TLS_CERT"
+        existingValue="-----BEGIN CERTIFICATE-----"
+        existingValueTruncated
+        onSaved={() => undefined}
+        onCancel={() => undefined}
+      />
+    </QueryClientProvider>,
+  );
+}
+
+describe('VariableForm truncated edit', () => {
+  test('loads the full value and enables the update button', async () => {
+    const fetchImpl = (() =>
+      Promise.resolve(
+        jsonResponse({variable: variable({value: 'full-certificate-body'})}),
+      )) as unknown as typeof fetch;
+
+    renderTruncatedEdit(fetchImpl);
+
+    const value = (await screen.findByLabelText('Value')) as HTMLTextAreaElement;
+    await waitFor(() => expect(value.value).toBe('full-certificate-body'));
+    expect(screen.getByRole('button', {name: 'Update variable'})).toBeEnabled();
+  });
+
+  test('keeps the update button disabled and surfaces an error when the full value fails to load', async () => {
+    const fetchImpl = (() =>
+      Promise.resolve(
+        jsonResponse({code: 'server-error', message: 'boom'}, {status: 500}),
+      )) as unknown as typeof fetch;
+
+    renderTruncatedEdit(fetchImpl);
+
+    await screen.findByText(FULL_VALUE_ERROR);
+    expect(screen.getByRole('button', {name: 'Update variable'})).toBeDisabled();
+  });
+});

package/src/components/variable-form.tsx

@@ -0,0 +1,182 @@
+import {isSensitiveSecretName} from '@shipfox/api-secrets-dto';
+import {Button} from '@shipfox/react-ui/button';
+import {Callout} from '@shipfox/react-ui/callout';
+import {
+  FormField,
+  FormFieldInput,
+  FormFieldTextarea,
+  fieldError,
+} from '@shipfox/react-ui/form-field';
+import {Text} from '@shipfox/react-ui/typography';
+import {useForm} from '@tanstack/react-form';
+import {useEffect, useRef, useState} from 'react';
+import {usePutVariableMutation, useVariableQuery} from '#hooks/api/variables.js';
+import {secretsErrorToFormError} from './form-errors.js';
+import {FormBody, FormFooter} from './form-shell.js';
+import {STORE_KEY_HELP, validateNewStoreKey} from './store-key.js';
+
+export const VARIABLE_FORM_ID = 'variable-form';
+
+export function VariableForm({
+  workspaceId,
+  mode,
+  existingKey,
+  existingValue,
+  existingValueTruncated = false,
+  reservedKeys = [],
+  onSaved,
+  onCancel,
+}: {
+  workspaceId: string;
+  mode: 'create' | 'edit';
+  existingKey?: string | undefined;
+  existingValue?: string | undefined;
+  existingValueTruncated?: boolean | undefined;
+  reservedKeys?: readonly string[] | undefined;
+  onSaved: () => void;
+  onCancel: () => void;
+}) {
+  const putVariable = usePutVariableMutation();
+  const [formError, setFormError] = useState<string | undefined>();
+
+  // The list value is only a preview, so a truncated variable must load its full
+  // value before editing to avoid saving the truncated preview back.
+  const needsFullValue = mode === 'edit' && existingValueTruncated;
+  const fullValueQuery = useVariableQuery(workspaceId, needsFullValue ? existingKey : undefined);
+
+  const form = useForm({
+    defaultValues: {key: existingKey ?? '', value: existingValue ?? ''},
+    onSubmit: async ({value}) => {
+      setFormError(undefined);
+      try {
+        await putVariable.mutateAsync({workspaceId, key: value.key, body: {value: value.value}});
+        onSaved();
+      } catch (error) {
+        const mapped = secretsErrorToFormError(error);
+        if (mapped.kind === 'field') {
+          form.setFieldMeta(mapped.field, (prev) => ({
+            ...prev,
+            errorMap: {...prev.errorMap, onServer: mapped.message},
+          }));
+        } else {
+          setFormError(mapped.message);
+        }
+      }
+    },
+  });
+
+  const populatedRef = useRef(false);
+  useEffect(() => {
+    if (needsFullValue && fullValueQuery.data && !populatedRef.current) {
+      populatedRef.current = true;
+      form.setFieldValue('value', fullValueQuery.data.value);
+    }
+  }, [needsFullValue, fullValueQuery.data, form]);
+
+  // The full value must be loaded before a save is allowed, otherwise submitting would
+  // overwrite the stored value with the truncated preview. Block until it arrives —
+  // whether the fetch is still pending or has failed.
+  const awaitingFullValue = needsFullValue && fullValueQuery.data === undefined;
+  const loadingFullValue = needsFullValue && fullValueQuery.isPending;
+
+  return (
+    <>
+      <FormBody>
+        <form
+          id={VARIABLE_FORM_ID}
+          className="flex w-full flex-col gap-16"
+          noValidate
+          onSubmit={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            void form.handleSubmit();
+          }}
+        >
+          <form.Field
+            name="key"
+            validators={{
+              onBlur: ({value}) =>
+                validateNewStoreKey(value, {mode, reservedKeys, kind: 'variable'}),
+              onSubmit: ({value}) =>
+                validateNewStoreKey(value, {mode, reservedKeys, kind: 'variable'}),
+            }}
+          >
+            {(field) => (
+              <FormField
+                label="Name"
+                id="variable-key"
+                description={STORE_KEY_HELP}
+                error={fieldError(field)}
+              >
+                <FormFieldInput
+                  className="font-code"
+                  autoComplete="off"
+                  spellCheck={false}
+                  disabled={mode === 'edit'}
+                  placeholder="LOG_LEVEL"
+                  value={field.state.value}
+                  onChange={(event) => field.handleChange(event.target.value.toUpperCase())}
+                  onBlur={field.handleBlur}
+                />
+                {isSensitiveSecretName(field.state.value) ? (
+                  <Callout role="alert" type="warning">
+                    <Text size="sm" aria-live="polite">
+                      This looks like it may be sensitive. Variables are stored in plaintext and are
+                      not redacted from logs. Use a Secret if this value contains private data.
+                    </Text>
+                  </Callout>
+                ) : null}
+              </FormField>
+            )}
+          </form.Field>
+
+          <form.Field name="value">
+            {(field) => (
+              <FormField
+                label="Value"
+                id="variable-value"
+                error={fieldError(field)}
+                description={loadingFullValue ? 'Loading the current value…' : undefined}
+              >
+                <FormFieldTextarea
+                  className="font-code"
+                  autoComplete="off"
+                  spellCheck={false}
+                  rows={3}
+                  disabled={awaitingFullValue}
+                  placeholder="debug"
+                  value={field.state.value}
+                  onChange={(event) => field.handleChange(event.target.value)}
+                  onBlur={field.handleBlur}
+                />
+              </FormField>
+            )}
+          </form.Field>
+        </form>
+        {awaitingFullValue && fullValueQuery.isError ? (
+          <Callout role="alert" type="error">
+            <Text size="sm">Could not load the current value. Close and try again.</Text>
+          </Callout>
+        ) : null}
+        {formError ? (
+          <Callout role="alert" type="error">
+            <Text size="sm">{formError}</Text>
+          </Callout>
+        ) : null}
+      </FormBody>
+      <FormFooter>
+        <Button variant="secondary" type="button" onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button
+          type="submit"
+          form={VARIABLE_FORM_ID}
+          isLoading={putVariable.isPending}
+          disabled={awaitingFullValue}
+        >
+          {mode === 'edit' ? 'Update variable' : 'Create variable'}
+        </Button>
+      </FormFooter>
+    </>
+  );
+}

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

@@ -0,0 +1,128 @@
+import type {SecretDto} 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 {WorkspaceSecretsSection} from './workspace-secrets-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 SECRETS: SecretDto[] = [
+  {
+    key: 'API_TOKEN',
+    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: 'DATABASE_URL',
+    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: 'STRIPE_SECRET_KEY',
+    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' | 'loading' | 'error';
+
+const RETRY_BUTTON = /retry/i;
+
+function fetchForScenario(scenario: Scenario): typeof fetch {
+  return (() => {
+    if (scenario === 'loading') return new Promise<Response>(() => undefined);
+    if (scenario === 'error') {
+      return Promise.resolve(
+        new Response(JSON.stringify({code: 'server-error', message: 'Something failed'}), {
+          status: 500,
+          headers: {'content-type': 'application/json'},
+        }),
+      );
+    }
+    const secrets = scenario === 'empty' ? [] : SECRETS;
+    return Promise.resolve(
+      new Response(JSON.stringify({secrets, 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">
+        <WorkspaceSecretsSection workspaceId={WORKSPACE_ID} />
+      </div>
+      <Toaster />
+    </QueryClientProvider>
+  );
+}
+
+const meta: Meta<typeof SectionStory> = {
+  title: 'Secrets/WorkspaceSecretsSection',
+  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('API_TOKEN');
+    await canvas.findByRole('button', {name: 'Copy secret name API_TOKEN'});
+  },
+};
+
+export const Empty: Story = {
+  args: {scenario: 'empty'},
+  play: async ({canvasElement}) => {
+    await within(canvasElement).findByText('No secrets yet');
+  },
+};
+
+export const Loading: Story = {
+  args: {scenario: 'loading'},
+};
+
+export const LoadError: Story = {
+  args: {scenario: 'error'},
+  play: async ({canvasElement}) => {
+    await within(canvasElement).findByRole('button', {name: RETRY_BUTTON});
+  },
+};