From a93909e7c8cc84ba3957327056ac69db7532ce09 Mon Sep 17 00:00:00 2001 From: Sachin Chaurasiya Date: Wed, 4 Jan 2023 20:51:46 +0530 Subject: [PATCH] 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 --- .../src/main/resources/ui/package.json | 1 - .../ActivityFeedEditor/SendButton.tsx | 13 ++- .../ActivityFeedPanel/FeedPanelHeader.tsx | 10 +- .../FrequentlyJoinedTables.component.tsx | 11 +-- .../GithubStarButton/GithubStarButton.tsx | 31 ++---- .../Ingestion/Ingestion.component.tsx | 14 ++- .../RecentSearchedTermsAntd.tsx | 15 ++- .../ServiceConnectionDetails.component.tsx | 10 +- .../TestSuitePipelineTab.component.tsx | 14 ++- .../CopyToClipboardButton.test.tsx | 11 +-- .../CopyToClipboardButton.tsx | 16 ++- .../common/description/DescriptionV1.tsx | 9 +- .../common/facetfilter/FilterContainer.tsx | 8 +- .../common/popover/PopOver.test.tsx | 98 ------------------- .../src/components/common/popover/PopOver.tsx | 80 --------------- .../components/common/popover/PopOverTypes.ts | 35 ------- .../ui/src/components/nav-bar/NavBar.tsx | 19 ++-- .../src/pages/database-details/index.test.tsx | 8 -- .../resources/ui/src/utils/EntityUtils.tsx | 11 +-- .../resources/ui/src/utils/TableUtils.tsx | 11 +-- .../src/main/resources/ui/yarn.lock | 12 --- 21 files changed, 83 insertions(+), 354 deletions(-) delete mode 100644 openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOver.test.tsx delete mode 100644 openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOver.tsx delete mode 100644 openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOverTypes.ts diff --git a/openmetadata-ui/src/main/resources/ui/package.json b/openmetadata-ui/src/main/resources/ui/package.json index 18a8782e8e2..48e97888b76 100644 --- a/openmetadata-ui/src/main/resources/ui/package.json +++ b/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", diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedEditor/SendButton.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedEditor/SendButton.tsx index e043e102a6b..1d11066cd4c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedEditor/SendButton.tsx +++ b/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 = ({
e.stopPropagation()}> - Send now

@@ -48,9 +48,8 @@ export const SendButton: FC = ({

} - position="top" - size="small" - trigger="mouseenter"> + placement="top" + trigger="hover"> - +
); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/FeedPanelHeader.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/FeedPanelHeader.tsx index 1d8f82009a5..13b570d30fd 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/FeedPanelHeader.tsx +++ b/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 = ({ onCancel, @@ -43,10 +43,10 @@ const FeedPanelHeader: FC = ({

{onShowNewConversation ? ( - + trigger="hover"> - + ) : null} = ({ {joinedTables.length > viewCap && (
- {`+ ${joinedTables.length - viewCap} more`} - +
)} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/GithubStarButton/GithubStarButton.tsx b/openmetadata-ui/src/main/resources/ui/src/components/GithubStarButton/GithubStarButton.tsx index c6abf0b5aa9..9d76158647f 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/GithubStarButton/GithubStarButton.tsx +++ b/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(true); @@ -25,9 +25,8 @@ const GithubStarButton: FunctionComponent = () => { return (
- { } + mouseEnterDelay={100} open={open} - popperOptions={{ - 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" + placement="left" trigger="click"> - +
); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/Ingestion.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/Ingestion.component.tsx index 464fc7ecaf0..33bb59c164d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/Ingestion.component.tsx +++ b/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 = ({ key: 'schedule', render: (_, record) => record.airflowConfig?.scheduleInterval ? ( - {cronstrue.toString( record.airflowConfig.scheduleInterval || '', @@ -500,11 +499,10 @@ const Ingestion: React.FC = ({ )}
} - position="bottom" - theme="light" - trigger="mouseenter"> + placement="bottom" + trigger="hover"> {record.airflowConfig.scheduleInterval ?? '--'} - + ) : ( -- ), diff --git a/openmetadata-ui/src/main/resources/ui/src/components/RecentSearchedTerms/RecentSearchedTermsAntd.tsx b/openmetadata-ui/src/main/resources/ui/src/components/RecentSearchedTerms/RecentSearchedTermsAntd.tsx index d23fc266e70..d6047ac52fa 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/RecentSearchedTerms/RecentSearchedTermsAntd.tsx +++ b/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 ? ( - {item.term} } - position="top" - size="regular" - trigger="mouseenter"> + placement="top" + trigger="hover"> {item.term.slice(0, 20)}... - + ) : ( item.term )} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ServiceConnectionDetails/ServiceConnectionDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ServiceConnectionDetails/ServiceConnectionDetails.component.tsx index c6891eb73f7..6275b4f6c8b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/ServiceConnectionDetails/ServiceConnectionDetails.component.tsx +++ b/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 = ({

{title || key}:

- + - +
{ return ( <> {record?.airflowConfig.scheduleInterval ? ( - {cronstrue.toString( record.airflowConfig.scheduleInterval || '', @@ -378,11 +377,10 @@ const TestSuitePipelineTab = () => { )}
} - position="bottom" - theme="light" - trigger="mouseenter"> + placement="bottom" + trigger="hover"> {record.airflowConfig.scheduleInterval ?? '--'} - + ) : ( -- )} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/buttons/CopyToClipboardButton/CopyToClipboardButton.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/buttons/CopyToClipboardButton/CopyToClipboardButton.test.tsx index de0265c58a2..a7ddea958dd 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/buttons/CopyToClipboardButton/CopyToClipboardButton.test.tsx +++ b/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 }) => ( -

{children}

- )); -}); - describe('Test CopyToClipboardButton Component', () => { it('Should render all child elements', () => { const { container } = render(, { wrapper: MemoryRouter, }); - const popover = getByTestId(container, 'popover'); + const copyIcon = getByTestId(container, 'copy-icon'); - expect(popover).toBeInTheDocument(); expect(copyIcon).toBeInTheDocument(); }); }); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/buttons/CopyToClipboardButton/CopyToClipboardButton.tsx b/openmetadata-ui/src/main/resources/ui/src/components/buttons/CopyToClipboardButton/CopyToClipboardButton.tsx index 7e01e7b684c..112d0c5000c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/buttons/CopyToClipboardButton/CopyToClipboardButton.tsx +++ b/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 = ({ size="custom" theme="default" variant="text"> - @@ -59,8 +58,7 @@ export const CopyToClipboardButton: FunctionComponent = ({ } open={copied} - position={position} - theme="light" + placement={position} trigger="click"> = ({ icon={Icons.COPY} width="16px" /> - + ); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/description/DescriptionV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/description/DescriptionV1.tsx index 4c050eb0d52..30ab1b22535 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/description/DescriptionV1.tsx +++ b/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)}> - + trigger="hover"> - + ) : null} {!isUndefined(descriptionThread) ? ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FilterContainer.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FilterContainer.tsx index 2ebc996a064..62d5aa40f25 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FilterContainer.tsx +++ b/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 = ({ @@ -34,9 +34,9 @@ const FilterContainer: FunctionComponent = ({ : name; return ( - - <>{label || formattedName} - + + {label || formattedName} + ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOver.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOver.test.tsx deleted file mode 100644 index 6f8cde81bed..00000000000 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOver.test.tsx +++ /dev/null @@ -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( - - Hello World - - ); - - const popover = queryByText(container, /Hello World/i); - - expect(popover).toBeInTheDocument(); - }); - - it('Onclick popover should display title', async () => { - const { container } = render( - - Hello World - - ); - - 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 = test popover; - const { container } = render( - - Hello World - - ); - - fireEvent( - getByText(container, /Hello World/i), - new MouseEvent('click', { - bubbles: true, - cancelable: true, - }) - ); - - expect(await screen.findByText(/test popover/i)).toBeInTheDocument(); - }); -}); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOver.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOver.tsx deleted file mode 100644 index cecc0e94d95..00000000000 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOver.tsx +++ /dev/null @@ -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 = ({ - arrow = true, - children, - className = '', - delay = 500, - hideDelay = 0, - html, - position, - size = 'regular', - title, - trigger, - theme = 'dark', - sticky = false, - ...props -}: PopOverProp): JSX.Element => { - return ( - - {children} - - ); -}; - -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; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOverTypes.ts b/openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOverTypes.ts deleted file mode 100644 index adf3722c554..00000000000 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOverTypes.ts +++ /dev/null @@ -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; -} 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 fceb8f17676..3536d5f1b4f 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,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 = ({ + {isImgUrlValid ? (
)} - + } isDropDownIconVisible={false} type="link" diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.test.tsx index 19b532af0d6..cca829fa80e 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.test.tsx +++ b/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 }) => ( -
{children}
- )); -}); - jest.mock('../../utils/CommonUtils', () => ({ getCurrentUserId: jest .fn() diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx index 56b8d9e3bab..d0af1f2968f 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx +++ b/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 && ( - {frequentlyJoinedWithColumns ?.slice(3) @@ -569,11 +569,10 @@ export const getFrequentlyJoinedColumns = ( ))}
} - position="bottom" - theme="light" + placement="bottom" trigger="click"> ... - + )}
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx index 56490f9126c..749327048e6 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx +++ b/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 ( - + trigger="hover"> - + ); }; diff --git a/openmetadata-ui/src/main/resources/ui/yarn.lock b/openmetadata-ui/src/main/resources/ui/yarn.lock index 60c4dbc5be4..841bfc5797a 100644 --- a/openmetadata-ui/src/main/resources/ui/yarn.lock +++ b/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"