From 9b3529d7cb2af9bda77a64c3c141b0ebb4db451d Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Fri, 18 Oct 2024 13:12:58 +0200
Subject: [PATCH] fix: missing page titles (#8477)

---
 .../src/component/admin/auth/AuthSettings.tsx     |  2 ++
 frontend/src/component/admin/roles/RolesPage.tsx  |  2 ++
 .../component/featureTypes/FeatureTypesList.tsx   | 15 ++-------------
 .../components/InsightsHeader/InsightsHeader.tsx  |  1 +
 .../personalDashboard/PersonalDashboard.tsx       |  4 +++-
 .../strategies/StrategiesList/StrategiesList.tsx  |  7 ++++---
 6 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/frontend/src/component/admin/auth/AuthSettings.tsx b/frontend/src/component/admin/auth/AuthSettings.tsx
index 3f9629c1ed..af024707dc 100644
--- a/frontend/src/component/admin/auth/AuthSettings.tsx
+++ b/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>
diff --git a/frontend/src/component/admin/roles/RolesPage.tsx b/frontend/src/component/admin/roles/RolesPage.tsx
index 4299b0a48a..84813c8c94 100644
--- a/frontend/src/component/admin/roles/RolesPage.tsx
+++ b/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();
diff --git a/frontend/src/component/featureTypes/FeatureTypesList.tsx b/frontend/src/component/featureTypes/FeatureTypesList.tsx
index 6190f78740..2d9f3953bc 100644
--- a/frontend/src/component/featureTypes/FeatureTypesList.tsx
+++ b/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} />
diff --git a/frontend/src/component/insights/components/InsightsHeader/InsightsHeader.tsx b/frontend/src/component/insights/components/InsightsHeader/InsightsHeader.tsx
index 7a2dee00e2..b9e5e07ac1 100644
--- a/frontend/src/component/insights/components/InsightsHeader/InsightsHeader.tsx
+++ b/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'
diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
index 21a1c998f3..bba512e019 100644
--- a/frontend/src/component/personalDashboard/PersonalDashboard.tsx
+++ b/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();
 
diff --git a/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx b/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx
index 0ee82dba8e..06593e98e0 100644
--- a/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx
+++ b/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>