UIEH-1575: Add Connected Tasks/Jobs to eHoldings record views.

CHANGELOG.md

@@ -21,6 +21,7 @@
 * eholdings export: Add additional package fields. (UIEH-1505)
 * Create/Edit Custom Package Detail Record: Add a new field: Package access. (UIEH-1498)
 * Update package result display to include package display name and tooltip details for package hidden settings. (UIEH-1507)
+* Add Connected Tasks/Jobs to eHoldings record views. (UIEH-1575)
 
 ## [11.1.3] (https://github.com/folio-org/ui-eholdings/tree/v11.1.3) (2026-08-12)
 

src/components/details-view/details-view.js

@@ -12,8 +12,10 @@ import {
   Icon,
   IconButton,
   Pane,
+  PaneMenu,
   Paneset,
 } from '@folio/stripes/components';
+import { Pluggable } from '@folio/stripes/core';
 import { useColumnManager } from '@folio/stripes/smart-components';
 
 import { withHistoryBack } from '../../hooks';
@@ -24,6 +26,12 @@ import styles from './details-view.css';
 
 const cx = classNames.bind(styles);
 
+const CONNECTED_RECORD_TYPES_BY_VIEW = {
+  provider: 'eholdingsProvider',
+  package: 'eholdingsPackage',
+  title: 'eholdingsTitle',
+};
+
 const propTypes = {
   accordionHeaderLoading: PropTypes.bool,
   actionMenu: PropTypes.oneOfType([
@@ -42,6 +50,7 @@ const propTypes = {
   listType: PropTypes.node,
   location: PropTypes.object.isRequired,
   model: PropTypes.shape({
+    id: PropTypes.string,
     isLoaded: PropTypes.bool,
     isLoading: PropTypes.bool,
     name: PropTypes.string,
@@ -87,7 +96,17 @@ const DetailsView = ({
     actionMenu,
     lastMenu,
     footer,
+    location,
   } = props;
+  const recordType = CONNECTED_RECORD_TYPES_BY_VIEW[type];
+
+  const connectedTasksJobsProps = recordType && {
+    recordId: model.id || '',
+    recordObject: { name: model.name },
+    recordType,
+    recordUrl: `${location.pathname}${location.search || ''}`,
+    type: 'task-list',
+  };
 
   // used to focus the heading when the model loads
   const $heading = useRef(null);
@@ -281,7 +300,15 @@ const DetailsView = ({
               {paneTitle}
             </span>
           }
-          lastMenu={lastMenu}
+          lastMenu={connectedTasksJobsProps ? (
+            <PaneMenu>
+              {lastMenu}
+              <Pluggable
+                {...connectedTasksJobsProps}
+                componentType="ConnectedTasksJobsButton"
+              />
+            </PaneMenu>
+          ) : lastMenu}
           aria-labelledby={paneTitleId}
         >
           <div
@@ -295,6 +322,12 @@ const DetailsView = ({
             }
           </div>
         </Pane>
+        {connectedTasksJobsProps && (
+          <Pluggable
+            {...connectedTasksJobsProps}
+            componentType="ConnectedTasksJobsPane"
+          />
+        )}
       </Paneset>
     </div>
   );

src/components/details-view/details-view.test.js

@@ -1,5 +1,6 @@
 import { createMemoryHistory } from 'history';
 
+import { Pluggable } from '@folio/stripes/core';
 import {
   render,
   fireEvent,
@@ -32,8 +33,8 @@ const model = {
 
 const mockGoBack = jest.fn();
 
-const getDetailView = props => (
-  <Harness>
+const getDetailView = (props, harnessProps) => (
+  <Harness {...harnessProps}>
     <DetailsView
       bodyContent={<div>Body content</div>}
       history={history}
@@ -49,15 +50,51 @@ const getDetailView = props => (
   </Harness>
 );
 
-const renderDetailsView = (props = {}) => render(
-  getDetailView(props),
+const renderDetailsView = (props = {}, harnessProps = {}) => render(
+  getDetailView(props, harnessProps),
 );
 
 describe('Given DetailsView', () => {
   const mockRenderList = jest.fn();
 
   beforeEach(() => {
     mockGoBack.mockClear();
+    Pluggable.mockClear();
+  });
+
+  [
+    ['provider', 'providers', 'eholdingsProvider'],
+    ['package', 'packages', 'eholdingsPackage'],
+    ['title', 'titles', 'eholdingsTitle'],
+  ].forEach(([type, pathSegment, recordType]) => {
+    it(`shows the Connected Tasks/Jobs button and pane for ${type}`, () => {
+      const recordId = `${type}-1`;
+      const search = '?searchType=providers&layer=connected-tasks-jobs';
+      const recordHistory = createMemoryHistory({
+        initialEntries: [`/eholdings/${pathSegment}/${recordId}${search}`],
+      });
+
+      renderDetailsView({
+        location: recordHistory.location,
+        model: { ...model, id: recordId },
+        type,
+      }, { history: recordHistory });
+
+      const pluginProps = Pluggable.mock.calls.map(([props]) => props);
+
+      ['ConnectedTasksJobsButton', 'ConnectedTasksJobsPane'].forEach(componentType => {
+        expect(pluginProps).toEqual(expect.arrayContaining([
+          expect.objectContaining({
+            componentType,
+            recordId,
+            recordObject: { name: model.name },
+            recordType,
+            recordUrl: `/eholdings/${pathSegment}/${recordId}${search}`,
+            type: 'task-list',
+          }),
+        ]));
+      });
+    });
   });
 
   it('should render DetailsView component', () => {

src/components/route-history/route-history.js

@@ -67,9 +67,9 @@ const RouteHistoryContextProvider = ({ children }) => {
 
     if (!isListenerRegistered()) {
       // don't unlisten so we can record navigation in other apps
-      history.listen((_location) => {
+      history.listen((_location, navigationAction) => {
         updateRouteHistory(routeHistory => {
-          routeHistory.unshift(_location);
+          routeHistory.unshift({ ..._location, navigationAction });
           return routeHistory;
         });
       });
@@ -103,8 +103,8 @@ const RouteHistoryContextProvider = ({ children }) => {
   }, [history]);
 
   const contextValue = {
+    getRouteHistory,
     navigateBack,
-    routeHistory: getRouteHistory(),
   };
 
   return (

src/hooks/use-history-back/getRecordCloseNavigation.js

@@ -0,0 +1,110 @@
+const isConnectedTasksJobsPaneOpen = (search = '') => (
+  new URLSearchParams(search).get('layer') === 'connected-tasks-jobs'
+);
+
+const getSearchLocation = (search = '') => {
+  const params = new URLSearchParams(search);
+
+  if (isConnectedTasksJobsPaneOpen(search)) {
+    params.delete('layer');
+  }
+
+  const nextSearch = params.toString();
+
+  return {
+    pathname: '/eholdings',
+    search: nextSearch ? `?${nextSearch}` : '',
+  };
+};
+
+// View and edit are two presentations of the same record.
+const getRecordPathname = pathname => pathname?.replace(/\/edit$/, '');
+
+const isCrossAppReturnToRecord = (historyEntries, pageIndex, recordPathname) => {
+  if (historyEntries[pageIndex].pathname?.startsWith('/eholdings')) {
+    return false;
+  }
+
+  const previousEHoldingsPage = historyEntries.slice(pageIndex + 1).find(page => (
+    page.pathname?.startsWith('/eholdings')
+  ));
+
+  return getRecordPathname(previousEHoldingsPage?.pathname) === recordPathname
+    && previousEHoldingsPage.leavingEholdings;
+};
+
+const getActiveHistoryEntries = (historyEntries) => {
+  const activeEntries = [];
+  let index = 0;
+
+  while (index < historyEntries.length) {
+    const currentIndex = index;
+    const entry = historyEntries[currentIndex];
+    let originalIndex = -1;
+
+    if (entry.navigationAction === 'POP' && entry.key) {
+      originalIndex = historyEntries.findIndex((olderEntry, olderIndex) => (
+        olderIndex > currentIndex
+        && olderEntry.key === entry.key
+        && olderEntry.navigationAction !== 'POP'
+      ));
+    }
+
+    if (originalIndex !== -1) {
+      // Visits between a POP and its original entry are no longer behind us.
+      index = originalIndex;
+    } else {
+      activeEntries.push(entry);
+      index += 1;
+    }
+  }
+
+  return activeEntries;
+};
+
+/**
+ * Returns { steps } for a known parent, { location } for the search fallback,
+ * or null when neither pane history nor a cross-app return needs special handling.
+ */
+const getRecordCloseNavigation = (historyEntries, location) => {
+  const activeHistoryEntries = getActiveHistoryEntries(historyEntries);
+  const recordPathname = getRecordPathname(location.pathname);
+
+  const parentIndex = activeHistoryEntries.findIndex((page, pageIndex) => (
+    getRecordPathname(page.pathname) !== recordPathname
+    && !isCrossAppReturnToRecord(activeHistoryEntries, pageIndex, recordPathname)
+  ));
+
+  const recordHistory = parentIndex === -1
+    ? activeHistoryEntries
+    : activeHistoryEntries.slice(0, parentIndex);
+
+  const hasConnectedPaneHistory = isConnectedTasksJobsPaneOpen(location.search)
+    || recordHistory.some(page => isConnectedTasksJobsPaneOpen(page.search));
+
+  // External pages only reach this slice after the departure record was matched.
+  const hasCrossAppReturn = recordHistory.some(page => !page.pathname?.startsWith('/eholdings'));
+
+  if (!hasConnectedPaneHistory && !hasCrossAppReturn) return null;
+
+  // REPLACE changes an existing browser entry, so only PUSH adds a step back.
+  const steps = recordHistory.filter(page => page.navigationAction === 'PUSH').length;
+
+  const canReturnToParent = activeHistoryEntries[parentIndex]?.pathname?.startsWith('/eholdings')
+    && activeHistoryEntries[0]?.pathname === location.pathname
+    && (!location.key || historyEntries[0]?.key === location.key)
+    && steps > 0
+    && recordHistory.every(page => ['PUSH', 'REPLACE'].includes(page.navigationAction));
+
+  if (canReturnToParent) {
+    return {
+      steps,
+    };
+  }
+
+  return hasConnectedPaneHistory
+    ? { location: getSearchLocation(location.search) }
+    : null;
+};
+
+export default getRecordCloseNavigation;