Fixes #26939: Add FQN subtitle to Custom Property entity references

openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyValue.test.tsx

@@ -433,9 +433,7 @@ describe('Test PropertyValue Component', () => {
     expect(
       await screen.findByTestId('entityReference-value')
     ).toBeInTheDocument();
-    expect(
-      await screen.findByTestId('entityReference-value')
-    ).toHaveTextContent('entityReferenceName');
+    expect(screen.getByText('entityReferenceName')).toBeInTheDocument();
 
     await act(async () => {
       fireEvent.click(iconElement);
@@ -496,4 +494,109 @@ describe('Test PropertyValue Component', () => {
       await screen.findByTestId('entity-reference-select')
     ).toBeInTheDocument();
   });
+
+  it('should show FQN subtitle for entityReference type', async () => {
+    const extension = {
+      yNumber: {
+        id: 'entityReferenceId',
+        name: 'entityReferenceName',
+        fullyQualifiedName: 'service.schema.entityReferenceName',
+        type: 'entityReference',
+      },
+    };
+    const propertyType = {
+      ...mockData.property.propertyType,
+      name: 'entityReference',
+    };
+    render(
+      <PropertyValue
+        {...mockData}
+        extension={extension}
+        property={{ ...mockData.property, propertyType: propertyType }}
+      />,
+      { wrapper: MemoryRouter }
+    );
+
+    expect(
+      await screen.findByTestId('entityReference-value')
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText('service.schema.entityReferenceName')
+    ).toBeInTheDocument();
+  });
+
+  it('should show FQN subtitle for entityReferenceList type', async () => {
+    const extension = {
+      yNumber: [
+        {
+          id: 'entityReferenceId1',
+          name: 'entityReferenceName1',
+          fullyQualifiedName: 'service.schema.entityReferenceName1',
+          type: 'entityReference',
+        },
+        {
+          id: 'entityReferenceId2',
+          name: 'entityReferenceName2',
+          fullyQualifiedName: 'service.schema.entityReferenceName2',
+          type: 'entityReference',
+        },
+      ],
+    };
+    const propertyType = {
+      ...mockData.property.propertyType,
+      name: 'entityReferenceList',
+    };
+    render(
+      <PropertyValue
+        {...mockData}
+        extension={extension}
+        property={{ ...mockData.property, propertyType: propertyType }}
+      />,
+      { wrapper: MemoryRouter }
+    );
+
+    expect(
+      await screen.findByTestId('entityReferenceName1')
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText('service.schema.entityReferenceName1')
+    ).toBeInTheDocument();
+
+    expect(
+      await screen.findByTestId('entityReferenceName2')
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText('service.schema.entityReferenceName2')
+    ).toBeInTheDocument();
+  });
+
+  it('should not show FQN subtitle when fullyQualifiedName is absent', async () => {
+    const extension = {
+      yNumber: {
+        id: 'entityReferenceId',
+        name: 'entityReferenceName',
+        type: 'entityReference',
+      },
+    };
+    const propertyType = {
+      ...mockData.property.propertyType,
+      name: 'entityReference',
+    };
+    render(
+      <PropertyValue
+        {...mockData}
+        extension={extension}
+        property={{ ...mockData.property, propertyType: propertyType }}
+      />,
+      { wrapper: MemoryRouter }
+    );
+
+    expect(
+      await screen.findByTestId('entityReference-value')
+    ).toBeInTheDocument();
+    expect(screen.getByText('entityReferenceName')).toBeInTheDocument();
+
+    // Asserting that the subtitle did not mistakenly render 'undefined' or an empty variable text
+    expect(screen.queryByText('undefined')).not.toBeInTheDocument();
+  });
 });

openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyValue.tsx

@@ -864,11 +864,20 @@ export const PropertyValue: FC<PropertyValueProps> = ({
           searchClassBase.getEntityIcon(item.type)
         )}
       </div>
-      <Typography.Text
-        className="text-left text-primary truncate w-max-full"
-        ellipsis={{ tooltip: true }}>
-        {getEntityName(item)}
-      </Typography.Text>
+      <div className="d-flex flex-col">
+        <Typography.Text
+          className="text-left text-primary truncate w-max-full"
+          ellipsis={{ tooltip: true }}>
+          {getEntityName(item)}
+        </Typography.Text>
+        {item.fullyQualifiedName && (
+          <Typography.Text
+            className="text-grey-muted text-xs truncate w-max-full"
+            ellipsis={{ tooltip: true }}>
+            {item.fullyQualifiedName}
+          </Typography.Text>
+        )}
+      </div>
     </Link>
   );