fix(UI): Showing platform instances only once (#12806)

Author: sakethvarma397

datahub-web-react/src/app/previewV2/BrowsePaths.tsx

@@ -71,12 +71,16 @@ const BrowsePathSection = ({ path, linksDisabled }: { path: BrowsePathEntry } &
     if (!path.entity) {
         return <PlatFormTitle>{path.name}</PlatFormTitle>;
     }
+
+    // Till we have a DataPlatform instance page
+    const hasDataPlatformInstance = path.name?.includes('dataPlatformInstance');
+
     return (
         <ContextPathEntityLink
             key={path?.entity?.urn}
             entity={path?.entity}
             style={{ fontSize: '12px' }}
-            linkDisabled={linksDisabled}
+            linkDisabled={linksDisabled || hasDataPlatformInstance}
         />
     );
 };

datahub-web-react/src/app/previewV2/ContextPath.tsx

@@ -82,6 +82,7 @@ const PlatFormTitle = styled.span`
 interface Props {
     // eslint-disable-next-line react/no-unused-prop-types
     entityLogoComponent?: JSX.Element;
+    // eslint-disable-next-line react/no-unused-prop-types
     instanceId?: string;
     // eslint-disable-next-line react/no-unused-prop-types
     typeIcon?: JSX.Element;
@@ -103,7 +104,6 @@ function ContextPath(props: Props) {
         entityType,
         parentEntities,
         browsePaths,
-        instanceId,
         entityTitleWidth = 200,
         previewType,
         isCompactView,
@@ -118,12 +118,10 @@ function ContextPath(props: Props) {
 
     const divider = <PlatformDivider>|</PlatformDivider>;
 
-    const hasPlatformInstance = !!instanceId;
     const hasBrowsePath = !!browsePaths?.path?.length && !isDefaultBrowsePath(browsePaths);
     const hasParentEntities = !!parentEntities?.length;
 
-    const showInstanceIdDivider = hasBrowsePath || hasParentEntities;
-    const showEntityTypeDivider = hasPlatformInstance || hasBrowsePath || hasParentEntities;
+    const showEntityTypeDivider = hasBrowsePath || hasParentEntities;
 
     return (
         <PlatformContentWrapper>
@@ -136,12 +134,6 @@ function ContextPath(props: Props) {
                 <PlatFormTitle>{capitalizeFirstLetterOnly(type)}</PlatFormTitle>
                 {showEntityTypeDivider && divider}
             </PlatformText>
-            {instanceId && (
-                <PlatformText>
-                    {instanceId}
-                    {showInstanceIdDivider && divider}
-                </PlatformText>
-            )}
             {hasBrowsePath ? (
                 <BrowsePaths
                     browsePaths={browsePaths}

datahub-web-react/src/app/previewV2/ContextPathEntityLink.tsx

@@ -45,7 +45,7 @@ const StyledLink = styled(Link)<{ $disabled?: boolean }>`
 
     :hover {
         color: ${({ $disabled }) => ($disabled ? REDESIGN_COLORS.LINK_GREY : colors.violet[500])};
-
+        cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};
         && svg {
             color: ${({ $disabled }) => ($disabled ? REDESIGN_COLORS.LINK_GREY : colors.violet[500])};
         }