Updated context center icons#29775
Conversation
❌ PR checklist incompleteThis PR cannot be merged until the following are addressed on its linked issue:
The fields live on the linked issue in the Shipping project (open the issue → right sidebar → Projects). After you set them, re-run this check (or push a commit) — issue/project changes do not re-trigger it automatically. Maintainers can bypass this check by adding the |
|
Hi there 👋 Thanks for your contribution! The OpenMetadata team will review the PR shortly! Once it has been labeled as Let us know if you need any help! |
|
Hi there 👋 Thanks for your contribution! The OpenMetadata team will review the PR shortly! Once it has been labeled as Let us know if you need any help! |
Rohit0301
force-pushed
the
context-center-icons
branch
from
6cea855 to
4f90d46
Compare
|
Hi there 👋 Thanks for your contribution! The OpenMetadata team will review the PR shortly! Once it has been labeled as Let us know if you need any help! |
![gitar-bot[bot]](https://avatars.githubusercontent.com/in/827041?s=60&v=4){kind=small}
Rohit0301
added
the
safe to test
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| data-testid="edit-memory-btn" | ||
| icon={ <DotsVerticalIcon height={18} width={18} />} | ||
| size="sm" | ||
| tooltip={t('label.manage-entity', { | ||
| entity: t('label.article'), | ||
| })} |
There was a problem hiding this comment.
data-testid="edit-memory-btn", overwriting the previous data-testid="manage-button". Any Playwright test that locates this button by manage-button will silently fail to find it. The same copy-paste issue appears in DocumentsView.component.tsx where the dots button for document management also receives edit-memory-btn.
| data-testid="edit-memory-btn" | |
| icon={ <DotsVerticalIcon height={18} width={18} />} | |
| size="sm" | |
| tooltip={t('label.manage-entity', { | |
| entity: t('label.article'), | |
| })} | |
| data-testid="manage-button" | |
| icon={ <DotsVerticalIcon height={18} width={18} />} | |
| size="sm" | |
| tooltip={t('label.manage-entity', { | |
| entity: t('label.article'), | |
| })} |
🔴 Playwright Results — 13 failure(s), 22 flaky✅ 4502 passed · ❌ 13 failed · 🟡 22 flaky · ⏭️ 55 skipped
Genuine Failures (failed on all attempts)❌
|
Code Review
|
| Compact |
|
Was this helpful? React with 👍 / 👎 | Gitar
Code Review 👍 Approved with suggestions 2 resolved / 3 findingsMigrates ContextCenter and KnowledgeCenter icons to custom SVG assets and updates ButtonUtility styles. Please resolve the duplicate 'edit-memory-btn' testid usage across management components. 💡 Quality: Duplicate/misleading data-testid 'edit-memory-btn' on manage buttons📄 openmetadata-ui/src/main/resources/ui/src/components/ContextCenter/ArticleDetailHeader/ArticleDetailHeader.component.tsx:600 📄 openmetadata-ui/src/main/resources/ui/src/components/ContextCenter/DocumentsView/DocumentsView.component.tsx:171 📄 openmetadata-ui/src/main/resources/ui/src/components/ContextCenter/MemoriesView/MemoriesView.component.tsx:54 Several dropdown trigger buttons for 'manage' actions were given Restore/give a descriptive testid for the manage dropdown trigger.✅ 2 resolved✅ Bug: Typo 'ttw:shrink-0' breaks Tailwind class on delete icon
✅ Bug: Follow button shows inverted active/inactive icon
🤖 Prompt for agentsOptionsDisplay: compact → Showing less information. Comment with these commands to change the behavior for this request:
Was this helpful? React with 👍 / 👎 | Gitar |
Rohit0301
force-pushed
the
context-center-icons
branch
from
cc7acfa to
85e2891
Compare
Code Review ✅ Approved 3 resolved / 3 findingsReplaces external icons with custom SVG assets and simplifies ✅ 3 resolved✅ Bug: Typo 'ttw:shrink-0' breaks Tailwind class on delete icon
✅ Bug: Follow button shows inverted active/inactive icon
✅ Quality: Duplicate/misleading data-testid 'edit-memory-btn' on manage buttons
OptionsDisplay: compact → Showing less information. Comment with these commands to change the behavior for this request:
Was this helpful? React with 👍 / 👎 | Gitar |
1 similar comment
Code Review ✅ Approved 3 resolved / 3 findingsReplaces external icons with custom SVG assets and simplifies ✅ 3 resolved✅ Bug: Typo 'ttw:shrink-0' breaks Tailwind class on delete icon
✅ Bug: Follow button shows inverted active/inactive icon
✅ Quality: Duplicate/misleading data-testid 'edit-memory-btn' on manage buttons
OptionsDisplay: compact → Showing less information. Comment with these commands to change the behavior for this request:
Was this helpful? React with 👍 / 👎 | Gitar |
Jest test CoverageUI tests summary
|
|
1 participant
Describe your changes:
Fixes #
I worked on ... because ...
Type of change:
High-level design:
N/A — small change.
Tests:
Use cases covered
Unit tests
Backend integration tests
Ingestion integration tests
Playwright (UI) tests
Manual testing performed
UI screen recording / screenshots:
Not applicable.
Checklist:
Fixes <issue-number>: <short explanation>Fixes #<issue-number>above.Summary by Gitar
ContextCenterandKnowledgeCentercomponents to standardize the icon set.ButtonUtilitystyles and iconography to improve visual consistency and alignment across the UI.This will update automatically on new commits.
Greptile Summary
This PR migrates icon usage across ContextCenter and KnowledgeCenter components from
@untitledui/iconsexternal library to custom SVG assets, and updatesButtonUtilitytertiary style tokens. The change also adds new SVG icon sets underaction-icons/,common/, andsidebar-icons/directories.@untitledui/iconscomponents (e.g.,Trash01,File06,Copy06,Clock,DotsVertical) withReactComponentSVG imports across 15+ files; icon props shift from passing component types to passing pre-sized<Svg height={n} width={n} />elements.ButtonUtilitystyle update: Changes thetertiaryvariant classes fromtw:text-fg-quaternary/tw:hover:text-fg-quaternary_hovertotw:text-quaternary/tw:hover:text-tertiary, and reorders imports to match project convention.KnowledgePageUtilsmock inArticleDetailHeader.test.tsxsogetKnowledgePageNameis mocked underKnowledgePagePureUtils(its actual module), keepingupdateKnowledgeCenterRecentViewedinKnowledgePageUtils.Confidence Score: 5/5
Safe to merge — the change is a mechanical icon swap with no logic or API surface alterations.
All modified files perform a straightforward substitution of external library icon components for custom SVG imports. No data flow, API calls, state management, or routing logic is altered. The test mock correction in ArticleDetailHeader.test.tsx fixes an existing mismatch rather than introducing risk.
No files require special attention — all icon paths resolve to the new SVG files added in this PR.
Important Files Changed
Flowchart
%%{init: {'theme': 'neutral'}}%% flowchart TD A[ContextCenter / KnowledgeCenter Components] --> B{Icon Source} B -->|Before| C["@untitledui/icons\n(File06, Trash01, Copy06, etc.)"] B -->|After| D[Custom SVG ReactComponents] D --> E["action-icons/\n(copy, trash, edit, follow, etc.)"] D --> F["common/\n(file, folder, clock, user, globe, etc.)"] D --> G["sidebar-icons/\n(archive, articles, dashboard, etc.)"] H[ButtonUtility tertiary style] -->|Before| I["tw:text-fg-quaternary / tw:hover:text-fg-quaternary_hover"] H -->|After| J["tw:text-quaternary / tw:hover:text-tertiary"]%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%% flowchart TD A[ContextCenter / KnowledgeCenter Components] --> B{Icon Source} B -->|Before| C["@untitledui/icons\n(File06, Trash01, Copy06, etc.)"] B -->|After| D[Custom SVG ReactComponents] D --> E["action-icons/\n(copy, trash, edit, follow, etc.)"] D --> F["common/\n(file, folder, clock, user, globe, etc.)"] D --> G["sidebar-icons/\n(archive, articles, dashboard, etc.)"] H[ButtonUtility tertiary style] -->|Before| I["tw:text-fg-quaternary / tw:hover:text-fg-quaternary_hover"] H -->|After| J["tw:text-quaternary / tw:hover:text-tertiary"]Reviews (9): Last reviewed commit: "unit test fix" | Re-trigger Greptile