@shipfox/client-secrets 0.2.0

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@shipfox/client-secrets",
+  "license": "MIT",
+  "version": "0.2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
+    "directory": "libs/client/secrets"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "imports": {
+    "#*": {
+      "types": "./src/*",
+      "workspace-source": "./src/*",
+      "development": "./src/*",
+      "default": "./dist/*"
+    },
+    "#test/*": "./test/*"
+  },
+  "exports": {
+    ".": {
+      "development": {
+        "types": "./src/index.ts",
+        "default": "./src/index.ts"
+      },
+      "default": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
+  "dependencies": {
+    "@swc/helpers": "^0.5.17",
+    "@tanstack/react-form": "^1.32.0",
+    "@shipfox/client-api": "0.2.0",
+    "@shipfox/api-secrets-dto": "2.0.0",
+    "@shipfox/client-ui": "0.2.0",
+    "@shipfox/react-ui": "0.3.1"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.101.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@argos-ci/cli": "^5.0.0",
+    "@argos-ci/storybook": "^6.0.0",
+    "@storybook/addon-vitest": "^10.3.6",
+    "@storybook/react": "^10.0.0",
+    "@storybook/react-vite": "^10.0.0",
+    "@tailwindcss/vite": "^4.1.13",
+    "@tanstack/react-query": "^5.101.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.1.11",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^6.0.0",
+    "@vitest/browser-playwright": "^4.1.5",
+    "jsdom": "^29.0.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "storybook": "^10.0.0",
+    "storybook-addon-pseudo-states": "^10.0.0",
+    "tailwindcss": "^4.1.13",
+    "vite": "^8.0.3",
+    "vitest": "^4.1.5",
+    "@shipfox/biome": "1.8.1",
+    "@shipfox/client-test-setup": "0.0.2",
+    "@shipfox/swc": "1.2.5",
+    "@shipfox/typescript": "1.1.6",
+    "@shipfox/vite": "1.2.4",
+    "@shipfox/vitest": "1.2.2",
+    "@shipfox/ts-config": "1.3.8"
+  },
+  "scripts": {
+    "build": "shipfox-swc",
+    "check": "shipfox-biome-check",
+    "check:fix": "shipfox-biome-check --write",
+    "storybook": "storybook dev -p 6013",
+    "storybook:build": "storybook build -o storybook-static",
+    "test": "shipfox-vitest-run",
+    "test:watch": "shipfox-vitest-watch",
+    "type": "shipfox-tsc-check",
+    "type:emit": "shipfox-tsc-emit"
+  }
+}

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

@@ -0,0 +1,44 @@
+import {toast} from '@shipfox/react-ui/toast';
+import {copyKeyName} from './copy-key.js';
+
+vi.mock('@shipfox/react-ui/toast', () => ({
+  toast: {success: vi.fn(), error: vi.fn()},
+}));
+
+describe('copyKeyName', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  test('writes the bare key name to the clipboard and toasts success', async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    vi.stubGlobal('navigator', {clipboard: {writeText}});
+
+    await copyKeyName('MY_TOKEN');
+
+    expect(writeText).toHaveBeenCalledExactlyOnceWith('MY_TOKEN');
+    expect(toast.success).toHaveBeenCalledExactlyOnceWith('Copied MY_TOKEN');
+    expect(toast.error).not.toHaveBeenCalled();
+  });
+
+  test('no-ops safely and warns when the clipboard API is unavailable', async () => {
+    vi.stubGlobal('navigator', {});
+
+    await copyKeyName('MY_TOKEN');
+
+    expect(toast.error).toHaveBeenCalledOnce();
+  });
+
+  test('surfaces a toast when the clipboard write rejects', async () => {
+    const writeText = vi.fn().mockRejectedValue(new Error('denied'));
+    vi.stubGlobal('navigator', {clipboard: {writeText}});
+
+    await copyKeyName('MY_TOKEN');
+
+    expect(toast.error).toHaveBeenCalledOnce();
+  });
+});

package/src/components/copy-key.ts

@@ -0,0 +1,21 @@
+import {toast} from '@shipfox/react-ui/toast';
+
+/**
+ * Copies a bare key name (e.g. `MY_TOKEN`) to the clipboard. Guarded because
+ * `navigator.clipboard` is undefined in insecure contexts and older browsers —
+ * a missing API or a rejected write surfaces a toast instead of an unhandled
+ * rejection.
+ */
+export async function copyKeyName(key: string): Promise<void> {
+  const clipboard = typeof navigator === 'undefined' ? undefined : navigator.clipboard;
+  if (!clipboard?.writeText) {
+    toast.error('Clipboard is not available in this browser.');
+    return;
+  }
+  try {
+    await clipboard.writeText(key);
+    toast.success(`Copied ${key}`);
+  } catch {
+    toast.error('Could not copy to the clipboard.');
+  }
+}

package/src/components/delete-entry-dialog.tsx

@@ -0,0 +1,57 @@
+import {Button} from '@shipfox/react-ui/button';
+import {Callout} from '@shipfox/react-ui/callout';
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
+} from '@shipfox/react-ui/modal';
+import {Text} from '@shipfox/react-ui/typography';
+
+export function DeleteEntryDialog({
+  open,
+  onOpenChange,
+  entryKey,
+  isLoading,
+  errorMessage,
+  onConfirm,
+}: {
+  open: boolean;
+  onOpenChange: (next: boolean) => void;
+  entryKey: string;
+  isLoading: boolean;
+  errorMessage?: string | undefined;
+  onConfirm: () => void;
+}) {
+  return (
+    <Modal open={open} onOpenChange={onOpenChange}>
+      <ModalContent>
+        <ModalHeader>
+          <ModalTitle>
+            Delete <strong>{entryKey}</strong>?
+          </ModalTitle>
+        </ModalHeader>
+        <ModalBody className="gap-16">
+          <Text size="sm">
+            Workflows that reference <strong>{entryKey}</strong> will fail at their next run.
+          </Text>
+          {errorMessage ? (
+            <Callout role="alert" type="error">
+              <Text size="sm">{errorMessage}</Text>
+            </Callout>
+          ) : null}
+        </ModalBody>
+        <ModalFooter>
+          <Button variant="secondary" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button variant="danger" isLoading={isLoading} onClick={onConfirm}>
+            Delete
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}

package/src/components/form-errors.test.ts

@@ -0,0 +1,67 @@
+import {ApiError} from '@shipfox/client-api';
+import {type SecretsFormErrorMapping, secretsErrorToFormError} from './form-errors.js';
+
+function apiError(code: string, message = 'server message'): ApiError {
+  return new ApiError({code, message, status: 400});
+}
+
+describe('secretsErrorToFormError', () => {
+  test.each<[string, SecretsFormErrorMapping]>([
+    [
+      'invalid-key',
+      {
+        kind: 'field',
+        field: 'key',
+        message:
+          'Invalid name. Use uppercase letters, digits and underscores; start with a letter or underscore.',
+      },
+    ],
+    [
+      'duplicate-key',
+      {kind: 'field', field: 'key', message: 'A key with this name already exists.'},
+    ],
+    ['invalid-namespace', {kind: 'form', message: 'Invalid namespace.'}],
+    ['value-too-large', {kind: 'form', message: 'This value is too large to store.'}],
+    [
+      'workspace-secret-cap-exceeded',
+      {kind: 'form', message: 'This workspace has reached its secrets and variables limit.'},
+    ],
+    [
+      'batch-scope-mismatch',
+      {kind: 'form', message: 'All entries in a batch must share the same scope.'},
+    ],
+    ['secret-not-found', {kind: 'form', message: 'This secret no longer exists.'}],
+    ['variable-not-found', {kind: 'form', message: 'This variable no longer exists.'}],
+    ['unknown-secret-store', {kind: 'form', message: 'Unknown secret store.'}],
+    ['project-not-found', {kind: 'form', message: 'This project no longer exists.'}],
+    [
+      'forbidden',
+      {
+        kind: 'form',
+        message: 'You need the workspace admin role to manage secrets and variables.',
+      },
+    ],
+  ])('maps the %s ApiError code', (code, expected) => {
+    const result = secretsErrorToFormError(apiError(code));
+
+    expect(result).toEqual(expected);
+  });
+
+  test('falls back to the server message for an unknown ApiError code', () => {
+    const result = secretsErrorToFormError(apiError('some-new-code', 'raw server message'));
+
+    expect(result).toEqual({kind: 'form', message: 'raw server message'});
+  });
+
+  test('maps a plain Error to a form-level alert with its message', () => {
+    const result = secretsErrorToFormError(new Error('boom'));
+
+    expect(result).toEqual({kind: 'form', message: 'boom'});
+  });
+
+  test('falls back to generic copy for a non-Error throwable', () => {
+    const result = secretsErrorToFormError('weird');
+
+    expect(result).toEqual({kind: 'form', message: 'Something went wrong. Try again.'});
+  });
+});

package/src/components/form-errors.ts

@@ -0,0 +1,59 @@
+import {ApiError} from '@shipfox/client-api';
+
+export type SecretsFormField = 'key';
+
+/**
+ * Classifies a management error into either a field-level message (routed to
+ * the `key` field via `errorMap.onServer`) or a form-level message (rendered
+ * in an `<Callout role="alert"`). Shared by the secret and variable forms because both hit
+ * the same management routes / `ClientError` codes.
+ */
+export type SecretsFormErrorMapping =
+  | {kind: 'field'; field: SecretsFormField; message: string}
+  | {kind: 'form'; message: string};
+
+export function secretsErrorToFormError(error: unknown): SecretsFormErrorMapping {
+  if (error instanceof ApiError) {
+    switch (error.code) {
+      case 'invalid-key':
+        return {
+          kind: 'field',
+          field: 'key',
+          message:
+            'Invalid name. Use uppercase letters, digits and underscores; start with a letter or underscore.',
+        };
+      case 'duplicate-key':
+        return {kind: 'field', field: 'key', message: 'A key with this name already exists.'};
+      case 'invalid-namespace':
+        return {kind: 'form', message: 'Invalid namespace.'};
+      case 'value-too-large':
+        return {kind: 'form', message: 'This value is too large to store.'};
+      case 'workspace-secret-cap-exceeded':
+        return {
+          kind: 'form',
+          message: 'This workspace has reached its secrets and variables limit.',
+        };
+      case 'batch-scope-mismatch':
+        return {kind: 'form', message: 'All entries in a batch must share the same scope.'};
+      case 'secret-not-found':
+        return {kind: 'form', message: 'This secret no longer exists.'};
+      case 'variable-not-found':
+        return {kind: 'form', message: 'This variable no longer exists.'};
+      case 'unknown-secret-store':
+        return {kind: 'form', message: 'Unknown secret store.'};
+      case 'project-not-found':
+        return {kind: 'form', message: 'This project no longer exists.'};
+      case 'forbidden':
+        return {
+          kind: 'form',
+          message: 'You need the workspace admin role to manage secrets and variables.',
+        };
+      default:
+        return {kind: 'form', message: error.message};
+    }
+  }
+  if (error instanceof Error) {
+    return {kind: 'form', message: error.message};
+  }
+  return {kind: 'form', message: 'Something went wrong. Try again.'};
+}

package/src/components/form-shell.tsx

@@ -0,0 +1,31 @@
+import {cn} from '@shipfox/react-ui/utils';
+import type {ReactNode} from 'react';
+
+/**
+ * Modal-agnostic body/footer layout matching `ModalBody`/`ModalFooter` so the
+ * forms render the same inside a `ModalContent` and standalone (stories, RTL
+ * tests) without a Modal context.
+ */
+export function FormBody({children, className}: {children: ReactNode; className?: string}) {
+  return (
+    <div
+      className={cn(
+        'flex w-full flex-col items-start gap-16 bg-background-neutral-base px-24 pt-16 pb-24',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function FormFooter({children}: {children: ReactNode}) {
+  return (
+    <div className="flex w-full shrink-0 flex-col">
+      <div className="h-[1px] w-full bg-border-neutral-strong" />
+      <div className="flex w-full items-center justify-end gap-16 bg-background-neutral-base px-24 py-16">
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/components/secret-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 {SecretForm} from './secret-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 SecretForm> = {
+  title: 'Secrets/SecretForm',
+  component: SecretForm,
+  args: {
+    workspaceId: WORKSPACE_ID,
+    mode: 'create',
+    onSaved: () => undefined,
+    onCancel: () => undefined,
+  },
+  decorators: [
+    (Story) => (
+      <Wrapper>
+        <Story />
+      </Wrapper>
+    ),
+  ],
+};
+export default meta;
+
+type Story = StoryObj<typeof SecretForm>;
+
+export const Playground: Story = {};
+
+export const Edit: Story = {
+  args: {mode: 'edit', existingKey: 'API_TOKEN'},
+};
+
+export const ShortValueWarning: Story = {
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByLabelText('Value'), 'abc');
+  },
+};

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

@@ -0,0 +1,37 @@
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import {render, screen} from '@testing-library/react';
+import {SecretForm} from './secret-form.js';
+
+function renderEditForm() {
+  const queryClient = new QueryClient();
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <SecretForm
+        workspaceId="11111111-1111-4111-8111-111111111111"
+        mode="edit"
+        existingKey="API_TOKEN"
+        onSaved={() => undefined}
+        onCancel={() => undefined}
+      />
+    </QueryClientProvider>,
+  );
+}
+
+describe('SecretForm write-only invariant', () => {
+  test('never prefills the value when editing an existing secret', () => {
+    renderEditForm();
+
+    const value = screen.getByLabelText('Value') as HTMLTextAreaElement;
+
+    expect(value.value).toBe('');
+  });
+
+  test('locks the name and keeps it uneditable when editing', () => {
+    renderEditForm();
+
+    const name = screen.getByLabelText('Name') as HTMLInputElement;
+
+    expect(name.value).toBe('API_TOKEN');
+    expect(name).toBeDisabled();
+  });
+});

package/src/components/secret-form.tsx

@@ -0,0 +1,170 @@
+import {isShortSecretValue} from '@shipfox/api-secrets-dto';
+import {Button, IconButton} 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 {useState} from 'react';
+import {usePutSecretMutation} from '#hooks/api/secrets.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 SECRET_FORM_ID = 'secret-form';
+
+// Client-side mirror of the server default SECRETS_SHORT_VALUE_WARN_LENGTH. The
+// advisory is best-effort UX, so drift from a self-hosted override is cosmetic.
+const SHORT_VALUE_THRESHOLD = 12;
+
+export function SecretForm({
+  workspaceId,
+  mode,
+  existingKey,
+  reservedKeys = [],
+  onSaved,
+  onCancel,
+}: {
+  workspaceId: string;
+  mode: 'create' | 'edit';
+  existingKey?: string | undefined;
+  reservedKeys?: readonly string[] | undefined;
+  onSaved: () => void;
+  onCancel: () => void;
+}) {
+  const putSecret = usePutSecretMutation();
+  const [formError, setFormError] = useState<string | undefined>();
+  const [showValue, setShowValue] = useState(false);
+
+  const form = useForm({
+    defaultValues: {key: existingKey ?? '', value: ''},
+    onSubmit: async ({value}) => {
+      setFormError(undefined);
+      try {
+        await putSecret.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);
+        }
+      }
+    },
+  });
+
+  return (
+    <>
+      <FormBody>
+        <form
+          id={SECRET_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: 'secret'}),
+              onSubmit: ({value}) =>
+                validateNewStoreKey(value, {mode, reservedKeys, kind: 'secret'}),
+            }}
+          >
+            {(field) => (
+              <FormField
+                label="Name"
+                id="secret-key"
+                description={STORE_KEY_HELP}
+                error={fieldError(field)}
+              >
+                <FormFieldInput
+                  className="font-code"
+                  autoComplete="off"
+                  spellCheck={false}
+                  disabled={mode === 'edit'}
+                  placeholder="MY_TOKEN"
+                  value={field.state.value}
+                  onChange={(event) => field.handleChange(event.target.value.toUpperCase())}
+                  onBlur={field.handleBlur}
+                />
+              </FormField>
+            )}
+          </form.Field>
+
+          <form.Field
+            name="value"
+            validators={{
+              onBlur: ({value}) => (value.length > 0 ? undefined : 'A value is required.'),
+              onSubmit: ({value}) => (value.length > 0 ? undefined : 'A value is required.'),
+            }}
+          >
+            {(field) => (
+              <FormField label="Value" id="secret-value" error={fieldError(field)}>
+                <div className="relative">
+                  <FormFieldTextarea
+                    className={
+                      showValue ? 'pr-32 font-code' : 'pr-32 font-code [-webkit-text-security:disc]'
+                    }
+                    autoComplete="off"
+                    spellCheck={false}
+                    rows={3}
+                    placeholder={
+                      mode === 'edit'
+                        ? 'Enter a new value to replace the current one'
+                        : 'Paste the secret value'
+                    }
+                    value={field.state.value}
+                    onChange={(event) => field.handleChange(event.target.value)}
+                    onBlur={field.handleBlur}
+                  />
+                  <IconButton
+                    type="button"
+                    variant="transparent"
+                    size="xs"
+                    className="absolute top-6 right-6"
+                    icon={showValue ? 'eyeOffLine' : 'eyeLine'}
+                    aria-label={showValue ? 'Hide value' : 'Show value'}
+                    onClick={() => setShowValue((prev) => !prev)}
+                  />
+                </div>
+                {isShortSecretValue(field.state.value, SHORT_VALUE_THRESHOLD) ? (
+                  <Callout role="alert" type="warning">
+                    <Text size="sm">
+                      Very short secrets can match ordinary log text and redact unrelated output. If
+                      this value is not sensitive, store it as a Variable instead.
+                    </Text>
+                  </Callout>
+                ) : null}
+              </FormField>
+            )}
+          </form.Field>
+        </form>
+        {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={SECRET_FORM_ID} isLoading={putSecret.isPending}>
+          {mode === 'edit' ? 'Update secret' : 'Create secret'}
+        </Button>
+      </FormFooter>
+    </>
+  );
+}