feat(glossary): surface deprecation badge on glossary term tree

datahub-web-react/src/app/entityV2/shared/EntityDropdown/EntityDropdown.tsx

@@ -1,7 +1,7 @@
-import { Menu } from '@components';
-import MoreVertOutlinedIcon from '@mui/icons-material/MoreVertOutlined';
+import { Menu, toast } from '@components';
 import { ClockCounterClockwise } from '@phosphor-icons/react/dist/csr/ClockCounterClockwise';
 import { Copy } from '@phosphor-icons/react/dist/csr/Copy';
+import { DotsThreeVertical } from '@phosphor-icons/react/dist/csr/DotsThreeVertical';
 import { Envelope } from '@phosphor-icons/react/dist/csr/Envelope';
 import { FolderOpen } from '@phosphor-icons/react/dist/csr/FolderOpen';
 import { FolderPlus } from '@phosphor-icons/react/dist/csr/FolderPlus';
@@ -15,12 +15,11 @@ import { Plus } from '@phosphor-icons/react/dist/csr/Plus';
 import { Share } from '@phosphor-icons/react/dist/csr/Share';
 import { Trash } from '@phosphor-icons/react/dist/csr/Trash';
 import { Warning } from '@phosphor-icons/react/dist/csr/Warning';
-import { message } from 'antd';
 import qs from 'query-string';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Redirect, useHistory } from 'react-router';
-import styled, { useTheme } from 'styled-components';
+import { useTheme } from 'styled-components';
 
 import { EventType } from '@app/analytics';
 import analytics from '@app/analytics/analytics';
@@ -61,18 +60,6 @@ import DeprecatedIcon from '@images/deprecated-status.svg?react';
 // Tab path segment passed to getEntityPath — a route identifier, not user-visible copy.
 const INCIDENTS_TAB_NAME = 'Incidents';
 
-const StyledMoreIcon = styled(MoreVertOutlinedIcon)`
-    &&& {
-        display: flex;
-        font-size: 20px;
-        padding: 2px;
-
-        :hover {
-            color: ${(p) => p.theme.colors.textBrand};
-        }
-    }
-`;
-
 interface Options {
     hideDeleteMessage?: boolean;
     skipDeleteWait?: boolean;
@@ -144,7 +131,7 @@ const EntityDropdown = (props: Props) => {
     const [isChangeHistoryOpen, setIsChangeHistoryOpen] = useState(false);
 
     const handleUpdateDeprecation = async (deprecatedStatus: boolean) => {
-        message.loading({ content: tcf('updating') });
+        toast.loading(tcf('updating'));
         try {
             await updateDeprecation({
                 variables: {
@@ -156,20 +143,17 @@ const EntityDropdown = (props: Props) => {
                     },
                 },
             });
-            message.destroy();
-            message.success({ content: t('deprecation.updated'), duration: 2 });
+            toast.destroy();
+            toast.success(t('deprecation.updated'), { duration: 2 });
             analytics.event({
                 type: EventType.SetDeprecation,
                 entityUrns: [urn],
                 deprecated: deprecatedStatus,
             });
         } catch (e: unknown) {
-            message.destroy();
+            toast.destroy();
             if (e instanceof Error) {
-                message.error({
-                    content: t('deprecation.updateError', { errorMessage: e.message || '' }),
-                    duration: 2,
-                });
+                toast.error(t('deprecation.updateError', { errorMessage: e.message || '' }), { duration: 2 });
             }
         }
         refetchForEntity?.();
@@ -197,7 +181,7 @@ const EntityDropdown = (props: Props) => {
             icon: Link,
             onClick: () => {
                 navigator.clipboard.writeText(pageUrl);
-                message.info(t('menuItem.copiedUrl'), 1.2);
+                toast.info(t('menuItem.copiedUrl'), { duration: 1.2 });
             },
         });
     }
@@ -516,7 +500,7 @@ const EntityDropdown = (props: Props) => {
     return (
         <>
             <Menu items={menuItemsList} trigger={triggerType} overlayStyle={{ minWidth: 150 }}>
-                <StyledMoreIcon />
+                <DotsThreeVertical data-testid="MoreVertOutlinedIcon" size={20} weight="bold" />
             </Menu>
             {isCreateTermModalVisible && (
                 <CreateGlossaryEntityModal

datahub-web-react/src/app/entityV2/shared/EntityDropdown/UpdateDeprecationMenuAction.tsx

@@ -1,17 +1,25 @@
-import { ExclamationCircleOutlined } from '@ant-design/icons';
-import { Tooltip } from '@components';
-import { message } from 'antd';
+import { Button, Tooltip, toast } from '@components';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
 
 import analytics, { EventType } from '@app/analytics';
 import { useEntityData, useRefetch } from '@app/entity/shared/EntityContext';
 import { UpdateDeprecationModal } from '@app/entityV2/shared/EntityDropdown/UpdateDeprecationModal';
-import { ActionMenuItem } from '@app/entityV2/shared/EntityDropdown/styledComponents';
 import { useEntityRegistry } from '@app/useEntityRegistry';
 
 import { useUpdateDeprecationMutation } from '@graphql/mutations.generated';
 
+import DeprecatedIcon from '@images/deprecated-status.svg?react';
+
+const DeprecationActionButton = styled(Button)`
+    flex-shrink: 0;
+    width: 28px;
+    height: 28px;
+    min-width: 28px;
+    padding: 0;
+`;
+
 export default function UpdateDeprecationMenuAction() {
     const { t } = useTranslation('entity.shared.entityDropdown');
     const { t: tcf } = useTranslation('common.feedback');
@@ -22,7 +30,7 @@ export default function UpdateDeprecationMenuAction() {
     const [updateDeprecation] = useUpdateDeprecationMutation();
 
     const handleUpdateDeprecation = async (deprecatedStatus: boolean) => {
-        message.loading({ content: tcf('updating') });
+        toast.loading(tcf('updating'));
         try {
             await updateDeprecation({
                 variables: {
@@ -34,20 +42,17 @@ export default function UpdateDeprecationMenuAction() {
                     },
                 },
             });
-            message.destroy();
-            message.success({ content: t('deprecation.updated'), duration: 2 });
+            toast.destroy();
+            toast.success(t('deprecation.updated'), { duration: 2 });
             analytics.event({
                 type: EventType.SetDeprecation,
                 entityUrns: [urn],
                 deprecated: deprecatedStatus,
             });
         } catch (e: unknown) {
-            message.destroy();
+            toast.destroy();
             if (e instanceof Error) {
-                message.error({
-                    content: t('deprecation.updateError', { errorMessage: e.message || '' }),
-                    duration: 2,
-                });
+                toast.error(t('deprecation.updateError', { errorMessage: e.message || '' }), { duration: 2 });
             }
         }
         refetchForEntity?.();
@@ -62,17 +67,21 @@ export default function UpdateDeprecationMenuAction() {
                     : t('deprecation.markUnTooltip', { entityName: entityRegistry.getEntityName(entityType) })
             }
         >
-            <ActionMenuItem
+            <DeprecationActionButton
                 key="deprecation"
+                variant="outline"
+                color="gray"
+                size="sm"
+                isCircle
                 onClick={() =>
                     !entityData?.deprecation?.deprecated
                         ? setIsDeprecationModalVisible(true)
                         : handleUpdateDeprecation(false)
                 }
                 data-testid="entity-menu-deprecate-button"
             >
-                <ExclamationCircleOutlined style={{ display: 'flex' }} />
-            </ActionMenuItem>
+                <DeprecatedIcon style={{ width: 16, height: 16 }} />
+            </DeprecationActionButton>
             {isDeprecationModalVisible && (
                 <UpdateDeprecationModal
                     urns={[urn]}