renaming layout and changing icons (#10781)

Updating icons and renaming View Settings to Layout

Fixes : https://github.com/twentyhq/core-team-issues/issues/486
Fixes : https://github.com/twentyhq/core-team-issues/issues/484
Fixes : https://github.com/twentyhq/core-team-issues/issues/488

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownContent.tsx

@@ -1,22 +1,22 @@
 import { ObjectOptionsDropdownFieldsContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownFieldsContent';
 import { ObjectOptionsDropdownHiddenFieldsContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenFieldsContent';
 import { ObjectOptionsDropdownHiddenRecordGroupsContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenRecordGroupsContent';
+import { ObjectOptionsDropdownLayoutContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutContent';
+import { ObjectOptionsDropdownLayoutOpenInContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutOpenInContent';
 import { ObjectOptionsDropdownMenuContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent';
 import { ObjectOptionsDropdownRecordGroupFieldsContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent';
 import { ObjectOptionsDropdownRecordGroupsContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupsContent';
 import { ObjectOptionsDropdownRecordGroupSortContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupSortContent';
-import { ObjectOptionsDropdownViewSettingsContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownViewSettingsContent';
-import { ObjectOptionsDropdownViewSettingsOpenInContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownViewSettingsOpenInContent';
 import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useOptionsDropdown';
 
 export const ObjectOptionsDropdownContent = () => {
   const { currentContentId } = useOptionsDropdown();
 
   switch (currentContentId) {
-    case 'viewSettings':
+    case 'layout':
-      return <ObjectOptionsDropdownViewSettingsContent />;
+      return <ObjectOptionsDropdownLayoutContent />;
-    case 'viewSettingsOpenIn':
+    case 'layoutOpenIn':
-      return <ObjectOptionsDropdownViewSettingsOpenInContent />;
+      return <ObjectOptionsDropdownLayoutOpenInContent />;
     case 'fields':
       return <ObjectOptionsDropdownFieldsContent />;
     case 'hiddenFields':

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutContent.tsx

@@ -18,7 +18,7 @@ import { ViewType } from '@/views/types/ViewType';
 import { useLingui } from '@lingui/react/macro';
 import { useRecoilValue } from 'recoil';
 
-export const ObjectOptionsDropdownViewSettingsContent = () => {
+export const ObjectOptionsDropdownLayoutContent = () => {
   const { t } = useLingui();
   const { currentView } = useGetCurrentViewOnly();
 
@@ -42,11 +42,11 @@ export const ObjectOptionsDropdownViewSettingsContent = () => {
   return (
     <>
       <DropdownMenuHeader StartIcon={IconChevronLeft} onClick={resetContent}>
-        {t`View settings`}
+        {t`Layout`}
       </DropdownMenuHeader>
       <DropdownMenuItemsContainer>
         <MenuItem
-          onClick={() => onContentChange('viewSettingsOpenIn')}
+          onClick={() => onContentChange('layoutOpenIn')}
           LeftIcon={
             recordIndexOpenRecordIn === ViewOpenRecordInType.SIDE_PANEL
               ? IconLayoutSidebarRight
@@ -60,6 +60,7 @@ export const ObjectOptionsDropdownViewSettingsContent = () => {
           }
           hasSubMenu
         />
+
         {viewType === ViewType.Kanban && (
           <MenuItemToggle
             LeftIcon={IconBaselineDensitySmall}

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutOpenInContent.tsx

@@ -15,7 +15,7 @@ import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType';
 import { t } from '@lingui/core/macro';
 import { useRecoilValue } from 'recoil';
 
-export const ObjectOptionsDropdownViewSettingsOpenInContent = () => {
+export const ObjectOptionsDropdownLayoutOpenInContent = () => {
   const { onContentChange } = useOptionsDropdown();
   const recordIndexOpenRecordIn = useRecoilValue(recordIndexOpenRecordInState);
   const { currentView } = useGetCurrentViewOnly();
@@ -25,7 +25,7 @@ export const ObjectOptionsDropdownViewSettingsOpenInContent = () => {
     <>
       <DropdownMenuHeader
         StartIcon={IconChevronLeft}
-        onClick={() => onContentChange('viewSettings')}
+        onClick={() => onContentChange('layout')}
       >
         {t`Open in`}
       </DropdownMenuHeader>

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx

@@ -1,11 +1,13 @@
 import { Key } from 'ts-key-enum';
+import { capitalize, isDefined } from 'twenty-shared';
 import {
   AppTooltip,
   IconCopy,
-  IconLayout,
+  IconLayoutKanban,
   IconLayoutList,
   IconList,
-  IconTag,
+  IconListDetails,
+  IconTable,
   IconTrash,
   MenuItem,
   useIcons,
@@ -24,11 +26,11 @@ import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
+import { ViewType } from '@/views/types/ViewType';
 import { useDeleteViewFromCurrentState } from '@/views/view-picker/hooks/useDeleteViewFromCurrentState';
 import { viewPickerReferenceViewIdComponentState } from '@/views/view-picker/states/viewPickerReferenceViewIdComponentState';
 import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
-import { isDefined } from 'twenty-shared';
 
 export const ObjectOptionsDropdownMenuContent = () => {
   const { t } = useLingui();
@@ -74,6 +76,7 @@ export const ObjectOptionsDropdownMenuContent = () => {
     deleteViewFromCurrentState();
     closeDropdown();
   };
+
   const theme = useTheme();
   const { enqueueSnackBar } = useSnackBar();
 
@@ -85,9 +88,12 @@ export const ObjectOptionsDropdownMenuContent = () => {
 
       <DropdownMenuItemsContainer scrollable={false}>
         <MenuItem
-          onClick={() => onContentChange('viewSettings')}
+          onClick={() => onContentChange('layout')}
-          LeftIcon={IconLayout}
+          LeftIcon={
-          text={t`View settings`}
+            currentView?.type === ViewType.Table ? IconTable : IconLayoutKanban
+          }
+          text={t`Layout`}
+          contextualText={`${capitalize(currentView?.type ?? '')}`}
           hasSubMenu
         />
       </DropdownMenuItemsContainer>
@@ -96,7 +102,7 @@ export const ObjectOptionsDropdownMenuContent = () => {
       <DropdownMenuItemsContainer scrollable={false}>
         <MenuItem
           onClick={() => onContentChange('fields')}
-          LeftIcon={IconTag}
+          LeftIcon={IconListDetails}
           text={t`Fields`}
           contextualText={`${visibleBoardFields.length} shown`}
           hasSubMenu

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/__stories__/ObjectOptionsDropdownContent.stories.tsx

@@ -123,7 +123,7 @@ const createStory = (contentId: ObjectOptionsContentId | null): Story => ({
 
 export const Default = createStory(null);
 
-export const ViewSettings = createStory('viewSettings');
+export const Layout = createStory('layout');
 
 export const Fields = createStory('fields');
 

packages/twenty-front/src/modules/object-record/object-options-dropdown/types/ObjectOptionsContentId.ts

@@ -1,6 +1,6 @@
 export type ObjectOptionsContentId =
-  | 'viewSettings'
+  | 'layout'
-  | 'viewSettingsOpenIn'
+  | 'layoutOpenIn'
   | 'fields'
   | 'hiddenFields'
   | 'recordGroups'