From 32f18449e92c734b5aaaab47c8c55c1818bcf20d Mon Sep 17 00:00:00 2001
From: Aniket Katkar <aniketkatkar97@gmail.com>
Date: Wed, 19 Apr 2023 10:05:33 +0530
Subject: [PATCH] Increased the maximum width of the advanced search quick
 dropdown (#11117)

Brought common quick filters in the front for all the tabs
---
 .../SearchDropdown/SearchDropdown.less        |   2 +-
 .../SearchDropdown/SearchDropdown.tsx         | 172 +++++++++++-------
 .../ui/src/utils/AdvancedSearchUtils.tsx      |  10 +-
 3 files changed, 109 insertions(+), 75 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/SearchDropdown/SearchDropdown.less b/openmetadata-ui/src/main/resources/ui/src/components/SearchDropdown/SearchDropdown.less
index cbf00f2c124..3623c0ed4f8 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/SearchDropdown/SearchDropdown.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/SearchDropdown/SearchDropdown.less
@@ -34,7 +34,7 @@
   }
 
   .dropdown-option-label {
-    max-width: 200px;
+    max-width: 65vw;
   }
 
   .update-btn {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/SearchDropdown/SearchDropdown.tsx b/openmetadata-ui/src/main/resources/ui/src/components/SearchDropdown/SearchDropdown.tsx
index ff2f64a0d5b..f936a8f7981 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/SearchDropdown/SearchDropdown.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/SearchDropdown/SearchDropdown.tsx
@@ -14,6 +14,7 @@
 import {
   Button,
   Card,
+  Col,
   Divider,
   Dropdown,
   Input,
@@ -26,7 +27,14 @@ import {
 } from 'antd';
 import classNames from 'classnames';
 import { debounce, isEmpty, isUndefined } from 'lodash';
-import React, { FC, useEffect, useMemo, useState } from 'react';
+import React, {
+  FC,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 import { ReactComponent as DropDown } from '../../assets/svg/DropDown.svg';
 import {
@@ -141,78 +149,104 @@ const SearchDropdown: FC<SearchDropdownProps> = ({
     setSelectedOptions(selectedKeys);
   }, [isDropDownOpen, selectedKeys]);
 
+  const getDropdownBody = useCallback(
+    (menuNode: ReactNode) => {
+      if (isSuggestionsLoading) {
+        return (
+          <Row align="middle" className="p-y-sm" justify="center">
+            <Col>
+              <Loader size="small" />
+            </Col>
+          </Row>
+        );
+      }
+
+      return options.length > 0 || selectedOptions.length > 0 ? (
+        menuNode
+      ) : (
+        <Row align="middle" className="m-y-sm" justify="center">
+          <Col>
+            <Typography.Text>{t('message.no-data-available')}</Typography.Text>
+          </Col>
+        </Row>
+      );
+    },
+    [isSuggestionsLoading, options, selectedOptions]
+  );
+
+  const dropdownCardComponent = useCallback(
+    (menuNode: ReactNode) => (
+      <Card
+        bodyStyle={{ padding: 0 }}
+        className="custom-dropdown-render"
+        data-testid="drop-down-menu">
+        <Space direction="vertical" size={0}>
+          <div className="p-t-sm p-x-sm">
+            <Input
+              autoFocus
+              data-testid="search-input"
+              placeholder={`${t('label.search-entity', {
+                entity: label,
+              })}...`}
+              onChange={(e) => {
+                const { value } = e.target;
+                debouncedOnSearch(value);
+              }}
+            />
+          </div>
+          {showClearAllBtn && (
+            <>
+              <Divider className="m-t-xs m-b-0" />
+              <Button
+                className="p-0 m-l-sm"
+                data-testid="clear-button"
+                type="link"
+                onClick={handleClear}>
+                {t('label.clear-entity', {
+                  entity: t('label.all'),
+                })}
+              </Button>
+            </>
+          )}
+          <Divider
+            className={classNames(showClearAllBtn ? 'm-y-0' : 'm-t-xs m-b-0')}
+          />
+          {getDropdownBody(menuNode)}
+          <Space className="p-sm p-t-xss">
+            <Button
+              className="update-btn"
+              data-testid="update-btn"
+              size="small"
+              onClick={handleUpdate}>
+              {t('label.update')}
+            </Button>
+            <Button
+              data-testid="close-btn"
+              size="small"
+              type="link"
+              onClick={handleDropdownClose}>
+              {t('label.close')}
+            </Button>
+          </Space>
+        </Space>
+      </Card>
+    ),
+    [
+      label,
+      debouncedOnSearch,
+      showClearAllBtn,
+      handleClear,
+      getDropdownBody,
+      handleUpdate,
+      handleDropdownClose,
+    ]
+  );
+
   return (
     <Dropdown
       destroyPopupOnHide
       data-testid={searchKey}
-      dropdownRender={(menuNode) => (
-        <Card
-          bodyStyle={{ padding: 0 }}
-          className="custom-dropdown-render"
-          data-testid="drop-down-menu">
-          <Space direction="vertical" size={0}>
-            <div className="p-t-sm p-x-sm">
-              <Input
-                autoFocus
-                data-testid="search-input"
-                placeholder={`${t('label.search-entity', {
-                  entity: label,
-                })}...`}
-                onChange={(e) => {
-                  const { value } = e.target;
-                  debouncedOnSearch(value);
-                }}
-              />
-            </div>
-            {showClearAllBtn && (
-              <>
-                <Divider className="m-t-xs m-b-0" />
-                <Button
-                  className="p-0 m-l-sm"
-                  data-testid="clear-button"
-                  type="link"
-                  onClick={handleClear}>
-                  {t('label.clear-entity', {
-                    entity: t('label.all'),
-                  })}
-                </Button>
-              </>
-            )}
-            <Divider
-              className={classNames(showClearAllBtn ? 'm-y-0' : 'm-t-xs m-b-0')}
-            />
-            {isSuggestionsLoading ? (
-              <Row align="middle" className="p-y-sm" justify="center">
-                <Loader size="small" />
-              </Row>
-            ) : options.length > 0 || selectedOptions.length > 0 ? (
-              menuNode
-            ) : (
-              <Row className="m-y-sm" justify="center">
-                <Typography.Text>
-                  {t('message.no-data-available')}
-                </Typography.Text>
-              </Row>
-            )}
-            <Space className="p-sm p-t-xss">
-              <Button
-                className="update-btn"
-                data-testid="update-btn"
-                size="small"
-                onClick={handleUpdate}>
-                {t('label.update')}
-              </Button>
-              <Button
-                data-testid="close-btn"
-                size="small"
-                type="link"
-                onClick={handleDropdownClose}>
-                {t('label.close')}
-              </Button>
-            </Space>
-          </Space>
-        </Card>
-      )}
+      dropdownRender={dropdownCardComponent}
       key={searchKey}
       menu={{ items: menuOptions, onClick: handleMenuItemClick }}
       open={isDropDownOpen}
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/AdvancedSearchUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/AdvancedSearchUtils.tsx
index 38c5ac3b4dc..6c0f211ab45 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/AdvancedSearchUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/AdvancedSearchUtils.tsx
@@ -47,23 +47,23 @@ import SVGIcons, { Icons } from './SvgUtils';
 export const getDropDownItems = (index: string) => {
   switch (index) {
     case SearchIndex.TABLE:
-      return [...TABLE_DROPDOWN_ITEMS, ...COMMON_DROPDOWN_ITEMS];
+      return [...COMMON_DROPDOWN_ITEMS, ...TABLE_DROPDOWN_ITEMS];
 
     case SearchIndex.TOPIC:
-      return [...TOPIC_DROPDOWN_ITEMS, ...COMMON_DROPDOWN_ITEMS];
+      return [...COMMON_DROPDOWN_ITEMS, ...TOPIC_DROPDOWN_ITEMS];
 
     case SearchIndex.DASHBOARD:
-      return [...DASHBOARD_DROPDOWN_ITEMS, ...COMMON_DROPDOWN_ITEMS];
+      return [...COMMON_DROPDOWN_ITEMS, ...DASHBOARD_DROPDOWN_ITEMS];
 
     case SearchIndex.PIPELINE:
-      return [...PIPELINE_DROPDOWN_ITEMS, ...COMMON_DROPDOWN_ITEMS];
+      return [...COMMON_DROPDOWN_ITEMS, ...PIPELINE_DROPDOWN_ITEMS];
 
     case SearchIndex.MLMODEL:
       return [
         ...COMMON_DROPDOWN_ITEMS.filter((item) => item.key !== 'service_type'),
       ];
     case SearchIndex.CONTAINER:
-      return [...CONTAINER_DROPDOWN_ITEMS, ...COMMON_DROPDOWN_ITEMS];
+      return [...COMMON_DROPDOWN_ITEMS, ...CONTAINER_DROPDOWN_ITEMS];
     case SearchIndex.GLOSSARY:
       return [...GLOSSARY_DROPDOWN_ITEMS];