add collapse all diffs by once button, implement level component

scm-ui-components/packages/ui-components/src/layout/Level.js

@@ -0,0 +1,19 @@
+//@flow
+import * as React from "react";
+
+type Props = {
+  left?: React.Node,
+  right?: React.Node
+};
+
+export default class Level extends React.Component<Props> {
+  render() {
+    const { left, right } = this.props;
+    return (
+      <div className="level">
+        <div className="level-left">{left}</div>
+        <div className="level-right">{right}</div>
+      </div>
+    );
+  }
+}

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

@@ -2,6 +2,7 @@
 
 export { default as Footer } from "./Footer.js";
 export { default as Header } from "./Header.js";
+export { default as Level } from "./Level.js";
 export { default as Page } from "./Page.js";
 export { default as PageActions } from "./PageActions.js";
 export { default as Subtitle } from "./Subtitle.js";

scm-ui-components/packages/ui-components/src/repos/Diff.js

@@ -4,7 +4,8 @@ import DiffFile from "./DiffFile";
 import type {DiffObjectProps, File} from "./DiffTypes";
 
 type Props = DiffObjectProps & {
-  diff: File[]
+  diff: File[],
+  defaultCollapse?: boolean
 };
 
 class Diff extends React.Component<Props> {
@@ -17,7 +18,7 @@ class Diff extends React.Component<Props> {
     return (
       <>
         {diff.map((file, index) => (
-          <DiffFile key={index} file={file} {...fileProps} />
+          <DiffFile key={index} file={file} {...fileProps} {...this.props} />
         ))}
       </>
     );

scm-ui-components/packages/ui-components/src/repos/DiffFile.js

@@ -95,9 +95,19 @@ class DiffFile extends React.Component<Props, State> {
     };
   }
 
+  // collapse diff by clicking collapseDiffs button
+  componentDidUpdate(prevProps) {
+    const { defaultCollapse } = this.props;
+    if (prevProps.defaultCollapse !== defaultCollapse) {
+      this.setState({
+        collapsed: defaultCollapse
+      });
+    }
+  }
+
   toggleCollapse = () => {
     const { file } = this.props;
-    if(file && !file.isBinaray) {
+    if (file && !file.isBinaray) {
       this.setState(state => ({
         collapsed: !state.collapsed
       }));

scm-ui-components/packages/ui-components/src/repos/LoadingDiff.js

@@ -9,7 +9,8 @@ import Diff from "./Diff";
 import type {DiffObjectProps, File} from "./DiffTypes";
 
 type Props = DiffObjectProps & {
-  url: string
+  url: string,
+  defaultCollapse?: boolean
 };
 
 type State = {

scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetDiff.js

@@ -7,6 +7,7 @@ import {translate} from "react-i18next";
 
 type Props = {
   changeset: Changeset,
+  defaultCollapse?: boolean,
 
   // context props
   t: string => string
@@ -23,12 +24,12 @@ class ChangesetDiff extends React.Component<Props> {
   }
 
   render() {
-    const { changeset, t } = this.props;
+    const { changeset, defaultCollapse, t } = this.props;
     if (!this.isDiffSupported(changeset)) {
       return <Notification type="danger">{t("changeset.diffNotSupported")}</Notification>;
     } else {
       const url = this.createUrl(changeset);
-      return <LoadingDiff url={url} />;
+      return <LoadingDiff url={url} defaultCollapse={defaultCollapse} />;
     }
   }
 

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

@@ -73,7 +73,8 @@
     "errorTitle": "Fehler",
     "errorSubtitle": "Changesets konnten nicht abgerufen werden",
     "noChangesets": "Keine Changesets in diesem Branch gefunden.",
-    "branchSelectorLabel": "Branches"
+    "branchSelectorLabel": "Branches",
+    "collapseDiffs": "Auf-/Zuklappen"
   },
   "changeset": {
     "description": "Beschreibung",

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

@@ -73,7 +73,8 @@
     "errorTitle": "Error",
     "errorSubtitle": "Could not fetch changesets",
     "noChangesets": "No changesets found for this branch.",
-    "branchSelectorLabel": "Branches"
+    "branchSelectorLabel": "Branches",
+    "collapseDiffs": "Collapse"
   },
   "changeset": {
     "description": "Description",

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

@@ -73,7 +73,8 @@
     "errorTitle": "Error",
     "errorSubtitle": "No se han podido recuperar los changesets",
     "noChangesets": "No se han encontrado changesets para esta rama branch.",
-    "branchSelectorLabel": "Ramas"
+    "branchSelectorLabel": "Ramas",
+    "collapseDiffs": "Colapso"
   },
   "changeset": {
     "description": "Descripción",

scm-ui/src/repos/components/changesets/ChangesetDetails.js

@@ -1,9 +1,10 @@
 //@flow
 import React from "react";
-import type { Changeset, Repository } from "@scm-manager/ui-types";
 import { Interpolate, translate } from "react-i18next";
 import injectSheet from "react-jss";
-
+import classNames from "classnames";
+import type { Changeset, Repository, Tag } from "@scm-manager/ui-types";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import {
   DateFromNow,
   ChangesetId,
@@ -12,12 +13,23 @@ import {
   ChangesetDiff,
   AvatarWrapper,
   AvatarImage,
-  changesets
+  changesets,
+  Level,
+  Button
 } from "@scm-manager/ui-components";
 
-import classNames from "classnames";
-import type { Tag } from "@scm-manager/ui-types";
-import { ExtensionPoint } from "@scm-manager/ui-extensions";
+type Props = {
+  changeset: Changeset,
+  repository: Repository,
+
+  // context props
+  t: string => string,
+  classes: any
+};
+
+type State = {
+  collapsed: boolean
+};
 
 const styles = {
   spacing: {
@@ -30,16 +42,17 @@ const styles = {
   }
 };
 
-type Props = {
-  changeset: Changeset,
-  repository: Repository,
-  t: string => string,
-  classes: any
-};
+class ChangesetDetails extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      collapsed: false
+    };
+  }
 
-class ChangesetDetails extends React.Component<Props> {
   render() {
-    const { changeset, repository, classes } = this.props;
+    const { changeset, repository, classes, t } = this.props;
+    const { collapsed } = this.state;
 
     const description = changesets.parseDescription(changeset.description);
 
@@ -49,7 +62,7 @@ class ChangesetDetails extends React.Component<Props> {
     const date = <DateFromNow date={changeset.date} />;
 
     return (
-      <div>
+      <>
         <div className="content">
           <h4>
             <ExtensionPoint
@@ -71,16 +84,11 @@ class ChangesetDetails extends React.Component<Props> {
                 <ChangesetAuthor changeset={changeset} />
               </p>
               <p>
-                <Interpolate
-                  i18nKey="changeset.summary"
-                  id={id}
-                  time={date}
-                />
+                <Interpolate i18nKey="changeset.summary" id={id} time={date} />
               </p>
             </div>
             <div className="media-right">{this.renderTags()}</div>
           </article>
-
           <p>
             {description.message.split("\n").map((item, key) => {
               return (
@@ -99,9 +107,20 @@ class ChangesetDetails extends React.Component<Props> {
           </p>
         </div>
         <div>
-          <ChangesetDiff changeset={changeset} />
+          <Level
+            right={
+              <Button
+                action={this.collapseDiffs}
+                color="default"
+                icon={collapsed ? "eye" : "eye-slash"}
+                label={t("changesets.collapseDiffs")}
+                reducedMobile={true}
+              />
+            }
+          />
+          <ChangesetDiff changeset={changeset} defaultCollapse={collapsed} />
         </div>
-      </div>
+      </>
     );
   }
 
@@ -124,6 +143,12 @@ class ChangesetDetails extends React.Component<Props> {
     }
     return null;
   };
+
+  collapseDiffs = () => {
+    this.setState(state => ({
+      collapsed: !state.collapsed
+    }));
+  };
 }
 
 export default injectSheet(styles)(translate("repos")(ChangesetDetails));