scm-ui: new repository layout

scm-ui/ui-webapp/src/repos/sources/components/FileIcon.js

@@ -0,0 +1,22 @@
+// @flow
+import React from "react";
+import type { File } from "@scm-manager/ui-types";
+
+type Props = {
+  file: File
+};
+
+class FileIcon extends React.Component<Props> {
+  render() {
+    const { file } = this.props;
+    let icon = "file";
+    if (file.subRepository) {
+      icon = "folder-plus";
+    } else if (file.directory) {
+      icon = "folder";
+    }
+    return <i className={`fa fa-${icon}`} />;
+  }
+}
+
+export default FileIcon;

scm-ui/ui-webapp/src/repos/sources/components/FileTree.js

@@ -0,0 +1,168 @@
+//@flow
+import React from "react";
+import { translate } from "react-i18next";
+import { connect } from "react-redux";
+import injectSheet from "react-jss";
+import FileTreeLeaf from "./FileTreeLeaf";
+import type { Repository, File } from "@scm-manager/ui-types";
+import {
+  ErrorNotification,
+  Loading,
+  Notification
+} from "@scm-manager/ui-components";
+import {
+  getFetchSourcesFailure,
+  isFetchSourcesPending,
+  getSources
+} from "../modules/sources";
+import { withRouter } from "react-router-dom";
+import { compose } from "redux";
+import { binder } from "@scm-manager/ui-extensions";
+
+const styles = {
+  iconColumn: {
+    width: "16px"
+  }
+};
+
+type Props = {
+  loading: boolean,
+  error: Error,
+  tree: File,
+  repository: Repository,
+  revision: string,
+  path: string,
+  baseUrl: string,
+  // context props
+  classes: any,
+  t: string => string,
+  match: any
+};
+
+export function findParent(path: string) {
+  if (path.endsWith("/")) {
+    path = path.substring(0, path.length - 1);
+  }
+
+  const index = path.lastIndexOf("/");
+  if (index > 0) {
+    return path.substring(0, index);
+  }
+  return "";
+}
+
+class FileTree extends React.Component<Props> {
+  render() {
+    const { error, loading, tree } = this.props;
+
+    if (error) {
+      return <ErrorNotification error={error} />;
+    }
+
+    if (loading) {
+      return <Loading />;
+    }
+    if (!tree) {
+      return null;
+    }
+
+    return <div className="panel-block">{this.renderSourcesTable()}</div>;
+  }
+
+  renderSourcesTable() {
+    const { tree, revision, path, baseUrl, classes, t } = this.props;
+
+    const files = [];
+
+    if (path) {
+      files.push({
+        name: "..",
+        path: findParent(path),
+        directory: true
+      });
+    }
+
+    const compareFiles = function(f1: File, f2: File): number {
+      if (f1.directory) {
+        if (f2.directory) {
+          return f1.name.localeCompare(f2.name);
+        } else {
+          return -1;
+        }
+      } else {
+        if (f2.directory) {
+          return 1;
+        } else {
+          return f1.name.localeCompare(f2.name);
+        }
+      }
+    };
+
+    if (tree._embedded && tree._embedded.children) {
+      files.push(...tree._embedded.children.sort(compareFiles));
+    }
+
+    if (files && files.length > 0) {
+      let baseUrlWithRevision = baseUrl;
+      if (revision) {
+        baseUrlWithRevision += "/" + encodeURIComponent(revision);
+      } else {
+        baseUrlWithRevision += "/" + encodeURIComponent(tree.revision);
+      }
+
+      return (
+        <table className="table table-hover table-sm is-fullwidth">
+          <thead>
+            <tr>
+              <th className={classes.iconColumn} />
+              <th>{t("sources.file-tree.name")}</th>
+              <th className="is-hidden-mobile">
+                {t("sources.file-tree.length")}
+              </th>
+              <th className="is-hidden-mobile">
+                {t("sources.file-tree.lastModified")}
+              </th>
+              <th className="is-hidden-mobile">
+                {t("sources.file-tree.description")}
+              </th>
+              {binder.hasExtension("repos.sources.tree.row.right") && (
+                <th className="is-hidden-mobile" />
+              )}
+            </tr>
+          </thead>
+          <tbody>
+            {files.map(file => (
+              <FileTreeLeaf
+                key={file.name}
+                file={file}
+                baseUrl={baseUrlWithRevision}
+              />
+            ))}
+          </tbody>
+        </table>
+      );
+    }
+    return <Notification type="info">{t("sources.noSources")}</Notification>;
+  }
+}
+
+const mapStateToProps = (state: any, ownProps: Props) => {
+  const { repository, revision, path } = ownProps;
+
+  const loading = isFetchSourcesPending(state, repository, revision, path);
+  const error = getFetchSourcesFailure(state, repository, revision, path);
+  const tree = getSources(state, repository, revision, path);
+
+  return {
+    revision,
+    path,
+    loading,
+    error,
+    tree
+  };
+};
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps)
+)(injectSheet(styles)(translate("repos")(FileTree)));

scm-ui/ui-webapp/src/repos/sources/components/FileTree.test.js

@@ -0,0 +1,12 @@
+// @flow
+
+import { findParent } from "./FileTree";
+
+describe("find parent tests", () => {
+  it("should return the parent path", () => {
+    expect(findParent("src/main/js/")).toBe("src/main");
+    expect(findParent("src/main/js")).toBe("src/main");
+    expect(findParent("src/main")).toBe("src");
+    expect(findParent("src")).toBe("");
+  });
+});

scm-ui/ui-webapp/src/repos/sources/components/FileTreeLeaf.js

@@ -0,0 +1,110 @@
+//@flow
+import * as React from "react";
+import injectSheet from "react-jss";
+import { DateFromNow, FileSize } from "@scm-manager/ui-components";
+import FileIcon from "./FileIcon";
+import { Link } from "react-router-dom";
+import type { File } from "@scm-manager/ui-types";
+import classNames from "classnames";
+import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
+
+const styles = {
+  iconColumn: {
+    width: "16px"
+  },
+  wordBreakMinWidth: {
+    minWidth: "10em"
+  }
+};
+
+type Props = {
+  file: File,
+  baseUrl: string,
+
+  // context props
+  classes: any
+};
+
+export function createLink(base: string, file: File) {
+  let link = base;
+  if (file.path) {
+    let path = file.path;
+    if (path.startsWith("/")) {
+      path = path.substring(1);
+    }
+    link += "/" + path;
+  }
+  if (!link.endsWith("/")) {
+    link += "/";
+  }
+  return link;
+}
+
+class FileTreeLeaf extends React.Component<Props> {
+  createLink = (file: File) => {
+    return createLink(this.props.baseUrl, file);
+  };
+
+  createFileIcon = (file: File) => {
+    if (file.directory) {
+      return (
+        <Link to={this.createLink(file)}>
+          <FileIcon file={file} />
+        </Link>
+      );
+    }
+    return (
+      <Link to={this.createLink(file)}>
+        <FileIcon file={file} />
+      </Link>
+    );
+  };
+
+  createFileName = (file: File) => {
+    if (file.directory) {
+      return <Link to={this.createLink(file)}>{file.name}</Link>;
+    }
+    return <Link to={this.createLink(file)}>{file.name}</Link>;
+  };
+
+  render() {
+    const { file, classes } = this.props;
+
+    const fileSize = file.directory ? "" : <FileSize bytes={file.length} />;
+
+    return (
+      <tr>
+        <td className={classes.iconColumn}>{this.createFileIcon(file)}</td>
+        <td className={classNames(classes.wordBreakMinWidth, "is-word-break")}>
+          {this.createFileName(file)}
+        </td>
+        <td className="is-hidden-mobile">{fileSize}</td>
+        <td className="is-hidden-mobile">
+          <DateFromNow date={file.lastModified} />
+        </td>
+        <td
+          className={classNames(
+            classes.wordBreakMinWidth,
+            "is-word-break",
+            "is-hidden-mobile"
+          )}
+        >
+          {file.description}
+        </td>
+        {binder.hasExtension("repos.sources.tree.row.right") && (
+          <td className="is-hidden-mobile">
+            {!file.directory && (
+              <ExtensionPoint
+                name="repos.sources.tree.row.right"
+                props={{ file }}
+                renderAll={true}
+              />
+            )}
+          </td>
+        )}
+      </tr>
+    );
+  }
+}
+
+export default injectSheet(styles)(FileTreeLeaf);

scm-ui/ui-webapp/src/repos/sources/components/FileTreeLeaf.test.js

@@ -0,0 +1,30 @@
+// @flow
+
+import { createLink } from "./FileTreeLeaf";
+import type { File } from "@scm-manager/ui-types";
+
+describe("create link tests", () => {
+  function dir(path: string): File {
+    return {
+      name: "dir",
+      path: path,
+      directory: true,
+      length: 1,
+      revision: "1a",
+      _links: {},
+      _embedded: {
+        children: []
+      }
+    };
+  }
+
+  it("should create link", () => {
+    expect(createLink("src", dir("main"))).toBe("src/main/");
+    expect(createLink("src", dir("/main"))).toBe("src/main/");
+    expect(createLink("src", dir("/main/"))).toBe("src/main/");
+  });
+
+  it("should return base url if the directory path is empty", () => {
+    expect(createLink("src", dir(""))).toBe("src/");
+  });
+});

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

@@ -0,0 +1,26 @@
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import type { File } from "@scm-manager/ui-types";
+import { DownloadButton } from "@scm-manager/ui-components";
+
+type Props = {
+  t: string => string,
+  file: File
+};
+
+class DownloadViewer extends React.Component<Props> {
+  render() {
+    const { t, file } = this.props;
+    return (
+      <div className="has-text-centered">
+        <DownloadButton
+          url={file._links.self.href}
+          displayName={t("sources.content.downloadButton")}
+        />
+      </div>
+    );
+  }
+}
+
+export default translate("repos")(DownloadViewer);

scm-ui/ui-webapp/src/repos/sources/components/content/FileButtonGroup.js

@@ -0,0 +1,57 @@
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import { ButtonAddons, Button } from "@scm-manager/ui-components";
+
+type Props = {
+  t: string => string,
+  historyIsSelected: boolean,
+  showHistory: boolean => void
+};
+
+class FileButtonGroup extends React.Component<Props> {
+  showHistory = () => {
+    this.props.showHistory(true);
+  };
+
+  showSources = () => {
+    this.props.showHistory(false);
+  };
+
+  color = (selected: boolean) => {
+    return selected ? "link is-selected" : null;
+  };
+
+  render() {
+    const { t, historyIsSelected } = this.props;
+
+    return (
+      <ButtonAddons>
+        <div title={t("sources.content.sourcesButton")}>
+          <Button
+            action={this.showSources}
+            className="reduced"
+            color={this.color(!historyIsSelected)}
+          >
+            <span className="icon">
+              <i className="fas fa-code" />
+            </span>
+          </Button>
+        </div>
+        <div title={t("sources.content.historyButton")}>
+          <Button
+            action={this.showHistory}
+            className="reduced"
+            color={this.color(historyIsSelected)}
+          >
+            <span className="icon">
+              <i className="fas fa-history" />
+            </span>
+          </Button>
+        </div>
+      </ButtonAddons>
+    );
+  }
+}
+
+export default translate("repos")(FileButtonGroup);

scm-ui/ui-webapp/src/repos/sources/components/content/ImageViewer.js

@@ -0,0 +1,24 @@
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import type { File } from "@scm-manager/ui-types";
+
+type Props = {
+  t: string => string,
+  file: File
+};
+
+class ImageViewer extends React.Component<Props> {
+  render() {
+    const { file } = this.props;
+    return (
+      <div className="has-text-centered">
+        <figure>
+          <img src={file._links.self.href} alt={file._links.self.href} />
+        </figure>
+      </div>
+    );
+  }
+}
+
+export default translate("repos")(ImageViewer);

scm-ui/ui-webapp/src/repos/sources/components/content/SourcecodeViewer.js

@@ -0,0 +1,92 @@
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import { apiClient, SyntaxHighlighter } from "@scm-manager/ui-components";
+import type { File } from "@scm-manager/ui-types";
+import { ErrorNotification, Loading } from "@scm-manager/ui-components";
+
+type Props = {
+  t: string => string,
+  file: File,
+  language: string
+};
+
+type State = {
+  content: string,
+  error?: Error,
+  loaded: boolean
+};
+
+class SourcecodeViewer extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      content: "",
+      loaded: false
+    };
+  }
+
+  componentDidMount() {
+    const { file } = this.props;
+    getContent(file._links.self.href)
+      .then(result => {
+        if (result.error) {
+          this.setState({
+            ...this.state,
+            error: result.error,
+            loaded: true
+          });
+        } else {
+          this.setState({
+            ...this.state,
+            content: result,
+            loaded: true
+          });
+        }
+      })
+      .catch(err => {});
+  }
+
+  render() {
+    const { content, error, loaded } = this.state;
+    const language = this.props.language;
+
+    if (error) {
+      return <ErrorNotification error={error} />;
+    }
+
+    if (!loaded) {
+      return <Loading />;
+    }
+
+    if (!content) {
+      return null;
+    }
+
+    return (
+      <SyntaxHighlighter
+        language={getLanguage(language)}
+        value= {content}
+      />
+    );
+  }
+}
+
+export function getLanguage(language: string) {
+  return language.toLowerCase();
+}
+
+export function getContent(url: string) {
+  return apiClient
+    .get(url)
+    .then(response => response.text())
+    .then(response => {
+      return response;
+    })
+    .catch(err => {
+      return { error: err };
+    });
+}
+
+export default translate("repos")(SourcecodeViewer);

scm-ui/ui-webapp/src/repos/sources/components/content/SourcecodeViewer.test.js

@@ -0,0 +1,33 @@
+//@flow
+import fetchMock from "fetch-mock";
+import {
+  getContent,
+  getLanguage
+} from "./SourcecodeViewer";
+
+describe("get content", () => {
+  const CONTENT_URL = "/repositories/scmadmin/TestRepo/content/testContent";
+
+  afterEach(() => {
+    fetchMock.reset();
+    fetchMock.restore();
+  });
+
+  it("should return content", done => {
+    fetchMock.getOnce("/api/v2" + CONTENT_URL, "This is a testContent");
+
+    getContent(CONTENT_URL).then(content => {
+      expect(content).toBe("This is a testContent");
+      done();
+    });
+  });
+});
+
+describe("get correct language type", () => {
+  it("should return javascript", () => {
+    expect(getLanguage("JAVASCRIPT")).toBe("javascript");
+  });
+  it("should return nothing for plain text", () => {
+    expect(getLanguage("")).toBe("");
+  });
+});

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

@@ -0,0 +1,222 @@
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import type { File, Repository } from "@scm-manager/ui-types";
+import {
+  DateFromNow,
+  ButtonGroup,
+  FileSize,
+  ErrorNotification
+} from "@scm-manager/ui-components";
+import injectSheet from "react-jss";
+import classNames from "classnames";
+import FileButtonGroup from "../components/content/FileButtonGroup";
+import SourcesView from "./SourcesView";
+import HistoryView from "./HistoryView";
+import { getSources } from "../modules/sources";
+import { connect } from "react-redux";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
+
+type Props = {
+  loading: boolean,
+  file: File,
+  repository: Repository,
+  revision: string,
+  path: string,
+  classes: any,
+  t: string => string
+};
+
+type State = {
+  collapsed: boolean,
+  showHistory: boolean,
+  errorFromExtension?: Error
+};
+
+const styles = {
+  pointer: {
+    cursor: "pointer"
+  },
+  marginInHeader: {
+    marginRight: "0.5em"
+  },
+  isVerticalCenter: {
+    display: "flex",
+    alignItems: "center"
+  },
+  hasBackground: {
+    backgroundColor: "#FBFBFB"
+  }
+};
+
+class Content extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      collapsed: true,
+      showHistory: false
+    };
+  }
+
+  toggleCollapse = () => {
+    this.setState(prevState => ({
+      collapsed: !prevState.collapsed
+    }));
+  };
+
+  setShowHistoryState(showHistory: boolean) {
+    this.setState({
+      ...this.state,
+      showHistory
+    });
+  }
+
+  handleExtensionError = (error: Error) => {
+    this.setState({ errorFromExtension: error });
+  };
+
+  showHeader() {
+    const { file, revision, classes } = this.props;
+    const { showHistory, collapsed } = this.state;
+    const icon = collapsed ? "fa-angle-right" : "fa-angle-down";
+
+    const selector = file._links.history ? (
+      <FileButtonGroup
+        file={file}
+        historyIsSelected={showHistory}
+        showHistory={(changeShowHistory: boolean) =>
+          this.setShowHistoryState(changeShowHistory)
+        }
+      />
+    ) : null;
+
+    return (
+      <span className={classes.pointer}>
+        <article className={classNames("media", classes.isVerticalCenter)}>
+          <div className="media-content" onClick={this.toggleCollapse}>
+            <i
+              className={classNames(
+                "fa is-medium",
+                icon,
+                classes.marginInHeader
+              )}
+            />
+            <span className="is-word-break">{file.name}</span>
+          </div>
+          <div className="buttons is-grouped">
+            <div className={classes.marginInHeader}>{selector}</div>
+            <ExtensionPoint
+              name="repos.sources.content.actionbar"
+              props={{
+                file,
+                revision,
+                handleExtensionError: this.handleExtensionError
+              }}
+              renderAll={true}
+            />
+          </div>
+        </article>
+      </span>
+    );
+  }
+
+  showMoreInformation() {
+    const collapsed = this.state.collapsed;
+    const { classes, file, revision, t, repository } = this.props;
+    const date = <DateFromNow date={file.lastModified} />;
+    const description = file.description ? (
+      <p>
+        {file.description.split("\n").map((item, key) => {
+          return (
+            <span key={key}>
+              {item}
+              <br />
+            </span>
+          );
+        })}
+      </p>
+    ) : null;
+    const fileSize = file.directory ? "" : <FileSize bytes={file.length} />;
+    if (!collapsed) {
+      return (
+        <div className={classNames("panel-block", classes.hasBackground)}>
+          <table className={classNames("table", classes.hasBackground)}>
+            <tbody>
+              <tr>
+                <td>{t("sources.content.path")}</td>
+                <td className="is-word-break">{file.path}</td>
+              </tr>
+              <tr>
+                <td>{t("sources.content.branch")}</td>
+                <td className="is-word-break">{revision}</td>
+              </tr>
+              <tr>
+                <td>{t("sources.content.size")}</td>
+                <td>{fileSize}</td>
+              </tr>
+              <tr>
+                <td>{t("sources.content.lastModified")}</td>
+                <td>{date}</td>
+              </tr>
+              <tr>
+                <td>{t("sources.content.description")}</td>
+                <td className="is-word-break">{description}</td>
+              </tr>
+              <ExtensionPoint
+                name="repos.content.metadata"
+                renderAll={true}
+                props={{ file, repository, revision }}
+              />
+            </tbody>
+          </table>
+        </div>
+      );
+    }
+    return null;
+  }
+
+  render() {
+    const { file, revision, repository, path } = this.props;
+    const { showHistory, errorFromExtension } = this.state;
+
+    const header = this.showHeader();
+    const content =
+      showHistory && file._links.history ? (
+        <HistoryView file={file} repository={repository} />
+      ) : (
+        <SourcesView
+          revision={revision}
+          file={file}
+          repository={repository}
+          path={path}
+        />
+      );
+    const moreInformation = this.showMoreInformation();
+
+    return (
+      <div>
+        <div className="panel">
+          <div className="panel-heading">{header}</div>
+          {moreInformation}
+          {content}
+        </div>
+        {errorFromExtension && <ErrorNotification error={errorFromExtension} />}
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state: any, ownProps: Props) => {
+  const { repository, revision, path } = ownProps;
+
+  const file = getSources(state, repository, revision, path);
+
+  return {
+    file
+  };
+};
+
+export default injectSheet(styles)(
+  connect(mapStateToProps)(translate("repos")(Content))
+);

scm-ui/ui-webapp/src/repos/sources/containers/HistoryView.js

@@ -0,0 +1,113 @@
+// @flow
+import React from "react";
+import type {
+  File,
+  Changeset,
+  Repository,
+  PagedCollection
+} from "@scm-manager/ui-types";
+import {
+  ErrorNotification,
+  Loading,
+  StatePaginator,
+  ChangesetList
+} from "@scm-manager/ui-components";
+import { getHistory } from "./history";
+
+type Props = {
+  file: File,
+  repository: Repository
+};
+
+type State = {
+  loaded: boolean,
+  changesets: Changeset[],
+  page: number,
+  pageCollection?: PagedCollection,
+  error?: Error
+};
+
+class HistoryView extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      loaded: false,
+      page: 1,
+      changesets: []
+    };
+  }
+
+  componentDidMount() {
+    const { file } = this.props;
+    this.updateHistory(file._links.history.href);
+  }
+
+  updateHistory(link: string) {
+    getHistory(link)
+      .then(result => {
+        if (result.error) {
+          this.setState({
+            ...this.state,
+            error: result.error,
+            loaded: true
+          });
+        } else {
+          this.setState({
+            ...this.state,
+            loaded: true,
+            changesets: result.changesets,
+            pageCollection: result.pageCollection,
+            page: result.pageCollection.page
+          });
+        }
+      })
+      .catch(err => {});
+  }
+
+  updatePage(page: number) {
+    const { file } = this.props;
+    const internalPage = page - 1;
+    this.updateHistory(
+      file._links.history.href + "?page=" + internalPage.toString()
+    );
+  }
+
+  showHistory() {
+    const { repository } = this.props;
+    const { changesets, page, pageCollection } = this.state;
+    const currentPage = page + 1;
+    return (
+      <>
+        <div className="panel-block">
+          <ChangesetList repository={repository} changesets={changesets} />
+        </div>
+        <div className="panel-footer">
+          <StatePaginator
+            page={currentPage}
+            collection={pageCollection}
+            updatePage={(newPage: number) => this.updatePage(newPage)}
+          />
+        </div>
+      </>
+    );
+  }
+
+  render() {
+    const { file } = this.props;
+    const { loaded, error } = this.state;
+
+    if (!file || !loaded) {
+      return <Loading />;
+    }
+    if (error) {
+      return <ErrorNotification error={error} />;
+    }
+
+    const history = this.showHistory();
+
+    return <>{history}</>;
+  }
+}
+
+export default HistoryView;

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

@@ -0,0 +1,228 @@
+// @flow
+import React from "react";
+import { connect } from "react-redux";
+import { withRouter } from "react-router-dom";
+import type { Branch, Repository } from "@scm-manager/ui-types";
+import FileTree from "../components/FileTree";
+import {
+  BranchSelector,
+  Breadcrumb,
+  ErrorNotification,
+  Loading
+} from "@scm-manager/ui-components";
+import { translate } from "react-i18next";
+import {
+  fetchBranches,
+  getBranches,
+  getFetchBranchesFailure,
+  isFetchBranchesPending
+} from "../../branches/modules/branches";
+import { compose } from "redux";
+import Content from "./Content";
+import { fetchSources, isDirectory } from "../modules/sources";
+
+type Props = {
+  repository: Repository,
+  loading: boolean,
+  error: Error,
+  baseUrl: string,
+  branches: Branch[],
+  revision: string,
+  path: string,
+  currentFileIsDirectory: boolean,
+
+  // dispatch props
+  fetchBranches: Repository => void,
+  fetchSources: (Repository, string, string) => void,
+
+  // Context props
+  history: any,
+  match: any,
+  location: any,
+  t: string => string
+};
+
+type State = {
+  selectedBranch: any
+};
+
+class Sources extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      selectedBranch: null
+    };
+  }
+
+  componentDidMount() {
+    const {
+      fetchBranches,
+      repository,
+      revision,
+      path,
+      fetchSources
+    } = this.props;
+
+    fetchBranches(repository);
+    fetchSources(repository, revision, path);
+
+    this.redirectToDefaultBranch();
+  }
+
+  componentDidUpdate(prevProps) {
+    const { fetchSources, repository, revision, path } = this.props;
+    if (prevProps.revision !== revision || prevProps.path !== path) {
+      fetchSources(repository, revision, path);
+    }
+
+    this.redirectToDefaultBranch();
+  }
+
+  redirectToDefaultBranch = () => {
+    const { branches } = this.props;
+    if (this.shouldRedirectToDefaultBranch()) {
+      const defaultBranches = branches.filter(b => b.defaultBranch);
+
+      if (defaultBranches.length > 0) {
+        this.branchSelected(defaultBranches[0]);
+      }
+    }
+  };
+
+  shouldRedirectToDefaultBranch = () => {
+    const { branches, revision } = this.props;
+    return branches && !revision;
+  };
+
+  branchSelected = (branch?: Branch) => {
+    const { baseUrl, history, path } = this.props;
+    let url;
+    if (branch) {
+      this.setState({ selectedBranch: branch });
+      if (path) {
+        url = `${baseUrl}/${encodeURIComponent(branch.name)}/${path}`;
+      } else {
+        url = `${baseUrl}/${encodeURIComponent(branch.name)}/`;
+      }
+    } else {
+      this.setState({ selectedBranch: null });
+      url = `${baseUrl}/`;
+    }
+    history.push(url);
+  };
+
+  render() {
+    const {
+      repository,
+      baseUrl,
+      branches,
+      loading,
+      error,
+      revision,
+      path,
+      currentFileIsDirectory
+    } = this.props;
+
+    const { selectedBranch } = this.state;
+
+    if (error) {
+      return <ErrorNotification error={error} />;
+    }
+
+    if (loading) {
+      return <Loading />;
+    }
+
+    if (currentFileIsDirectory) {
+      return (
+        <div className="panel">
+          {this.renderBranchSelector()}
+          <Breadcrumb
+            revision={encodeURIComponent(revision)}
+            path={path}
+            baseUrl={baseUrl}
+            branch={selectedBranch}
+            defaultBranch={
+              branches && branches.filter(b => b.defaultBranch === true)[0]
+            }
+            branches={branches && branches}
+            repository={repository}
+          />
+          <FileTree
+            repository={repository}
+            revision={revision}
+            path={path}
+            baseUrl={baseUrl}
+          />
+        </div>
+      );
+    } else {
+      return (
+        <Content repository={repository} revision={revision} path={path} />
+      );
+    }
+  }
+
+  renderBranchSelector = () => {
+    const { branches, revision, t } = this.props;
+
+    if (branches) {
+      return (
+        <div className="panel-heading">
+          <BranchSelector
+            branches={branches}
+            selectedBranch={revision}
+            label={t("changesets.branchSelectorLabel")}
+            selected={(b: Branch) => {
+              this.branchSelected(b);
+            }}
+          />
+        </div>
+      );
+    }
+    return null;
+  };
+}
+
+const mapStateToProps = (state, ownProps) => {
+  const { repository, match } = ownProps;
+  const { revision, path } = match.params;
+  const decodedRevision = revision ? decodeURIComponent(revision) : undefined;
+  const loading = isFetchBranchesPending(state, repository);
+  const error = getFetchBranchesFailure(state, repository);
+  const branches = getBranches(state, repository);
+  const currentFileIsDirectory = decodedRevision
+    ? isDirectory(state, repository, decodedRevision, path)
+    : isDirectory(state, repository, revision, path);
+
+  return {
+    repository,
+    revision: decodedRevision,
+    path,
+    loading,
+    error,
+    branches,
+    currentFileIsDirectory
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    fetchBranches: (repository: Repository) => {
+      dispatch(fetchBranches(repository));
+    },
+    fetchSources: (repository: Repository, revision: string, path: string) => {
+      dispatch(fetchSources(repository, revision, path));
+    }
+  };
+};
+
+export default compose(
+  translate("repos"),
+  withRouter,
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )
+)(Sources);

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

@@ -0,0 +1,97 @@
+// @flow
+import React from "react";
+
+import SourcecodeViewer from "../components/content/SourcecodeViewer";
+import ImageViewer from "../components/content/ImageViewer";
+import DownloadViewer from "../components/content/DownloadViewer";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
+import { getContentType } from "./contentType";
+import type { File, Repository } from "@scm-manager/ui-types";
+import { ErrorNotification, Loading } from "@scm-manager/ui-components";
+
+type Props = {
+  repository: Repository,
+  file: File,
+  revision: string,
+  path: string
+};
+
+type State = {
+  contentType: string,
+  language: string,
+  loaded: boolean,
+  error?: Error
+};
+
+class SourcesView extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      contentType: "",
+      language: "",
+      loaded: false
+    };
+  }
+
+  componentDidMount() {
+    const { file } = this.props;
+    getContentType(file._links.self.href)
+      .then(result => {
+        if (result.error) {
+          this.setState({
+            ...this.state,
+            error: result.error,
+            loaded: true
+          });
+        } else {
+          this.setState({
+            ...this.state,
+            contentType: result.type,
+            language: result.language,
+            loaded: true
+          });
+        }
+      })
+      .catch(err => {});
+  }
+
+  showSources() {
+    const { file, revision } = this.props;
+    const { contentType, language } = this.state;
+    if (contentType.startsWith("image/")) {
+      return <ImageViewer file={file} />;
+    } else if (language) {
+      return <SourcecodeViewer file={file} language={language} />;
+    } else if (contentType.startsWith("text/")) {
+      return <SourcecodeViewer file={file} language="none" />;
+    } else {
+      return (
+        <ExtensionPoint
+          name="repos.sources.view"
+          props={{ file, contentType, revision }}
+        >
+          <DownloadViewer file={file} />
+        </ExtensionPoint>
+      );
+    }
+  }
+
+  render() {
+    const { file } = this.props;
+    const { loaded, error } = this.state;
+
+    if (!file || !loaded) {
+      return <Loading />;
+    }
+    if (error) {
+      return <ErrorNotification error={error} />;
+    }
+
+    const sources = this.showSources();
+
+    return <div className="panel-block">{sources}</div>;
+  }
+}
+
+export default SourcesView;

scm-ui/ui-webapp/src/repos/sources/containers/contentType.js

@@ -0,0 +1,16 @@
+//@flow
+import { apiClient } from "@scm-manager/ui-components";
+
+export function getContentType(url: string) {
+  return apiClient
+    .head(url)
+    .then(response => {
+      return {
+        type: response.headers.get("Content-Type"),
+        language: response.headers.get("X-Programming-Language")
+      };
+    })
+    .catch(err => {
+      return { error: err };
+    });
+}

scm-ui/ui-webapp/src/repos/sources/containers/contentType.test.js

@@ -0,0 +1,29 @@
+//@flow
+import fetchMock from "fetch-mock";
+import { getContentType } from "./contentType";
+
+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",
+      "X-Programming-Language": "JAVA"
+    };
+
+    fetchMock.head("/api/v2" + CONTENT_URL, {
+      headers
+    });
+
+    getContentType(CONTENT_URL).then(content => {
+      expect(content.type).toBe("application/text");
+      expect(content.language).toBe("JAVA");
+      done();
+    });
+  });
+});

scm-ui/ui-webapp/src/repos/sources/containers/history.js

@@ -0,0 +1,22 @@
+//@flow
+import { apiClient } from "@scm-manager/ui-components";
+
+export function getHistory(url: string) {
+  return apiClient
+    .get(url)
+    .then(response => response.json())
+    .then(result => {
+      return {
+        changesets: result._embedded.changesets,
+        pageCollection: {
+          _embedded: result._embedded,
+          _links: result._links,
+          page: result.page,
+          pageTotal: result.pageTotal
+        }
+      };
+    })
+    .catch(err => {
+      return { error: err };
+    });
+}

scm-ui/ui-webapp/src/repos/sources/containers/history.test.js

@@ -0,0 +1,53 @@
+//@flow
+import fetchMock from "fetch-mock";
+import { getHistory } from "./history";
+
+describe("get content type", () => {
+  const FILE_URL = "/repositories/scmadmin/TestRepo/history/file";
+
+  afterEach(() => {
+    fetchMock.reset();
+    fetchMock.restore();
+  });
+
+  const history = {
+    page: 0,
+    pageTotal: 10,
+    _links: {
+      self: {
+        href: "/repositories/scmadmin/TestRepo/history/file?page=0&pageSize=10"
+      },
+      first: {
+        href: "/repositories/scmadmin/TestRepo/history/file?page=0&pageSize=10"
+      },
+      next: {
+        href: "/repositories/scmadmin/TestRepo/history/file?page=1&pageSize=10"
+      },
+      last: {
+        href: "/repositories/scmadmin/TestRepo/history/file?page=9&pageSize=10"
+      }
+    },
+    _embedded: {
+      changesets: [
+        {
+          id: "1234"
+        },
+        {
+          id: "2345"
+        }
+      ]
+    }
+  };
+
+  it("should return history", done => {
+    fetchMock.get("/api/v2" + FILE_URL, history);
+
+    getHistory(FILE_URL).then(content => {
+      expect(content.changesets).toEqual(history._embedded.changesets);
+      expect(content.pageCollection.page).toEqual(history.page);
+      expect(content.pageCollection.pageTotal).toEqual(history.pageTotal);
+      expect(content.pageCollection._links).toEqual(history._links);
+      done();
+    });
+  });
+});

scm-ui/ui-webapp/src/repos/sources/modules/sources.js

@@ -0,0 +1,154 @@
+// @flow
+
+import * as types from "../../../modules/types";
+import type { Repository, File, Action } from "@scm-manager/ui-types";
+import { apiClient } from "@scm-manager/ui-components";
+import { isPending } from "../../../modules/pending";
+import { getFailure } from "../../../modules/failure";
+
+export const FETCH_SOURCES = "scm/repos/FETCH_SOURCES";
+export const FETCH_SOURCES_PENDING = `${FETCH_SOURCES}_${types.PENDING_SUFFIX}`;
+export const FETCH_SOURCES_SUCCESS = `${FETCH_SOURCES}_${types.SUCCESS_SUFFIX}`;
+export const FETCH_SOURCES_FAILURE = `${FETCH_SOURCES}_${types.FAILURE_SUFFIX}`;
+
+export function fetchSources(
+  repository: Repository,
+  revision: string,
+  path: string
+) {
+  return function(dispatch: any) {
+    dispatch(fetchSourcesPending(repository, revision, path));
+    return apiClient
+      .get(createUrl(repository, revision, path))
+      .then(response => response.json())
+      .then(sources => {
+        dispatch(fetchSourcesSuccess(repository, revision, path, sources));
+      })
+      .catch(err => {
+        dispatch(fetchSourcesFailure(repository, revision, path, err));
+      });
+  };
+}
+
+function createUrl(repository: Repository, revision: string, path: string) {
+  const base = repository._links.sources.href;
+  if (!revision && !path) {
+    return base;
+  }
+
+  // TODO handle trailing slash
+  const pathDefined = path ? path : "";
+  return `${base}${encodeURIComponent(revision)}/${pathDefined}`;
+}
+
+export function fetchSourcesPending(
+  repository: Repository,
+  revision: string,
+  path: string
+): Action {
+  return {
+    type: FETCH_SOURCES_PENDING,
+    itemId: createItemId(repository, revision, path)
+  };
+}
+
+export function fetchSourcesSuccess(
+  repository: Repository,
+  revision: string,
+  path: string,
+  sources: File
+) {
+  return {
+    type: FETCH_SOURCES_SUCCESS,
+    payload: sources,
+    itemId: createItemId(repository, revision, path)
+  };
+}
+
+export function fetchSourcesFailure(
+  repository: Repository,
+  revision: string,
+  path: string,
+  error: Error
+): Action {
+  return {
+    type: FETCH_SOURCES_FAILURE,
+    payload: error,
+    itemId: createItemId(repository, revision, path)
+  };
+}
+
+function createItemId(repository: Repository, revision: string, path: string) {
+  const revPart = revision ? revision : "_";
+  const pathPart = path ? path : "";
+  return `${repository.namespace}/${repository.name}/${revPart}/${pathPart}`;
+}
+
+// reducer
+
+export default function reducer(
+  state: any = {},
+  action: Action = { type: "UNKNOWN" }
+): any {
+  if (action.itemId && action.type === FETCH_SOURCES_SUCCESS) {
+    return {
+      ...state,
+      [action.itemId]: action.payload
+    };
+  }
+  return state;
+}
+
+// selectors
+
+export function isDirectory(
+  state: any,
+  repository: Repository,
+  revision: string,
+  path: string
+): boolean {
+  const currentFile = getSources(state, repository, revision, path);
+  if (currentFile && !currentFile.directory) {
+    return false;
+  } else {
+    return true; //also return true if no currentFile is found since it is the "default" path
+  }
+}
+
+export function getSources(
+  state: any,
+  repository: Repository,
+  revision: string,
+  path: string
+): ?File {
+  if (state.sources) {
+    return state.sources[createItemId(repository, revision, path)];
+  }
+  return null;
+}
+
+export function isFetchSourcesPending(
+  state: any,
+  repository: Repository,
+  revision: string,
+  path: string
+): boolean {
+  return isPending(
+    state,
+    FETCH_SOURCES,
+    createItemId(repository, revision, path)
+  );
+}
+
+export function getFetchSourcesFailure(
+  state: any,
+  repository: Repository,
+  revision: string,
+  path: string
+): ?Error {
+  return getFailure(
+    state,
+    FETCH_SOURCES,
+    createItemId(repository, revision, path)
+  );
+}

scm-ui/ui-webapp/src/repos/sources/modules/sources.test.js

@@ -0,0 +1,274 @@
+// @flow
+
+import type { Repository, File } from "@scm-manager/ui-types";
+import configureMockStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import fetchMock from "fetch-mock";
+import {
+  FETCH_SOURCES,
+  FETCH_SOURCES_FAILURE,
+  FETCH_SOURCES_PENDING,
+  FETCH_SOURCES_SUCCESS,
+  fetchSources,
+  getFetchSourcesFailure,
+  isFetchSourcesPending,
+  default as reducer,
+  getSources,
+  fetchSourcesSuccess,
+  isDirectory
+} from "./sources";
+
+const sourcesUrl =
+  "http://localhost:8081/scm/rest/api/v2/repositories/scm/core/sources/";
+
+const repository: Repository = {
+  name: "core",
+  namespace: "scm",
+  type: "git",
+  _links: {
+    sources: {
+      href: sourcesUrl
+    }
+  }
+};
+
+const collection = {
+  name: "src",
+  path: "src",
+  directory: true,
+  description: "foo",
+  length: 176,
+  revision: "76aae4bb4ceacf0e88938eb5b6832738b7d537b4",
+  subRepository: undefined,
+  _links: {
+    self: {
+      href:
+        "http://localhost:8081/scm/rest/api/v2/repositories/scm/core/sources/76aae4bb4ceacf0e88938eb5b6832738b7d537b4/"
+    }
+  },
+  _embedded: {
+    children: [
+      {
+        name: "src",
+        path: "src",
+        directory: true,
+        description: "",
+        length: 176,
+        revision: "76aae4bb4ceacf0e88938eb5b6832738b7d537b4",
+        lastModified: "",
+        subRepository: undefined,
+        _links: {
+          self: {
+            href:
+              "http://localhost:8081/scm/rest/api/v2/repositories/scm/core/sources/76aae4bb4ceacf0e88938eb5b6832738b7d537b4/src"
+          }
+        },
+        _embedded: {
+          children: []
+        }
+      },
+      {
+        name: "package.json",
+        path: "package.json",
+        directory: false,
+        description: "bump version",
+        length: 780,
+        revision: "76aae4bb4ceacf0e88938eb5b6832738b7d537b4",
+        lastModified: "2017-07-31T11:17:19Z",
+        subRepository: undefined,
+        _links: {
+          self: {
+            href:
+              "http://localhost:8081/scm/rest/api/v2/repositories/scm/core/content/76aae4bb4ceacf0e88938eb5b6832738b7d537b4/package.json"
+          },
+          history: {
+            href:
+              "http://localhost:8081/scm/rest/api/v2/repositories/scm/core/sources/history/76aae4bb4ceacf0e88938eb5b6832738b7d537b4/package.json"
+          }
+        },
+        _embedded: {
+          children: []
+        }
+      }
+    ]
+  }
+};
+
+const noDirectory: File = {
+  name: "src",
+  path: "src",
+  directory: true,
+  length: 176,
+  revision: "abc",
+  _links: {
+    self: {
+      href:
+        "http://localhost:8081/scm/rest/api/v2/repositories/scm/core/sources/76aae4bb4ceacf0e88938eb5b6832738b7d537b4/src"
+    }
+  },
+  _embedded: {
+    children: []
+  }
+};
+
+describe("sources fetch", () => {
+  const mockStore = configureMockStore([thunk]);
+
+  afterEach(() => {
+    fetchMock.reset();
+    fetchMock.restore();
+  });
+
+  it("should fetch the sources of the repository", () => {
+    fetchMock.getOnce(sourcesUrl, collection);
+
+    const expectedActions = [
+      { type: FETCH_SOURCES_PENDING, itemId: "scm/core/_/" },
+      {
+        type: FETCH_SOURCES_SUCCESS,
+        itemId: "scm/core/_/",
+        payload: collection
+      }
+    ];
+
+    const store = mockStore({});
+    return store.dispatch(fetchSources(repository, "", "")).then(() => {
+      expect(store.getActions()).toEqual(expectedActions);
+    });
+  });
+
+  it("should fetch the sources of the repository with the given revision and path", () => {
+    fetchMock.getOnce(sourcesUrl + "abc/src", collection);
+
+    const expectedActions = [
+      { type: FETCH_SOURCES_PENDING, itemId: "scm/core/abc/src" },
+      {
+        type: FETCH_SOURCES_SUCCESS,
+        itemId: "scm/core/abc/src",
+        payload: collection
+      }
+    ];
+
+    const store = mockStore({});
+    return store.dispatch(fetchSources(repository, "abc", "src")).then(() => {
+      expect(store.getActions()).toEqual(expectedActions);
+    });
+  });
+
+  it("should dispatch FETCH_SOURCES_FAILURE on server error", () => {
+    fetchMock.getOnce(sourcesUrl, {
+      status: 500
+    });
+
+    const store = mockStore({});
+    return store.dispatch(fetchSources(repository, "", "")).then(() => {
+      const actions = store.getActions();
+      expect(actions[0].type).toBe(FETCH_SOURCES_PENDING);
+      expect(actions[1].type).toBe(FETCH_SOURCES_FAILURE);
+      expect(actions[1].itemId).toBe("scm/core/_/");
+      expect(actions[1].payload).toBeDefined();
+    });
+  });
+});
+
+describe("reducer tests", () => {
+  it("should return unmodified state on unknown action", () => {
+    const state = {};
+    expect(reducer(state)).toBe(state);
+  });
+
+  it("should store the collection, without revision and path", () => {
+    const expectedState = {
+      "scm/core/_/": collection
+    };
+    expect(
+      reducer({}, fetchSourcesSuccess(repository, "", "", collection))
+    ).toEqual(expectedState);
+  });
+
+  it("should store the collection, with revision and path", () => {
+    const expectedState = {
+      "scm/core/abc/src/main": collection
+    };
+    expect(
+      reducer(
+        {},
+        fetchSourcesSuccess(repository, "abc", "src/main", collection)
+      )
+    ).toEqual(expectedState);
+  });
+});
+
+describe("selector tests", () => {
+  it("should return false if it is no directory", () => {
+    const state = {
+      sources: {
+        "scm/core/abc/src/main/package.json": {
+          noDirectory
+        }
+      }
+    };
+    expect(
+      isDirectory(state, repository, "abc", "src/main/package.json")
+    ).toBeFalsy();
+  });
+
+  it("should return true if it is directory", () => {
+    const state = {
+      sources: {
+        "scm/core/abc/src": noDirectory
+      }
+    };
+    expect(isDirectory(state, repository, "abc", "src")).toBe(true);
+  });
+
+  it("should return null", () => {
+    expect(getSources({}, repository, "", "")).toBeFalsy();
+  });
+
+  it("should return the source collection without revision and path", () => {
+    const state = {
+      sources: {
+        "scm/core/_/": collection
+      }
+    };
+    expect(getSources(state, repository, "", "")).toBe(collection);
+  });
+
+  it("should return the source collection with revision and path", () => {
+    const state = {
+      sources: {
+        "scm/core/abc/src/main": collection
+      }
+    };
+    expect(getSources(state, repository, "abc", "src/main")).toBe(collection);
+  });
+
+  it("should return true, when fetch sources is pending", () => {
+    const state = {
+      pending: {
+        [FETCH_SOURCES + "/scm/core/_/"]: true
+      }
+    };
+    expect(isFetchSourcesPending(state, repository, "", "")).toEqual(true);
+  });
+
+  it("should return false, when fetch sources is not pending", () => {
+    expect(isFetchSourcesPending({}, repository, "", "")).toEqual(false);
+  });
+
+  const error = new Error("incredible error from hell");
+
+  it("should return error when fetch sources did fail", () => {
+    const state = {
+      failure: {
+        [FETCH_SOURCES + "/scm/core/_/"]: error
+      }
+    };
+    expect(getFetchSourcesFailure(state, repository, "", "")).toEqual(error);
+  });
+
+  it("should return undefined when fetch sources did not fail", () => {
+    expect(getFetchSourcesFailure({}, repository, "", "")).toBe(undefined);
+  });
+});