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