open correct viewer for each type and reorder the structure

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

@@ -0,0 +1,94 @@
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import { apiClient } from "../../../../../scm-ui-components/packages/ui-components/src/index";
+import { getSources } from "../modules/sources";
+import type {
+  Repository,
+  File
+} from "../../../../../scm-ui-components/packages/ui-types/src/index";
+import {
+  ErrorNotification,
+  Loading
+} from "../../../../../scm-ui-components/packages/ui-components/src/index";
+import { connect } from "react-redux";
+import ImageViewer from "../components/content/ImageViewer";
+import SourcecodeViewer from "../components/content/SourcecodeViewer";
+import DownloadViewer from "../components/content/DownloadViewer";
+
+type Props = {
+  t: string => string,
+  loading: boolean,
+  error: Error,
+  file: File,
+  repository: Repository,
+  revision: string,
+  path: string,
+  // context props
+  classes: any,
+  t: string => string,
+  match: any
+};
+
+type State = {
+  contentType: string
+};
+
+class Content extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      contentType: ""
+    };
+  }
+
+  componentDidMount() {
+    const { file } = this.props;
+    getContentType(file._links.self.href).then(result => {
+      this.setState({
+        contentType: result
+      });
+    });
+  }
+
+  render() {
+    const { file } = this.props;
+    const contentType = this.state.contentType;
+    if (!file) {
+      return <Loading />;
+    }
+    if (contentType.startsWith("image")) {
+      return <ImageViewer />;
+    }
+
+    if (contentType.startsWith("text")) {
+      return <SourcecodeViewer />;
+    }
+
+    return <DownloadViewer />;
+  }
+}
+
+export function getContentType(url: string, state: any) {
+  return apiClient
+    .head(url)
+    .then(response => {
+      return response.headers.get("Content-Type");
+    })
+    .catch(err => {
+      return null;
+    });
+}
+
+const mapStateToProps = (state: any, ownProps: Props) => {
+  const { repository, revision, path } = ownProps;
+
+  const file = getSources(state, repository, revision, path);
+
+  return {
+    file
+  };
+};
+
+export default connect(mapStateToProps)(translate("repos")(Content));

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

@@ -0,0 +1,27 @@
+//@flow
+import fetchMock from "fetch-mock";
+import { getContentType } from "./Content";
+
+describe("get content type", () => {
+  const CONTENT_URL = "/repositories/scmadmin/TestRepo/content/testContent";
+
+  afterEach(() => {
+    fetchMock.reset();
+    fetchMock.restore();
+  });
+
+  it("should return content", done => {
+    let headers = {
+      "Content-Type": "application/text"
+    };
+
+    fetchMock.head("/api/v2" + CONTENT_URL, {
+      headers
+    });
+
+    getContentType(CONTENT_URL).then(content => {
+      expect(content).toBe("application/text");
+      done();
+    });
+  });
+});

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

@@ -13,7 +13,7 @@ import {
   isFetchBranchesPending
 } from "../../modules/branches";
 import { compose } from "redux";
-import Content from "../../content/components/Content";
+import Content from "./Content";
 import { fetchSources, isDirectory } from "../modules/sources";
 
 type Props = {