Option-menu-imporovements (#11309)

- icon switching : if switching layout from table to kanban
and if icon is the table icon (the default one) then automatically
update the icon to the kanban icon

- add tooltip on Layout default view to better explain why it's
unavaialble


Fixes [#689](https://github.com/twentyhq/core-team-issues/issues/689)
Fixes [#688](https://github.com/twentyhq/core-team-issues/issues/688)
Fixes [#686](https://github.com/twentyhq/core-team-issues/issues/686)

packages/twenty-front/src/modules/views/types/ViewType.ts

@@ -1,4 +1,21 @@
+import { IconComponent, IconLayoutKanban, IconTable } from 'twenty-ui';
+
 export enum ViewType {
   Table = 'table',
   Kanban = 'kanban',
 }
+
+const VIEW_TYPE_ICON_MAPPING = [
+  { icon: IconLayoutKanban, value: ViewType.Kanban },
+  { icon: IconTable, value: ViewType.Table },
+] as const satisfies {
+  icon: IconComponent;
+  value: ViewType;
+}[];
+
+export const viewTypeIconMapping = (viewType?: ViewType) => {
+  return (
+    VIEW_TYPE_ICON_MAPPING.find((type) => type.value === viewType)?.icon ??
+    IconTable
+  );
+};

packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx

@@ -1,12 +1,13 @@
 import styled from '@emotion/styled';
 import { Key } from 'ts-key-enum';
-import { IconLayoutKanban, IconTable, IconX } from 'twenty-ui';
+import { IconX } from 'twenty-ui';
 
 import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
 import { IconPicker } from '@/ui/input/components/IconPicker';
 import { Select } from '@/ui/input/components/Select';
 import { TextInputV2 } from '@/ui/input/components/TextInputV2';
 import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
+import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
@@ -16,7 +17,7 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { viewObjectMetadataIdComponentState } from '@/views/states/viewObjectMetadataIdComponentState';
 import { ViewsHotkeyScope } from '@/views/types/ViewsHotkeyScope';
-import { ViewType } from '@/views/types/ViewType';
+import { ViewType, viewTypeIconMapping } from '@/views/types/ViewType';
 import { ViewPickerCreateButton } from '@/views/view-picker/components/ViewPickerCreateButton';
 import { ViewPickerIconAndNameContainer } from '@/views/view-picker/components/ViewPickerIconAndNameContainer';
 import { ViewPickerSaveButtonContainer } from '@/views/view-picker/components/ViewPickerSaveButtonContainer';
@@ -32,9 +33,8 @@ import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states
 import { viewPickerKanbanFieldMetadataIdComponentState } from '@/views/view-picker/states/viewPickerKanbanFieldMetadataIdComponentState';
 import { viewPickerSelectedIconComponentState } from '@/views/view-picker/states/viewPickerSelectedIconComponentState';
 import { viewPickerTypeComponentState } from '@/views/view-picker/states/viewPickerTypeComponentState';
-import { useMemo, useState } from 'react';
 import { useLingui } from '@lingui/react/macro';
-import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
+import { useMemo, useState } from 'react';
 
 const StyledNoKanbanFieldAvailableContainer = styled.div`
   color: ${({ theme }) => theme.font.color.light};
@@ -101,8 +101,7 @@ export const ViewPickerContentCreateMode = () => {
     ViewsHotkeyScope.ListDropdown,
   );
 
-  const defaultIcon =
-    viewPickerType === ViewType.Kanban ? 'IconLayoutKanban' : 'IconTable';
+  const defaultIcon = viewTypeIconMapping(viewPickerType).displayName;
 
   const selectedIcon = useMemo(() => {
     if (hasManuallySelectedIcon) {
@@ -165,11 +164,15 @@ export const ViewPickerContentCreateMode = () => {
               setViewPickerType(value);
             }}
             options={[
-              { value: ViewType.Table, label: t`Table`, Icon: IconTable },
+              {
+                value: ViewType.Table,
+                label: t`Table`,
+                Icon: viewTypeIconMapping(ViewType.Table),
+              },
               {
                 value: ViewType.Kanban,
                 label: t`Kanban`,
-                Icon: IconLayoutKanban,
+                Icon: viewTypeIconMapping(ViewType.Kanban),
               },
             ]}
             dropdownId={VIEW_PICKER_VIEW_TYPE_DROPDOWN_ID}

packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentEffect.tsx

@@ -5,7 +5,7 @@ import { prefetchViewsFromObjectMetadataItemFamilySelector } from '@/prefetch/st
 import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
-import { ViewType } from '@/views/types/ViewType';
+import { viewTypeIconMapping } from '@/views/types/ViewType';
 import { useGetAvailableFieldsForKanban } from '@/views/view-picker/hooks/useGetAvailableFieldsForKanban';
 import { useViewPickerMode } from '@/views/view-picker/hooks/useViewPickerMode';
 import { viewPickerInputNameComponentState } from '@/views/view-picker/states/viewPickerInputNameComponentState';
@@ -66,7 +66,8 @@ export const ViewPickerContentEffect = () => {
       !viewPickerIsDirty
     ) {
       const defaultIcon =
-        viewPickerType === ViewType.Kanban ? 'IconLayoutKanban' : 'IconTable';
+        viewTypeIconMapping(viewPickerType).displayName ?? 'IconTable';
+
       if (viewPickerMode === 'create-empty') {
         setViewPickerSelectedIcon(defaultIcon);
       } else {