added more meaningful error notification for invalid markdown

scm-ui/ui-components/src/MarkdownView.tsx

@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
+import React, { FC } from "react";
 import { withRouter, RouteComponentProps } from "react-router-dom";
 // @ts-ignore
 import Markdown from "react-markdown/with-html";
@@ -29,6 +29,8 @@ import { binder } from "@scm-manager/ui-extensions";
 import ErrorBoundary from "./ErrorBoundary";
 import SyntaxHighlighter from "./SyntaxHighlighter";
 import MarkdownHeadingRenderer from "./MarkdownHeadingRenderer";
+import { useTranslation } from "react-i18next";
+import Notification from "./Notification";
 
 type Props = RouteComponentProps & {
   content: string;
@@ -38,6 +40,35 @@ type Props = RouteComponentProps & {
   enableAnchorHeadings?: boolean;
 };
 
+const xmlMarkupSample = `\`\`\`xml
+<your>
+  <xml>
+    <content/>
+  </xml>
+</your>
+\`\`\``;
+
+const MarkdownErrorNotification: FC = () => {
+  const [t] = useTranslation("commons");
+  return (
+    <Notification type="danger">
+      <div className="content">
+        <p className="subtitle">{t("markdownErrorNotification.title")}</p>
+        <p>{t("markdownErrorNotification.description")}</p>
+        <pre>
+          <code>{xmlMarkupSample}</code>
+        </pre>
+        <p>
+          {t("markdownErrorNotification.spec")}:{" "}
+          <a href="https://github.github.com/gfm/" target="_blank">
+            GitHub Flavored Markdown Spec
+          </a>
+        </p>
+      </div>
+    </Notification>
+  );
+};
+
 class MarkdownView extends React.Component<Props> {
   static defaultProps: Partial<Props> = {
     enableAnchorHeadings: false,
@@ -88,7 +119,7 @@ class MarkdownView extends React.Component<Props> {
     }
 
     return (
-      <ErrorBoundary>
+      <ErrorBoundary fallback={MarkdownErrorNotification}>
         <div ref={el => (this.contentRef = el)}>
           <Markdown
             className="content"

scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap

@@ -33786,12 +33786,40 @@ exports[`Storyshots MarkdownView Inline Xml 1`] = `
     className="notification is-danger"
   >
     
-    <strong>
-      errorNotification.prefix
-      :
-    </strong>
-     
-    Cannot read property 'children' of undefined
+    <div
+      className="content"
+    >
+      <p
+        className="subtitle"
+      >
+        markdownErrorNotification.title
+      </p>
+      <p>
+        markdownErrorNotification.description
+      </p>
+      <pre>
+        <code>
+          \`\`\`xml
+&lt;your&gt;
+  &lt;xml&gt;
+    &lt;content/&gt;
+  &lt;/xml&gt;
+&lt;/your&gt;
+\`\`\`
+        </code>
+      </pre>
+      <p>
+        markdownErrorNotification.spec
+        :
+         
+        <a
+          href="https://github.github.com/gfm/"
+          target="_blank"
+        >
+          GitHub Flavored Markdown Spec
+        </a>
+      </p>
+    </div>
   </div>
 </div>
 `;

scm-ui/ui-webapp/public/locales/de/commons.json

@@ -33,6 +33,11 @@
     "wrongLoginCredentials": "Ungültige Anmeldedaten",
     "forbidden": "Sie haben nicht die Berechtigung, diesen Datensatz zu sehen"
   },
+  "markdownErrorNotification": {
+    "title": "Markdown Inhalt konnte nicht geparsed werden",
+    "description": "Der Inhalt enthält kein valides Markdown. Wenn XML im Inhalt verwendet wird, muss sicher gestellt werden das sich dieser in einem Code-Block befindet z.B.:",
+    "spec": "Die Spezifikation kann hier eingesehen werden"
+  },
   "loading": {
     "alt": "Lade ..."
   },

scm-ui/ui-webapp/public/locales/en/commons.json

@@ -34,6 +34,11 @@
     "wrongLoginCredentials": "Invalid credentials",
     "forbidden": "You don't have permission to view this entity"
   },
+  "markdownErrorNotification": {
+    "title": "Markdown content could not be parsed",
+    "description": "Content does not contain valid markdown. If you use XML, please ensure that it is wrapped in a code block e.g.:",
+    "spec": "Please have a look at the specification"
+  },
   "loading": {
     "alt": "Loading ..."
   },