From 9810c5b6f24f020a75c6fabd23e7b190243b5331 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Mon, 18 Nov 2024 17:44:23 +0100
Subject: [PATCH] Update ShowPageMoreButton to open the command menu when
 clicked (#8565)

https://github.com/user-attachments/assets/6e269391-8ea2-4146-8e86-7e75c84982f4
---
 .../components/ShowPageMoreButton.tsx         | 136 ++----------------
 .../RecordShowPageBaseHeader.tsx              |   7 +-
 2 files changed, 13 insertions(+), 130 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx
index a0fb80c22093..2bac20781dca 100644
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx
@@ -1,130 +1,18 @@
-import styled from '@emotion/styled';
-import { useNavigate } from 'react-router-dom';
-import { useRecoilState, useRecoilValue } from 'recoil';
-import {
-  IconButton,
-  IconDotsVertical,
-  IconRestore,
-  IconTrash,
-  MenuItem,
-} from 'twenty-ui';
+import { IconButton, IconDotsVertical } from 'twenty-ui';
 
-import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
-import { PageHotkeyScope } from '@/types/PageHotkeyScope';
-import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
+import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 
-import { isObjectMetadataReadOnly } from '@/object-metadata/utils/isObjectMetadataReadOnly';
-import { useDestroyOneRecord } from '@/object-record/hooks/useDestroyOneRecord';
-import { useRestoreManyRecords } from '@/object-record/hooks/useRestoreManyRecords';
-import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
-import { Dropdown } from '../../dropdown/components/Dropdown';
-import { DropdownMenu } from '../../dropdown/components/DropdownMenu';
-
-const StyledContainer = styled.div`
-  z-index: 1;
-`;
-
-export const ShowPageMoreButton = ({
-  recordId,
-  objectNameSingular,
-  isRemote,
-}: {
-  recordId: string;
-  objectNameSingular: string;
-  isRemote: boolean;
-}) => {
-  const { closeDropdown, toggleDropdown } = useDropdown('more-show-page');
-  const navigationMemorizedUrl = useRecoilValue(navigationMemorizedUrlState);
-  const navigate = useNavigate();
-
-  const { deleteOneRecord } = useDeleteOneRecord({
-    objectNameSingular,
-  });
-  const { destroyOneRecord } = useDestroyOneRecord({
-    objectNameSingular,
-  });
-  const { restoreManyRecords } = useRestoreManyRecords({
-    objectNameSingular,
-  });
-
-  const handleDelete = () => {
-    deleteOneRecord(recordId);
-    closeDropdown();
-  };
-
-  const handleDestroy = () => {
-    destroyOneRecord(recordId);
-    closeDropdown();
-    navigate(navigationMemorizedUrl, { replace: true });
-  };
-
-  const handleRestore = () => {
-    restoreManyRecords([recordId]);
-    closeDropdown();
-  };
-
-  const [recordFromStore] = useRecoilState<any>(
-    recordStoreFamilyState(recordId),
-  );
-
-  if (
-    isObjectMetadataReadOnly({
-      isRemote,
-      nameSingular: objectNameSingular,
-    })
-  ) {
-    return;
-  }
+export const ShowPageMoreButton = () => {
+  const { openCommandMenu } = useCommandMenu();
 
   return (
-    <StyledContainer>
-      <Dropdown
-        dropdownId="more-show-page"
-        clickableComponent={
-          <IconButton
-            Icon={IconDotsVertical}
-            size="medium"
-            dataTestId="more-showpage-button"
-            accent="default"
-            variant="secondary"
-            onClick={toggleDropdown}
-          />
-        }
-        dropdownComponents={
-          <DropdownMenu>
-            <DropdownMenuItemsContainer>
-              {recordFromStore && !recordFromStore.deletedAt && (
-                <MenuItem
-                  onClick={handleDelete}
-                  accent="danger"
-                  LeftIcon={IconTrash}
-                  text="Delete"
-                />
-              )}
-              {recordFromStore && recordFromStore.deletedAt && (
-                <>
-                  <MenuItem
-                    onClick={handleDestroy}
-                    accent="danger"
-                    LeftIcon={IconTrash}
-                    text="Destroy"
-                  />
-                  <MenuItem
-                    onClick={handleRestore}
-                    LeftIcon={IconRestore}
-                    text="Restore"
-                  />
-                </>
-              )}
-            </DropdownMenuItemsContainer>
-          </DropdownMenu>
-        }
-        dropdownHotkeyScope={{
-          scope: PageHotkeyScope.ShowPage,
-        }}
-      />
-    </StyledContainer>
+    <IconButton
+      Icon={IconDotsVertical}
+      size="medium"
+      dataTestId="more-showpage-button"
+      accent="default"
+      variant="secondary"
+      onClick={openCommandMenu}
+    />
   );
 };
diff --git a/packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx b/packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx
index 5b78120c54f3..94737e8269f9 100644
--- a/packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx
+++ b/packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx
@@ -49,12 +49,7 @@ export const RecordShowPageBaseHeader = ({
           targetObjectNameSingular: objectMetadataItem.nameSingular,
         }}
       />
-      <ShowPageMoreButton
-        key="more"
-        recordId={record?.id ?? '0'}
-        objectNameSingular={objectNameSingular}
-        isRemote={objectMetadataItem.isRemote}
-      />
+      <ShowPageMoreButton key="more" />
     </>
   );
 };