Merged in feature/ui_file_history (pull request #119)

Feature/ui file history

scm-ui-components/packages/ui-components/src/StatePaginator.js

@@ -0,0 +1,138 @@
+//@flow
+import React from "react";
+import { translate } from "react-i18next";
+import type { PagedCollection } from "@scm-manager/ui-types";
+import { Button } from "./index";
+
+type Props = {
+  collection: PagedCollection,
+  page: number,
+  updatePage: number => void,
+
+  // context props
+  t: string => string
+};
+
+class StatePaginator extends React.Component<Props> {
+  renderFirstButton() {
+    return (
+      <Button
+        className={"pagination-link"}
+        label={"1"}
+        disabled={false}
+        action={() => this.updateCurrentPage(1)}
+      />
+    );
+  }
+
+  updateCurrentPage = (newPage: number) => {
+    this.props.updatePage(newPage);
+  };
+
+  renderPreviousButton(label?: string) {
+    const { page } = this.props;
+    const previousPage = page - 1;
+
+    return (
+      <Button
+        className={"pagination-previous"}
+        label={label ? label : previousPage.toString()}
+        disabled={!this.hasLink("prev")}
+        action={() => this.updateCurrentPage(previousPage)}
+      />
+    );
+  }
+
+  hasLink(name: string) {
+    const { collection } = this.props;
+    return collection._links[name];
+  }
+
+  renderNextButton(label?: string) {
+    const { page } = this.props;
+    const nextPage = page + 1;
+    return (
+      <Button
+        className={"pagination-next"}
+        label={label ? label : nextPage.toString()}
+        disabled={!this.hasLink("next")}
+        action={() => this.updateCurrentPage(nextPage)}
+      />
+    );
+  }
+
+  renderLastButton() {
+    const { collection } = this.props;
+    return (
+      <Button
+        className={"pagination-link"}
+        label={`${collection.pageTotal}`}
+        disabled={false}
+        action={() => this.updateCurrentPage(collection.pageTotal)}
+      />
+    );
+  }
+
+  separator() {
+    return <span className="pagination-ellipsis">&hellip;</span>;
+  }
+
+  currentPage(page: number) {
+    return (
+      <Button
+        className="pagination-link is-current"
+        label={page}
+        disabled={true}
+        action={() => this.updateCurrentPage(page)}
+      />
+    );
+  }
+
+  pageLinks() {
+    const { collection } = this.props;
+
+    const links = [];
+    const page = collection.page + 1;
+    const pageTotal = collection.pageTotal;
+    if (page > 1) {
+      links.push(this.renderFirstButton());
+    }
+    if (page > 3) {
+      links.push(this.separator());
+    }
+    if (page > 2) {
+      links.push(this.renderPreviousButton());
+    }
+
+    links.push(this.currentPage(page));
+
+    if (page + 1 < pageTotal) {
+      links.push(this.renderNextButton());
+    }
+    if (page + 2 < pageTotal)
+      //if there exists pages between next and last
+      links.push(this.separator());
+    if (page < pageTotal) {
+      links.push(this.renderLastButton());
+    }
+
+    return links;
+  }
+
+  render() {
+    const { t } = this.props;
+    return (
+      <nav className="pagination is-centered" aria-label="pagination">
+        {this.renderPreviousButton(t("paginator.previous"))}
+        <ul className="pagination-list">
+          {this.pageLinks().map((link, index) => {
+            return <li key={index}>{link}</li>;
+          })}
+        </ul>
+        {this.renderNextButton(t("paginator.next"))}
+      </nav>
+    );
+  }
+}
+
+export default translate("commons")(StatePaginator);

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

@@ -16,6 +16,8 @@ export { default as MailLink } from "./MailLink.js";
 export { default as Notification } from "./Notification.js";
 export { default as Paginator } from "./Paginator.js";
 export { default as LinkPaginator } from "./LinkPaginator.js";
+export { default as StatePaginator } from "./StatePaginator.js";
+
 export { default as ProtectedRoute } from "./ProtectedRoute.js";
 export { default as Help } from "./Help";
 export { default as HelpIcon } from "./HelpIcon";

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

@@ -55,7 +55,14 @@
       "branch": "Branch"
     },
     "content": {
-      "downloadButton": "Download"
+      "historyButton": "History",
+      "sourcesButton": "Sources",
+      "downloadButton": "Download",
+      "path": "Path",
+      "branch": "Branch",
+      "lastModified": "Last modified",
+      "description": "Description",
+      "size": "Size"
     }
   },
   "changesets": {

scm-ui/src/containers/Main.js

@@ -19,7 +19,6 @@ import SingleGroup from "../groups/containers/SingleGroup";
 import AddGroup from "../groups/containers/AddGroup";
 
 import Config from "../config/containers/Config";
-import ChangeUserPassword from "./ChangeUserPassword";
 import Profile from "./Profile";
 
 type Props = {

scm-ui/src/repos/containers/RepositoryRoot.js

@@ -35,7 +35,7 @@ import PermissionsNavLink from "../components/PermissionsNavLink";
 import Sources from "../sources/containers/Sources";
 import RepositoryNavLink from "../components/RepositoryNavLink";
 import { getRepositoriesLink } from "../../modules/indexResource";
-import {ExtensionPoint} from "@scm-manager/ui-extensions";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
 
 type Props = {
   namespace: string,
@@ -172,9 +172,10 @@ class RepositoryRoot extends React.Component<Props> {
                   />
                 )}
               />
-              <ExtensionPoint name="repository.route"
-                              props={extensionProps}
-                              renderAll={true}
+              <ExtensionPoint
+                name="repository.route"
+                props={extensionProps}
+                renderAll={true}
               />
             </Switch>
           </div>
@@ -197,9 +198,10 @@ class RepositoryRoot extends React.Component<Props> {
                   label={t("repository-root.sources")}
                   activeOnlyWhenExact={false}
                 />
-                <ExtensionPoint name="repository.navigation"
-                                props={extensionProps}
-                                renderAll={true}
+                <ExtensionPoint
+                  name="repository.navigation"
+                  props={extensionProps}
+                  renderAll={true}
                 />
                 <PermissionsNavLink
                   permissionUrl={`${url}/permissions`}

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

@@ -0,0 +1,72 @@
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import { Button } from "@scm-manager/ui-components";
+
+type Props = {
+  t: string => string,
+  historyIsSelected: boolean,
+  showHistory: boolean => void
+};
+
+class ButtonGroup extends React.Component<Props> {
+  showHistory = () => {
+    this.props.showHistory(true);
+  };
+
+  showSources = () => {
+    this.props.showHistory(false);
+  };
+
+  render() {
+    const { t, historyIsSelected } = this.props;
+
+    let sourcesColor = "";
+    let historyColor = "";
+
+    if (historyIsSelected) {
+      historyColor = "info is-selected";
+    } else {
+      sourcesColor = "info is-selected";
+    }
+
+    const sourcesLabel = (
+      <>
+        <span className="icon">
+          <i className="fas fa-code" />
+        </span>
+        <span className="is-hidden-mobile">
+          {t("sources.content.sourcesButton")}
+        </span>
+      </>
+    );
+
+    const historyLabel = (
+      <>
+        <span className="icon">
+          <i className="fas fa-history" />
+        </span>
+        <span className="is-hidden-mobile">
+          {t("sources.content.historyButton")}
+        </span>
+      </>
+    );
+
+    return (
+      <div className="buttons has-addons">
+        <Button
+          label={sourcesLabel}
+          color={sourcesColor}
+          action={this.showSources}
+        />
+        <Button
+          label={historyLabel}
+          color={historyColor}
+          action={this.showHistory}
+        />
+      </div>
+    );
+  }
+}
+
+export default translate("repos")(ButtonGroup);

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

@@ -1,22 +1,16 @@
 // @flow
 import React from "react";
 import { translate } from "react-i18next";
-import { getSources } from "../modules/sources";
-import type { Repository, File } from "@scm-manager/ui-types";
-import {
-  ErrorNotification,
-  Loading,
-  DateFromNow
-} from "@scm-manager/ui-components";
-import { connect } from "react-redux";
-import ImageViewer from "../components/content/ImageViewer";
-import SourcecodeViewer from "../components/content/SourcecodeViewer";
-import DownloadViewer from "../components/content/DownloadViewer";
+import type { File, Repository } from "@scm-manager/ui-types";
+import { DateFromNow } from "@scm-manager/ui-components";
 import FileSize from "../components/FileSize";
 import injectSheet from "react-jss";
 import classNames from "classnames";
-import { ExtensionPoint } from "@scm-manager/ui-extensions";
-import { getContentType } from "./contentType";
+import ButtonGroup from "../components/content/ButtonGroup";
+import SourcesView from "./SourcesView";
+import HistoryView from "./HistoryView";
+import { getSources } from "../modules/sources";
+import { connect } from "react-redux";
 
 type Props = {
   loading: boolean,
@@ -30,11 +24,8 @@ type Props = {
 };
 
 type State = {
-  contentType: string,
-  language: string,
-  loaded: boolean,
   collapsed: boolean,
-  error?: Error
+  showHistory: boolean
 };
 
 const styles = {
@@ -43,6 +34,13 @@ const styles = {
   },
   pointer: {
     cursor: "pointer"
+  },
+  marginInHeader: {
+    marginRight: "0.5em"
+  },
+  isVerticalCenter: {
+    display: "flex",
+    alignItems: "center"
   }
 };
 
@@ -51,57 +49,53 @@ class Content extends React.Component<Props, State> {
     super(props);
 
     this.state = {
-      contentType: "",
-      language: "",
-      loaded: false,
-      collapsed: true
+      collapsed: true,
+      showHistory: 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 => {});
-  }
-
   toggleCollapse = () => {
     this.setState(prevState => ({
       collapsed: !prevState.collapsed
     }));
   };
 
+  setShowHistoryState(showHistory: boolean) {
+    this.setState({
+      ...this.state,
+      showHistory
+    });
+  }
+
   showHeader() {
     const { file, classes } = this.props;
-    const collapsed = this.state.collapsed;
+    const { showHistory, collapsed } = this.state;
     const icon = collapsed ? "fa-angle-right" : "fa-angle-down";
-    const fileSize = file.directory ? "" : <FileSize bytes={file.length} />;
+
+    const selector = file._links.history ? (
+      <ButtonGroup
+        file={file}
+        historyIsSelected={showHistory}
+        showHistory={(changeShowHistory: boolean) =>
+          this.setShowHistoryState(changeShowHistory)
+        }
+      />
+    ) : null;
 
     return (
-      <span className={classes.pointer} onClick={this.toggleCollapse}>
-        <article className="media">
-          <div className="media-left">
-            <i className={classNames("fa", icon)} />
+      <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>{file.name}</span>
           </div>
-          <div className="media-content">
-            <div className="content">{file.name}</div>
-          </div>
-          <p className="media-right">{fileSize}</p>
+          <div className="media-right">{selector}</div>
         </article>
       </span>
     );
@@ -109,7 +103,7 @@ class Content extends React.Component<Props, State> {
 
   showMoreInformation() {
     const collapsed = this.state.collapsed;
-    const { classes, file, revision } = this.props;
+    const { classes, file, revision, t } = this.props;
     const date = <DateFromNow date={file.lastModified} />;
     const description = file.description ? (
       <p>
@@ -123,25 +117,30 @@ class Content extends React.Component<Props, State> {
         })}
       </p>
     ) : null;
+    const fileSize = file.directory ? "" : <FileSize bytes={file.length} />;
     if (!collapsed) {
       return (
         <div className={classNames("panel-block", classes.toCenterContent)}>
           <table className="table">
             <tbody>
               <tr>
-                <td>Path</td>
+                <td>{t("sources.content.path")}</td>
                 <td>{file.path}</td>
               </tr>
               <tr>
-                <td>Branch</td>
+                <td>{t("sources.content.branch")}</td>
                 <td>{revision}</td>
               </tr>
               <tr>
-                <td>Last modified</td>
+                <td>{t("sources.content.size")}</td>
+                <td>{fileSize}</td>
+              </tr>
+              <tr>
+                <td>{t("sources.content.lastModified")}</td>
                 <td>{date}</td>
               </tr>
               <tr>
-                <td>Description</td>
+                <td>{t("sources.content.description")}</td>
                 <td>{description}</td>
               </tr>
             </tbody>
@@ -152,40 +151,22 @@ class Content extends React.Component<Props, State> {
     return null;
   }
 
-  showContent() {
-    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, classes } = this.props;
-    const { loaded, error } = this.state;
-
-    if (!file || !loaded) {
-      return <Loading />;
-    }
-    if (error) {
-      return <ErrorNotification error={error} />;
-    }
+    const { file, revision, repository, path, classes } = this.props;
+    const { showHistory } = this.state;
 
     const header = this.showHeader();
-    const content = this.showContent();
+    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 (

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

@@ -0,0 +1,109 @@
+// @flow
+import React from "react";
+import type {
+  File,
+  Changeset,
+  Repository,
+  PagedCollection
+} from "@scm-manager/ui-types";
+import {
+  ErrorNotification,
+  Loading,
+  StatePaginator
+} from "@scm-manager/ui-components";
+import { getHistory } from "./history";
+import ChangesetList from "../../components/changesets/ChangesetList";
+
+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 (
+      <>
+        <ChangesetList repository={repository} changesets={changesets} />
+        <StatePaginator
+          page={currentPage}
+          collection={pageCollection}
+          updatePage={(newPage: number) => this.updatePage(newPage)}
+        />
+      </>
+    );
+  }
+
+  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/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 <>{sources}</>;
+  }
+}
+
+export default SourcesView;

scm-ui/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/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/yarn.lock

@@ -2941,7 +2941,7 @@ event-emitter@^0.3.5:
     d "1"
     es5-ext "~0.10.14"
 
-event-stream@3.3.5, event-stream@~3.3.0:
+event-stream@~3.3.0:
   version "3.3.5"
   resolved "https://registry.yarnpkg.com/event-stream/-/event-stream-3.3.5.tgz#e5dd8989543630d94c6cf4d657120341fa31636b"
   dependencies: