add download view

scm-ui-components/packages/ui-components/src/buttons/DownloadButton.js

@@ -0,0 +1,25 @@
+//@flow
+import React from "react";
+import Button, { type ButtonProps } from "./Button";
+import type {File} from "@scm-manager/ui-types";
+
+type Props = {
+  displayName: string,
+  url: string
+};
+
+class DownloadButton extends React.Component<Props> {
+  render() {
+    const {displayName, url} = this.props;
+    return (
+      <a className="button is-large is-info" href={url}>
+        <span className="icon is-medium">
+          <i className="fas fa-arrow-circle-down" />
+        </span>
+        <span>{displayName}</span>
+      </a>
+    );
+  }
+}
+
+export default DownloadButton;

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

@@ -7,4 +7,4 @@ export { default as DeleteButton } from "./DeleteButton.js";
 export { default as EditButton } from "./EditButton.js";
 export { default as RemoveEntryOfTableButton } from "./RemoveEntryOfTableButton.js";
 export { default as SubmitButton } from "./SubmitButton.js";
-
+export {default as DownloadButton} from "./DownloadButton.js";

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

@@ -51,7 +51,11 @@
       "name": "Name",
       "length": "Length",
       "lastModified": "Last modified",
-      "description": "Description"
+      "description": "Description",
+      "branch": "Branch"
+    },
+    "content": {
+      "downloadButton": "Download"
     }
   },
   "changesets": {

scm-ui/src/repos/sources/components/content/DownloadViewer.js

@@ -1,28 +1,52 @@
 // @flow
 import React from "react";
 import { translate } from "react-i18next";
+import type { File } from "@scm-manager/ui-types";
+import { DownloadButton, DateFromNow } from "@scm-manager/ui-components";
 
 type Props = {
-  t: string => string
+  t: string => string,
+  file: File,
+  revision: string
 };
 
-type State = {
-  content: string
-};
-
-class DownloadViewer extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      content: ""
-    };
-  }
-
-  componentDidMount() {}
-
+class DownloadViewer extends React.Component<Props> {
   render() {
-    return "DownloadViewer";
+    const { t, file, revision } = this.props;
+    return (
+      <div>
+        <article className="media">
+          <div className="content media-left">
+            <h4>{file.name}</h4>
+          </div>
+          <div className="media-content" />
+          <div className="media-right">
+            <DownloadButton
+              url={file._links.self.href}
+              displayName={t("sources.content.downloadButton")}
+            />
+          </div>
+        </article>
+        <table className="table">
+          <tbody>
+            <tr>
+              <td>{t("sources.description")}</td>
+              <td>{file.description}</td>
+            </tr>
+            <tr>
+              <td>{t("sources.lastModified")}</td>
+              <td>
+                <DateFromNow date={file.lastModified} />
+              </td>
+            </tr>
+            <tr>
+              <td>{t("sources.branch")}</td>
+              <td>{revision}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    );
   }
 }
 

scm-ui/src/repos/sources/containers/Content.js

@@ -68,7 +68,7 @@ class Content extends React.Component<Props, State> {
   }
 
   render() {
-    const { file } = this.props;
+    const { file, revision } = this.props;
     const contentType = this.state.contentType;
     const error = this.state.error;
     const hasError = this.state.hasError;
@@ -87,7 +87,7 @@ class Content extends React.Component<Props, State> {
       return <SourcecodeViewer />;
     }
 
-    return <DownloadViewer file={file}/>;
+    return <DownloadViewer file={file} revision={revision}/>;
   }
 }