From 582a10c8318eb40ff7279f16a9aa4081ef65cbf7 Mon Sep 17 00:00:00 2001
From: Karan Hotchandani <33024356+karanh37@users.noreply.github.com>
Date: Fri, 22 Nov 2024 16:12:47 +0530
Subject: [PATCH] fix minor styling of domain component (#18738)

---
 .../DomainSelectableList.component.tsx        | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/DomainSelectableList/DomainSelectableList.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/DomainSelectableList/DomainSelectableList.component.tsx
index 61b3c15f418..aecba1071cf 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/DomainSelectableList/DomainSelectableList.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/DomainSelectableList/DomainSelectableList.component.tsx
@@ -32,12 +32,16 @@ import {
   getEntityName,
   getEntityReferenceListFromEntities,
 } from '../../../utils/EntityUtils';
+import Fqn from '../../../utils/Fqn';
 import { getDomainPath } from '../../../utils/RouterUtils';
 import { SelectableList } from '../SelectableList/SelectableList.component';
 import './domain-select-dropdown.less';
 import { DomainSelectableListProps } from './DomainSelectableList.interface';
 
 export const DomainListItemRenderer = (props: EntityReference) => {
+  const isSubDomain = Fqn.split(props.fullyQualifiedName ?? '').length > 1;
+  const fqn = `(${props.fullyQualifiedName ?? ''})`;
+
   return (
     <div className="d-flex items-center gap-2">
       <DomainIcon
@@ -46,7 +50,17 @@ export const DomainListItemRenderer = (props: EntityReference) => {
         name="folder"
         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>
   );
 };
@@ -71,7 +85,7 @@ const DomainSelectableList = ({
     return [];
   }, [selectedDomain]);
 
-  const fetchOptions = async (searchText: string) => {
+  const fetchOptions = async (searchText: string, after?: string) => {
     if (searchText) {
       try {
         const res = await searchData(
@@ -97,6 +111,7 @@ const DomainSelectableList = ({
       try {
         const { data, paging } = await getDomainList({
           limit: PAGE_SIZE_MEDIUM,
+          after: after ?? undefined,
         });
         const filterData = getEntityReferenceListFromEntities(
           data,