fixed ANTD deprecated warnings (#9560)

* fixed and deprecate warning

* fixed failing unit test

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">

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"

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()}>

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')}
+      title={t('label.edge-information')}>
-      visible={visible}>
       {isLoading ? (
         <Loader />
       ) : (

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);
           }}

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')}

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]}>

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();
 

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>

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

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,10 +294,7 @@ const GlossaryV1 = ({
     );
   });
 
-  const manageButtonContent = () => {
+  const manageButtonContent = [
-    return (
-      <Menu
-        items={[
     {
       label: (
         <Space
@@ -311,25 +307,19 @@ const GlossaryV1 = ({
           }}>
           <SVGIcons alt="Delete" icon={Icons.DELETE} />
           <div className="tw-text-left" data-testid="delete-button">
-                  <p
+            <p className="tw-font-medium" data-testid="delete-button-title">
-                    className="tw-font-medium"
-                    data-testid="delete-button-title">
               Delete
             </p>
             <p className="tw-text-grey-muted tw-text-xs">
-                    Deleting this{' '}
+              Deleting this {isGlossaryActive ? 'Glossary' : 'GlossaryTerm'}{' '}
-                    {isGlossaryActive ? 'Glossary' : 'GlossaryTerm'} will
+              will permanently remove its metadata from OpenMetadata.
-                    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}
+            onOpenChange={setShowActions}>
-            onVisibleChange={setShowActions}>
             <Tooltip
               title={
                 glossaryPermission.Delete || glossaryTermPermission.Delete

openmetadata-ui/src/main/resources/ui/src/components/IngestionStepper/IngestionStepper.component.tsx

@@ -13,24 +13,21 @@
 
 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) => {
-  return (
+  const items = useMemo(
-    <div className="tw-px-24" data-testid="stepper-container">
+    () =>
-      <Steps current={activeStep} labelPlacement="vertical" size="small">
+      steps
-        {steps
         .filter((step) => !excludeSteps.includes(step.step))
         .map((step) => {
-            return (
+          return {
-              <Step
+            icon: (
-                icon={
               <span
                 className={classNames(
                   'ingestion-rounder tw-self-center',
@@ -41,13 +38,22 @@ const IngestionStepper = ({ steps, activeStep, excludeSteps = [] }: Props) => {
                 )}
                 data-testid={`step-icon-${step.step}`}
               />
-                }
+            ),
-                key={`${step.name}`}
+            key: step.name,
-                title={step.name}
+            title: step.name,
-              />
+          };
+        }),
+    [steps, activeStep, excludeSteps]
   );
-          })}
+
-      </Steps>
+  return (
+    <div className="tw-px-24" data-testid="stepper-container">
+      <Steps
+        current={activeStep}
+        items={items}
+        labelPlacement="vertical"
+        size="small"
+      />
     </div>
   );
 };

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

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

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>

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">

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}>

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

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

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

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

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

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,

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"

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]}>

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}
+                onOpenChange={setShowActions}>
-                onVisibleChange={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">

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>

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);

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();

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(

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}

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">

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>

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,9 +64,7 @@ const ManageButton: FC<Props> = ({
   const [showActions, setShowActions] = useState<boolean>(false);
   const [isDelete, setIsDelete] = useState<boolean>(false);
 
-  const menu = (
+  const items = [
-    <Menu
-      items={[
     {
       label: (
         <Tooltip title={canDelete ? '' : NO_PERMISSION_FOR_ACTION}>
@@ -125,11 +123,7 @@ const ManageButton: FC<Props> = ({
                   }}>
                   <Col span={3}>
                     {' '}
-                        <SVGIcons
+                    <SVGIcons alt="Restore" icon={Icons.RESTORE} width="20px" />
-                          alt="Restore"
-                          icon={Icons.RESTORE}
-                          width="20px"
-                        />
                   </Col>
                   <Col span={21}>
                     <Row data-testid="restore-button">
@@ -196,20 +190,18 @@ const ManageButton: FC<Props> = ({
         ]
       : []),
     ...(extraDropdownContent ? extraDropdownContent : []),
-      ]}
+  ];
-    />
-  );
 
   return (
     <>
       <Dropdown
         align={{ targetOffset: [-12, 0] }}
-        overlay={menu}
+        menu={{ items }}
+        open={showActions}
         overlayStyle={{ width: '350px' }}
         placement="bottomRight"
         trigger={['click']}
-        visible={showActions}
+        onOpenChange={setShowActions}>
-        onVisibleChange={setShowActions}>
         <Button
           className={classNames(
             'tw-rounded tw-flex tw-justify-center tw-w-6 manage-dropdown-button',

openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx

@@ -11,16 +11,7 @@
  *  limitations under the License.
  */
 
-import {
+import { Badge, Dropdown, Image, Input, Select, Space, Tooltip } from 'antd';
-  Badge,
-  Dropdown,
-  Image,
-  Input,
-  Menu,
-  Select,
-  Space,
-  Tooltip,
-} from 'antd';
 import { CookieStorage } from 'cookie-storage';
 import i18next from 'i18next';
 import { debounce, toString } from 'lodash';
@@ -201,9 +192,7 @@ const NavBar = ({
     };
   };
 
-  const governanceMenu = (
+  const governanceMenu = [
-    <Menu
-      items={[
     {
       key: 'glossary',
       label: (
@@ -232,9 +221,7 @@ const NavBar = ({
         </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"

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

openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/AddKPIPage.tsx

@@ -313,8 +313,9 @@ const AddKPIPage = () => {
                           }}
                           max={100}
                           min={0}
-                          tooltipPlacement="bottom"
+                          tooltip={{
-                          tooltipVisible={false}
+                            open: false,
+                          }}
                           value={metricValue}
                           onChange={(value) => {
                             setMetricValue(value);

openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/EditKPIPage.tsx

@@ -308,8 +308,7 @@ const EditKPIPage = () => {
                               }}
                               max={100}
                               min={0}
-                              tooltipPlacement="bottom"
+                              tooltip={{ open: false }}
-                              tooltipVisible={false}
                               value={metricValue}
                               onChange={(value) => {
                                 setMetricValue(value);

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)}>

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

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}>