fix minor styling of domain component (#18738)

This commit is contained in:
Karan Hotchandani 2024-11-22 16:12:47 +05:30 committed by GitHub
parent 21ee32fd62
commit 582a10c831
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -32,12 +32,16 @@ import {
getEntityName, getEntityName,
getEntityReferenceListFromEntities, getEntityReferenceListFromEntities,
} from '../../../utils/EntityUtils'; } from '../../../utils/EntityUtils';
import Fqn from '../../../utils/Fqn';
import { getDomainPath } from '../../../utils/RouterUtils'; import { getDomainPath } from '../../../utils/RouterUtils';
import { SelectableList } from '../SelectableList/SelectableList.component'; import { SelectableList } from '../SelectableList/SelectableList.component';
import './domain-select-dropdown.less'; import './domain-select-dropdown.less';
import { DomainSelectableListProps } from './DomainSelectableList.interface'; import { DomainSelectableListProps } from './DomainSelectableList.interface';
export const DomainListItemRenderer = (props: EntityReference) => { export const DomainListItemRenderer = (props: EntityReference) => {
const isSubDomain = Fqn.split(props.fullyQualifiedName ?? '').length > 1;
const fqn = `(${props.fullyQualifiedName ?? ''})`;
return ( return (
<div className="d-flex items-center gap-2"> <div className="d-flex items-center gap-2">
<DomainIcon <DomainIcon
@ -46,7 +50,17 @@ export const DomainListItemRenderer = (props: EntityReference) => {
name="folder" name="folder"
width={20} width={20}
/> />
<Typography.Text>{getEntityName(props)}</Typography.Text> <div className="d-flex items-center w-max-400">
<Typography.Text ellipsis>{getEntityName(props)}</Typography.Text>
{isSubDomain && (
<Typography.Text
ellipsis
className="m-l-xss text-xs"
type="secondary">
{fqn}
</Typography.Text>
)}
</div>
</div> </div>
); );
}; };
@ -71,7 +85,7 @@ const DomainSelectableList = ({
return []; return [];
}, [selectedDomain]); }, [selectedDomain]);
const fetchOptions = async (searchText: string) => { const fetchOptions = async (searchText: string, after?: string) => {
if (searchText) { if (searchText) {
try { try {
const res = await searchData( const res = await searchData(
@ -97,6 +111,7 @@ const DomainSelectableList = ({
try { try {
const { data, paging } = await getDomainList({ const { data, paging } = await getDomainList({
limit: PAGE_SIZE_MEDIUM, limit: PAGE_SIZE_MEDIUM,
after: after ?? undefined,
}); });
const filterData = getEntityReferenceListFromEntities( const filterData = getEntityReferenceListFromEntities(
data, data,