UIEXPMGR-105: Update HTML Page Title on Export Manager Tabs Page

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## (IN PROGRESS)
 
+* Update HTML Page Title on Export Manager Tabs Page. Refs UIEXPMGR-105.
+
 ## [3.1.0](https://github.com/folio-org/ui-export-manager/tree/v3.1.0) (2024-03-19)
 [Full Changelog](https://github.com/folio-org/ui-export-manager/compare/v3.0.0...v3.1.0)
 

src/ExportEdiJobs/ExportEdiJobs.js

@@ -6,6 +6,9 @@ import {
 } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 
+import {
+  TitleManager,
+} from '@folio/stripes/core';
 import {
   Paneset,
 } from '@folio/stripes/components';
@@ -53,8 +56,9 @@ export const ExportEdiJobs = () => {
   } = useExportEdiJobsQuery(location.search, pagination, filters);
 
   return (
-    <Paneset>
-      {
+    <TitleManager record={formatMessage({ id: 'ui-export-manager.title.organizations' })}>
+      <Paneset>
+        {
         isFiltersOpened && (
           <FiltersPane
             toggleFilters={toggleFilters}
@@ -84,39 +88,40 @@ export const ExportEdiJobs = () => {
         )
       }
 
-      <ResultsPane
-        title={formatMessage({ id: 'ui-export-manager.exportJobs' })}
-        count={totalCount}
-        filters={filters}
-        toggleFiltersPane={toggleFilters}
-        isFiltersOpened={isFiltersOpened}
-        isLoading={isLoading}
-        autosize
-      >
-        {(({ height, width }) => (
-          <ExportEdiJobsList
-            isLoading={isLoading}
-            onNeedMoreData={changePage}
-            exportJobs={exportEdiJobs}
-            totalCount={totalCount}
-            filters={filters}
-            isFiltersOpened={isFiltersOpened}
-            toggleFilters={toggleFilters}
-            height={height}
-            width={width}
-            pagination={pagination}
-          />
-        ))}
-      </ResultsPane>
+        <ResultsPane
+          title={formatMessage({ id: 'ui-export-manager.exportJobs' })}
+          count={totalCount}
+          filters={filters}
+          toggleFiltersPane={toggleFilters}
+          isFiltersOpened={isFiltersOpened}
+          isLoading={isLoading}
+          autosize
+        >
+          {(({ height, width }) => (
+            <ExportEdiJobsList
+              isLoading={isLoading}
+              onNeedMoreData={changePage}
+              exportJobs={exportEdiJobs}
+              totalCount={totalCount}
+              filters={filters}
+              isFiltersOpened={isFiltersOpened}
+              toggleFilters={toggleFilters}
+              height={height}
+              width={width}
+              pagination={pagination}
+            />
+          ))}
+        </ResultsPane>
 
-      {
+        {
         Boolean(params.id) && (
           <ExportEdiJobDetails
             refetchJobs={refetch}
             uuid={params.id}
           />
         )
       }
-    </Paneset>
+      </Paneset>
+    </TitleManager>
   );
 };

src/ExportEdiJobs/ExportEdiJobs.test.js

@@ -7,6 +7,11 @@ import { runAxeTest } from '@folio/stripes-testing';
 import { useExportEdiJobsQuery } from './apiQuery';
 import { ExportEdiJobs } from './ExportEdiJobs';
 
+jest.mock('@folio/stripes/core', () => ({
+  ...jest.requireActual('@folio/stripes/core'),
+  TitleManager: ({ children }) => <>{children}</>,
+}), { virtual: true });
+
 jest.mock('react-virtualized-auto-sizer', () => {
   return jest.fn(({ children }) => <div>{children({})}</div>);
 });

src/ExportJobs/ExportJobs.js

@@ -6,6 +6,9 @@ import {
 } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 
+import {
+  TitleManager,
+} from '@folio/stripes/core';
 import {
   Paneset,
 } from '@folio/stripes/components';
@@ -54,8 +57,9 @@ export const ExportJobs = () => {
   } = useExportJobsQuery(location.search, pagination, filters);
 
   return (
-    <Paneset>
-      {
+    <TitleManager record={formatMessage({ id: 'ui-export-manager.title.all' })}>
+      <Paneset>
+        {
         isFiltersOpened && (
           <FiltersPane
             toggleFilters={toggleFilters}
@@ -85,36 +89,37 @@ export const ExportJobs = () => {
         )
       }
 
-      <ResultsPane
-        title={formatMessage({ id: 'ui-export-manager.exportJobs' })}
-        count={totalCount}
-        autosize
-        filters={filters}
-        toggleFiltersPane={toggleFilters}
-        isFiltersOpened={isFiltersOpened}
-        isLoading={isLoading}
-      >
-        {(({ height, width }) => (
-          <ExportJobsList
-            isLoading={isLoading}
-            onNeedMoreData={changePage}
-            exportJobs={exportJobs}
-            totalCount={totalCount}
-            filters={filters}
-            isFiltersOpened={isFiltersOpened}
-            toggleFilters={toggleFilters}
-            pagination={pagination}
-            height={height}
-            width={width}
-          />
-        ))}
-      </ResultsPane>
+        <ResultsPane
+          title={formatMessage({ id: 'ui-export-manager.exportJobs' })}
+          count={totalCount}
+          autosize
+          filters={filters}
+          toggleFiltersPane={toggleFilters}
+          isFiltersOpened={isFiltersOpened}
+          isLoading={isLoading}
+        >
+          {(({ height, width }) => (
+            <ExportJobsList
+              isLoading={isLoading}
+              onNeedMoreData={changePage}
+              exportJobs={exportJobs}
+              totalCount={totalCount}
+              filters={filters}
+              isFiltersOpened={isFiltersOpened}
+              toggleFilters={toggleFilters}
+              pagination={pagination}
+              height={height}
+              width={width}
+            />
+          ))}
+        </ResultsPane>
 
-      {
+        {
         Boolean(params.id) && (
           <ExportJob uuid={params.id} />
         )
       }
-    </Paneset>
+      </Paneset>
+    </TitleManager>
   );
 };

src/ExportJobs/ExportJobs.test.js

@@ -10,6 +10,11 @@ import '@folio/stripes-acq-components/test/jest/__mock__';
 import { useExportJobsQuery } from './apiQuery';
 import { ExportJobs } from './ExportJobs';
 
+jest.mock('@folio/stripes/core', () => ({
+  ...jest.requireActual('@folio/stripes/core'),
+  TitleManager: ({ children }) => <>{children}</>,
+}), { virtual: true });
+
 jest.mock('react-virtualized-auto-sizer', () => {
   return jest.fn(({ children }) => <div>{children({})}</div>);
 });

translations/ui-export-manager/en.json

@@ -1,5 +1,7 @@
 {
   "meta.title": "Export manager",
+  "title.all": "All",
+  "title.organizations": "Organizations",
 
   "exportJobs": "Export jobs",
   "exportJobs.search": "Search",