Merged in feature/markdown_source_viewer (pull request #390)

Feature/markdown source viewer

scm-ui/ui-styles/src/scm.scss

@@ -427,6 +427,7 @@ $danger-25: scale-color($danger, $lightness: 75%);
 @import "~@fortawesome/fontawesome-free/scss/fontawesome";
 $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "~@fortawesome/fontawesome-free/scss/solid";
+@import "~@fortawesome/fontawesome-free/scss/brands";
 
 @import "~react-diff-view/style/index";
 

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

@@ -113,6 +113,10 @@
       "historyButton": "History",
       "sourcesButton": "Sources",
       "downloadButton": "Download",
+      "toggleButton": {
+        "showMarkdown": "Markdown rendern",
+        "showSources": "Sources anzeigen"
+      },
       "path": "Pfad",
       "branch": "Branch",
       "commitDate": "Commitdatum",

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

@@ -113,6 +113,10 @@
       "historyButton": "History",
       "sourcesButton": "Sources",
       "downloadButton": "Download",
+      "toggleButton": {
+        "showMarkdown": "Render markdown",
+        "showSources": "Show sources"
+      },
       "path": "Path",
       "branch": "Branch",
       "commitDate": "Commit date",

scm-ui/ui-webapp/public/locales/es/repos.json

@@ -113,6 +113,10 @@
       "historyButton": "Historia",
       "sourcesButton": "Fuentes",
       "downloadButton": "Descargar",
+      "toggleButton": {
+        "showMarkdown": "Render markdown",
+        "showSources": "Show sources"
+      },
       "path": "Ruta",
       "branch": "Rama",
       "commitDate": "Fecha de cometer",

scm-ui/ui-webapp/src/repos/sources/components/content/MarkdownViewer.tsx

@@ -0,0 +1,47 @@
+import React, { FC, useEffect, useState } from "react";
+import { getContent } from "./SourcecodeViewer";
+import { Link, File } from "@scm-manager/ui-types";
+import { Loading, ErrorNotification, MarkdownView } from "@scm-manager/ui-components";
+import styled from "styled-components";
+
+type Props = {
+  file: File;
+};
+
+const MarkdownContent = styled.div`
+  padding: 0.5rem;
+`;
+
+const MarkdownViewer: FC<Props> = ({ file }) => {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | undefined>(undefined);
+  const [content, setContent] = useState("");
+
+  useEffect(() => {
+    getContent((file._links.self as Link).href)
+      .then(content => {
+        setLoading(false);
+        setContent(content);
+      })
+      .catch(error => {
+        setLoading(false);
+        setError(error);
+      });
+  }, [file]);
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  if (error) {
+    return <ErrorNotification error={error} />;
+  }
+
+  return (
+    <MarkdownContent>
+      <MarkdownView content={content} />
+    </MarkdownContent>
+  );
+};
+
+export default MarkdownViewer;

scm-ui/ui-webapp/src/repos/sources/components/content/SwitchableMarkdownViewer.tsx

@@ -0,0 +1,51 @@
+import React, { FC, useState } from "react";
+import styled from "styled-components";
+import MarkdownViewer from "./MarkdownViewer";
+import SourcecodeViewer from "./SourcecodeViewer";
+import { File } from "@scm-manager/ui-types";
+import { Button } from "@scm-manager/ui-components";
+import { useTranslation } from "react-i18next";
+
+const ToggleButton = styled(Button)`
+  max-width: 1rem;
+  position: absolute;
+  top: 0;
+  right: 0.25rem;
+  z-index: 999;
+`;
+
+const Container = styled.div`
+  position: relative;
+`;
+
+type Props = {
+  file: File;
+};
+
+const SwitchableMarkdownViewer: FC<Props> = ({ file }) => {
+  const { t } = useTranslation("repos");
+  const [renderMarkdown, setRenderMarkdown] = useState(true);
+
+  const toggleMarkdown = () => {
+    setRenderMarkdown(!renderMarkdown);
+  };
+
+  return (
+    <Container>
+      <ToggleButton
+        color={renderMarkdown ? "link" : ""}
+        action={toggleMarkdown}
+        title={
+          renderMarkdown
+            ? t("sources.content.toggleButton.showSources")
+            : t("sources.content.toggleButton.showMarkdown")
+        }
+      >
+        <i className="fab fa-markdown" />
+      </ToggleButton>
+      {renderMarkdown ? <MarkdownViewer file={file} /> : <SourcecodeViewer file={file} language={"MARKDOWN"} />}
+    </Container>
+  );
+};
+
+export default SwitchableMarkdownViewer;

scm-ui/ui-webapp/src/repos/sources/containers/SourcesView.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-
 import SourcecodeViewer from "../components/content/SourcecodeViewer";
 import ImageViewer from "../components/content/ImageViewer";
 import DownloadViewer from "../components/content/DownloadViewer";
@@ -7,6 +6,7 @@ import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { getContentType } from "./contentType";
 import { File, Repository } from "@scm-manager/ui-types";
 import { ErrorNotification, Loading } from "@scm-manager/ui-components";
+import SwitchableMarkdownViewer from "../components/content/SwitchableMarkdownViewer";
 
 type Props = {
   repository: Repository;
@@ -58,6 +58,8 @@ class SourcesView extends React.Component<Props, State> {
     const { contentType, language } = this.state;
     if (contentType.startsWith("image/")) {
       return <ImageViewer file={file} />;
+    } else if (contentType.includes("markdown")) {
+      return <SwitchableMarkdownViewer file={file} />;
     } else if (language) {
       return <SourcecodeViewer file={file} language={language} />;
     } else if (contentType.startsWith("text/")) {