fix(frontend): New Session Context: Keyup/KeyDown event listeners, fix repo "badge X" does not work

[bobbravo2]

Summary

Fixes RHOAIENG-55732 — UX Bug: Adding context to new conversations does not allow keyup/keydown, and has a problem with deleting added contexts

1. Repo badge X (remove) button does not work

• The remove (X) button on pending repo badges in the new session page (/projects/[name]/new) was non-functional — clicks were silently swallowed
• Root cause: The Shadcn Badge component applies [&>svg]:pointer-events-none to all direct child SVGs, which blocked the <X> icon's onClick handler from ever firing
• Fix: Wrap the <X> SVG in a <button> element so the click target is an HTML element unaffected by the pointer-events rule. Added e.stopPropagation() to prevent tooltip interference and aria-label for accessibility

2. Input history dropdown cannot be reopened with arrow keys

• After dismissing the history dropdown with Escape, pressing ArrowUp/ArrowDown did not reopen it
• Root cause: The handleKeyDown handler only processed arrow keys when the dropdown was already open
• Fix: Refactor InputWithHistory to use Radix Popover for proper layering, add ArrowDown/ArrowUp handlers that reopen the dropdown when closed, and wire up ARIA attributes for accessibility

Acceptance Criteria

• Clicking the X button on a repo badge removes it
• ArrowDown/ArrowUp reopen the history dropdown after Escape
• Unit tests cover both scenarios

Test plan

• Unit test added: verifies badge appears after adding a repo and disappears after clicking the remove button
• Unit tests added: ArrowDown reopens dropdown and selects first item; ArrowUp reopens and selects last item
• All NewSessionView tests pass
• All InputWithHistory tests pass
• Manual: navigate to /projects/<name>/new, add a repo via the + menu, confirm the X button on the badge removes it
• Manual: type in prompt input, press Escape, then ArrowDown — dropdown should reopen

Made with Cursor

[coderabbitai]

Warning

Rate limit exceeded

@bobbravo2 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 5 minutes and 42 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 5 minutes and 42 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, 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 have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 5d81f450-2d29-4211-95e1-fcf6b756c99b

📥 Commits

Reviewing files that changed from the base of the PR and between 961b373 and dcab14e.

📒 Files selected for processing (1)

• components/frontend/src/app/projects/[name]/sessions/[sessionName]/components/__tests__/new-session-view.test.tsx

Walkthrough

Adds tests for repository-add UI and input history behavior, replaces an inline icon click handler with an accessible <button> for removing pending repos, and refactors input-with-history to use a Popover with expanded keyboard/ARIA behavior.

Changes

Cohort / File(s)	Summary
New/Updated tests: new-session view components/frontend/src/app/projects/[name]/sessions/[sessionName]/components/__tests__/new-session-view.test.tsx	Added a Vitest mock for AddContextModal that renders a clickable element to invoke onAddRepository, and a test that adds a repo, asserts a pending repo badge shows platform, clicks Remove platform, and verifies the badge is removed.
Component change: pending-repo removal components/frontend/src/app/projects/[name]/sessions/[sessionName]/components/new-session-view.tsx	Replaced inline icon click handler with a semantic <button type="button"> that calls e.stopPropagation() then removePendingRepo(repo.url), added aria-label, and moved cursor-pointer to the button.
New tests: AddContextModal history components/frontend/src/app/projects/[name]/sessions/[sessionName]/components/modals/__tests__/add-context-modal.test.tsx	Added tests that load repository URL suggestions from localStorage (form-input-history:add-context:url), verify suggestion rendering on input focus, navigate suggestions with Arrow keys/Enter/Escape, and assert onAddRepository receives the normalized URL and expected args.
Input-with-history behavior & tests components/frontend/src/components/input-with-history.tsx, components/frontend/src/components/__tests__/input-with-history.test.tsx	Replaced manual dropdown DOM with Popover/PopoverAnchor/PopoverContent, introduced isDropdownOpen derived state, enhanced ArrowUp/ArrowDown behavior to open dropdown and initialize selectedIndex, added ARIA attributes and autoComplete handling; added tests asserting Arrow key reopen/select behavior after Escape.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, detailing two UX bugs and their fixes with root causes, acceptance criteria, and test coverage.
Title check	✅ Passed	The title describes fixing the badge X button click issue, which aligns with the PR's main objective of making the remove button functional. However, the title is somewhat vague with 'Keyup/KeyDown event listeners' which relates to secondary improvements rather than the primary badge fix.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/badge-remove-button-click

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@components/frontend/src/app/projects/`[name]/sessions/[sessionName]/components/__tests__/new-session-view.test.tsx:
- Around line 43-49: The mock for AddContextModal uses an incorrect
onAddRepository signature; update the mock component (AddContextModal) so its
prop type for onAddRepository matches the real component: (url: string, branch:
string, autoPush?: boolean) => Promise<void>, and ensure the mock's onClick
calls onAddRepository with appropriate arguments (e.g., url and branch) and
returns a resolved Promise (Promise.resolve()) so tests reflect the real async
contract.

🪄 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: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: cc5fdeac-becc-4cf0-a5c3-d481c143bf7a

📥 Commits

Reviewing files that changed from the base of the PR and between 2bf8d2f and 1204890.

📒 Files selected for processing (2)

• components/frontend/src/app/projects/[name]/sessions/[sessionName]/components/__tests__/new-session-view.test.tsx
• components/frontend/src/app/projects/[name]/sessions/[sessionName]/components/new-session-view.tsx

[bobbravo2]

dogfooding/agentic session here for 3:15PM Future Bob: https://ambient-code.apps.rosa.vteam-uat.0ksl.p3.openshiftapps.com/projects/agentic-crons/scheduled-sessions/schedule-109e0d34-5f6f-4a2f-9f2f-81af052dd314