mirror of
https://github.com/open-metadata/OpenMetadata.git
synced 2025-10-13 09:48:19 +00:00
fixed ANTD deprecated warnings (#9560)
* fixed and deprecate warning * fixed failing unit test
This commit is contained in:
Shailesh Parmar
GitHub
parent
ea84695648
commit
2bc8ca050d
@ -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">
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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()}>
|
||||
|
||||
@ -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 />
|
||||
) : (
|
||||
|
||||
@ -1398,8 +1398,8 @@ const EntityLineageComponent: FunctionComponent<EntityLineageProp> = ({
|
||||
deletionState.loading,
|
||||
deletionState.status
|
||||
)}
|
||||
open={showDeleteModal}
|
||||
title="Remove lineage edge"
|
||||
visible={showDeleteModal}
|
||||
onCancel={() => {
|
||||
setShowDeleteModal(false);
|
||||
}}
|
||||
|
||||
@ -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')}
|
||||
|
||||
@ -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]}>
|
||||
|
||||
@ -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();
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -118,8 +118,8 @@ const GlobalSearchProvider: FC<Props> = ({ children }: Props) => {
|
||||
}}
|
||||
closeIcon={<></>}
|
||||
footer={null}
|
||||
open={visible}
|
||||
transitionName=""
|
||||
visible={visible}
|
||||
width={650}
|
||||
onCancel={handleCancel}>
|
||||
<GlobalSearchSuggestions
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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}>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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]}>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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
|
||||
|
||||
@ -313,8 +313,9 @@ const AddKPIPage = () => {
|
||||
}}
|
||||
max={100}
|
||||
min={0}
|
||||
tooltipPlacement="bottom"
|
||||
tooltipVisible={false}
|
||||
tooltip={{
|
||||
open: false,
|
||||
}}
|
||||
value={metricValue}
|
||||
onChange={(value) => {
|
||||
setMetricValue(value);
|
||||
|
||||
@ -308,8 +308,7 @@ const EditKPIPage = () => {
|
||||
}}
|
||||
max={100}
|
||||
min={0}
|
||||
tooltipPlacement="bottom"
|
||||
tooltipVisible={false}
|
||||
tooltip={{ open: false }}
|
||||
value={metricValue}
|
||||
onChange={(value) => {
|
||||
setMetricValue(value);
|
||||
|
||||
@ -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)}>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -182,8 +182,8 @@ const AddUsersModalV1 = ({
|
||||
id: 'save-button',
|
||||
}}
|
||||
okText="Save"
|
||||
open={isVisible}
|
||||
title={header}
|
||||
visible={isVisible}
|
||||
width={750}
|
||||
onCancel={onCancel}
|
||||
onOk={handleSave}>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user