WIP: Reworking ErrorPage/ErrorNotification

scm-ui-components/packages/ui-components/src/BackendErrorNotification.js

@@ -0,0 +1,95 @@
+// @flow
+import React from "react";
+import { BackendError } from "./errors";
+import classNames from "classnames";
+
+import { translate } from "react-i18next";
+
+type Props = { error: BackendError, t: string => string };
+type State = { collapsed: boolean };
+
+class BackendErrorNotification extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { collapsed: true };
+  }
+
+  render() {
+    const { collapsed } = this.state;
+    const icon = collapsed ? "fa-angle-right" : "fa-angle-down";
+
+    // TODO error page
+    // we have currently the ErrorNotification, which is often wrapped by the ErrorPage
+    // the ErrorPage has often a SubTitle like "Unkwown xzy error", which is no longer always the case
+    // if the error is a BackendError its not fully unknown
+    return (
+      <div className="content">
+        <p>
+          <span
+            onClick={() => {
+              this.setState({ collapsed: !this.state.collapsed });
+            }}
+          >
+            <i className={classNames("fa", icon)} />
+
+            {this.renderErrorMessage()}
+          </span>
+        </p>
+        {this.renderUncollapsed()}
+      </div>
+    );
+  }
+
+  renderErrorMessage = () => {
+    const { error, t } = this.props;
+    const translation = t("errors." + error.errorCode);
+    if (translation === error.errorCode) {
+      return error.message;
+    }
+    return translation;
+  };
+
+  renderUncollapsed = () => {
+    const { error } = this.props;
+    if (!this.state.collapsed) {
+      return (
+        <>
+          <p>
+            <strong>Context:</strong>
+          </p>
+          <ul>
+            {error.context.map((context, index) => {
+              return (
+                <li key={index}>
+                  <strong>{context.type}:</strong> {context.id}
+                </li>
+              );
+            })}
+          </ul>
+          {this.renderMoreInformationLink(error)}
+          <div className="level is-size-7">
+            <div className="left">ErrorCode: {error.errorCode}</div>
+            <div className="right">TransactionId: {error.transactionId}</div>
+          </div>
+        </>
+      );
+    }
+    return null;
+  };
+
+  renderMoreInformationLink = (error: BackendError) => {
+    if (error.url) {
+      // TODO i18n
+      return (
+        <p>
+          For more information, see{" "}
+          <a href={error.url} target="_blank">
+            {error.errorCode}
+          </a>
+        </p>
+      );
+    }
+  };
+}
+
+export default translate("plugins")(BackendErrorNotification);

scm-ui-components/packages/ui-components/src/CollapsibleErrorPage.js

@@ -0,0 +1,44 @@
+//@flow
+import React from "react";
+import ErrorNotification from "./ErrorNotification";
+import { translate } from "react-i18next";
+
+type Props = {
+  error: Error,
+  title: string,
+  subtitle?: string,
+  t: string => string
+};
+
+type State = {
+  collapsed: boolean
+};
+
+class CollapsibleErrorPage extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      collapsed: true
+    };
+  }
+
+
+
+  render() {
+    const { title, error, t } = this.props;
+
+    return (
+      <section className="section">
+        <div className="box column is-4 is-offset-4 container has-background-danger">
+          <span onClick={() => {this.setState({collapsed: !this.state.collapsed})}}>
+            <h1 className="title"> {title} </h1>
+          </span>
+
+          <ErrorNotification error={error} />
+        </div>
+      </section>
+    );
+  }
+}
+
+export default translate("plugins")(CollapsibleErrorPage);

scm-ui-components/packages/ui-components/src/ErrorNotification.js

@@ -1,70 +1,22 @@
 //@flow
 import React from "react";
 import { translate } from "react-i18next";
-import Notification from "./Notification";
 import { BackendError, UnauthorizedError } from "./errors";
+import Notification from "./Notification";
+import BackendErrorNotification from "./BackendErrorNotification";
 
 type Props = {
   t: string => string,
   error?: Error
 };
 
+
 class ErrorNotification extends React.Component<Props> {
-  renderMoreInformationLink(error: BackendError) {
-    if (error.url) {
-      // TODO i18n
-      return (
-        <p>
-          For more information, see{" "}
-          <a href={error.url} target="_blank">
-            {error.errorCode}
-          </a>
-        </p>
-      );
-    }
-  }
-
-  renderBackendError = (error: BackendError) => {
-    // TODO i18n
-    // how should we handle i18n for the message?
-    // we could add translation for known error codes to i18n and pass the context objects as parameters,
-    // but this will not work for errors from plugins, because the ErrorNotification will search for the translation
-    // in the wrong namespace (plugins could only add translations to the plugins namespace.
-    // should we add a special namespace for errors? which could be extend by plugins?
-
-    // TODO error page
-    // we have currently the ErrorNotification, which is often wrapped by the ErrorPage
-    // the ErrorPage has often a SubTitle like "Unkwown xzy error", which is no longer always the case
-    // if the error is a BackendError its not fully unknown
-    return (
-      <div className="content">
-        <p>{error.message}</p>
-        <p>
-          <strong>Context:</strong>
-        </p>
-        <ul>
-          {error.context.map((context, index) => {
-            return (
-              <li key={index}>
-                <strong>{context.type}:</strong> {context.id}
-              </li>
-            );
-          })}
-        </ul>
-        {this.renderMoreInformationLink(error)}
-        <div className="level is-size-7">
-          <div className="left">ErrorCode: {error.errorCode}</div>
-          <div className="right">TransactionId: {error.transactionId}</div>
-        </div>
-      </div>
-    );
-  };
-
   render() {
     const { t, error } = this.props;
     if (error) {
       if (error instanceof BackendError) {
-        return this.renderBackendError(error);
+        return <BackendErrorNotification error={error} />
       } else if (error instanceof UnauthorizedError) {
         return (
           <Notification type="danger">

scm-ui-components/packages/ui-components/src/index.js

@@ -9,6 +9,7 @@ export { validation, urls, repositories };
 export { default as DateFromNow } from "./DateFromNow.js";
 export { default as ErrorNotification } from "./ErrorNotification.js";
 export { default as ErrorPage } from "./ErrorPage.js";
+export { default as CollapsibleErrorPage } from "./CollapsibleErrorPage.js";
 export { default as Image } from "./Image.js";
 export { default as Loading } from "./Loading.js";
 export { default as Logo } from "./Logo.js";