Merge with 2.0.0-m3

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

@@ -9,14 +9,14 @@ import {
   ChangesetId,
   ChangesetTag,
   ChangesetAuthor,
+  ChangesetDiff,
   AvatarWrapper,
   AvatarImage,
-  changesets
+  changesets,
 } from "@scm-manager/ui-components";
 
 import classNames from "classnames";
 import type { Tag } from "@scm-manager/ui-types";
-import ScmDiff from "../../containers/ScmDiff";
 
 const styles = {
   spacing: {
@@ -78,7 +78,7 @@ class ChangesetDetails extends React.Component<Props> {
           </p>
         </div>
         <div>
-          <ScmDiff changeset={changeset} sideBySide={false}/>
+          <ChangesetDiff changeset={changeset} />
         </div>
       </div>
     );

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

@@ -11,6 +11,9 @@ import classNames from "classnames";
 const styles = {
   zeroflex: {
     flexGrow: 0
+  },
+  minWidthOfLabel: {
+    minWidth: "4.5rem"
   }
 };
 
@@ -45,7 +48,12 @@ class BranchSelector extends React.Component<Props, State> {
       return (
         <div className="box field is-horizontal">
           <div
-            className={classNames("field-label", "is-normal", classes.zeroflex)}
+            className={classNames(
+              "field-label",
+              "is-normal",
+              classes.zeroflex,
+              classes.minWidthOfLabel
+            )}
           >
             <label className="label">{t("branch-selector.label")}</label>
           </div>

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

@@ -114,7 +114,7 @@ class RepositoryRoot extends React.Component<Props> {
     return (
       <Page title={repository.namespace + "/" + repository.name}>
         <div className="columns">
-          <div className="column is-three-quarters">
+          <div className="column is-three-quarters is-clipped">
             <Switch>
               <Route
                 path={url}

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

@@ -1,51 +0,0 @@
-// @flow
-
-import React from "react";
-import { apiClient } from "@scm-manager/ui-components";
-import type { Changeset } from "@scm-manager/ui-types";
-import { Diff2Html } from "diff2html";
-
-type Props = {
-  changeset: Changeset,
-  sideBySide: boolean
-};
-
-type State = {
-  diff: string,
-  error?: Error
-};
-
-class ScmDiff extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = { diff: "" };
-  }
-
-  componentDidMount() {
-    const { changeset } = this.props;
-    const url = changeset._links.diff.href+"?format=GIT";
-    apiClient
-      .get(url)
-      .then(response => response.text())
-      .then(text => this.setState({ ...this.state, diff: text }))
-      .catch(error => this.setState({ ...this.state, error }));
-  }
-
-  render() {
-    const options = {
-      inputFormat: "diff",
-      outputFormat: this.props.sideBySide ? "side-by-side" : "line-by-line",
-      showFiles: false,
-      matching: "lines"
-    };
-
-    const outputHtml = Diff2Html.getPrettyHtml(this.state.diff, options);
-
-    return (
-      // eslint-disable-next-line react/no-danger
-      <div dangerouslySetInnerHTML={{ __html: outputHtml }} />
-    );
-  }
-}
-
-export default ScmDiff;

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

@@ -119,7 +119,9 @@ class FileTree extends React.Component<Props> {
             <th className="is-hidden-mobile">
               {t("sources.file-tree.lastModified")}
             </th>
-            <th>{t("sources.file-tree.description")}</th>
+            <th className="is-hidden-mobile">
+              {t("sources.file-tree.description")}
+            </th>
           </tr>
         </thead>
         <tbody>

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

@@ -6,10 +6,14 @@ import FileSize from "./FileSize";
 import FileIcon from "./FileIcon";
 import { Link } from "react-router-dom";
 import type { File } from "@scm-manager/ui-types";
+import classNames from "classnames";
 
 const styles = {
   iconColumn: {
     width: "16px"
+  },
+  wordBreakMinWidth: {
+    minWidth: "10em"
   }
 };
 
@@ -71,12 +75,14 @@ class FileTreeLeaf extends React.Component<Props> {
     return (
       <tr>
         <td className={classes.iconColumn}>{this.createFileIcon(file)}</td>
-        <td>{this.createFileName(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>{file.description}</td>
+        <td className={classNames(classes.wordBreakMinWidth, "is-word-break", "is-hidden-mobile")}>
+          {file.description}
+        </td>
       </tr>
     );
   }

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

@@ -41,6 +41,13 @@ const styles = {
   isVerticalCenter: {
     display: "flex",
     alignItems: "center"
+  },
+  wordBreak: {
+    WebkitHyphens: "auto",
+    MozHyphens: "auto",
+    MsHyphens: "auto",
+    hypens: "auto",
+    wordBreak: "break-all",
   }
 };
 
@@ -93,7 +100,7 @@ class Content extends React.Component<Props, State> {
                 classes.marginInHeader
               )}
             />
-            <span>{file.name}</span>
+            <span className={classes.wordBreak}>{file.name}</span>
           </div>
           <div className="media-right">{selector}</div>
         </article>
@@ -125,11 +132,11 @@ class Content extends React.Component<Props, State> {
             <tbody>
               <tr>
                 <td>{t("sources.content.path")}</td>
-                <td>{file.path}</td>
+                <td className={classes.wordBreak}>{file.path}</td>
               </tr>
               <tr>
                 <td>{t("sources.content.branch")}</td>
-                <td>{revision}</td>
+                <td className={classes.wordBreak}>{revision}</td>
               </tr>
               <tr>
                 <td>{t("sources.content.size")}</td>
@@ -141,7 +148,7 @@ class Content extends React.Component<Props, State> {
               </tr>
               <tr>
                 <td>{t("sources.content.description")}</td>
-                <td>{description}</td>
+                <td className={classes.wordBreak}>{description}</td>
               </tr>
             </tbody>
           </table>