chore(ui): consolidate app/appset tiles and tables#28873
Draft
blakepettersson wants to merge 1 commit into
Draft
chore(ui): consolidate app/appset tiles and tables#28873blakepettersson wants to merge 1 commit into
blakepettersson wants to merge 1 commit into
Conversation
❗ Preview Environment deployment failed on BunnyshellSee: Environment Details | Pipeline Logs Available commands (reply to this comment):
|
Bundle ReportChanges will increase total bundle size by 1.3kB (0.01%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: argo-cd-ui-array-pushAssets Changed:
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refactors the Applications/ApplicationSets list UI to consolidate the “tile” and “table row” metadata rendering into a shared definition-list (<dl><dt><dd>) primitive, aiming to make the “label: value” structure clearer while reusing existing styling utilities.
Changes:
- Introduces shared
EntryField/EntryFieldListcomponents to render entry metadata as definition lists across tile + table variants. - Reworks Application/ApplicationSet tile and table-row markup to use the shared primitive and adds new SCSS to preserve legacy spacing/truncation behavior.
- Adjusts table CSS to accommodate a flush-right actions menu layout and removes now-obsolete tile grid markup styles.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| ui/src/app/applications/components/applications-list/entry-fields.tsx | Adds shared <dl>-based primitives for rendering entry fields consistently across tile/table views. |
| ui/src/app/applications/components/applications-list/entry-fields.scss | Adds layout/reset styles for the new definition-list rendering and table-specific grid placement rules. |
| ui/src/app/applications/components/applications-list/appset-tile.tsx | Migrates ApplicationSet tile fields to the shared EntryFieldList rendering and improves record-level a11y grouping. |
| ui/src/app/applications/components/applications-list/appset-table-row.tsx | Migrates ApplicationSet table row fields to EntryFieldList and updates layout structure. |
| ui/src/app/applications/components/applications-list/applications-tiles.scss | Removes legacy tile grid wrapper styles now replaced by entry-fields.scss. |
| ui/src/app/applications/components/applications-list/applications-table.scss | Updates action menu positioning rules and removes legacy per-row grid rules now handled by entry-fields.scss. |
| ui/src/app/applications/components/applications-list/application-tile.tsx | Migrates Application tile fields to the shared EntryFieldList rendering and improves record-level a11y grouping. |
| ui/src/app/applications/components/applications-list/application-table-row.tsx | Migrates Application table row fields to shared primitives and restructures the row (fav/actions/menu + flat <dl>). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
blakepettersson
force-pushed
the
refactor/definition-list-components
branch
from
July 23, 2026 22:39
0984e1b to
554bc24
Compare
Comment on lines
+10
to
+13
| // To avoid re-deriving styling the list views already have, each <dt>/<dd> reuses the existing | ||
| // utility classes — the tile field classes, the table meta classes, and Foundation's own | ||
| // `show-for-xxlarge` visibility utility — so spacing, truncation and label visibility match the | ||
| // legacy markup. The only new CSS is the flex row + the <dl> 2-column grid. |
Comment on lines
+207
to
+212
| // When the <dl> IS the column (Source/Destination, Status), it doesn't receive Foundation's | ||
| // `.row > .columns` gutter, so apply that gutter to the cells instead — both sides of every | ||
| // cell, exactly as Foundation pads each column (gutter/2 ≈ 0.9375rem per side; adjacent cells' | ||
| // paddings combine into the gap between them). Matches column 1, whose gutter comes from its | ||
| // `small-4` wrapper. Column 1's <dl> (`.meta-rows`, not `.columns`) is untouched. | ||
| .entry-fields--table.columns { |
Use definition lists (`<dl>`) to make it more clear what the content is. Signed-off-by: Blake Pettersson <blake.pettersson@gmail.com>
blakepettersson
force-pushed
the
refactor/definition-list-components
branch
from
July 24, 2026 15:01
554bc24 to
198f009
Compare
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.
Use definition lists (
<dl>) to make it more clear what the content is.Checklist: