From cce3ddc394207877c7a7581d1c6d4341f5b66c51 Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Thu, 14 Mar 2019 10:12:34 +0100
Subject: [PATCH] improve location of ErrorBoundaries

---
 .../packages/ui-components/src/layout/Page.js |  25 +--
 scm-ui/src/containers/Index.js                |  29 ++-
 scm-ui/src/containers/IndexErrorPage.js       |  26 +++
 scm-ui/src/containers/Main.js                 | 182 +++++++++---------
 4 files changed, 142 insertions(+), 120 deletions(-)
 create mode 100644 scm-ui/src/containers/IndexErrorPage.js

diff --git a/scm-ui-components/packages/ui-components/src/layout/Page.js b/scm-ui-components/packages/ui-components/src/layout/Page.js
index 2cab7a1b0a..655b1fe986 100644
--- a/scm-ui-components/packages/ui-components/src/layout/Page.js
+++ b/scm-ui-components/packages/ui-components/src/layout/Page.js
@@ -32,15 +32,16 @@ class Page extends React.Component<Props> {
   render() {
     const { error } = this.props;
     return (
-      <ErrorBoundary>
-        <section className="section">
-          <div className="container">
-            {this.renderPageHeader()}
-            <ErrorNotification error={error} />
+      <section className="section">
+        <div className="container">
+          {this.renderPageHeader()}
+          <ErrorBoundary>
+            <ErrorNotification error={error}/>
             {this.renderContent()}
-          </div>
-        </section>
-      </ErrorBoundary>
+          </ErrorBoundary>
+        </div>
+      </section>
+
     );
   }
 
@@ -67,15 +68,15 @@ class Page extends React.Component<Props> {
       }
     });
     let underline = pageActionsExists ? (
-      <hr className="header-with-actions" />
+      <hr className="header-with-actions"/>
     ) : null;
 
     return (
       <>
         <div className="columns">
           <div className="column">
-            <Title title={title} />
-            <Subtitle subtitle={subtitle} />
+            <Title title={title}/>
+            <Subtitle subtitle={subtitle}/>
           </div>
           {pageActions}
         </div>
@@ -91,7 +92,7 @@ class Page extends React.Component<Props> {
       return null;
     }
     if (loading) {
-      return <Loading />;
+      return <Loading/>;
     }
 
     let content = [];
diff --git a/scm-ui/src/containers/Index.js b/scm-ui/src/containers/Index.js
index 1878195ece..af8c2a9e7f 100644
--- a/scm-ui/src/containers/Index.js
+++ b/scm-ui/src/containers/Index.js
@@ -5,7 +5,7 @@ import { connect } from "react-redux";
 import { translate } from "react-i18next";
 import { withRouter } from "react-router-dom";
 
-import { Loading, ErrorPage } from "@scm-manager/ui-components";
+import { Loading, ErrorBoundary } from "@scm-manager/ui-components";
 import {
   fetchIndexResources,
   getFetchIndexResourcesFailure,
@@ -15,6 +15,7 @@ import {
 import PluginLoader from "./PluginLoader";
 import type { IndexResources } from "@scm-manager/ui-types";
 import ScrollToTop from "./ScrollToTop";
+import IndexErrorPage from "./IndexErrorPage";
 
 type Props = {
   error: Error,
@@ -55,25 +56,21 @@ class Index extends Component<Props, State> {
     const { pluginsLoaded } = this.state;
 
     if (error) {
-      return (
-        <ErrorPage
-          title={t("app.error.title")}
-          subtitle={t("app.error.subtitle")}
-          error={error}
-        />
-      );
+      return <IndexErrorPage error={error}/>;
     } else if (loading || !indexResources) {
       return <Loading />;
     } else {
       return (
-        <ScrollToTop>
-          <PluginLoader
-            loaded={pluginsLoaded}
-            callback={this.pluginLoaderCallback}
-          >
-            <App />
-          </PluginLoader>
-        </ScrollToTop>
+        <ErrorBoundary fallback={IndexErrorPage}>
+          <ScrollToTop>
+            <PluginLoader
+              loaded={pluginsLoaded}
+              callback={this.pluginLoaderCallback}
+            >
+              <App />
+            </PluginLoader>
+          </ScrollToTop>
+        </ErrorBoundary>
       );
     }
   }
diff --git a/scm-ui/src/containers/IndexErrorPage.js b/scm-ui/src/containers/IndexErrorPage.js
new file mode 100644
index 0000000000..389d17c754
--- /dev/null
+++ b/scm-ui/src/containers/IndexErrorPage.js
@@ -0,0 +1,26 @@
+//@flow
+import React from "react";
+import { translate, type TFunction } from "react-i18next";
+import { ErrorPage } from "@scm-manager/ui-components";
+
+type Props = {
+  error: Error,
+  t: TFunction
+}
+
+class IndexErrorPage extends React.Component<Props> {
+
+  render() {
+    const { error, t } = this.props;
+    return (
+      <ErrorPage
+        title={t("app.error.title")}
+        subtitle={t("app.error.subtitle")}
+        error={error}
+      />
+    );
+  }
+
+}
+
+export default translate("commons")(IndexErrorPage);
diff --git a/scm-ui/src/containers/Main.js b/scm-ui/src/containers/Main.js
index 9036f769f2..570455d18d 100644
--- a/scm-ui/src/containers/Main.js
+++ b/scm-ui/src/containers/Main.js
@@ -9,7 +9,7 @@ import Users from "../users/containers/Users";
 import Login from "../containers/Login";
 import Logout from "../containers/Logout";
 
-import {ErrorBoundary, ProtectedRoute} from "@scm-manager/ui-components";
+import {ProtectedRoute} from "@scm-manager/ui-components";
 import {binder,  ExtensionPoint } from "@scm-manager/ui-extensions";
 
 import AddUser from "../users/containers/AddUser";
@@ -38,99 +38,97 @@ class Main extends React.Component<Props> {
       url = redirectUrlFactory(this.props);
     }
     return (
-      <ErrorBoundary>
-        <div className="main">
-          <Switch>
-            <Redirect exact from="/" to={url}/>
-            <Route exact path="/login" component={Login} />
-            <Route path="/logout" component={Logout} />
-            <ProtectedRoute
-              exact
-              path="/repos"
-              component={Overview}
-              authenticated={authenticated}
-            />
-            <ProtectedRoute
-              exact
-              path="/repos/create"
-              component={Create}
-              authenticated={authenticated}
-            />
-            <ProtectedRoute
-              exact
-              path="/repos/:page"
-              component={Overview}
-              authenticated={authenticated}
-            />
-            <ProtectedRoute
-              path="/repo/:namespace/:name"
-              component={RepositoryRoot}
-              authenticated={authenticated}
-            />
-            <ProtectedRoute
-              exact
-              path="/users"
-              component={Users}
-              authenticated={authenticated}
-            />
-            <ProtectedRoute
-              authenticated={authenticated}
-              path="/users/add"
-              component={AddUser}
-            />
-            <ProtectedRoute
-              exact
-              path="/users/:page"
-              component={Users}
-              authenticated={authenticated}
-            />
-            <ProtectedRoute
-              authenticated={authenticated}
-              path="/user/:name"
-              component={SingleUser}
-            />
+      <div className="main">
+        <Switch>
+          <Redirect exact from="/" to={url}/>
+          <Route exact path="/login" component={Login} />
+          <Route path="/logout" component={Logout} />
+          <ProtectedRoute
+            exact
+            path="/repos"
+            component={Overview}
+            authenticated={authenticated}
+          />
+          <ProtectedRoute
+            exact
+            path="/repos/create"
+            component={Create}
+            authenticated={authenticated}
+          />
+          <ProtectedRoute
+            exact
+            path="/repos/:page"
+            component={Overview}
+            authenticated={authenticated}
+          />
+          <ProtectedRoute
+            path="/repo/:namespace/:name"
+            component={RepositoryRoot}
+            authenticated={authenticated}
+          />
+          <ProtectedRoute
+            exact
+            path="/users"
+            component={Users}
+            authenticated={authenticated}
+          />
+          <ProtectedRoute
+            authenticated={authenticated}
+            path="/users/add"
+            component={AddUser}
+          />
+          <ProtectedRoute
+            exact
+            path="/users/:page"
+            component={Users}
+            authenticated={authenticated}
+          />
+          <ProtectedRoute
+            authenticated={authenticated}
+            path="/user/:name"
+            component={SingleUser}
+          />
 
-            <ProtectedRoute
-              exact
-              path="/groups"
-              component={Groups}
-              authenticated={authenticated}
-            />
-            <ProtectedRoute
-              authenticated={authenticated}
-              path="/group/:name"
-              component={SingleGroup}
-            />
-            <ProtectedRoute
-              authenticated={authenticated}
-              path="/groups/add"
-              component={AddGroup}
-            />
-            <ProtectedRoute
-              exact
-              path="/groups/:page"
-              component={Groups}
-              authenticated={authenticated}
-            />
-            <ProtectedRoute
-              path="/config"
-              component={Config}
-              authenticated={authenticated}
-            />
-            <ProtectedRoute
-              path="/me"
-              component={Profile}
-              authenticated={authenticated}
-            />
+          <ProtectedRoute
+            exact
+            path="/groups"
+            component={Groups}
+            authenticated={authenticated}
+          />
+          <ProtectedRoute
+            authenticated={authenticated}
+            path="/group/:name"
+            component={SingleGroup}
+          />
+          <ProtectedRoute
+            authenticated={authenticated}
+            path="/groups/add"
+            component={AddGroup}
+          />
+          <ProtectedRoute
+            exact
+            path="/groups/:page"
+            component={Groups}
+            authenticated={authenticated}
+          />
+          <ProtectedRoute
+            path="/config"
+            component={Config}
+            authenticated={authenticated}
+          />
+          <ProtectedRoute
+            path="/me"
+            component={Profile}
+            authenticated={authenticated}
+          />
 
-            <ExtensionPoint
-              name="main.route"
-              renderAll={true}
-              props={{authenticated, links}}
-            />
-          </Switch>
-        </div>
-      </ErrorBoundary>
+          <ExtensionPoint
+            name="main.route"
+            renderAll={true}
+            props={{authenticated, links}}
+          />
+        </Switch>
+      </div>
     );
   }
 }