show display name in suggestions with fqn (#17691)

(cherry picked from commit 74206a1bb3afc58068bdb8eb9dd4dad82a224206)
This commit is contained in:
Karan Hotchandani 2024-09-04 11:11:05 +05:30 committed by karanh37
parent f52282dfee
commit 847b226829
2 changed files with 9 additions and 22 deletions

View File

@ -164,9 +164,7 @@ const Suggestions = ({
<div data-testid={`group-${searchIndex}`}> <div data-testid={`group-${searchIndex}`}>
{getGroupLabel(searchIndex)} {getGroupLabel(searchIndex)}
{suggestions.map((suggestion: SearchSuggestions[number]) => { {suggestions.map((suggestion: SearchSuggestions[number]) => {
return getSuggestionElement(suggestion, searchIndex, () => return getSuggestionElement(suggestion, () => setIsOpen(false));
setIsOpen(false)
);
})} })}
</div> </div>
); );

View File

@ -12,7 +12,7 @@
*/ */
import { SearchOutlined } from '@ant-design/icons'; import { SearchOutlined } from '@ant-design/icons';
import { Button } from 'antd'; import { Button, Typography } from 'antd';
import i18next from 'i18next'; import i18next from 'i18next';
import { isEmpty } from 'lodash'; import { isEmpty } from 'lodash';
import React from 'react'; 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 IconPipeline } from '../assets/svg/pipeline-grey.svg';
import { ReactComponent as IconTag } from '../assets/svg/tag-grey.svg'; import { ReactComponent as IconTag } from '../assets/svg/tag-grey.svg';
import { ReactComponent as IconTopic } from '../assets/svg/topic-grey.svg'; import { ReactComponent as IconTopic } from '../assets/svg/topic-grey.svg';
import { import { WILD_CARD_CHAR } from '../constants/char.constants';
FQN_SEPARATOR_CHAR,
WILD_CARD_CHAR,
} from '../constants/char.constants';
import { import {
Option, Option,
SearchSuggestions, SearchSuggestions,
@ -202,28 +199,17 @@ export const getGroupLabel = (index: string) => {
export const getSuggestionElement = ( export const getSuggestionElement = (
suggestion: SearchSuggestions[number], suggestion: SearchSuggestions[number],
index: string,
onClickHandler?: () => void onClickHandler?: () => void
) => { ) => {
const entitySource = suggestion as SearchSourceAlias; const entitySource = suggestion as SearchSourceAlias;
const { fullyQualifiedName: fqdn = '', name, serviceType = '' } = suggestion; 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 entityLink = searchClassBase.getEntityLink(entitySource);
const dataTestId = `${getPartialNameFromTableFQN(fqdn, [ const dataTestId = `${getPartialNameFromTableFQN(fqdn, [
FqnPart.Service, FqnPart.Service,
])}-${name}`.replaceAll(`"`, ''); ])}-${name}`.replaceAll(`"`, '');
const displayText = const displayText = searchClassBase.getEntityName(entitySource);
database && schema const fqn = `(${entitySource.fullyQualifiedName ?? ''})`;
? `${database}${FQN_SEPARATOR_CHAR}${schema}${FQN_SEPARATOR_CHAR}${name}`
: entitySource.fullyQualifiedName ??
searchClassBase.getEntityName(entitySource);
return ( return (
<Button <Button
@ -242,13 +228,16 @@ export const getSuggestionElement = (
key={fqdn} key={fqdn}
type="text"> type="text">
<Link <Link
className="text-sm" className="text-sm no-underline"
data-testid="data-name" data-testid="data-name"
id={fqdn.replace(/\./g, '')} id={fqdn.replace(/\./g, '')}
target={searchClassBase.getSearchEntityLinkTarget(entitySource)} target={searchClassBase.getSearchEntityLinkTarget(entitySource)}
to={entityLink} to={entityLink}
onClick={onClickHandler}> onClick={onClickHandler}>
{displayText} {displayText}
<Typography.Text className="m-l-xs text-xs" type="secondary">
{fqn}
</Typography.Text>
</Link> </Link>
</Button> </Button>
); );