chore(ui) : Remove react-tippy dependency and use antd component (#9606)

* chore(ui) : Remove react-tippy dependency and use antd component

* remove : react-tippy package

* chore : replace popover with tooltip where required

* fix : unit test

openmetadata-ui/src/main/resources/ui/package.json

@@ -82,7 +82,6 @@
     "react-oidc": "^1.0.3",
     "react-quill": "^2.0.0",
     "react-router-dom": "^5.2.0",
-    "react-tippy": "^1.4.0",
     "react-toastify": "^8.2.0",
     "reactflow": "^11.1.1",
     "reactjs-localstorage": "^1.0.1",

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedEditor/SendButton.tsx

@@ -11,11 +11,11 @@
  *  limitations under the License.
  */
 
+import { Popover } from 'antd';
 import classNames from 'classnames';
 import React, { FC, Fragment } from 'react';
 import SVGIcons, { Icons } from '../../../utils/SvgUtils';
 import { Button } from '../../buttons/Button/Button';
-import PopOver from '../../common/popover/PopOver';
 
 interface SendButtonProp {
   editorValue: string;
@@ -36,8 +36,8 @@ export const SendButton: FC<SendButtonProp> = ({
     <div
       className="tw-absolute tw-right-2 tw-bottom-2 tw-flex tw-flex-row tw-items-center tw-justify-end"
       onClick={(e) => e.stopPropagation()}>
-      <PopOver
+      <Popover
-        html={
+        content={
           <Fragment>
             <strong>Send now</strong>
             <p>
@@ -48,9 +48,8 @@ export const SendButton: FC<SendButtonProp> = ({
             </p>
           </Fragment>
         }
-        position="top"
+        placement="top"
-        size="small"
+        trigger="hover">
-        trigger="mouseenter">
         <Button
           className={classNames(
             'tw-py-0.5 tw-px-1 tw-rounded tw-bg-none',
@@ -67,7 +66,7 @@ export const SendButton: FC<SendButtonProp> = ({
             width="18px"
           />
         </Button>
-      </PopOver>
+      </Popover>
     </div>
   );
 };

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/FeedPanelHeader.tsx

@@ -12,6 +12,7 @@
  */
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Tooltip } from 'antd';
 import classNames from 'classnames';
 import React, { FC } from 'react';
 import {
@@ -19,7 +20,6 @@ import {
   getFeedPanelHeaderText,
 } from '../../../utils/FeedUtils';
 import { Button } from '../../buttons/Button/Button';
-import PopOver from '../../common/popover/PopOver';
 import { FeedPanelHeaderProp } from './ActivityFeedPanel.interface';
 const FeedPanelHeader: FC<FeedPanelHeaderProp> = ({
   onCancel,
@@ -43,10 +43,10 @@ const FeedPanelHeader: FC<FeedPanelHeaderProp> = ({
         </p>
         <div className="tw-flex">
           {onShowNewConversation ? (
-            <PopOver
+            <Tooltip
-              position="bottom"
+              placement="bottom"
               title="Start conversation"
-              trigger="mouseenter">
+              trigger="hover">
               <Button
                 className={classNames('tw-h-7 tw-px-2')}
                 data-testid="add-new-conversation"
@@ -58,7 +58,7 @@ const FeedPanelHeader: FC<FeedPanelHeaderProp> = ({
                 }}>
                 <FontAwesomeIcon icon="plus" />
               </Button>
-            </PopOver>
+            </Tooltip>
           ) : null}
           <svg
             className="tw-w-5 tw-h-5 tw-ml-2 tw-cursor-pointer tw-self-center"

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

@@ -11,12 +11,12 @@
  *  limitations under the License.
  */
 
+import { Popover } from 'antd';
 import React, { FunctionComponent, useEffect, useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { getTableDetailsPath } from '../../constants/constants';
 import { JoinedWith } from '../../generated/entity/data/table';
 import { getCountBadge } from '../../utils/CommonUtils';
-import PopOver from '../common/popover/PopOver';
 
 type Props = {
   header: string;
@@ -118,15 +118,14 @@ const FrequentlyJoinedTables: FunctionComponent<Props> = ({
 
         {joinedTables.length > viewCap && (
           <div data-testid="related-tables-data">
-            <PopOver
+            <Popover
-              html={additionalOptions()}
+              content={additionalOptions()}
-              position="bottom"
+              placement="bottom"
-              theme="light"
               trigger="click">
               <span className="show-more">
                 {`+ ${joinedTables.length - viewCap} more`}
               </span>
-            </PopOver>
+            </Popover>
           </div>
         )}
 

openmetadata-ui/src/main/resources/ui/src/components/GithubStarButton/GithubStarButton.tsx

@@ -11,10 +11,10 @@
  *  limitations under the License.
  */
 
+import { Popover } from 'antd';
 import { isNil } from 'lodash';
-import React, { CSSProperties, FunctionComponent, useState } from 'react';
+import React, { FunctionComponent, useState } from 'react';
 import SVGIcons, { Icons } from '../../utils/SvgUtils';
-import PopOver from '../common/popover/PopOver';
 
 const GithubStarButton: FunctionComponent = () => {
   const [open, setOpen] = useState<boolean>(true);
@@ -25,9 +25,8 @@ const GithubStarButton: FunctionComponent = () => {
 
   return (
     <div className="tw-fixed tw-bottom-8 tw-right-8">
-      <PopOver
+      <Popover
-        delay={100}
+        content={
-        html={
           <>
             <a
               className="link-text-grey tw-text-sm tw-font-medium"
@@ -44,25 +43,9 @@ const GithubStarButton: FunctionComponent = () => {
             </a>
           </>
         }
+        mouseEnterDelay={100}
         open={open}
-        popperOptions={{
+        placement="left"
-          modifiers: {
-            addZIndex: {
-              enabled: true,
-              order: 810,
-              // react-tippy has this dataObject that can be of any type
-              fn: (data: { styles: CSSProperties }) => ({
-                ...data,
-                styles: {
-                  ...data.styles,
-                  zIndex: 9990,
-                },
-              }),
-            },
-          },
-        }}
-        position="left"
-        theme="light"
         trigger="click">
         <button
           className="tw-h-12 tw-w-12 tw-rounded-full tw-shadow-lg tw-cursor-pointer tw-bg-white"
@@ -74,7 +57,7 @@ const GithubStarButton: FunctionComponent = () => {
             width="30"
           />
         </button>
-      </PopOver>
+      </Popover>
     </div>
   );
 };

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

@@ -13,7 +13,7 @@
 
 import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, Table, Tooltip, Typography } from 'antd';
+import { Button, Popover, Table, Tooltip, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { AxiosError } from 'axios';
 import classNames from 'classnames';
@@ -43,7 +43,6 @@ import SVGIcons, { Icons } from '../../utils/SvgUtils';
 import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
 import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder';
 import NextPrevious from '../common/next-previous/NextPrevious';
-import PopOver from '../common/popover/PopOver';
 import Searchbar from '../common/searchbar/Searchbar';
 import DropDownList from '../dropdown/DropDownList';
 import Loader from '../Loader/Loader';
@@ -488,8 +487,8 @@ const Ingestion: React.FC<IngestionProps> = ({
         key: 'schedule',
         render: (_, record) =>
           record.airflowConfig?.scheduleInterval ? (
-            <PopOver
+            <Popover
-              html={
+              content={
                 <div>
                   {cronstrue.toString(
                     record.airflowConfig.scheduleInterval || '',
@@ -500,11 +499,10 @@ const Ingestion: React.FC<IngestionProps> = ({
                   )}
                 </div>
               }
-              position="bottom"
+              placement="bottom"
-              theme="light"
+              trigger="hover">
-              trigger="mouseenter">
               <span>{record.airflowConfig.scheduleInterval ?? '--'}</span>
-            </PopOver>
+            </Popover>
           ) : (
             <span>--</span>
           ),

openmetadata-ui/src/main/resources/ui/src/components/RecentSearchedTerms/RecentSearchedTermsAntd.tsx

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Button, Card } from 'antd';
+import { Button, Card, Popover } from 'antd';
 import { RecentlySearchedData } from 'Models';
 import React, { FunctionComponent, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
@@ -21,7 +21,7 @@ import {
   removeRecentSearchTerm,
 } from '../../utils/CommonUtils';
 import SVGIcons, { Icons } from '../../utils/SvgUtils';
-import PopOver from '../common/popover/PopOver';
+
 import { leftPanelAntCardStyle } from '../containers/PageLayout';
 
 const RecentSearchedTermsAntd: FunctionComponent = () => {
@@ -63,17 +63,16 @@ const RecentSearchedTermsAntd: FunctionComponent = () => {
                         data-testid={`search-term-${item.term}`}
                         type="text">
                         {item.term.length > 20 ? (
-                          <PopOver
+                          <Popover
-                            html={
+                            content={
                               <div className="tw-flex tw-flex-nowrap">
                                 {item.term}
                               </div>
                             }
-                            position="top"
+                            placement="top"
-                            size="regular"
+                            trigger="hover">
-                            trigger="mouseenter">
                             <span>{item.term.slice(0, 20)}...</span>
-                          </PopOver>
+                          </Popover>
                         ) : (
                           item.term
                         )}

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

@@ -17,6 +17,7 @@
 
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Tooltip } from 'antd';
 import { isEmpty, isNull, isObject } from 'lodash';
 import React, { ReactNode, useEffect, useState } from 'react';
 import { DEF_UI_SCHEMA, JWT_CONFIG } from '../../constants/Services.constant';
@@ -34,7 +35,6 @@ import { getMessagingConfig } from '../../utils/MessagingServiceUtils';
 import { getMetadataConfig } from '../../utils/MetadataServiceUtils';
 import { getMlmodelConfig } from '../../utils/MlmodelServiceUtils';
 import { getPipelineConfig } from '../../utils/PipelineServiceUtils';
-import PopOver from '../common/popover/PopOver';
 
 type ServiceConnectionDetailsProps = {
   connectionDetails: ConfigData;
@@ -166,17 +166,13 @@ const ServiceConnectionDetails = ({
           <div className="tw-w-1/2 tw-flex tw-nowrap tw-mb-3" key={key}>
             <div className="tw-flex">
               <p className="tw-text-gray-500 tw-m-0">{title || key}:</p>
-              <PopOver
+              <Tooltip position="bottom" title={description} trigger="hover">
-                delay={0}
-                position="bottom"
-                title={description}
-                trigger="mouseenter">
                 <FontAwesomeIcon
                   className="tw-mx-1"
                   color="#C4C4C4"
                   icon={{ ...faInfoCircle }}
                 />
-              </PopOver>
+              </Tooltip>
             </div>
             <div className="tw-mx-3 tw-flex-1">
               <input

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

@@ -12,7 +12,7 @@
  */
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, Col, Row, Table, Tooltip } from 'antd';
+import { Button, Col, Popover, Row, Table, Tooltip } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { AxiosError } from 'axios';
 import cronstrue from 'cronstrue';
@@ -39,7 +39,6 @@ import {
 import SVGIcons, { Icons } from '../../utils/SvgUtils';
 import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
 import ErrorPlaceHolderIngestion from '../common/error-with-placeholder/ErrorPlaceHolderIngestion';
-import PopOver from '../common/popover/PopOver';
 import { IngestionRecentRuns } from '../Ingestion/IngestionRecentRun/IngestionRecentRuns.component';
 import Loader from '../Loader/Loader';
 import EntityDeleteModal from '../Modals/EntityDeleteModal/EntityDeleteModal';
@@ -366,8 +365,8 @@ const TestSuitePipelineTab = () => {
           return (
             <>
               {record?.airflowConfig.scheduleInterval ? (
-                <PopOver
+                <Popover
-                  html={
+                  content={
                     <div>
                       {cronstrue.toString(
                         record.airflowConfig.scheduleInterval || '',
@@ -378,11 +377,10 @@ const TestSuitePipelineTab = () => {
                       )}
                     </div>
                   }
-                  position="bottom"
+                  placement="bottom"
-                  theme="light"
+                  trigger="hover">
-                  trigger="mouseenter">
                   <span>{record.airflowConfig.scheduleInterval ?? '--'}</span>
-                </PopOver>
+                </Popover>
               ) : (
                 <span>--</span>
               )}

openmetadata-ui/src/main/resources/ui/src/components/buttons/CopyToClipboardButton/CopyToClipboardButton.test.tsx

@@ -20,23 +20,14 @@ const mockProps = {
   copyText: 'mock-copy',
 };
 
-jest.mock('../../common/popover/PopOver', () => {
-  return jest
-    .fn()
-    .mockImplementation(({ children }: { children: React.ReactNode }) => (
-      <p data-testid="popover">{children}</p>
-    ));
-});
-
 describe('Test CopyToClipboardButton Component', () => {
   it('Should render all child elements', () => {
     const { container } = render(<CopyToClipboardButton {...mockProps} />, {
       wrapper: MemoryRouter,
     });
-    const popover = getByTestId(container, 'popover');
+
     const copyIcon = getByTestId(container, 'copy-icon');
 
-    expect(popover).toBeInTheDocument();
     expect(copyIcon).toBeInTheDocument();
   });
 });

openmetadata-ui/src/main/resources/ui/src/components/buttons/CopyToClipboardButton/CopyToClipboardButton.tsx

@@ -11,17 +11,17 @@
  *  limitations under the License.
  */
 
+import { Popover, PopoverProps } from 'antd';
 import React, { FunctionComponent, useState } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import SVGIcons, { Icons } from '../../../utils/SvgUtils';
-import PopOver from '../../common/popover/PopOver';
+
-import { Position } from '../../common/popover/PopOverTypes';
 import { Button } from '../Button/Button';
 
 interface Props {
   copyText: string;
   copyTimer?: number;
-  position?: Position;
+  position?: PopoverProps['placement'];
   onCopy?: () => void;
 }
 
@@ -49,9 +49,8 @@ export const CopyToClipboardButton: FunctionComponent<Props> = ({
         size="custom"
         theme="default"
         variant="text">
-        <PopOver
+        <Popover
-          delay={0}
+          content={
-          html={
             <span
               className="tw-text-grey-body tw-text-xs tw-font-medium tw-italic"
               data-testid="copy-success">
@@ -59,8 +58,7 @@ export const CopyToClipboardButton: FunctionComponent<Props> = ({
             </span>
           }
           open={copied}
-          position={position}
+          placement={position}
-          theme="light"
           trigger="click">
           <SVGIcons
             alt="Copy"
@@ -68,7 +66,7 @@ export const CopyToClipboardButton: FunctionComponent<Props> = ({
             icon={Icons.COPY}
             width="16px"
           />
-        </PopOver>
+        </Popover>
       </Button>
     </CopyToClipboard>
   );

openmetadata-ui/src/main/resources/ui/src/components/common/description/DescriptionV1.tsx

@@ -23,7 +23,6 @@ import { Table } from '../../../generated/entity/data/table';
 import { getEntityFeedLink } from '../../../utils/EntityUtils';
 import SVGIcons, { Icons } from '../../../utils/SvgUtils';
 import { ModalWithMarkdownEditor } from '../../Modals/ModalWithMarkdownEditor/ModalWithMarkdownEditor';
-import PopOver from '../popover/PopOver';
 import RichTextEditorPreviewer from '../rich-text-editor/RichTextEditorPreviewer';
 const { Text } = Typography;
 
@@ -129,16 +128,16 @@ const DescriptionV1 = ({
               className="focus:tw-outline-none tw-ml-2 tw--mt-6"
               data-testid="request-description"
               onClick={() => onEntityFieldSelect?.(EntityField.DESCRIPTION)}>
-              <PopOver
+              <Tooltip
-                position="top"
+                placement="top"
                 title="Request description"
-                trigger="mouseenter">
+                trigger="hover">
                 <SVGIcons
                   alt="request-description"
                   className="tw-mt-2"
                   icon={Icons.REQUEST}
                 />
-              </PopOver>
+              </Tooltip>
             </button>
           ) : null}
           {!isUndefined(descriptionThread) ? (

openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FilterContainer.tsx

@@ -11,12 +11,12 @@
  *  limitations under the License.
  */
 
+import { Tooltip } from 'antd';
 import classNames from 'classnames';
 import { isNil } from 'lodash';
 import React, { FunctionComponent } from 'react';
 import { FQN_SEPARATOR_CHAR } from '../../../constants/char.constants';
 import { getCountBadge } from '../../../utils/CommonUtils';
-import PopOver from '../popover/PopOver';
 import { FilterContainerProp } from './facetFilter.interface';
 
 const FilterContainer: FunctionComponent<FilterContainerProp> = ({
@@ -34,9 +34,9 @@ const FilterContainer: FunctionComponent<FilterContainerProp> = ({
       : name;
 
     return (
-      <PopOver position="top" title={formattedName} trigger="mouseenter">
+      <Tooltip placement="top" title={formattedName} trigger="hover">
-        <>{label || formattedName}</>
+        {label || formattedName}
-      </PopOver>
+      </Tooltip>
     );
   };
 

openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOver.test.tsx

@@ -1,98 +0,0 @@
-/*
- *  Copyright 2022 Collate.
- *  Licensed under the Apache License, Version 2.0 (the "License");
- *  you may not use this file except in compliance with the License.
- *  You may obtain a copy of the License at
- *  http://www.apache.org/licenses/LICENSE-2.0
- *  Unless required by applicable law or agreed to in writing, software
- *  distributed under the License is distributed on an "AS IS" BASIS,
- *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *  See the License for the specific language governing permissions and
- *  limitations under the License.
- */
-
-import {
-  fireEvent,
-  getByText,
-  queryByText,
-  render,
-  screen,
-} from '@testing-library/react';
-import React from 'react';
-import PopOver from './PopOver';
-
-let global;
-
-jest.useRealTimers();
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-(global as any).document.createRange = () => ({
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  setStart: () => {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  setEnd: () => {},
-  commonAncestorContainer: {
-    nodeName: 'BODY',
-    ownerDocument: document,
-  },
-});
-
-describe('Test Popover Component', () => {
-  it('Component should render', () => {
-    const { container } = render(
-      <PopOver
-        arrow
-        className=""
-        delay={500}
-        hideDelay={0}
-        position="bottom"
-        size="regular"
-        sticky={false}
-        theme="dark"
-        trigger="click">
-        <span>Hello World</span>
-      </PopOver>
-    );
-
-    const popover = queryByText(container, /Hello World/i);
-
-    expect(popover).toBeInTheDocument();
-  });
-
-  it('Onclick popover should display title', async () => {
-    const { container } = render(
-      <PopOver position="bottom" title="test popover" trigger="click">
-        <span>Hello World</span>
-      </PopOver>
-    );
-
-    fireEvent(
-      getByText(container, /Hello World/i),
-      new MouseEvent('click', {
-        bubbles: true,
-        cancelable: true,
-      })
-    );
-
-    expect(await screen.findByText(/test popover/i)).toBeInTheDocument();
-  });
-
-  it('Onclick popover should display html', async () => {
-    const html = <span>test popover</span>;
-    const { container } = render(
-      <PopOver html={html} position="bottom" trigger="click">
-        <span>Hello World</span>
-      </PopOver>
-    );
-
-    fireEvent(
-      getByText(container, /Hello World/i),
-      new MouseEvent('click', {
-        bubbles: true,
-        cancelable: true,
-      })
-    );
-
-    expect(await screen.findByText(/test popover/i)).toBeInTheDocument();
-  });
-});

openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOver.tsx

@@ -1,80 +0,0 @@
-/*
- *  Copyright 2022 Collate.
- *  Licensed under the Apache License, Version 2.0 (the "License");
- *  you may not use this file except in compliance with the License.
- *  You may obtain a copy of the License at
- *  http://www.apache.org/licenses/LICENSE-2.0
- *  Unless required by applicable law or agreed to in writing, software
- *  distributed under the License is distributed on an "AS IS" BASIS,
- *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *  See the License for the specific language governing permissions and
- *  limitations under the License.
- */
-
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Tooltip } from 'react-tippy';
-import 'react-tippy/dist/tippy.css';
-import { PopOverProp, Position, Size, Theme, Trigger } from './PopOverTypes';
-
-const PopOver: React.FC<PopOverProp> = ({
-  arrow = true,
-  children,
-  className = '',
-  delay = 500,
-  hideDelay = 0,
-  html,
-  position,
-  size = 'regular',
-  title,
-  trigger,
-  theme = 'dark',
-  sticky = false,
-  ...props
-}: PopOverProp): JSX.Element => {
-  return (
-    <Tooltip
-      arrow={arrow}
-      className={className}
-      delay={delay}
-      hideDelay={hideDelay}
-      html={html}
-      position={position}
-      size={size}
-      sticky={sticky}
-      theme={theme}
-      title={title || ''}
-      trigger={trigger}
-      {...props}>
-      {children}
-    </Tooltip>
-  );
-};
-
-PopOver.propTypes = {
-  arrow: PropTypes.bool,
-  children: PropTypes.element,
-  className: PropTypes.string,
-  html: PropTypes.element,
-  position: PropTypes.oneOf([
-    'top' as Position,
-    'bottom' as Position,
-    'left' as Position,
-    'right' as Position,
-  ]).isRequired,
-  size: PropTypes.oneOf(['small' as Size, 'regular' as Size, 'big' as Size]),
-  theme: PropTypes.oneOf([
-    'dark' as Theme,
-    'light' as Theme,
-    'transparent' as Theme,
-  ]),
-  title: PropTypes.string,
-  trigger: PropTypes.oneOf([
-    'mouseenter' as Trigger,
-    'focus' as Trigger,
-    'click' as Trigger,
-    'manual' as Trigger,
-  ]).isRequired,
-};
-
-export default PopOver;

openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOverTypes.ts

@@ -1,35 +0,0 @@
-/*
- *  Copyright 2022 Collate.
- *  Licensed under the Apache License, Version 2.0 (the "License");
- *  you may not use this file except in compliance with the License.
- *  You may obtain a copy of the License at
- *  http://www.apache.org/licenses/LICENSE-2.0
- *  Unless required by applicable law or agreed to in writing, software
- *  distributed under the License is distributed on an "AS IS" BASIS,
- *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *  See the License for the specific language governing permissions and
- *  limitations under the License.
- */
-
-import React, { ReactNode } from 'react';
-import { TooltipProps } from 'react-tippy';
-
-export type Position = 'top' | 'left' | 'bottom' | 'right';
-export type Trigger = 'mouseenter' | 'focus' | 'click' | 'manual';
-export type Theme = 'dark' | 'light' | 'transparent';
-export type Size = 'small' | 'regular' | 'big';
-
-export interface PopOverProp extends TooltipProps {
-  html?: React.ReactElement;
-  title?: string;
-  arrow?: boolean;
-  theme?: Theme;
-  size?: Size;
-  position: Position;
-  trigger: Trigger;
-  children: ReactNode;
-  className?: string;
-  delay?: number;
-  hideDelay?: number;
-  sticky?: boolean;
-}

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

@@ -11,7 +11,16 @@
  *  limitations under the License.
  */
 
-import { Badge, Dropdown, Image, Input, Menu, Select, Space } from 'antd';
+import {
+  Badge,
+  Dropdown,
+  Image,
+  Input,
+  Menu,
+  Select,
+  Space,
+  Tooltip,
+} from 'antd';
 import { CookieStorage } from 'cookie-storage';
 import i18next from 'i18next';
 import { debounce, toString } from 'lodash';
@@ -50,7 +59,6 @@ import SearchOptions from '../app-bar/SearchOptions';
 import Suggestions from '../app-bar/Suggestions';
 import Avatar from '../common/avatar/Avatar';
 import CmdKIcon from '../common/CmdKIcon/CmdKIcon.component';
-import PopOver from '../common/popover/PopOver';
 import LegacyDropDown from '../dropdown/DropDown';
 import { WhatsNewModal } from '../Modals/WhatsNewModal';
 import NotificationBox from '../NotificationBox/NotificationBox.component';
@@ -461,10 +469,7 @@ const NavBar = ({
               <LegacyDropDown
                 dropDownList={profileDropdown}
                 icon={
-                  <PopOver
+                  <Tooltip placement="bottom" title="Profile" trigger="hover">
-                    position="bottom"
-                    title="Profile"
-                    trigger="mouseenter">
                     {isImgUrlValid ? (
                       <div className="profile-image square tw--mr-2">
                         <Image
@@ -480,7 +485,7 @@ const NavBar = ({
                     ) : (
                       <Avatar name={username} width="30" />
                     )}
-                  </PopOver>
+                  </Tooltip>
                 }
                 isDropDownIconVisible={false}
                 type="link"

openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.test.tsx

@@ -267,14 +267,6 @@ jest.mock('../../utils/TableUtils', () => ({
   getUsagePercentile: jest.fn().mockReturnValue('Medium - 45th pctile'),
 }));
 
-jest.mock('../../components/common/popover/PopOver', () => {
-  return jest
-    .fn()
-    .mockImplementation(({ children }: { children: React.ReactNode }) => (
-      <div data-testid="popover">{children}</div>
-    ));
-});
-
 jest.mock('../../utils/CommonUtils', () => ({
   getCurrentUserId: jest
     .fn()

openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx

@@ -11,12 +11,12 @@
  *  limitations under the License.
  */
 
+import { Popover } from 'antd';
 import i18next from 'i18next';
 import { isEmpty, isNil, isUndefined, lowerCase, startCase } from 'lodash';
 import { Bucket, LeafNodes, LineagePos } from 'Models';
 import React, { Fragment } from 'react';
 import { Link } from 'react-router-dom';
-import PopOver from '../components/common/popover/PopOver';
 import { EntityData } from '../components/common/PopOverCard/EntityPopOverCard';
 import { ResourceEntity } from '../components/PermissionProvider/PermissionProvider.interface';
 import { FQN_SEPARATOR_CHAR } from '../constants/char.constants';
@@ -542,8 +542,8 @@ export const getFrequentlyJoinedColumns = (
         ))}
 
         {frequentlyJoinedWithColumns.length > 3 && (
-          <PopOver
+          <Popover
-            html={
+            content={
               <div className="text-left">
                 {frequentlyJoinedWithColumns
                   ?.slice(3)
@@ -569,11 +569,10 @@ export const getFrequentlyJoinedColumns = (
                   ))}
               </div>
             }
-            position="bottom"
+            placement="bottom"
-            theme="light"
             trigger="click">
             <span className="show-more m-l-xss text-underline">...</span>
-          </PopOver>
+          </Popover>
         )}
       </span>
     </div>

openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx

@@ -12,6 +12,7 @@
  */
 
 import Icon from '@ant-design/icons/lib/components/Icon';
+import { Tooltip } from 'antd';
 import { ExpandableConfig } from 'antd/lib/table/interface';
 import classNames from 'classnames';
 import { t } from 'i18next';
@@ -26,7 +27,6 @@ import { ReactComponent as MlModelIcon } from '../assets/svg/mlmodal.svg';
 import { ReactComponent as PipelineIcon } from '../assets/svg/pipeline-grey.svg';
 import { ReactComponent as TableIcon } from '../assets/svg/table-grey.svg';
 import { ReactComponent as TopicIcon } from '../assets/svg/topic-grey.svg';
-import PopOver from '../components/common/popover/PopOver';
 import { FQN_SEPARATOR_CHAR } from '../constants/char.constants';
 import {
   getDashboardDetailsPath,
@@ -180,14 +180,13 @@ export const getConstraintIcon = (
   }
 
   return (
-    <PopOver
+    <Tooltip
       className={classNames(className)}
-      position="bottom"
+      placement="bottom"
-      size="small"
       title={title}
-      trigger="mouseenter">
+      trigger="hover">
       <SVGIcons alt={title} icon={icon} width={width} />
-    </PopOver>
+    </Tooltip>
   );
 };
 

openmetadata-ui/src/main/resources/ui/yarn.lock

@@ -11121,11 +11121,6 @@ polished@^3.4.2:
   dependencies:
     "@babel/runtime" "^7.12.5"
 
-popper.js@^1.11.1:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
-  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
-
 portfinder@^1.0.28:
   version "1.0.32"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.32.tgz#2fe1b9e58389712429dc2bea5beb2146146c7f81"
@@ -12276,13 +12271,6 @@ react-test-renderer@^16.14.0:
     react-is "^16.8.6"
     scheduler "^0.19.1"
 
-react-tippy@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/react-tippy/-/react-tippy-1.4.0.tgz#e8a8b4085ec985e5c94fe128918b733b588a1465"
-  integrity sha512-r/hM5XK9Ztr2ZY7IWKuRmISTlUPS/R6ddz6PO2EuxCgW+4JBcGZRPU06XcVPRDCOIiio8ryBQFrXMhFMhsuaHA==
-  dependencies:
-    popper.js "^1.11.1"
-
 react-toastify@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-8.2.0.tgz#ef7d56bdfdc6272ca6b228368ab564721c3a3244"