fix: missing page titles (#8477)

frontend/src/component/admin/auth/AuthSettings.tsx

@@ -12,6 +12,7 @@ import { ADMIN } from '@server/types/permissions';
 import { PremiumFeature } from 'component/common/PremiumFeature/PremiumFeature';
 import { useState } from 'react';
 import { TabPanel } from 'component/common/TabNav/TabPanel/TabPanel';
+import { usePageTitle } from 'hooks/usePageTitle';
 
 export const AuthSettings = () => {
     const { authenticationType } = useUiConfig().uiConfig;
@@ -46,6 +47,7 @@ export const AuthSettings = () => {
     }
 
     const [activeTab, setActiveTab] = useState(0);
+    usePageTitle(`Single sign-on: ${tabs[activeTab].label}`);
 
     return (
         <div>

frontend/src/component/admin/roles/RolesPage.tsx

@@ -14,6 +14,7 @@ import Add from '@mui/icons-material/Add';
 import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton';
 import type { IRole } from 'interfaces/role';
 import { TabLink } from 'component/common/TabNav/TabLink';
+import { usePageTitle } from 'hooks/usePageTitle';
 
 const StyledHeader = styled('div')(() => ({
     display: 'flex',
@@ -31,6 +32,7 @@ const StyledActions = styled('div')({
 });
 
 export const RolesPage = () => {
+    usePageTitle('Roles');
     const { pathname } = useLocation();
 
     const { roles, projectRoles, loading } = useRoles();

frontend/src/component/featureTypes/FeatureTypesList.tsx

@@ -5,7 +5,7 @@ import { sortTypes } from 'utils/sortTypes';
 import { PageContent } from 'component/common/PageContent/PageContent';
 import useFeatureTypes from 'hooks/api/getters/useFeatureTypes/useFeatureTypes';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
-import { Box, Typography } from '@mui/material';
+import { Box } from '@mui/material';
 import {
     Table,
     TableBody,
@@ -150,18 +150,7 @@ export const FeatureTypesList = () => {
     return (
         <PageContent
             isLoading={loading}
-            header={
-                <PageHeader>
-                    <Typography
-                        component='h2'
-                        sx={(theme) => ({
-                            fontSize: theme.fontSizes.mainHeader,
-                        })}
-                    >
-                        Feature flag types
-                    </Typography>
-                </PageHeader>
-            }
+            header={<PageHeader title='Feature flag types' />}
         >
             <Table {...getTableProps()}>
                 <SortableTableHeader headerGroups={headerGroups} />

frontend/src/component/insights/components/InsightsHeader/InsightsHeader.tsx

@@ -69,6 +69,7 @@ export const InsightsHeader: VFC<DashboardHeaderProps> = ({ actions }) => {
     return (
         <>
             <PageHeader
+                title='Insights'
                 titleElement={
                     <Typography
                         variant='h1'

frontend/src/component/personalDashboard/PersonalDashboard.tsx

@@ -19,6 +19,7 @@ import useSplashApi from 'hooks/api/actions/useSplashApi/useSplashApi';
 import { useAuthSplash } from 'hooks/api/getters/useAuth/useAuthSplash';
 import { useDashboardState } from './useDashboardState';
 import { MyFlags } from './MyFlags';
+import { usePageTitle } from 'hooks/usePageTitle';
 
 const WelcomeSection = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -103,9 +104,10 @@ export const PersonalDashboard = () => {
     const { trackEvent } = usePlausibleTracker();
     const { setSplashSeen } = useSplashApi();
     const { splash } = useAuthSplash();
-
     const name = user?.name;
 
+    usePageTitle(`Dashboard: ${name}`);
+
     const { personalDashboard, refetch: refetchDashboard } =
         usePersonalDashboard();
 

frontend/src/component/strategies/StrategiesList/StrategiesList.tsx

@@ -397,9 +397,10 @@ export const StrategiesList = () => {
             <PageContent
                 isLoading={loading}
                 header={
-                    <PageHeader>
-                        <PredefinedStrategyTitle />
-                    </PageHeader>
+                    <PageHeader
+                        titleElement={<PredefinedStrategyTitle />}
+                        title='Strategy types'
+                    />
                 }
             >
                 <Box>