From 2bc8ca050d4236e9f8238318e8d4212ad5ec083a Mon Sep 17 00:00:00 2001
From: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
Date: Thu, 5 Jan 2023 11:32:25 +0530
Subject: [PATCH] fixed ANTD deprecated warnings (#9560)

* fixed and deprecate warning

* fixed failing unit test
---
 .../ActivityFeedCard/ActivityFeedCard.tsx     |   4 +-
 .../ActivityFeedCard/PopoverContent.tsx       |   4 +-
 .../AddDataQualityTest/EditTestCaseModal.tsx  |   2 +-
 .../EdgeInfoDrawer.component.tsx              |   4 +-
 .../EntityLineage/EntityLineage.component.tsx |   2 +-
 .../Explore/AdvanceSearchModal.component.tsx  |   2 +-
 .../components/Explore/Explore.component.tsx  |  47 ++--
 .../Explore/SortingDropDown.test.tsx          |   8 +-
 .../components/Explore/SortingDropDown.tsx    |   8 +-
 .../GlobalSearchProvider.tsx                  |   2 +-
 .../Glossary/GlossaryV1.component.tsx         |  68 +++--
 .../IngestionStepper.component.tsx            |  58 +++--
 .../AddAnnouncementModal.tsx                  |   2 +-
 .../EditAnnouncementModal.tsx                 |   2 +-
 .../DeployIngestionLoaderModal.tsx            |   2 +-
 .../EntityDeleteModal/EntityDeleteModal.tsx   |   2 +-
 .../src/components/Modals/FormModal/index.tsx |   2 +-
 .../RelatedTermsModal/RelatedTermsModal.tsx   |   2 +-
 .../ReviewerModal/ReviewerModal.component.tsx |   2 +-
 .../Modals/SchemaModal/SchemaModal.tsx        |   2 +-
 .../Modals/TourEndModal/TourEndModal.tsx      |   2 +-
 .../components/Modals/WhatsNewModal/index.tsx |   2 +-
 .../ui/src/components/Reactions/Emoji.tsx     |   4 +-
 .../ui/src/components/Reactions/Reactions.tsx |   4 +-
 .../Component/ProfilerSettingsModal.tsx       |   2 +-
 .../components/TeamDetails/TeamDetailsV1.tsx  |  17 +-
 .../components/TeamDetails/TeamHierarchy.tsx  |   2 +-
 .../ui/src/components/UserList/UserListV1.tsx |   2 +-
 .../components/Users/ChangePasswordForm.tsx   |   2 +-
 .../common/DeleteWidget/DeleteWidgetModal.tsx |   2 +-
 .../EntitySummaryDetails.tsx                  |   4 +-
 .../AnnouncementDrawer/AnnouncementDrawer.tsx |   2 +-
 .../common/entityPageInfo/FollowersModal.tsx  |   2 +-
 .../ManageButton/ManageButton.tsx             | 238 +++++++++---------
 .../ui/src/components/nav-bar/NavBar.tsx      |  83 +++---
 .../ElasticSearchReIndexModal.component.tsx   |   2 +-
 .../ui/src/pages/KPIPage/AddKPIPage.tsx       |   5 +-
 .../ui/src/pages/KPIPage/EditKPIPage.tsx      |   3 +-
 .../AddAttributeModal/AddAttributeModal.tsx   |   2 +-
 .../ui/src/pages/teams/AddTeamForm.tsx        |   2 +-
 .../ui/src/pages/teams/AddUsersModalV1.tsx    |   2 +-
 41 files changed, 292 insertions(+), 317 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/ActivityFeedCard.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/ActivityFeedCard.tsx
index ea42401fc90..c4534f447c1 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/ActivityFeedCard.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/ActivityFeedCard.tsx
@@ -190,12 +190,12 @@ const ActivityFeedCard: FC<ActivityFeedCardProp> = ({
           destroyTooltipOnHide={{ keepParent: false }}
           getPopupContainer={() => containerRef.current || document.body}
           key="reaction-options-popover"
+          open={visible && !isEditPost}
           overlayClassName="ant-popover-feed"
           placement="topRight"
           trigger="hover"
-          visible={visible && !isEditPost}
           zIndex={100}
-          onVisibleChange={handleVisibleChange}>
+          onOpenChange={handleVisibleChange}>
           <Space align="start" className="w-full">
             <UserPopOverCard userName={feedDetail.from}>
               <span className="tw-cursor-pointer" data-testid="authorAvatar">
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/PopoverContent.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/PopoverContent.tsx
index 78f652ea549..541ba78ad0b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/PopoverContent.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/PopoverContent.tsx
@@ -161,12 +161,12 @@ const PopoverContent: FC<Props> = ({
         align={{ targetOffset: [0, -10] }}
         content={reactionList}
         id="reaction-popover"
+        open={visible}
         overlayClassName="ant-popover-feed-reactions"
         placement="topLeft"
         trigger="click"
-        visible={visible}
         zIndex={9999}
-        onVisibleChange={handleVisibleChange}>
+        onOpenChange={handleVisibleChange}>
         <Button
           className="tw-p-0"
           data-testid="add-reactions"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/EditTestCaseModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/EditTestCaseModal.tsx
index 5de71c387f4..3ef57b2613f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/EditTestCaseModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/EditTestCaseModal.tsx
@@ -212,8 +212,8 @@ const EditTestCaseModal: React.FC<EditTestCaseModalProps> = ({
       closable={false}
       confirmLoading={isLoadingOnSave}
       okText={t('label.submit')}
+      open={visible}
       title={`${t('label.edit')} ${testCase?.name}`}
-      visible={visible}
       width={600}
       onCancel={onCancel}
       onOk={() => form.submit()}>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityInfoDrawer/EdgeInfoDrawer.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityInfoDrawer/EdgeInfoDrawer.component.tsx
index 202e54133a4..e7615e2b764 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityInfoDrawer/EdgeInfoDrawer.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityInfoDrawer/EdgeInfoDrawer.component.tsx
@@ -112,9 +112,9 @@ const EdgeInfoDrawer = ({
       getContainer={false}
       headerStyle={{ padding: 16 }}
       mask={false}
+      open={visible}
       style={{ position: 'absolute' }}
-      title={t('label.edge-information')}
-      visible={visible}>
+      title={t('label.edge-information')}>
       {isLoading ? (
         <Loader />
       ) : (
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.component.tsx
index f1aebe4b8cf..d49aa18bbdc 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.component.tsx
@@ -1398,8 +1398,8 @@ const EntityLineageComponent: FunctionComponent<EntityLineageProp> = ({
             deletionState.loading,
             deletionState.status
           )}
+          open={showDeleteModal}
           title="Remove lineage edge"
-          visible={showDeleteModal}
           onCancel={() => {
             setShowDeleteModal(false);
           }}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/AdvanceSearchModal.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/AdvanceSearchModal.component.tsx
index d11fc6de31c..7bfdac98402 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/AdvanceSearchModal.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/AdvanceSearchModal.component.tsx
@@ -74,10 +74,10 @@ export const AdvancedSearchModal: FunctionComponent<Props> = ({
         </Space>
       }
       okText={t('label.submit')}
+      open={visible}
       title={t('label.advanced-entity', {
         entity: t('label.search'),
       })}
-      visible={visible}
       width={950}>
       <Typography.Text data-testid="advanced-search-message">
         {t('message.advanced-search-message')}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx
index 77c8f734359..3241a509586 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx
@@ -95,6 +95,28 @@ const Explore: React.FC<ExploreProps> = ({
     setShowSummaryPanel(false);
   };
 
+  const tabItems = useMemo(
+    () =>
+      Object.entries(tabsInfo).map(([tabSearchIndex, tabDetail]) => ({
+        key: tabSearchIndex,
+        label: (
+          <div data-testid={`${lowerCase(tabDetail.label)}-tab`}>
+            {tabDetail.label}
+            <span className="p-l-xs ">
+              {!isNil(tabCounts)
+                ? getCountBadge(
+                    tabCounts[tabSearchIndex as ExploreSearchIndex],
+                    '',
+                    tabSearchIndex === searchIndex
+                  )
+                : getCountBadge()}
+            </span>
+          </div>
+        ),
+      })),
+    [tabsInfo, tabCounts]
+  );
+
   // get entity active tab by URL params
   const defaultActiveTab = useMemo(() => {
     const entityName = toUpper(ENTITY_PATH[tab] ?? 'table');
@@ -231,6 +253,7 @@ const Explore: React.FC<ExploreProps> = ({
       }>
       <Tabs
         defaultActiveKey={defaultActiveTab}
+        items={tabItems}
         size="small"
         tabBarExtraContent={
           <div className="tw-flex">
@@ -268,27 +291,9 @@ const Explore: React.FC<ExploreProps> = ({
         onChange={(tab) => {
           tab && onChangeSearchIndex(tab as ExploreSearchIndex);
           setShowSummaryPanel(false);
-        }}>
-        {Object.entries(tabsInfo).map(([tabSearchIndex, tabDetail]) => (
-          <Tabs.TabPane
-            key={tabSearchIndex}
-            tab={
-              <div data-testid={`${lowerCase(tabDetail.label)}-tab`}>
-                {tabDetail.label}
-                <span className="p-l-xs ">
-                  {!isNil(tabCounts)
-                    ? getCountBadge(
-                        tabCounts[tabSearchIndex as ExploreSearchIndex],
-                        '',
-                        tabSearchIndex === searchIndex
-                      )
-                    : getCountBadge()}
-                </span>
-              </div>
-            }
-          />
-        ))}
-      </Tabs>
+        }}
+      />
+
       <Row gutter={[8, 0]} wrap={false}>
         <Col className="searched-data-container" flex="auto">
           <Row gutter={[16, 16]}>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/SortingDropDown.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/SortingDropDown.test.tsx
index a63567545ad..1e99fef79c1 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/SortingDropDown.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/SortingDropDown.test.tsx
@@ -29,7 +29,7 @@ const mockPorps = {
 describe('Test Sorting DropDown Component', () => {
   it('Should render dropdown component', async () => {
     await act(async () => {
-      const { findByTestId, findAllByTestId } = render(
+      const { findByTestId, findByRole, findAllByTestId } = render(
         <SortingDropDown {...mockPorps} />
       );
 
@@ -39,7 +39,7 @@ describe('Test Sorting DropDown Component', () => {
 
       fireEvent.click(dropdownLabel);
 
-      const dropdownMenu = await findByTestId('dropdown-menu');
+      const dropdownMenu = await findByRole('menu');
 
       expect(dropdownMenu).toBeInTheDocument();
 
@@ -51,7 +51,7 @@ describe('Test Sorting DropDown Component', () => {
 
   it('Should call onSelect method on onClick option', async () => {
     await act(async () => {
-      const { findByTestId, findAllByTestId } = render(
+      const { findByTestId, findByRole, findAllByTestId } = render(
         <SortingDropDown {...mockPorps} />
       );
 
@@ -61,7 +61,7 @@ describe('Test Sorting DropDown Component', () => {
 
       fireEvent.click(dropdownLabel);
 
-      const dropdownMenu = await findByTestId('dropdown-menu');
+      const dropdownMenu = await findByRole('menu');
 
       expect(dropdownMenu).toBeInTheDocument();
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/SortingDropDown.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/SortingDropDown.tsx
index 0b0678af63f..17629d6da5b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/SortingDropDown.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/SortingDropDown.tsx
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Dropdown, Menu } from 'antd';
+import { Dropdown } from 'antd';
 import React from 'react';
 import { normalLink } from '../../utils/styleconstant';
 import { dropdownIcon as DropDownIcon } from '../../utils/svgconstant';
@@ -39,15 +39,15 @@ const SortingDropDown: React.FC<SortingDropdownProps> = ({
     'data-testid': 'dropdown-menu-item',
   }));
 
-  const menu = <Menu data-testid="dropdown-menu" items={items} />;
-
   const label = fieldList.find((field) => field.value === sortField)?.name;
 
   return (
     <Dropdown
       className="tw-self-end tw-mr-2 tw-cursor-pointer"
       data-testid="dropdown"
-      overlay={menu}
+      menu={{
+        items,
+      }}
       trigger={['click']}>
       <div className="tw-text-primary" data-testid="dropdown-label">
         <span className="tw-mr-2">{label}</span>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/GlobalSearchProvider/GlobalSearchProvider.tsx b/openmetadata-ui/src/main/resources/ui/src/components/GlobalSearchProvider/GlobalSearchProvider.tsx
index ab0e3ea604d..e5bb933a13e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/GlobalSearchProvider/GlobalSearchProvider.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/GlobalSearchProvider/GlobalSearchProvider.tsx
@@ -118,8 +118,8 @@ const GlobalSearchProvider: FC<Props> = ({ children }: Props) => {
         }}
         closeIcon={<></>}
         footer={null}
+        open={visible}
         transitionName=""
-        visible={visible}
         width={650}
         onCancel={handleCancel}>
         <GlobalSearchSuggestions
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryV1.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryV1.component.tsx
index b080e4fbe6c..790645a5bd1 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryV1.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryV1.component.tsx
@@ -17,7 +17,6 @@ import {
   Col,
   Dropdown,
   Input,
-  Menu,
   Row,
   Space,
   Tooltip,
@@ -295,41 +294,32 @@ const GlossaryV1 = ({
     );
   });
 
-  const manageButtonContent = () => {
-    return (
-      <Menu
-        items={[
-          {
-            label: (
-              <Space
-                className="tw-cursor-pointer manage-button"
-                size={8}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setIsDelete(true);
-                  setShowActions(false);
-                }}>
-                <SVGIcons alt="Delete" icon={Icons.DELETE} />
-                <div className="tw-text-left" data-testid="delete-button">
-                  <p
-                    className="tw-font-medium"
-                    data-testid="delete-button-title">
-                    Delete
-                  </p>
-                  <p className="tw-text-grey-muted tw-text-xs">
-                    Deleting this{' '}
-                    {isGlossaryActive ? 'Glossary' : 'GlossaryTerm'} will
-                    permanently remove its metadata from OpenMetadata.
-                  </p>
-                </div>
-              </Space>
-            ),
-            key: 'delete-button',
-          },
-        ]}
-      />
-    );
-  };
+  const manageButtonContent = [
+    {
+      label: (
+        <Space
+          className="tw-cursor-pointer manage-button"
+          size={8}
+          onClick={(e) => {
+            e.stopPropagation();
+            setIsDelete(true);
+            setShowActions(false);
+          }}>
+          <SVGIcons alt="Delete" icon={Icons.DELETE} />
+          <div className="tw-text-left" data-testid="delete-button">
+            <p className="tw-font-medium" data-testid="delete-button-title">
+              Delete
+            </p>
+            <p className="tw-text-grey-muted tw-text-xs">
+              Deleting this {isGlossaryActive ? 'Glossary' : 'GlossaryTerm'}{' '}
+              will permanently remove its metadata from OpenMetadata.
+            </p>
+          </div>
+        </Space>
+      ),
+      key: 'delete-button',
+    },
+  ];
 
   const fetchLeftPanel = () => {
     return (
@@ -448,12 +438,12 @@ const GlossaryV1 = ({
                 ? !glossaryPermission.Delete
                 : !glossaryTermPermission.Delete
             }
-            overlay={manageButtonContent()}
+            menu={{ items: manageButtonContent }}
+            open={showActions}
             overlayStyle={{ width: '350px' }}
             placement="bottomRight"
             trigger={['click']}
-            visible={showActions}
-            onVisibleChange={setShowActions}>
+            onOpenChange={setShowActions}>
             <Tooltip
               title={
                 glossaryPermission.Delete || glossaryTermPermission.Delete
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/IngestionStepper/IngestionStepper.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/IngestionStepper/IngestionStepper.component.tsx
index 081f9184a27..6063fecfa77 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/IngestionStepper/IngestionStepper.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/IngestionStepper/IngestionStepper.component.tsx
@@ -13,41 +13,47 @@
 
 import { Steps } from 'antd';
 import classNames from 'classnames';
-import React from 'react';
+import React, { useMemo } from 'react';
 
-const { Step } = Steps;
 type Props = {
   steps: Array<{ name: string; step: number }>;
   activeStep: number;
   excludeSteps?: Array<number>;
 };
 const IngestionStepper = ({ steps, activeStep, excludeSteps = [] }: Props) => {
+  const items = useMemo(
+    () =>
+      steps
+        .filter((step) => !excludeSteps.includes(step.step))
+        .map((step) => {
+          return {
+            icon: (
+              <span
+                className={classNames(
+                  'ingestion-rounder tw-self-center',
+                  {
+                    active: step.step === activeStep,
+                  },
+                  { completed: step.step < activeStep }
+                )}
+                data-testid={`step-icon-${step.step}`}
+              />
+            ),
+            key: step.name,
+            title: step.name,
+          };
+        }),
+    [steps, activeStep, excludeSteps]
+  );
+
   return (
     <div className="tw-px-24" data-testid="stepper-container">
-      <Steps current={activeStep} labelPlacement="vertical" size="small">
-        {steps
-          .filter((step) => !excludeSteps.includes(step.step))
-          .map((step) => {
-            return (
-              <Step
-                icon={
-                  <span
-                    className={classNames(
-                      'ingestion-rounder tw-self-center',
-                      {
-                        active: step.step === activeStep,
-                      },
-                      { completed: step.step < activeStep }
-                    )}
-                    data-testid={`step-icon-${step.step}`}
-                  />
-                }
-                key={`${step.name}`}
-                title={step.name}
-              />
-            );
-          })}
-      </Steps>
+      <Steps
+        current={activeStep}
+        items={items}
+        labelPlacement="vertical"
+        size="small"
+      />
     </div>
   );
 };
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/AddAnnouncementModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/AddAnnouncementModal.tsx
index e51a8a5955f..f935a32d42e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/AddAnnouncementModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/AddAnnouncementModal.tsx
@@ -103,8 +103,8 @@ const AddAnnouncementModal: FC<Props> = ({
         htmlType: 'submit',
       }}
       okText="Submit"
+      open={open}
       title={t('message.make-an-announcement')}
-      visible={open}
       width={720}
       onCancel={onCancel}>
       <Form
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/EditAnnouncementModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/EditAnnouncementModal.tsx
index d532b0e9105..61857198c9b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/EditAnnouncementModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/EditAnnouncementModal.tsx
@@ -82,8 +82,8 @@ const EditAnnouncementModal: FC<Props> = ({
         htmlType: 'submit',
       }}
       okText={t('label.save')}
+      open={open}
       title={t('label.edit-an-announcement')}
-      visible={open}
       width={720}
       onCancel={onCancel}>
       <Form
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/DeployIngestionLoaderModal/DeployIngestionLoaderModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/DeployIngestionLoaderModal/DeployIngestionLoaderModal.tsx
index 9cb11a8c006..48939b843ea 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/DeployIngestionLoaderModal/DeployIngestionLoaderModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/DeployIngestionLoaderModal/DeployIngestionLoaderModal.tsx
@@ -40,7 +40,7 @@ const DeployIngestionLoaderModal = ({
       closable={false}
       data-testid="deploy-modal"
       footer={null}
-      visible={visible}>
+      open={visible}>
       <div className="p-y-lg d-flex flex-col" data-testid="body-text">
         <div className={classNames('ingestion-content relative', className)}>
           <Fragment>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityDeleteModal/EntityDeleteModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityDeleteModal/EntityDeleteModal.tsx
index f82bb9f8e79..569bde9773a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityDeleteModal/EntityDeleteModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityDeleteModal/EntityDeleteModal.tsx
@@ -70,6 +70,7 @@ const EntityDeleteModal = ({
           </Button>
         </div>
       }
+      open={visible}
       title={
         <Typography.Text data-testid="modal-header">
           {softDelete ? (
@@ -83,7 +84,6 @@ const EntityDeleteModal = ({
           )}
         </Typography.Text>
       }
-      visible={visible}
       width={600}>
       <div data-testid="body-text">
         <Typography className="mb-2">
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/FormModal/index.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/FormModal/index.tsx
index b8c9b95648c..3c784b1a4e0 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/FormModal/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/FormModal/index.tsx
@@ -61,12 +61,12 @@ const FormModal = ({
           </Button>
         </div>
       }
+      open={visible}
       title={
         <Typography.Text strong data-testid="header">
           {header}
         </Typography.Text>
       }
-      visible={visible}
       width={1300}
       onCancel={onCancel}>
       <form id="form-modal" onSubmit={onSubmitHandler}>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/RelatedTermsModal/RelatedTermsModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/RelatedTermsModal/RelatedTermsModal.tsx
index e2cf683d36b..8b033672aec 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/RelatedTermsModal/RelatedTermsModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/RelatedTermsModal/RelatedTermsModal.tsx
@@ -123,12 +123,12 @@ const RelatedTermsModal = ({
           </Button>
         </div>
       }
+      open={visible}
       title={
         <Typography.Text strong data-testid="header">
           {header}
         </Typography.Text>
       }
-      visible={visible}
       width={800}>
       <div className="h-full">
         <Searchbar
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/ReviewerModal/ReviewerModal.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/ReviewerModal/ReviewerModal.component.tsx
index 8f8190836b6..5248abcd656 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/ReviewerModal/ReviewerModal.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/ReviewerModal/ReviewerModal.component.tsx
@@ -144,12 +144,12 @@ const ReviewerModal = ({
           </Button>
         </div>
       }
+      open={visible}
       title={
         <Typography.Text strong data-testid="header">
           {header}
         </Typography.Text>
       }
-      visible={visible}
       width={800}>
       <>
         <Searchbar
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/SchemaModal/SchemaModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/SchemaModal/SchemaModal.tsx
index cb5b95ca521..78d519b52d7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/SchemaModal/SchemaModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/SchemaModal/SchemaModal.tsx
@@ -41,12 +41,12 @@ const SchemaModal: FC<SchemaModalProp> = ({
       }
       data-testid="schema-modal"
       footer={null}
+      open={visible}
       title={
         <Typography.Text strong data-testid="schema-modal-header">
           {t('label.json-data')}
         </Typography.Text>
       }
-      visible={visible}
       width={800}>
       <div data-testid="schema-modal-body">
         <SchemaEditor
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/TourEndModal/TourEndModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/TourEndModal/TourEndModal.tsx
index b48fe9eef6a..9d5e79f8f99 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/TourEndModal/TourEndModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/TourEndModal/TourEndModal.tsx
@@ -31,7 +31,7 @@ const TourEndModal = ({ onSave, visible }: TourEndModalProps) => {
           {t('label.explore-now')}
         </Button>
       }
-      visible={visible}>
+      open={visible}>
       <Row className="text-center" gutter={[16, 16]}>
         <Col className="mt-4" span={24}>
           <SVGIcons
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/index.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/index.tsx
index 972aa293f7d..ee6c3f49e65 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/index.tsx
@@ -75,12 +75,12 @@ export const WhatsNewModal: FunctionComponent<WhatsNewModalProps> = ({
       }
       data-testid="whats-new-dialog"
       footer={null}
+      open={visible}
       title={
         <Typography.Text strong data-testid="whats-new-header">
           {header}
         </Typography.Text>
       }
-      visible={visible}
       width={1200}>
       <div className="flex w-auto h-full">
         <div
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Reactions/Emoji.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Reactions/Emoji.tsx
index f2775ac352c..81e4d933f7b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Reactions/Emoji.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Reactions/Emoji.tsx
@@ -99,10 +99,10 @@ const Emoji: FC<EmojiProps> = ({
     <Popover
       content={popoverContent}
       key="reaction-detail-popover"
+      open={visible}
       trigger="hover"
-      visible={visible}
       zIndex={9999}
-      onVisibleChange={setVisible}>
+      onOpenChange={setVisible}>
       <Button
         className={classNames('ant-btn-reaction tw-mr-1 d-flex', {
           'ant-btn-isReacted': isReacted,
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Reactions/Reactions.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Reactions/Reactions.tsx
index e3df9c0f283..14adcb724d5 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Reactions/Reactions.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Reactions/Reactions.tsx
@@ -107,12 +107,12 @@ const Reactions: FC<ReactionsProps> = ({ reactions, onReactionSelect }) => {
         <Popover
           align={{ targetOffset: [0, -10] }}
           content={reactionList}
+          open={visible}
           overlayClassName="ant-popover-feed-reactions"
           placement="topLeft"
           trigger="click"
-          visible={visible}
           zIndex={9999}
-          onVisibleChange={handleVisibleChange}>
+          onOpenChange={handleVisibleChange}>
           <Button
             className="ant-btn-reaction ant-btn-add-reactions"
             data-testid="add-reactions"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/ProfilerSettingsModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/ProfilerSettingsModal.tsx
index 3c3148c1641..10cd7e53023 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/ProfilerSettingsModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/ProfilerSettingsModal.tsx
@@ -285,8 +285,8 @@ const ProfilerSettingsModal: React.FC<ProfilerSettingsModalProps> = ({
         htmlType: 'submit',
       }}
       okText={t('label.save')}
+      open={visible}
       title={t('label.setting-plural')}
-      visible={visible}
       width={630}
       onCancel={handleCancel}>
       <Row gutter={[16, 16]}>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx
index 4ab362dbd2d..5d7a868a34a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx
@@ -16,7 +16,6 @@ import {
   Button as ButtonAntd,
   Col,
   Dropdown,
-  Menu,
   Modal,
   Row,
   Space,
@@ -30,7 +29,7 @@ import { ColumnsType } from 'antd/lib/table';
 import { AxiosError } from 'axios';
 import classNames from 'classnames';
 import { compare } from 'fast-json-patch';
-import { cloneDeep, isEmpty, isUndefined, orderBy } from 'lodash';
+import { cloneDeep, isEmpty, isUndefined, orderBy, uniqueId } from 'lodash';
 import { ExtraInfo } from 'Models';
 import React, { Fragment, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -692,10 +691,6 @@ const TeamDetailsV1 = ({
     key: 'deleted-team-dropdown',
   };
 
-  const organizationDropdownContent = (
-    <Menu items={[DELETED_TOGGLE_MENU_ITEM]} />
-  );
-
   const extraDropdownContent: ItemType[] = useMemo(
     () => [
       ...(!currentTeam.parents?.[0]?.deleted && currentTeam.deleted
@@ -1102,12 +1097,12 @@ const TeamDetailsV1 = ({
             ) : (
               <Dropdown
                 align={{ targetOffset: [-12, 0] }}
-                overlay={organizationDropdownContent}
+                menu={{ items: [DELETED_TOGGLE_MENU_ITEM] }}
+                open={showActions}
                 overlayStyle={{ width: '350px' }}
                 placement="bottomRight"
                 trigger={['click']}
-                visible={showActions}
-                onVisibleChange={setShowActions}>
+                onOpenChange={setShowActions}>
                 <ButtonAntd
                   className="rounded-4 w-6 manage-dropdown-button"
                   data-testid="teams-dropdown"
@@ -1122,7 +1117,7 @@ const TeamDetailsV1 = ({
           </div>
           <Space size={0}>
             {extraInfo.map((info, index) => (
-              <>
+              <Fragment key={uniqueId()}>
                 <EntitySummaryDetails
                   currentOwner={currentTeam.owner}
                   data={info}
@@ -1148,7 +1143,7 @@ const TeamDetailsV1 = ({
                     |
                   </span>
                 ) : null}
-              </>
+              </Fragment>
             ))}
           </Space>
           <div className="m-b-sm m-t-xs" data-testid="description-container">
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamHierarchy.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamHierarchy.tsx
index eefcd77fab6..9125fd9f788 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamHierarchy.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamHierarchy.tsx
@@ -177,8 +177,8 @@ const TeamHierarchy: FC<TeamHierarchyProps> = ({
         closable={false}
         data-testid="confirmation-modal"
         okText={t('label.confirm')}
+        open={isModalOpen}
         title={t('label.move-the-team')}
-        visible={isModalOpen}
         onCancel={() => setIsModalOpen(false)}
         onOk={handleChangeTeam}>
         <Typography.Text>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserListV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserListV1.tsx
index b0951d47e9d..6975536eb2e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserListV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserListV1.tsx
@@ -297,10 +297,10 @@ const UserListV1: FC<UserListV1Props> = ({
         closable={false}
         confirmLoading={isLoading}
         okText={t('label.restore')}
+        open={showReactiveModal}
         title={t('label.restore-entity', {
           entity: t('label.user'),
         })}
-        visible={showReactiveModal}
         onCancel={() => {
           setShowReactiveModal(false);
           setSelectedUser(undefined);
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/ChangePasswordForm.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Users/ChangePasswordForm.tsx
index d93c02d5bec..2c005bf2a64 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Users/ChangePasswordForm.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/ChangePasswordForm.tsx
@@ -48,10 +48,10 @@ const ChangePasswordForm: React.FC<ChangePasswordForm> = ({
         htmlType: 'submit',
       }}
       okText={t('label.update-password')}
+      open={visible}
       title={t('label.change-entity', {
         entity: t('label.password'),
       })}
-      visible={visible}
       width={500}
       onCancel={() => {
         form.resetFields();
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/DeleteWidget/DeleteWidgetModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/DeleteWidget/DeleteWidgetModal.tsx
index 1a9c3556bf9..113a50186fc 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/DeleteWidget/DeleteWidgetModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/DeleteWidget/DeleteWidgetModal.tsx
@@ -230,8 +230,8 @@ const DeleteWidgetModal = ({
       data-testid="delete-modal"
       footer={Footer()}
       okText="Delete"
+      open={visible}
       title={`Delete ${entityName}`}
-      visible={visible}
       onCancel={handleOnEntityDeleteCancel}>
       <Radio.Group value={value} onChange={onChange}>
         {DELETE_OPTION.map(
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.tsx
index 3c6f9100ee4..5d440ccb19d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.tsx
@@ -157,13 +157,13 @@ const EntitySummaryDetails = ({
             <>
               {t('label.no-entity', { entity: t('label.tier') })}
               <Dropdown
-                overlay={
+                dropdownRender={() => (
                   <TierCard
                     currentTier={tier?.tagFQN}
                     removeTier={removeTier}
                     updateTier={updateTier}
                   />
-                }
+                )}
                 trigger={['click']}>
                 <span data-testid={`edit-${data.key}-icon`}>
                   {updateTier && !deleted ? <EditIcon /> : null}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/AnnouncementDrawer/AnnouncementDrawer.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/AnnouncementDrawer/AnnouncementDrawer.tsx
index 99d11f223f9..91b0defeb27 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/AnnouncementDrawer/AnnouncementDrawer.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/AnnouncementDrawer/AnnouncementDrawer.tsx
@@ -108,9 +108,9 @@ const AnnouncementDrawer: FC<Props> = ({
       <div data-testid="announcement-drawer">
         <Drawer
           closable={false}
+          open={open}
           placement="right"
           title={title}
-          visible={open}
           width={576}
           onClose={onClose}>
           <div className="tw-flex tw-justify-end">
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/FollowersModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/FollowersModal.tsx
index 95f3162295e..960c18e8e21 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/FollowersModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/FollowersModal.tsx
@@ -61,12 +61,12 @@ const FollowersModal = ({
       centered
       destroyOnClose
       data-testid="modal-container"
+      open={visible}
       title={
         <Typography.Text strong data-testid="header">
           {header}
         </Typography.Text>
       }
-      visible={visible}
       width={800}
       onCancel={onCancel}>
       <div>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/ManageButton/ManageButton.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/ManageButton/ManageButton.tsx
index 017f1c8dcb5..d77975bc092 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/ManageButton/ManageButton.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/ManageButton/ManageButton.tsx
@@ -12,7 +12,7 @@
  */
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, Col, Dropdown, Menu, Row, Tooltip, Typography } from 'antd';
+import { Button, Col, Dropdown, Row, Tooltip, Typography } from 'antd';
 import { ItemType } from 'antd/lib/menu/hooks/useItems';
 import classNames from 'classnames';
 import React, { FC, useState } from 'react';
@@ -64,152 +64,144 @@ const ManageButton: FC<Props> = ({
   const [showActions, setShowActions] = useState<boolean>(false);
   const [isDelete, setIsDelete] = useState<boolean>(false);
 
-  const menu = (
-    <Menu
-      items={[
-        {
-          label: (
-            <Tooltip title={canDelete ? '' : NO_PERMISSION_FOR_ACTION}>
+  const items = [
+    {
+      label: (
+        <Tooltip title={canDelete ? '' : NO_PERMISSION_FOR_ACTION}>
+          <Row
+            className={classNames('tw-cursor-pointer manage-button', {
+              'tw-cursor-not-allowed tw-opacity-50': !canDelete,
+            })}
+            onClick={(e) => {
+              if (canDelete) {
+                e.stopPropagation();
+                setIsDelete(true);
+                setShowActions(false);
+              }
+            }}>
+            <Col span={3}>
+              <SVGIcons alt="Delete" icon={Icons.DELETE} width="20px" />
+            </Col>
+            <Col span={21}>
+              <Row data-testid="delete-button">
+                <Col span={21}>
+                  <Typography.Text
+                    className="font-medium"
+                    data-testid="delete-button-title">
+                    {t('label.delete')}
+                  </Typography.Text>
+                </Col>
+                <Col className="p-t-xss">
+                  <Typography.Paragraph className="text-grey-muted text-xs m-b-0 line-height-16">
+                    {t('message.delete-action-description', {
+                      entityType,
+                    })}
+                  </Typography.Paragraph>
+                </Col>
+              </Row>
+            </Col>
+          </Row>
+        </Tooltip>
+      ),
+      key: 'delete-button',
+    },
+    ...(deleted
+      ? [
+          {
+            label: (
+              <Tooltip title={canDelete ? '' : NO_PERMISSION_FOR_ACTION}>
+                <Row
+                  className={classNames('tw-cursor-pointer manage-button', {
+                    'tw-cursor-not-allowed tw-opacity-50': !canDelete,
+                  })}
+                  onClick={(e) => {
+                    if (canDelete) {
+                      e.stopPropagation();
+                      setShowActions(false);
+                      onRestoreEntity && onRestoreEntity();
+                    }
+                  }}>
+                  <Col span={3}>
+                    {' '}
+                    <SVGIcons alt="Restore" icon={Icons.RESTORE} width="20px" />
+                  </Col>
+                  <Col span={21}>
+                    <Row data-testid="restore-button">
+                      <Col span={21}>
+                        <Typography.Text
+                          className="font-medium"
+                          data-testid="delete-button-title">
+                          {t('label.restore')}
+                        </Typography.Text>
+                      </Col>
+                      <Col className="p-t-xss">
+                        <Typography.Paragraph className="text-grey-muted text-xs m-b-0 line-height-16">
+                          {t('message.restore-action-description', {
+                            entityType,
+                          })}
+                        </Typography.Paragraph>
+                      </Col>
+                    </Row>
+                  </Col>
+                </Row>
+              </Tooltip>
+            ),
+            key: 'restore-button',
+          },
+        ]
+      : []),
+
+    ...(ANNOUNCEMENT_ENTITIES.includes(entityType as EntityType)
+      ? [
+          {
+            label: (
               <Row
-                className={classNames('tw-cursor-pointer manage-button', {
-                  'tw-cursor-not-allowed tw-opacity-50': !canDelete,
-                })}
+                className="tw-cursor-pointer manage-button"
                 onClick={(e) => {
-                  if (canDelete) {
-                    e.stopPropagation();
-                    setIsDelete(true);
-                    setShowActions(false);
-                  }
+                  e.stopPropagation();
+                  setShowActions(false);
+                  onAnnouncementClick && onAnnouncementClick();
                 }}>
                 <Col span={3}>
-                  <SVGIcons alt="Delete" icon={Icons.DELETE} width="20px" />
+                  <SVGIcons
+                    alt="announcement"
+                    icon={Icons.ANNOUNCEMENT_BLACK}
+                    width="20px"
+                  />
                 </Col>
                 <Col span={21}>
-                  <Row data-testid="delete-button">
+                  <Row data-testid="announcement-button">
                     <Col span={21}>
-                      <Typography.Text
-                        className="font-medium"
-                        data-testid="delete-button-title">
-                        {t('label.delete')}
+                      <Typography.Text className="font-medium">
+                        {t('label.announcement-plural')}
                       </Typography.Text>
                     </Col>
                     <Col className="p-t-xss">
                       <Typography.Paragraph className="text-grey-muted text-xs m-b-0 line-height-16">
-                        {t('message.delete-action-description', {
-                          entityType,
-                        })}
+                        {t('message.announcement-action-description')}
                       </Typography.Paragraph>
                     </Col>
                   </Row>
                 </Col>
               </Row>
-            </Tooltip>
-          ),
-          key: 'delete-button',
-        },
-        ...(deleted
-          ? [
-              {
-                label: (
-                  <Tooltip title={canDelete ? '' : NO_PERMISSION_FOR_ACTION}>
-                    <Row
-                      className={classNames('tw-cursor-pointer manage-button', {
-                        'tw-cursor-not-allowed tw-opacity-50': !canDelete,
-                      })}
-                      onClick={(e) => {
-                        if (canDelete) {
-                          e.stopPropagation();
-                          setShowActions(false);
-                          onRestoreEntity && onRestoreEntity();
-                        }
-                      }}>
-                      <Col span={3}>
-                        {' '}
-                        <SVGIcons
-                          alt="Restore"
-                          icon={Icons.RESTORE}
-                          width="20px"
-                        />
-                      </Col>
-                      <Col span={21}>
-                        <Row data-testid="restore-button">
-                          <Col span={21}>
-                            <Typography.Text
-                              className="font-medium"
-                              data-testid="delete-button-title">
-                              {t('label.restore')}
-                            </Typography.Text>
-                          </Col>
-                          <Col className="p-t-xss">
-                            <Typography.Paragraph className="text-grey-muted text-xs m-b-0 line-height-16">
-                              {t('message.restore-action-description', {
-                                entityType,
-                              })}
-                            </Typography.Paragraph>
-                          </Col>
-                        </Row>
-                      </Col>
-                    </Row>
-                  </Tooltip>
-                ),
-                key: 'restore-button',
-              },
-            ]
-          : []),
-
-        ...(ANNOUNCEMENT_ENTITIES.includes(entityType as EntityType)
-          ? [
-              {
-                label: (
-                  <Row
-                    className="tw-cursor-pointer manage-button"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setShowActions(false);
-                      onAnnouncementClick && onAnnouncementClick();
-                    }}>
-                    <Col span={3}>
-                      <SVGIcons
-                        alt="announcement"
-                        icon={Icons.ANNOUNCEMENT_BLACK}
-                        width="20px"
-                      />
-                    </Col>
-                    <Col span={21}>
-                      <Row data-testid="announcement-button">
-                        <Col span={21}>
-                          <Typography.Text className="font-medium">
-                            {t('label.announcement-plural')}
-                          </Typography.Text>
-                        </Col>
-                        <Col className="p-t-xss">
-                          <Typography.Paragraph className="text-grey-muted text-xs m-b-0 line-height-16">
-                            {t('message.announcement-action-description')}
-                          </Typography.Paragraph>
-                        </Col>
-                      </Row>
-                    </Col>
-                  </Row>
-                ),
-                key: 'announcement-button',
-              },
-            ]
-          : []),
-        ...(extraDropdownContent ? extraDropdownContent : []),
-      ]}
-    />
-  );
+            ),
+            key: 'announcement-button',
+          },
+        ]
+      : []),
+    ...(extraDropdownContent ? extraDropdownContent : []),
+  ];
 
   return (
     <>
       <Dropdown
         align={{ targetOffset: [-12, 0] }}
-        overlay={menu}
+        menu={{ items }}
+        open={showActions}
         overlayStyle={{ width: '350px' }}
         placement="bottomRight"
         trigger={['click']}
-        visible={showActions}
-        onVisibleChange={setShowActions}>
+        onOpenChange={setShowActions}>
         <Button
           className={classNames(
             'tw-rounded tw-flex tw-justify-center tw-w-6 manage-dropdown-button',
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx
index 3536d5f1b4f..d2bf202327c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx
@@ -11,16 +11,7 @@
  *  limitations under the License.
  */
 
-import {
-  Badge,
-  Dropdown,
-  Image,
-  Input,
-  Menu,
-  Select,
-  Space,
-  Tooltip,
-} from 'antd';
+import { Badge, Dropdown, Image, Input, Select, Space, Tooltip } from 'antd';
 import { CookieStorage } from 'cookie-storage';
 import i18next from 'i18next';
 import { debounce, toString } from 'lodash';
@@ -201,40 +192,36 @@ const NavBar = ({
     };
   };
 
-  const governanceMenu = (
-    <Menu
-      items={[
-        {
-          key: 'glossary',
-          label: (
-            <NavLink
-              className="focus:no-underline"
-              data-testid="appbar-item-glossary"
-              style={navStyle(pathname.startsWith('/glossary'))}
-              to={{
-                pathname: ROUTES.GLOSSARY,
-              }}>
-              {t('label.glossary')}
-            </NavLink>
-          ),
-        },
-        {
-          key: 'tags',
-          label: (
-            <NavLink
-              className="focus:no-underline"
-              data-testid="appbar-item-tags"
-              style={navStyle(pathname.startsWith('/tags'))}
-              to={{
-                pathname: ROUTES.TAGS,
-              }}>
-              {t('label.tag-plural')}
-            </NavLink>
-          ),
-        },
-      ]}
-    />
-  );
+  const governanceMenu = [
+    {
+      key: 'glossary',
+      label: (
+        <NavLink
+          className="focus:no-underline"
+          data-testid="appbar-item-glossary"
+          style={navStyle(pathname.startsWith('/glossary'))}
+          to={{
+            pathname: ROUTES.GLOSSARY,
+          }}>
+          {t('label.glossary')}
+        </NavLink>
+      ),
+    },
+    {
+      key: 'tags',
+      label: (
+        <NavLink
+          className="focus:no-underline"
+          data-testid="appbar-item-tags"
+          style={navStyle(pathname.startsWith('/tags'))}
+          to={{
+            pathname: ROUTES.TAGS,
+          }}>
+          {t('label.tag-plural')}
+        </NavLink>
+      ),
+    },
+  ];
 
   useEffect(() => {
     if (shouldRequestPermission()) {
@@ -331,7 +318,7 @@ const NavBar = ({
               </NavLink>
               <Dropdown
                 className="cursor-pointer"
-                overlay={governanceMenu}
+                menu={{ items: governanceMenu }}
                 trigger={['click']}>
                 <Space data-testid="governance" size={2}>
                   {t('label.govern')}
@@ -419,7 +406,7 @@ const NavBar = ({
               <button className="focus:tw-no-underline hover:tw-underline tw-flex-shrink-0 ">
                 <Dropdown
                   destroyPopupOnHide
-                  overlay={
+                  dropdownRender={() => (
                     <NotificationBox
                       hasMentionNotification={hasMentionNotification}
                       hasTaskNotification={hasTaskNotification}
@@ -429,7 +416,7 @@ const NavBar = ({
                       onMarkTaskNotificationRead={handleTaskNotificationRead}
                       onTabChange={handleActiveTab}
                     />
-                  }
+                  )}
                   overlayStyle={{
                     zIndex: 9999,
                     width: '425px',
@@ -437,7 +424,7 @@ const NavBar = ({
                   }}
                   placement="bottomRight"
                   trigger={['click']}
-                  onVisibleChange={handleBellClick}>
+                  onOpenChange={handleBellClick}>
                   <Badge dot={hasTaskNotification || hasMentionNotification}>
                     <SVGIcons
                       alt="Alert bell icon"
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/ElasticSearchIndexPage/ElasticSearchReIndexModal.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/ElasticSearchIndexPage/ElasticSearchReIndexModal.component.tsx
index a103e8c9030..0e1d6bded37 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/ElasticSearchIndexPage/ElasticSearchReIndexModal.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/ElasticSearchIndexPage/ElasticSearchReIndexModal.component.tsx
@@ -50,8 +50,8 @@ const ReIndexAllModal = ({
         htmlType: 'submit',
       }}
       okText="Submit"
+      open={visible}
       title={t('label.re-index-elastic-search')}
-      visible={visible}
       width={650}
       onCancel={onCancel}>
       <Form
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/AddKPIPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/AddKPIPage.tsx
index 5695bb5ee61..e6aa00d3dbd 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/AddKPIPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/AddKPIPage.tsx
@@ -313,8 +313,9 @@ const AddKPIPage = () => {
                           }}
                           max={100}
                           min={0}
-                          tooltipPlacement="bottom"
-                          tooltipVisible={false}
+                          tooltip={{
+                            open: false,
+                          }}
                           value={metricValue}
                           onChange={(value) => {
                             setMetricValue(value);
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/EditKPIPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/EditKPIPage.tsx
index 99981084308..75720ad42c7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/EditKPIPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/EditKPIPage.tsx
@@ -308,8 +308,7 @@ const EditKPIPage = () => {
                               }}
                               max={100}
                               min={0}
-                              tooltipPlacement="bottom"
-                              tooltipVisible={false}
+                              tooltip={{ open: false }}
                               value={metricValue}
                               onChange={(value) => {
                                 setMetricValue(value);
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/AddAttributeModal/AddAttributeModal.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/AddAttributeModal/AddAttributeModal.tsx
index f611167631b..13650f9d4cd 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/AddAttributeModal/AddAttributeModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/AddAttributeModal/AddAttributeModal.tsx
@@ -129,6 +129,7 @@ const AddAttributeModal: FC<Props> = ({
       confirmLoading={isModalLoading}
       data-testid="modal-container"
       okText="Submit"
+      open={isOpen}
       title={
         <span data-testid="modal-title">
           {title}{' '}
@@ -137,7 +138,6 @@ const AddAttributeModal: FC<Props> = ({
           </span>
         </span>
       }
-      visible={isOpen}
       width={750}
       onCancel={onCancel}
       onOk={() => onSave(selectedValues)}>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/teams/AddTeamForm.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/teams/AddTeamForm.tsx
index fb618e8fb6b..4027555212a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/teams/AddTeamForm.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/teams/AddTeamForm.tsx
@@ -101,8 +101,8 @@ const AddTeamForm: React.FC<AddTeamFormType> = ({
         type: 'primary',
         htmlType: 'submit',
       }}
+      open={visible}
       title={t('label.add-entity', { entity: t('label.team') })}
-      visible={visible}
       width={750}
       onCancel={onCancel}>
       <Form
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/teams/AddUsersModalV1.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/teams/AddUsersModalV1.tsx
index 0b64269f42b..794b7f3cf17 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/teams/AddUsersModalV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/teams/AddUsersModalV1.tsx
@@ -182,8 +182,8 @@ const AddUsersModalV1 = ({
         id: 'save-button',
       }}
       okText="Save"
+      open={isVisible}
       title={header}
-      visible={isVisible}
       width={750}
       onCancel={onCancel}
       onOk={handleSave}>