Repository navigation
feat(web): migrate UI from react-ui to @patterninc/pattern-ui - #149
Open
gauravwarale wants to merge 2 commits into
Open
gauravwarale wants to merge 2 commits into
gauravwarale wants to merge 2 commits into
Conversation
Replace the app shell, list pages, detail pages and filters with pattern-ui components, add a light/dark/system theme switcher, a right-aligned filter row above a viewport-sized table with sticky header, and use pattern-ui's CodeBlock (wrapped, padded) for job SQL.
Wiz Scan Summary
To detect these findings earlier in the dev lifecycle, try the Wiz Code extension for VS Code, JetBrains, or Visual Studio. |
Contributor
There was a problem hiding this comment.
Copilot review overview
🟡 Changes recommended
Pagination resets, resource routing, filter semantics, error handling, responsive state, and tooltip accessibility have unresolved defects.
Review effort: Balanced
Findings: 1
Open (7)
What changed in this PR
Migrates Heimdall’s web UI from react-ui to pattern-ui, introducing a new shell, themed list pages, filters, tables, and detail views.
Changes:
- Adds responsive navigation and light/dark/system themes.
- Rebuilds job, command, and cluster lists with shared filtering and pagination.
- Reworks detail pages, status displays, external links, SQL rendering, and job cancellation.
| File | Description |
|---|---|
web/src/modules/Jobs/TagFilter.tsx |
Rebuilds tag filtering. |
web/src/modules/Jobs/Jobs.tsx |
Migrates the jobs list and pagination. |
web/src/modules/Jobs/JobDetails/JobInformationPane.tsx |
Rebuilds job information sections. |
web/src/modules/Jobs/JobDetails/JobDetailsHeader.tsx |
Removes the legacy header. |
web/src/modules/Jobs/JobDetails/JobDetails.tsx |
Adopts the shared detail page. |
web/src/modules/Jobs/JobDetails/CancelJobButton.tsx |
Adds the cancellation dialog. |
web/src/modules/Jobs/Helper.tsx |
Defines new job table mappings. |
web/src/modules/Commands/Helper.tsx |
Defines command table mappings. |
web/src/modules/Commands/Commands.tsx |
Migrates the commands list. |
web/src/modules/Commands/CommandDetails/CommandInformationPane.tsx |
Rebuilds command information sections. |
web/src/modules/Commands/CommandDetails/CommandDetailsHeader.tsx |
Removes the legacy header. |
web/src/modules/Commands/CommandDetails/CommandDetails.tsx |
Adopts the shared detail page. |
web/src/modules/Clusters/Helper.tsx |
Defines cluster table mappings. |
web/src/modules/Clusters/ClustersDetails/ClustersDetailsHeader.tsx |
Removes the legacy header. |
web/src/modules/Clusters/ClustersDetails/ClustersDetails.tsx |
Adopts the shared detail page. |
web/src/modules/Clusters/ClustersDetails/ClusterInformationPane.tsx |
Rebuilds cluster information sections. |
web/src/modules/Clusters/Clusters.tsx |
Migrates the clusters list. |
web/src/components/TruncatedText/TruncatedText.tsx |
Adds tooltip-based truncation. |
web/src/components/NavigationBar/LeftNavContainer.tsx |
Removes the old navigation container. |
web/src/components/NavigationBar/LeftNavBar.tsx |
Removes the old navigation rail. |
web/src/components/ListPage/RowLink.tsx |
Adds accessible row links. |
web/src/components/ListPage/ListPage.tsx |
Adds the shared list layout. |
web/src/components/ListPage/ListEmptyState.tsx |
Adds filtered empty states. |
web/src/components/Header/Header.tsx |
Removes the breadcrumb header. |
web/src/components/FilterMenu/filterTypes.ts |
Defines shared filter models. |
web/src/components/FilterMenu/FilterMenu.tsx |
Adds responsive filter menus. |
web/src/components/FilterMenu/FilterControl.tsx |
Adds filter editors. |
web/src/components/ExternalLinkButton/ExternalLinkButton.tsx |
Adds reusable external-link buttons. |
web/src/components/ErrorPage/ErrorPage.tsx |
Migrates the not-found page. |
web/src/components/DetailPage/TagList.tsx |
Adds tag-list rendering. |
web/src/components/DetailPage/KeyValueList.tsx |
Adds key/value rendering. |
web/src/components/DetailPage/ExternalLinkList.tsx |
Adds external-link lists. |
web/src/components/DetailPage/DetailPage.tsx |
Adds the shared detail layout. |
web/src/components/DetailPage/DetailFields.tsx |
Adds detail field grids. |
web/src/components/AppShell/navItems.ts |
Defines application routes. |
web/src/components/AppShell/HeimdallShell.tsx |
Adds the new responsive shell. |
web/src/components/ApiResponseButton/ApiResponseButton.tsx |
Removes the legacy API button. |
web/src/common/Services/status.ts |
Maps statuses to tag variants. |
web/src/common/Services/index.ts |
Adds sorting and empty-value helpers. |
web/src/common/ReactQueryProvider/ReactQueryProvider.tsx |
Updates client-only initialization. |
web/src/common/hooks/useClientPagination.ts |
Adds shared client pagination. |
web/src/common/ClientLayout/ClientLayout.tsx |
Loads the consolidated application root. |
web/src/common/ClientLayout/AppRoot.tsx |
Configures UI providers. |
web/src/common/BreadCrumbsProvider/context.tsx |
Removes breadcrumb state. |
web/src/common/BreadCrumbsProvider/BreadCrumbsProvideContainer.tsx |
Removes the breadcrumb wrapper. |
web/src/common/AutoRefreshSelect/AutoRefreshSelect.tsx |
Migrates auto-refresh selection. |
web/src/common/AutoRefreshProvider/AutoRefreshProviderContainer.tsx |
Removes the redundant wrapper. |
web/src/app/layout.tsx |
Adds pre-hydration theme handling. |
web/src/app/globals.css |
Imports Pattern UI styles. |
web/pnpm-workspace.yaml |
Updates dependency release exclusions. |
web/package.json |
Replaces react-ui with pattern-ui. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Josh Diaz (JoshMDiaz)
left a comment
Josh Diaz (JoshMDiaz)
left a comment
Contributor
There was a problem hiding this comment.
AI-generated
This is a full user-facing shell/list/detail cutover to pattern-ui (~52 files) with no useToggle / ToggleProvider and no leftover react-ui path. Copilot already covered the pagination-reset contract, job 404 handling, ID-vs-name filter labels, command_name routing, the nested mobile filter drawer, and truncated-text keyboard access.
Is this intended to ship ungated? Pattern-ui migrations elsewhere sit behind a conversion toggle so prod can roll back to the old shell. Heimdall may not have that toggle stack today — if not, should it, or is a hard cutover the plan?
Also: @patterninc/pattern-ui is pinned to a play-cdn snapshot (0.0.0-play-cdn.202610020641), and AppRoot imports @patterninc/pattern-ui/i18n-english-provider, which is not an export on current pattern-ui main. Worth confirming that snapshot is what you want in prod and that an upgrade path exists.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
- treat job responses without an ID as errors - commit pagination resets so old pages are not restored - clear nested mobile filter drawer on close - make truncated-text tooltip trigger keyboard accessible - route command/cluster links by ID - label job cluster/command filters as names - show loading state for placeholder data; cap command count at 100+ - offset sticky headers below the mobile bar Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Yash Shrivastava (alephys26)
approved these changes
Oct 7, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Replace the app shell, list pages, detail pages and filters with pattern-ui components, add a light/dark/system theme switcher, a right-aligned filter row above a viewport-sized table with sticky header, and use pattern-ui's CodeBlock (wrapped, padded) for job SQL.