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

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>
+    </>
   );
 }

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>

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);
     }
   };
 

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';
 

server/sonar-web/src/main/js/app/components/extensions/ExtensionNotFound.tsx

@@ -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>
-  );
-}

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 => ({

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 => ({

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} />
     );
   }
 }

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} />
   );
 }
 

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} />
   );
 }

sonar-core/src/main/resources/org/sonar/l10n/core.properties

@@ -200,6 +200,8 @@ no=No
 #
 #------------------------------------------------------------------------------
 
+404_not_found=404 Not found
+address_mistyped_or_page_moved=You may have mistyped the address or the page may have moved.
 and_worse=and worse
 are_you_sure=Are you sure?
 as_explained_here=as explained here
@@ -215,6 +217,7 @@ default_error_message=The request cannot be processed. Try again later.
 default_severity=Default severity
 edit_permissions=Edit Permissions
 false_positive=False positive
+go_back_to_homepage=Go back to the homepage
 last_analysis_before=Last analysis before
 logging_out=You're logging out, please wait...
 manage=Manage
@@ -230,6 +233,7 @@ no_results_search.favorites=We couldn't find any results matching selected crite
 no_results_search.2=Try to change filters to get some results.
 no_results_search.favorites.2=Would you like to search among {url} projects?
 page_extension_failed=Page extension failed.
+page_not_found=The page you were looking for does not exist.
 please_contact_administrator=Please contact the instance administrator.
 set_as_default=Set as Default
 short_number_suffix.g=G