fix(summaryTab): UI fixes (#14778)

datahub-web-react/src/alchemy-components/components/Dropdown/reset-dropdown-menu-styles.less

@@ -18,4 +18,5 @@
 .ant-dropdown-menu-submenu-popup ul {
     max-height: 80vh;
     overflow-y: auto;
+    background: white;
 }

datahub-web-react/src/alchemy-components/components/Editor/toolbar/HeadingMenu.tsx

@@ -1,70 +1,46 @@
 import { useActive, useCommands } from '@remirror/react';
-import { Select } from 'antd';
-import React, { MouseEventHandler, useCallback } from 'react';
-import styled from 'styled-components';
+import React from 'react';
 
-import { ANTD_GRAY } from '@src/app/entityV2/shared/constants';
-
-const { Option } = Select;
+import { SimpleSelect } from '@components/components/Select';
 
 const OPTIONS = [
-    { tag: 'h1', label: 'Heading 1', value: 1 },
-    { tag: 'h2', label: 'Heading 2', value: 2 },
-    { tag: 'h3', label: 'Heading 3', value: 3 },
-    { tag: 'h4', label: 'Heading 4', value: 4 },
-    { tag: 'h5', label: 'Heading 5', value: 5 },
-    { tag: 'p', label: 'Normal', value: 0 },
+    { label: 'Heading 1', value: 1 },
+    { label: 'Heading 2', value: 2 },
+    { label: 'Heading 3', value: 3 },
+    { label: 'Heading 4', value: 4 },
+    { label: 'Heading 5', value: 5 },
+    { label: 'Normal', value: 0 },
 ];
 
-/* To mitigate overrides of the Select's width when using it in modals */
-const Wrapper = styled.div`
-    display: inline-block;
-    width: 120px;
-    border: 1px solid ${ANTD_GRAY[4.5]};
-    border-radius: 8px;
-`;
-
-const StyledSelect = styled(Select)`
-    font-weight: 500;
-    width: 100%;
-`;
+const DEFAULT_VALUE = 0;
 
 export const HeadingMenu = () => {
     const { toggleHeading } = useCommands();
     const active = useActive(true);
 
-    const activeHeading = OPTIONS.map(({ value }) => value).filter((level) => active.heading({ level }))?.[0] || 0;
+    const activeHeading =
+        OPTIONS.map(({ value }) => value).filter((level) => active.heading({ level }))?.[0] || DEFAULT_VALUE;
 
-    const handleMouseDown: MouseEventHandler<HTMLDivElement> = useCallback((e) => {
-        e.preventDefault();
-    }, []);
+    const options = OPTIONS.map((option) => ({
+        value: `${option.value}`,
+        label: option.label,
+    }));
 
     return (
-        <Wrapper>
-            <StyledSelect
-                defaultValue={0}
-                bordered={false}
-                dropdownMatchSelectWidth={false}
-                value={`${activeHeading}`}
-                optionLabelProp="label"
-                onChange={(value) => {
-                    const level = +`${value}`;
-                    if (level) {
-                        toggleHeading({ level });
-                    } else {
-                        toggleHeading();
-                    }
-                }}
-                onMouseDown={handleMouseDown}
-            >
-                {OPTIONS.map((option) => {
-                    return (
-                        <Option key={option.value} label={option.label} value={`${option.value}`}>
-                            {React.createElement(option.tag, null, option.label)}
-                        </Option>
-                    );
-                })}
-            </StyledSelect>
-        </Wrapper>
+        <SimpleSelect
+            values={[`${activeHeading}`]}
+            onUpdate={(values) => {
+                const value = values[0];
+                const level = +`${value}`;
+                if (level) {
+                    toggleHeading({ level });
+                } else {
+                    toggleHeading();
+                }
+            }}
+            options={options}
+            width="fit-content"
+            showClear={false}
+        />
     );
 };

datahub-web-react/src/app/entityV2/shared/components/styled/StyledTag.tsx

@@ -1,3 +1,4 @@
+import { colors } from '@components';
 import { Tag } from 'antd';
 import ColorHash from 'color-hash';
 import styled, { css } from 'styled-components';
@@ -23,6 +24,7 @@ export const StyledTag = styled(Tag)<{
     overflow: hidden;
     text-overflow: ellipsis;
     &&& {
+        border-color: ${colors.gray[100]};
         ${(props) =>
             props.$highlightTag &&
             `

datahub-web-react/src/app/entityV2/summary/properties/property/properties/TermsProperty.tsx

@@ -12,7 +12,7 @@ export default function TermsProperty(props: PropertyComponentProps) {
     const glossaryTermAssociations = entityData?.glossaryTerms?.terms ?? [];
 
     const renderTerm = (glossaryTermAssociation: GlossaryTermAssociation) => {
-        return <Term term={glossaryTermAssociation} />;
+        return <Term term={glossaryTermAssociation} readOnly />;
     };
 
     return (

datahub-web-react/src/app/recommendations/renderer/component/EntityPreviewTag.tsx

@@ -1,4 +1,4 @@
-import { Tooltip } from '@components';
+import { Tooltip, colors } from '@components';
 import { Divider, Image, Tag } from 'antd';
 import { Maybe } from 'graphql/jsutils/Maybe';
 import React from 'react';
@@ -11,6 +11,7 @@ import { useEmbeddedProfileLinkProps } from '@src/app/shared/useEmbeddedProfileL
 const EntityTag = styled(Tag)<{ $showMargin?: boolean }>`
     ${(props) => (props.$showMargin ? `margin: 4px;` : `margin: 0px;`)}
     max-width: inherit;
+    border-color: ${colors.gray[100]} !important;
 `;
 
 const TitleContainer = styled.div`

datahub-web-react/src/app/sharedV2/tags/term/TermContent.tsx

@@ -1,4 +1,5 @@
 import { ThunderboltOutlined } from '@ant-design/icons';
+import { colors } from '@components';
 import CloseIcon from '@mui/icons-material/Close';
 import { Modal, Tag, message } from 'antd';
 import React from 'react';
@@ -18,20 +19,24 @@ const PROPAGATOR_URN = 'urn:li:corpuser:__datahub_propagator';
 
 const highlightMatchStyle = { background: '#ffe58f', padding: '0' };
 
-const TermContainer = styled.div`
+const TermContainer = styled.div<{ $shouldHighlightBorderOnHover?: boolean }>`
     position: relative;
     max-width: 200px;
 
     .ant-tag.ant-tag {
         border-radius: 5px;
-        border: 1px solid #ccd1dd;
+        border: 1px solid ${colors.gray[100]};
     }
 
-    :hover {
-        .ant-tag.ant-tag {
-            border: 1px solid ${(props) => props.theme.styles['primary-color']};
+    ${(props) =>
+        props.$shouldHighlightBorderOnHover &&
+        `
+        :hover {
+            .ant-tag.ant-tag {
+                border: 1px solid ${props.theme.styles['primary-color']};
+            }
         }
-    }
+    `}
 `;
 
 const StyledTerm = styled(Tag)<{ fontSize?: number; highlightTerm?: boolean; showOneAndCount?: boolean }>`
@@ -189,7 +194,7 @@ export default function TermContent({
     };
 
     return (
-        <TermContainer>
+        <TermContainer $shouldHighlightBorderOnHover={!readOnly}>
             <StyledTerm
                 style={{ cursor: 'pointer' }}
                 fontSize={fontSize}