Background
The Workflows page today renders Submissions, Approvals, Payments, and Advanced as stacked sections on a single scrolling page. For workspaces with many approval workflows, the Approvals section alone can run long, as each workflow renders as its own card with expenses-from/members and an Edit action. This has the effect of pushing Payments and Advanced far down the page, such that customers with a lot of approval workflows have to scroll extensively just to reach payment or advanced settings.
Because accessing payment settings in particular is a source of customer friction, we'll update Workflows to the same tab-based pattern used elsewhere in the workspace editor (e.g. Rules). That'll help each section be reachable directly regardless of how many approval workflows exist.
This is a pure cometic restructure: no changes to the underlying settings, toggles, copy, or approval-workflow configuration in this issue.
Scope
- Convert the
Workflows page from a single stacked-section layout to a tabbed layout.
- Add four tabs:
Submissions, Approvals, Payments, Advanced, matching the existing section names and order. Submissions is the default/first tab.
- Each tab shows only its own section's content; no cross-tab scrolling.
- No changes to the underlying settings, toggles, or approval-workflow configuration — this is a re-presentation, not new behavior.
Product and design details
Tabs
The Workflows page header now carries four tabs: Submissions, Approvals, Payments, and Advanced, each with its existing icon (paper plane, thumbs-up, money bag, wrench respectively). Submissions is the default/first tab.
Submissions tab
Shows the existing Submissions card unchanged: the enable toggle, description copy, and Frequency row (e.g. "Daily") with its chevron into the deeper configuration.
Approvals tab
Shows the existing Approvals card unchanged: the enable toggle, description copy, the informational default-workflow note, each approval workflow's Expenses from / Members rows with its Edit action, and the + Add approval workflow action at the bottom. Because this section moves to its own tab, workspaces with many approval workflows no longer push Payments and Advanced further down the page — a user only scrolls within the Approvals tab's own content.
Payments tab
Shows the existing Payments card unchanged: the enable toggle, description copy, and + Add bank account action.
Advanced tab
Shows the existing Advanced card unchanged: Prevent self-approvals, Auto-approve compliant reports, and Auto-pay approved reports (locked until payments are configured), each with their toggle and description.
Open question
- Deep-linking: Today, links into
Workflows (from notifications, other settings pages, onboarding flows, etc.) land on the single scrolling page. With tabs, some of those links may need to be updated to land on the specific relevant tab rather than defaulting to Submissions. We'll need to audit of everything that links to Workflows as part of this initiative, so I'm flagging that now as something to look into.
Examples
- A workspace with a single default approval workflow opens
Workflows: the Approvals tab shows just that one workflow card, no scrolling needed.
- A workspace with a dozen approval workflows opens
Workflows and wants to configure Payments: they tap the Payments tab directly, rather than scrolling past all approval workflow cards.
- A workspace navigates between
Submissions, Approvals, Payments, and Advanced using the tabs; each tab loads only its own section's settings.
Assigning to @Krishna2323 and @situchan so that we can pursue this change using the rules revamp beta and more more quickly without customer impact yet.
Issue Owner
Current Issue Owner: @Krishna2323
Background
The
Workflowspage today rendersSubmissions,Approvals,Payments, andAdvancedas stacked sections on a single scrolling page. For workspaces with many approval workflows, theApprovalssection alone can run long, as each workflow renders as its own card with expenses-from/members and anEditaction. This has the effect of pushingPaymentsandAdvancedfar down the page, such that customers with a lot of approval workflows have to scroll extensively just to reach payment or advanced settings.Because accessing payment settings in particular is a source of customer friction, we'll update
Workflowsto the same tab-based pattern used elsewhere in the workspace editor (e.g.Rules). That'll help each section be reachable directly regardless of how many approval workflows exist.This is a pure cometic restructure: no changes to the underlying settings, toggles, copy, or approval-workflow configuration in this issue.
Scope
Workflowspage from a single stacked-section layout to a tabbed layout.Submissions,Approvals,Payments,Advanced, matching the existing section names and order.Submissionsis the default/first tab.Product and design details
Tabs
The
Workflowspage header now carries four tabs:Submissions,Approvals,Payments, andAdvanced, each with its existing icon (paper plane, thumbs-up, money bag, wrench respectively).Submissionsis the default/first tab.Submissions tab
Shows the existing
Submissionscard unchanged: the enable toggle, description copy, andFrequencyrow (e.g. "Daily") with its chevron into the deeper configuration.Approvals tab
Shows the existing
Approvalscard unchanged: the enable toggle, description copy, the informational default-workflow note, each approval workflow'sExpenses from/Membersrows with itsEditaction, and the+ Add approval workflowaction at the bottom. Because this section moves to its own tab, workspaces with many approval workflows no longer pushPaymentsandAdvancedfurther down the page — a user only scrolls within theApprovalstab's own content.Payments tab
Shows the existing
Paymentscard unchanged: the enable toggle, description copy, and+ Add bank accountaction.Advanced tab
Shows the existing
Advancedcard unchanged:Prevent self-approvals,Auto-approve compliant reports, andAuto-pay approved reports(locked until payments are configured), each with their toggle and description.Open question
Workflows(from notifications, other settings pages, onboarding flows, etc.) land on the single scrolling page. With tabs, some of those links may need to be updated to land on the specific relevant tab rather than defaulting toSubmissions. We'll need to audit of everything that links toWorkflowsas part of this initiative, so I'm flagging that now as something to look into.Examples
Workflows: theApprovalstab shows just that one workflow card, no scrolling needed.Workflowsand wants to configurePayments: they tap thePaymentstab directly, rather than scrolling past all approval workflow cards.Submissions,Approvals,Payments, andAdvancedusing the tabs; each tab loads only its own section's settings.Assigning to @Krishna2323 and @situchan so that we can pursue this change using the rules revamp beta and more more quickly without customer impact yet.
Issue Owner
Current Issue Owner: @Krishna2323