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

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

@@ -30,10 +30,10 @@
 import { SearchIndex } from '../../../enums/search.enum';
 import { EntityReference } from '../../../generated/entity/type';
 import { searchQuery } from '../../../rest/searchAPI';
-import { getEntityNodeIcon } from '../../../utils/EntityLineageNodeUtils';
 import { getEntityName } from '../../../utils/EntityNameUtils';
 import { getPartialNameFromTableFQN } from '../../../utils/FqnUtils';
 import serviceUtilClassBase from '../../../utils/ServiceUtilClassBase';
+import { getEntityIcon } from '../../../utils/TableUtils';
 import { showErrorToast } from '../../../utils/ToastUtils';
 import { ExploreSearchIndex } from '../../Explore/ExplorePage.interface';
 import { SourceType } from '../../SearchedData/SearchedData.interface';
@@ -51,7 +51,7 @@
   onSelectHandler,
 }) => {
   const { t } = useTranslation();
   const selectRef = useRef<any>(null);
 
   const [data, setData] = useState<Array<SourceType>>([]);
   const [searchValue, setSearchValue] = useState<string>('');
@@ -156,17 +156,18 @@
     getSearchResults(searchValue);
   }, []);
 
-  const Icon = getEntityNodeIcon(entityType);
+  const entityIcon = useMemo(
+    () => getEntityIcon(entityType, 'tw:h-4 tw:w-4'),
+    [entityType]
+  );
 
   return (
     <Row
       className="p-md items-center"
       data-testid="suggestion-node"
       gutter={8}
       wrap={false}>
-      <Col>
-        <Icon height={16} name="entity-icon" width={16} />
-      </Col>
+      <Col>{entityIcon}</Col>
       <Col flex="1">
         <Select
           autoFocus

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

@@ -33,6 +33,8 @@ import {
   getExploreQueryFilterMust,
 } from '../../utils/ExploreUtils';
 import { translateWithNestedKeys } from '../../utils/i18next/LocalUtil';
+import searchClassBase from '../../utils/SearchClassBase';
+import { EntityIconSize } from '../../utils/TableUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
 import SearchDropdown from '../SearchDropdown/SearchDropdown';
 import { SearchDropdownOption } from '../SearchDropdown/SearchDropdown.interface';
@@ -60,6 +62,26 @@ const getOptionLabelFormatter = (
     ? formatEntityTypeLabel
     : undefined;
 
+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-quaternary',
+        {},
+        EntityIconSize.Size16
+      ) ?? undefined,
+  }));
+};
+
 const ExploreQuickFilters: FC<ExploreQuickFiltersProps> = ({
   fields,
   index,
@@ -154,7 +176,7 @@ const ExploreQuickFilters: FC<ExploreQuickFiltersProps> = ({
   ) => {
     const staticOptions = getStaticOptions(key);
     if (staticOptions) {
-      setOptions(staticOptions);
+      setOptions(addEntityTypeIcons(key, staticOptions));
 
       return;
     }
@@ -192,12 +214,15 @@ const ExploreQuickFilters: FC<ExploreQuickFiltersProps> = ({
     }
 
     setOptions(
-      uniqWith(
-        getOptionsFromAggregationBucket(
-          buckets,
-          getOptionLabelFormatter(key, untitledDropdown)
-        ),
-        isEqual
+      addEntityTypeIcons(
+        key,
+        uniqWith(
+          getOptionsFromAggregationBucket(
+            buckets,
+            getOptionLabelFormatter(key, untitledDropdown)
+          ),
+          isEqual
+        )
       )
     );
   };
@@ -209,7 +234,7 @@ const ExploreQuickFilters: FC<ExploreQuickFiltersProps> = ({
   ) => {
     const staticOptions = getStaticOptions(key);
     if (staticOptions) {
-      setOptions(staticOptions);
+      setOptions(addEntityTypeIcons(key, staticOptions));
 
       return;
     }
@@ -238,7 +263,7 @@ const ExploreQuickFilters: FC<ExploreQuickFiltersProps> = ({
             option.label.toLowerCase().includes(value.toLowerCase())
           )
         : staticOptions;
-      setOptions(filteredOptions);
+      setOptions(addEntityTypeIcons(key, filteredOptions));
 
       return;
     }
@@ -270,12 +295,15 @@ const ExploreQuickFilters: FC<ExploreQuickFiltersProps> = ({
       const buckets =
         res.data.aggregations[`sterms#${searchKeyToUse}`]?.buckets ?? [];
       setOptions(
-        uniqWith(
-          getOptionsFromAggregationBucket(
-            buckets,
-            getOptionLabelFormatter(key, untitledDropdown)
-          ),
-          isEqual
+        addEntityTypeIcons(
+          key,
+          uniqWith(
+            getOptionsFromAggregationBucket(
+              buckets,
+              getOptionLabelFormatter(key, untitledDropdown)
+            ),
+            isEqual
+          )
         )
       );
     } catch (error) {

openmetadata-ui/src/main/resources/ui/src/components/Explore/QuickFilterDropdown.tsx

@@ -216,7 +216,16 @@ const QuickFilterDropdown: FC<QuickFilterDropdownProps> = ({
                   <Checkbox
                     data-testid={`${option.label}-checkbox`}
                     isSelected={isOptionSelected(option)}
-                    label={option.label}
+                    label={
+                      option.icon ? (
+                        <span className="tw:flex tw:items-center tw:gap-1.5">
+                          {option.icon}
+                          {option.label}
+                        </span>
+                      ) : (
+                        option.label
+                      )
+                    }
                     onChange={() => handleOptionToggle(option)}
                   />
                   {!hideCounts && !isUndefined(option.count) && (

openmetadata-ui/src/main/resources/ui/src/components/SearchDropdown/SearchDropdown.interface.ts

@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import { ReactNode } from 'react';
 import { ExploreSearchIndex } from '../Explore/ExplorePage.interface';
 
 export interface SearchDropdownProps {
@@ -49,4 +50,5 @@ export interface SearchDropdownOption {
   labelKeyOptions?: Record<string, string | number | boolean>;
   count?: number;
   description?: string;
+  icon?: ReactNode;
 }