feat(explore): show entity icons in Data Asset quick-filter dropdown by Rohit0301 · Pull Request #30583 · open-metadata/OpenMetadata

Rohit0301 · 2026-07-28T12:11:19Z

Describe your changes:

I worked on adding entity icons to the Data Asset quick-filter dropdown on the /explore page because the items lacked visual differentiation between entity types (Table, Column, Dashboard, etc.).

Changes made:

Added optional icon?: ReactNode field to SearchDropdownOption interface
Added addEntityTypeIcons helper in ExploreQuickFilters that calls searchClassBase.getEntityIcon to resolve a 16px gray-500 icon for each entity type option
Rendered the icon in both the legacy SearchDropdown (Ant Design) path via generateSearchDropdownLabel and the new QuickFilterDropdown (Untitled-UI) path
Fixed vertical alignment of dropdown rows (Space align="center") and collapsed icon wrapper line-height (tw:leading-[0]) for pixel-accurate centering

Type of change:

Improvement

High-level design:

N/A — small change.

Tests:

Use cases covered

Data Asset dropdown on /explore shows a gray entity icon to the left of each label (Table, Column, Dashboard, Pipeline, etc.)
Icons appear in both the legacy Ant Design SearchDropdown and the Untitled-UI QuickFilterDropdown (used in the Assets Selection Modal/drawer)
Filters with no entity-type key are unaffected (icon remains undefined)

Unit tests

I added unit tests for the new/changed logic.

Backend integration tests

Not applicable (no backend API changes).

Ingestion integration tests

Not applicable (no ingestion changes).

Playwright (UI) tests

Not applicable (no UI changes).

Manual testing performed

Opened /explore locally
Clicked the "Data Asset" quick-filter dropdown — each entity type now shows its icon in gray-500 to the left of the label, vertically centred with the text

UI screen recording / screenshots:

Checklist:

I have read the CONTRIBUTING document.
My PR title is Fixes <issue-number>: <short explanation>
My PR is linked to a GitHub issue via Fixes #<issue-number> above.
For UI changes: I attached a screen recording and/or screenshots above.
I have added tests (unit / integration / Playwright as applicable) and listed them above.

Summary by Gitar

New entity icons:
- Added new SVGs and mappings for aiFrameworkControl, aiGovernancePolicy, LLMService, and MCPService entity types in Assets.constants.ts and TableUtils.tsx

_{This will update automatically on new commits.}

Greptile Summary

Adds entity-specific icons across Explore quick filters and lineage node suggestions.

Extends search dropdown options with optional React icon content and renders it in legacy and Untitled-UI dropdowns.
Adds icon mappings and SVG assets for AI framework controls, AI governance policies, LLM services, and MCP services.
Consolidates lineage suggestion icons onto the shared entity-icon utility.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

Important Files Changed

Filename	Overview
openmetadata-ui/src/main/resources/ui/src/components/Explore/ExploreQuickFilters.tsx	Resolves shared icons for entity-type filter options before storing them for either dropdown implementation.
openmetadata-ui/src/main/resources/ui/src/components/Explore/QuickFilterDropdown.tsx	Renders an optional entity icon beside each Untitled-UI checkbox label.
openmetadata-ui/src/main/resources/ui/src/utils/AdvancedSearchUtils.tsx	Renders optional icons in legacy search dropdown rows and centers their contents vertically.
openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/NodeSuggestions.component.tsx	Replaces the lineage-specific icon resolver with the shared entity-icon utility.
openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx	Extends the shared entity-icon mapping for newly supported AI and service entity types.
openmetadata-ui/src/main/resources/ui/src/constants/Assets.constants.ts	Registers the four new SVG assets in the central entity icon mapper.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart LR
  A[Entity type option] --> B[Canonicalize entity type]
  B --> C[Resolve shared entity icon]
  C --> D[SearchDropdown legacy UI]
  C --> E[QuickFilterDropdown Untitled UI]
  C --> F[Lineage node suggestions]

_{Reviews (5): Last reviewed commit: "fixed lineage entity icons" | Re-trigger Greptile}

Adds gray-500 entity icons to the left of each item in the Data Asset dropdown on the /explore page, using searchClassBase.getEntityIcon. Also centres items vertically (Space align="center") and collapses icon wrapper line-height (tw:leading-[0]) for pixel-accurate alignment. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

github-actions · 2026-07-28T12:11:36Z

❌ PR checklist incomplete

This PR cannot be merged until the following are addressed on its linked issue:

No GitHub issue is linked. Link an issue in the Development section of the PR (or add Fixes #12345 to the description). For a same-org cross-repo issue, add Fixes open-metadata/<repo>#123 to the description.

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 skip-pr-checks label.

github-actions · 2026-07-28T12:11:41Z

Hi there 👋 Thanks for your contribution!

The OpenMetadata team will review the PR shortly! Once it has been labeled as safe to test, the CI workflows
will start executing and we'll be able to make sure everything is working as expected.

Let us know if you need any help!

github-actions · 2026-07-28T12:13:32Z

🔴 Playwright Results — workflow failed

Validated commit 64b5a320a15c68586fa44ed3233245209dd8bd5e in Playwright run 30465167045, attempt 1.

✅ 0 passed · ❌ 0 failed · 🟡 0 flaky · ⏭️ 0 skipped · 🧰 0 lifecycle flaky

Pipeline and setup failures (5)

Duration-aware shard planning finished with status failure.
Fixture cache restoration finished with status skipped.
Seeded fixture preparation finished with status skipped.
The Playwright shard matrix was unexpectedly skipped.
No expected Playwright shards were declared.

Performance

⚪ Performance metrics unavailable; see the CI and reporting failures above.

Shard	Passed	Failed	Flaky	Skipped	Lifecycle failed	Lifecycle flaky

📦 Download artifacts

How to debug locally

# Download playwright-test-results-<shard> artifact and unzip
npx playwright show-trace path/to/trace.zip    # view trace

gitar-bot · 2026-07-28T12:14:19Z

+const addEntityTypeIcons = (
+  key: string,
+  opts: SearchDropdownOption[]
+): SearchDropdownOption[] => {
+  if (!ENTITY_TYPE_FILTER_KEYS.has(key)) {
+    return opts;
+  }
+  return opts.map((opt) => ({
+    ...opt,
+    icon:
+      searchClassBase.getEntityIcon(
+        getCanonicalEntityType(opt.key),
+        'tw:text-gray-500',
+        {},
+        EntityIconSize.Size16


💡 Bug: Selected option carries ReactNode icon into filter value state

addEntityTypeIcons attaches a React element to each option's icon field, and handleOptionToggle/handleApply in QuickFilterDropdown (and the legacy SearchDropdown path) propagate the full selected option — including icon — into field.value via onChange/onFieldValueSelect. Downstream query-filter construction and Explore's URL persistence only need key/label; if field.value is ever JSON/Qs-serialized (e.g. into the URL quick-filter param), the ReactNode would serialize to garbage or bloat the query string. Consider stripping icon before passing selected values to onChange, e.g. map to { key, label }.

_{Was this helpful? React with 👍 / 👎}

github-actions · 2026-07-28T12:31:33Z

Jest test Coverage

UI tests summary

Lines	Statements	Branches	Functions
	65.67% (76792/116932)	49.54% (46110/93068)	50.75% (13891/27367)

github-actions · 2026-07-29T14:44:05Z

❌ UI Checkstyle Failed

❌ ESLint + Prettier + Organise Imports (src)

One or more source files have linting or formatting issues.

Affected files

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/NodeSuggestions.component.tsx

❌ Tailwind Audit

Hardcoded Tailwind values found. Use a design-system utility (run yarn tw-audit:report for the token each value maps to).

❌ Antd + Less Deprecation Guard

A new antd import or new .less file was added. Use UntitledUI + Tailwind for new work.

Affected files

at Function._resolveFilename (node:internal/modules/cjs/loader:1401:15)
at defaultResolveImpl (node:internal/modules/cjs/loader:1057:19)
at resolveForCJSWithHooks (node:internal/modules/cjs/loader:1062:22)
at Function._load (node:internal/modules/cjs/loader:1211:37)
at TracingChannel.traceSync (node:diagnostics_channel:322:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:235:24)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:171:5)
at node:internal/main/run_main_module:36:49 {

Fix locally (fast - only checks files changed in this branch):

make ui-checkstyle-changed

gitar-bot · 2026-07-29T15:18:46Z

Code Review 👍 Approved with suggestions 1 resolved / 2 findings

Adds entity icons to the Data Asset quick-filter dropdown across legacy and new dropdown implementations. Consider preventing the ReactNode icon from propagating into filter state during selection toggles.

💡 Bug: Selected option carries ReactNode icon into filter value state

📄 openmetadata-ui/src/main/resources/ui/src/components/Explore/QuickFilterDropdown.tsx:127-141 📄 openmetadata-ui/src/main/resources/ui/src/components/Explore/QuickFilterDropdown.tsx:154-162 📄 openmetadata-ui/src/main/resources/ui/src/components/Explore/ExploreQuickFilters.tsx:65-79 📄 openmetadata-ui/src/main/resources/ui/src/components/Explore/ExploreQuickFilters.tsx:337-339

addEntityTypeIcons attaches a React element to each option's icon field, and handleOptionToggle/handleApply in QuickFilterDropdown (and the legacy SearchDropdown path) propagate the full selected option — including icon — into field.value via onChange/onFieldValueSelect. Downstream query-filter construction and Explore's URL persistence only need key/label; if field.value is ever JSON/Qs-serialized (e.g. into the URL quick-filter param), the ReactNode would serialize to garbage or bloat the query string. Consider stripping icon before passing selected values to onChange, e.g. map to { key, label }.

✅ 1 resolved

✅ Quality: Icon uses raw palette color tw:text-gray-500 instead of semantic token

📄 openmetadata-ui/src/main/resources/ui/src/components/Explore/ExploreQuickFilters.tsx:74-80
The icon is styled with tw:text-gray-500, a raw Tailwind palette color. Repo styling guidelines require semantic design tokens from globals.css (see docs/colors.md) rather than hardcoded palette scales. Replace tw:text-gray-500 with the appropriate semantic token (e.g. a muted/secondary foreground token) for consistency and theme correctness.

🤖 Prompt for agents

Code Review: Adds entity icons to the Data Asset quick-filter dropdown across legacy and new dropdown implementations. Consider preventing the ReactNode icon from propagating into filter state during selection toggles.

1. 💡 Bug: Selected option carries ReactNode icon into filter value state
   Files: openmetadata-ui/src/main/resources/ui/src/components/Explore/QuickFilterDropdown.tsx:127-141, openmetadata-ui/src/main/resources/ui/src/components/Explore/QuickFilterDropdown.tsx:154-162, openmetadata-ui/src/main/resources/ui/src/components/Explore/ExploreQuickFilters.tsx:65-79, openmetadata-ui/src/main/resources/ui/src/components/Explore/ExploreQuickFilters.tsx:337-339

   `addEntityTypeIcons` attaches a React element to each option's `icon` field, and `handleOptionToggle`/`handleApply` in QuickFilterDropdown (and the legacy SearchDropdown path) propagate the full selected option — including `icon` — into `field.value` via `onChange`/`onFieldValueSelect`. Downstream query-filter construction and Explore's URL persistence only need `key`/`label`; if `field.value` is ever JSON/Qs-serialized (e.g. into the URL quick-filter param), the ReactNode would serialize to garbage or bloat the query string. Consider stripping `icon` before passing selected values to `onChange`, e.g. map to `{ key, label }`.

Options

Display: compact → Showing less information.

Comment with these commands to change the behavior for this request:

`Compact`
`gitar display:verbose`

_{Was this helpful? React with 👍 / 👎 | Gitar | Powered by Gitar — free for open source}

sonarqubecloud · 2026-07-29T15:41:14Z

Quality Gate passed for 'open-metadata-ui'

Issues
1170 New issues
0 Accepted issues

Measures
13 Security Hotspots
0.0% Coverage on New Code
3.0% Duplication on New Code

See analysis details on SonarQube Cloud

Rohit0301 requested a review from a team as a code owner July 28, 2026 12:11

github-actions Bot added the UI UI specific issues label Jul 28, 2026

gitar-bot Bot reviewed Jul 28, 2026

View reviewed changes

Comment thread openmetadata-ui/src/main/resources/ui/src/components/Explore/ExploreQuickFilters.tsx

Rohit0301 self-assigned this Jul 28, 2026

Rohit0301 added the safe to test Add this label to run secure Github workflows on PRs label Jul 28, 2026

Rohit0301 added 2 commits July 28, 2026 18:06

address gitar comment

427c554

lint fix

db518b5

Rohit0301 temporarily deployed to test July 28, 2026 13:25 — with GitHub Actions Inactive

added few missing icons

1030f08

Rohit0301 had a problem deploying to test July 29, 2026 14:54 — with GitHub Actions Error

fixed lineage entity icons

64b5a32

Rohit0301 temporarily deployed to test July 29, 2026 15:46 — with GitHub Actions Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(explore): show entity icons in Data Asset quick-filter dropdown - #30583

feat(explore): show entity icons in Data Asset quick-filter dropdown#30583
Rohit0301 wants to merge 5 commits into
mainfrom
explore-page-data-asset-icons

Rohit0301 commented Jul 28, 2026 •

edited by greptile-apps Bot

Loading

Uh oh!

github-actions Bot commented Jul 28, 2026

Uh oh!

github-actions Bot commented Jul 28, 2026

Uh oh!

github-actions Bot commented Jul 28, 2026 •

edited

Loading

Uh oh!

gitar-bot Bot Jul 28, 2026

Uh oh!

Uh oh!

github-actions Bot commented Jul 28, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 29, 2026 •

edited

Loading

Uh oh!

gitar-bot Bot commented Jul 29, 2026

Uh oh!

sonarqubecloud Bot commented Jul 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

Rohit0301 commented Jul 28, 2026 • edited by greptile-apps Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Describe your changes:

Type of change:

High-level design:

Tests:

Use cases covered

Unit tests

Backend integration tests

Ingestion integration tests

Playwright (UI) tests

Manual testing performed

UI screen recording / screenshots:

Checklist:

Summary by Gitar

Greptile Summary

Confidence Score: 5/5

Important Files Changed

Flowchart

Uh oh!

github-actions Bot commented Jul 28, 2026

❌ PR checklist incomplete

Uh oh!

github-actions Bot commented Jul 28, 2026

Uh oh!

github-actions Bot commented Jul 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔴 Playwright Results — workflow failed

Pipeline and setup failures (5)

Performance

Uh oh!

gitar-bot Bot Jul 28, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Jul 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Jest test Coverage

UI tests summary

Uh oh!

github-actions Bot commented Jul 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ UI Checkstyle Failed

❌ ESLint + Prettier + Organise Imports (src)

❌ Tailwind Audit

❌ Antd + Less Deprecation Guard

Uh oh!

gitar-bot Bot commented Jul 29, 2026

Uh oh!

sonarqubecloud Bot commented Jul 29, 2026

Quality Gate passed for 'open-metadata-ui'

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Rohit0301 commented Jul 28, 2026 •

edited by greptile-apps Bot

Loading

github-actions Bot commented Jul 28, 2026 •

edited

Loading

github-actions Bot commented Jul 28, 2026 •

edited

Loading

github-actions Bot commented Jul 29, 2026 •

edited

Loading