Fixed Custom Icon Persistance Across New View Creations (twentyhq#9070)

closes twentyhq#8714
dsahkl · Dec 17, 2024 · ac2894c · ac2894c
1 parent 1f4d135
commit ac2894c
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 7 deletions.
diff --git a/...ges/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx b/...ges/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx
@@ -30,7 +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';
+import { useMemo, useState } from 'react';
 
 const StyledNoKanbanFieldAvailableContainer = styled.div`
   color: ${({ theme }) => theme.font.color.light};
@@ -41,7 +41,7 @@ const StyledNoKanbanFieldAvailableContainer = styled.div`
 `;
 
 export const ViewPickerContentCreateMode = () => {
-  const { setViewPickerMode } = useViewPickerMode();
+  const { viewPickerMode, setViewPickerMode } = useViewPickerMode();
   const [hasManuallySelectedIcon, setHasManuallySelectedIcon] = useState(false);
 
   const [viewPickerInputName, setViewPickerInputName] =
@@ -92,9 +92,20 @@ export const ViewPickerContentCreateMode = () => {
   const defaultIcon =
     viewPickerType === ViewType.Kanban ? 'IconLayoutKanban' : 'IconTable';
 
-  const selectedIcon = hasManuallySelectedIcon
-    ? viewPickerSelectedIcon
-    : defaultIcon;
+  const selectedIcon = useMemo(() => {
+    if (hasManuallySelectedIcon) {
+      return viewPickerSelectedIcon;
+    }
+    if (viewPickerMode === 'create-from-current') {
+      return viewPickerSelectedIcon || defaultIcon;
+    }
+    return defaultIcon;
+  }, [
+    hasManuallySelectedIcon,
+    viewPickerSelectedIcon,
+    viewPickerMode,
+    defaultIcon,
+  ]);
 
   const onIconChange = ({ iconKey }: { iconKey: string }) => {
     setViewPickerIsDirty(true);

diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentEffect.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentEffect.tsx
@@ -4,7 +4,9 @@ import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
+import { ViewType } 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';
 import { viewPickerIsDirtyComponentState } from '@/views/view-picker/states/viewPickerIsDirtyComponentState';
 import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states/viewPickerIsPersistingComponentState';
@@ -21,11 +23,12 @@ export const ViewPickerContentEffect = () => {
   const setViewPickerInputName = useSetRecoilComponentStateV2(
     viewPickerInputNameComponentState,
   );
+  const { viewPickerMode } = useViewPickerMode();
 
   const [viewPickerKanbanFieldMetadataId, setViewPickerKanbanFieldMetadataId] =
     useRecoilComponentStateV2(viewPickerKanbanFieldMetadataIdComponentState);
 
-  const setViewPickerType = useSetRecoilComponentStateV2(
+  const [viewPickerType, setViewPickerType] = useRecoilComponentStateV2(
     viewPickerTypeComponentState,
   );
 
@@ -54,7 +57,13 @@ export const ViewPickerContentEffect = () => {
       !viewPickerIsPersisting &&
       !viewPickerIsDirty
     ) {
-      setViewPickerSelectedIcon(referenceView.icon);
+      const defaultIcon =
+        viewPickerType === ViewType.Kanban ? 'IconLayoutKanban' : 'IconTable';
+      if (viewPickerMode === 'create-empty') {
+        setViewPickerSelectedIcon(defaultIcon);
+      } else {
+        setViewPickerSelectedIcon(referenceView.icon);
+      }
       setViewPickerInputName(referenceView.name);
       setViewPickerType(referenceView.type);
     }
@@ -65,6 +74,8 @@ export const ViewPickerContentEffect = () => {
     setViewPickerType,
     viewPickerIsPersisting,
     viewPickerIsDirty,
+    viewPickerMode,
+    viewPickerType,
   ]);
 
   useEffect(() => {