fix(web) clean up domains ui (#13143)

datahub-web-react/src/app/domainV2/DomainSearch.tsx

@@ -28,8 +28,8 @@ const ResultsWrapper = styled.div`
     position: absolute;
     max-height: 210px;
     overflow: auto;
-    width: calc(100% - 32px);
-    left: 16px;
+    width: calc(100% - 8px);
+    left: 4px;
     top: 55px;
     z-index: 1;
 `;

datahub-web-react/src/app/domainV2/DomainSearchResultItem.tsx

@@ -4,14 +4,15 @@ import Highlight from 'react-highlighter';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components/macro';
 
-import DomainIcon from '@app/domainV2/DomainIcon';
 import { getParentDomains } from '@app/domainV2/utils';
 import { IconStyleType } from '@app/entity/Entity';
 import EntityRegistry from '@app/entity/EntityRegistry';
 import { ANTD_GRAY } from '@app/entity/shared/constants';
+import { DomainColoredIcon } from '@app/entityV2/shared/links/DomainColoredIcon';
 import ParentEntities from '@app/search/filters/ParentEntities';
+import colors from '@src/alchemy-components/theme/foundations/colors';
 
-import { Entity, EntityType } from '@types';
+import { Domain, Entity, EntityType } from '@types';
 
 type Props = {
     entity: Entity;
@@ -21,7 +22,7 @@ type Props = {
 };
 
 const SearchResult = styled(Link)`
-    color: #262626;
+    color: ${colors.gray[600]};
     display: flex;
     align-items: center;
     gap: 8px;
@@ -34,12 +35,21 @@ const SearchResult = styled(Link)`
     }
 `;
 
+const ContentWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 1;
+    align-self: flex-start;
+    overflow: hidden;
+`;
+
 const IconWrapper = styled.span``;
 
 const highlightMatchStyle = {
     fontWeight: 'bold',
     background: 'none',
     padding: 0,
+    color: colors.gray[600],
 };
 
 function DomainSearchResultItem({ entity, entityRegistry, query, onResultClick }: Props) {
@@ -47,22 +57,17 @@ function DomainSearchResultItem({ entity, entityRegistry, query, onResultClick }
         <SearchResult to={entityRegistry.getEntityUrl(entity.type, entity.urn)} onClick={onResultClick}>
             <IconWrapper>
                 {entity.type === EntityType.Domain ? (
-                    <DomainIcon
-                        style={{
-                            fontSize: 16,
-                            color: '#BFBFBF',
-                        }}
-                    />
+                    <DomainColoredIcon size={24} fontSize={12} domain={entity as Domain} />
                 ) : (
                     entityRegistry.getIcon(entity.type, 12, IconStyleType.ACCENT)
                 )}
             </IconWrapper>
-            <div>
-                <ParentEntities parentEntities={getParentDomains(entity, entityRegistry)} />
+            <ContentWrapper>
                 <Highlight matchStyle={highlightMatchStyle} search={query}>
                     {entityRegistry.getDisplayName(entity.type, entity)}
                 </Highlight>
-            </div>
+                <ParentEntities parentEntities={getParentDomains(entity, entityRegistry)} />
+            </ContentWrapper>
         </SearchResult>
     );
 }

datahub-web-react/src/app/entityV2/shared/links/DomainColoredIcon.tsx

@@ -12,7 +12,7 @@ const DomainIconContainer = styled.div<{ color: string; size: number }>`
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 8px;
+    border-radius: ${(props) => props.size / 4}px;
     height: ${(props) => props.size}px;
     width: ${(props) => props.size}px;
     min-width: ${(props) => props.size}px;

datahub-web-react/src/app/search/filters/ParentEntities.tsx

@@ -1,16 +1,18 @@
 import { FolderOpenOutlined } from '@ant-design/icons';
 import { Tooltip, Typography } from 'antd';
+import { CaretRight } from 'phosphor-react';
 import React from 'react';
 import styled from 'styled-components';
 
 import { ANTD_GRAY } from '@app/entity/shared/constants';
 import { useEntityRegistry } from '@app/useEntityRegistry';
+import colors from '@src/alchemy-components/theme/foundations/colors';
 
 import { Entity } from '@types';
 
 const ParentNodesWrapper = styled.div`
     font-size: 12px;
-    color: ${ANTD_GRAY[7]};
+    color: ${colors.gray[1700]};
     display: flex;
     align-items: center;
     margin-bottom: 3px;
@@ -24,6 +26,8 @@ const ParentNode = styled(Typography.Text)<{ color?: string }>`
 
 export const ArrowWrapper = styled.span`
     margin: 0 3px;
+    display: flex;
+    align-items: center;
 `;
 
 const StyledTooltip = styled(Tooltip)`
@@ -32,14 +36,21 @@ const StyledTooltip = styled(Tooltip)`
     overflow: hidden;
 `;
 
+const TooltipWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+`;
+
 const DEFAULT_NUM_VISIBLE = 2;
 
 interface Props {
     parentEntities: Entity[];
     numVisible?: number;
+    hideIcon?: boolean;
 }
 
-export default function ParentEntities({ parentEntities, numVisible = DEFAULT_NUM_VISIBLE }: Props) {
+export default function ParentEntities({ parentEntities, numVisible = DEFAULT_NUM_VISIBLE, hideIcon = false }: Props) {
     const entityRegistry = useEntityRegistry();
 
     // parent nodes/domains are returned with direct parent first
@@ -55,36 +66,53 @@ export default function ParentEntities({ parentEntities, numVisible = DEFAULT_NU
             overlayStyle={hasHiddenEntities ? { maxWidth: 450 } : { display: 'none' }}
             placement="top"
             title={
-                <>
+                <TooltipWrapper>
                     {orderedParentEntities.map((parentEntity, index) => (
                         <>
-                            <FolderOpenOutlined />
+                            {!hideIcon && <FolderOpenOutlined />}
                             <ParentNode color="white">
-                                {entityRegistry.getDisplayName(parentEntity.type, parentEntity)}
+                                {entityRegistry.getDisplayName(parentEntity.type, parentEntity) || 'Unknown'}
                             </ParentNode>
-                            {index !== orderedParentEntities.length - 1 && <ArrowWrapper>{'>'}</ArrowWrapper>}
+                            {index !== orderedParentEntities.length - 1 && (
+                                <ArrowWrapper>
+                                    <CaretRight />
+                                </ArrowWrapper>
+                            )}
                         </>
                     ))}
-                </>
+                </TooltipWrapper>
             }
         >
             <ParentNodesWrapper>
-                {hasHiddenEntities &&
-                    [...Array(numHiddenEntities)].map(() => (
-                        <>
-                            <FolderOpenOutlined />
-                            <ArrowWrapper>{'>'}</ArrowWrapper>
-                        </>
-                    ))}
+                {hasHiddenEntities && (
+                    <>
+                        {!hideIcon ? (
+                            [...Array(numHiddenEntities)].map(() => <FolderOpenOutlined />)
+                        ) : (
+                            <>+{numHiddenEntities}</>
+                        )}
+                        <ArrowWrapper>
+                            <CaretRight />
+                        </ArrowWrapper>
+                    </>
+                )}
                 {visibleNodes.map((parentEntity, index) => {
                     const displayName = entityRegistry.getDisplayName(parentEntity.type, parentEntity);
+                    const isLast = index === visibleNodes.length - 1;
                     return (
                         <>
-                            <FolderOpenOutlined />
-                            <ParentNode ellipsis={!hasHiddenEntities ? { tooltip: displayName } : true}>
-                                {displayName}
+                            {!hideIcon && <FolderOpenOutlined style={{ marginRight: 4 }} />}
+                            <ParentNode
+                                style={isLast ? { flexShrink: 1 } : { flexShrink: 2 }}
+                                ellipsis={!hasHiddenEntities ? { tooltip: displayName } : true}
+                            >
+                                {displayName || 'Unknown'}
                             </ParentNode>
-                            {index !== visibleNodes.length - 1 && <ArrowWrapper>{'>'}</ArrowWrapper>}
+                            {!isLast && (
+                                <ArrowWrapper>
+                                    <CaretRight />
+                                </ArrowWrapper>
+                            )}
                         </>
                     );
                 })}