Update menu on structured props table to new component (#14655)

Co-authored-by: Anna Everhart <anna.everhart@datahub.com>
This commit is contained in:
Anna Everhart 2025-09-18 09:45:03 -07:00 committed by GitHub
parent 8d3e2fa433
commit 7768abc6eb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,6 +1,5 @@
import { useApolloClient } from '@apollo/client'; import { useApolloClient } from '@apollo/client';
import { Icon, Pill, Table, Text, Tooltip } from '@components'; import { Icon, Menu, Pill, Table, Text, Tooltip } from '@components';
import { Dropdown } from 'antd';
import React, { useState } from 'react'; import React, { useState } from 'react';
import Highlight from 'react-highlighter'; import Highlight from 'react-highlighter';
@ -10,7 +9,6 @@ import {
CardIcons, CardIcons,
DataContainer, DataContainer,
IconContainer, IconContainer,
MenuItem,
NameColumn, NameColumn,
PillContainer, PillContainer,
PillsContainer, PillsContainer,
@ -245,48 +243,35 @@ const StructuredPropsTable = ({
render: (record) => { render: (record) => {
const items = [ const items = [
{ {
type: 'item' as const,
key: '0', key: '0',
label: ( title: 'View',
<MenuItem onClick: () => {
onClick={() => {
setIsViewDrawerOpen(true); setIsViewDrawerOpen(true);
setSelectedProperty(record); setSelectedProperty(record);
analytics.event({ analytics.event({
type: EventType.ViewStructuredPropertyEvent, type: EventType.ViewStructuredPropertyEvent,
propertyUrn: record.entity.urn, propertyUrn: record.entity.urn,
}); });
}} },
>
View
</MenuItem>
),
}, },
{ {
type: 'item' as const,
key: '1', key: '1',
label: ( title: 'Copy Urn',
<MenuItem onClick: () => {
onClick={() => {
navigator.clipboard.writeText(record.entity.urn); navigator.clipboard.writeText(record.entity.urn);
}} },
>
Copy Urn
</MenuItem>
),
}, },
{ {
type: 'item' as const,
key: '2', key: '2',
title: 'Edit',
disabled: !canEditProps, disabled: !canEditProps,
label: ( tooltip: !canEditProps
<Tooltip
showArrow={false}
title={
!canEditProps
? 'Must have permission to manage structured properties. Ask your DataHub administrator.' ? 'Must have permission to manage structured properties. Ask your DataHub administrator.'
: null : undefined,
} onClick: () => {
>
<MenuItem
onClick={() => {
if (canEditProps) { if (canEditProps) {
setIsDrawerOpen(true); setIsDrawerOpen(true);
setSelectedProperty(record); setSelectedProperty(record);
@ -295,45 +280,31 @@ const StructuredPropsTable = ({
propertyUrn: record.entity.urn, propertyUrn: record.entity.urn,
}); });
} }
}} },
>
Edit
</MenuItem>
</Tooltip>
),
}, },
{ {
type: 'item' as const,
key: '3', key: '3',
title: 'Delete',
disabled: !canEditProps, disabled: !canEditProps,
label: ( danger: true,
<Tooltip tooltip: !canEditProps
showArrow={false}
title={
!canEditProps
? 'Must have permission to manage structured properties. Ask your DataHub administrator.' ? 'Must have permission to manage structured properties. Ask your DataHub administrator.'
: null : undefined,
} onClick: () => {
>
<MenuItem
onClick={() => {
if (canEditProps) { if (canEditProps) {
setSelectedProperty(record); setSelectedProperty(record);
setShowConfirmDelete(true); setShowConfirmDelete(true);
} }
}} },
>
<Text color="red">Delete </Text>
</MenuItem>
</Tooltip>
),
}, },
]; ];
return ( return (
<> <>
<CardIcons> <CardIcons>
<Dropdown menu={{ items }} trigger={['click']}> <Menu items={items} trigger={['click']}>
<Icon icon="MoreVert" size="md" data-testid="structured-props-more-options-icon" /> <Icon icon="MoreVert" size="md" data-testid="structured-props-more-options-icon" />
</Dropdown> </Menu>
</CardIcons> </CardIcons>
</> </>
); );