@open-mercato/core 0.7.1-develop.7193.1.910a5b0a1e → 0.7.1-develop.7194.1.ab4fc81f82

package/src/modules/workflows/backend/definitions/[id]/page.tsx

@@ -1,363 +1,39 @@
 "use client"
 
 import * as React from 'react'
-import { useRouter, usePathname } from 'next/navigation'
-import { useQuery } from '@tanstack/react-query'
+import { useRouter } from 'next/navigation'
 import { Page, PageBody } from '@open-mercato/ui/backend/Page'
-import { CrudForm } from '@open-mercato/ui/backend/CrudForm'
-import { Spinner } from '@open-mercato/ui/primitives/spinner'
-import { Button } from '@open-mercato/ui/primitives/button'
-import { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'
-import { apiFetch, withScopedApiHeaders } from '@open-mercato/ui/backend/utils/api'
-import { buildOptimisticLockHeader } from '@open-mercato/ui/backend/utils/optimisticLock'
-import { buildRecordInjectionContext, useSetCurrentRecordInjectionContext } from '@open-mercato/ui/backend/injection/recordContext'
-import { ErrorMessage, RecordNotFoundState } from '@open-mercato/ui/backend/detail'
-import { readJsonSafe } from '@open-mercato/ui/backend/utils/serverErrors'
-import { formatWorkflowValidationError } from '../../../lib/format-validation-error'
-import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { LoadingMessage } from '@open-mercato/ui/backend/detail'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
-import { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
-import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
-import {
-  workflowDefinitionFormSchema,
-  createFormGroups,
-  createFieldDefinitions,
-  parseWorkflowToFormValues,
-  buildWorkflowPayload,
-  type WorkflowDefinitionFormValues,
-} from '../../../components/formConfig'
-import { StepsEditor } from '../../../components/StepsEditor'
-import { TransitionsEditor } from '../../../components/TransitionsEditor'
-import { DefinitionTriggersEditor } from '../../../components/DefinitionTriggersEditor'
-import { MobileDefinitionDetail } from '../../../components/mobile/MobileDefinitionDetail'
-import { useIsMobile } from '@open-mercato/ui/hooks/useIsMobile'
-import type { WorkflowDefinitionTrigger } from '../../../data/entities'
-
+import { buildVisualEditorHref, WORKFLOW_STUDIO_CREATE_HREF } from '../../../lib/visual-editor-navigation'
+
+/**
+ * Bridge route — the form editor is RETIRED (spec section 10).
+ *
+ * Every definition is now edited in the Studio, so this route forwards to
+ * `/backend/definitions/visual-editor?id=<id>` and keeps its sibling
+ * `page.meta.ts` guard intact. It stays for at least one minor release for
+ * bookmarks and third-party deep links, per BACKWARD_COMPATIBILITY.md's
+ * deprecation protocol, and is deliberately NOT deleted.
+ *
+ * @deprecated Link to `/backend/definitions/visual-editor?id=<id>` instead.
+ */
 export default function EditWorkflowDefinitionPage({ params }: { params?: { id?: string } }) {
   const router = useRouter()
-  const pathname = usePathname()
   const t = useT()
-  const isMobile = useIsMobile()
+  // The id comes from the params prop the /backend/[...slug] catch-all passes
+  // down, never from the router hook or a positional slug index (#5600).
   const definitionId = params?.id
 
-  const { data: definition, isLoading, error } = useQuery({
-    queryKey: ['workflow-definition', definitionId],
-    queryFn: async () => {
-      const response = await apiFetch(`/api/workflows/definitions/${definitionId}`)
-      if (!response.ok) {
-        const err = new Error(t('workflows.errors.fetchFailed')) as Error & { status?: number }
-        err.status = response.status
-        throw err
-      }
-      const result = await response.json()
-      return result.data
-    },
-    enabled: !!definitionId,
-    retry: (failureCount, err) => {
-      if ((err as { status?: number }).status === 404) return false
-      return failureCount < 2
-    },
-  })
-
-  const isNotFound = (error as { status?: number } | null)?.status === 404
-
-  const initialValues = React.useMemo(() => {
-    if (definition) {
-      return parseWorkflowToFormValues(definition)
-    }
-    return null
-  }, [definition])
-
-  const [triggers, setTriggers] = React.useState<WorkflowDefinitionTrigger[]>([])
-
   React.useEffect(() => {
-    setTriggers(initialValues?.triggers ?? [])
-  }, [initialValues])
-
-  const source = definition?.source as 'code' | 'code_override' | 'user' | undefined
-  const isCodeOnly = source === 'code'
-  const isCodeOverride = source === 'code_override'
-
-  const { confirm, ConfirmDialogElement } = useConfirmDialog()
-
-  const mutationContextId = React.useMemo(
-    () => `workflows.definitions.detail:${definitionId ?? 'unknown'}`,
-    [definitionId],
-  )
-  const { runMutation, retryLastMutation } = useGuardedMutation<Record<string, unknown>>({
-    contextId: mutationContextId,
-  })
-
-  const handleSubmit = async (values: WorkflowDefinitionFormValues) => {
-    const payload = buildWorkflowPayload({ ...values, triggers })
-    const optimisticLockHeader = buildOptimisticLockHeader(
-      typeof definition?.updatedAt === 'string' ? definition.updatedAt : null,
-    )
-
-    await runMutation({
-      operation: async () => {
-        const updateDefinition = () => apiFetch(`/api/workflows/definitions/${definitionId}`, {
-          method: 'PUT',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(payload),
-        })
-        const response = Object.keys(optimisticLockHeader).length > 0
-          ? await withScopedApiHeaders(optimisticLockHeader, updateDefinition)
-          : await updateDefinition()
-        if (!response.ok) {
-          const errorBody = await readJsonSafe<{
-            error?: string
-            code?: string
-            currentUpdatedAt?: string
-            expectedUpdatedAt?: string
-            details?: Array<{ path?: Array<string | number>; message?: string }>
-          }>(response, null)
-          throw Object.assign(
-            new Error(formatWorkflowValidationError(errorBody, t('workflows.errors.updateFailed'))),
-            { status: response.status, ...(errorBody ?? {}) },
-          )
-        }
-        return response
-      },
-      mutationPayload: { resourceId: definitionId, operation: 'update' },
-      context: {
-        formId: mutationContextId,
-        resourceKind: 'workflows.definition',
-        resourceId: definitionId,
-        operation: 'update',
-        retryLastMutation,
-      },
-    })
-
-    router.push('/backend/definitions')
-    router.refresh()
-  }
-
-  const handleCustomize = async () => {
-    try {
-      const result = await runMutation({
-        operation: async () => {
-          const response = await apiFetch(`/api/workflows/definitions/${definitionId}/customize`, {
-            method: 'POST',
-          })
-          if (!response.ok) {
-            const errorBody = await readJsonSafe<{ error?: string }>(response, null)
-            throw new Error(errorBody?.error || t('workflows.errors.updateFailed'))
-          }
-          return readJsonSafe<{ data?: { id?: string } }>(response, null)
-        },
-        mutationPayload: { resourceId: definitionId, operation: 'customize' },
-        context: {
-          formId: mutationContextId,
-          resourceKind: 'workflows.definition',
-          resourceId: definitionId,
-          operation: 'customize',
-          retryLastMutation,
-        },
-      })
-      if (result?.data?.id) {
-        router.push(`/backend/definitions/${result.data.id}`)
-        router.refresh()
-      }
-    } catch (error) {
-      const message = error instanceof Error ? error.message : t('workflows.errors.updateFailed')
-      flash(message, 'error')
-    }
-  }
-
-  const handleResetToCode = async () => {
-    const confirmed = await confirm({
-      title: t('workflows.actions.resetToCode'),
-      description: t('workflows.actions.resetConfirm'),
-      confirmText: t('workflows.actions.resetToCode'),
-      variant: 'destructive',
-    })
-    if (!confirmed) return
-
-    try {
-      const result = await runMutation({
-        operation: async () => {
-          const response = await apiFetch(`/api/workflows/definitions/${definitionId}/reset-to-code`, {
-            method: 'POST',
-          })
-          if (!response.ok) {
-            const errorBody = await readJsonSafe<{ error?: string }>(response, null)
-            throw new Error(errorBody?.error || t('workflows.messages.updateFailed'))
-          }
-          return readJsonSafe<{ data?: { id?: string } }>(response, null)
-        },
-        mutationPayload: { resourceId: definitionId, operation: 'reset-to-code' },
-        context: {
-          formId: mutationContextId,
-          resourceKind: 'workflows.definition',
-          resourceId: definitionId,
-          operation: 'reset-to-code',
-          retryLastMutation,
-        },
-      })
-      flash(t('workflows.messages.updated'), 'success')
-      const codeId = result?.data?.id || `code:${definition?.workflowId}`
-      router.push(`/backend/definitions/${codeId}`)
-      router.refresh()
-    } catch {
-      flash(t('workflows.messages.updateFailed'), 'error')
-    }
-  }
-
-  const fields = React.useMemo(() => createFieldDefinitions(t), [t])
-
-  const formGroups = React.useMemo(
-    () => isMobile ? [] : createFormGroups(t, StepsEditor, TransitionsEditor),
-    [t, isMobile]
-  )
-
-  const navigateToVisualEditor = React.useCallback(() => {
-    router.push(`/backend/definitions/visual-editor?id=${definitionId}`)
+    router.replace(definitionId ? buildVisualEditorHref(definitionId) : WORKFLOW_STUDIO_CREATE_HREF)
   }, [router, definitionId])
 
-  // Publish page-load record context to the AppShell-owned `backend:record:current`
-  // mount so the enterprise record_locks widget resolves `workflows.definition` + id
-  // explicitly. The resourceKind mirrors the save-time `useGuardedMutation` context
-  // and server guard so the held lock matches the conflict surface for the same
-  // definition across both the form and visual editors.
-  useSetCurrentRecordInjectionContext(
-    buildRecordInjectionContext({
-      resourceKind: 'workflows.definition',
-      resourceId: definitionId ?? null,
-      updatedAt: typeof definition?.updatedAt === 'string' ? definition.updatedAt : null,
-      data: (definition ?? null) as Record<string, unknown> | null,
-      path: pathname,
-    }),
-  )
-
-  if (isLoading) {
-    return (
-      <Page>
-        <PageBody>
-          <div className="flex h-[50vh] flex-col items-center justify-center gap-2 text-muted-foreground">
-            <Spinner className="h-6 w-6" />
-            <span>{t('workflows.edit.loading')}</span>
-          </div>
-        </PageBody>
-      </Page>
-    )
-  }
-
-  if (isNotFound) {
-    return (
-      <Page>
-        <PageBody>
-          <RecordNotFoundState
-            label={t('workflows.errors.notFound', t('workflows.errors.loadFailed'))}
-            backHref="/backend/definitions"
-            backLabel={t('workflows.backToList')}
-          />
-        </PageBody>
-      </Page>
-    )
-  }
-
-  if (error || !definition) {
-    return (
-      <Page>
-        <PageBody>
-          <ErrorMessage label={t('workflows.errors.loadFailed')} />
-          <div className="mt-4 flex justify-center">
-            <Button asChild variant="outline">
-              <a href="/backend/definitions">{t('workflows.backToList')}</a>
-            </Button>
-          </div>
-        </PageBody>
-      </Page>
-    )
-  }
-
-  if (!initialValues) {
-    return null
-  }
-
   return (
     <Page>
       <PageBody>
-        {isCodeOnly && (
-          <Alert status="information" className="mb-4">
-            <AlertDescription className="flex items-center justify-between">
-              <span>{t('workflows.source.code.readonlyBanner')}</span>
-              <Button variant="outline" size="sm" onClick={handleCustomize}>
-                {t('workflows.actions.customize')}
-              </Button>
-            </AlertDescription>
-          </Alert>
-        )}
-        {isCodeOverride && (
-          <Alert status="warning" className="mb-4">
-            <AlertDescription className="flex items-center justify-between">
-              <span>{t('workflows.source.code_override.banner')}</span>
-              <Button variant="outline" size="sm" onClick={handleResetToCode}>
-                {t('workflows.actions.resetToCode')}
-              </Button>
-            </AlertDescription>
-          </Alert>
-        )}
-        <div className="mb-4 p-4 bg-status-info-bg border border-status-info-border rounded-lg flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <div className="flex items-start gap-3">
-            <svg className="w-5 h-5 text-status-info-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-            </svg>
-            <div>
-              <p className="text-sm font-medium text-status-info-text">
-                {t('workflows.edit.visualEditorAvailable')}
-              </p>
-              <p className="text-xs text-status-info-text mt-0.5">
-                {t('workflows.edit.visualEditorDescription')}
-              </p>
-            </div>
-          </div>
-          <Button asChild variant="outline" size="sm" className="w-full sm:w-auto border-status-info-border text-status-info-text hover:bg-status-info-bg">
-            <a href={`/backend/definitions/visual-editor?id=${definitionId}`}>
-              {t('workflows.actions.openVisualEditor')}
-            </a>
-          </Button>
-        </div>
-        <CrudForm
-          key={definitionId}
-          title={isCodeOnly ? definition?.workflowName || t('workflows.edit.title') : t('workflows.edit.title')}
-          titleHeadingLevel={1}
-          backHref="/backend/definitions"
-          schema={workflowDefinitionFormSchema}
-          fields={fields}
-          initialValues={initialValues}
-          onSubmit={handleSubmit}
-          cancelHref="/backend/definitions"
-          groups={formGroups}
-          submitLabel={isCodeOnly ? t('workflows.actions.customize') : t('workflows.form.update')}
-          {...(isCodeOnly ? { readOnly: true } : {})}
-        />
-
-        {/* Mobile Steps & Transitions View */}
-        {isMobile && initialValues && (
-          <div className="mt-4">
-            <MobileDefinitionDetail
-              values={initialValues}
-              onEditStep={navigateToVisualEditor}
-              onDeleteStep={navigateToVisualEditor}
-              onAddStep={navigateToVisualEditor}
-              onEditTransition={navigateToVisualEditor}
-              onDeleteTransition={navigateToVisualEditor}
-              onAddTransition={navigateToVisualEditor}
-            />
-          </div>
-        )}
-
-        {/* Event Triggers Section */}
-        <div className="mt-8">
-          <DefinitionTriggersEditor
-            value={triggers}
-            onChange={setTriggers}
-          />
-        </div>
+        <LoadingMessage label={t('workflows.redirect.toStudio', 'Opening the workflow studio…')} />
       </PageBody>
-      {ConfirmDialogElement}
     </Page>
   )
 }

package/src/modules/workflows/backend/definitions/create/page.meta.ts

@@ -11,7 +11,7 @@ const createIcon = React.createElement(
 
 export const metadata = {
   requireAuth: true,
-  requireFeatures: ['workflows.create'],
+  requireFeatures: ['workflows.definitions.create'],
   pageTitle: 'Create Workflow Definition',
   pageTitleKey: 'workflows.create.title',
   pageGroup: 'Workflows',

package/src/modules/workflows/backend/definitions/create/page.tsx

@@ -3,74 +3,34 @@
 import * as React from 'react'
 import { useRouter } from 'next/navigation'
 import { Page, PageBody } from '@open-mercato/ui/backend/Page'
-import { CrudForm } from '@open-mercato/ui/backend/CrudForm'
-import { apiFetch } from '@open-mercato/ui/backend/utils/api'
-import { readJsonSafe } from '@open-mercato/ui/backend/utils/serverErrors'
+import { LoadingMessage } from '@open-mercato/ui/backend/detail'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
-import {
-  workflowDefinitionFormSchema,
-  createFormGroups,
-  createFieldDefinitions,
-  defaultFormValues,
-  buildWorkflowPayload,
-  type WorkflowDefinitionFormValues,
-} from '../../../components/formConfig'
-import { StepsEditor } from '../../../components/StepsEditor'
-import { TransitionsEditor } from '../../../components/TransitionsEditor'
-import { Alert, AlertDescription, AlertTitle } from '@open-mercato/ui/primitives/alert'
-import { Zap } from 'lucide-react'
-import { formatWorkflowValidationError } from '../../../lib/format-validation-error'
-
+import { WORKFLOW_STUDIO_CREATE_HREF } from '../../../lib/visual-editor-navigation'
+
+/**
+ * Bridge route — the form editor is RETIRED (spec section 10).
+ *
+ * The Studio (`/backend/definitions/visual-editor`) is the only workflow editor;
+ * this file stays for at least one minor release so bookmarks, deep links and
+ * third-party navigation to `/backend/definitions/create` keep working, and its
+ * sibling `page.meta.ts` keeps enforcing the same RBAC guard it always did. It
+ * is deliberately NOT deleted — see BACKWARD_COMPATIBILITY.md's deprecation
+ * protocol and the UPGRADE_NOTES entry.
+ *
+ * @deprecated Link to `/backend/definitions/visual-editor` instead.
+ */
 export default function CreateWorkflowDefinitionPage() {
   const router = useRouter()
   const t = useT()
 
-  const handleSubmit = async (values: WorkflowDefinitionFormValues) => {
-    const payload = buildWorkflowPayload(values)
-
-    const response = await apiFetch('/api/workflows/definitions', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(payload),
-    })
-
-    if (!response.ok) {
-      const errorBody = await readJsonSafe<{ error?: string; details?: Array<{ path?: Array<string | number>; message?: string }> }>(response, null)
-      throw new Error(formatWorkflowValidationError(errorBody, t('workflows.errors.createFailed')))
-    }
-
-    router.push('/backend/definitions')
-    router.refresh()
-  }
-
-  const fields = React.useMemo(() => createFieldDefinitions(t), [t])
-
-  const formGroups = React.useMemo(
-    () => createFormGroups(t, StepsEditor, TransitionsEditor),
-    [t]
-  )
+  React.useEffect(() => {
+    router.replace(WORKFLOW_STUDIO_CREATE_HREF)
+  }, [router])
 
   return (
     <Page>
       <PageBody>
-        <Alert status="information" icon={<Zap aria-hidden="true" />} className="mb-6">
-          <AlertTitle>{t('workflows.create.eventTriggersTitle')}</AlertTitle>
-          <AlertDescription>
-            {t('workflows.create.eventTriggersDescription')}
-          </AlertDescription>
-        </Alert>
-        <CrudForm
-          title={t('workflows.create.title')}
-          titleHeadingLevel={1}
-          backHref="/backend/definitions"
-          schema={workflowDefinitionFormSchema}
-          fields={fields}
-          initialValues={defaultFormValues}
-          onSubmit={handleSubmit}
-          cancelHref="/backend/definitions"
-          groups={formGroups}
-          submitLabel={t('workflows.form.create')}
-        />
+        <LoadingMessage label={t('workflows.redirect.toStudio', 'Opening the workflow studio…')} />
       </PageBody>
     </Page>
   )