2nd: Upgrade date pickers dayjs resizable panels (#9115)

* Migrate webpack to RSPack

* optimize tests and docker

* review fixups

* Add comprehensive unit tests for RSPack migration

- 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>

* Update jest-puppeteer config to use pnpm

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>

* Upgrade packages

* fix lint errors

* Add unit tests for dayjs, date-pickers, and resizable-panels migrations

- 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>

* Add markdown formatting scripts and fix lint errors

- 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>

* remove unnecessary unit tests
* reduze resizer height to 3px
* set UTC as timezone for tests to have datetime string formatting test always pass

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: Sebastian Hengst <aryx.github@gmx-topmail.de>

Author: 3 people

eslint.config.mjs

@@ -33,12 +33,24 @@ export default [
       parser: babelParser,
     },
     files: ['**/*.js', '**/*.jsx'],
+    settings: {
+      'import/resolver': {
+        node: {
+          extensions: ['.js', '.jsx', '.json'],
+          moduleDirectory: ['node_modules', 'ui'],
+        },
+      },
+    },
     rules: {
       'class-methods-use-this': 'off',
       'consistent-return': 'off',
       'default-case': 'off',
       'default-param-last': 'off',
       'import/extensions': 'off',
+      'import/no-unresolved': [
+        'error',
+        { ignore: ['^react-resizable-panels$'] },
+      ],
       'jsx-a11y/click-events-have-key-events': 'off',
       'no-alert': 'off',
       'no-continue': 'off',

jest.config.js

@@ -1,5 +1,8 @@
 const path = require('path');
 
+// Consistency for date formatting tests
+process.env.TZ = 'UTC';
+
 module.exports = {
   rootDir: path.resolve(__dirname),
   moduleDirectories: ['node_modules'],
@@ -9,6 +12,8 @@ module.exports = {
       '<rootDir>/tests/jest/file-mock.js',
     '\\.(css|less|sass|scss)$': '<rootDir>/tests/jest/style-mock.js',
     '^react-native$': '<rootDir>/node_modules/react-native-web',
+    '^react-resizable-panels$':
+      '<rootDir>/tests/jest/react-resizable-panels-mock.js',
   },
   bail: true,
   collectCoverageFrom: ['ui/**/*.{mjs,jsx,js}'],

package.json

@@ -18,6 +18,7 @@
     "@fortawesome/react-fontawesome": "0.2.6",
     "@mui/material": "7.1.2",
     "@mui/styled-engine-sc": "npm:@mui/styled-engine-sc@latest",
+    "@mui/x-date-pickers": "8.21.0",
     "@popperjs/core": "2.11.8",
     "@types/react": "*",
     "@types/react-dom": "*",
@@ -27,6 +28,7 @@
     "buffer": "6.0.3",
     "connected-react-router": "6.9.3",
     "crypto-browserify": "3.12.1",
+    "dayjs": "1.11.19",
     "fuse.js": "6.0.4",
     "history": "4.10.1",
     "js-cookie": "3.0.5",
@@ -35,24 +37,22 @@
     "json-schema-defaults": "0.4.0",
     "lodash": "4.17.21",
     "mobx": "6.13.7",
-    "moment": "2.30.1",
     "numeral": "2.0.6",
     "pako": "2.1.0",
     "process": "0.11.10",
     "prop-types": "15.8.1",
     "query-string": "7.0.1",
     "react": "18.3.1",
     "react-bootstrap": "2.10.10",
-    "react-dates": "21.8.0",
     "react-dom": "18.3.1",
     "react-helmet": "6.1.0",
     "react-highlight-words": "0.20.0",
     "react-hot-keys": "2.7.3",
     "react-lazylog": "4.5.3",
     "react-linkify": "0.2.2",
     "react-redux": "8.0.7",
+    "react-resizable-panels": "3.0.6",
     "react-router-dom": "5.1.2",
-    "react-split-pane": "0.1.92",
     "react-table-6": "6.11.0",
     "react-tabs": "6.1.0",
     "redoc": "2.4.0",
@@ -122,6 +122,9 @@
     "format:check": "prettier --check \"**/*.{css,html,js,jsx,json,md,yaml,yml}\"",
     "lint": "eslint --cache --cache-location .eslintcache --report-unused-disable-directives --max-warnings 0 --format codeframe ui/ tests/ui/",
     "markdownlint": "markdownlint -c .markdownlint.json -p .markdownlintignore .",
+    "format:md": "prettier --write \"**/*.md\"",
+    "format:md:check": "prettier --check \"**/*.md\"",
+    "lint:md": "pnpm markdownlint && pnpm format:md:check",
     "prettier": "prettier --check .",
     "start": "rspack serve --mode development",
     "start:stage": "BACKEND=https://treeherder.allizom.org rspack serve --mode development",