[Stabilization fix] Link menu blocker state (#7211)

* use links to detect changes * upped version * renamed ref * update test
huridocs · Sep 11, 2024 · 5687865 · 5687865
1 parent 1d6ebde
commit 5687865
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 34 deletions.
diff --git a/app/react/V2/Routes/Settings/MenuConfig/MenuConfig.tsx b/app/react/V2/Routes/Settings/MenuConfig/MenuConfig.tsx
@@ -20,28 +20,23 @@ import { Link, sanitizeIds } from './shared';
 const menuConfigloader =
   (headers?: IncomingHttpHeaders): LoaderFunction =>
   async () => {
-    const rowIds: string[] = [];
     const tableRows = (await SettingsAPI.getLinks(headers)).map(link => {
       const linkWithRowId: Link = { ...link, rowId: link._id! };
-      rowIds.push(link._id!);
       if (link.sublinks) {
-        linkWithRowId.subRows = link.sublinks.map((sublink, index) => {
-          rowIds.push(`${link._id}-${index}`);
-          return {
-            ...sublink,
-            rowId: `${link._id}-${index}`,
-          };
-        });
+        linkWithRowId.subRows = link.sublinks.map((sublink, index) => ({
+          ...sublink,
+          rowId: `${link._id}-${index}`,
+        }));
       }
       return linkWithRowId;
     });
-    return { links: tableRows, rowIds };
+    return tableRows;
   };
 
 const MenuConfig = () => {
-  const { links, rowIds } = useLoaderData() as { links: Link[]; rowIds: string[] };
+  const links = useLoaderData() as Link[];
   const [linkState, setLinkState] = useState(links);
-  const nextRowIds = useRef(rowIds);
+  const prevLinks = useRef(links);
   const [selectedLinks, setSelectedLinks] = useState<RowSelectionState>({});
   const [isSidepanelOpen, setIsSidepanelOpen] = useState(false);
   const setNotifications = useSetAtom(notificationAtom);
@@ -50,7 +45,7 @@ const MenuConfig = () => {
   const [showModal, setShowModal] = useState(false);
   const setSettings = useSetAtom(settingsAtom);
 
-  const areEqual = isEqual(rowIds, nextRowIds.current);
+  const areEqual = isEqual(linkState, prevLinks.current);
 
   const blocker = useBlocker(!areEqual);
 
@@ -108,22 +103,9 @@ const MenuConfig = () => {
   }, [blocker, setShowModal]);
 
   useEffect(() => {
-    nextRowIds.current = rowIds;
+    prevLinks.current = links;
     setLinkState(links);
-    //rowIds is derived from links, no need to add links to the deps
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rowIds]);
-
-  useEffect(() => {
-    const updatedRowsIds: string[] = [];
-    linkState.forEach(link => {
-      updatedRowsIds.push(link.rowId!);
-      if (link.subRows) {
-        link.subRows.forEach(subRow => updatedRowsIds.push(subRow.rowId!));
-      }
-    });
-    nextRowIds.current = updatedRowsIds;
-  }, [rowIds, linkState]);
+  }, [links]);
 
   return (
     <div

diff --git a/cypress/e2e/settings/menu.cy.ts b/cypress/e2e/settings/menu.cy.ts
@@ -60,7 +60,7 @@ describe('Menu configuration', () => {
     cy.contains('caption', 'Menu');
   });
 
-  it('tests Add groups', () => {
+  it('it should add groups', () => {
     cy.getByTestId('menu-add-group').click();
     cy.get('#link-title').click();
     cy.get('#link-title').type('Group 1', { delay: 0 });
@@ -74,7 +74,7 @@ describe('Menu configuration', () => {
     cy.wait('@fetchLinks');
   });
 
-  it('tests Edit', () => {
+  it('should edit items and put them into groups', () => {
     cy.get('tbody tr:nth-of-type(1)').contains('Edit').click();
     cy.get('#link-title').type(' edited', { delay: 0 });
     cy.get('#link-group').select('Group 1');
@@ -100,7 +100,7 @@ describe('Menu configuration', () => {
     cy.getByTestId('menu-save').should('be.disabled');
   });
 
-  it('tests edit groups', () => {
+  it('should swich items from groups', () => {
     cy.get('tbody tr:nth-of-type(3)').contains('button', 'Group').click();
     cy.get('tbody tr:nth-of-type(2)').contains('button', 'Group').click();
 
@@ -117,14 +117,26 @@ describe('Menu configuration', () => {
     cy.wait('@fetchLinks');
   });
 
+  it('should edit a child item', () => {
+    cy.contains('tr', 'Link 1 edited').contains('button', 'Edit').click();
+    cy.get('aside').within(() => {
+      cy.get('#link-title').clear();
+      cy.get('#link-title').type('Link A', { delay: 0 });
+      cy.contains('button', 'Update').click();
+    });
+    cy.getByTestId('menu-save').click();
+    cy.contains('Dismiss').click();
+    cy.wait('@fetchLinks');
+  });
+
   it('should update the navigation bar with the changes', () => {
     cy.get('.menuItems > .menuNav-list > .menuNav-item')
       .should('have.length', 3)
       .then($els => Cypress.$.makeArray($els).map(el => el.innerText))
       .should('deep.equal', ['Link 3', 'Group 1  ', 'Group 2  ']);
 
     cy.get('.menuItems > .menuNav-list > .menuNav-item').eq(2).click();
-    cy.get('.dropdown-menu.expanded').contains('Link 1 edited');
+    cy.get('.dropdown-menu.expanded').contains('Link A');
   });
 
   it('tests delete', () => {
@@ -148,7 +160,7 @@ describe('Menu configuration', () => {
       cy.get('.dropdown-menu.expanded').should('be.empty');
       cy.contains('Group 2').click();
       cy.get('.dropdown-menu.expanded').within(() => {
-        cy.contains('Link 1 edited');
+        cy.contains('Link A');
       });
     });
   });

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "uwazi",
-  "version": "1.184.0-rc1",
+  "version": "1.184.0-rc2",
   "description": "Uwazi is a free, open-source solution for organising, analysing and publishing your documents.",
   "keywords": [
     "react"