From 847b226829cc475c5ada1c8c6b47ca44ef84f38d Mon Sep 17 00:00:00 2001
From: Karan Hotchandani <33024356+karanh37@users.noreply.github.com>
Date: Wed, 4 Sep 2024 11:11:05 +0530
Subject: [PATCH] show display name in suggestions with fqn (#17691)

(cherry picked from commit 74206a1bb3afc58068bdb8eb9dd4dad82a224206)
---
 .../ui/src/components/AppBar/Suggestions.tsx  |  4 +--
 .../resources/ui/src/utils/SearchUtils.tsx    | 27 ++++++-------------
 2 files changed, 9 insertions(+), 22 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppBar/Suggestions.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppBar/Suggestions.tsx
index 34903eae952..66c5d603c21 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AppBar/Suggestions.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AppBar/Suggestions.tsx
@@ -164,9 +164,7 @@ const Suggestions = ({
       <div data-testid={`group-${searchIndex}`}>
         {getGroupLabel(searchIndex)}
         {suggestions.map((suggestion: SearchSuggestions[number]) => {
-          return getSuggestionElement(suggestion, searchIndex, () =>
-            setIsOpen(false)
-          );
+          return getSuggestionElement(suggestion, () => setIsOpen(false));
         })}
       </div>
     );
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/SearchUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/SearchUtils.tsx
index 8b12ebec184..84d981fdd1b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/SearchUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/SearchUtils.tsx
@@ -12,7 +12,7 @@
  */
 
 import { SearchOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
+import { Button, Typography } from 'antd';
 import i18next from 'i18next';
 import { isEmpty } from 'lodash';
 import React from 'react';
@@ -29,10 +29,7 @@ import { ReactComponent as IconMlModal } from '../assets/svg/mlmodal.svg';
 import { ReactComponent as IconPipeline } from '../assets/svg/pipeline-grey.svg';
 import { ReactComponent as IconTag } from '../assets/svg/tag-grey.svg';
 import { ReactComponent as IconTopic } from '../assets/svg/topic-grey.svg';
-import {
-  FQN_SEPARATOR_CHAR,
-  WILD_CARD_CHAR,
-} from '../constants/char.constants';
+import { WILD_CARD_CHAR } from '../constants/char.constants';
 import {
   Option,
   SearchSuggestions,
@@ -202,28 +199,17 @@ export const getGroupLabel = (index: string) => {
 
 export const getSuggestionElement = (
   suggestion: SearchSuggestions[number],
-  index: string,
   onClickHandler?: () => void
 ) => {
   const entitySource = suggestion as SearchSourceAlias;
   const { fullyQualifiedName: fqdn = '', name, serviceType = '' } = suggestion;
-  let database;
-  let schema;
-  if (index === SearchIndex.TABLE) {
-    database = getPartialNameFromTableFQN(fqdn, [FqnPart.Database]);
-    schema = getPartialNameFromTableFQN(fqdn, [FqnPart.Schema]);
-  }
-
   const entityLink = searchClassBase.getEntityLink(entitySource);
   const dataTestId = `${getPartialNameFromTableFQN(fqdn, [
     FqnPart.Service,
   ])}-${name}`.replaceAll(`"`, '');
 
-  const displayText =
-    database && schema
-      ? `${database}${FQN_SEPARATOR_CHAR}${schema}${FQN_SEPARATOR_CHAR}${name}`
-      : entitySource.fullyQualifiedName ??
-        searchClassBase.getEntityName(entitySource);
+  const displayText = searchClassBase.getEntityName(entitySource);
+  const fqn = `(${entitySource.fullyQualifiedName ?? ''})`;
 
   return (
     <Button
@@ -242,13 +228,16 @@ export const getSuggestionElement = (
       key={fqdn}
       type="text">
       <Link
-        className="text-sm"
+        className="text-sm no-underline"
         data-testid="data-name"
         id={fqdn.replace(/\./g, '')}
         target={searchClassBase.getSearchEntityLinkTarget(entitySource)}
         to={entityLink}
         onClick={onClickHandler}>
         {displayText}
+        <Typography.Text className="m-l-xs text-xs" type="secondary">
+          {fqn}
+        </Typography.Text>
       </Link>
     </Button>
   );