feat: display library title in browser tab (#1305)

src/library-authoring/LibraryAuthoringPage.test.tsx

@@ -1,4 +1,6 @@
+import { getConfig } from '@edx/frontend-platform';
 import fetchMock from 'fetch-mock-jest';
+import { Helmet } from 'react-helmet';
 import {
   fireEvent,
   initializeMocks,
@@ -122,6 +124,10 @@ describe('<LibraryAuthoringPage />', () => {
     expect(await screen.findByText('Content library')).toBeInTheDocument();
     expect((await screen.findAllByText(libraryTitle))[0]).toBeInTheDocument();
 
+    const browserTabTitle = Helmet.peek().title.join('');
+    const siteName = getConfig().SITE_NAME;
+    expect(browserTabTitle).toEqual(`${libraryTitle} | ${siteName}`);
+
     expect(screen.queryByText('You have not added any content to this library yet.')).not.toBeInTheDocument();
 
     // "Recently Modified" header + sort shown

src/library-authoring/LibraryAuthoringPage.tsx

@@ -1,4 +1,5 @@
 import React, { useContext, useEffect } from 'react';
+import { Helmet } from 'react-helmet';
 import classNames from 'classnames';
 import { StudioFooter } from '@edx/frontend-component-footer';
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -156,6 +157,7 @@ const LibraryAuthoringPage = () => {
   return (
     <div className="d-flex">
       <div className="flex-grow-1">
+        <Helmet><title>{libraryData.title} | {process.env.SITE_NAME}</title></Helmet>
         <Header
           number={libraryData.slug}
           title={libraryData.title}