From 97ab0481e490ac847e905aa6c63cc33b56948719 Mon Sep 17 00:00:00 2001
From: Vinod Rathod <112850789+rathodvinod5@users.noreply.github.com>
Date: Thu, 10 Oct 2024 13:42:17 +0530
Subject: [PATCH] Fix for view switcher default icon display (#7029)

Fixes #6947 (View switcher default icon display)

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
---
 .../src/modules/ui/input/components/IconPicker.tsx   |  6 ++++--
 .../components/ViewPickerContentCreateMode.tsx       | 12 +++++++++++-
 .../twenty-ui/src/display/icon/hooks/useIcons.ts     |  5 ++++-
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx b/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
index f1f7cff90..b0e8278b8 100644
--- a/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
@@ -1,5 +1,5 @@
-import { useMemo, useState } from 'react';
 import styled from '@emotion/styled';
+import { useMemo, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { IconApps, IconComponent, useIcons } from 'twenty-ui';
 
@@ -147,6 +147,8 @@ export const IconPicker = ({
     [matchingSearchIconKeys],
   );
 
+  const icon = selectedIconKey ? getIcon(selectedIconKey) : IconApps;
+
   return (
     <div className={className}>
       <Dropdown
@@ -160,7 +162,7 @@ export const IconPicker = ({
                 : `(no icon selected)`
             }`}
             disabled={disabled}
-            Icon={selectedIconKey ? getIcon(selectedIconKey) : IconApps}
+            Icon={icon}
             variant={variant}
           />
         }
diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx
index 1d4fad308..c3ce24018 100644
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx
+++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx
@@ -30,6 +30,7 @@ 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 { useState } from 'react';
 
 const StyledNoKanbanFieldAvailableContainer = styled.div`
   color: ${({ theme }) => theme.font.color.light};
@@ -41,6 +42,7 @@ const StyledNoKanbanFieldAvailableContainer = styled.div`
 
 export const ViewPickerContentCreateMode = () => {
   const { setViewPickerMode } = useViewPickerMode();
+  const [hasManuallySelectedIcon, setHasManuallySelectedIcon] = useState(false);
 
   const [viewPickerInputName, setViewPickerInputName] =
     useRecoilComponentStateV2(viewPickerInputNameComponentState);
@@ -87,9 +89,17 @@ export const ViewPickerContentCreateMode = () => {
     ViewsHotkeyScope.ListDropdown,
   );
 
+  const defaultIcon =
+    viewPickerType === ViewType.Kanban ? 'IconLayoutKanban' : 'IconTable';
+
+  const selectedIcon = hasManuallySelectedIcon
+    ? viewPickerSelectedIcon
+    : defaultIcon;
+
   const onIconChange = ({ iconKey }: { iconKey: string }) => {
     setViewPickerIsDirty(true);
     setViewPickerSelectedIcon(iconKey);
+    setHasManuallySelectedIcon(true);
   };
 
   const handleClose = async () => {
@@ -106,7 +116,7 @@ export const ViewPickerContentCreateMode = () => {
         <ViewPickerIconAndNameContainer>
           <IconPicker
             onChange={onIconChange}
-            selectedIconKey={viewPickerSelectedIcon}
+            selectedIconKey={selectedIcon}
             disableBlur
             onClose={() => setHotkeyScope(ViewsHotkeyScope.ListDropdown)}
           />
diff --git a/packages/twenty-ui/src/display/icon/hooks/useIcons.ts b/packages/twenty-ui/src/display/icon/hooks/useIcons.ts
index c07d0a38a..981fae839 100644
--- a/packages/twenty-ui/src/display/icon/hooks/useIcons.ts
+++ b/packages/twenty-ui/src/display/icon/hooks/useIcons.ts
@@ -12,7 +12,10 @@ export const useIcons = () => {
   };
 
   const getIcon = (iconKey?: string | null) => {
-    if (!iconKey) return defaultIcon;
+    if (!iconKey) {
+      return defaultIcon;
+    }
+
     return icons[iconKey] ?? defaultIcon;
   };