merge 2.0.0-m3

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

@@ -1,32 +1,28 @@
-// @flow
 import React from "react";
-import {connect} from "react-redux";
-import {translate} from "react-i18next";
+import { connect } from "react-redux";
+import { WithTranslation, withTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
-import {ExtensionPoint} from "@scm-manager/ui-extensions";
-import type {File, Repository} from "@scm-manager/ui-types";
-import {DateFromNow, ErrorNotification, FileSize, Icon} from "@scm-manager/ui-components";
-import {getSources} from "../modules/sources";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
+import { File, Repository } from "@scm-manager/ui-types";
+import { DateFromNow, ErrorNotification, FileSize, Icon } from "@scm-manager/ui-components";
+import { getSources } from "../modules/sources";
 import FileButtonAddons from "../components/content/FileButtonAddons";
 import SourcesView from "./SourcesView";
 import HistoryView from "./HistoryView";
 
-type Props = {
-  loading: boolean,
-  file: File,
-  repository: Repository,
-  revision: string,
-  path: string,
-
-  // context props
-  t: string => string
+type Props = WithTranslation & {
+  loading: boolean;
+  file: File;
+  repository: Repository;
+  revision: string;
+  path: string;
 };
 
 type State = {
-  collapsed: boolean,
-  showHistory: boolean,
-  errorFromExtension?: Error
+  collapsed: boolean;
+  showHistory: boolean;
+  errorFromExtension?: Error;
 };
 
 const VCenteredChild = styled.div`
@@ -73,7 +69,9 @@ class Content extends React.Component<Props, State> {
   }
 
   handleExtensionError = (error: Error) => {
-    this.setState({ errorFromExtension: error });
+    this.setState({
+      errorFromExtension: error
+    });
   };
 
   showHeader() {
@@ -85,9 +83,7 @@ class Content extends React.Component<Props, State> {
       <RightMarginFileButtonAddons
         file={file}
         historyIsSelected={showHistory}
-        showHistory={(changeShowHistory: boolean) =>
-          this.setShowHistoryState(changeShowHistory)
-        }
+        showHistory={(changeShowHistory: boolean) => this.setShowHistoryState(changeShowHistory)}
       />
     ) : null;
 
@@ -160,7 +156,11 @@ class Content extends React.Component<Props, State> {
               <ExtensionPoint
                 name="repos.content.metadata"
                 renderAll={true}
-                props={{ file, repository, revision }}
+                props={{
+                  file,
+                  repository,
+                  revision
+                }}
               />
             </tbody>
           </LighterGreyBackgroundTable>
@@ -179,12 +179,7 @@ class Content extends React.Component<Props, State> {
       showHistory && file._links.history ? (
         <HistoryView file={file} repository={repository} />
       ) : (
-        <SourcesView
-          revision={revision}
-          file={file}
-          repository={repository}
-          path={path}
-        />
+        <SourcesView revision={revision} file={file} repository={repository} path={path} />
       );
     const moreInformation = this.showMoreInformation();
 
@@ -211,4 +206,4 @@ const mapStateToProps = (state: any, ownProps: Props) => {
   };
 };
 
-export default connect(mapStateToProps)(translate("repos")(Content));
+export default connect(mapStateToProps)(withTranslation("repos")(Content));

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

@@ -1,30 +1,19 @@
-// @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 { 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
+  file: File;
+  repository: Repository;
 };
 
 type State = {
-  loaded: boolean,
-  changesets: Changeset[],
-  page: number,
-  pageCollection?: PagedCollection,
-  error?: Error
+  loaded: boolean;
+  changesets: Changeset[];
+  page: number;
+  pageCollection?: PagedCollection;
+  error?: Error;
 };
 
 class HistoryView extends React.Component<Props, State> {
@@ -68,9 +57,7 @@ class HistoryView extends React.Component<Props, State> {
   updatePage(page: number) {
     const { file } = this.props;
     const internalPage = page - 1;
-    this.updateHistory(
-      file._links.history.href + "?page=" + internalPage.toString()
-    );
+    this.updateHistory(file._links.history.href + "?page=" + internalPage.toString());
   }
 
   showHistory() {

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

@@ -0,0 +1,211 @@
+import React from "react";
+import { connect } from "react-redux";
+import { withRouter } from "react-router-dom";
+import { WithTranslation, withTranslation } from "react-i18next";
+import { Branch, Repository } from "@scm-manager/ui-types";
+import { BranchSelector, Breadcrumb, ErrorNotification, Loading } from "@scm-manager/ui-components";
+import FileTree from "../components/FileTree";
+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 = WithTranslation & {
+  repository: Repository;
+  loading: boolean;
+  error: Error;
+  baseUrl: string;
+  branches: Branch[];
+  revision: string;
+  path: string;
+  currentFileIsDirectory: boolean;
+
+  // dispatch props
+  fetchBranches: (p: Repository) => void;
+  fetchSources: (p1: Repository, p2: string, p3: string) => void;
+
+  // Context props
+  history: any;
+  match: any;
+  location: any;
+};
+
+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, loading, error, revision, path, currentFileIsDirectory } = this.props;
+
+    if (error) {
+      return <ErrorNotification error={error} />;
+    }
+
+    if (loading) {
+      return <Loading />;
+    }
+
+    if (currentFileIsDirectory) {
+      return (
+        <div className="panel">
+          {this.renderBranchSelector()}
+          {this.renderBreadcrumb()}
+          <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;
+  };
+
+  renderBreadcrumb = () => {
+    const { revision, path, baseUrl, branches, repository } = this.props;
+    const { selectedBranch } = this.state;
+
+    if (revision) {
+      return (
+        <Breadcrumb
+          revision={encodeURIComponent(revision)}
+          path={path}
+          baseUrl={baseUrl}
+          branch={selectedBranch}
+          defaultBranch={branches && branches.filter(b => b.defaultBranch === true)[0]}
+          branches={branches}
+          repository={repository}
+        />
+      );
+    }
+    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(
+  withTranslation("repos"),
+  withRouter,
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )
+)(Sources);

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

@@ -1,4 +1,3 @@
-// @flow
 import React from "react";
 
 import SourcecodeViewer from "../components/content/SourcecodeViewer";
@@ -6,21 +5,21 @@ 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 { 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
+  repository: Repository;
+  file: File;
+  revision: string;
+  path: string;
 };
 
 type State = {
-  contentType: string,
-  language: string,
-  loaded: boolean,
-  error?: Error
+  contentType: string;
+  language: string;
+  loaded: boolean;
+  error?: Error;
 };
 
 class SourcesView extends React.Component<Props, State> {
@@ -69,7 +68,11 @@ class SourcesView extends React.Component<Props, State> {
       return (
         <ExtensionPoint
           name="repos.sources.view"
-          props={{ file, contentType, revision }}
+          props={{
+            file,
+            contentType,
+            revision
+          }}
         >
           <DownloadViewer file={file} />
         </ExtensionPoint>

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

@@ -1,4 +1,3 @@
-//@flow
 import fetchMock from "fetch-mock";
 import { getContentType } from "./contentType";
 
@@ -11,7 +10,7 @@ describe("get content type", () => {
   });
 
   it("should return content", done => {
-    let headers = {
+    const headers = {
       "Content-Type": "application/text",
       "X-Programming-Language": "JAVA"
     };

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

@@ -1,4 +1,3 @@
-//@flow
 import { apiClient } from "@scm-manager/ui-components";
 
 export function getContentType(url: string) {
@@ -11,6 +10,8 @@ export function getContentType(url: string) {
       };
     })
     .catch(err => {
-      return { error: err };
+      return {
+        error: err
+      };
     });
 }

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

@@ -1,4 +1,3 @@
-//@flow
 import fetchMock from "fetch-mock";
 import { getHistory } from "./history";
 

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

@@ -1,4 +1,3 @@
-//@flow
 import { apiClient } from "@scm-manager/ui-components";
 
 export function getHistory(url: string) {
@@ -17,6 +16,8 @@ export function getHistory(url: string) {
       };
     })
     .catch(err => {
-      return { error: err };
+      return {
+        error: err
+      };
     });
 }