SONAR-10601 refresh the page when the web app can not load a js bundle

2 files changed, 129 insertions, 133 deletions

diff --git a/server/sonar-web/src/main/js/apps/groups/components/App.tsx b/server/sonar-web/src/main/js/apps/groups/components/App.tsx
index e44998e4bde..3742549abdb 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/components/App.tsx
@@ -21,6 +21,7 @@ import * as React from 'react';
 import { Helmet } from 'react-helmet';
 import Header from './Header';
 import List from './List';
+import forSingleOrganization from '../../organizations/forSingleOrganization';
 import Suggestions from '../../../app/components/embed-docs-modal/Suggestions';
 import { searchUsersGroups, deleteGroup, updateGroup, createGroup } from '../../../api/user_groups';
 import { Group, Paging } from '../../../app/types';
@@ -39,146 +40,148 @@ interface State {
   query: string;
 }
 
-export default class App extends React.PureComponent<Props, State> {
-  mounted = false;
-  state: State = { loading: true, query: '' };
+export default forSingleOrganization(
+  class App extends React.PureComponent<Props, State> {
+    mounted = false;
+    state: State = { loading: true, query: '' };
 
-  componentDidMount() {
-    this.mounted = true;
-    this.fetchGroups();
-  }
-
-  componentWillUnmount() {
-    this.mounted = false;
-  }
+    componentDidMount() {
+      this.mounted = true;
+      this.fetchGroups();
+    }
 
-  get organization() {
-    return this.props.organization && this.props.organization.key;
-  }
+    componentWillUnmount() {
+      this.mounted = false;
+    }
 
-  makeFetchGroupsRequest = (data?: { p?: number; q?: string }) => {
-    this.setState({ loading: true });
-    return searchUsersGroups({
-      organization: this.organization,
-      q: this.state.query,
-      ...data
-    });
-  };
-
-  stopLoading = () => {
-    if (this.mounted) {
-      this.setState({ loading: false });
+    get organization() {
+      return this.props.organization && this.props.organization.key;
     }
-  };
 
-  fetchGroups = (data?: { p?: number; q?: string }) => {
-    this.makeFetchGroupsRequest(data).then(({ groups, paging }) => {
+    makeFetchGroupsRequest = (data?: { p?: number; q?: string }) => {
+      this.setState({ loading: true });
+      return searchUsersGroups({
+        organization: this.organization,
+        q: this.state.query,
+        ...data
+      });
+    };
+
+    stopLoading = () => {
       if (this.mounted) {
-        this.setState({ groups, loading: false, paging });
+        this.setState({ loading: false });
       }
-    }, this.stopLoading);
-  };
+    };
 
-  fetchMoreGroups = () => {
-    const { paging } = this.state;
-    if (paging && paging.total > paging.pageIndex * paging.pageSize) {
-      this.makeFetchGroupsRequest({ p: paging.pageIndex + 1 }).then(({ groups, paging }) => {
+    fetchGroups = (data?: { p?: number; q?: string }) => {
+      this.makeFetchGroupsRequest(data).then(({ groups, paging }) => {
         if (this.mounted) {
-          this.setState(({ groups: existingGroups = [] }) => ({
-            groups: [...existingGroups, ...groups],
-            loading: false,
-            paging
-          }));
+          this.setState({ groups, loading: false, paging });
         }
       }, this.stopLoading);
-    }
-  };
+    };
+
+    fetchMoreGroups = () => {
+      const { paging } = this.state;
+      if (paging && paging.total > paging.pageIndex * paging.pageSize) {
+        this.makeFetchGroupsRequest({ p: paging.pageIndex + 1 }).then(({ groups, paging }) => {
+          if (this.mounted) {
+            this.setState(({ groups: existingGroups = [] }) => ({
+              groups: [...existingGroups, ...groups],
+              loading: false,
+              paging
+            }));
+          }
+        }, this.stopLoading);
+      }
+    };
 
-  search = (query: string) => {
-    this.fetchGroups({ q: query });
-    this.setState({ query });
-  };
+    search = (query: string) => {
+      this.fetchGroups({ q: query });
+      this.setState({ query });
+    };
 
-  refresh = () => {
-    this.fetchGroups({ q: this.state.query });
-  };
+    refresh = () => {
+      this.fetchGroups({ q: this.state.query });
+    };
 
-  handleCreate = (data: { description: string; name: string }) => {
-    return createGroup({ ...data, organization: this.organization }).then(group => {
-      if (this.mounted) {
-        this.setState(({ groups = [] }: State) => ({
-          groups: [...groups, group]
-        }));
-      }
-    });
-  };
+    handleCreate = (data: { description: string; name: string }) => {
+      return createGroup({ ...data, organization: this.organization }).then(group => {
+        if (this.mounted) {
+          this.setState(({ groups = [] }: State) => ({
+            groups: [...groups, group]
+          }));
+        }
+      });
+    };
 
-  handleDelete = (name: string) => {
-    return deleteGroup({ name, organization: this.organization }).then(() => {
-      if (this.mounted) {
-        this.setState(({ groups = [] }: State) => ({
-          groups: groups.filter(group => group.name !== name)
-        }));
-      }
-    });
-  };
+    handleDelete = (name: string) => {
+      return deleteGroup({ name, organization: this.organization }).then(() => {
+        if (this.mounted) {
+          this.setState(({ groups = [] }: State) => ({
+            groups: groups.filter(group => group.name !== name)
+          }));
+        }
+      });
+    };
 
-  handleEdit = (data: { description?: string; id: number; name?: string }) => {
-    return updateGroup(data).then(() => {
-      if (this.mounted) {
-        this.setState(({ groups = [] }: State) => ({
-          groups: groups.map(group => (group.id === data.id ? { ...group, ...data } : group))
-        }));
-      }
-    });
-  };
-
-  render() {
-    const { groups, loading, paging, query } = this.state;
-
-    const showAnyone =
-      this.props.organization === undefined && 'anyone'.includes(query.toLowerCase());
-
-    return (
-      <>
-        <Suggestions suggestions="user_groups" />
-        <Helmet title={translate('user_groups.page')} />
-        <div className="page page-limited" id="groups-page">
-          <Header loading={loading} onCreate={this.handleCreate} />
-
-          <SearchBox
-            className="big-spacer-bottom"
-            id="groups-search"
-            minLength={2}
-            onChange={this.search}
-            placeholder={translate('search.search_by_name')}
-            value={query}
-          />
-
-          {groups !== undefined && (
-            <List
-              groups={groups}
-              onDelete={this.handleDelete}
-              onEdit={this.handleEdit}
-              onEditMembers={this.refresh}
-              organization={this.organization}
-              showAnyone={showAnyone}
+    handleEdit = (data: { description?: string; id: number; name?: string }) => {
+      return updateGroup(data).then(() => {
+        if (this.mounted) {
+          this.setState(({ groups = [] }: State) => ({
+            groups: groups.map(group => (group.id === data.id ? { ...group, ...data } : group))
+          }));
+        }
+      });
+    };
+
+    render() {
+      const { groups, loading, paging, query } = this.state;
+
+      const showAnyone =
+        this.props.organization === undefined && 'anyone'.includes(query.toLowerCase());
+
+      return (
+        <>
+          <Suggestions suggestions="user_groups" />
+          <Helmet title={translate('user_groups.page')} />
+          <div className="page page-limited" id="groups-page">
+            <Header loading={loading} onCreate={this.handleCreate} />
+
+            <SearchBox
+              className="big-spacer-bottom"
+              id="groups-search"
+              minLength={2}
+              onChange={this.search}
+              placeholder={translate('search.search_by_name')}
+              value={query}
             />
-          )}
-
-          {groups !== undefined &&
-            paging !== undefined && (
-              <div id="groups-list-footer">
-                <ListFooter
-                  count={showAnyone ? groups.length + 1 : groups.length}
-                  loadMore={this.fetchMoreGroups}
-                  ready={!loading}
-                  total={showAnyone ? paging.total + 1 : paging.total}
-                />
-              </div>
+
+            {groups !== undefined && (
+              <List
+                groups={groups}
+                onDelete={this.handleDelete}
+                onEdit={this.handleEdit}
+                onEditMembers={this.refresh}
+                organization={this.organization}
+                showAnyone={showAnyone}
+              />
             )}
-        </div>
-      </>
-    );
+
+            {groups !== undefined &&
+              paging !== undefined && (
+                <div id="groups-list-footer">
+                  <ListFooter
+                    count={showAnyone ? groups.length + 1 : groups.length}
+                    loadMore={this.fetchMoreGroups}
+                    ready={!loading}
+                    total={showAnyone ? paging.total + 1 : paging.total}
+                  />
+                </div>
+              )}
+          </div>
+        </>
+      );
+    }
   }
-}
+);
diff --git a/server/sonar-web/src/main/js/apps/groups/routes.ts b/server/sonar-web/src/main/js/apps/groups/routes.ts
index 88584bbe9df..75753a6139a 100644
--- a/server/sonar-web/src/main/js/apps/groups/routes.ts
+++ b/server/sonar-web/src/main/js/apps/groups/routes.ts
@@ -17,18 +17,11 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { RouterState, IndexRouteProps } from 'react-router';
+import { lazyLoad } from '../../components/lazyLoad';
 
 const routes = [
   {
-    getIndexRoute(_: RouterState, callback: (err: any, route: IndexRouteProps) => any) {
-      Promise.all([
-        import('./components/App').then(i => i.default),
-        import('../organizations/forSingleOrganization').then(i => i.default)
-      ]).then(([App, forSingleOrganization]) =>
-        callback(null, { component: forSingleOrganization(App) })
-      );
-    }
+    indexRoute: { component: lazyLoad(() => import('./components/App')) }
   }
 ];