Skip to content

ux(recommendations): inline Plan button deep-links into Create Plan modal (closes #120)#845

Merged
cristim merged 1 commit into
feat/multicloud-web-frontendfrom
fix/120-wave14
Jun 3, 2026
Merged

ux(recommendations): inline Plan button deep-links into Create Plan modal (closes #120)#845
cristim merged 1 commit into
feat/multicloud-web-frontendfrom
fix/120-wave14

Conversation

@cristim
Copy link
Copy Markdown
Member

@cristim cristim commented May 28, 2026

Summary

  • Adds an inline Plan button to each recommendation row in the Opportunities table
  • Clicking the button opens the Create Purchase Plan modal pre-seeded with that row's recommendation, eliminating the select-then-scroll-then-click flow
  • Permission gate mirrors the bulk Create Plan button: only visible when the session has create:plans (admin and user roles; hidden for readonly)

Implementation

  • buildVariantRowMarkup emits a <button class="rec-plan-btn" data-rec-id="..." data-action="plan">Plan</button> inside the checkbox cell when canAccess('create', 'plans') is true; empty string otherwise (fail-closed)
  • renderRecommendationsList wires a click handler on .rec-plan-btn buttons that calls openCreatePlanFromBottomBox([rec]) - the same function used by the bulk Create Plan button, scoped to one rec
  • data-action="plan" attribute ensures the row-click selection handler skips button clicks (existing target.closest('[data-action]') guard)
  • e.stopPropagation() prevents the click from bubbling to the row handler

Test plan

  • tsc --noEmit clean
  • 8/8 tests pass in recommendations-permissions.test.ts (5 existing + 3 new)
  • 332/332 total tests pass across all three recommendations test files
  • New tests added:
    • admin role sees a rec-plan-btn when rows are rendered
    • readonly role has no rec-plan-btn buttons (gated)
    • clicking the button calls openCreatePlanModal with the correct rec pre-seeded

@cristim cristim added triaged Item has been triaged priority/p3 Polish / idea / may never ship severity/low Minor harm urgency/eventually No deadline impact/few Limited audience effort/m Days type/feat New capability labels May 28, 2026
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 28, 2026 •
edited
Loading

Warning

Review limit reached

@cristim, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 24 minutes and 15 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 486f9840-ed39-4cbc-9bea-5a8c3aea10f0

📥 Commits

Reviewing files that changed from the base of the PR and between f3920e4 and cfd3b4a.

📒 Files selected for processing (2)
  • frontend/src/__tests__/recommendations-permissions.test.ts
  • frontend/src/recommendations.ts
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/120-wave14

Comment @coderabbitai help to get the list of available commands and usage tips.

@cristim
Copy link
Copy Markdown
Member Author

cristim commented May 28, 2026

@coderabbitai review

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 28, 2026

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@cristim
Copy link
Copy Markdown
Member Author

cristim commented May 30, 2026

@coderabbitai full review

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 30, 2026

✅ Actions performed

Full review triggered.

@cristim
Copy link
Copy Markdown
Member Author

cristim commented Jun 1, 2026

@coderabbitai review

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Jun 1, 2026

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@cristim
ux(recommendations): inline Plan button deep-links into Create Plan m…
cfd3b4a 
…odal (closes #120)

Add a per-row "Plan" button in the checkbox column of each recommendation
row. Clicking it calls openCreatePlanFromBottomBox([rec]) so the Create
Purchase Plan modal opens pre-seeded with that single recommendation.
Permission gate mirrors the bulk Create Plan button (create:plans). The
button carries data-action="plan" so the row-click selection handler
skips it. Tests: button visible for admin, absent for readonly, click
pre-seeds the modal.
@cristim
Copy link
Copy Markdown
Member Author

cristim commented Jun 3, 2026

Rebased on feat/multicloud-web-frontend. Resolved an additive import conflict in frontend/src/tests/recommendations-permissions.test.ts (kept base's ADMINISTRATORS_GROUP_ID import; dropped a duplicate import * as api that base already provides). Verified: npm test -- recommendations-permissions (17/17 pass) and npm run build green.

@coderabbitai review

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Jun 3, 2026 •
edited
Loading

@cristim: Noted on the rebase — keeping the base's ADMINISTRATORS_GROUP_ID import and dropping the duplicate import * as api is the right call. I'll kick off a fresh incremental review now.

🧠 Learnings used 
Learnt from: cristim
Repo: LeanerCloud/CUDly PR: 0
File: :0-0
Timestamp: 2026-05-05T15:44:54.463Z
Learning: In the LeanerCloud/CUDly repository, when a CodeRabbit review flags something as "outside-diff" that was already implemented in an earlier commit of the same PR, it is likely a stale-snapshot artifact where the review diff was generated against a pre-fix view. The inline comment convention `(CR pass on PR #<number> Finding N)` is used by the maintainer (cristim) to mark lines that were changed in direct response to a prior CodeRabbit review pass.
✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@cristim
Copy link
Copy Markdown
Member Author

cristim commented Jun 3, 2026

@coderabbitai review

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Jun 3, 2026 •
edited
Loading

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@cristim cristim merged commit df82330 into feat/multicloud-web-frontend Jun 3, 2026
5 checks passed
@cristim cristim deleted the fix/120-wave14 branch June 3, 2026 20:38
This was referenced Jun 3, 2026
Merged
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

effort/m Days impact/few Limited audience priority/p3 Polish / idea / may never ship severity/low Minor harm triaged Item has been triaged type/feat New capability urgency/eventually No deadline

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@cristim