simplify routes

server/sonar-web/src/main/js/api/quality-gates.ts

@@ -30,7 +30,7 @@ export function fetchQualityGates(data: {
 }
 
 export function fetchQualityGate(data: {
-  id: number;
+  id: number | string;
   organization?: string;
 }): Promise<T.QualityGate> {
   return getJSON('/api/qualitygates/show', data).catch(throwGlobalError);

server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatesApp.tsx → server/sonar-web/src/main/js/apps/quality-gates/components/App.tsx

@@ -18,10 +18,13 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { withRouter, WithRouterProps } from 'react-router';
+import { WithRouterProps } from 'react-router';
 import Helmet from 'react-helmet';
-import ListHeader from './ListHeader';
+import Details from './Details';
+import Intro from './Intro';
 import List from './List';
+import ListHeader from './ListHeader';
+import DeferredSpinner from '../../../components/common/DeferredSpinner';
 import ScreenPositionHelper from '../../../components/common/ScreenPositionHelper';
 import Suggestions from '../../../app/components/embed-docs-modal/Suggestions';
 import { fetchQualityGates } from '../../../api/quality-gates';
@@ -37,11 +40,7 @@ import '../../../components/search-navigator.css';
 import '../styles.css';
 
 interface Props extends WithRouterProps {
-  children: React.ReactElement<{
-    organization?: string;
-    refreshQualityGates: () => Promise<void>;
-  }>;
-  organization: Pick<T.Organization, 'key'>;
+  organization?: Pick<T.Organization, 'key'>;
 }
 
 interface State {
@@ -50,7 +49,7 @@ interface State {
   qualityGates: T.QualityGate[];
 }
 
-class QualityGatesApp extends React.PureComponent<Props, State> {
+class App extends React.PureComponent<Props, State> {
   mounted = false;
   state: State = { canCreate: false, loading: true, qualityGates: [] };
 
@@ -102,9 +101,32 @@ class QualityGatesApp extends React.PureComponent<Props, State> {
     });
   };
 
+  renderContent() {
+    const { id } = this.props.params;
+    const organizationKey = this.props.organization && this.props.organization.key;
+    if (id !== undefined) {
+      return (
+        <Details
+          id={id}
+          onSetDefault={this.handleSetDefault}
+          organization={organizationKey}
+          qualityGates={this.state.qualityGates}
+          refreshQualityGates={this.fetchQualityGates}
+        />
+      );
+    } else {
+      return (
+        <Intro
+          organization={organizationKey}
+          qualityGates={this.state.qualityGates}
+          router={this.props.router}
+        />
+      );
+    }
+  }
+
   render() {
-    const { children } = this.props;
-    const { canCreate, loading, qualityGates } = this.state;
+    const { canCreate, qualityGates } = this.state;
     const defaultTitle = translate('quality_gates.page');
     const organization = this.props.organization && this.props.organization.key;
 
@@ -132,17 +154,12 @@ class QualityGatesApp extends React.PureComponent<Props, State> {
               </div>
             )}
           </ScreenPositionHelper>
-          {!loading &&
-            React.cloneElement(children, {
-              onSetDefault: this.handleSetDefault,
-              organization,
-              qualityGates,
-              refreshQualityGates: this.fetchQualityGates
-            })}
+
+          <DeferredSpinner loading={this.state.loading}>{this.renderContent()}</DeferredSpinner>
         </div>
       </>
     );
   }
 }
 
-export default withRouter(QualityGatesApp);
+export default App;

server/sonar-web/src/main/js/apps/quality-gates/components/DetailsApp.tsx → server/sonar-web/src/main/js/apps/quality-gates/components/Details.tsx

@@ -18,7 +18,6 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { withRouter, WithRouterProps } from 'react-router';
 import Helmet from 'react-helmet';
 import { connect } from 'react-redux';
 import DetailsHeader from './DetailsHeader';
@@ -29,9 +28,9 @@ import { fetchQualityGate } from '../../../api/quality-gates';
 import { checkIfDefault, addCondition, replaceCondition, deleteCondition } from '../utils';
 
 interface OwnProps {
+  id: string;
   onSetDefault: (qualityGate: T.QualityGate) => void;
   organization?: string;
-  params: { id: number };
   qualityGates: T.QualityGate[];
   refreshQualityGates: () => Promise<void>;
 }
@@ -44,14 +43,14 @@ interface DispatchToProps {
   fetchMetrics: () => void;
 }
 
-type Props = StateToProps & DispatchToProps & OwnProps & WithRouterProps;
+type Props = StateToProps & DispatchToProps & OwnProps;
 
 interface State {
   loading: boolean;
   qualityGate?: T.QualityGate;
 }
 
-export class DetailsApp extends React.PureComponent<Props, State> {
+export class Details extends React.PureComponent<Props, State> {
   mounted = false;
   state: State = { loading: true };
 
@@ -61,10 +60,9 @@ export class DetailsApp extends React.PureComponent<Props, State> {
     this.fetchDetails();
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    if (nextProps.params.id !== this.props.params.id) {
-      this.setState({ loading: true });
-      this.fetchDetails(nextProps);
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps.id !== this.props.id) {
+      this.fetchDetails();
     }
   }
 
@@ -72,8 +70,10 @@ export class DetailsApp extends React.PureComponent<Props, State> {
     this.mounted = false;
   }
 
-  fetchDetails = ({ organization, params } = this.props) => {
-    return fetchQualityGate({ id: params.id, organization }).then(
+  fetchDetails = () => {
+    const { id, organization } = this.props;
+    this.setState({ loading: true });
+    return fetchQualityGate({ id, organization }).then(
       qualityGate => {
         if (this.mounted) {
           this.setState({ loading: false, qualityGate });
@@ -168,9 +168,7 @@ const mapStateToProps = (state: Store): StateToProps => ({
   metrics: getMetrics(state)
 });
 
-export default withRouter(
-  connect(
-    mapStateToProps,
-    mapDispatchToProps
-  )(DetailsApp)
-);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Details);

server/sonar-web/src/main/js/apps/quality-gates/routes.ts

@@ -19,19 +19,8 @@
  */
 import { lazyLoad } from '../../components/lazyLoad';
 
-const routes = [
-  {
-    component: lazyLoad(() => import('./components/QualityGatesApp')),
-    childRoutes: [
-      {
-        indexRoute: { component: lazyLoad(() => import('./components/Intro')) }
-      },
-      {
-        path: 'show/:id',
-        component: lazyLoad(() => import('./components/DetailsApp'))
-      }
-    ]
-  }
-];
+const App = lazyLoad(() => import('./components/App'));
+
+const routes = [{ indexRoute: { component: App } }, { path: 'show/:id', component: App }];
 
 export default routes;