Minor search issues

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

@@ -237,6 +237,7 @@ const CustomControls: FC<ControlProps> = ({
               </Button>
             </Dropdown>
             <ExploreQuickFilters
+              independent
               aggregations={{}}
               fields={selectedQuickFilters}
               index={SearchIndex.ALL}

openmetadata-ui/src/main/resources/ui/src/components/Explore/ExploreQuickFilters.interface.ts

@@ -23,6 +23,7 @@ export interface ExploreQuickFiltersProps {
   onAdvanceSearch?: () => void;
   showDeleted?: boolean;
   onChangeShowDeleted?: (showDeleted: boolean) => void;
+  independent?: boolean; // flag to indicate if the filters are independent of aggregations
 }
 
 export interface FilterFieldsMenuItem {

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

@@ -41,6 +41,7 @@ const ExploreQuickFilters: FC<ExploreQuickFiltersProps> = ({
   fields,
   index,
   aggregations,
+  independent = false,
   onFieldValueSelect,
 }) => {
   const location = useLocation();
@@ -151,7 +152,7 @@ const ExploreQuickFilters: FC<ExploreQuickFiltersProps> = ({
 
         return;
       }
-      if (aggregations?.[key] && key !== TIER_FQN_KEY) {
+      if (key !== TIER_FQN_KEY) {
         const res = await getAggregateFieldOptions(
           index,
           key,
@@ -197,6 +198,7 @@ const ExploreQuickFilters: FC<ExploreQuickFiltersProps> = ({
           <SearchDropdown
             highlight
             fixedOrderOptions={field.key === TIER_FQN_KEY}
+            independent={independent}
             index={index as ExploreSearchIndex}
             isSuggestionsLoading={isOptionsLoading}
             key={field.key}

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

@@ -26,6 +26,7 @@ export interface SearchDropdownProps {
   onChange: (values: SearchDropdownOption[], searchKey: string) => void;
   onGetInitialOptions?: (searchKey: string) => void;
   onSearch: (searchText: string, searchKey: string) => void;
+  independent?: boolean; // flag to indicate if the filters are independent of aggregations
 }
 
 export interface SearchDropdownOption {

openmetadata-ui/src/main/resources/ui/src/components/SearchDropdown/SearchDropdown.tsx

@@ -63,6 +63,7 @@ const SearchDropdown: FC<SearchDropdownProps> = ({
   onGetInitialOptions,
   onSearch,
   index,
+  independent = false,
 }) => {
   const tabsInfo = searchClassBase.getTabsInfo();
   const { t } = useTranslation();
@@ -75,9 +76,11 @@ const SearchDropdown: FC<SearchDropdownProps> = ({
   // derive menu props from options and selected keys
   const menuOptions: MenuProps['items'] = useMemo(() => {
     // Filtering out selected options
-    const selectedOptionsObj = options.filter((option) =>
-      selectedOptions.find((selectedOpt) => option.key === selectedOpt.key)
-    );
+    const selectedOptionsObj = independent
+      ? selectedOptions
+      : options.filter((option) =>
+          selectedOptions.find((selectedOpt) => option.key === selectedOpt.key)
+        );
 
     if (fixedOrderOptions) {
       return options.map((item) => ({
@@ -116,7 +119,7 @@ const SearchDropdown: FC<SearchDropdownProps> = ({
 
       return [...selectedOptionKeys, ...otherOptions];
     }
-  }, [options, selectedOptions, fixedOrderOptions]);
+  }, [options, selectedOptions, fixedOrderOptions, independent]);
 
   // handle menu item click
   const handleMenuItemClick: MenuItemProps['onClick'] = (info) => {

openmetadata-ui/src/main/resources/ui/src/pages/ExplorePage/ExplorePageV1.component.tsx

@@ -52,7 +52,6 @@ import { findActiveSearchIndex } from '../../utils/Explore.utils';
 import { getCombinedQueryFilterObject } from '../../utils/ExplorePage/ExplorePageUtils';
 import searchClassBase from '../../utils/SearchClassBase';
 import { escapeESReservedCharacters } from '../../utils/StringsUtils';
-import { getEntityIcon } from '../../utils/TableUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
 import {
   QueryFieldInterface,
@@ -220,38 +219,42 @@ const ExplorePageV1: FunctionComponent = () => {
 
   const tabItems = useMemo(() => {
     const items = Object.entries(tabsInfo).map(
-      ([tabSearchIndex, tabDetail]) => ({
-        key: tabSearchIndex,
-        label: (
-          <div
-            className="d-flex items-center justify-between"
-            data-testid={`${lowerCase(tabDetail.label)}-tab`}>
-            <div className="d-flex items-center">
-              <span className="explore-icon d-flex m-r-xs">
-                {getEntityIcon(tabSearchIndex)}
+      ([tabSearchIndex, tabDetail]) => {
+        const Icon = tabDetail.icon;
+
+        return {
+          key: tabSearchIndex,
+          label: (
+            <div
+              className="d-flex items-center justify-between"
+              data-testid={`${lowerCase(tabDetail.label)}-tab`}>
+              <div className="d-flex items-center">
+                <span className="explore-icon d-flex m-r-xs">
+                  <Icon />
+                </span>
+                <Typography.Text
+                  className={
+                    tabSearchIndex === searchIndex ? 'text-primary' : ''
+                  }>
+                  {tabDetail.label}
+                </Typography.Text>
+              </div>
+              <span>
+                {!isNil(searchHitCounts)
+                  ? getCountBadge(
+                      searchHitCounts[tabSearchIndex as ExploreSearchIndex],
+                      '',
+                      tabSearchIndex === searchIndex
+                    )
+                  : getCountBadge()}
               </span>
-              <Typography.Text
-                className={
-                  tabSearchIndex === searchIndex ? 'text-primary' : ''
-                }>
-                {tabDetail.label}
-              </Typography.Text>
             </div>
-            <span>
-              {!isNil(searchHitCounts)
-                ? getCountBadge(
-                    searchHitCounts[tabSearchIndex as ExploreSearchIndex],
-                    '',
-                    tabSearchIndex === searchIndex
-                  )
-                : getCountBadge()}
-            </span>
-          </div>
-        ),
-        count: searchHitCounts
-          ? searchHitCounts[tabSearchIndex as ExploreSearchIndex]
-          : 0,
-      })
+          ),
+          count: searchHitCounts
+            ? searchHitCounts[tabSearchIndex as ExploreSearchIndex]
+            : 0,
+        };
+      }
     );
 
     return searchQueryParam

openmetadata-ui/src/main/resources/ui/src/utils/SearchClassBase.ts

@@ -10,7 +10,21 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
+import { SearchOutlined } from '@ant-design/icons';
 import i18next from 'i18next';
+import { ReactComponent as ClassificationIcon } from '../assets/svg/classification.svg';
+import { ReactComponent as IconDataModel } from '../assets/svg/data-model.svg';
+import { ReactComponent as GlossaryIcon } from '../assets/svg/glossary.svg';
+import { ReactComponent as DashboardIcon } from '../assets/svg/ic-dashboard.svg';
+import { ReactComponent as DataProductIcon } from '../assets/svg/ic-data-product.svg';
+import { ReactComponent as DatabaseIcon } from '../assets/svg/ic-database.svg';
+import { ReactComponent as MlModelIcon } from '../assets/svg/ic-ml-model.svg';
+import { ReactComponent as PipelineIcon } from '../assets/svg/ic-pipeline.svg';
+import { ReactComponent as SchemaIcon } from '../assets/svg/ic-schema.svg';
+import { ReactComponent as ContainerIcon } from '../assets/svg/ic-storage.svg';
+import { ReactComponent as IconStoredProcedure } from '../assets/svg/ic-stored-procedure.svg';
+import { ReactComponent as TableIcon } from '../assets/svg/ic-table.svg';
+import { ReactComponent as TopicIcon } from '../assets/svg/ic-topic.svg';
 import { ReactComponent as IconTable } from '../assets/svg/table-grey.svg';
 import {
   Option,
@@ -82,84 +96,98 @@ class SearchClassBase {
         sortingFields: tableSortingFields,
         sortField: INITIAL_SORT_FIELD,
         path: 'tables',
+        icon: TableIcon,
       },
       [SearchIndex.STORED_PROCEDURE]: {
         label: i18n.t('label.stored-procedure-plural'),
         sortingFields: entitySortingFields,
         sortField: INITIAL_SORT_FIELD,
         path: 'storedProcedure',
+        icon: IconStoredProcedure,
       },
       [SearchIndex.DATABASE]: {
         label: i18n.t('label.database-plural'),
         sortingFields: entitySortingFields,
         sortField: INITIAL_SORT_FIELD,
         path: 'databases',
+        icon: DatabaseIcon,
       },
       [SearchIndex.DATABASE_SCHEMA]: {
         label: i18n.t('label.database-schema-plural'),
         sortingFields: entitySortingFields,
         sortField: INITIAL_SORT_FIELD,
         path: 'databaseSchemas',
+        icon: SchemaIcon,
       },
       [SearchIndex.DASHBOARD]: {
         label: i18n.t('label.dashboard-plural'),
         sortingFields: entitySortingFields,
         sortField: INITIAL_SORT_FIELD,
         path: 'dashboards',
+        icon: DashboardIcon,
       },
       [SearchIndex.DASHBOARD_DATA_MODEL]: {
         label: i18n.t('label.dashboard-data-model-plural'),
         sortingFields: entitySortingFields,
         sortField: INITIAL_SORT_FIELD,
         path: 'dashboardDataModel',
+        icon: IconDataModel,
       },
       [SearchIndex.PIPELINE]: {
         label: i18n.t('label.pipeline-plural'),
         sortingFields: entitySortingFields,
         sortField: INITIAL_SORT_FIELD,
         path: 'pipelines',
+        icon: PipelineIcon,
       },
       [SearchIndex.TOPIC]: {
         label: i18n.t('label.topic-plural'),
         sortingFields: entitySortingFields,
         sortField: INITIAL_SORT_FIELD,
         path: 'topics',
+        icon: TopicIcon,
       },
       [SearchIndex.MLMODEL]: {
         label: i18n.t('label.ml-model-plural'),
         sortingFields: entitySortingFields,
         sortField: INITIAL_SORT_FIELD,
         path: 'mlmodels',
+        icon: MlModelIcon,
       },
       [SearchIndex.CONTAINER]: {
         label: i18n.t('label.container-plural'),
         sortingFields: entitySortingFields,
         sortField: INITIAL_SORT_FIELD,
         path: 'containers',
+        icon: ContainerIcon,
       },
       [SearchIndex.SEARCH_INDEX]: {
         label: i18n.t('label.search-index-plural'),
         sortingFields: entitySortingFields,
         sortField: INITIAL_SORT_FIELD,
         path: 'searchIndexes',
+        icon: SearchOutlined,
       },
       [SearchIndex.GLOSSARY]: {
         label: i18n.t('label.glossary-plural'),
         sortingFields: entitySortingFields,
         sortField: INITIAL_SORT_FIELD,
         path: 'glossaries',
+        icon: GlossaryIcon,
       },
       [SearchIndex.TAG]: {
         label: i18n.t('label.tag-plural'),
         sortingFields: entitySortingFields,
         sortField: INITIAL_SORT_FIELD,
         path: 'tags',
+        icon: ClassificationIcon,
       },
       [SearchIndex.DATA_PRODUCT]: {
         label: i18n.t('label.data-product-plural'),
         sortingFields: tableSortingFields,
         sortField: INITIAL_SORT_FIELD,
         path: 'dataProducts',
+        icon: DataProductIcon,
       },
     };
   }