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.
twentyhq · Aug 5, 2024 · eba79d2 · eba79d2
1 parent 2073d8e
commit eba79d2
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 12 deletions.
diff --git a/...dules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx b/...dules/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/...record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx b/...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
@@ -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>
   );