fix: missing page titles

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

@@ -31,6 +31,7 @@ import { Badge } from 'component/common/Badge/Badge';
 import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
 import { CustomStrategyInfo } from '../CustomStrategyInfo/CustomStrategyInfo';
 import { AddStrategyButton } from './AddStrategyButton/AddStrategyButton';
+import { usePageTitle } from 'hooks/usePageTitle';
 
 interface IDialogueMetaData {
     show: boolean;
@@ -100,15 +101,19 @@ const CustomStrategyTitle: FC = () => (
     </Box>
 );
 
-const PredefinedStrategyTitle = () => (
-    <Box>
-        <Subtitle
-            title='Predefined strategies'
-            description='Activation strategies let you enable a feature only for a specified audience. Different strategies use different parameters. Predefined strategies are bundled with Unleash.'
-            link='https://docs.getunleash.io/reference/activation-strategies'
-        />
-    </Box>
-);
+const PredefinedStrategyTitle = () => {
+    usePageTitle('Strategy types');
+
+    return (
+        <Box>
+            <Subtitle
+                title='Predefined strategies'
+                description='Activation strategies let you enable a feature only for a specified audience. Different strategies use different parameters. Predefined strategies are bundled with Unleash.'
+                link='https://docs.getunleash.io/reference/activation-strategies'
+            />
+        </Box>
+    );
+};
 
 const StrategyDeprecationWarning = () => (
     <Alert severity='warning' sx={{ mb: 2 }}>