Added React-Helmet for titles and wrote tests

src/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+  "plugins": []
+}

src/assets/src/components/addQueue.tsx

@@ -12,7 +12,8 @@ import { QueueHost, User } from "../models";
 import * as api from "../services/api";
 import { recordQueueManagementEvent, redirectToLogin } from "../utils";
 import { confirmUserExists, queueDescriptSchema, queueNameSchema, queueLocationSchema } from "../validation";
-
+import { Helmet } from 'react-helmet';
+import { getPageTitle } from './titleUtils';
 
 enum AvailableTabs {
     General = 'general',
@@ -225,6 +226,9 @@ export function AddQueuePage(props: PageProps) {
 
     return (
         <div>
+            <Helmet>
+                <title>{getPageTitle('Add Queue')}</title>
+            </Helmet>
             <LoginDialog visible={loginDialogVisible} loginUrl={props.loginUrl} />
             <Breadcrumbs
                 intermediatePages={[{ title: 'Manage', href: '/manage/' }]}

src/assets/src/components/home.tsx

@@ -3,6 +3,8 @@ import { useState } from "react";
 import { MyUser } from "../models";
 import { Link } from "react-router-dom";
 import { Button, Col, Form, InputGroup, Row } from "react-bootstrap";
+import { Helmet } from 'react-helmet';
+import { getPageTitle } from './titleUtils';
 
 import { ErrorDisplay, FormError, JoinedQueueAlert, Breadcrumbs } from "./common";
 import { PageProps } from "./page";
@@ -64,6 +66,9 @@ export function HomePage(props: PageProps) {
         );
     return (
         <div>
+            <Helmet>
+                <title>{getPageTitle('Office Hours')}</title>
+            </Helmet>
             <Breadcrumbs currentPageTitle="Home" />
             <div>
                 {errorDisplay}
@@ -72,4 +77,4 @@ export function HomePage(props: PageProps) {
             </div>
         </div>
     );
-}
+}

src/assets/src/components/manage.tsx

@@ -2,6 +2,8 @@ import * as React from "react";
 import { useState } from "react";
 import { Link } from "react-router-dom";
 import { Button } from "react-bootstrap";
+import { Helmet } from 'react-helmet';
+import { getPageTitle } from './titleUtils';
 
 import { Breadcrumbs, checkForbiddenError, ErrorDisplay, FormError, LoginDialog, QueueTable } from "./common";
 import { PageProps } from "./page";
@@ -47,6 +49,9 @@ export function ManagePage(props: PageProps) {
         && <ManageQueueTable queues={queues} disabled={false}/>
     return (
         <div>
+            <Helmet>
+                <title>{getPageTitle('Manage')}</title>
+            </Helmet>
             <LoginDialog visible={loginDialogVisible} loginUrl={props.loginUrl} />
             <Breadcrumbs currentPageTitle="Manage"/>
             {errorDisplay}

src/assets/src/components/preferences.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { useState, useEffect } from "react";
 import { Alert, Button, Form, FormGroup } from "react-bootstrap";
 import PhoneInput from "react-phone-input-2";
-import 'react-phone-input-2/lib/bootstrap.css'
+import 'react-phone-input-2/lib/bootstrap.css';
 
 import * as api from "../services/api";
 import { MyUser } from "../models";
@@ -11,6 +11,8 @@ import { usePromise } from "../hooks/usePromise";
 import { redirectToLogin } from "../utils";
 import { PageProps } from "./page";
 import { validatePhoneNumber } from "../validation";
+import { Helmet } from 'react-helmet';
+import { getPageTitle } from './titleUtils';
 
 interface PreferencesEditorProps {
     user: MyUser;
@@ -167,6 +169,9 @@ export function PreferencesPage(props: PageProps) {
         );
     return (
         <>
+            <Helmet>
+                <title>{getPageTitle('Preferences')}</title>
+            </Helmet>
             <LoginDialog visible={loginDialogVisible} loginUrl={props.loginUrl} />
             <Breadcrumbs currentPageTitle='User Preferences' />
             {errorDisplay}

src/assets/src/components/queue.tsx

@@ -21,7 +21,8 @@ import * as api from "../services/api";
 import { useQueueWebSocket, useUserWebSocket } from "../services/sockets";
 import { addMeetingAutoAssigned, redirectToLogin } from "../utils";
 import { meetingAgendaSchema } from "../validation";
-
+import { Helmet } from 'react-helmet';
+import { getPageTitle } from './titleUtils';
 
 interface JoinQueueProps {
     queue: QueueAttendee;
@@ -574,6 +575,9 @@ export function QueuePage(props: PageProps) {
             onChangeBackend={setSelectedBackend}/>
     return (
         <div>
+            <Helmet>
+                <title>{getPageTitle('Queue')}</title>
+            </Helmet>
             <Dialog {...dialogState} />
             <LoginDialog visible={loginDialogVisible} loginUrl={props.loginUrl}/>
             {meetingTypeDialog}

src/assets/src/components/queueManager.tsx

@@ -24,7 +24,8 @@ import * as api from "../services/api";
 import { useQueueWebSocket, useUserWebSocket } from "../services/sockets";
 import { addMeetingAutoAssigned, checkBackendAuth, recordQueueManagementEvent, redirectToLogin } from "../utils";
 import { confirmUserExists, uniqnameSchema } from "../validation";
-
+import { Helmet } from 'react-helmet';
+import { getPageTitle } from './titleUtils';
 
 interface AddAttendeeFormProps {
     allowedBackends: Set<string>;
@@ -350,6 +351,9 @@ export function QueueManagerPage(props: PageProps) {
         );
     return (
         <>
+            <Helmet>
+                <title>{getPageTitle('Manage Queue')}</title>
+            </Helmet>
             <Dialog {...dialogState} />
             <LoginDialog visible={loginDialogVisible} loginUrl={props.loginUrl} />
             <MeetingInfoDialog backends={props.backends} meeting={visibleMeetingDialog} onClose={() => setVisibleMeetingDialog(undefined)} />