merge branch heads

scm-ui/ui-components/src/apiclient.js

@@ -46,7 +46,7 @@ export function createUrl(url: string) {
 
 class ApiClient {
   get(url: string): Promise<Response> {
-    return fetch(createUrl(url), applyFetchOptions).then(handleFailure);
+    return fetch(createUrl(url), applyFetchOptions({})).then(handleFailure);
   }
 
   post(url: string, payload: any, contentType: string = "application/json") {

scm-ui/ui-components/src/buttons/ButtonGroup.js

@@ -14,7 +14,7 @@ class ButtonGroup extends React.Component<Props> {
     const childWrapper = [];
     React.Children.forEach(children, child => {
       if (child) {
-        childWrapper.push(<p className="control" key={childWrapper.length}>{child}</p>);
+        childWrapper.push(<div className="control" key={childWrapper.length}>{child}</div>);
       }
     });
 

scm-ui/ui-components/src/forms/MemberNameTagGroup.js

@@ -7,20 +7,22 @@ import TagGroup from "./TagGroup";
 type Props = {
   members: string[],
   memberListChanged: (string[]) => void,
+  label?: string,
+  helpText?: string,
   t: string => string
 };
 
 class MemberNameTagGroup extends React.Component<Props> {
   render() {
-    const { members, t } = this.props;
+    const { members, label, helpText, t } = this.props;
     const membersExtended = members.map(id => {
       return { id, displayName: id, mail: "" };
     });
     return (
       <TagGroup
         items={membersExtended}
-        label={t("group.members")}
-        helpText={t("groupForm.help.memberHelpText")}
+        label={label ? label : t("group.members")}
+        helpText={helpText ? helpText : t("groupForm.help.memberHelpText")}
         onRemove={this.removeEntry}
       />
     );

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

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

scm-ui/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/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/ui-components/src/repos/DiffFile.js

@@ -13,10 +13,11 @@ import {
 } from "react-diff-view";
 import { Button, ButtonGroup } from "../buttons";
 import Tag from "../Tag";
+import Icon from "../Icon";
 
 type Props = DiffObjectProps & {
   file: File,
-  collapsible: true,
+  defaultCollapse: boolean,
 
   // context props
   t: string => string
@@ -28,7 +29,8 @@ type State = {
 };
 
 const DiffFilePanel = styled.div`
-  ${props => (props.isBinary ? "border-bottom: none" : "")};
+  /* remove bottom border for collapsed panels */
+  ${props => (props.collapsed ? "border-bottom: none;" : "")};
 `;
 
 const FlexWrapLevel = styled.div`
@@ -55,7 +57,7 @@ const HunkDivider = styled.hr`
 `;
 
 const ChangeTypeTag = styled(Tag)`
-  margin-left: ".75rem";
+  marginleft: ".75rem";
 `;
 
 const ModifiedDiffComponent = styled(DiffComponent)`
@@ -82,16 +84,31 @@ const ModifiedDiffComponent = styled(DiffComponent)`
 `;
 
 class DiffFile extends React.Component<Props, State> {
+  static defaultProps = {
+    defaultCollapse: false
+  };
+
   constructor(props: Props) {
     super(props);
     this.state = {
-      collapsed: false,
+      collapsed: this.props.defaultCollapse,
       sideBySide: false
     };
   }
 
+  // collapse diff by clicking collapseDiffs button
+  componentDidUpdate(prevProps) {
+    const { defaultCollapse } = this.props;
+    if (prevProps.defaultCollapse !== defaultCollapse) {
+      this.setState({
+        collapsed: defaultCollapse
+      });
+    }
+  }
+
   toggleCollapse = () => {
-    if (this.props.collapsable) {
+    const { file } = this.props;
+    if (file && !file.isBinary) {
       this.setState(state => ({
         collapsed: !state.collapsed
       }));
@@ -172,7 +189,8 @@ class DiffFile extends React.Component<Props, State> {
     ) {
       return (
         <>
-          {file.oldPath} <i className="fa fa-arrow-right" /> {file.newPath}
+          {file.oldPath} <Icon name="arrow-right" color="inherit" />{" "}
+          {file.newPath}
         </>
       );
     } else if (file.type === "delete") {
@@ -224,23 +242,17 @@ class DiffFile extends React.Component<Props, State> {
   };
 
   render() {
-    const {
-      file,
-      fileControlFactory,
-      fileAnnotationFactory,
-      collapsible,
-      t
-    } = this.props;
+    const { file, fileControlFactory, fileAnnotationFactory, t } = this.props;
     const { collapsed, sideBySide } = this.state;
     const viewType = sideBySide ? "split" : "unified";
 
     let body = null;
-    let icon = "fa fa-angle-right";
+    let icon = "angle-right";
     if (!collapsed) {
       const fileAnnotations = fileAnnotationFactory
         ? fileAnnotationFactory(file)
         : null;
-      icon = "fa fa-angle-down";
+      icon = "angle-down";
       body = (
         <div className="panel-block is-paddingless">
           {fileAnnotations}
@@ -250,7 +262,9 @@ class DiffFile extends React.Component<Props, State> {
         </div>
       );
     }
-    const collapseIcon = collapsible ? <i className={icon} /> : null;
+    const collapseIcon = file && !file.isBinary ? (
+      <Icon name={icon} color="inherit" />
+    ) : null;
 
     const fileControls = fileControlFactory
       ? fileControlFactory(file, this.setCollapse)
@@ -258,7 +272,7 @@ class DiffFile extends React.Component<Props, State> {
     return (
       <DiffFilePanel
         className={classNames("panel", "is-size-6")}
-        isBinary={file && file.isBinary}
+        collapsed={(file && file.isBinary) || collapsed}
       >
         <div className="panel-heading">
           <FlexWrapLevel className="level">
@@ -283,20 +297,10 @@ class DiffFile extends React.Component<Props, State> {
               <ButtonGroup>
                 <Button
                   action={this.toggleSideBySide}
-                  className="reduced-mobile"
-                >
-                  <span className="icon is-small">
-                    <i
-                      className={classNames(
-                        "fas",
-                        sideBySide ? "fa-align-left" : "fa-columns"
-                      )}
-                    />
-                  </span>
-                  <span>
-                    {t(sideBySide ? "diff.combined" : "diff.sideBySide")}
-                  </span>
-                </Button>
+                  icon={sideBySide ? "align-left" : "columns"}
+                  label={t(sideBySide ? "diff.combined" : "diff.sideBySide")}
+                  reducedMobile={true}
+                />
                 {fileControls}
               </ButtonGroup>
             </ButtonWrapper>

scm-ui/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/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} />;
     }
   }