Update the Workflows page so it reflects Gusto's approval rules without becoming the source of truth for them. The HR page remains the place where the admin configures approval mode and final approver.
Parent Issues: Expensify/App#85850, Expensify/Expensify#591910
Design Doc Section: Detailed — Update the Workflows page UI to reflect Gusto + Define approval-table behavior + Config navigation
Files to update
src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx — Add the Gusto-aware toggle state, the Configure via Gusto link, the Gusto-specific lock modal, and the mode-based approval-table behavior.
src/components/ApprovalWorkflowSection.tsx — Add a simple read-only / badge presentation for approval rows that come from Gusto.
src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsEditPage.tsx — Block or redirect editing when the workspace is in Gusto Basic or Manager mode.
src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsCreatePage.tsx — Block or redirect workflow creation in read-only Gusto modes.
Key implementation details
Toggle behavior (all modes):
- Whenever Gusto is connected, the approvals toggle renders as on and locked.
- Use the existing
ToggleSettingOptionRow pattern: showLockIcon plus disabledAction.
- The
disabledAction opens a Gusto-specific "Not so fast..." modal explaining that approval configuration is managed from the HR page. Reuse the existing confirm/decision modal pattern with Gusto-specific copy.
- Render a
Configure via Gusto link that navigates back to the HR page.
Basic mode:
- Approvals toggle on and locked. Table is read-only.
- Render the single resulting approver chain from Gusto, label it
(from Gusto), hide Add approval workflow.
Manager mode:
- Approvals toggle on and locked. Table is read-only.
- Render the synced manager-based chains, label each row
(from Gusto), hide Add approval workflow.
Custom mode:
- Approvals toggle still on and locked (approval mode is still controlled from the Gusto connection card).
- But the approval table is fully editable: rows navigate to edit,
Add approval workflow stays available, no read-only guard.
Deep-link protection:
- If someone deep-links to the create/edit routes while in Basic or Manager mode, block that flow and send them back to the Workflows summary or HR page.
Navigation copy:
- Basic mode: "these approvals come from Gusto."
- Manager mode: "these approval chains are synced from Gusto."
- Custom mode: still mentions that approval mode changes happen on the HR page, even though workflows are editable.
- The Workflows page should not allow changing approval mode or final approver.
Issue Owner
Current Issue Owner: @shubham1206agra
Update the Workflows page so it reflects Gusto's approval rules without becoming the source of truth for them. The HR page remains the place where the admin configures approval mode and final approver.
Parent Issues: Expensify/App#85850, Expensify/Expensify#591910
Design Doc Section: Detailed — Update the Workflows page UI to reflect Gusto + Define approval-table behavior + Config navigation
Files to update
src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx— Add the Gusto-aware toggle state, theConfigure via Gustolink, the Gusto-specific lock modal, and the mode-based approval-table behavior.src/components/ApprovalWorkflowSection.tsx— Add a simple read-only / badge presentation for approval rows that come from Gusto.src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsEditPage.tsx— Block or redirect editing when the workspace is in Gusto Basic or Manager mode.src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsCreatePage.tsx— Block or redirect workflow creation in read-only Gusto modes.Key implementation details
Toggle behavior (all modes):
ToggleSettingOptionRowpattern:showLockIconplusdisabledAction.disabledActionopens a Gusto-specific "Not so fast..." modal explaining that approval configuration is managed from the HR page. Reuse the existing confirm/decision modal pattern with Gusto-specific copy.Configure via Gustolink that navigates back to the HR page.Basic mode:
(from Gusto), hideAdd approval workflow.Manager mode:
(from Gusto), hideAdd approval workflow.Custom mode:
Add approval workflowstays available, no read-only guard.Deep-link protection:
Navigation copy:
Issue Owner
Current Issue Owner: @shubham1206agra