Raunak Bhagat
a6d3b6bc05
## Description
Segmented fields (`InputTime`, `InputDatePicker`) now move between
segments with the arrow keys. ArrowLeft at the start of a segment
focuses the previous segment, with the caret at its end. ArrowRight at
the end focuses the next segment, with the caret at its start.
Shift+Arrow and caret moves inside a segment stay native.
The change is in the shared `makeSegmentKeyDownHandler`
(`inputs/segmented.tsx`), which now takes an optional next-segment ref.
Both pickers pass it.
First PR of a stack: this → `InputCurrency` → cost-overrides modal.
<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Adds arrow key navigation between segments in `InputTime` and
`InputDatePicker`. ArrowLeft at a segment's start moves focus to the
previous segment's end, and ArrowRight at the end moves to the next
segment's start.
Only a plain arrow with a collapsed caret crosses an edge;
Shift/Ctrl/Meta/Alt arrows and mid-segment moves stay native. Handled in
the shared `makeSegmentKeyDownHandler`, which now takes an optional
next-segment ref, and tests cover edge crossing and all guard cases.
<sup>Written for commit f3a28175b1.
Summary will update on new commits.</sup>
<a
href="https://cubic.dev/pr/onyx-dot-app/onyx/pull/16322?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="View guided diff"
src="https://www.cubic.dev/buttons/review-in-cubic-light.svg"></picture></a>
<a
href="https://www.cubic.dev/action/auto-fix/pr/onyx-dot-app/onyx/16322?returnTo=https%3A%2F%2Fgithub.com%2Fonyx-dot-app%2Fonyx%2Fpull%2F16322&source=description"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/turn-on-auto-fix-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/turn-on-auto-fix-light.svg"><img
alt="Turn on auto-fix"
src="https://www.cubic.dev/buttons/turn-on-auto-fix-light.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
<!-- coderabbit-ai-generated:v1 -->
## Summary by CodeRabbit
- **Bug Fixes**
- Improved keyboard navigation in segmented date and time inputs.
- Pressing **ArrowLeft** at the beginning of a segment now moves focus
to the previous segment.
- Pressing **ArrowRight** at the end of a segment now moves focus to the
next segment.
- Caret placement is preserved when moving between segments, while
selection and mid-segment navigation continue to work as expected.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This is a Next.js project bootstrapped with create-next-app.
Getting Started
Install bun: https://bun.sh/docs/installation
Install all dependencies: bun install.
Then, run the development server:
bun run dev
Open http://localhost:3000 with your browser to see the result.
Note: if you are having problems accessing the ^, try setting the WEB_DOMAIN env variable to
http://127.0.0.1:3000 and accessing it there.
Tip
Packages are installed automatically when switching branches after
package.jsonchanges with pre-commit configured.
Connecting to a Cloud Backend
To test your local frontend development server against a cloud backend (e.g., staging or production),
create a .env.local file in the web/ directory with the following configuration:
# Point local dev server to cloud backend
INTERNAL_URL=https://st-dev.onyx.app/api
# Debug auth cookie for authenticating against remote backend
# This cookie is automatically injected into API requests when in development mode
# To get this value:
# 1. Go to https://st-dev.onyx.app (or your target backend URL) and log in
# 2. Open DevTools (F12) → Application → Cookies → [your backend domain]
# 3. Find the "fastapiusersauth" cookie and copy its value
# 4. Paste the value below (without quotes)
# Note: This cookie may expire, so you may need to refresh it periodically
DEBUG_AUTH_COOKIE=your_cookie_value_here
By default, this does NOT override existing cookies, so if you've logged in previously, you
may need to delete the cookies for the localhost domain.
Important notes:
- The
.env.localfile should be created in theweb/directory (same level aspackage.json) - After creating or modifying
.env.local, restart your development server for changes to take effect - The
DEBUG_AUTH_COOKIEis only used in development mode (NODE_ENV=development) - If
INTERNAL_URLis not set, the frontend will connect to the local backend athttp://127.0.0.1:8080 - Keep your
.env.localfile secure and never commit it to version control (it should already be in.gitignore)
Testing
This testing process will reset your application into a clean state. Don't run these tests if you don't want to do this!
Bring up the entire application.
- Install playwright dependencies (run
bun installfirst sobunxresolves to the repo-pinned Playwright innode_modulesinstead of fetching the latest version)
bun install
bunx playwright install
- Run playwright (the
playwrightscript expands toplaywright test)
bun run playwright
To run a single test:
bun run playwright landing-page.spec.ts
If running locally, interactive options can help you see exactly what is happening in the test.
bun run playwright --ui
bun run playwright --headed
- Inspect results
By default, playwright.config.ts is configured to output the results to:
web/output/playwright/
- Visual regression screenshots
Screenshots are captured automatically during test runs and saved to web/output/screenshots/.
To compare screenshots across CI runs, use:
ods screenshot-diff compare --project admin
For more information, see tools/ods/README.md.