UISAUTCOMP-135: useAutoOpenDetailView - block auto-open on mount if record id exists in URL.

Author: Dmytro-Melnyshyn

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change history for stripes-authoriy-components
 
+## [5.0.3] (IN PROGRESS)
+
+- [UISAUTCOMP-135](https://issues.folio.org/browse/UISAUTCOMP-135) `useAutoOpenDetailView` - block auto-open on mount if record id exists in URL.
+
 ## [5.0.2] (https://github.com/folio-org/stripes-authority-components/tree/v5.0.2) (2024-12-10)
 
 - [UISAUTCOMP-133](https://issues.folio.org/browse/UISAUTCOMP-133) Handle uncaught error when a search request fails.

lib/hooks/useAutoOpenDetailView/useAutoOpenDetailView.js

@@ -17,6 +17,15 @@ import { AuthoritiesSearchContext } from '../../context';
 const useAutoOpenDetailView = (authorities, onOpenDetailView, isLoading = false, urlAuthorityId = '') => {
   const { navigationSegmentValue } = useContext(AuthoritiesSearchContext);
   const prevOpenedSingleAuthority = useRef(null);
+  const isBlockOnMount = useRef(false);
+
+  useEffect(() => {
+    // block auto-opening on page reload and redirection from quick marc.
+    if (urlAuthorityId) {
+      isBlockOnMount.current = true;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   useEffect(() => {
     // do nothing during loading, to be able to correctly compare the previously opened record with the current one.
@@ -32,14 +41,10 @@ const useAutoOpenDetailView = (authorities, onOpenDetailView, isLoading = false,
     if (navigationSegmentValue === navigationSegments.browse) {
       isDetailViewNeedsToBeOpen = authority?.isAnchor && authority?.isExactMatch;
     } else {
-      // Check the record id so that when the third pane has a single record open and the user creates a record
-      // on a different route and then is redirected back to the third pane, then the third pane should contain
-      // the newly created record instead of the previously opened one.
-      if (urlAuthorityId) {
-        // A single record can be opened in two ways: when reloading the page with opened single record and when all
-        // the conditions for auto-opening a single record are met. So let's save the record for both cases. This will
-        // be used to compare the previously opened record with the current one.
+      if (isBlockOnMount.current) {
+        // record should be stored to avoid auto-opening after closing the third pane.
         prevOpenedSingleAuthority.current = authority;
+        isBlockOnMount.current = false;
         return;
       }
 
@@ -53,7 +58,7 @@ const useAutoOpenDetailView = (authorities, onOpenDetailView, isLoading = false,
       prevOpenedSingleAuthority.current = authority;
       onOpenDetailView(authority);
     }
-  }, [authorities, navigationSegmentValue, onOpenDetailView, urlAuthorityId, isLoading]);
+  }, [authorities, navigationSegmentValue, onOpenDetailView, isLoading]);
 };
 
 export default useAutoOpenDetailView;

lib/hooks/useAutoOpenDetailView/useAutoOpenDetailView.test.js

@@ -49,6 +49,66 @@ describe('useAutoOpenDetailView hook', () => {
     });
 
     describe('when there is a record ID in URL', () => {
+      describe('and it is mount (page reload or redirection from quick marc)', () => {
+        it('should not open record`s detail view', async () => {
+          const isLoading = true;
+          const urlAuthorityId = 'fake-id';
+
+          const initialProps = [[], openDetailView, isLoading, urlAuthorityId];
+
+          const { rerender } = renderHook(_initialProps => useAutoOpenDetailView(..._initialProps), {
+            wrapper: Wrapper,
+            initialProps,
+          });
+
+          rerender([
+            [authorities[0]],
+            openDetailView,
+            false,
+            urlAuthorityId,
+          ]);
+
+          expect(openDetailView).not.toHaveBeenCalled();
+        });
+      });
+
+      describe('and closing the opened single record', () => {
+        it('should not reopen record`s detail view', () => {
+          const isLoading = true;
+          const urlAuthorityId = 'fake-id';
+
+          const initialProps = [
+            [],
+            openDetailView,
+            isLoading,
+            urlAuthorityId,
+          ];
+
+          const { rerender } = renderHook(_initialProps => useAutoOpenDetailView(..._initialProps), {
+            initialProps,
+            wrapper: Wrapper,
+          });
+
+          rerender([
+            [authorities[0]],
+            openDetailView,
+            false,
+            urlAuthorityId,
+          ]);
+
+          const _urlAuthorityId = null;
+
+          rerender([
+            [authorities[0]],
+            openDetailView,
+            false,
+            _urlAuthorityId,
+          ]);
+
+          expect(openDetailView).not.toHaveBeenCalled();
+        });
+      });
+
       it('should not open record`s detail view', () => {
         const isLoading = false;
         const urlAuthorityId = 'fake-id';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@folio/stripes-authority-components",
-  "version": "5.0.2",
+  "version": "5.0.3",
   "description": "Component library for Stripes Authority modules",
   "repository": "https://github.com/folio-org/stripes-authority-components",
   "main": "index.js",