yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-11-02 03:29:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

MINOR: add tooltip for icons (#15348)

Browse Source 
* added tooltip on floating icons

* localizaion keys

* added tooltip on tables and other icons

* clipboard copy tooltip

* fix unit test

* fix cypress issue

* code smell fix

* changes as per comments and fix cypress issue
This commit is contained in:
Ashish Gupta 2024-02-28 16:41:08 +05:30 committed by GitHub
parent 6a0750eb0c
commit ec503c3afc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
68 changed files with 700 additions and 395 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
openmetadata-ui/src/main/resources/ui/cypress/common/Utils/Entity.ts
View File

@ -412,7 +412,7 @@ export const deleteEntity = (
displayName: string
) => {
deletedEntityCommonChecks({ entityType: endPoint, deleted: false });
cy.clickOutside();
cy.get('[data-testid="manage-button"]').click();
cy.get('[data-testid="delete-button"]').scrollIntoView().click();
cy.get('[data-testid="delete-modal"]').then(() => {
@ -446,6 +446,7 @@ export const deleteEntity = (
);
deletedEntityCommonChecks({ entityType: endPoint, deleted: true });
cy.clickOutside();
if (endPoint === EntityType.Table) {
interceptURL(

4
openmetadata-ui/src/main/resources/ui/cypress/e2e/Features/QueryEntity.spec.js
View File

@ -184,7 +184,7 @@ describe('Query Entity', { tags: 'DataAssets' }, () => {
cy.get('[data-testid="table_queries"]').click();
verifyResponseStatusCode('@fetchQuery', 200);
cy.get('[data-testid="more-option-btn"]').click();
cy.get('[data-testid="query-btn"]').click();
cy.get('[data-menu-id*="edit-query"]').click();
cy.get('.CodeMirror-line')
.click()
@ -218,7 +218,7 @@ describe('Query Entity', { tags: 'DataAssets' }, () => {
cy.get('[data-testid="query-entity-expand-button"]').click();
verifyResponseStatusCode('@getQueryById', 200);
cy.get('[data-testid="more-option-btn"]').click();
cy.get('[data-testid="query-btn"]').click();
cy.get('.ant-dropdown').should('be.visible');
cy.get('[data-menu-id*="delete-query"]').click();
cy.get('[data-testid="save-button"]').click();

2
openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/Permission.spec.ts
View File

@ -361,7 +361,7 @@ describe('Permissions', { tags: 'Settings' }, () => {
interceptURL('GET', '/api/v1/queries?*', 'getQueries');
cy.get('[data-testid="table_queries"]').click();
verifyResponseStatusCode('@getQueries', 200);
cy.get('[data-testid="more-option-btn"]').click();
cy.get('[data-testid="query-btn"]').click();
cy.get('[data-menu-id*="edit-query"]').click();
interceptURL('PATCH', '/api/v1/queries/*', 'updateQuery');
cy.get('.CodeMirror-line').click().type('updated');

26
openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsHeader/DataAssetsHeader.component.tsx
View File

@ -381,13 +381,20 @@ export const DataAssetsHeader = ({
)}
{editTierPermission && (
<Button
className="flex-center p-0"
data-testid="edit-tier"
icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
size="small"
type="text"
/>
<Tooltip
title={t('label.edit-entity', {
entity: t('label.tier'),
})}>
<Button
className="flex-center p-0"
data-testid="edit-tier"
icon={
<EditIcon color={DE_ACTIVE_COLOR} width="14px" />
}
size="small"
type="text"
/>
</Tooltip>
)}
</Space>
</TierCard>
@ -462,9 +469,8 @@ export const DataAssetsHeader = ({
)}
<Tooltip
open={!isEmpty(copyTooltip)}
placement="bottomRight"
title={copyTooltip}>
placement="topRight"
title={copyTooltip ?? t('message.copy-to-clipboard')}>
<Button
icon={<Icon component={ShareIcon} />}
onClick={handleShareButtonClick}

6
openmetadata-ui/src/main/resources/ui/src/components/DataProducts/DataProductsDetailsPage/DataProductsDetailsPage.component.tsx
View File

@ -537,7 +537,11 @@ const DataProductsDetailsPage = ({
placement="bottomRight"
trigger={['click']}
onOpenChange={setShowActions}>
<Tooltip placement="right">
<Tooltip
placement="topRight"
title={t('label.manage-entity', {
entity: t('label.data-product'),
})}>
<Button
className="domain-manage-dropdown-button tw-px-1.5"
data-testid="manage-button"

21
openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/Severity/Severity.component.tsx
View File

@ -11,10 +11,11 @@
* limitations under the License.
*/
import { Button, Space } from 'antd';
import { Button, Space, Tooltip } from 'antd';
import classNames from 'classnames';
import { startCase, toLower } from 'lodash';
import React, { useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ReactComponent as EditIcon } from '../../../../assets/svg/edit-new.svg';
import {
DE_ACTIVE_COLOR,
@ -30,6 +31,7 @@ import { SeverityProps } from './Severity.interface';
import SeverityModal from './SeverityModal.component';
const Severity = ({ severity, onSubmit }: SeverityProps) => {
const { t } = useTranslation();
const [isEditSeverity, setIsEditSeverity] = useState<boolean>(false);
const { permissions } = usePermissionProvider();
const hasEditPermission = useMemo(() => {
@ -63,12 +65,17 @@ const Severity = ({ severity, onSubmit }: SeverityProps) => {
NO_DATA_PLACEHOLDER
)}
{onSubmit && hasEditPermission && (
<Button
data-testid="edit-description-icon"
icon={<EditIcon {...ICON_DIMENSION} color={DE_ACTIVE_COLOR} />}
type="text"
onClick={onEditSeverity}
/>
<Tooltip
title={t('label.edit-entity', {
entity: t('label.severity'),
})}>
<Button
data-testid="edit-severity-icon"
icon={<EditIcon {...ICON_DIMENSION} color={DE_ACTIVE_COLOR} />}
type="text"
onClick={onEditSeverity}
/>
</Tooltip>
)}
</Space>

18
openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/Severity/Severity.test.tsx
View File

@ -57,9 +57,7 @@ describe('Severity', () => {
it('Should show edit icon if onSubmit is provided and edit permission is true', async () => {
render(<Severity onSubmit={jest.fn()} />);
expect(
await screen.findByTestId('edit-description-icon')
).toBeInTheDocument();
expect(await screen.findByTestId('edit-severity-icon')).toBeInTheDocument();
});
it('Should not show edit icon if edit permission is false', async () => {
@ -67,17 +65,15 @@ describe('Severity', () => {
const { container } = render(<Severity onSubmit={jest.fn()} />);
expect(
queryByTestId(container, 'edit-description-icon')
queryByTestId(container, 'edit-severity-icon')
).not.toBeInTheDocument();
});
it('Should render modal onClick of edit icon', async () => {
render(<Severity onSubmit={jest.fn()} />);
const editIcon = await screen.findByTestId('edit-description-icon');
const editIcon = await screen.findByTestId('edit-severity-icon');
expect(
await screen.findByTestId('edit-description-icon')
).toBeInTheDocument();
expect(await screen.findByTestId('edit-severity-icon')).toBeInTheDocument();
await act(async () => {
fireEvent.click(editIcon);
@ -89,11 +85,9 @@ describe('Severity', () => {
it('Should call onSubmit function onClick of submit', async () => {
const mockSubmit = jest.fn();
render(<Severity onSubmit={mockSubmit} />);
const editIcon = await screen.findByTestId('edit-description-icon');
const editIcon = await screen.findByTestId('edit-severity-icon');
expect(
await screen.findByTestId('edit-description-icon')
).toBeInTheDocument();
expect(await screen.findByTestId('edit-severity-icon')).toBeInTheDocument();
await act(async () => {
fireEvent.click(editIcon);

19
openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/TestCaseResultTab/TestCaseResultTab.component.tsx
View File

@ -12,7 +12,7 @@
*/
import Icon from '@ant-design/icons/lib/components/Icon';
import { Col, Divider, Row, Space, Typography } from 'antd';
import { Col, Divider, Row, Space, Tooltip, Typography } from 'antd';
import { AxiosError } from 'axios';
import { compare } from 'fast-json-patch';
import { isEmpty, isUndefined } from 'lodash';
@ -138,12 +138,17 @@ const TestCaseResultTab = ({
{t('label.parameter-plural')}
</Typography.Text>
{hasEditPermission && Boolean(withoutSqlParams.length) && (
<Icon
component={EditIcon}
data-testid="edit-parameter-icon"
style={{ color: DE_ACTIVE_COLOR, ...ICON_DIMENSION }}
onClick={() => setIsParameterEdit(true)}
/>
<Tooltip
title={t('label.edit-entity', {
entity: t('label.parameter'),
})}>
<Icon
component={EditIcon}
data-testid="edit-parameter-icon"
style={{ color: DE_ACTIVE_COLOR, ...ICON_DIMENSION }}
onClick={() => setIsParameterEdit(true)}
/>
</Tooltip>
)}
</Space>

3
openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/DataQualityTab/DataQualityTab.tsx
View File

@ -273,7 +273,6 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
return (
<Row align="middle">
<Tooltip
placement="bottomRight"
title={
testCaseEditPermission
? t('label.edit')
@ -296,7 +295,6 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
{removeFromTestSuite ? (
<Tooltip
placement="bottomLeft"
title={
testCaseDeletePermission
? t('label.remove')
@ -318,7 +316,6 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
</Tooltip>
) : (
<Tooltip
placement="bottomLeft"
title={
testCaseDeletePermission
? t('label.delete')

32
openmetadata-ui/src/main/resources/ui/src/components/Database/RetentionPeriod/RetentionPeriod.component.tsx
View File

@ -10,7 +10,16 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Alert, Button, Form, FormProps, Input, Modal, Space } from 'antd';
import {
Alert,
Button,
Form,
FormProps,
Input,
Modal,
Space,
Tooltip,
} from 'antd';
import { useForm } from 'antd/lib/form/Form';
import { AxiosError } from 'axios';
import React, { useCallback, useEffect, useState } from 'react';
@ -62,14 +71,19 @@ const RetentionPeriod = ({
/>
{permissions?.EditAll && (
<Button
className="flex-center p-0"
data-testid="edit-retention-period-button"
icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
size="small"
type="text"
onClick={() => setIsEdit(true)}
/>
<Tooltip
title={t('label.edit-entity', {
entity: t('label.retention-period'),
})}>
<Button
className="flex-center p-0"
data-testid="edit-retention-period-button"
icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
size="small"
type="text"
onClick={() => setIsEdit(true)}
/>
</Tooltip>
)}
</Space>

6
openmetadata-ui/src/main/resources/ui/src/components/Database/SampleDataTable/SampleDataTable.component.tsx
View File

@ -246,7 +246,11 @@ const SampleDataTable = ({
placement="bottomRight"
trigger={['click']}
onOpenChange={setShowActions}>
<Tooltip placement="right">
<Tooltip
placement="topLeft"
title={t('label.manage-entity', {
entity: t('label.sample-data'),
})}>
<Button
className="flex-center px-1.5"
data-testid="sample-data-manage-button"

34
openmetadata-ui/src/main/resources/ui/src/components/Database/SchemaTable/SchemaTable.component.tsx
View File

@ -349,20 +349,26 @@ const SchemaTable = ({
) : null}
{(tablePermissions?.EditAll ||
tablePermissions?.EditDisplayName) && (
<Button
className="cursor-pointer hover-cell-icon w-fit-content"
data-testid="edit-displayName-button"
style={{
color: DE_ACTIVE_COLOR,
padding: 0,
border: 'none',
background: 'transparent',
}}
onClick={() => handleEditDisplayNameClick(record)}>
<IconEdit
style={{ color: DE_ACTIVE_COLOR, ...ICON_DIMENSION }}
/>
</Button>
<Tooltip
placement="right"
title={t('label.edit-entity', {
entity: t('label.display-name'),
})}>
<Button
className="cursor-pointer hover-cell-icon w-fit-content"
data-testid="edit-displayName-button"
style={{
color: DE_ACTIVE_COLOR,
padding: 0,
border: 'none',
background: 'transparent',
}}
onClick={() => handleEditDisplayNameClick(record)}>
<IconEdit
style={{ color: DE_ACTIVE_COLOR, ...ICON_DIMENSION }}
/>
</Button>
</Tooltip>
)}
</div>
);

33
openmetadata-ui/src/main/resources/ui/src/components/Database/TableDescription/TableDescription.component.tsx
View File

@ -11,7 +11,7 @@
* limitations under the License.
*/
import { Button, Space } from 'antd';
import { Button, Space, Tooltip } from 'antd';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { ReactComponent as EditIcon } from '../../../assets/svg/edit-new.svg';
@ -51,18 +51,25 @@ const TableDescription = ({
{!isReadOnly ? (
<Space align="baseline" size="middle">
{hasEditPermission && (
<Button
className="cursor-pointer hover-cell-icon"
data-testid="edit-button"
style={{
color: DE_ACTIVE_COLOR,
padding: 0,
border: 'none',
background: 'transparent',
}}
onClick={onClick}>
<EditIcon style={{ color: DE_ACTIVE_COLOR, ...ICON_DIMENSION }} />
</Button>
<Tooltip
title={t('label.edit-entity', {
entity: t('label.description'),
})}>
<Button
className="cursor-pointer hover-cell-icon"
data-testid="edit-button"
style={{
color: DE_ACTIVE_COLOR,
padding: 0,
border: 'none',
background: 'transparent',
}}
onClick={onClick}>
<EditIcon
style={{ color: DE_ACTIVE_COLOR, ...ICON_DIMENSION }}
/>
</Button>
</Tooltip>
)}
<EntityTasks

19
openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/QueryCardExtraOption/QueryCardExtraOption.component.tsx
View File

@ -189,13 +189,18 @@ const QueryCardExtraOption = ({
}}
placement="bottomRight"
trigger={['click']}>
<Button
className="flex-center button-size"
data-testid="more-option-btn"
icon={<IconDropdown />}
size="small"
type="text"
/>
<Tooltip
title={t('label.manage-entity', {
entity: t('label.query'),
})}>
<Button
className="flex-center button-size"
data-testid="query-btn"
icon={<IconDropdown />}
size="small"
type="text"
/>
</Tooltip>
</Dropdown>
<ConfirmationModal
bodyText={t('message.delete-entity-permanently', {

12
openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/QueryCardExtraOption/QueryCardExtraOption.test.tsx
View File

@ -54,7 +54,7 @@ describe('QueryCardExtraOption component test', () => {
await screen.findByTestId('extra-option-container')
).toBeInTheDocument();
expect(await screen.findByTestId('query-line')).toBeInTheDocument();
expect(await screen.findByTestId('more-option-btn')).toBeInTheDocument();
expect(await screen.findByTestId('query-btn')).toBeInTheDocument();
expect(await screen.findByTestId('up-vote-btn')).toBeInTheDocument();
expect(await screen.findByTestId('down-vote-btn')).toBeInTheDocument();
});
@ -183,7 +183,7 @@ describe('QueryCardExtraOption component test', () => {
it('Dropdown should show 2 menu options', async () => {
render(<QueryCardExtraOption {...mockProps} />);
const moreOptionBtn = await screen.findByTestId('more-option-btn');
const moreOptionBtn = await screen.findByTestId('query-btn');
expect(moreOptionBtn).toBeInTheDocument();
@ -209,7 +209,7 @@ describe('QueryCardExtraOption component test', () => {
/>
);
const moreOptionBtn = await screen.findByTestId('more-option-btn');
const moreOptionBtn = await screen.findByTestId('query-btn');
expect(moreOptionBtn).toBeInTheDocument();
@ -246,7 +246,7 @@ describe('QueryCardExtraOption component test', () => {
/>
);
const moreOptionBtn = await screen.findByTestId('more-option-btn');
const moreOptionBtn = await screen.findByTestId('query-btn');
expect(moreOptionBtn).toBeInTheDocument();
@ -267,7 +267,7 @@ describe('QueryCardExtraOption component test', () => {
it('If there is no permission, Edit option should be disabled', async () => {
render(<QueryCardExtraOption {...mockProps} />);
const moreOptionBtn = await screen.findByTestId('more-option-btn');
const moreOptionBtn = await screen.findByTestId('query-btn');
expect(moreOptionBtn).toBeInTheDocument();
@ -284,7 +284,7 @@ describe('QueryCardExtraOption component test', () => {
it('If there is no permission, Delete option should be disabled', async () => {
render(<QueryCardExtraOption {...mockProps} />);
const moreOptionBtn = await screen.findByTestId('more-option-btn');
const moreOptionBtn = await screen.findByTestId('query-btn');
expect(moreOptionBtn).toBeInTheDocument();

42
openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/TableQueryRightPanel/TableQueryRightPanel.component.tsx
View File

@ -12,7 +12,7 @@
*/
import Icon from '@ant-design/icons';
import { Button, Col, Drawer, Row, Space, Typography } from 'antd';
import { Button, Col, Drawer, Row, Space, Tooltip, Typography } from 'antd';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
@ -93,13 +93,18 @@ const TableQueryRightPanel = ({
hasPermission={EditAll || EditOwner}
owner={query.owner}
onUpdate={handleUpdateOwner}>
<Button
className="cursor-pointer flex-center"
data-testid="edit-owner"
icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
size="small"
type="text"
/>
<Tooltip
title={t('label.edit-entity', {
entity: t('label.owner-lowercase'),
})}>
<Button
className="cursor-pointer flex-center"
data-testid="edit-owner"
icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
size="small"
type="text"
/>
</Tooltip>
</UserTeamSelectableList>
)}
</Space>
@ -114,14 +119,19 @@ const TableQueryRightPanel = ({
</Typography.Text>
{(EditDescription || EditAll) && (
<Button
className="flex-center p-0"
data-testid="edit-description-btn"
icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
size="small"
type="text"
onClick={() => setIsEditDescription(true)}
/>
<Tooltip
title={t('label.edit-entity', {
entity: t('label.description'),
})}>
<Button
className="flex-center p-0"
data-testid="edit-description-btn"
icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
size="small"
type="text"
onClick={() => setIsEditDescription(true)}
/>
</Tooltip>
)}
</Space>
<Description

6
openmetadata-ui/src/main/resources/ui/src/components/Domain/DomainDetailsPage/DomainDetailsPage.component.tsx
View File

@ -598,7 +598,11 @@ const DomainDetailsPage = ({
placement="bottomRight"
trigger={['click']}
onOpenChange={setShowActions}>
<Tooltip placement="right">
<Tooltip
placement="topRight"
title={t('label.manage-entity', {
entity: t('label.domain'),
})}>
<Button
className="domain-manage-dropdown-button tw-px-1.5"
data-testid="manage-button"

61
openmetadata-ui/src/main/resources/ui/src/components/Domain/DomainTabs/DocumentationTab/DocumentationTab.component.tsx
View File

@ -10,7 +10,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Button, Col, Row, Space, Typography } from 'antd';
import { Button, Col, Row, Space, Tooltip, Typography } from 'antd';
import { cloneDeep, includes, isEqual } from 'lodash';
import React, { useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
@ -193,13 +193,18 @@ const DocumentationTab = ({
hasPermission
owner={domain.owner}
onUpdate={handleUpdatedOwner}>
<Button
className="cursor-pointer flex-center m-l-xss"
data-testid="edit-owner"
icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
size="small"
type="text"
/>
<Tooltip
title={t('label.edit-entity', {
entity: t('label.owner'),
})}>
<Button
className="cursor-pointer flex-center m-l-xss"
data-testid="edit-owner"
icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
size="small"
type="text"
/>
</Tooltip>
</UserTeamSelectableList>
)}
</div>
@ -244,13 +249,18 @@ const DocumentationTab = ({
popoverProps={{ placement: 'topLeft' }}
selectedUsers={domain.experts ?? []}
onUpdate={handleExpertsUpdate}>
<Button
className="cursor-pointer flex-center m-l-xss"
data-testid="edit-expert-button"
icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
size="small"
type="text"
/>
<Tooltip
title={t('label.edit-entity', {
entity: t('label.expert-plural'),
})}>
<Button
className="cursor-pointer flex-center m-l-xss"
data-testid="edit-expert-button"
icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
size="small"
type="text"
/>
</Tooltip>
</UserSelectableList>
)}
</div>
@ -295,14 +305,19 @@ const DocumentationTab = ({
</Typography.Text>
{editAllPermission && (domain as Domain).domainType && (
<Button
className="cursor-pointer flex-center m-l-xss"
data-testid="edit-domainType-button"
icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
size="small"
type="text"
onClick={() => setEditDomainType(true)}
/>
<Tooltip
title={t('label.edit-entity', {
entity: t('label.domain-type'),
})}>
<Button
className="cursor-pointer flex-center m-l-xss"
data-testid="edit-domainType-button"
icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
size="small"
type="text"
onClick={() => setEditDomainType(true)}
/>
</Tooltip>
)}
</div>
{!editDomainType && (

38
openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/CustomControls.component.tsx
View File

@ -311,23 +311,29 @@ const CustomControls: FC<ControlProps> = ({
</Tooltip>
{!deleted && (
<Button
className={classNames(
'custom-control-edit-button rounded-full',
{
active: isEditMode,
<Tooltip
placement="topRight"
title={t('label.edit-entity', {
entity: t('label.lineage'),
})}>
<Button
className={classNames(
'custom-control-edit-button rounded-full',
{
active: isEditMode,
}
)}
data-testid="edit-lineage"
disabled={!hasEditAccess}
icon={getLoadingStatusValue(editIcon, loading, status)}
title={
hasEditAccess
? t('label.edit-entity', { entity: t('label.lineage') })
: NO_PERMISSION_FOR_ACTION
}
)}
data-testid="edit-lineage"
disabled={!hasEditAccess}
icon={getLoadingStatusValue(editIcon, loading, status)}
title={
hasEditAccess
? t('label.edit-entity', { entity: t('label.lineage') })
: NO_PERMISSION_FOR_ACTION
}
onClick={onLineageEditClick}
/>
onClick={onLineageEditClick}
/>
</Tooltip>
)}
</Space>
</Col>

40
openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryDetailsRightPanel/GlossaryDetailsRightPanel.component.tsx
View File

@ -10,7 +10,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Button, Col, Row, Space, Typography } from 'antd';
import { Button, Col, Row, Space, Tooltip, Typography } from 'antd';
import { t } from 'i18next';
import { cloneDeep, includes, isEmpty, isEqual } from 'lodash';
import React, { ReactNode, useCallback, useMemo } from 'react';
@ -224,13 +224,18 @@ const GlossaryDetailsRightPanel = ({
hasPermission={permissions.EditOwner || permissions.EditAll}
owner={selectedData.owner}
onUpdate={handleUpdatedOwner}>
<Button
className="cursor-pointer flex-center m-l-xss"
data-testid="edit-owner"
icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
size="small"
type="text"
/>
<Tooltip
title={t('label.edit-entity', {
entity: t('label.owner'),
})}>
<Button
className="cursor-pointer flex-center m-l-xss"
data-testid="edit-owner"
icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
size="small"
type="text"
/>
</Tooltip>
</UserTeamSelectableList>
)}
</div>
@ -272,13 +277,18 @@ const GlossaryDetailsRightPanel = ({
popoverProps={{ placement: 'topLeft' }}
selectedUsers={selectedData.reviewers ?? []}
onUpdate={handleReviewerSave}>
<Button
className="cursor-pointer flex-center m-l-xss"
data-testid="edit-reviewer-button"
icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
size="small"
type="text"
/>
<Tooltip
title={t('label.edit-entity', {
entity: t('label.reviewer-plural'),
})}>
<Button
className="cursor-pointer flex-center m-l-xss"
data-testid="edit-reviewer-button"
icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
size="small"
type="text"
/>
</Tooltip>
</UserSelectableList>
)}
</div>

8
openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryHeader/GlossaryHeader.component.tsx
View File

@ -555,7 +555,13 @@ const GlossaryHeader = ({
placement="bottomRight"
trigger={['click']}
onOpenChange={setShowActions}>
<Tooltip placement="right">
<Tooltip
placement="topRight"
title={t('label.manage-entity', {
entity: isGlossary
? t('label.glossary')
: t('label.glossary-term'),
})}>
<Button
className="glossary-manage-dropdown-button tw-px-1.5"
data-testid="manage-button"

19
openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTerms/tabs/AssetsTabs.component.tsx
View File

@ -528,13 +528,18 @@ const AssetsTabs = forwardRef(
overlayStyle={{ width: '350px' }}
placement="bottomRight"
trigger={['click']}>
<Button
className={classNames('flex-center px-1.5')}
data-testid={`manage-button-${_source.fullyQualifiedName}`}
title="Manage"
type="text">
<IconDropdown className="anticon self-center manage-dropdown-icon" />
</Button>
<Tooltip
placement="topRight"
title={t('label.manage-entity', {
entity: t('label.asset'),
})}>
<Button
className={classNames('flex-center px-1.5')}
data-testid={`manage-button-${_source.fullyQualifiedName}`}
type="text">
<IconDropdown className="anticon self-center manage-dropdown-icon" />
</Button>
</Tooltip>
</Dropdown>
) : null
}

4
openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTerms/tabs/GlossaryTermReferences.tsx
View File

@ -194,7 +194,9 @@ const GlossaryTermReferences = ({
<Tooltip
title={
permissions.EditAll
? t('label.edit')
? t('label.edit-entity', {
entity: t('label.reference-plural'),
})
: NO_PERMISSION_FOR_ACTION
}>
<Button

8
openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTerms/tabs/GlossaryTermSynonyms.tsx
View File

@ -186,9 +186,13 @@ const GlossaryTermSynonyms = ({
</Typography.Text>
{permissions.EditAll && synonyms.length > 0 && isViewMode && (
<Tooltip
placement="bottomLeft"
placement="top"
title={
permissions.EditAll ? t('label.edit') : NO_PERMISSION_FOR_ACTION
permissions.EditAll
? t('label.edit-entity', {
entity: t('label.synonym-plural'),
})
: NO_PERMISSION_FOR_ACTION
}>
<Button
className="cursor-pointer flex-center m-l-xss"

6
openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTerms/tabs/RelatedTerms.tsx
View File

@ -282,7 +282,11 @@ const RelatedTerms = ({
{permissions.EditAll && selectedOption.length > 0 && (
<Tooltip
title={
permissions.EditAll ? t('label.edit') : NO_PERMISSION_FOR_ACTION
permissions.EditAll
? t('label.edit-entity', {
entity: t('label.related-term-plural'),
})
: NO_PERMISSION_FOR_ACTION
}>
<Button
className="cursor-pointer flex-center m-l-xss"

21
openmetadata-ui/src/main/resources/ui/src/components/MyData/Persona/PersonaSelectableList/PersonaSelectableList.component.tsx
View File

@ -10,7 +10,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Button, Popover, Space, Typography } from 'antd';
import { Button, Popover, Space, Tooltip, Typography } from 'antd';
import { t } from 'i18next';
import React, { useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
@ -135,13 +135,18 @@ export const PersonaSelectableList = ({
onOpenChange={setPopupVisible}
{...popoverProps}>
{children ?? (
<Button
className="p-0 flex-center"
data-testid="add-user"
icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
size="small"
type="text"
/>
<Tooltip
title={t('label.edit-entity', {
entity: t('label.persona'),
})}>
<Button
className="p-0 flex-center"
data-testid="edit-persona"
icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
size="small"
type="text"
/>
</Tooltip>
)}
</Popover>
);

29
openmetadata-ui/src/main/resources/ui/src/components/NavBar/NavBar.tsx
View File

@ -22,6 +22,7 @@ import {
Row,
Select,
Space,
Tooltip,
} from 'antd';
import { CookieStorage } from 'cookie-storage';
import i18next from 'i18next';
@ -496,13 +497,15 @@ const NavBar = ({
placement="bottomRight"
trigger={['click']}
onOpenChange={handleBellClick}>
<Badge dot={hasTaskNotification || hasMentionNotification}>
<Icon
className="align-middle"
component={IconBell}
style={{ fontSize: '24px' }}
/>
</Badge>
<Tooltip placement="top" title={t('label.notification-plural')}>
<Badge dot={hasTaskNotification || hasMentionNotification}>
<Icon
className="align-middle"
component={IconBell}
style={{ fontSize: '24px' }}
/>
</Badge>
</Tooltip>
</Dropdown>
<Dropdown
@ -510,11 +513,13 @@ const NavBar = ({
overlayStyle={{ width: 175 }}
placement="bottomRight"
trigger={['click']}>
<Icon
className="align-middle"
component={Help}
style={{ fontSize: '24px' }}
/>
<Tooltip placement="top" title={t('label.need-help')}>
<Icon
className="align-middle"
component={Help}
style={{ fontSize: '24px' }}
/>
</Tooltip>
</Dropdown>
<UserProfileIcon />

6
openmetadata-ui/src/main/resources/ui/src/components/Settings/Applications/AppDetails/AppDetails.component.tsx
View File

@ -453,7 +453,11 @@ const AppDetails = () => {
placement="bottomRight"
trigger={['click']}
onOpenChange={setShowActions}>
<Tooltip placement="right">
<Tooltip
placement="topRight"
title={t('label.manage-entity', {
entity: t('label.application'),
})}>
<Button
className="glossary-manage-dropdown-button p-x-xs"
data-testid="manage-button"

30
openmetadata-ui/src/main/resources/ui/src/components/Settings/Bot/BotDetails/BotDetails.component.tsx
View File

@ -12,7 +12,16 @@
*/
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
import { Button, Card, Col, Input, Row, Space, Typography } from 'antd';
import {
Button,
Card,
Col,
Input,
Row,
Space,
Tooltip,
Typography,
} from 'antd';
import { AxiosError } from 'axios';
import { toLower } from 'lodash';
import React, { FC, useEffect, useMemo, useState } from 'react';
@ -157,13 +166,18 @@ const BotDetails: FC<BotsDetailProps> = ({
</Typography.Text>
)}
{(displayNamePermission || editAllPermission) && (
<Button
className="p-0"
data-testid="edit-displayName"
icon={<EditIcon width={16} />}
type="text"
onClick={() => setIsDisplayNameEdit(true)}
/>
<Tooltip
title={t('label.edit-entity', {
entity: t('label.display-name'),
})}>
<Button
className="p-0"
data-testid="edit-displayName"
icon={<EditIcon width={16} />}
type="text"
onClick={() => setIsDisplayNameEdit(true)}
/>
</Tooltip>
)}
</Space>
)}

18
openmetadata-ui/src/main/resources/ui/src/components/Settings/CustomProperty/CustomPropertyTable.tsx
View File

@ -118,7 +118,14 @@ export const CustomPropertyTable: FC<CustomPropertyTableProp> = ({
key: 'actions',
render: (_, record) => (
<Space align="center" size={14}>
<Tooltip title={!hasAccess && NO_PERMISSION_FOR_ACTION}>
<Tooltip
title={
hasAccess
? t('label.edit-entity', {
entity: t('label.property'),
})
: NO_PERMISSION_FOR_ACTION
}>
<Button
className="cursor-pointer p-0"
data-testid="edit-button"
@ -132,7 +139,14 @@ export const CustomPropertyTable: FC<CustomPropertyTableProp> = ({
<IconEdit name={t('label.edit')} width={16} />
</Button>
</Tooltip>
<Tooltip title={!hasAccess && NO_PERMISSION_FOR_ACTION}>
<Tooltip
title={
hasAccess
? t('label.delete-entity', {
entity: t('label.property'),
})
: NO_PERMISSION_FOR_ACTION
}>
<Button
className="cursor-pointer p-0"
data-testid="delete-button"

2
openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamDetails/RolesAndPoliciesList.tsx
View File

@ -91,7 +91,7 @@ const ListEntities = ({
render: (_, record) => {
return (
<Tooltip
placement="bottomRight"
placement="left"
title={hasAccess ? t('label.remove') : NO_PERMISSION_FOR_ACTION}>
<Button
data-testid={`remove-action-${getEntityName(record)}`}

19
openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamDetails/TeamDetailsV1.tsx
View File

@ -1138,13 +1138,18 @@ const TeamDetailsV1 = ({
{t('label.description')}
</Typography.Text>
{editDescriptionPermission && (
<EditIcon
className="cursor-pointer align-middle"
color={DE_ACTIVE_COLOR}
data-testid="edit-description"
{...ICON_DIMENSION}
onClick={() => descriptionHandler(true)}
/>
<Tooltip
title={t('label.edit-entity', {
entity: t('label.description'),
})}>
<EditIcon
className="cursor-pointer align-middle"
color={DE_ACTIVE_COLOR}
data-testid="edit-description"
{...ICON_DIMENSION}
onClick={() => descriptionHandler(true)}
/>
</Tooltip>
)}
</Space>
}>

40
openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamDetails/TeamsHeaderSection/TeamsInfo.component.tsx
View File

@ -189,7 +189,6 @@ const TeamsInfo = ({
</Typography.Text>
{hasEditPermission && (
<Tooltip
placement="right"
title={
hasEditPermission
? t('label.edit-entity', {
@ -241,23 +240,28 @@ const TeamsInfo = ({
</Typography.Text>
{hasEditPermission && (
<Icon
className={classNames('vertical-middle m-l-xs', {
'opacity-50': isGroupType,
})}
data-testid="edit-team-type-icon"
title={
isGroupType
? t('message.group-team-type-change-message')
: t('label.edit-entity', {
entity: t('label.team-type'),
})
}
onClick={
isGroupType ? undefined : () => setShowTypeSelector(true)
}>
<EditIcon />
</Icon>
<Tooltip
title={t('label.edit-entity', {
entity: t('label.team-type'),
})}>
<Icon
className={classNames('vertical-middle m-l-xs', {
'opacity-50': isGroupType,
})}
data-testid="edit-team-type-icon"
title={
isGroupType
? t('message.group-team-type-change-message')
: t('label.edit-entity', {
entity: t('label.team-type'),
})
}
onClick={
isGroupType ? undefined : () => setShowTypeSelector(true)
}>
<EditIcon />
</Icon>
</Tooltip>
)}
</>
)}

40
openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamDetails/TeamsHeaderSection/TeamsSubscription.component.tsx
View File

@ -10,7 +10,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Form, Input, Modal, Select, Space, Typography } from 'antd';
import { Form, Input, Modal, Select, Space, Tooltip, Typography } from 'antd';
import { useForm } from 'antd/lib/form/Form';
import { isEmpty } from 'lodash';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
@ -76,13 +76,18 @@ const TeamsSubscription = ({
data-testid="subscription-no-data">
{t('label.none')}
</Typography.Text>
<EditIcon
className="cursor-pointer"
color={DE_ACTIVE_COLOR}
data-testid="edit-team-subscription"
width={14}
onClick={() => setEditSubscription(true)}
/>
<Tooltip
title={t('label.edit-entity', {
entity: t('label.subscription'),
})}>
<EditIcon
className="cursor-pointer"
color={DE_ACTIVE_COLOR}
data-testid="edit-team-subscription"
width={14}
onClick={() => setEditSubscription(true)}
/>
</Tooltip>
</div>
);
}
@ -136,13 +141,18 @@ const TeamsSubscription = ({
{subscriptionRenderElement}
{!editSubscription && !isEmpty(subscription) && hasEditPermission && (
<EditIcon
className="cursor-pointer align-middle"
color={DE_ACTIVE_COLOR}
data-testid="edit-team-subscription"
{...ICON_DIMENSION}
onClick={() => setEditSubscription(true)}
/>
<Tooltip
title={t('label.edit-entity', {
entity: t('label.subscription'),
})}>
<EditIcon
className="cursor-pointer align-middle"
color={DE_ACTIVE_COLOR}
data-testid="edit-team-subscription"
{...ICON_DIMENSION}
onClick={() => setEditSubscription(true)}
/>
</Tooltip>
)}
{editSubscription && (

2
openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamDetails/UserTab/UserTab.component.tsx
View File

@ -191,7 +191,7 @@ export const UserTab = ({
className="w-full justify-center remove-icon"
size={8}>
<Tooltip
placement="bottomRight"
placement="left"
title={
permission.EditAll
? t('label.remove')

21
openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UsersProfile/UserProfileDetails/UserProfileDetails.component.tsx
View File

@ -11,7 +11,7 @@
* limitations under the License.
*/
import { Button, Divider, Input, Space, Typography } from 'antd';
import { Button, Divider, Input, Space, Tooltip, Typography } from 'antd';
import { AxiosError } from 'axios';
import React, { useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
@ -142,13 +142,18 @@ const UserProfileDetails = ({
: getEntityName(userData)}
</Typography.Text>
{hasEditPermission && (
<EditIcon
className="cursor-pointer align-middle"
color={DE_ACTIVE_COLOR}
data-testid="edit-displayName"
{...ICON_DIMENSION}
onClick={() => setIsDisplayNameEdit(true)}
/>
<Tooltip
title={t('label.edit-entity', {
entity: t('label.display-name'),
})}>
<EditIcon
className="cursor-pointer align-middle"
color={DE_ACTIVE_COLOR}
data-testid="edit-displayName"
{...ICON_DIMENSION}
onClick={() => setIsDisplayNameEdit(true)}
/>
</Tooltip>
)}
</Space>
),

21
openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UsersProfile/UserProfileRoles/UserProfileRoles.component.tsx
View File

@ -11,7 +11,7 @@
* limitations under the License.
*/
import { Card, Select, Space, Typography } from 'antd';
import { Card, Select, Space, Tooltip, Typography } from 'antd';
import { AxiosError } from 'axios';
import { isEmpty, toLower } from 'lodash';
import React, { useEffect, useMemo, useState } from 'react';
@ -153,13 +153,18 @@ const UserProfileRoles = ({
{t('label.role-plural')}
</Typography.Text>
{!isRolesEdit && isAdminUser && (
<EditIcon
className="cursor-pointer align-middle"
color={DE_ACTIVE_COLOR}
data-testid="edit-roles-button"
{...ICON_DIMENSION}
onClick={() => setIsRolesEdit(true)}
/>
<Tooltip
title={t('label.edit-entity', {
entity: t('label.role-plural'),
})}>
<EditIcon
className="cursor-pointer align-middle"
color={DE_ACTIVE_COLOR}
data-testid="edit-roles-button"
{...ICON_DIMENSION}
onClick={() => setIsRolesEdit(true)}
/>
</Tooltip>
)}
</Space>
}>

21
openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UsersProfile/UserProfileTeams/UserProfileTeams.component.tsx
View File

@ -11,7 +11,7 @@
* limitations under the License.
*/
import { Card, Space, Typography } from 'antd';
import { Card, Space, Tooltip, Typography } from 'antd';
import React, { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ReactComponent as EditIcon } from '../../../../../assets/svg/edit-new.svg';
@ -75,13 +75,18 @@ const UserProfileTeams = ({
</Typography.Text>
{!isTeamsEdit && isAdminUser && (
<EditIcon
className="cursor-pointer align-middle"
color={DE_ACTIVE_COLOR}
data-testid="edit-teams-button"
{...ICON_DIMENSION}
onClick={() => setIsTeamsEdit(true)}
/>
<Tooltip
title={t('label.edit-entity', {
entity: t('label.team-plural'),
})}>
<EditIcon
className="cursor-pointer align-middle"
color={DE_ACTIVE_COLOR}
data-testid="edit-teams-button"
{...ICON_DIMENSION}
onClick={() => setIsTeamsEdit(true)}
/>
</Tooltip>
)}
</Space>
}>

23
openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UsersTab/UsersTabs.component.tsx
View File

@ -10,7 +10,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Button, Modal } from 'antd';
import { Button, Modal, Tooltip } from 'antd';
import { isNil } from 'lodash';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
@ -90,14 +90,19 @@ export const UsersTab = ({ users, onRemoveUser }: UsersTabProps) => {
render: (_: string, record: User) => {
return (
onRemoveUser && (
<Button
data-testid="remove-user-btn"
icon={
<IconRemove height={16} name={t('label.remove')} width={16} />
}
type="text"
onClick={() => handleRemoveButtonClick(record)}
/>
<Tooltip
title={t('label.remove-entity', {
entity: t('label.user'),
})}>
<Button
data-testid="remove-user-btn"
icon={
<IconRemove height={16} name={t('label.remove')} width={16} />
}
type="text"
onClick={() => handleRemoveButtonClick(record)}
/>
</Tooltip>
)
);
},

46
openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerV2/TagsContainerV2.tsx
View File

@ -21,7 +21,7 @@ import { useHistory } from 'react-router-dom';
import { ReactComponent as IconComments } from '../../../assets/svg/comment.svg';
import { ReactComponent as EditIcon } from '../../../assets/svg/edit-new.svg';
import { ReactComponent as IconRequest } from '../../../assets/svg/request-icon.svg';
import { DE_ACTIVE_COLOR } from '../../../constants/constants';
import { DE_ACTIVE_COLOR, ICON_DIMENSION } from '../../../constants/constants';
import {
GLOSSARY_CONSTANT,
TAG_CONSTANT,
@ -273,13 +273,18 @@ const TagsContainerV2 = ({
<Row gutter={12}>
{!isEmpty(tags?.[tagType]) && !isEditTags && (
<Col>
<EditIcon
className="cursor-pointer align-middle"
color={DE_ACTIVE_COLOR}
data-testid="edit-button"
width="14px"
onClick={handleAddClick}
/>
<Tooltip
title={t('label.edit-entity', {
entity: t('label.tag-plural'),
})}>
<EditIcon
className="cursor-pointer align-middle"
color={DE_ACTIVE_COLOR}
data-testid="edit-button"
width="14px"
onClick={handleAddClick}
/>
</Tooltip>
</Col>
)}
{showTaskHandler && (
@ -308,16 +313,21 @@ const TagsContainerV2 = ({
const editTagButton = useMemo(
() =>
permission && !isEmpty(tags?.[tagType]) ? (
<Button
className="hover-cell-icon cursor-pointer align-middle p-0"
data-testid="edit-button"
style={{
color: DE_ACTIVE_COLOR,
}}
type="text"
onClick={handleAddClick}>
<EditIcon />
</Button>
<Tooltip
title={t('label.edit-entity', {
entity: t('label.tag-plural'),
})}>
<Button
className="hover-cell-icon cursor-pointer align-middle p-0"
data-testid="edit-button"
style={{
color: DE_ACTIVE_COLOR,
}}
type="text"
onClick={handleAddClick}>
<EditIcon {...ICON_DIMENSION} />
</Button>
</Tooltip>
) : null,
[permission, tags, tagType, handleAddClick]
);

14
openmetadata-ui/src/main/resources/ui/src/components/common/CopyToClipboardButton/CopyToClipboardButton.test.tsx
View File

@ -46,22 +46,18 @@ describe('Test CopyToClipboardButton Component', () => {
expect(callBack).toHaveBeenCalled();
});
it('Should show success message and hide after timeout', async () => {
it('Should show success message on clipboard click', async () => {
jest.useFakeTimers();
await act(async () => {
render(<CopyToClipboardButton copyText={value} />);
});
render(<CopyToClipboardButton copyText={value} />);
await act(async () => {
fireEvent.click(screen.getByTestId('copy-secret'));
});
fireEvent.mouseOver(screen.getByTestId('copy-secret'));
jest.advanceTimersByTime(1000);
expect(screen.getByTestId('copy-success')).toBeInTheDocument();
jest.advanceTimersByTime(1500);
// success message should not be in the dom after timeout
expect(screen.queryByTestId('copy-success')).not.toBeInTheDocument();
});
it('Should have copied text in clipboard', async () => {

16
openmetadata-ui/src/main/resources/ui/src/components/common/CopyToClipboardButton/CopyToClipboardButton.tsx
View File

@ -40,14 +40,18 @@ export const CopyToClipboardButton: FunctionComponent<Props> = ({
return (
<Tooltip
destroyTooltipOnHide
open={hasCopied}
placement={position}
title={
<span className="text-xs font-medium" data-testid="copy-success">
{t('message.copied-to-clipboard')}
</span>
}
trigger="click">
hasCopied ? (
<span className="text-xs font-medium" data-testid="copy-success">
{t('message.copied-to-clipboard')}
</span>
) : (
<span className="text-xs font-medium" data-testid="copy-tooltip">
{t('message.copy-to-clipboard')}
</span>
)
}>
<Button
className="h-8 m-l-md relative"
data-testid="copy-secret"

18
openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyValue.tsx
View File

@ -12,7 +12,7 @@
*/
import Icon from '@ant-design/icons';
import { Typography } from 'antd';
import { Tooltip, Typography } from 'antd';
import { AxiosError } from 'axios';
import { t } from 'i18next';
import { isUndefined, toNumber } from 'lodash';
@ -168,12 +168,16 @@ export const PropertyValue: FC<Props> = ({
<div className="d-flex gap-2 items-center">
{getValueElement()}
{hasEditPermissions && (
<Icon
component={EditIconComponent}
data-testid="edit-icon"
style={{ color: DE_ACTIVE_COLOR, ...ICON_DIMENSION }}
onClick={onShowInput}
/>
<Tooltip
placement="left"
title={t('label.edit-entity', { entity: propertyName })}>
<Icon
component={EditIconComponent}
data-testid="edit-icon"
style={{ color: DE_ACTIVE_COLOR, ...ICON_DIMENSION }}
onClick={onShowInput}
/>
</Tooltip>
)}
</div>
</Fragment>

8
openmetadata-ui/src/main/resources/ui/src/components/common/DomainSelectableList/DomainSelectableList.component.tsx
View File

@ -152,7 +152,13 @@ const DomainSelectableList = ({
{children ?? (
<Tooltip
placement="topRight"
title={hasPermission ? '' : NO_PERMISSION_FOR_ACTION}>
title={
hasPermission
? t('label.edit-entity', {
entity: t('label.domain'),
})
: NO_PERMISSION_FOR_ACTION
}>
<Button
className="p-0 flex-center"
data-testid="add-domain"

24
openmetadata-ui/src/main/resources/ui/src/components/common/EntityDescription/Description.tsx
View File

@ -179,15 +179,19 @@ const Description: FC<DescriptionProps> = ({
const DescriptionActions = () => {
return !isReadOnly ? (
<Space align="end" size={0}>
<div className="d-flex items-end">
{hasEditAccess && (
<Button
className="w-7 h-7 p-0 flex-center"
data-testid="edit-description"
icon={<IconEdit color={DE_ACTIVE_COLOR} {...ICON_DIMENSION} />}
type="text"
onClick={handleUpdate}
/>
<Tooltip
placement="topRight"
title={t('label.edit-entity', { entity: t('label.description') })}>
<Button
className="w-7 h-7 p-0 flex-center"
data-testid="edit-description"
icon={<IconEdit color={DE_ACTIVE_COLOR} {...ICON_DIMENSION} />}
type="text"
onClick={handleUpdate}
/>
</Tooltip>
)}
{isTaskSupported(entityType as EntityType) ? (
<Fragment>
@ -197,13 +201,13 @@ const Description: FC<DescriptionProps> = ({
) : null}
<DescriptionThreadEl descriptionThread={thread} />
</Space>
</div>
) : null;
};
return (
<div className={`schema-description relative ${className}`}>
<div className="description-inner-main-container d-flex items-end">
<div className="description-inner-main-container d-flex items-baseline">
<div
className="description h-full relative overflow-y-scroll m-r-xss"
data-testid="description"

17
openmetadata-ui/src/main/resources/ui/src/components/common/EntityDescription/DescriptionV1.tsx
View File

@ -126,12 +126,17 @@ const DescriptionV1 = ({
() => (
<Space size={12}>
{!isReadOnly && hasEditAccess && (
<Icon
component={EditIcon}
data-testid="edit-description"
style={{ color: DE_ACTIVE_COLOR }}
onClick={onDescriptionEdit}
/>
<Tooltip
title={t('label.edit-entity', {
entity: t('label.description'),
})}>
<Icon
component={EditIcon}
data-testid="edit-description"
style={{ color: DE_ACTIVE_COLOR }}
onClick={onDescriptionEdit}
/>
</Tooltip>
)}
{taskActionButton}
{showCommentsIcon && (

21
openmetadata-ui/src/main/resources/ui/src/components/common/EntityPageInfos/ManageButton/ManageButton.tsx
View File

@ -15,7 +15,7 @@ import { Button, Dropdown, Modal, Tooltip, Typography } from 'antd';
import { ItemType } from 'antd/lib/menu/hooks/useItems';
import { AxiosError } from 'axios';
import classNames from 'classnames';
import { isUndefined } from 'lodash';
import { capitalize, isUndefined } from 'lodash';
import React, { FC, useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ReactComponent as IconAnnouncementsBlack } from '../../../../assets/svg/announcements-black.svg';
@ -271,13 +271,18 @@ const ManageButton: FC<ManageButtonProps> = ({
overlayStyle={{ width: '350px' }}
placement="bottomRight"
trigger={['click']}>
<Button
className={classNames('flex-center px-1.5', buttonClassName)}
data-testid="manage-button"
title="Manage"
type="default">
<IconDropdown className="anticon self-center manage-dropdown-icon" />
</Button>
<Tooltip
placement="topRight"
title={t('label.manage-entity', {
entity: capitalize(entityType),
})}>
<Button
className={classNames('flex-center px-1.5', buttonClassName)}
data-testid="manage-button"
type="default">
<IconDropdown className="anticon self-center manage-dropdown-icon" />
</Button>
</Tooltip>
</Dropdown>
) : (
<></>

22
openmetadata-ui/src/main/resources/ui/src/components/common/FeedsFilterPopover/FeedsFilterPopover.component.tsx
View File

@ -10,7 +10,15 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Button, Checkbox, List, Popover, Space, Typography } from 'antd';
import {
Button,
Checkbox,
List,
Popover,
Space,
Tooltip,
Typography,
} from 'antd';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ReactComponent as FilterIcon } from '../../../assets/svg/ic-feeds-filter.svg';
@ -123,11 +131,13 @@ const FeedsFilterPopover = ({
showArrow={false}
trigger="click"
onOpenChange={setPopupVisible}>
<Button
className="flex-center"
data-testid="filter-button"
icon={<FilterIcon height={16} />}
/>
<Tooltip title={t('label.feed-filter-plural')}>
<Button
className="flex-center"
data-testid="filter-button"
icon={<FilterIcon height={16} />}
/>
</Tooltip>
</Popover>
);
};

16
openmetadata-ui/src/main/resources/ui/src/components/common/QueryViewer/QueryViewer.component.tsx
View File

@ -10,7 +10,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Button, Card, Space, Tag } from 'antd';
import { Button, Card, Space, Tag, Tooltip } from 'antd';
import classNames from 'classnames';
import { split } from 'lodash';
import React, { useMemo } from 'react';
@ -51,12 +51,14 @@ const QueryViewer = ({
<Tag className="query-lines" data-testid="query-line">
{queryLine}
</Tag>
<Button
className="flex-center button-size bg-white"
data-testid="query-entity-copy-button"
icon={<CopyIcon height={16} width={16} />}
onClick={onCopyToClipBoard}
/>
<Tooltip placement="topRight" title={t('message.copy-to-clipboard')}>
<Button
className="flex-center button-size bg-white"
data-testid="query-entity-copy-button"
icon={<CopyIcon height={16} width={16} />}
onClick={onCopyToClipBoard}
/>
</Tooltip>
</Space>
}
title={title}>

22
openmetadata-ui/src/main/resources/ui/src/components/common/RolesCard/RolesCard.component.tsx
View File

@ -12,7 +12,7 @@
*/
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
import { Button, Card, Select, Space } from 'antd';
import { Button, Card, Select, Space, Tooltip } from 'antd';
import { isArray, isNil, toLower } from 'lodash';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
@ -85,13 +85,19 @@ const RolesCard = ({
className="ant-card-feed relative page-layout-v1-left-panel"
extra={
!isRolesEdit && (
<Button
className="m-l-xs"
data-testid="edit-roles"
icon={<EditIcon width={16} />}
type="text"
onClick={() => setIsRolesEdit(true)}
/>
<Tooltip
title={t('label.edit-entity', {
entity: t('label.role-plural'),
})}>
{' '}
<Button
className="m-l-xs"
data-testid="edit-roles"
icon={<EditIcon width={16} />}
type="text"
onClick={() => setIsRolesEdit(true)}
/>
</Tooltip>
)
}
key="roles-card"

30
openmetadata-ui/src/main/resources/ui/src/components/common/UserTeamSelectableList/UserTeamSelectableList.component.tsx
View File

@ -11,9 +11,9 @@
* limitations under the License.
*/
import Icon from '@ant-design/icons/lib/components/Icon';
import { Button, Popover, Space, Tabs, Typography } from 'antd';
import { Button, Popover, Space, Tabs, Tooltip, Typography } from 'antd';
import { isEmpty, noop, toString } from 'lodash';
import React, { useEffect, useState } from 'react';
import React, { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ReactComponent as EditIcon } from '../../../assets/svg/edit-new.svg';
import { ReactComponent as IconTeamsGrey } from '../../../assets/svg/teams-grey.svg';
@ -189,6 +189,8 @@ export const UserTeamSelectableList = ({
}
};
const openPopover = useCallback(() => setPopupVisible(true), []);
useEffect(() => {
fetchCount();
}, [popupVisible]);
@ -268,14 +270,22 @@ export const UserTeamSelectableList = ({
onOpenChange={setPopupVisible}>
{children ??
(hasPermission && (
<Button
className="flex-center p-0"
data-testid="edit-owner"
icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
size="small"
type="text"
onClick={() => setPopupVisible(true)}
/>
<Tooltip
title={
!popupVisible &&
t('label.edit-entity', {
entity: t('label.owner'),
})
}>
<Button
className="flex-center p-0"
data-testid="edit-owner"
icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
size="small"
type="text"
onClick={openPopover}
/>
</Tooltip>
))}
</Popover>
);

1
openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json
View File

@ -696,6 +696,7 @@
"my-data": "Meine Daten",
"name": "Name",
"name-lowercase": "name",
"need-help": "Need Help",
"new": "Neu",
"new-password": "Neues Passwort",
"new-term": "Neuer Begriff",

1
openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json
View File

@ -696,6 +696,7 @@
"my-data": "My Data",
"name": "Name",
"name-lowercase": "name",
"need-help": "Need Help",
"new": "New",
"new-password": "New Password",
"new-term": "New Term",

1
openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json
View File

@ -696,6 +696,7 @@
"my-data": "Mis Datos",
"name": "Nombre",
"name-lowercase": "nombre",
"need-help": "Need Help",
"new": "Nuevo",
"new-password": "Nueva Contraseña",
"new-term": "Nuevo Término",

1
openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json
View File

@ -696,6 +696,7 @@
"my-data": "Mes Données",
"name": "Nom",
"name-lowercase": "nom",
"need-help": "Need Help",
"new": "Nouveau",
"new-password": "Nouveau mot de passe",
"new-term": "Nouveau Terme",

1
openmetadata-ui/src/main/resources/ui/src/locale/languages/he-he.json
View File

@ -696,6 +696,7 @@
"my-data": "הנתונים שלי",
"name": "שם",
"name-lowercase": "שם",
"need-help": "Need Help",
"new": "חדש",
"new-password": "סיסמה חדשה",
"new-term": "מונח עיסקי חדש",

1
openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json
View File

@ -696,6 +696,7 @@
"my-data": "マイデータ",
"name": "名前",
"name-lowercase": "名前",
"need-help": "Need Help",
"new": "新しい",
"new-password": "新しいパスワード",
"new-term": "New Term",

1
openmetadata-ui/src/main/resources/ui/src/locale/languages/nl-nl.json
View File

@ -696,6 +696,7 @@
"my-data": "Mijn data",
"name": "Naam",
"name-lowercase": "naam",
"need-help": "Need Help",
"new": "Nieuw",
"new-password": "Nieuw wachtwoord",
"new-term": "Nieuwe term",

1
openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json
View File

@ -696,6 +696,7 @@
"my-data": "Meus Dados",
"name": "Nome",
"name-lowercase": "nome",
"need-help": "Need Help",
"new": "Novo",
"new-password": "Nova Senha",
"new-term": "Novo Termo",

1
openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json
View File

@ -696,6 +696,7 @@
"my-data": "Мои данные",
"name": "Наименование",
"name-lowercase": "наименование",
"need-help": "Need Help",
"new": "Новый",
"new-password": "Новый пароль",
"new-term": "Новый термин",

1
openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json
View File

@ -696,6 +696,7 @@
"my-data": "我的数据",
"name": "名称",
"name-lowercase": "名称",
"need-help": "Need Help",
"new": "新",
"new-password": "新密码",
"new-term": "新术语",

2
openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.component.tsx
View File

@ -257,7 +257,7 @@ const GlossaryPage = () => {
fetchGlossaryList();
} catch (error) {
showErrorToast(
error,
error as AxiosError,
t('server.delete-entity-error', {
entity: t('label.glossary'),
})

2
openmetadata-ui/src/main/resources/ui/src/pages/Persona/PersonaDetailsPage/PersonaDetailsPage.test.tsx
View File

@ -126,7 +126,7 @@ describe('PersonaDetailsPage', () => {
expect(
await screen.findByText('DescriptionV1.component')
).toBeInTheDocument();
expect(await screen.findByTestId('add-user-button')).toBeInTheDocument();
expect(await screen.findByTestId('add-persona-button')).toBeInTheDocument();
});
it('NoDataPlaceholder', async () => {

2
openmetadata-ui/src/main/resources/ui/src/pages/Persona/PersonaDetailsPage/PersonaDetailsPage.tsx
View File

@ -222,7 +222,7 @@ export const PersonaDetailsPage = () => {
selectedUsers={personaDetails.users ?? []}
onUpdate={(users) => handlePersonaUpdate({ users })}>
<Button
data-testid="add-user-button"
data-testid="add-persona-button"
size="small"
type="primary">
{t('label.add-entity', { entity: t('label.user') })}

25
openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/PoliciesDetailPage.tsx
View File

@ -23,6 +23,7 @@ import {
Row,
Space,
Tabs,
Tooltip,
Typography,
} from 'antd';
import { AxiosError } from 'axios';
@ -283,15 +284,21 @@ const PoliciesDetailPage = () => {
}
placement="bottomRight"
trigger={['click']}>
<Button
data-testid={`manage-button-${rule.name}`}
icon={<EllipsisOutlined className="text-grey-body" rotate={90} />}
size="small"
type="text"
onClick={(e) => {
e.stopPropagation();
}}
/>
<Tooltip
placement="topRight"
title={t('label.manage-entity', {
entity: t('label.rule'),
})}>
<Button
data-testid={`manage-button-${rule.name}`}
icon={<EllipsisOutlined className="text-grey-body" rotate={90} />}
size="small"
type="text"
onClick={(e) => {
e.stopPropagation();
}}
/>
</Tooltip>
</Dropdown>
);
},

8
openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesListPage/PoliciesListPage.tsx
View File

@ -204,7 +204,13 @@ const PoliciesListPage = () => {
return (
<Tooltip
placement="left"
title={!deletePolicyPermission && NO_PERMISSION_FOR_ACTION}>
title={
deletePolicyPermission
? t('label.delete-entity', {
entity: t('label.policy'),
})
: NO_PERMISSION_FOR_ACTION
}>
<Button
data-testid={`delete-action-${getEntityName(record)}`}
disabled={!deletePolicyPermission}

8
openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesListPage/RolesListPage.tsx
View File

@ -201,7 +201,13 @@ const RolesListPage = () => {
return (
<Tooltip
placement="left"
title={!deleteRolePermission && NO_PERMISSION_FOR_ACTION}>
title={
deleteRolePermission
? t('label.delete-entity', {
entity: t('label.role-plural'),
})
: NO_PERMISSION_FOR_ACTION
}>
<Button
data-testid={`delete-action-${getEntityName(record)}`}
disabled={!deleteRolePermission}

21
openmetadata-ui/src/main/resources/ui/src/pages/UserListPage/UserListPageV1.tsx
View File

@ -313,9 +313,18 @@ const UserListPageV1 = () => {
className="w-full justify-center action-icons"
size={8}>
{showRestore && (
<Tooltip placement="bottom" title={t('label.restore')}>
<Tooltip
placement={isAdminUser ? 'bottom' : 'left'}
title={
isAdminUser
? t('label.restore-entity', {
entity: t('label.user'),
})
: ADMIN_ONLY_ACTION
}>
<Button
data-testid={`restore-user-btn-${record.name}`}
disabled={!isAdminUser}
icon={<IconRestore name={t('label.restore')} width="16px" />}
type="text"
onClick={() => {
@ -325,7 +334,15 @@ const UserListPageV1 = () => {
/>
</Tooltip>
)}
<Tooltip placement="left" title={!isAdminUser && ADMIN_ONLY_ACTION}>
<Tooltip
placement={isAdminUser ? 'bottom' : 'left'}
title={
isAdminUser
? t('label.delete-entity', {
entity: t('label.user'),
})
: ADMIN_ONLY_ACTION
}>
<Button
disabled={!isAdminUser}
icon={