[#91727] Add Load more pattern to Workspace Workflows approval list#55
[#91727] Add Load more pattern to Workspace Workflows approval list#55elirangoshen wants to merge 3 commits into
Conversation
…91727) Render approval workflows in batches of WORKFLOW_APPROVALS_INITIAL_BATCH (5) with a "Load more" card that reveals the next batch and shows the remaining count (capped at 5). Search bypasses pagination and shows all matches. The card matches the Figma spec: bordered row with whole-card row-hover, a small CircularArrowBackwards icon (12px) + "Load X more" label in textSupporting, 8px radius to match the other workflow cards. Adds the workflowsPage.loadMoreWorkflows string to all locales and a UI test covering the batch, reveal, hide, and search-bypass behaviors. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…#91727) Per product decision, the "Load more" button reveals every remaining workflow at once (with the full remaining count in the label) instead of paging 5 at a time. Updates the UI test to match. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
Warning Review limit reached
More reviews will be available in 23 minutes and 14 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits. 🚦 How do rate limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughAdds "Load more" pagination to the workspace workflows approval list. A new ChangesWorkflow approvals load-more pagination
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
@codex review |
|
To use Codex here, create a Codex account and connect to github. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx (1)
339-343: ⚡ Quick winMemoize
displayedWorkflowsbefore using it inoptionItemsdependencies.
displayedWorkflowsis rebuilt on every render (especially via.slice(...)), sooptionItemsgets recomputed even when source data is unchanged. Wrapping the derived pagination values inuseMemowill preserve memoization and avoid unnecessary work in this large tree.Suggested diff
- const isSearchingWorkflows = workflowSearchInput.length > 0; - const displayedWorkflows = isWorkflowListExpanded || isSearchingWorkflows ? searchFilteredWorkflows : searchFilteredWorkflows.slice(0, CONST.WORKFLOW_APPROVALS_INITIAL_BATCH); - const hiddenWorkflowsCount = searchFilteredWorkflows.length - displayedWorkflows.length; + const isSearchingWorkflows = workflowSearchInput.length > 0; + const displayedWorkflows = useMemo( + () => + isWorkflowListExpanded || isSearchingWorkflows + ? searchFilteredWorkflows + : searchFilteredWorkflows.slice(0, CONST.WORKFLOW_APPROVALS_INITIAL_BATCH), + [isWorkflowListExpanded, isSearchingWorkflows, searchFilteredWorkflows], + ); + const hiddenWorkflowsCount = useMemo( + () => searchFilteredWorkflows.length - displayedWorkflows.length, + [searchFilteredWorkflows.length, displayedWorkflows.length], + );Also applies to: 772-803
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx` around lines 339 - 343, The variable `displayedWorkflows` is being recalculated on every render due to the `.slice()` operation, causing `optionItems` to be unnecessarily recomputed when included in its dependency array. Wrap the pagination logic that creates `displayedWorkflows` and `hiddenWorkflowsCount` in a `useMemo` hook with dependencies on `isSearchingWorkflows`, `isWorkflowListExpanded`, `searchFilteredWorkflows`, and `CONST.WORKFLOW_APPROVALS_INITIAL_BATCH`. This will preserve the memoization chain and prevent unnecessary recalculations in the component tree.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@tests/ui/WorkspaceWorkflowsLoadMoreTest.tsx`:
- Line 159: The negative assertions at line 159 and line 195 are too narrow,
checking only for the absence of the specific label loadMoreLabel(BATCH). If a
load-more card appears with a different count, these assertions will still pass
incorrectly. Strengthen these assertions to check for the absence of the
load-more card element itself rather than checking for one specific label text.
Use a query selector that targets the card container or a test ID that uniquely
identifies the load-more card, ensuring the test fails if any version of the
load-more card is visible regardless of its label.
---
Nitpick comments:
In `@src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx`:
- Around line 339-343: The variable `displayedWorkflows` is being recalculated
on every render due to the `.slice()` operation, causing `optionItems` to be
unnecessarily recomputed when included in its dependency array. Wrap the
pagination logic that creates `displayedWorkflows` and `hiddenWorkflowsCount` in
a `useMemo` hook with dependencies on `isSearchingWorkflows`,
`isWorkflowListExpanded`, `searchFilteredWorkflows`, and
`CONST.WORKFLOW_APPROVALS_INITIAL_BATCH`. This will preserve the memoization
chain and prevent unnecessary recalculations in the component tree.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 572b2639-d465-4b2d-8287-d425efb56d06
📒 Files selected for processing (13)
src/CONST/index.tssrc/languages/de.tssrc/languages/en.tssrc/languages/es.tssrc/languages/fr.tssrc/languages/it.tssrc/languages/ja.tssrc/languages/nl.tssrc/languages/pl.tssrc/languages/pt-BR.tssrc/languages/zh-hans.tssrc/pages/workspace/workflows/WorkspaceWorkflowsPage.tsxtests/ui/WorkspaceWorkflowsLoadMoreTest.tsx
Use queryByRole(button, /load .* more/i) instead of the exact-count label so the absence checks fail if a load-more card appears with any count. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 participant
Explanation of Change
Adds a Load more button to the Approvals list on Workspace → Workflows (
WorkspaceWorkflowsPage). Workspaces with many custom approval workflows previously rendered every rich workflow card at once (member pills, approver chain, limits), causing a slow/janky initial render and burying the Add approval workflow button under heavy scrolling.What changed:
CONST.WORKFLOW_APPROVALS_INITIAL_BATCH(5) workflow cards.WorkflowsLoadMoreCardmatches the approved Figma spec: a bordered row where the whole card is the tap target and gets therow-hoverstate, with a 12pxCircularArrowBackwardsicon + "Load X more" label intextSupporting.workflowsPage.loadMoreWorkflowscopy to all locales (English string verbatim from Figma; other locales generated).tests/ui/WorkspaceWorkflowsLoadMoreTest.tsx) covering the initial batch, the button gate (>5), reveal-all on press, and the search-bypass behavior.No API or data-layer changes — workflow data is already client-side (derived from
policy.employeeListviaWorkflowUtils.convertPolicyEmployeesToApprovalWorkflows); this is purely UI pagination.Fixed Issues
$ Expensify#91727
PROPOSAL:
Tests
Offline tests
Workflow data is fully client-side, so the pattern behaves identically offline.
QA Steps
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)Avatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
Summary by CodeRabbit