UICAL-272: Added TitleManager component to views to add html page tit…

…les (#502) * Added TitleManager component to views to add html page titles * Updated imports of TitleManager and added withIntlConfiguration to renders in test * Changed conditional logic of '??' for null coalescence over '||' * Update import of TitleManager * Add typing for TitleManager * Updated 'React.Component' to 'FunctionComponent' * Added stripes prop to TitleManager --------- Co-authored-by: Noah Overcash <[email protected]>
folio-org · Nov 28, 2023 · 291a165 · 291a165
1 parent 10bac7a
commit 291a165
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 23 deletions.
diff --git a/src/typings/stripes/core.d.ts b/src/typings/stripes/core.d.ts
@@ -1,5 +1,6 @@
 import type ky from 'ky';
 import type { Context, FunctionComponent, ReactNode } from 'react';
+import React from 'react';
 
 export type CalloutContextType = {
   sendCallout: (args: {
@@ -12,6 +13,9 @@ export const CalloutContext: Context<CalloutContextType>;
 
 export interface StripesType {
   hasPerm: (perm: string) => boolean;
+  config?: {
+    platformName?: string;
+  };
 }
 
 export function useStripes(): StripesType;
@@ -21,6 +25,14 @@ export const IfPermission: FunctionComponent<{
   children: ReactNode | ((props: { hasPermission: boolean }) => ReactNode);
 }>;
 
+export const TitleManager: FunctionComponent<{
+  children?: ReactNode;
+  prefix?: string;
+  page?: string;
+  record?: string;
+  stripes?: StripesType;
+}>;
+
 export function useOkapiKy(): typeof ky;
 
 export as namespace STCOR;
diff --git a/src/views/AllCalendarView.tsx b/src/views/AllCalendarView.tsx
@@ -5,7 +5,7 @@ import {
   MenuSection,
   Pane
 } from '@folio/stripes/components';
-import { IfPermission, useStripes } from '@folio/stripes/core';
+import { IfPermission, useStripes, TitleManager } from '@folio/stripes/core';
 import React, { FunctionComponent, ReactNode, useRef, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import {
@@ -69,8 +69,18 @@ const AllCalendarView: FunctionComponent<Record<string, never>> = () => {
     };
   });
 
+  const calendarName = dataRepository
+    .getCalendars()
+    .filter((c) => c.id === currentRouteId)[0]?.name;
+
+  const pageTitle = intl.formatMessage({ id: 'ui-calendar.meta.titleSettings' }) +
+  ' - ' + intl.formatMessage({
+    id: 'ui-calendar.allCalendarView.title'
+  }) + (calendarName ? ` - ${calendarName}` : '');
+
+
   return (
-    <>
+    <TitleManager page={pageTitle} stripes={stripes}>
       <Pane
         defaultWidth={currentRouteId === undefined ? 'fill' : '20%'}
         paneTitle={<FormattedMessage id="ui-calendar.allCalendarView.title" />}
@@ -214,7 +224,7 @@ const AllCalendarView: FunctionComponent<Record<string, never>> = () => {
         open={showPurgeModal}
         onClose={() => setShowPurgeModal(false)}
       />
-    </>
+    </TitleManager>
   );
 };
 

diff --git a/src/views/CalendarSettings.test.tsx b/src/views/CalendarSettings.test.tsx
@@ -2,10 +2,13 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { SettingsProps } from '@folio/stripes/smart-components';
 import CalendarSettings from './CalendarSettings';
+import withIntlConfiguration from '../test/util/withIntlConfiguration';
 
 jest.mock('@folio/stripes-smart-components/lib/Settings', () => jest.fn().mockReturnValue('Settings'));
 
-const renderCalendarSettings = () => render(<CalendarSettings {...({} as unknown as SettingsProps)} />);
+const renderCalendarSettings = () => render(withIntlConfiguration(
+  <CalendarSettings {...({} as unknown as SettingsProps)} />
+));
 
 describe('Calender Settings', () => {
   it('should render Calendar Settings', () => {

diff --git a/src/views/CalendarSettings.tsx b/src/views/CalendarSettings.tsx
@@ -1,7 +1,8 @@
 import { ErrorBoundary } from '@folio/stripes/components';
 import { Settings, SettingsProps } from '@folio/stripes/smart-components';
 import React, { FunctionComponent } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { TitleManager, useStripes } from '@folio/stripes/core';
 import AllCalendarView from './AllCalendarView';
 import CurrentAssignmentView from './CurrentAssignmentView';
 import MonthlyCalendarPickerView from './MonthlyCalendarPickerView';
@@ -14,6 +15,10 @@ export type CalendarSettingsProps = Omit<
 export const CalendarSettings: FunctionComponent<CalendarSettingsProps> = (
   props: CalendarSettingsProps
 ) => {
+  const intl = useIntl();
+  const stripes = useStripes();
+  const paneTitle = intl.formatMessage({ id: 'ui-calendar.meta.titleSettings' });
+
   return (
     <ErrorBoundary>
       <Settings
@@ -22,7 +27,11 @@ export const CalendarSettings: FunctionComponent<CalendarSettingsProps> = (
         pages={[
           {
             route: 'all/',
-            label: <FormattedMessage id="ui-calendar.allCalendarView.title" />,
+            label: (
+              <TitleManager page={paneTitle} stripes={stripes}>
+                <FormattedMessage id="ui-calendar.allCalendarView.title" />
+              </TitleManager>
+            ),
             component: AllCalendarView,
             perm: 'ui-calendar.view'
           },

diff --git a/src/views/CreateEditCalendarLayer.tsx b/src/views/CreateEditCalendarLayer.tsx
@@ -7,6 +7,7 @@ import {
   PaneFooter,
   Paneset,
 } from '@folio/stripes/components';
+import { TitleManager, useStripes } from '@folio/stripes/core';
 import React, { FunctionComponent, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import DataRepository from '../data/DataRepository';
@@ -40,6 +41,7 @@ export const CreateEditCalendarLayer: FunctionComponent<
   CreateEditCalendarLayerProps
 > = (props: CreateEditCalendarLayerProps) => {
   const intl = useIntl();
+  const stripes = useStripes();
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
   const [submitAttempted, setSubmitAttempted] = useState<boolean>(false);
 
@@ -109,18 +111,28 @@ export const CreateEditCalendarLayer: FunctionComponent<
     );
   }
 
+  const pageTitle = intl.formatMessage({ id: 'ui-calendar.meta.titleSettings' }) +
+  ' - ' + intl.formatMessage({
+    id:
+      getOpType(props.initialValue, props.isEdit) === OpType.EDIT
+        ? 'ui-calendar.calendarForm.title.edit'
+        : 'ui-calendar.calendarForm.title.create',
+  });
+
   return (
-    <Layer
-      contentLabel={intl.formatMessage({
-        id:
-          getOpType(props.initialValue, props.isEdit) === OpType.EDIT
-            ? 'ui-calendar.calendarForm.title.edit'
-            : 'ui-calendar.calendarForm.title.create',
-      })}
-      isOpen
-    >
-      <Paneset isRoot>{pane}</Paneset>
-    </Layer>
+    <TitleManager page={pageTitle} stripes={stripes}>
+      <Layer
+        contentLabel={intl.formatMessage({
+          id:
+            getOpType(props.initialValue, props.isEdit) === OpType.EDIT
+              ? 'ui-calendar.calendarForm.title.edit'
+              : 'ui-calendar.calendarForm.title.create',
+        })}
+        isOpen
+      >
+        <Paneset isRoot>{pane}</Paneset>
+      </Layer>
+    </TitleManager>
   );
 };
 export default CreateEditCalendarLayer;
diff --git a/src/views/CurrentAssignmentView.tsx b/src/views/CurrentAssignmentView.tsx
@@ -1,5 +1,5 @@
 import { Button, LoadingPane, Pane, PaneMenu } from '@folio/stripes/components';
-import { IfPermission } from '@folio/stripes/core';
+import { IfPermission, TitleManager, useStripes } from '@folio/stripes/core';
 import React, { FunctionComponent, ReactNode, useRef } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import {
@@ -29,12 +29,13 @@ export const CurrentAssignmentView: FunctionComponent<
   const intl = useIntl();
   const localeWeekdays = useLocaleWeekdays(intl);
   const dataRepository = useDataRepository();
+  const stripes = useStripes();
 
   const showCreateLayerButtonRef = useRef<HTMLButtonElement>(null);
   const history = useHistory();
   const currentRouteId = useRouteMatch<{ servicePointId: string }>(
     '/settings/calendar/active/:servicePointId'
-  )?.params?.servicePointId;
+  )?.params?.servicePointId ?? '';
 
   if (!dataRepository.isLoaded()) {
     return (
@@ -92,8 +93,14 @@ export const CurrentAssignmentView: FunctionComponent<
     };
   });
 
+  const calendarName = dataRepository.getCalendars().filter((c) => c.assignments.includes(currentRouteId))[0]?.name ?? '';
+
+  const pageTitle = intl.formatMessage({ id: 'ui-calendar.meta.titleSettings' }) + ' - ' + intl.formatMessage({
+    id: 'ui-calendar.currentAssignmentView.title'
+  }) + (calendarName ? ` - ${calendarName}` : '');
+
   return (
-    <>
+    <TitleManager page={pageTitle} stripes={stripes}>
       <Pane
         paneTitle={
           <FormattedMessage id="ui-calendar.currentAssignmentView.title" />
@@ -226,7 +233,7 @@ export const CurrentAssignmentView: FunctionComponent<
           />
         </Route>
       </Switch>
-    </>
+    </TitleManager>
   );
 };
 

diff --git a/src/views/MonthlyCalendarPickerView.tsx b/src/views/MonthlyCalendarPickerView.tsx
@@ -7,6 +7,7 @@ import {
   NavListSection,
   Pane
 } from '@folio/stripes/components';
+import { TitleManager, useStripes } from '@folio/stripes/core';
 import classNames from 'classnames';
 import React, {
   FunctionComponent,
@@ -95,6 +96,7 @@ const MonthlyCalendarPickerView: FunctionComponent<
   Record<string, never>
 > = () => {
   const intl = useIntl();
+  const stripes = useStripes();
   const dataRepository = useDataRepository();
   const [events, setEvents] = useState<
     Record<string, Record<string, ReactNode>>
@@ -166,8 +168,13 @@ const MonthlyCalendarPickerView: FunctionComponent<
     );
   });
 
+  const pageTitle = intl.formatMessage({ id: 'ui-calendar.meta.titleSettings' }) +
+  ' - ' + intl.formatMessage({
+    id: 'ui-calendar.monthlyCalendarView.title'
+  }) + (currentRouteId ? ` - ${getServicePoint?.name}` : '');
+
   return (
-    <>
+    <TitleManager page={pageTitle} stripes={stripes}>
       <Pane
         defaultWidth={currentRouteId === undefined ? 'fill' : '20%'}
         paneTitle={
@@ -190,7 +197,7 @@ const MonthlyCalendarPickerView: FunctionComponent<
           requestEvents={requestEvents}
         />
       </Route>
-    </>
+    </TitleManager>
   );
 };
 

diff --git a/translations/ui-calendar/en.json b/translations/ui-calendar/en.json
@@ -1,5 +1,6 @@
 {
   "meta.title": "Calendar",
+  "meta.titleSettings": "Calendar settings",
 
   "midnight": "Midnight",