Refactored ErrorNotification/ErrorPage

Added i18n for error codes

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

@@ -18,13 +18,9 @@ class BackendErrorNotification extends React.Component<Props, State> {
     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>
+        <p className="subtitle">
           <span
             onClick={() => {
               this.setState({ collapsed: !this.state.collapsed });
@@ -50,12 +46,12 @@ class BackendErrorNotification extends React.Component<Props, State> {
   };
 
   renderUncollapsed = () => {
-    const { error } = this.props;
+    const { error, t } = this.props;
     if (!this.state.collapsed) {
       return (
         <>
           <p>
-            <strong>Context:</strong>
+            <strong>{t("errors.context")}</strong>
           </p>
           <ul>
             {error.context.map((context, index) => {
@@ -68,8 +64,8 @@ class BackendErrorNotification extends React.Component<Props, State> {
           </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 className="left">{t("errors.errorCode")} {error.errorCode}</div>
+            <div className="right">{t("errors.transactionId")} {error.transactionId}</div>
           </div>
         </>
       );
@@ -78,11 +74,11 @@ class BackendErrorNotification extends React.Component<Props, State> {
   };
 
   renderMoreInformationLink = (error: BackendError) => {
+    const { t } = this.props;
     if (error.url) {
-      // TODO i18n
       return (
         <p>
-          For more information, see{" "}
+          {t("errors.moreInfo")}{" "}
           <a href={error.url} target="_blank">
             {error.errorCode}
           </a>

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

@@ -1,44 +0,0 @@
-//@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

@@ -39,4 +39,4 @@ class ErrorNotification extends React.Component<Props> {
   }
 }
 
-export default translate("commons")(ErrorNotification);
+export default  translate("commons")(ErrorNotification);

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

@@ -1,6 +1,7 @@
 //@flow
 import React from "react";
 import ErrorNotification from "./ErrorNotification";
+import { BackendError } from "./errors";
 
 type Props = {
   error: Error,
@@ -10,18 +11,26 @@ type Props = {
 
 class ErrorPage extends React.Component<Props> {
   render() {
-    const { title, subtitle, error } = this.props;
+    const { title, error } = this.props;
 
     return (
       <section className="section">
         <div className="box column is-4 is-offset-4 container">
           <h1 className="title">{title}</h1>
-          <p className="subtitle">{subtitle}</p>
+          {this.renderSubtitle()}
           <ErrorNotification error={error} />
         </div>
       </section>
     );
   }
+
+  renderSubtitle = () => {
+    const { error, subtitle } = this.props;
+    if (error instanceof BackendError) {
+      return null;
+    }
+    return <p className="subtitle">{subtitle}</p>
+  }
 }
 
 export default ErrorPage;

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

@@ -9,7 +9,6 @@ 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";