yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-25 08:19:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(content-releases): use simplemenu for releaseDetails edit menu

Browse Source
This commit is contained in:
Fernando Chavez 2024-06-17 09:36:54 +02:00
parent 1bfee7bf40
commit 16b493fcbf
1 changed files with 63 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
packages/core/content-releases/admin/src/pages/ReleaseDetailsPage.tsx
View File

@ -29,8 +29,9 @@ import {
Tooltip,
EmptyStateLayout,
LinkButton,
Menu,
Dialog,
SimpleMenu,
MenuItem,
} from '@strapi/design-system';
import {
CheckCircle,
@ -85,7 +86,7 @@ const ReleaseInfoWrapper = styled(Flex)`
border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
`;
const StyledMenuItem = styled(Menu.Item)<{
const StyledMenuItem = styled(MenuItem)<{
disabled?: boolean;
$variant?: 'neutral' | 'danger';
}>`
@ -408,90 +409,70 @@ const ReleaseDetailsLayout = ({
primaryAction={
!release.releasedAt && (
<Flex gap={2}>
<Menu.Root>
{/*
TODO Fix in the DS
- tag={IconButton} has TS error: Property 'icon' does not exist on type 'IntrinsicAttributes & TriggerProps & RefAttributes<HTMLButtonElement>'
- The Icon doesn't actually show unless you hack it with some padding...and it's still a little strange
*/}
<Menu.Trigger
paddingLeft={2}
paddingRight={2}
aria-label={formatMessage({
id: 'content-releases.header.actions.open-release-actions',
defaultMessage: 'Release edit and delete menu',
})}
variant="tertiary"
endIcon={null}
>
<More />
</Menu.Trigger>
{/*
TODO: Using Menu instead of SimpleMenu mainly because there is no positioning provided from the DS,
Refactor this once fixed in the DS
*/}
<Menu.Content top={1} popoverPlacement="bottom-end" maxHeight={undefined}>
<Flex
alignItems="center"
justifyContent="center"
direction="column"
padding={1}
width="100%"
>
<StyledMenuItem disabled={!canUpdate} onSelect={toggleEditReleaseModal}>
<Flex alignItems="center" gap={2} hasRadius width="100%">
<PencilIcon />
<Typography ellipsis>
{formatMessage({
id: 'content-releases.header.actions.edit',
defaultMessage: 'Edit',
})}
</Typography>
</Flex>
</StyledMenuItem>
<StyledMenuItem
disabled={!canDelete}
onSelect={toggleWarningSubmit}
$variant="danger"
>
<Flex alignItems="center" gap={2} hasRadius width="100%">
<TrashIcon />
<Typography ellipsis textColor="danger600">
{formatMessage({
id: 'content-releases.header.actions.delete',
defaultMessage: 'Delete',
})}
</Typography>
</Flex>
</StyledMenuItem>
</Flex>
<ReleaseInfoWrapper
direction="column"
justifyContent="center"
alignItems="flex-start"
gap={1}
padding={5}
>
<Typography variant="pi" fontWeight="bold">
<SimpleMenu
label={<More />}
variant="tertiary"
endIcon={null}
paddingLeft={2}
paddingRight={2}
aria-label={formatMessage({
id: 'content-releases.header.actions.open-release-actions',
defaultMessage: 'Release edit and delete menu',
})}
popoverPlacement="bottom-end"
>
<StyledMenuItem disabled={!canUpdate} onSelect={toggleEditReleaseModal}>
<Flex alignItems="center" gap={2} hasRadius width="100%">
<PencilIcon />
<Typography ellipsis>
{formatMessage({
id: 'content-releases.header.actions.created',
defaultMessage: 'Created',
id: 'content-releases.header.actions.edit',
defaultMessage: 'Edit',
})}
</Typography>
<Typography variant="pi" color="neutral300">
<RelativeTime timestamp={new Date(release.createdAt)} />
{formatMessage(
{
id: 'content-releases.header.actions.created.description',
defaultMessage:
'{hasCreatedByUser, select, true { by {createdBy}} other { by deleted user}}',
},
{ createdBy: getCreatedByUser(), hasCreatedByUser }
)}
</Flex>
</StyledMenuItem>
<StyledMenuItem
disabled={!canDelete}
onSelect={toggleWarningSubmit}
$variant="danger"
>
<Flex alignItems="center" gap={2} hasRadius width="100%">
<TrashIcon />
<Typography ellipsis textColor="danger600">
{formatMessage({
id: 'content-releases.header.actions.delete',
defaultMessage: 'Delete',
})}
</Typography>
</ReleaseInfoWrapper>
</Menu.Content>
</Menu.Root>
</Flex>
</StyledMenuItem>
<ReleaseInfoWrapper
direction="column"
justifyContent="center"
alignItems="flex-start"
gap={1}
padding={5}
>
<Typography variant="pi" fontWeight="bold">
{formatMessage({
id: 'content-releases.header.actions.created',
defaultMessage: 'Created',
})}
</Typography>
<Typography variant="pi" color="neutral300">
<RelativeTime timestamp={new Date(release.createdAt)} />
{formatMessage(
{
id: 'content-releases.header.actions.created.description',
defaultMessage:
'{hasCreatedByUser, select, true { by {createdBy}} other { by deleted user}}',
},
{ createdBy: getCreatedByUser(), hasCreatedByUser }
)}
</Typography>
</ReleaseInfoWrapper>
</SimpleMenu>
<Button size="S" variant="tertiary" onClick={handleRefresh}>
{formatMessage({
id: 'content-releases.header.actions.refresh',