From 16b493fcbf1d45e5c729065f13adcf345db86d90 Mon Sep 17 00:00:00 2001
From: Fernando Chavez <fernando.chavez@strapi.io>
Date: Mon, 17 Jun 2024 09:36:54 +0200
Subject: [PATCH] fix(content-releases): use simplemenu for releaseDetails edit
 menu

---
 .../admin/src/pages/ReleaseDetailsPage.tsx    | 145 ++++++++----------
 1 file changed, 63 insertions(+), 82 deletions(-)

diff --git a/packages/core/content-releases/admin/src/pages/ReleaseDetailsPage.tsx b/packages/core/content-releases/admin/src/pages/ReleaseDetailsPage.tsx
index efa97fdc25..e66eae6fa8 100644
--- a/packages/core/content-releases/admin/src/pages/ReleaseDetailsPage.tsx
+++ b/packages/core/content-releases/admin/src/pages/ReleaseDetailsPage.tsx
@@ -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',