SONAR-18768 align the format of all page titles

24 files changed, 291 insertions, 197 deletions

diff --git a/server/sonar-web/src/main/js/app/components/ComponentContainer.tsx b/server/sonar-web/src/main/js/app/components/ComponentContainer.tsx
index acaab01d1d5..bddd03d7ae9 100644
--- a/server/sonar-web/src/main/js/app/components/ComponentContainer.tsx
+++ b/server/sonar-web/src/main/js/app/components/ComponentContainer.tsx
@@ -19,6 +19,7 @@
  */
 import { differenceBy } from 'lodash';
 import * as React from 'react';
+import { Helmet } from 'react-helmet-async';
 import { Outlet } from 'react-router-dom';
 import { getProjectAlmBinding, validateProjectAlmBinding } from '../../api/alm-settings';
 import { getBranches, getPullRequests } from '../../api/branches';
@@ -32,6 +33,7 @@ import {
   isMainBranch,
   isPullRequest,
 } from '../../helpers/branch-like';
+import { translateWithParameters } from '../../helpers/l10n';
 import { HttpStatus } from '../../helpers/request';
 import { getPortfolioUrl } from '../../helpers/urls';
 import {
@@ -435,6 +437,13 @@ export class ComponentContainer extends React.PureComponent<Props, State> {
 
     return (
       <div>
+        <Helmet
+          defer={false}
+          titleTemplate={translateWithParameters(
+            'page_title.template.with_instance',
+            component?.name ?? ''
+          )}
+        />
         {component &&
           !([ComponentQualifier.File, ComponentQualifier.TestFile] as string[]).includes(
             component.qualifier
diff --git a/server/sonar-web/src/main/js/app/components/FormattingHelp.tsx b/server/sonar-web/src/main/js/app/components/FormattingHelp.tsx
index a9fce3615a6..c0b76ebc373 100644
--- a/server/sonar-web/src/main/js/app/components/FormattingHelp.tsx
+++ b/server/sonar-web/src/main/js/app/components/FormattingHelp.tsx
@@ -18,10 +18,13 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { Helmet } from 'react-helmet-async';
+import { translate } from '../../helpers/l10n';
 
 export default function FormattingHelp() {
   return (
     <div className="page page-limited">
+      <Helmet defer={false} title={translate('formatting.page')} />
       <h2 className="spacer-bottom">Formatting Syntax</h2>
       <table className="width-100 data zebra">
         <thead>
diff --git a/server/sonar-web/src/main/js/app/components/PluginRiskConsent.tsx b/server/sonar-web/src/main/js/app/components/PluginRiskConsent.tsx
index 8a3f34b42f6..3b6bb89fc8e 100644
--- a/server/sonar-web/src/main/js/app/components/PluginRiskConsent.tsx
+++ b/server/sonar-web/src/main/js/app/components/PluginRiskConsent.tsx
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { Helmet } from 'react-helmet-async';
 import { setSimpleSettingValue } from '../../api/settings';
 import { Button } from '../../components/controls/buttons';
 import { whenLoggedIn } from '../../components/hoc/whenLoggedIn';
@@ -67,6 +68,7 @@ export function PluginRiskConsent(props: PluginRiskConsentProps) {
 
   return (
     <div className="plugin-risk-consent-page">
+      <Helmet defer={false} title={translate('plugin_risk_consent.page')} />
       <div className="plugin-risk-consent-content boxed-group">
         <div className="boxed-group-inner text-center">
           <h1 className="big-spacer-bottom">{translate('plugin_risk_consent.title')}</h1>
diff --git a/server/sonar-web/src/main/js/app/components/ResetPassword.tsx b/server/sonar-web/src/main/js/app/components/ResetPassword.tsx
index 0544ca4b443..675763704b2 100644
--- a/server/sonar-web/src/main/js/app/components/ResetPassword.tsx
+++ b/server/sonar-web/src/main/js/app/components/ResetPassword.tsx
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { Helmet } from 'react-helmet-async';
 import ResetPasswordForm from '../../components/common/ResetPasswordForm';
 import { whenLoggedIn } from '../../components/hoc/whenLoggedIn';
 import { translate } from '../../helpers/l10n';
@@ -31,6 +32,7 @@ export interface ResetPasswordProps {
 export function ResetPassword({ currentUser }: ResetPasswordProps) {
   return (
     <div className="page-wrapper-simple">
+      <Helmet defer={false} title={translate('my_account.reset_password.page')} />
       <div className="page-simple">
         <h1 className="text-center huge">{translate('my_account.reset_password')}</h1>
         <p className="text-center huge-spacer-top huge-spacer-bottom">
diff --git a/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/FormattingHelp-test.tsx.snap b/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/FormattingHelp-test.tsx.snap
index 031748e845e..723d6dc652c 100644
--- a/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/FormattingHelp-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/FormattingHelp-test.tsx.snap
@@ -4,6 +4,12 @@ exports[`should render correctly 1`] = `
 <div
   className="page page-limited"
 >
+  <Helmet
+    defer={false}
+    encodeSpecialCharacters={true}
+    prioritizeSeoTags={false}
+    title="formatting.page"
+  />
   <h2
     className="spacer-bottom"
   >
diff --git a/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/PluginRiskConsent-test.tsx.snap b/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/PluginRiskConsent-test.tsx.snap
index ec59ee3ae60..ca59e6da243 100644
--- a/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/PluginRiskConsent-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/PluginRiskConsent-test.tsx.snap
@@ -4,6 +4,12 @@ exports[`should render correctly: default 1`] = `
 <div
   className="plugin-risk-consent-page"
 >
+  <Helmet
+    defer={false}
+    encodeSpecialCharacters={true}
+    prioritizeSeoTags={false}
+    title="plugin_risk_consent.page"
+  />
   <div
     className="plugin-risk-consent-content boxed-group"
   >
diff --git a/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/ResetPassword-test.tsx.snap b/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/ResetPassword-test.tsx.snap
index 8a9ce7d4f1b..6c22619eecc 100644
--- a/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/ResetPassword-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/ResetPassword-test.tsx.snap
@@ -4,6 +4,12 @@ exports[`should render correctly 1`] = `
 <div
   className="page-wrapper-simple"
 >
+  <Helmet
+    defer={false}
+    encodeSpecialCharacters={true}
+    prioritizeSeoTags={false}
+    title="my_account.reset_password.page"
+  />
   <div
     className="page-simple"
   >
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/Header.tsx b/server/sonar-web/src/main/js/app/components/nav/component/Header.tsx
index 0e2a745da37..145ae9377dd 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/Header.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/Header.tsx
@@ -18,7 +18,6 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { Helmet } from 'react-helmet-async';
 import Favorite from '../../../../components/controls/Favorite';
 import { ProjectAlmBindingResponse } from '../../../../types/alm-settings';
 import { BranchLike } from '../../../../types/branch-like';
@@ -41,31 +40,28 @@ export function Header(props: HeaderProps) {
   const { branchLikes, component, currentBranchLike, currentUser, projectBinding } = props;
 
   return (
-    <>
-      <Helmet title={component.name} />
-      <div className="display-flex-center flex-shrink">
-        <Breadcrumb component={component} currentBranchLike={currentBranchLike} />
-        {isLoggedIn(currentUser) && (
-          <Favorite
-            className="spacer-left"
-            component={component.key}
-            favorite={Boolean(component.isFavorite)}
-            qualifier={component.qualifier}
+    <div className="display-flex-center flex-shrink">
+      <Breadcrumb component={component} currentBranchLike={currentBranchLike} />
+      {isLoggedIn(currentUser) && (
+        <Favorite
+          className="spacer-left"
+          component={component.key}
+          favorite={Boolean(component.isFavorite)}
+          qualifier={component.qualifier}
+        />
+      )}
+      {currentBranchLike && (
+        <>
+          <BranchLikeNavigation
+            branchLikes={branchLikes}
+            component={component}
+            currentBranchLike={currentBranchLike}
+            projectBinding={projectBinding}
           />
-        )}
-        {currentBranchLike && (
-          <>
-            <BranchLikeNavigation
-              branchLikes={branchLikes}
-              component={component}
-              currentBranchLike={currentBranchLike}
-              projectBinding={projectBinding}
-            />
-            <CurrentBranchLikeMergeInformation currentBranchLike={currentBranchLike} />
-          </>
-        )}
-      </div>
-    </>
+          <CurrentBranchLikeMergeInformation currentBranchLike={currentBranchLike} />
+        </>
+      )}
+    </div>
   );
 }
 
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/Header-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/Header-test.tsx.snap
index 635a9b815ff..bac9e18453c 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/Header-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/Header-test.tsx.snap
@@ -1,161 +1,153 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly 1`] = `
-<Fragment>
-  <Helmet
-    defer={true}
-    encodeSpecialCharacters={true}
-    prioritizeSeoTags={false}
-    title="MyProject"
-  />
-  <div
-    className="display-flex-center flex-shrink"
-  >
-    <Breadcrumb
-      component={
-        {
-          "breadcrumbs": [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": {
-            "isDefault": true,
-            "key": "30",
+<div
+  className="display-flex-center flex-shrink"
+>
+  <Breadcrumb
+    component={
+      {
+        "breadcrumbs": [],
+        "key": "my-project",
+        "name": "MyProject",
+        "qualifier": "TRK",
+        "qualityGate": {
+          "isDefault": true,
+          "key": "30",
+          "name": "Sonar way",
+        },
+        "qualityProfiles": [
+          {
+            "deleted": false,
+            "key": "my-qp",
+            "language": "ts",
             "name": "Sonar way",
           },
-          "qualityProfiles": [
-            {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": [],
-        }
+        ],
+        "tags": [],
+      }
+    }
+    currentBranchLike={
+      {
+        "analysisDate": "2018-01-01",
+        "excludedFromPurge": true,
+        "isMain": false,
+        "name": "branch-11",
       }
-      currentBranchLike={
+    }
+  />
+  <Favorite
+    className="spacer-left"
+    component="my-project"
+    favorite={false}
+    qualifier="TRK"
+  />
+  <withAvailableFeaturesContext(Component)
+    branchLikes={
+      [
         {
           "analysisDate": "2018-01-01",
           "excludedFromPurge": true,
           "isMain": false,
           "name": "branch-11",
-        }
-      }
-    />
-    <Favorite
-      className="spacer-left"
-      component="my-project"
-      favorite={false}
-      qualifier="TRK"
-    />
-    <withAvailableFeaturesContext(Component)
-      branchLikes={
-        [
-          {
-            "analysisDate": "2018-01-01",
-            "excludedFromPurge": true,
-            "isMain": false,
-            "name": "branch-11",
-          },
-          {
-            "analysisDate": "2018-01-01",
-            "excludedFromPurge": true,
-            "isMain": false,
-            "name": "branch-1",
-          },
-          {
-            "analysisDate": "2018-01-01",
-            "excludedFromPurge": true,
-            "isMain": true,
-            "name": "master",
-          },
-          {
-            "analysisDate": "2018-01-01",
-            "base": "master",
-            "branch": "feature/foo/bar",
-            "key": "1",
-            "target": "master",
-            "title": "PR-1",
-          },
-          {
-            "analysisDate": "2018-01-01",
-            "excludedFromPurge": true,
-            "isMain": false,
-            "name": "branch-12",
-          },
-          {
-            "analysisDate": "2018-01-01",
-            "base": "master",
-            "branch": "feature/foo/bar",
-            "key": "2",
-            "target": "master",
-            "title": "PR-2",
-          },
-          {
-            "analysisDate": "2018-01-01",
-            "excludedFromPurge": true,
-            "isMain": false,
-            "name": "branch-3",
-          },
-          {
-            "analysisDate": "2018-01-01",
-            "excludedFromPurge": true,
-            "isMain": false,
-            "name": "branch-2",
-          },
-          {
-            "analysisDate": "2018-01-01",
-            "base": "master",
-            "branch": "feature/foo/bar",
-            "isOrphan": true,
-            "key": "2",
-            "target": "llb-100",
-            "title": "PR-2",
-          },
-        ]
-      }
-      component={
+        },
         {
-          "breadcrumbs": [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": [
-            {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": [],
-        }
-      }
-      currentBranchLike={
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": false,
+          "name": "branch-1",
+        },
+        {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        },
+        {
+          "analysisDate": "2018-01-01",
+          "base": "master",
+          "branch": "feature/foo/bar",
+          "key": "1",
+          "target": "master",
+          "title": "PR-1",
+        },
         {
           "analysisDate": "2018-01-01",
           "excludedFromPurge": true,
           "isMain": false,
-          "name": "branch-11",
-        }
-      }
-    />
-    <Memo(CurrentBranchLikeMergeInformation)
-      currentBranchLike={
+          "name": "branch-12",
+        },
+        {
+          "analysisDate": "2018-01-01",
+          "base": "master",
+          "branch": "feature/foo/bar",
+          "key": "2",
+          "target": "master",
+          "title": "PR-2",
+        },
         {
           "analysisDate": "2018-01-01",
           "excludedFromPurge": true,
           "isMain": false,
-          "name": "branch-11",
-        }
+          "name": "branch-3",
+        },
+        {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": false,
+          "name": "branch-2",
+        },
+        {
+          "analysisDate": "2018-01-01",
+          "base": "master",
+          "branch": "feature/foo/bar",
+          "isOrphan": true,
+          "key": "2",
+          "target": "llb-100",
+          "title": "PR-2",
+        },
+      ]
+    }
+    component={
+      {
+        "breadcrumbs": [],
+        "key": "my-project",
+        "name": "MyProject",
+        "qualifier": "TRK",
+        "qualityGate": {
+          "isDefault": true,
+          "key": "30",
+          "name": "Sonar way",
+        },
+        "qualityProfiles": [
+          {
+            "deleted": false,
+            "key": "my-qp",
+            "language": "ts",
+            "name": "Sonar way",
+          },
+        ],
+        "tags": [],
+      }
+    }
+    currentBranchLike={
+      {
+        "analysisDate": "2018-01-01",
+        "excludedFromPurge": true,
+        "isMain": false,
+        "name": "branch-11",
       }
-    />
-  </div>
-</Fragment>
+    }
+  />
+  <Memo(CurrentBranchLikeMergeInformation)
+    currentBranchLike={
+      {
+        "analysisDate": "2018-01-01",
+        "excludedFromPurge": true,
+        "isMain": false,
+        "name": "branch-11",
+      }
+    }
+  />
+</div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/account/Account.tsx b/server/sonar-web/src/main/js/apps/account/Account.tsx
index 89c44b98f9a..279a5b6035b 100644
--- a/server/sonar-web/src/main/js/apps/account/Account.tsx
+++ b/server/sonar-web/src/main/js/apps/account/Account.tsx
@@ -24,7 +24,7 @@ import withCurrentUserContext from '../../app/components/current-user/withCurren
 import A11ySkipTarget from '../../components/a11y/A11ySkipTarget';
 import Suggestions from '../../components/embed-docs-modal/Suggestions';
 import handleRequiredAuthentication from '../../helpers/handleRequiredAuthentication';
-import { translate } from '../../helpers/l10n';
+import { translate, translateWithParameters } from '../../helpers/l10n';
 import { CurrentUser, LoggedInUser } from '../../types/users';
 import './account.css';
 import Nav from './components/Nav';
@@ -52,7 +52,14 @@ export class Account extends React.PureComponent<Props> {
     return (
       <div id="account-page">
         <Suggestions suggestions="account" />
-        <Helmet defaultTitle={title} defer={false} titleTemplate={`%s - ${title}`} />
+        <Helmet
+          defaultTitle={title}
+          defer={false}
+          titleTemplate={translateWithParameters(
+            'page_title.template.with_category',
+            translate('my_account.page')
+          )}
+        />
         <A11ySkipTarget anchor="account_main" />
         <header className="account-header">
           <div className="account-container clearfix">
diff --git a/server/sonar-web/src/main/js/apps/account/profile/Profile.tsx b/server/sonar-web/src/main/js/apps/account/profile/Profile.tsx
index 7f5484d0307..81ee0edee8b 100644
--- a/server/sonar-web/src/main/js/apps/account/profile/Profile.tsx
+++ b/server/sonar-web/src/main/js/apps/account/profile/Profile.tsx
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { Helmet } from 'react-helmet-async';
 import HelpTooltip from '../../../components/controls/HelpTooltip';
 import { whenLoggedIn } from '../../../components/hoc/whenLoggedIn';
 import { translate } from '../../../helpers/l10n';
@@ -34,6 +35,7 @@ export function Profile({ currentUser }: ProfileProps) {
 
   return (
     <div className="account-body account-container account-profile">
+      <Helmet defer={false} title={translate('my_account.profile')} />
       <div className="boxed-group">
         {renderLogin()}
         {renderEmail()}
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/BackgroundTasksApp.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/BackgroundTasksApp.tsx
index 430a327776f..0b37e713584 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/BackgroundTasksApp.tsx
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/BackgroundTasksApp.tsx
@@ -216,6 +216,7 @@ export class BackgroundTasksApp extends React.PureComponent<Props, State> {
     if (!types) {
       return (
         <div className="page page-limited">
+          <Helmet defer={false} title={translate('background_tasks.page')} />
           <i className="spinner" />
         </div>
       );
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/BackgroundTasksApp-test.tsx.snap b/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/BackgroundTasksApp-test.tsx.snap
index d6a88662327..f3363add97f 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/BackgroundTasksApp-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/BackgroundTasksApp-test.tsx.snap
@@ -4,6 +4,12 @@ exports[`should render correctly: initial 1`] = `
 <div
   className="page page-limited"
 >
+  <Helmet
+    defer={false}
+    encodeSpecialCharacters={true}
+    prioritizeSeoTags={false}
+    title="background_tasks.page"
+  />
   <i
     className="spinner"
   />
diff --git a/server/sonar-web/src/main/js/apps/change-admin-password/ChangeAdminPasswordAppRenderer.tsx b/server/sonar-web/src/main/js/apps/change-admin-password/ChangeAdminPasswordAppRenderer.tsx
index 42f0341936f..530ea4ed8ae 100644
--- a/server/sonar-web/src/main/js/apps/change-admin-password/ChangeAdminPasswordAppRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/change-admin-password/ChangeAdminPasswordAppRenderer.tsx
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { Helmet } from 'react-helmet-async';
 import { SubmitButton } from '../../components/controls/buttons';
 import { Location } from '../../components/hoc/withRouter';
 import { Alert } from '../../components/ui/Alert';
@@ -58,6 +59,7 @@ export default function ChangeAdminPasswordAppRenderer(props: ChangeAdminPasswor
 
   return (
     <div className="page-wrapper-simple">
+      <Helmet defer={false} title={translate('users.change_admin_password.page')} />
       <div className="page-simple">
         {success ? (
           <Alert variant="success">
diff --git a/server/sonar-web/src/main/js/apps/overview/components/App.tsx b/server/sonar-web/src/main/js/apps/overview/components/App.tsx
index ad04df2512f..73be0c7cc86 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/App.tsx
@@ -18,12 +18,14 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { Helmet } from 'react-helmet-async';
 import withAvailableFeatures, {
   WithAvailableFeaturesProps,
 } from '../../../app/components/available-features/withAvailableFeatures';
 import withComponentContext from '../../../app/components/componentContext/withComponentContext';
 import Suggestions from '../../../components/embed-docs-modal/Suggestions';
 import { isPullRequest } from '../../../helpers/branch-like';
+import { translate } from '../../../helpers/l10n';
 import { ProjectAlmBindingResponse } from '../../../types/alm-settings';
 import { BranchLike } from '../../../types/branch-like';
 import { isPortfolioLike } from '../../../types/component';
@@ -50,34 +52,39 @@ export function App(props: AppProps) {
     return null;
   }
 
-  return isPullRequest(branchLike) ? (
-    <main>
-      <Suggestions suggestions="pull_requests" />
-      <PullRequestOverview branchLike={branchLike} component={component} />
-    </main>
-  ) : (
-    <main>
-      <Suggestions suggestions="overview" />
+  return (
+    <>
+      <Helmet defer={false} title={translate('overview.page')} />
+      {isPullRequest(branchLike) ? (
+        <main>
+          <Suggestions suggestions="pull_requests" />
+          <PullRequestOverview branchLike={branchLike} component={component} />
+        </main>
+      ) : (
+        <main>
+          <Suggestions suggestions="overview" />
 
-      {!component.analysisDate && (
-        <EmptyOverview
-          branchLike={branchLike}
-          branchLikes={branchLikes}
-          component={component}
-          hasAnalyses={isPending || isInProgress}
-          projectBinding={projectBinding}
-        />
-      )}
+          {!component.analysisDate && (
+            <EmptyOverview
+              branchLike={branchLike}
+              branchLikes={branchLikes}
+              component={component}
+              hasAnalyses={isPending || isInProgress}
+              projectBinding={projectBinding}
+            />
+          )}
 
-      {component.analysisDate && (
-        <BranchOverview
-          branch={branchLike}
-          branchesEnabled={branchSupportEnabled}
-          component={component}
-          projectBinding={projectBinding}
-        />
+          {component.analysisDate && (
+            <BranchOverview
+              branch={branchLike}
+              branchesEnabled={branchSupportEnabled}
+              component={component}
+              projectBinding={projectBinding}
+            />
+          )}
+        </main>
       )}
-    </main>
+    </>
   );
 }
 
diff --git a/server/sonar-web/src/main/js/apps/projectBaseline/components/ProjectBaselineApp.tsx b/server/sonar-web/src/main/js/apps/projectBaseline/components/ProjectBaselineApp.tsx
index 025cc21974e..fa88657aa0e 100644
--- a/server/sonar-web/src/main/js/apps/projectBaseline/components/ProjectBaselineApp.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBaseline/components/ProjectBaselineApp.tsx
@@ -20,6 +20,7 @@
 import classNames from 'classnames';
 import { debounce } from 'lodash';
 import * as React from 'react';
+import { Helmet } from 'react-helmet-async';
 import { getNewCodePeriod, resetNewCodePeriod, setNewCodePeriod } from '../../../api/newCodePeriod';
 import withAppStateContext from '../../../app/components/app-state/withAppStateContext';
 import withAvailableFeatures, {
@@ -265,6 +266,7 @@ export class ProjectBaselineApp extends React.PureComponent<Props, State> {
     return (
       <>
         <Suggestions suggestions="project_baseline" />
+        <Helmet defer={false} title={translate('project_baseline.page')} />
         <div className="page page-limited">
           <AppHeader canAdmin={!!appState.canAdmin} />
           {loading ? (
diff --git a/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/ProjectBaselineApp-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/ProjectBaselineApp-test.tsx.snap
index 847b62f98de..0bdcbfd57a6 100644
--- a/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/ProjectBaselineApp-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/ProjectBaselineApp-test.tsx.snap
@@ -5,6 +5,12 @@ exports[`should render correctly 1`] = `
   <Suggestions
     suggestions="project_baseline"
   />
+  <Helmet
+    defer={false}
+    encodeSpecialCharacters={true}
+    prioritizeSeoTags={false}
+    title="project_baseline.page"
+  />
   <div
     className="page page-limited"
   >
@@ -128,6 +134,12 @@ exports[`should render correctly: without branch support 1`] = `
   <Suggestions
     suggestions="project_baseline"
   />
+  <Helmet
+    defer={false}
+    encodeSpecialCharacters={true}
+    prioritizeSeoTags={false}
+    title="project_baseline.page"
+  />
   <div
     className="page page-limited"
   >
diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/ProjectBranchesApp.tsx b/server/sonar-web/src/main/js/apps/projectBranches/components/ProjectBranchesApp.tsx
index 28b4fa07404..5af1f9e3ad3 100644
--- a/server/sonar-web/src/main/js/apps/projectBranches/components/ProjectBranchesApp.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBranches/components/ProjectBranchesApp.tsx
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { Helmet } from 'react-helmet-async';
 import withComponentContext from '../../../app/components/componentContext/withComponentContext';
 import { translate } from '../../../helpers/l10n';
 import { BranchLike } from '../../../types/branch-like';
@@ -37,6 +38,7 @@ export function ProjectBranchesApp(props: ProjectBranchesAppProps) {
   return (
     <div className="page page-limited" id="project-branch-like">
       <header className="page-header">
+        <Helmet defer={false} title={translate('project_branch_pull_request.page')} />
         <h1>{translate('project_branch_pull_request.page')}</h1>
         <LifetimeInformation />
       </header>
diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/ProjectBranchesApp-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/ProjectBranchesApp-test.tsx.snap
index 979a1948c74..3d61a39aba6 100644
--- a/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/ProjectBranchesApp-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/ProjectBranchesApp-test.tsx.snap
@@ -8,6 +8,12 @@ exports[`should render correctly 1`] = `
   <header
     className="page-header"
   >
+    <Helmet
+      defer={false}
+      encodeSpecialCharacters={true}
+      prioritizeSeoTags={false}
+      title="project_branch_pull_request.page"
+    />
     <h1>
       project_branch_pull_request.page
     </h1>
diff --git a/server/sonar-web/src/main/js/apps/projectDump/ProjectDumpApp.tsx b/server/sonar-web/src/main/js/apps/projectDump/ProjectDumpApp.tsx
index c168c6944ac..9e67eeeca00 100644
--- a/server/sonar-web/src/main/js/apps/projectDump/ProjectDumpApp.tsx
+++ b/server/sonar-web/src/main/js/apps/projectDump/ProjectDumpApp.tsx
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { Helmet } from 'react-helmet-async';
 import { getActivity } from '../../api/ce';
 import { getStatus } from '../../api/project-dump';
 import withAvailableFeatures, {
@@ -158,6 +159,7 @@ export class ProjectDumpApp extends React.Component<Props, State> {
 
     return (
       <div className="page page-limited" id="project-dump">
+        <Helmet defer={false} title={translate('project_dump.page')} />
         <header className="page-header">
           <h1 className="page-title">{translate('project_dump.page')}</h1>
           <div className="page-description">
diff --git a/server/sonar-web/src/main/js/apps/projectDump/__tests__/__snapshots__/ProjectDumpApp-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectDump/__tests__/__snapshots__/ProjectDumpApp-test.tsx.snap
index e176282cfa9..caba04a83e9 100644
--- a/server/sonar-web/src/main/js/apps/projectDump/__tests__/__snapshots__/ProjectDumpApp-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectDump/__tests__/__snapshots__/ProjectDumpApp-test.tsx.snap
@@ -5,6 +5,12 @@ exports[`should render correctly: loaded 1`] = `
   className="page page-limited"
   id="project-dump"
 >
+  <Helmet
+    defer={false}
+    encodeSpecialCharacters={true}
+    prioritizeSeoTags={false}
+    title="project_dump.page"
+  />
   <header
     className="page-header"
   >
@@ -74,6 +80,12 @@ exports[`should render correctly: loaded without import 1`] = `
   className="page page-limited"
   id="project-dump"
 >
+  <Helmet
+    defer={false}
+    encodeSpecialCharacters={true}
+    prioritizeSeoTags={false}
+    title="project_dump.page"
+  />
   <header
     className="page-header"
   >
@@ -119,6 +131,12 @@ exports[`should render correctly: loading 1`] = `
   className="page page-limited"
   id="project-dump"
 >
+  <Helmet
+    defer={false}
+    encodeSpecialCharacters={true}
+    prioritizeSeoTags={false}
+    title="project_dump.page"
+  />
   <header
     className="page-header"
   >
diff --git a/server/sonar-web/src/main/js/apps/sessions/components/Login.tsx b/server/sonar-web/src/main/js/apps/sessions/components/Login.tsx
index 9cdcc6b19ae..abc039a5585 100644
--- a/server/sonar-web/src/main/js/apps/sessions/components/Login.tsx
+++ b/server/sonar-web/src/main/js/apps/sessions/components/Login.tsx
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { Helmet } from 'react-helmet-async';
 import { Location } from '../../../components/hoc/withRouter';
 import { Alert } from '../../../components/ui/Alert';
 import DeferredSpinner from '../../../components/ui/DeferredSpinner';
@@ -47,7 +48,7 @@ export default function Login(props: LoginProps) {
       <h1 className="login-title text-center big-spacer-bottom">
         {translate('login.login_to_sonarqube')}
       </h1>
-
+      <Helmet defer={false} title={translate('login.page')} />
       {loading ? (
         <DeferredSpinner loading={loading} timeout={0} />
       ) : (
diff --git a/server/sonar-web/src/main/js/apps/sessions/components/Unauthorized.tsx b/server/sonar-web/src/main/js/apps/sessions/components/Unauthorized.tsx
index d45e308b7fe..add0793a723 100644
--- a/server/sonar-web/src/main/js/apps/sessions/components/Unauthorized.tsx
+++ b/server/sonar-web/src/main/js/apps/sessions/components/Unauthorized.tsx
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { Helmet } from 'react-helmet-async';
 import Link from '../../../components/common/Link';
 import { getCookie } from '../../../helpers/cookies';
 import { translate } from '../../../helpers/l10n';
@@ -26,6 +27,7 @@ export default function Unauthorized() {
   const message = decodeURIComponent(getCookie('AUTHENTICATION-ERROR') || '');
   return (
     <div className="page-wrapper-simple" id="bd">
+      <Helmet defer={false} title={translate('unauthorized.page')} />
       <div className="page-simple" id="nonav">
         <div className="text-center">
           <p id="unauthorized">{translate('unauthorized.message')}</p>
diff --git a/server/sonar-web/src/main/js/helpers/testReactTestingUtils.tsx b/server/sonar-web/src/main/js/helpers/testReactTestingUtils.tsx
index 1e132aaf840..1f4fc07da70 100644
--- a/server/sonar-web/src/main/js/helpers/testReactTestingUtils.tsx
+++ b/server/sonar-web/src/main/js/helpers/testReactTestingUtils.tsx
@@ -94,11 +94,13 @@ export function renderComponent(component: React.ReactElement, pathname = '/') {
   function Wrapper({ children }: { children: React.ReactElement }) {
     return (
       <IntlProvider defaultLocale="en" locale="en">
-        <MemoryRouter initialEntries={[pathname]}>
-          <Routes>
-            <Route path="*" element={children} />
-          </Routes>
-        </MemoryRouter>
+        <HelmetProvider>
+          <MemoryRouter initialEntries={[pathname]}>
+            <Routes>
+              <Route path="*" element={children} />
+            </Routes>
+          </MemoryRouter>
+        </HelmetProvider>
       </IntlProvider>
     );
   }