From eba79d2ea5f1e6fdae33d2b198e74b99f5ce176c Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Mon, 5 Aug 2024 20:20:08 +0530
Subject: [PATCH] Preserve navigation state when adding custom fields (#6399)

@lucasbordeau
Issue #6374
Fixed the navigation state issue! I also found and resolved a similar
bug with the "Edit Fields" functionality. The
`setNavigationMemorizedUrl` state now correctly updates on navigation to
settings, ensuring users return to the correct page.

Please review.
---
 .../RecordIndexOptionsDropdownContent.tsx     | 15 ++++++++++++-
 .../RecordTableHeaderPlusButtonContent.tsx    | 22 +++++++++++--------
 .../link/components/UndecoratedLink.tsx       | 11 ++++++++--
 3 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx
index fe598b8567a6..fe66ea058832 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx
@@ -30,10 +30,13 @@ import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemNavigate } from '@/ui/navigation/menu-item/components/MenuItemNavigate';
 import { MenuItemToggle } from '@/ui/navigation/menu-item/components/MenuItemToggle';
+import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFieldsVisibilityDropdownSection';
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { ViewType } from '@/views/types/ViewType';
+import { useLocation } from 'react-router-dom';
+import { useSetRecoilState } from 'recoil';
 
 type RecordIndexOptionsMenu = 'fields' | 'hiddenFields';
 
@@ -124,6 +127,11 @@ export const RecordIndexOptionsDropdownContent = ({
     recordIndexId,
   });
 
+  const location = useLocation();
+  const setNavigationMemorizedUrl = useSetRecoilState(
+    navigationMemorizedUrlState,
+  );
+
   return (
     <>
       {!currentMenu && (
@@ -190,7 +198,12 @@ export const RecordIndexOptionsDropdownContent = ({
           )}
           <DropdownMenuSeparator />
 
-          <UndecoratedLink to={settingsUrl}>
+          <UndecoratedLink
+            to={settingsUrl}
+            onClick={() => {
+              setNavigationMemorizedUrl(location.pathname + location.search);
+            }}
+          >
             <DropdownMenuItemsContainer>
               <MenuItem LeftIcon={IconSettings} text="Edit Fields" />
             </DropdownMenuItemsContainer>
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx
index 3fd2cc60e8b5..1766407a022c 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx
@@ -1,7 +1,6 @@
 import { useCallback, useContext } from 'react';
-import { Link } from 'react-router-dom';
-import styled from '@emotion/styled';
-import { useRecoilValue } from 'recoil';
+import { useLocation } from 'react-router-dom';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { IconSettings, useIcons } from 'twenty-ui';
 
 import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
@@ -13,7 +12,9 @@ import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefin
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 
 export const RecordTableHeaderPlusButtonContent = () => {
   const { objectMetadataItem } = useContext(RecordTableContext);
@@ -34,10 +35,10 @@ export const RecordTableHeaderPlusButtonContent = () => {
     [handleColumnVisibilityChange, closeDropdown],
   );
 
-  const StyledMenuItemLink = styled(Link)`
-    text-decoration: none;
-    width: 100%;
-  `;
+  const location = useLocation();
+  const setNavigationMemorizedUrl = useSetRecoilState(
+    navigationMemorizedUrlState,
+  );
 
   return (
     <>
@@ -57,11 +58,14 @@ export const RecordTableHeaderPlusButtonContent = () => {
         </>
       )}
       <DropdownMenuItemsContainer>
-        <StyledMenuItemLink
+        <UndecoratedLink
           to={`/settings/objects/${getObjectSlug(objectMetadataItem)}`}
+          onClick={() => {
+            setNavigationMemorizedUrl(location.pathname + location.search);
+          }}
         >
           <MenuItem LeftIcon={IconSettings} text="Customize fields" />
-        </StyledMenuItemLink>
+        </UndecoratedLink>
       </DropdownMenuItemsContainer>
     </>
   );
diff --git a/packages/twenty-front/src/modules/ui/navigation/link/components/UndecoratedLink.tsx b/packages/twenty-front/src/modules/ui/navigation/link/components/UndecoratedLink.tsx
index 999de453ec65..7fbca2964eb8 100644
--- a/packages/twenty-front/src/modules/ui/navigation/link/components/UndecoratedLink.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/link/components/UndecoratedLink.tsx
@@ -1,24 +1,31 @@
+import styled from '@emotion/styled';
 import React from 'react';
 import { Link } from 'react-router-dom';
-import styled from '@emotion/styled';
 
 const StyledUndecoratedLink = styled(Link)`
   text-decoration: none;
+  width: 100%;
 `;
 
 type UndecoratedLinkProps = {
   to: string | number;
   children: React.ReactNode;
   replace?: boolean;
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
 };
 
 export const UndecoratedLink = ({
   children,
   to,
   replace = false,
+  onClick,
 }: UndecoratedLinkProps) => {
   return (
-    <StyledUndecoratedLink to={to as string} replace={replace}>
+    <StyledUndecoratedLink
+      to={to as string}
+      replace={replace}
+      onClick={onClick}
+    >
       {children}
     </StyledUndecoratedLink>
   );