social-media/docs/TASKS/approval-workflow/006-multi-level-workflow-editor-ui.md

Task: Multi-level workflow editor UI

Feature

docs/FEATURES/approval-workflow.md

Goal

Add a workspace settings workflow editor that lets managers/admins configure multi-level approval steps.

Context

The workspace settings screen currently saves the approval mode and simple options, but Multi-level has no step editor. Users can select the mode without any way to define who approves each step.

Scope

• Add a feature-owned workflow editor component under frontend/src/features/workspaces/components/.
• Show the editor only when approval mode is Multi-level.
• Allow users to add, remove, reorder, and edit approval steps.
• For each step, support:
  • display name
  • target type: role, membership, or member
  • target value selector appropriate to the selected type
  • required approver count
• Load available workspace members from the existing workspace members API.
• Use existing workspace store/API patterns to save the full workflow configuration.
• Show inline validation before save for missing names, missing targets, and invalid required approver count.
• Keep the existing simple approval options in the same workflow settings tab.
• Update English and French locale strings.

Constraints

• Do not implement the backend in this task; depend on the API contract from task 005.
• Do not implement approval execution, recalculation, reminders, comments, reopening, or magic links in this task.
• Keep feature-owned code under frontend/src/features/workspaces.
• Use frontend/src/config.js for runtime config if any runtime config is needed.
• Preserve the shared Axios client in frontend/src/plugins/api.js.
• Do not create a marketing or explanatory page; this is an app settings editor.

Likely Files

• frontend/src/features/workspaces/views/WorkspaceSettingsView.vue
• frontend/src/features/workspaces/components/ApprovalWorkflowEditor.vue
• frontend/src/features/workspaces/stores/workspaceStore.js
• frontend/src/locales/en.json
• frontend/src/locales/fr.json
• frontend/src/api/schema.d.ts

Done When

• Selecting Multi-level reveals an approval step editor.
• Users can add, remove, reorder, and edit steps.
• Role, membership, and member target selectors are available.
• The editor saves and reloads persisted workflow configuration.
• UI prevents saving invalid multi-level configurations.
• Frontend build passes.

Validation Commands

cd frontend
npm run build