= ({
}
};
+ // function to render text with optional link
+ const renderNameWithOptionalLink = (displayText: ReactNode) => {
+ return link ? (
+
+ {displayText}
+
+ ) : (
+
+ {displayText}
+
+ );
+ };
+
+ const renderMainContent = useMemo(() => {
+ if (isEmpty(displayName)) {
+ return renderNameWithOptionalLink(name);
+ }
+
+ // Show both name and displayName when displayName exists
+ return (
+ <>
+
+ {name}
+
+
+ {renderNameWithOptionalLink(displayName)}
+
+ >
+ );
+ }, [displayName, name, renderNameWithOptionalLink]);
+
return (
-
- {isEmpty(displayName) ? (
-
- {name}
-
- ) : (
- <>
- {name}
-
-
- {displayName}
-
-
- >
- )}
+
+ {renderMainContent}
{allowRename ? (
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/fonts.less b/openmetadata-ui/src/main/resources/ui/src/styles/fonts.less
index beb18d0d5ea..82329f60dfd 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/fonts.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/fonts.less
@@ -103,6 +103,9 @@ pre {
.text-gray-400 {
color: @grey-7;
}
+.text-grey-600 {
+ color: @grey-600;
+}
.text-red-3 {
color: @red-3;
}