Skip to content

Work / Scrvio / Wiki / Surfaces

storage-provider

Surfacecanonicalverified 2026-10-04

SURFACE.WEB.STORAGE-PROVIDER

Summary

The Add Storage Provider form modal, drawn with Private Cloud (S3) selected.

Raw wireframe

  • .context/designs/web/workspace/storage-provider.html

Why it is drawn this way

S3 is selected to show every field. The form opens on Local Storage, which shows only the select and the default checkbox. The five extra fields render only for PRIVATE_CLOUD.

Region is pre-filled. The form state starts with region: "us-east-1", so that field holds a value. The others show placeholders.

The key placeholders are AWS's examples. AKIAIOSFODNN7EXAMPLE and wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY are the documented sample values in the source. They are not credentials.

Required is checked twice. Bucket and Region carry required, and the page also toasts Bucket name is required for Private Cloud and the Region equivalent. Both keys may be empty, to use environment variables or an IAM role.

A failed save keeps the modal open. The handler toasts and rethrows. On success it toasts, closes and refetches the list, so Create links back to the storage page.

The app modal does not scroll. modal.tsx has no overflow rule, so on a short window this form runs off screen. The drawing lets the modal scroll so it stays inside the frame.

The provider select is native. The chevron stands for the browser's own control; the app imports no icon for it.

Related

Sources

  • apps/website/src/components/storage/storage-config-form-modal.tsx
  • apps/website/src/app/workspace/[id]/storage/page.tsx
  • packages/ui/src/components/ui/form-modal.tsx
  • packages/ui/src/components/ui/select.tsx