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

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,35 +409,17 @@ 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
+              <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',
                 })}
-                  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%"
+                popoverPlacement="bottom-end"
               >
                 <StyledMenuItem disabled={!canUpdate} onSelect={toggleEditReleaseModal}>
                   <Flex alignItems="center" gap={2} hasRadius width="100%">
@@ -464,7 +447,6 @@ const ReleaseDetailsLayout = ({
                     </Typography>
                   </Flex>
                 </StyledMenuItem>
-                  </Flex>
                 <ReleaseInfoWrapper
                   direction="column"
                   justifyContent="center"
@@ -490,8 +472,7 @@ const ReleaseDetailsLayout = ({
                     )}
                   </Typography>
                 </ReleaseInfoWrapper>
-                </Menu.Content>
-              </Menu.Root>
+              </SimpleMenu>
               <Button size="S" variant="tertiary" onClick={handleRefresh}>
                 {formatMessage({
                   id: 'content-releases.header.actions.refresh',