Skip to content

Conversation

@camd
Copy link
Collaborator

@camd camd commented Dec 7, 2025

Only the last commit applies to this. This PR sits atop #9114

Summary

This PR upgrades several frontend packages to modernize the codebase:

Package Changes

  • Added: @mui/x-date-pickers (8.21.0) - MUI date picker components
  • Added: dayjs (1.11.19) - Lightweight date library
  • Added: react-resizable-panels (3.0.6) - Modern resizable panel library
  • Removed: moment - Replaced by dayjs (smaller bundle size)
  • Removed: react-dates - Replaced by MUI date pickers
  • Removed: react-split-pane - Replaced by react-resizable-panels

Code Changes

  • Migrated date handling from moment to dayjs across the codebase
  • Created ui/helpers/dayjs.js helper module for consistent dayjs configuration
  • Replaced react-dates DateRangePicker with MUI @mui/x-date-pickers in intermittent-failures
  • Replaced react-split-pane with react-resizable-panels in the main job view App.jsx
  • Updated CSS for new resizable panels styling
  • Added Jest mock for react-resizable-panels

Files Modified

  • 18 files changed across helpers, components, and configuration

@camd camd self-assigned this Dec 7, 2025
@camd camd requested review from Archaeopteryx and jmaher December 7, 2025 20:58
@codecov-commenter
Copy link

codecov-commenter commented Dec 14, 2025

Codecov Report

❌ Patch coverage is 78.57143% with 15 lines in your changes missing coverage. Please review.
✅ Project coverage is 82.04%. Comparing base (a82c683) to head (5409aca).

Files with missing lines Patch % Lines
ui/intermittent-failures/DateRangePicker.jsx 68.75% 5 Missing ⚠️
ui/job-view/App.jsx 70.58% 5 Missing ⚠️
ui/intermittent-failures/DateOptions.jsx 0.00% 2 Missing ⚠️
ui/helpers/taskcluster.js 50.00% 1 Missing ⚠️
ui/login-callback/LoginCallback.jsx 66.66% 1 Missing ⚠️
ui/perfherder/graphs/GraphsContainer.jsx 75.00% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##           master    #9115      +/-   ##
==========================================
+ Coverage   80.01%   82.04%   +2.02%     
==========================================
  Files         601      602       +1     
  Lines       32715    33766    +1051     
  Branches     3314     3007     -307     
==========================================
+ Hits        26178    27704    +1526     
+ Misses       6371     5938     -433     
+ Partials      166      124      -42     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@camd camd changed the title Upgrade date pickers dayjs resizable panels 2nd: Upgrade date pickers dayjs resizable panels Dec 21, 2025
@camd camd force-pushed the camd/packages-upgrade-date-pickers-dayjs-resizable-panels branch from b359c9b to 96dcbaf Compare December 21, 2025 19:55
camd and others added 5 commits January 4, 2026 10:25
- Add tests/ui/App.test.jsx: Test URL transformations and routing
  - URL backwards compatibility (perf.html, pushhealth.html, logviewer.html)
  - Permalink hash preservation
  - Document title updates for perfherder alerts
  - Export verification (no react-hot-loader wrapper)

- Expand tests/ui/helpers/filter.test.js: Comprehensive filter helper tests
  - thMatchType, thFieldChoices, thFilterDefaults constants
  - arraysEqual and matchesDefaults functions
  - hasUrlFilterChanges URL comparison
  - reloadOnChangeParameters and allFilterParams arrays

- Add tests/ui/perfherder/App.test.jsx: Export and structure verification
  - Verify no hot loader wrapper (RSPack migration regression test)
  - Validate class component structure and lifecycle methods

- Add tests/ui/push-health/App.test.jsx: Component and routing tests
  - Component loading and API call verification
  - Route handling (push, my-pushes, usage)
  - Export verification for RSPack migration

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Change server command from 'yarn start' to 'pnpm start' to match
the package manager migration.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add tests for dayjs helper module (UTC, customParseFormat, isSameOrAfter, relativeTime plugins)
- Add tests for display.js dayjs migration (toMercurialDateStr, toMercurialShortDateStr)
- Add tests for taskcluster.js credential expiration with dayjs
- Add tests for DateRangePicker MUI component migration
- Add tests for intermittent-failures helpers (prettyDate, calculateMetrics)
- Add tests for perfherder helpers (getFilledBugSummary date formatting)
- Add tests for GraphsContainer and TableView date formatting
- Add tests for job-view App react-resizable-panels migration

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@camd camd force-pushed the camd/packages-upgrade-date-pickers-dayjs-resizable-panels branch from 96dcbaf to 65b39ff Compare January 4, 2026 19:23
- Add format:md, format:md:check, and lint:md scripts using prettier
- Fix lint errors in test files:
  - taskcluster.test.js: Use toThrow() instead of try/catch
  - DateRangePicker.test.jsx: Remove jest.mock with require(), use toHaveLength()
  - helpers.test.jsx: Use toHaveLength()
  - GraphsContainer.test.jsx: Remove unused variable

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants