Improve design of fields menu (#5729)

Improve design of field options menu and redirect to the right object
edit page



<img width="215" alt="Screenshot 2024-06-04 at 12 15 43"
src="https://github.com/twentyhq/twenty/assets/6399865/a8da18a1-49d4-40e3-b2cd-3a1a384366b2">

packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx

@@ -11,6 +11,7 @@ import {
   IconTag,
 } from 'twenty-ui';
 
+import { useObjectNamePluralFromSingular } from '@/object-metadata/hooks/useObjectNamePluralFromSingular';
 import { RECORD_INDEX_OPTIONS_DROPDOWN_ID } from '@/object-record/record-index/options/constants/RecordIndexOptionsDropdownId';
 import {
   displayedExportProgress,
@@ -27,6 +28,7 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+import { MenuItemNavigate } from '@/ui/navigation/menu-item/components/MenuItemNavigate';
 import { MenuItemToggle } from '@/ui/navigation/menu-item/components/MenuItemToggle';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFieldsVisibilityDropdownSection';
@@ -62,8 +64,16 @@ export const RecordIndexOptionsDropdownContent = ({
     setCurrentMenu(option);
   };
 
+  const { objectNamePlural } = useObjectNamePluralFromSingular({
+    objectNameSingular: objectNameSingular,
+  });
+
   const handleEditClick = () => {
-    navigate(getSettingsPagePath(SettingsPath.Objects));
+    navigate(
+      getSettingsPagePath(SettingsPath.ObjectDetail, {
+        objectSlug: objectNamePlural,
+      }),
+    );
   };
 
   useScopedHotkeys(
@@ -146,7 +156,6 @@ export const RecordIndexOptionsDropdownContent = ({
           <DropdownMenuHeader StartIcon={IconChevronLeft} onClick={resetMenu}>
             Fields
           </DropdownMenuHeader>
-          <DropdownMenuSeparator />
           <ViewFieldsVisibilityDropdownSection
             title="Visible"
             fields={visibleRecordFields}
@@ -156,11 +165,13 @@ export const RecordIndexOptionsDropdownContent = ({
             showSubheader={false}
           />
           <DropdownMenuSeparator />
-          <MenuItem
-            onClick={() => handleSelectMenu('hiddenFields')}
-            LeftIcon={IconEyeOff}
-            text="Hidden Fields"
-          />
+          <DropdownMenuItemsContainer>
+            <MenuItemNavigate
+              onClick={() => handleSelectMenu('hiddenFields')}
+              LeftIcon={IconEyeOff}
+              text="Hidden Fields"
+            />
+          </DropdownMenuItemsContainer>
         </>
       )}
       {currentMenu === 'hiddenFields' && (
@@ -171,7 +182,6 @@ export const RecordIndexOptionsDropdownContent = ({
           >
             Hidden Fields
           </DropdownMenuHeader>
-          <DropdownMenuSeparator />
           {hiddenRecordFields.length > 0 && (
             <>
               <ViewFieldsVisibilityDropdownSection
@@ -184,11 +194,13 @@ export const RecordIndexOptionsDropdownContent = ({
             </>
           )}
           <DropdownMenuSeparator />
-          <MenuItem
-            onClick={handleEditClick}
-            LeftIcon={IconSettings}
-            text="Edit Fields"
-          />
+          <DropdownMenuItemsContainer>
+            <MenuItem
+              onClick={handleEditClick}
+              LeftIcon={IconSettings}
+              text="Edit Fields"
+            />
+          </DropdownMenuItemsContainer>
         </>
       )}
 

packages/twenty-front/src/modules/settings/utils/getSettingsPagePath.ts

@@ -1,4 +1,19 @@
 import { SettingsPath } from '@/types/SettingsPath';
+import { isDefined } from '~/utils/isDefined';
 
-export const getSettingsPagePath = <Path extends SettingsPath>(path: Path) =>
-  `/settings/${path}` as const;
+type PathParams = {
+  objectSlug?: string;
+};
+
+export const getSettingsPagePath = <Path extends SettingsPath>(
+  path: Path,
+  params?: PathParams,
+) => {
+  let resultPath = `/settings/${path}`;
+
+  if (isDefined(params?.objectSlug)) {
+    resultPath = resultPath.replace(':objectSlug', params.objectSlug);
+  }
+
+  return resultPath;
+};