From a3fba06937c853638bd437b1498b6066119940ef Mon Sep 17 00:00:00 2001
From: Lucas Bordeau <bordeau.lucas@gmail.com>
Date: Wed, 9 Oct 2024 09:18:47 +0200
Subject: [PATCH] Fixed

---
 .../ui/input/components/IconPicker.tsx        | 22 +++----------------
 .../ViewPickerContentCreateMode.tsx           | 16 +++++++++-----
 .../src/display/icon/hooks/useIcons.ts        |  5 ++++-
 3 files changed, 18 insertions(+), 25 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 2680a1a0bc26..b0e8278b89cd 100644
--- a/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
@@ -1,13 +1,7 @@
 import styled from '@emotion/styled';
 import { useMemo, useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import {
-  IconApps,
-  IconComponent,
-  IconLayoutKanban,
-  IconTable,
-  useIcons,
-} from 'twenty-ui';
+import { IconApps, IconComponent, useIcons } from 'twenty-ui';
 
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
@@ -35,7 +29,6 @@ export type IconPickerProps = {
   variant?: IconButtonVariant;
   className?: string;
   disableBlur?: boolean;
-  takeControlOfCustomIcon?: boolean;
 };
 
 const StyledMenuIconItemsContainer = styled.div`
@@ -94,7 +87,6 @@ export const IconPicker = ({
   variant = 'secondary',
   disableBlur = false,
   className,
-  takeControlOfCustomIcon = false,
 }: IconPickerProps) => {
   const [searchString, setSearchString] = useState('');
   const {
@@ -155,15 +147,7 @@ export const IconPicker = ({
     [matchingSearchIconKeys],
   );
 
-  const getIconForIconPicker = () => {
-    if (
-      !takeControlOfCustomIcon &&
-      (selectedIconKey === 'table' || selectedIconKey === 'kanban')
-    ) {
-      return selectedIconKey === 'table' ? IconTable : IconLayoutKanban;
-    }
-    return selectedIconKey ? getIcon(selectedIconKey) : IconApps;
-  };
+  const icon = selectedIconKey ? getIcon(selectedIconKey) : IconApps;
 
   return (
     <div className={className}>
@@ -178,7 +162,7 @@ export const IconPicker = ({
                 : `(no icon selected)`
             }`}
             disabled={disabled}
-            Icon={getIconForIconPicker()}
+            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 8902b2669ab7..c3ce24018b9e 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,10 +89,17 @@ export const ViewPickerContentCreateMode = () => {
     ViewsHotkeyScope.ListDropdown,
   );
 
+  const defaultIcon =
+    viewPickerType === ViewType.Kanban ? 'IconLayoutKanban' : 'IconTable';
+
+  const selectedIcon = hasManuallySelectedIcon
+    ? viewPickerSelectedIcon
+    : defaultIcon;
+
   const onIconChange = ({ iconKey }: { iconKey: string }) => {
-    toggleTakeControlOfCustomIcon(true);
     setViewPickerIsDirty(true);
     setViewPickerSelectedIcon(iconKey);
+    setHasManuallySelectedIcon(true);
   };
 
   const handleClose = async () => {
@@ -107,12 +116,9 @@ export const ViewPickerContentCreateMode = () => {
         <ViewPickerIconAndNameContainer>
           <IconPicker
             onChange={onIconChange}
-            selectedIconKey={
-              takeControlOfCustomIcon ? viewPickerSelectedIcon : viewPickerType
-            }
+            selectedIconKey={selectedIcon}
             disableBlur
             onClose={() => setHotkeyScope(ViewsHotkeyScope.ListDropdown)}
-            takeControlOfCustomIcon={takeControlOfCustomIcon}
           />
           <DropdownMenuInput
             value={viewPickerInputName}
diff --git a/packages/twenty-ui/src/display/icon/hooks/useIcons.ts b/packages/twenty-ui/src/display/icon/hooks/useIcons.ts
index c07d0a38ac82..981fae839cbc 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;
   };