From 32cb67f92e9b81c065c3286c592df42197a3f56b Mon Sep 17 00:00:00 2001
From: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
Date: Fri, 27 Sep 2019 14:05:19 +0200
Subject: [PATCH] implement MultiPluginActions for UpdateAll and CancelPending

---
 .../packages/ui-types/src/Plugin.js           |   1 +
 .../components/ExecutePendingAction.js        |  68 ----------
 .../plugins/components/MultiPluginAction.js   |  90 +++++++++++++
 ...dingModal.js => MultiPluginActionModal.js} | 125 ++++++++++++++++--
 .../plugins/containers/PluginsOverview.js     |  43 ++++--
 5 files changed, 236 insertions(+), 91 deletions(-)
 delete mode 100644 scm-ui/src/admin/plugins/components/ExecutePendingAction.js
 create mode 100644 scm-ui/src/admin/plugins/components/MultiPluginAction.js
 rename scm-ui/src/admin/plugins/components/{ExecutePendingModal.js => MultiPluginActionModal.js} (57%)

diff --git a/scm-ui-components/packages/ui-types/src/Plugin.js b/scm-ui-components/packages/ui-types/src/Plugin.js
index c7612a8bf8..f5a621e1ff 100644
--- a/scm-ui-components/packages/ui-types/src/Plugin.js
+++ b/scm-ui-components/packages/ui-types/src/Plugin.js
@@ -17,6 +17,7 @@ export type Plugin = {
 };
 
 export type PluginCollection = Collection & {
+  _links: Links,
   _embedded: {
     plugins: Plugin[] | string[]
   }
diff --git a/scm-ui/src/admin/plugins/components/ExecutePendingAction.js b/scm-ui/src/admin/plugins/components/ExecutePendingAction.js
deleted file mode 100644
index 6c8d407205..0000000000
--- a/scm-ui/src/admin/plugins/components/ExecutePendingAction.js
+++ /dev/null
@@ -1,68 +0,0 @@
-// @flow
-import React from "react";
-import { Button } from "@scm-manager/ui-components";
-import type { PendingPlugins } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
-import ExecutePendingModal from "./ExecutePendingModal";
-
-type Props = {
-  pendingPlugins: PendingPlugins,
-
-  // context props
-  t: string => string
-};
-
-type State = {
-  showModal: boolean
-};
-
-class ExecutePendingAction extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      showModal: false
-    };
-  }
-
-  openModal = () => {
-    this.setState({
-      showModal: true
-    });
-  };
-
-  closeModal = () => {
-    this.setState({
-      showModal: false
-    });
-  };
-
-  renderModal = () => {
-    const { showModal } = this.state;
-    const { pendingPlugins } = this.props;
-    if (showModal) {
-      return (
-        <ExecutePendingModal
-          pendingPlugins={pendingPlugins}
-          onClose={this.closeModal}
-        />
-      );
-    }
-    return null;
-  };
-
-  render() {
-    const { t } = this.props;
-    return (
-      <>
-        {this.renderModal()}
-        <Button
-          color="primary"
-          label={t("plugins.executePending")}
-          action={this.openModal}
-        />
-      </>
-    );
-  }
-}
-
-export default translate("admin")(ExecutePendingAction);
diff --git a/scm-ui/src/admin/plugins/components/MultiPluginAction.js b/scm-ui/src/admin/plugins/components/MultiPluginAction.js
new file mode 100644
index 0000000000..164148cec3
--- /dev/null
+++ b/scm-ui/src/admin/plugins/components/MultiPluginAction.js
@@ -0,0 +1,90 @@
+// @flow
+import React from "react";
+import { Button } from "@scm-manager/ui-components";
+import type {PendingPlugins, PluginCollection} from "@scm-manager/ui-types";
+import { translate } from "react-i18next";
+import MultiPluginActionModal from "./MultiPluginActionModal";
+
+export const MultiPluginActionType = {
+  UPDATE_ALL: "updateAll",
+  CANCEL_PENDING: "cancelPending",
+  EXECUTE_PENDING: "executePending"
+};
+
+type Props = {
+  actionType: string,
+  pendingPlugins?: PendingPlugins,
+  installedPlugins?: PluginCollection,
+
+  // context props
+  t: string => string
+};
+
+type State = {
+  showModal: boolean
+};
+
+class MultiPluginAction extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      showModal: false
+    };
+  }
+
+  toggleModal = () => {
+    this.setState(state => ({
+      showModal: !state.showModal
+    }));
+  };
+
+  renderLabel = () => {
+    const {t, actionType} = this.props;
+    if (actionType === MultiPluginActionType.EXECUTE_PENDING) {
+      return t("plugins.executePending");
+    } else if (actionType === MultiPluginActionType.CANCEL_PENDING) {
+      return t("plugins.cancelPending");
+    } else {
+      return t("plugins.updateAll");
+    }
+  };
+
+  renderModal = () => {
+    const { showModal } = this.state;
+    const {pendingPlugins, installedPlugins, actionType} = this.props;
+    if (showModal) {
+      return (
+        <MultiPluginActionModal
+          pendingPlugins={
+            actionType === MultiPluginActionType.UPDATE_ALL
+              ? null
+              : pendingPlugins
+          }
+          installedPlugins={
+            actionType !== MultiPluginActionType.UPDATE_ALL
+              ? null
+              : installedPlugins
+          }
+          onClose={this.toggleModal}
+          actionType={actionType}
+        />
+      );
+    }
+    return null;
+  };
+
+  render() {
+    return (
+      <>
+        {this.renderModal()}
+        <Button
+          color="primary"
+          label={this.renderLabel()}
+          action={this.toggleModal}
+        />
+      </>
+    );
+  }
+}
+
+export default translate("admin")(MultiPluginAction);
diff --git a/scm-ui/src/admin/plugins/components/ExecutePendingModal.js b/scm-ui/src/admin/plugins/components/MultiPluginActionModal.js
similarity index 57%
rename from scm-ui/src/admin/plugins/components/ExecutePendingModal.js
rename to scm-ui/src/admin/plugins/components/MultiPluginActionModal.js
index b559413d2b..24a0f0d982 100644
--- a/scm-ui/src/admin/plugins/components/ExecutePendingModal.js
+++ b/scm-ui/src/admin/plugins/components/MultiPluginActionModal.js
@@ -8,14 +8,17 @@ import {
   Modal,
   Notification
 } from "@scm-manager/ui-components";
-import type { PendingPlugins } from "@scm-manager/ui-types";
+import type { PendingPlugins, PluginCollection } from "@scm-manager/ui-types";
 import { translate } from "react-i18next";
 import waitForRestart from "./waitForRestart";
 import SuccessNotification from "./SuccessNotification";
+import { MultiPluginActionType } from "./MultiPluginAction";
 
 type Props = {
   onClose: () => void,
-  pendingPlugins: PendingPlugins,
+  actionType: string,
+  pendingPlugins?: PendingPlugins,
+  installedPlugins?: PluginCollection,
 
   // context props
   t: string => string
@@ -27,7 +30,7 @@ type State = {
   error?: Error
 };
 
-class ExecutePendingModal extends React.Component<Props, State> {
+class MultiPluginActionModal extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
@@ -52,6 +55,18 @@ class ExecutePendingModal extends React.Component<Props, State> {
     }
   };
 
+  executeAction = () => {
+    const { actionType } = this.props;
+
+    if (actionType === MultiPluginActionType.EXECUTE_PENDING) {
+      this.executeAndRestart();
+    } else if (actionType === MultiPluginActionType.CANCEL_PENDING) {
+      this.cancelPending();
+    } else if (actionType === MultiPluginActionType.UPDATE_ALL) {
+      this.updateAllWithRestart();
+    }
+  };
+
   executeAndRestart = () => {
     const { pendingPlugins } = this.props;
     this.setState({
@@ -64,8 +79,7 @@ class ExecutePendingModal extends React.Component<Props, State> {
       .then(() => {
         this.setState({
           success: true,
-          loading: false,
-          error: undefined
+          loading: false
         });
       })
       .catch(error => {
@@ -77,11 +91,96 @@ class ExecutePendingModal extends React.Component<Props, State> {
       });
   };
 
+  cancelPending = () => {
+    const { pendingPlugins } = this.props;
+    this.setState({
+      loading: true
+    });
+
+    apiClient
+      .post(pendingPlugins._links.cancel.href)
+      .then(() => {
+        this.setState({
+          success: true,
+          loading: false
+        });
+      })
+      .catch(error => {
+        this.setState({
+          success: false,
+          loading: false,
+          error: error
+        });
+      });
+  };
+
+  updateAllWithRestart = () => {
+    const { installedPlugins } = this.props;
+    this.setState({
+      loading: true
+    });
+
+    apiClient
+      .post(installedPlugins._links.update.href)
+      .then(waitForRestart)
+      .then(() => {
+        this.setState({
+          success: true,
+          loading: false
+        });
+      })
+      .catch(error => {
+        this.setState({
+          success: false,
+          loading: false,
+          error: error
+        });
+      });
+  };
+
+  renderModalContent = () => {
+    const { actionType } = this.props;
+
+    if (actionType === MultiPluginActionType.UPDATE_ALL) {
+      return <>{this.renderUpdatable()}</>;
+    } else {
+      return (
+        <>
+          {this.renderInstallQueue()}
+          {this.renderUpdateQueue()}
+          {this.renderUninstallQueue()}
+        </>
+      );
+    }
+  };
+
+  renderUpdatable = () => {
+    const { installedPlugins } = this.props;
+    return (
+      <>
+        {installedPlugins &&
+          installedPlugins._embedded &&
+          installedPlugins._embedded.plugins && (
+            <>
+              <ul>
+                {installedPlugins._embedded.plugins
+                  .filter(plugin => plugin._links && plugin._links.update)
+                  .map(plugin => (
+                    <li key={plugin.name}>{plugin.name}</li>
+                  ))}
+              </ul>
+            </>
+          )}
+      </>
+    );
+  };
+
   renderInstallQueue = () => {
     const { pendingPlugins, t } = this.props;
     return (
       <>
-        {pendingPlugins._embedded &&
+        {pendingPlugins &&
+          pendingPlugins._embedded &&
           pendingPlugins._embedded.new.length > 0 && (
             <>
               <strong>{t("plugins.modal.installQueue")}</strong>
@@ -100,7 +199,8 @@ class ExecutePendingModal extends React.Component<Props, State> {
     const { pendingPlugins, t } = this.props;
     return (
       <>
-        {pendingPlugins._embedded &&
+        {pendingPlugins &&
+          pendingPlugins._embedded &&
           pendingPlugins._embedded.update.length > 0 && (
             <>
               <strong>{t("plugins.modal.updateQueue")}</strong>
@@ -119,7 +219,8 @@ class ExecutePendingModal extends React.Component<Props, State> {
     const { pendingPlugins, t } = this.props;
     return (
       <>
-        {pendingPlugins._embedded &&
+        {pendingPlugins &&
+          pendingPlugins._embedded &&
           pendingPlugins._embedded.uninstall.length > 0 && (
             <>
               <strong>{t("plugins.modal.uninstallQueue")}</strong>
@@ -141,9 +242,7 @@ class ExecutePendingModal extends React.Component<Props, State> {
         <div className="media">
           <div className="content">
             <p>{t("plugins.modal.executePending")}</p>
-            {this.renderInstallQueue()}
-            {this.renderUpdateQueue()}
-            {this.renderUninstallQueue()}
+            {this.renderModalContent()}
           </div>
         </div>
         <div className="media">{this.renderNotifications()}</div>
@@ -160,7 +259,7 @@ class ExecutePendingModal extends React.Component<Props, State> {
           color="warning"
           label={t("plugins.modal.executeAndRestart")}
           loading={loading}
-          action={this.executeAndRestart}
+          action={this.executeAction}
           disabled={error || success}
         />
         <Button label={t("plugins.modal.abort")} action={onClose} />
@@ -182,4 +281,4 @@ class ExecutePendingModal extends React.Component<Props, State> {
   }
 }
 
-export default translate("admin")(ExecutePendingModal);
+export default translate("admin")(MultiPluginActionModal);
diff --git a/scm-ui/src/admin/plugins/containers/PluginsOverview.js b/scm-ui/src/admin/plugins/containers/PluginsOverview.js
index d4bd0e5129..cc6df55829 100644
--- a/scm-ui/src/admin/plugins/containers/PluginsOverview.js
+++ b/scm-ui/src/admin/plugins/containers/PluginsOverview.js
@@ -5,6 +5,7 @@ import { translate } from "react-i18next";
 import { compose } from "redux";
 import type { PendingPlugins, PluginCollection } from "@scm-manager/ui-types";
 import {
+  ButtonGroup,
   ErrorNotification,
   Loading,
   Notification,
@@ -27,7 +28,9 @@ import {
 } from "../../../modules/indexResource";
 import PluginTopActions from "../components/PluginTopActions";
 import PluginBottomActions from "../components/PluginBottomActions";
-import ExecutePendingAction from "../components/ExecutePendingAction";
+import MultiPluginAction, {
+  MultiPluginActionType
+} from "../components/MultiPluginAction";
 
 type Props = {
   loading: boolean,
@@ -109,15 +112,35 @@ class PluginsOverview extends React.Component<Props> {
   };
 
   createActions = () => {
-    const { pendingPlugins } = this.props;
-    if (
-      pendingPlugins &&
-      pendingPlugins._links &&
-      pendingPlugins._links.execute
-    ) {
-      return <ExecutePendingAction pendingPlugins={pendingPlugins} />;
-    }
-    return null;
+    const {pendingPlugins, collection} = this.props;
+    return (
+      <ButtonGroup>
+        {pendingPlugins &&
+        pendingPlugins._links &&
+        pendingPlugins._links.execute && (
+          <MultiPluginAction
+            pendingPlugins={pendingPlugins}
+            actionType={MultiPluginActionType.EXECUTE_PENDING}
+          />
+        )}
+        {pendingPlugins &&
+        pendingPlugins._links &&
+        pendingPlugins._links.cancel && (
+          <MultiPluginAction
+            pendingPlugins={pendingPlugins}
+            actionType={MultiPluginActionType.CANCEL_PENDING}
+          />
+        )}
+        {collection &&
+        collection._links &&
+        !collection._links.update && (
+          <MultiPluginAction
+            installedPlugins={collection}
+            actionType={MultiPluginActionType.UPDATE_ALL}
+          />
+        )}
+      </ButtonGroup>
+    );
   };
 
   render() {