frontend: Migrate to Headlamp common components and theme tokens#36
frontend: Migrate to Headlamp common components and theme tokens#36NAME-ASHWANIYADAV wants to merge 2 commits into
Conversation
Signed-off-by: ashwani yadav <22ashwaniyadav@gmail.com>
|
Ready for review ? I am doing stuff for Agones, but can have a look 😄 |
|
@lacroixthomas Yes, it's good to go! Thanks for taking the time to look into it |
lacroixthomas
left a comment
lacroixthomas
left a comment
There was a problem hiding this comment.
There might also be these 3 files that are not used anymore ? 🤔
./src/components/PreviewPanel.tsx
./src/views/fleets/GameServersPreview.tsx
./src/views/gameserver/PodPreview.tsx
Might need to be double checked though
| { label: 'Name', getter: (p: any) => p.name }, | ||
| { label: 'Host Port', getter: (p: any) => p.hostPort ?? '—' }, | ||
| { label: 'Container Port', getter: (p: any) => p.containerPort ?? '—' }, | ||
| { label: 'Protocol', getter: (p: any) => p.protocol }, | ||
| { label: 'Policy', getter: (p: any) => p.portPolicy }, |
There was a problem hiding this comment.
Nit: do you reckon this could be an actual type instead of any ? 🤔
There was a problem hiding this comment.
I have extracted a named MergedPort interface in gameserver.ts (the return type of GameServer.mergedPorts) and typed all five getters with it
Signed-off-by: ashwani yadav <22ashwaniyadav@gmail.com>
I have verified all three - after dropping the row-click preview panels in the list-view migration, nothing imports PreviewPanel.tsx, GameServersPreview.tsx, or PodPreview.tsx anymore, so I've removed them. |
2 participants
This PR addresses the UI feedback from @ashu8912 by migrating hand-rolled Material UI tables to Headlamp's built-in common components, bringing a consistent UX, free features (search, sort, pagination), and better dark mode support.
🛠️ Changes Made
1. List Views->
ResourceListViewReplaced manual
<Table>implementations withResourceListViewfor:Gains: Built-in search, sorting, pagination, column chooser, URL state, and loading states.
(Note: Dropped the inline row-click preview panel for Fleets/GameServers as
ResourceListViewdoes not support row selection natively, matching Headlamp's standard list UX).2. Data Tables ->
SimpleTableReplaced read-only data tables with
SimpleTableusing column configurations:Separates "what the data is" from "how it looks" using typed data arrays.
3. Key/Value Tables ->
NameValueTableReplaced 2-column detail tables with
NameValueTable:hideprop for conditional "Scaling Limit/Blocked" rows instead of inline JSX).4. Theme Tokens & Dark Mode Fixes
Replaced hardcoded hex colors with theme palette tokens:
UtilBar:#f44336/#ff9800/#4caf50→error.main/warning.main/success.mainReplicaBar:grey.200->action.hover(Fixes the broken grey track in dark mode).🧹 Cleanup
tableStyles.ts.