feat: Support inline file category creation (#864)

Author: kingston

.changeset/inline-file-category-creation.md

@@ -0,0 +1,7 @@
+---
+'@baseplate-dev/project-builder-lib': patch
+'@baseplate-dev/project-builder-web': patch
+'@baseplate-dev/plugin-storage': patch
+---
+
+Support inline file category creation and editing from the file transformer form, eliminating the need to navigate to the plugin config page.

packages/project-builder-lib/src/web/specs/model-transformer-web-spec.ts

@@ -6,14 +6,22 @@ import type { ModelConfigInput, TransformerConfig } from '#src/schema/index.js';
 
 import { createFieldMapSpec } from '#src/plugins/utils/create-field-map-spec.js';
 
-export interface ModelTransformerWebFormProps {
+export interface ModelTransformerWebFormFieldsProps {
   // oxlint-disable-next-line typescript/no-explicit-any
   formProps: UseFormReturn<any>;
   name: string;
   originalModel: ModelConfigInput;
   pluginKey: string | undefined;
 }
 
+export interface ModelTransformerWebFullFormProps {
+  transformer?: TransformerConfig;
+  onUpdate: (transformer: TransformerConfig) => void;
+  isCreate: boolean;
+  originalModel: ModelConfigInput;
+  pluginKey: string | undefined;
+}
+
 export interface ModelTransformerWebConfig<
   T extends TransformerConfig = TransformerConfig,
 > {
@@ -22,7 +30,17 @@ export interface ModelTransformerWebConfig<
   label: string;
   description: string;
   instructions?: string;
-  Form?: React.ComponentType<ModelTransformerWebFormProps>;
+  /**
+   * Full form component that owns the entire form element, submit logic, and footer.
+   * Mutually exclusive with `FormFields`.
+   */
+  Form?: React.ComponentType<ModelTransformerWebFullFormProps>;
+  /**
+   * Form fields component that provides only the fields.
+   * The framework wraps it in a `<form>` element with dialog footer.
+   * Mutually exclusive with `Form`.
+   */
+  FormFields?: React.ComponentType<ModelTransformerWebFormFieldsProps>;
   allowNewTransformer?: (
     projectContainer: ProjectDefinitionContainer,
     modelConfig: ModelConfigInput,

packages/project-builder-web/src/routes/data/models/edit.$key/-components/service/service-embedded-relation-form.tsx

@@ -1,7 +1,7 @@
 import type { EmbeddedRelationTransformerConfig } from '@baseplate-dev/project-builder-lib';
 import type {
   ModelTransformerWebConfig,
-  ModelTransformerWebFormProps,
+  ModelTransformerWebFormFieldsProps,
 } from '@baseplate-dev/project-builder-lib/web';
 import type React from 'react';
 import type { UseFormReturn } from 'react-hook-form';
@@ -26,7 +26,7 @@ import { useOriginalModel } from '../../../-hooks/use-original-model.js';
 function ServiceEmbeddedRelationForm({
   formProps,
   name,
-}: ModelTransformerWebFormProps): React.JSX.Element {
+}: ModelTransformerWebFormFieldsProps): React.JSX.Element {
   // force type cast to avoid TS error
   const prefix = name as 'prefix';
   const formPropsTyped = formProps as unknown as UseFormReturn<{
@@ -185,6 +185,6 @@ export const embeddedRelationTransformerWebConfig: ModelTransformerWebConfig<Emb
       embeddedFieldNames: [],
       modelRef: '',
     }),
-    Form: ServiceEmbeddedRelationForm,
+    FormFields: ServiceEmbeddedRelationForm,
     pluginKey: undefined,
   };

packages/project-builder-web/src/routes/data/models/edit.$key/-components/service/service-transformer-form.tsx

@@ -30,12 +30,50 @@ interface ServiceTransformerFormProps {
 
 export function ServiceTransformerForm({
   className,
-  webConfig: { Form, pluginKey },
+  webConfig,
   transformer,
   onUpdate,
   isCreate,
 }: ServiceTransformerFormProps): React.JSX.Element | null {
   const originalModel = useOriginalModel();
+
+  // Full form mode: delegate entirely to the Form component
+  if (webConfig.Form) {
+    const { Form } = webConfig;
+    return (
+      <Form
+        transformer={transformer}
+        onUpdate={onUpdate}
+        isCreate={isCreate}
+        originalModel={originalModel}
+        pluginKey={webConfig.pluginKey}
+      />
+    );
+  }
+
+  // FormFields mode: wrap fields in a form with dialog footer
+  return (
+    <ServiceTransformerFormFields
+      className={className}
+      webConfig={webConfig}
+      transformer={transformer}
+      onUpdate={onUpdate}
+      isCreate={isCreate}
+      originalModel={originalModel}
+    />
+  );
+}
+
+function ServiceTransformerFormFields({
+  className,
+  webConfig: { FormFields, pluginKey },
+  transformer,
+  onUpdate,
+  isCreate,
+  originalModel,
+}: ServiceTransformerFormProps & {
+  originalModel: ReturnType<typeof useOriginalModel>;
+}): React.JSX.Element | null {
   const transformerSchema = useDefinitionSchema(createTransformerSchema);
   const schema = useMemo(
     () =>
@@ -64,7 +102,7 @@ export function ServiceTransformerForm({
 
   const formId = useId();
 
-  if (!Form) {
+  if (!FormFields) {
     return null;
   }
 
@@ -77,7 +115,7 @@ export function ServiceTransformerForm({
         return onSubmit(e);
       }}
     >
-      <Form
+      <FormFields
         formProps={formProps}
         name="transformer"
         originalModel={originalModel}

packages/project-builder-web/src/routes/data/models/edit.$key/-components/service/service-transformers-section.tsx

@@ -72,7 +72,7 @@ function ServiceTransformerRecord({
         ))}
       </RecordViewItemList>
       <RecordViewActions>
-        {transformerConfig.Form && (
+        {(transformerConfig.Form ?? transformerConfig.FormFields) && (
           <ServiceTransformerDialog
             webConfig={transformerConfig}
             transformer={field}

packages/ui-components/src/components/ui/record-view/record-view.tsx

@@ -68,7 +68,7 @@ function RecordViewActions({
   children,
 }: RecordViewActionsProps): React.ReactElement {
   return (
-    <div className={cn('flex items-center gap-2', className)}>{children}</div>
+    <div className={cn('flex items-center gap-4', className)}>{children}</div>
   );
 }
 

plugins/plugin-storage/package.json

@@ -54,6 +54,7 @@
     "@baseplate-dev/sync": "workspace:*",
     "@baseplate-dev/ui-components": "workspace:*",
     "@baseplate-dev/utils": "workspace:*",
+    "@hookform/lenses": "0.8.1",
     "@hookform/resolvers": "5.2.2",
     "es-toolkit": "1.44.0",
     "react": "catalog:",

plugins/plugin-storage/src/storage/core/components/file-category-dialog.tsx

@@ -1,7 +1,6 @@
 import type React from 'react';
 import type { Control } from 'react-hook-form';
 
-import { authConfigSpec } from '@baseplate-dev/project-builder-lib';
 import {
   useDefinitionSchema,
   useProjectDefinition,
@@ -14,11 +13,8 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-  InputFieldController,
-  MultiComboboxFieldController,
-  SelectFieldController,
-  SwitchFieldController,
 } from '@baseplate-dev/ui-components';
+import { useLens } from '@hookform/lenses';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useId } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
@@ -29,6 +25,8 @@ import type {
 } from '../schema/plugin-definition.js';
 
 import { createFileCategorySchema } from '../schema/plugin-definition.js';
+import { FileCategoryFormFields } from './file-category-form-fields.js';
+import { getSelectableRoleOptions } from './get-selectable-role-options.js';
 
 interface FileCategoryDialogProps {
   open?: boolean;
@@ -56,6 +54,7 @@ export function FileCategoryDialog({
   });
 
   const { control, handleSubmit } = form;
+  const lens = useLens({ control });
 
   const onSubmit = handleSubmit((data) => {
     onSave(data);
@@ -64,14 +63,7 @@ export function FileCategoryDialog({
 
   const formId = useId();
 
-  // Get available auth roles
-  const roleOptions = pluginContainer
-    .use(authConfigSpec)
-    .getAuthConfigOrThrow(definition)
-    .roles.map((role) => ({
-      label: role.name,
-      value: role.id,
-    }));
+  const roleOptions = getSelectableRoleOptions(pluginContainer, definition);
 
   // Get available storage adapters from parent form
   const adapters = useWatch({ control: parentControl, name: 's3Adapters' });
@@ -100,46 +92,11 @@ export function FileCategoryDialog({
                 : 'Update the file category details below.'}
             </DialogDescription>
           </DialogHeader>
-          <div className="storage:space-y-4 storage:py-4">
-            <InputFieldController
-              label="Category Name"
-              name="name"
-              control={control}
-              placeholder="e.g., USER_PROFILE_AVATAR"
-              description="Must be CONSTANT_CASE format"
-            />
-            <InputFieldController
-              label="Max File Size (MB)"
-              name="maxFileSizeMb"
-              control={control}
-              type="number"
-              placeholder="e.g., 10"
-              description="Maximum file size in megabytes"
-              registerOptions={{
-                valueAsNumber: true,
-              }}
-            />
-            <MultiComboboxFieldController
-              label="Upload Roles"
-              name="authorize.uploadRoles"
-              control={control}
-              options={roleOptions}
-              placeholder="Select roles that can upload..."
-              description="User roles authorized to upload files"
-            />
-            <SelectFieldController
-              label="Storage Adapter"
-              name="adapterRef"
-              control={control}
-              options={adapterOptions}
-              placeholder="Select storage adapter..."
-              description="Where files will be stored"
-            />
-            <SwitchFieldController
-              label="Disable Auto-Cleanup"
-              name="disableAutoCleanup"
-              control={control}
-              description="When enabled, files in this category will not be automatically cleaned up"
+          <div className="storage:py-4">
+            <FileCategoryFormFields
+              lens={lens}
+              roleOptions={roleOptions}
+              adapterOptions={adapterOptions}
             />
           </div>
           <DialogFooter>

plugins/plugin-storage/src/storage/core/components/file-category-form-fields.tsx

@@ -0,0 +1,62 @@
+import type { Lens } from '@hookform/lenses';
+
+import {
+  InputFieldController,
+  MultiComboboxFieldController,
+  SelectFieldController,
+  SwitchFieldController,
+} from '@baseplate-dev/ui-components';
+
+import type { FileCategoryInput } from '../schema/plugin-definition.js';
+
+interface FileCategoryFormFieldsProps {
+  lens: Lens<FileCategoryInput>;
+  roleOptions: { label: string; value: string }[];
+  adapterOptions: { label: string; value: string }[];
+}
+
+export function FileCategoryFormFields({
+  lens,
+  roleOptions,
+  adapterOptions,
+}: FileCategoryFormFieldsProps): React.JSX.Element {
+  return (
+    <div className="storage:space-y-4">
+      <InputFieldController
+        {...lens.focus('name').interop()}
+        label="Category Name"
+        placeholder="e.g., USER_PROFILE_AVATAR"
+        description="Must be CONSTANT_CASE format"
+      />
+      <InputFieldController
+        {...lens.focus('maxFileSizeMb').interop()}
+        label="Max File Size (MB)"
+        type="number"
+        placeholder="e.g., 10"
+        description="Maximum file size in megabytes"
+        registerOptions={{
+          valueAsNumber: true,
+        }}
+      />
+      <MultiComboboxFieldController
+        {...lens.focus('authorize.uploadRoles').interop()}
+        label="Upload Roles"
+        options={roleOptions}
+        placeholder="Select roles that can upload..."
+        description="User roles authorized to upload files"
+      />
+      <SelectFieldController
+        {...lens.focus('adapterRef').interop()}
+        label="Storage Adapter"
+        options={adapterOptions}
+        placeholder="Select storage adapter..."
+        description="Where files will be stored"
+      />
+      <SwitchFieldController
+        {...lens.focus('disableAutoCleanup').interop()}
+        label="Disable Auto-Cleanup"
+        description="When enabled, files in this category will not be automatically cleaned up"
+      />
+    </div>
+  );
+}

plugins/plugin-storage/src/storage/core/components/get-selectable-role-options.ts

@@ -0,0 +1,23 @@
+import type { ProjectDefinition } from '@baseplate-dev/project-builder-lib';
+import type { UseProjectDefinitionResult } from '@baseplate-dev/project-builder-lib/web';
+
+import { authConfigSpec } from '@baseplate-dev/project-builder-lib';
+
+/**
+ * Returns role options suitable for selection in storage forms.
+ * Excludes auto-assigned roles (e.g. system, public) but keeps 'user'
+ * since it's commonly needed for upload authorization.
+ */
+export function getSelectableRoleOptions(
+  pluginContainer: UseProjectDefinitionResult['pluginContainer'],
+  definition: ProjectDefinition,
+): { label: string; value: string }[] {
+  return pluginContainer
+    .use(authConfigSpec)
+    .getAuthConfigOrThrow(definition)
+    .roles.filter((role) => !role.autoAssigned || role.name === 'user')
+    .map((role) => ({
+      label: role.name,
+      value: role.id,
+    }));
+}