fix: add workflow form page navigation

src/components/item-form/WorkflowForm.tsx

@@ -22,6 +22,7 @@ import type { ItemFormFields } from '@/components/item-form/useItemFormFields'
 import { useWorkflowFormFields } from '@/components/item-form/useWorkflowFormFields'
 import type { WorkflowFormPage } from '@/components/item-form/useWorkflowFormPage'
 import { useWorkflowStepFormFields } from '@/components/item-form/useWorkflowStepFormFields'
+import { WorkflowFormNavigation } from '@/components/item-form/WorkflowFormNavigation'
 import { WorkflowStepPreview } from '@/components/item-form/WorkflowStepPreview'
 import { WorkflowTitle } from '@/components/item-form/WorkflowTitle'
 import type { Workflow, WorkflowInput } from '@/data/sshoc/api/workflow'
@@ -74,6 +75,7 @@ export function WorkflowForm(props: WorkflowFormProps): JSX.Element {
   ) {
     switch (page.type) {
       case 'workflow':
+        delete values['__draft__']
         delete values['__submitting__']
         done?.()
         setPage({ type: 'steps' })
@@ -82,6 +84,7 @@ export function WorkflowForm(props: WorkflowFormProps): JSX.Element {
         onSubmit(values, form, done)
         break
       case 'step':
+        delete values['__draft__']
         delete values['__submitting__']
         done?.()
         setPage({ type: 'steps' })
@@ -107,6 +110,7 @@ export function WorkflowForm(props: WorkflowFormProps): JSX.Element {
 
   return (
     <Form initialValues={initialValues} name={name} onSubmit={onSubmitPage} validate={_validate}>
+      <WorkflowFormNavigation onBeforeSubmit={onBeforeSubmit} page={page} setPage={setPage} />
       {page.type === 'workflow' ? (
         <WorkflowFormSections onBeforeSubmit={onBeforeSubmit} onCancel={onCancel} />
       ) : null}
@@ -275,9 +279,9 @@ function WorkflowStepFormSections(props: WorkflowStepFormSectionsProps): JSX.Ele
   const { index, onCancel } = props
 
   const { t } = useI18n<'authenticated' | 'common'>()
-  const name = `composedOf[${index}]`
   const form = useForm<WorkflowFormValues>()
-  const formFields = useWorkflowStepFormFields(name)
+  const name = `composedOf[${index}]`
+  const formFields = useWorkflowStepFormFields(name + '.')
 
   function onBeforeSubmit() {
     props.onBeforeSubmit?.(form)

src/components/item-form/WorkflowFormNavigation.module.css

+.container {
+  display: flex;
+  gap: var(--space-12);
+  align-items: center;
+  justify-content: flex-end;
+  margin-block-end: var(--space-8);
+
+  & button .link {
+    display: flex;
+    gap: var(--space-3);
+    align-items: center;
+
+    & .circle {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--size-8);
+      height: var(--size-8);
+      border: 1px solid var(--color-primary-600);
+      border-radius: 100%;
+      background-color: var(--color-neutral-50);
+      color: var(--color-primary-600);
+      transition-timing-function: var(--transition-timing-function);
+      transition-duration: var(--transition-duration);
+      transition-property: var(--transition-property);
+    }
+
+    &:hover .circle {
+      background-color: var(--color-primary-600);
+      color: var(--color-neutral-0);
+    }
+  }
+
+  & button:disabled .link .circle {
+    background-color: var(--color-primary-600);
+    color: var(--color-neutral-0);
+  }
+}

src/components/item-form/WorkflowFormNavigation.tsx

+import type { FormApi } from 'final-form'
+import { Fragment } from 'react'
+import { useForm } from 'react-final-form'
+
+import type { WorkflowFormPage } from '@/components/item-form/useWorkflowFormPage'
+import type { WorkflowFormValues } from '@/components/item-form/WorkflowForm'
+import css from '@/components/item-form/WorkflowFormNavigation.module.css'
+import { FormButtonLink } from '@/lib/core/form/FormButtonLink'
+import { useI18n } from '@/lib/core/i18n/useI18n'
+
+export interface WorkflowFormNavigationProps {
+  onBeforeSubmit?: (form: FormApi<WorkflowFormValues>) => void
+  page: WorkflowFormPage
+  setPage: (page: WorkflowFormPage) => void
+}
+
+export function WorkflowFormNavigation(props: WorkflowFormNavigationProps): JSX.Element {
+  const { page, setPage } = props
+
+  const { t } = useI18n<'authenticated' | 'common'>()
+  const form = useForm<WorkflowFormValues>()
+
+  if (page.type === 'step') {
+    return <Fragment />
+  }
+
+  function onBeforeSubmit() {
+    props.onBeforeSubmit?.(form)
+  }
+
+  function onNavigateBackToWorkflow() {
+    setPage({ type: 'workflow' })
+  }
+
+  return (
+    <nav
+      aria-label={t(['authenticated', 'forms', 'workflow-form-page-navigation'])}
+      className={css['container']}
+    >
+      <FormButtonLink isDisabled={page.type === 'workflow'} onPress={onNavigateBackToWorkflow}>
+        <div className={css['link']}>
+          <span aria-hidden className={css['circle']}>
+            1
+          </span>
+          {t(['common', 'item-categories', 'workflow', 'one'])}
+        </div>
+      </FormButtonLink>
+      <FormButtonLink isDisabled={page.type === 'steps'} onPress={onBeforeSubmit} type="submit">
+        <div className={css['link']}>
+          <span aria-hidden className={css['circle']}>
+            2
+          </span>
+          {t(['common', 'item-categories', 'step', 'other'])}
+        </div>
+      </FormButtonLink>
+    </nav>
+  )
+}

src/components/item-form/WorkflowReviewForm.tsx

@@ -24,6 +24,7 @@ import type { ItemFormFields } from '@/components/item-form/useItemFormFields'
 import { useWorkflowFormFields } from '@/components/item-form/useWorkflowFormFields'
 import type { WorkflowFormPage } from '@/components/item-form/useWorkflowFormPage'
 import { useWorkflowStepFormFields } from '@/components/item-form/useWorkflowStepFormFields'
+import { WorkflowFormNavigation } from '@/components/item-form/WorkflowFormNavigation'
 import { WorkflowStepPreview } from '@/components/item-form/WorkflowStepPreview'
 import { WorkflowTitle } from '@/components/item-form/WorkflowTitle'
 import type { ItemsDiff } from '@/data/sshoc/api/item'
@@ -117,8 +118,9 @@ export function WorkflowReviewForm(props: WorkflowReviewFormProps): JSX.Element
       validate={_validate}
     >
       <ReviewFormMetadata diff={diff}>
+        <WorkflowFormNavigation onBeforeSubmit={onBeforeSubmit} page={page} setPage={setPage} />
         {page.type === 'workflow' ? (
-          <WorkflowFormSections onCancel={onCancel} onBeforeSubmit={onBeforeSubmit} />
+          <WorkflowFormSections onBeforeSubmit={onBeforeSubmit} onCancel={onCancel} />
         ) : null}
         {page.type === 'steps' ? (
           <FormSections>
@@ -132,7 +134,11 @@ export function WorkflowReviewForm(props: WorkflowReviewFormProps): JSX.Element
           </FormSections>
         ) : null}
         {page.type === 'step' ? (
-          <WorkflowStepFormSections index={page.index} onCancel={onCancelStep} />
+          <WorkflowStepFormSections
+            index={page.index}
+            onBeforeSubmit={onBeforeSubmit}
+            onCancel={onCancelStep}
+          />
         ) : null}
       </ReviewFormMetadata>
     </Form>
@@ -140,8 +146,8 @@ export function WorkflowReviewForm(props: WorkflowReviewFormProps): JSX.Element
 }
 
 interface WorkflowFormSectionsProps {
-  onCancel: () => void
   onBeforeSubmit?: (form: FormApi<WorkflowFormValues>) => void
+  onCancel: () => void
 }
 
 function WorkflowFormSections(props: WorkflowFormSectionsProps): JSX.Element {
@@ -275,6 +281,7 @@ function WorkflowStepsFormSection(props: WorkflowStepsFormSectionProps): JSX.Ele
 
 interface WorkflowStepFormSectionsProps {
   index: number
+  onBeforeSubmit?: (form: FormApi<WorkflowFormValues>) => void
   onCancel: () => void
 }
 
@@ -282,8 +289,13 @@ function WorkflowStepFormSections(props: WorkflowStepFormSectionsProps): JSX.Ele
   const { index, onCancel } = props
 
   const { t } = useI18n<'authenticated' | 'common'>()
+  const form = useForm<WorkflowFormValues>()
   const name = `composedOf[${index}]`
-  const formFields = useWorkflowStepFormFields(name)
+  const formFields = useWorkflowStepFormFields(name + '.')
+
+  function onBeforeSubmit() {
+    props.onBeforeSubmit?.(form)
+  }
 
   return (
     <FormSections>
@@ -296,7 +308,9 @@ function WorkflowStepFormSections(props: WorkflowStepFormSectionsProps): JSX.Ele
         <FormButtonLink onPress={onCancel}>
           {t(['authenticated', 'controls', 'cancel'])}
         </FormButtonLink>
-        <FormButton type="submit">{t(['authenticated', 'controls', 'save'])}</FormButton>
+        <FormButton onPress={onBeforeSubmit} type="submit">
+          {t(['authenticated', 'controls', 'save'])}
+        </FormButton>
       </FormControls>
     </FormSections>
   )

src/components/item-form/WorkflowTitle.module.css

 .workflow-title {
+  margin-block-end: var(--space-4);
   color: var(--color-heading);
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-7);

src/dictionaries/authenticated/en.ts

@@ -65,6 +65,7 @@ export const dictionary: Dictionary = {
     'add-workflow-step': 'Add step',
     'edit-workflow-step': 'Edit step {{position}}',
     'remove-workflow-step': 'Remove step {{position}}',
+    'workflow-form-page-navigation': 'Navigate between workflow details and workflow steps',
   },
   fields: {
     label: {

src/dictionaries/authenticated/index.ts

@@ -82,6 +82,7 @@ export interface Dictionary {
     'add-workflow-step': string
     'edit-workflow-step': string
     'remove-workflow-step': string
+    'workflow-form-page-navigation': string
   }
   fields: {
     label: Field