UIORGS-421 UX Consistency > Search results > Update HTML page title w…

…ith search term entered

CHANGELOG.md

@@ -16,6 +16,7 @@
 * Add validation for `Day` field in `Monthly` scheduler for export method. Refs UIORGS-417.
 * Support `data-export-spring` interface `v2.0`. Refs UXPROD-3903.
 * Accurately handle user permissions for banking information operations. Refs UIORGS-424.
+* UX Consistency > Search results > Update HTML page title with search term entered. Refs UIORGS-421.
 
 ## [5.0.0](https://github.com/folio-org/ui-organizations/tree/v5.0.0) (2023-10-12)
 [Full Changelog](https://github.com/folio-org/ui-organizations/compare/v4.0.0...v5.0.0)

src/Organizations/OrganizationsList/OrganizationsList.js

@@ -6,15 +6,21 @@ import {
   useHistory,
   useLocation,
 } from 'react-router-dom';
-import { FormattedMessage } from 'react-intl';
+import {
+  FormattedMessage,
+  useIntl,
+} from 'react-intl';
 
 import {
   checkScope,
   HasCommand,
   MultiColumnList,
   TextLink,
 } from '@folio/stripes/components';
-import { useStripes } from '@folio/stripes/core';
+import {
+  TitleManager,
+  useStripes,
+} from '@folio/stripes/core';
 import { PersistedPaneset } from '@folio/stripes/smart-components';
 import {
   RESULT_COUNT_INCREMENT,
@@ -23,6 +29,7 @@ import {
   NoResultsMessage,
   ResetButton,
   ResultsPane,
+  SEARCH_PARAMETER,
   SingleSearchForm,
   PrevNextPagination,
   useFiltersReset,
@@ -81,6 +88,7 @@ const OrganizationsList = ({
   resultsPaneTitleRef,
   pagination,
 }) => {
+  const intl = useIntl();
   const stripes = useStripes();
   const history = useHistory();
   const location = useLocation();
@@ -147,12 +155,16 @@ const OrganizationsList = ({
 
   const { itemToView, setItemToView, deleteItemToView } = useItemToView('organizations-list');
 
+  const queryFilter = filters?.[SEARCH_PARAMETER];
+  const pageTitle = queryFilter ? intl.formatMessage({ id: 'ui-organizations.document.title.search' }, { query: queryFilter }) : null;
+
   return (
     <HasCommand
       commands={shortcuts}
       isWithinScope={checkScope}
       scope={document.body}
     >
+      <TitleManager page={pageTitle} />
       <PersistedPaneset
         appId="ui-organizations"
         id="organizations-paneset"

translations/ui-organizations/en.json

@@ -1,6 +1,7 @@
 {
   "meta.title": "Organizations",
   "appMenu.organizationsAppSearch": "Organizations app Search",
+  "document.title.search": "Organizations - {query} - Search",
   "search": "Search",
   "resultCount": "{count, number} {count, plural, one {Record found} other {Records found}}",
   "showMore": "Show more",