SONARCLOUD-93 Fix helmet title sync with GA and add 404 page title

10 files changed, 38 insertions, 63 deletions

diff --git a/server/sonar-web/src/main/js/app/components/ComponentContainerNotFound.tsx b/server/sonar-web/src/main/js/app/components/ComponentContainerNotFound.tsx
index 0542ade62d3..d179e67c970 100644
--- a/server/sonar-web/src/main/js/app/components/ComponentContainerNotFound.tsx
+++ b/server/sonar-web/src/main/js/app/components/ComponentContainerNotFound.tsx
@@ -18,19 +18,23 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { Helmet } from 'react-helmet';
 import { Link } from 'react-router';
 import { translate } from '../../helpers/l10n';
 
 export default function ComponentContainerNotFound() {
   return (
-    <div id="bd" className="page-wrapper-simple">
-      <div id="nonav" className="page-simple">
-        <h2 className="big-spacer-bottom">{translate('dashboard.project_not_found')}</h2>
-        <p className="spacer-bottom">{translate('dashboard.project_not_found.2')}</p>
-        <p>
-          <Link to="/">Go back to the homepage</Link>
-        </p>
+    <>
+      <Helmet defaultTitle={translate('404_not_found')} defer={false} />
+      <div className="page-wrapper-simple" id="bd">
+        <div className="page-simple" id="nonav">
+          <h2 className="big-spacer-bottom">{translate('dashboard.project_not_found')}</h2>
+          <p className="spacer-bottom">{translate('dashboard.project_not_found.2')}</p>
+          <p>
+            <Link to="/">{translate('go_back_to_homepage')}</Link>
+          </p>
+        </div>
       </div>
-    </div>
+    </>
   );
 }
diff --git a/server/sonar-web/src/main/js/app/components/NotFound.tsx b/server/sonar-web/src/main/js/app/components/NotFound.tsx
index ade13464e39..669f1c8bd0e 100644
--- a/server/sonar-web/src/main/js/app/components/NotFound.tsx
+++ b/server/sonar-web/src/main/js/app/components/NotFound.tsx
@@ -18,8 +18,10 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { Helmet } from 'react-helmet';
 import { Link } from 'react-router';
 import SimpleContainer from './SimpleContainer';
+import { translate } from '../../helpers/l10n';
 
 interface Props {
   withContainer?: boolean;
@@ -29,14 +31,13 @@ export default function NotFound({ withContainer = true }: Props) {
   const Container = withContainer ? SimpleContainer : React.Fragment;
   return (
     <Container>
+      <Helmet defaultTitle={translate('404_not_found')} defer={false} />
       <div className="page-wrapper-simple" id="bd">
         <div className="page-simple" id="nonav">
-          <h2 className="big-spacer-bottom">The page you were looking for does not exist.</h2>
-          <p className="spacer-bottom">
-            You may have mistyped the address or the page may have moved.
-          </p>
+          <h2 className="big-spacer-bottom">{translate('page_not_found')}</h2>
+          <p className="spacer-bottom">{translate('address_mistyped_or_page_moved')}</p>
           <p>
-            <Link to="/">Go back to the homepage</Link>
+            <Link to="/">{translate('go_back_to_homepage')}</Link>
           </p>
         </div>
       </div>
diff --git a/server/sonar-web/src/main/js/app/components/PageTracker.tsx b/server/sonar-web/src/main/js/app/components/PageTracker.tsx
index e2a4f0c04dd..a7699df640f 100644
--- a/server/sonar-web/src/main/js/app/components/PageTracker.tsx
+++ b/server/sonar-web/src/main/js/app/components/PageTracker.tsx
@@ -49,7 +49,8 @@ export class PageTracker extends React.PureComponent<Props> {
   trackPage = () => {
     const { location, trackingId } = this.props;
     if (trackingId) {
-      GoogleAnalytics.pageview(location.pathname);
+      // More info on the "title and page not in sync" issue: https://github.com/nfl/react-helmet/issues/189
+      setTimeout(() => GoogleAnalytics.pageview(location.pathname), 500);
     }
   };
 
diff --git a/server/sonar-web/src/main/js/app/components/extensions/Extension.js b/server/sonar-web/src/main/js/app/components/extensions/Extension.js
index db2d7080033..d2934d30980 100644
--- a/server/sonar-web/src/main/js/app/components/extensions/Extension.js
+++ b/server/sonar-web/src/main/js/app/components/extensions/Extension.js
@@ -25,8 +25,6 @@ import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
 import { injectIntl } from 'react-intl';
 import { getExtensionStart } from './utils';
-import { addGlobalErrorMessage } from '../../../store/globalMessages/duck';
-import { getCurrentUser } from '../../../store/rootReducer';
 import { translate } from '../../../helpers/l10n';
 import getStore from '../../utils/getStore';
 
diff --git a/server/sonar-web/src/main/js/app/components/extensions/ExtensionNotFound.tsx b/server/sonar-web/src/main/js/app/components/extensions/ExtensionNotFound.tsx
deleted file mode 100644
index ca2d7026164..00000000000
--- a/server/sonar-web/src/main/js/app/components/extensions/ExtensionNotFound.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2018 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import { Link } from 'react-router';
-
-export default function ExtensionNotFound() {
-  return (
-    <div id="bd" className="page-wrapper-simple">
-      <div id="nonav" className="page-simple">
-        <h2 className="big-spacer-bottom">The page you were looking for does not exist.</h2>
-        <p className="spacer-bottom">
-          You may have mistyped the address or the page may have moved.
-        </p>
-        <p>
-          <Link to="/">Go back to the homepage</Link>
-        </p>
-      </div>
-    </div>
-  );
-}
diff --git a/server/sonar-web/src/main/js/app/components/extensions/GlobalAdminPageExtension.js b/server/sonar-web/src/main/js/app/components/extensions/GlobalAdminPageExtension.js
index ba36adf0035..640ef485c36 100644
--- a/server/sonar-web/src/main/js/app/components/extensions/GlobalAdminPageExtension.js
+++ b/server/sonar-web/src/main/js/app/components/extensions/GlobalAdminPageExtension.js
@@ -21,7 +21,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import ExtensionContainer from './ExtensionContainer';
-import ExtensionNotFound from './ExtensionNotFound';
+import NotFound from '../NotFound';
 import { getAppState } from '../../../store/rootReducer';
 
 /*::
@@ -37,7 +37,11 @@ type Props = {
 function GlobalAdminPageExtension(props /*: Props */) {
   const { extensionKey, pluginKey } = props.params;
   const extension = props.adminPages.find(p => p.key === `${pluginKey}/${extensionKey}`);
-  return extension ? <ExtensionContainer extension={extension} /> : <ExtensionNotFound />;
+  return extension ? (
+    <ExtensionContainer extension={extension} />
+  ) : (
+    <NotFound withContainer={false} />
+  );
 }
 
 const mapStateToProps = state => ({
diff --git a/server/sonar-web/src/main/js/app/components/extensions/GlobalPageExtension.js b/server/sonar-web/src/main/js/app/components/extensions/GlobalPageExtension.js
index 248d46f409b..ede95cb92ed 100644
--- a/server/sonar-web/src/main/js/app/components/extensions/GlobalPageExtension.js
+++ b/server/sonar-web/src/main/js/app/components/extensions/GlobalPageExtension.js
@@ -21,7 +21,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import ExtensionContainer from './ExtensionContainer';
-import ExtensionNotFound from './ExtensionNotFound';
+import NotFound from '../NotFound';
 import { getAppState } from '../../../store/rootReducer';
 
 /*::
@@ -37,7 +37,11 @@ type Props = {
 function GlobalPageExtension(props /*: Props */) {
   const { extensionKey, pluginKey } = props.params;
   const extension = props.globalPages.find(p => p.key === `${pluginKey}/${extensionKey}`);
-  return extension ? <ExtensionContainer extension={extension} /> : <ExtensionNotFound />;
+  return extension ? (
+    <ExtensionContainer extension={extension} />
+  ) : (
+    <NotFound withContainer={false} />
+  );
 }
 
 const mapStateToProps = state => ({
diff --git a/server/sonar-web/src/main/js/app/components/extensions/OrganizationPageExtension.tsx b/server/sonar-web/src/main/js/app/components/extensions/OrganizationPageExtension.tsx
index fd058d429bb..d5875a4f851 100644
--- a/server/sonar-web/src/main/js/app/components/extensions/OrganizationPageExtension.tsx
+++ b/server/sonar-web/src/main/js/app/components/extensions/OrganizationPageExtension.tsx
@@ -20,7 +20,7 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
 import ExtensionContainer from './ExtensionContainer';
-import ExtensionNotFound from './ExtensionNotFound';
+import NotFound from '../NotFound';
 import { getOrganizationByKey } from '../../../store/rootReducer';
 import { fetchOrganization } from '../../../apps/organizations/actions';
 import { Organization } from '../../types';
@@ -69,7 +69,7 @@ class OrganizationPageExtension extends React.PureComponent<Props> {
         options={{ organization, refreshOrganization: this.refreshOrganization }}
       />
     ) : (
-      <ExtensionNotFound />
+      <NotFound withContainer={false} />
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/app/components/extensions/ProjectAdminPageExtension.js b/server/sonar-web/src/main/js/app/components/extensions/ProjectAdminPageExtension.js
index 52c394fbf1b..1c584fc30ee 100644
--- a/server/sonar-web/src/main/js/app/components/extensions/ProjectAdminPageExtension.js
+++ b/server/sonar-web/src/main/js/app/components/extensions/ProjectAdminPageExtension.js
@@ -21,7 +21,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import ExtensionContainer from './ExtensionContainer';
-import ExtensionNotFound from './ExtensionNotFound';
+import NotFound from '../NotFound';
 import { addGlobalErrorMessage } from '../../../store/globalMessages/duck';
 
 /*::
@@ -48,7 +48,7 @@ function ProjectAdminPageExtension(props /*: Props */) {
   return extension ? (
     <ExtensionContainer extension={extension} options={{ component }} />
   ) : (
-    <ExtensionNotFound />
+    <NotFound withContainer={false} />
   );
 }
 
diff --git a/server/sonar-web/src/main/js/app/components/extensions/ProjectPageExtension.tsx b/server/sonar-web/src/main/js/app/components/extensions/ProjectPageExtension.tsx
index 68c4c5db03e..df6c0f88e90 100644
--- a/server/sonar-web/src/main/js/app/components/extensions/ProjectPageExtension.tsx
+++ b/server/sonar-web/src/main/js/app/components/extensions/ProjectPageExtension.tsx
@@ -19,7 +19,7 @@
  */
 import * as React from 'react';
 import ExtensionContainer from './ExtensionContainer';
-import ExtensionNotFound from './ExtensionNotFound';
+import NotFound from '../NotFound';
 import { Component } from '../../types';
 
 interface Props {
@@ -40,6 +40,6 @@ export default function ProjectPageExtension(props: Props) {
   return extension ? (
     <ExtensionContainer extension={extension} options={{ component }} />
   ) : (
-    <ExtensionNotFound />
+    <NotFound withContainer={false} />
   );
 }