Handle errors and show loading state

scm-ui/ui-components/src/repos/DiffFile.tsx

@@ -36,6 +36,8 @@ import DiffButton from "./DiffButton";
 import { MenuContext } from "@scm-manager/ui-components";
 import DiffExpander, { ExpandableHunk } from "./DiffExpander";
 import HunkExpandLink from "./HunkExpandLink";
+import { Modal } from "../modals";
+import ErrorNotification from "../ErrorNotification";
 
 const EMPTY_ANNOTATION_FACTORY = {};
 
@@ -153,9 +155,10 @@ class DiffFile extends React.Component<Props, State> {
         return (
           <Decoration>
             <HunkDivider>
-              <span onClick={this.expandHead(expandableHunk, expandableHunk.maxExpandHeadRange)}>
+              <HunkExpandLink
-                {this.props.t("diff.expandHeadComplete", { count: expandableHunk.maxExpandHeadRange })}
+                onClick={this.expandHead(expandableHunk, expandableHunk.maxExpandHeadRange)}
-              </span>
+                text={this.props.t("diff.expandHeadComplete", { count: expandableHunk.maxExpandHeadRange })}
+              />
             </HunkDivider>
           </Decoration>
         );
@@ -163,12 +166,14 @@ class DiffFile extends React.Component<Props, State> {
         return (
           <Decoration>
             <HunkDivider>
-              <span onClick={this.expandHead(expandableHunk, 10)}>
+              <HunkExpandLink
-                {this.props.t("diff.expandHeadByLines", { count: 10 })}
+                onClick={this.expandHead(expandableHunk, 10)}
-              </span>{" "}
+                text={this.props.t("diff.expandHeadByLines", { count: 10 })}
-              <span onClick={this.expandHead(expandableHunk, expandableHunk.maxExpandHeadRange)}>
+              />{" "}
-                {this.props.t("diff.expandHeadComplete", { count: expandableHunk.maxExpandHeadRange })}
+              <HunkExpandLink
-              </span>
+                onClick={this.expandHead(expandableHunk, expandableHunk.maxExpandHeadRange)}
+                text={this.props.t("diff.expandHeadComplete", { count: expandableHunk.maxExpandHeadRange })}
+              />
             </HunkDivider>
           </Decoration>
         );
@@ -184,9 +189,10 @@ class DiffFile extends React.Component<Props, State> {
         return (
           <Decoration>
             <HunkDivider>
-              <span onClick={() => expandableHunk.expandBottom(expandableHunk.maxExpandBottomRange).then(this.diffExpanded)}>
+              <HunkExpandLink
-                {this.props.t("diff.expandBottomComplete", { count: expandableHunk.maxExpandBottomRange })}
+                onClick={this.expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)}
-              </span>
+                text={this.props.t("diff.expandBottomComplete", { count: expandableHunk.maxExpandBottomRange })}
+              />
             </HunkDivider>
           </Decoration>
         );
@@ -194,12 +200,14 @@ class DiffFile extends React.Component<Props, State> {
         return (
           <Decoration>
             <HunkDivider>
-              <span onClick={this.expandBottom(expandableHunk, 10)}>
+              <HunkExpandLink
-                {this.props.t("diff.expandBottomByLines", { count: 10 })}
+                onClick={this.expandBottom(expandableHunk, 10)}
-              </span>{" "}
+                text={this.props.t("diff.expandBottomByLines", { count: 10 })}
-              <span onClick={this.expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)}>
+              />{" "}
-                {this.props.t("diff.expandBottomComplete", { count: expandableHunk.maxExpandBottomRange })}
+              <HunkExpandLink
-              </span>
+                onClick={this.expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)}
+                text={this.props.t("diff.expandBottomComplete", { count: expandableHunk.maxExpandBottomRange })}
+              />
             </HunkDivider>
           </Decoration>
         );
@@ -214,10 +222,14 @@ class DiffFile extends React.Component<Props, State> {
       return (
         <Decoration>
           <HunkDivider>
-            <span onClick={this.expandBottom(expandableHunk, 10)}>{this.props.t("diff.expandLastBottomByLines")}</span>{" "}
+            <HunkExpandLink
-            <span onClick={this.expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)}>
+              onClick={this.expandBottom(expandableHunk, 10)}
-              {this.props.t("diff.expandLastBottomComplete")}
+              text={this.props.t("diff.expandLastBottomByLines")}
-            </span>
+            />{" "}
+            <HunkExpandLink
+              onClick={this.expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)}
+              text={this.props.t("diff.expandLastBottomComplete")}
+            />
           </HunkDivider>
         </Decoration>
       );
@@ -228,7 +240,7 @@ class DiffFile extends React.Component<Props, State> {
 
   expandHead = (expandableHunk: ExpandableHunk, count: number) => {
     return () => {
-      expandableHunk
+      return expandableHunk
         .expandHead(count)
         .then(this.diffExpanded)
         .catch(this.diffExpansionFailed);
@@ -237,7 +249,7 @@ class DiffFile extends React.Component<Props, State> {
 
   expandBottom = (expandableHunk: ExpandableHunk, count: number) => {
     return () => {
-      expandableHunk
+      return expandableHunk
         .expandBottom(count)
         .then(this.diffExpanded)
         .catch(this.diffExpansionFailed);
@@ -424,8 +436,21 @@ class DiffFile extends React.Component<Props, State> {
         </ButtonWrapper>
       ) : null;
 
+    let errorModal;
+    if (expansionError) {
+      errorModal = (
+        <Modal
+          title={t("diff.expansionFailed")}
+          closeFunction={() => this.setState({ expansionError: undefined })}
+          body={<ErrorNotification error={expansionError} />}
+          active={true}
+        />
+      );
+    }
+
     return (
       <DiffFilePanel className={classNames("panel", "is-size-6")} collapsed={(file && file.isBinary) || collapsed}>
+        {errorModal}
         <div className="panel-heading">
           <FlexWrapLevel className="level">
             <FullWidthTitleHeader

scm-ui/ui-components/src/repos/HunkExpandLink.tsx

@@ -0,0 +1,44 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { FC, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+type Props = {
+  text: string;
+  onClick: () => Promise<any>;
+};
+
+const HunkExpandLink: FC<Props> = ({ text, onClick }) => {
+  const [t] = useTranslation("repos");
+  const [loading, setLoading] = useState(false);
+
+  const onClickWithLoadingMarker = () => {
+    setLoading(true);
+    onClick().then(() => setLoading(false));
+  };
+
+  return <span onClick={onClickWithLoadingMarker}>{loading? t("diff.expanding"): text}</span>;
+};
+
+export default HunkExpandLink;

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

@@ -208,7 +208,9 @@
     "expandBottomComplete": ">> load {{count}} line",
     "expandBottomComplete_plural": ">> load all {{count}} lines",
     "expandLastBottomByLines": "> load up to 10 more lines",
-    "expandLastBottomComplete": ">> load all remaining lines"
+    "expandLastBottomComplete": ">> load all remaining lines",
+    "expanding": "loading lines ...",
+    "expansionFailed": "Error loading additional content"
   },
   "fileUpload": {
     "clickHere": "Click here to select your file",