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,95 +243,68 @@ 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 ? 'Must have permission to manage structured properties. Ask your DataHub administrator.'
showArrow={false} : undefined,
title={ onClick: () => {
!canEditProps if (canEditProps) {
? 'Must have permission to manage structured properties. Ask your DataHub administrator.' setIsDrawerOpen(true);
: null setSelectedProperty(record);
} analytics.event({
> type: EventType.ViewStructuredPropertyEvent,
<MenuItem propertyUrn: record.entity.urn,
onClick={() => { });
if (canEditProps) { }
setIsDrawerOpen(true); },
setSelectedProperty(record);
analytics.event({
type: EventType.ViewStructuredPropertyEvent,
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} ? 'Must have permission to manage structured properties. Ask your DataHub administrator.'
title={ : undefined,
!canEditProps onClick: () => {
? 'Must have permission to manage structured properties. Ask your DataHub administrator.' if (canEditProps) {
: null setSelectedProperty(record);
} setShowConfirmDelete(true);
> }
<MenuItem },
onClick={() => {
if (canEditProps) {
setSelectedProperty(record);
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>
</> </>
); );