Externalize modal dialogs

scm-ui/src/admin/plugins/components/CancelPendingActionModal.js

@@ -0,0 +1,39 @@
+// @flow
+
+import React from "react";
+import MultiPluginActionModal from "./MultiPluginActionModal";
+import type {PendingPlugins} from "@scm-manager/ui-types";
+import {apiClient} from "@scm-manager/ui-components";
+import {translate} from "react-i18next";
+
+type Props = {
+  onClose: () => void,
+  refresh: () => void,
+  pendingPlugins: PendingPlugins,
+
+  // context props
+  t: string => string
+};
+
+
+class CancelPendingActionModal extends React.Component<Props> {
+
+  render() {
+    const {onClose, pendingPlugins, t} = this.props;
+
+    return <MultiPluginActionModal
+      description={t("plugins.modal.cancelPending")} label={t("plugins.cancelPending")}
+      onClose={onClose} pendingPlugins={pendingPlugins} execute={this.cancelPending}>
+    </MultiPluginActionModal>;
+  }
+
+  cancelPending = () => {
+    const { pendingPlugins, refresh, onClose } = this.props;
+    return apiClient
+      .post(pendingPlugins._links.cancel.href)
+      .then(refresh)
+      .then(onClose);
+  };
+}
+
+export default translate("admin")(CancelPendingActionModal);

scm-ui/src/admin/plugins/components/ExecutePendingActionModal.js

@@ -0,0 +1,41 @@
+// @flow
+
+import React from "react";
+import MultiPluginActionModal from "./MultiPluginActionModal";
+import type {PendingPlugins} from "@scm-manager/ui-types";
+import waitForRestart from "./waitForRestart";
+import {apiClient, Notification} from "@scm-manager/ui-components";
+import {translate} from "react-i18next";
+
+type Props = {
+  onClose: () => void,
+  pendingPlugins: PendingPlugins,
+
+  // context props
+  t: string => string
+};
+
+
+class ExecutePendingActionModal extends React.Component<Props> {
+
+  render() {
+    const {onClose, pendingPlugins, t} = this.props;
+
+    return <MultiPluginActionModal
+      description={t("plugins.modal.executePending")} label={t("plugins.modal.executeAndRestart")}
+      onClose={onClose} pendingPlugins={pendingPlugins} execute={this.executeAndRestart}>
+      <Notification type="warning">
+        {t("plugins.modal.restartNotification")}
+      </Notification>
+    </MultiPluginActionModal>;
+  }
+
+  executeAndRestart = () => {
+    const {pendingPlugins} = this.props;
+    return apiClient
+      .post(pendingPlugins._links.execute.href)
+      .then(waitForRestart);
+  };
+}
+
+export default translate("admin")(ExecutePendingActionModal);

scm-ui/src/admin/plugins/components/MultiPluginAction.js

@@ -3,7 +3,6 @@ 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",
@@ -16,28 +15,13 @@ type Props = {
   pendingPlugins?: PendingPlugins,
   installedPlugins?: PluginCollection,
   refresh: () => void,
+  onClick: () => void,
 
   // context props
   t: (key: string, params?: Object) => string
 };
 
-type State = {
+class MultiPluginAction extends React.Component<Props> {
-  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, installedPlugins } = this.props;
@@ -56,28 +40,6 @@ class MultiPluginAction extends React.Component<Props, State> {
     }
   };
 
-  renderModal = () => {
-    const { showModal } = this.state;
-    const {
-      pendingPlugins,
-      installedPlugins,
-      actionType,
-      refresh
-    } = this.props;
-    if (showModal) {
-      return (
-        <MultiPluginActionModal
-          pendingPlugins={pendingPlugins}
-          installedPlugins={installedPlugins}
-          onClose={this.toggleModal}
-          refresh={refresh}
-          actionType={actionType}
-        />
-      );
-    }
-    return null;
-  };
-
   renderIcon = () => {
     const { actionType } = this.props;
 
@@ -91,15 +53,15 @@ class MultiPluginAction extends React.Component<Props, State> {
   };
 
   render() {
+    const { onClick } = this.props;
     return (
       <>
-        {this.renderModal()}
         <Button
           color="primary"
           reducedMobile={true}
           icon={this.renderIcon()}
           label={this.renderLabel()}
-          action={this.toggleModal}
+          action={() => onClick()}
         />
       </>
     );

scm-ui/src/admin/plugins/components/MultiPluginActionModal.js

@@ -1,18 +1,14 @@
 // @flow
-import React from "react";
+import * as React from "react";
 import {
-  apiClient,
   Button,
   ButtonGroup,
   ErrorNotification,
-  Modal,
+  Modal
-  Notification
 } from "@scm-manager/ui-components";
 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,
@@ -20,6 +16,11 @@ type Props = {
   pendingPlugins?: PendingPlugins,
   installedPlugins?: PluginCollection,
   refresh: () => void,
+  execute: () => Promise<any>,
+  description: string,
+  label: string,
+
+  children?: React.Node,
 
   // context props
   t: string => string
@@ -41,42 +42,23 @@ class MultiPluginActionModal extends React.Component<Props, State> {
   }
 
   renderNotifications = () => {
-    const { t } = this.props;
+    const {children} = this.props;
     const { error, success } = this.state;
     if (error) {
       return <ErrorNotification error={error} />;
     } else if (success) {
       return <SuccessNotification />;
     } else {
-      return (
+      return children;
-        <Notification type="warning">
-          {t("plugins.modal.restartNotification")}
-        </Notification>
-      );
     }
   };
 
   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.updateAll();
-    }
-  };
-
-  executeAndRestart = () => {
-    const { pendingPlugins } = this.props;
     this.setState({
       loading: true
     });
 
-    apiClient
+    this.props.execute()
-      .post(pendingPlugins._links.execute.href)
-      .then(waitForRestart)
       .then(() => {
         this.setState({
           success: true,
@@ -92,40 +74,6 @@ class MultiPluginActionModal extends React.Component<Props, State> {
       });
   };
 
-  cancelPending = () => {
-    const { pendingPlugins } = this.props;
-    this.setState({
-      loading: true
-    });
-
-    apiClient
-      .post(pendingPlugins._links.cancel.href)
-      .then(() => this.refresh())
-      .catch(error => {
-        this.setState({
-          success: false,
-          loading: false,
-          error: error
-        });
-      });
-  };
-
-  updateAll = () => {
-    const { installedPlugins } = this.props;
-    this.setState({
-      loading: true
-    });
-
-    apiClient
-      .post(installedPlugins._links.update.href)
-      .then(() => this.refresh());
-  };
-
-  refresh = () => {
-    this.props.refresh();
-    this.props.onClose();
-  };
-
   renderModalContent = () => {
     return (
       <>
@@ -219,49 +167,16 @@ class MultiPluginActionModal extends React.Component<Props, State> {
     );
   };
 
-  renderDescription = () => {
-    const { t, actionType } = this.props;
-
-    if (actionType === MultiPluginActionType.EXECUTE_PENDING) {
-      return t("plugins.modal.executePending");
-    } else if (actionType === MultiPluginActionType.CANCEL_PENDING) {
-      return t("plugins.modal.cancelPending");
-    } else if (actionType === MultiPluginActionType.UPDATE_ALL) {
-      return t("plugins.modal.updateAllInfo");
-    }
-  };
-
-  renderLabel = () => {
-    const { t, actionType } = this.props;
-
-    if (actionType === MultiPluginActionType.EXECUTE_PENDING) {
-      return t("plugins.modal.executeAndRestart");
-    } else if (actionType === MultiPluginActionType.CANCEL_PENDING) {
-      return t("plugins.cancelPending");
-    } else if (actionType === MultiPluginActionType.UPDATE_ALL) {
-      return t("plugins.updateAll");
-    }
-  };
-
   renderBody = () => {
-    const { actionType } = this.props;
-    const { error } = this.state;
     return (
       <>
         <div className="media">
           <div className="content">
-            <p>{this.renderDescription()}</p>
+            <p>{this.props.description}</p>
             {this.renderModalContent()}
           </div>
         </div>
-        {!!error && (
+        <div className="media">{this.renderNotifications()}</div>
-          <div className="media">
-            <ErrorNotification error={error} />
-          </div>
-        )}
-        {actionType === MultiPluginActionType.EXECUTE_PENDING && (
-          <div className="media">{this.renderNotifications()}</div>
-        )}
       </>
     );
   };
@@ -273,7 +188,7 @@ class MultiPluginActionModal extends React.Component<Props, State> {
       <ButtonGroup>
         <Button
           color="warning"
-          label={this.renderLabel()}
+          label={this.props.label}
           loading={loading}
           action={this.executeAction}
           disabled={error || success}
@@ -287,7 +202,7 @@ class MultiPluginActionModal extends React.Component<Props, State> {
     const { onClose } = this.props;
     return (
       <Modal
-        title={this.renderLabel()}
+        title={this.props.label}
         closeFunction={onClose}
         body={this.renderBody()}
         footer={this.renderFooter()}

scm-ui/src/admin/plugins/components/UpdateAllActionModal.js

@@ -0,0 +1,39 @@
+// @flow
+
+import React from "react";
+import MultiPluginActionModal from "./MultiPluginActionModal";
+import type {PluginCollection} from "@scm-manager/ui-types";
+import {apiClient} from "@scm-manager/ui-components";
+import {translate} from "react-i18next";
+
+type Props = {
+  onClose: () => void,
+  refresh: () => void,
+  installedPlugins: PluginCollection,
+
+  // context props
+  t: string => string
+};
+
+
+class UpdateAllActionModal extends React.Component<Props> {
+
+  render() {
+    const {onClose, installedPlugins, t} = this.props;
+
+    return <MultiPluginActionModal
+      description={t("plugins.modal.updateAll")} label={t("plugins.updateAll")}
+      onClose={onClose} installedPlugins={installedPlugins} execute={this.updateAll}>
+    </MultiPluginActionModal>;
+  }
+
+  updateAll = () => {
+    const { installedPlugins, refresh, onClose } = this.props;
+    return apiClient
+      .post(installedPlugins._links.update.href)
+      .then(refresh)
+      .then(onClose);
+  };
+}
+
+export default translate("admin")(UpdateAllActionModal);

scm-ui/src/admin/plugins/containers/PluginsOverview.js

@@ -31,6 +31,9 @@ import PluginBottomActions from "../components/PluginBottomActions";
 import MultiPluginAction, {
   MultiPluginActionType
 } from "../components/MultiPluginAction";
+import ExecutePendingActionModal from "../components/ExecutePendingActionModal";
+import CancelPendingActionModal from "../components/CancelPendingActionModal";
+import UpdateAllActionModal from "../components/UpdateAllActionModal";
 
 type Props = {
   loading: boolean,
@@ -51,7 +54,24 @@ type Props = {
   fetchPendingPlugins: (link: string) => void
 };
 
-class PluginsOverview extends React.Component<Props> {
+type State = {
+  showPendingModal: boolean,
+  showUpdateAllModal: boolean,
+  showCancelModal: boolean
+}
+
+class PluginsOverview extends React.Component<Props, State> {
+
+
+  constructor(props: Props, context: *) {
+    super(props, context);
+    this.state = {
+      showPendingModal: false,
+      showUpdateAllModal: false,
+      showCancelModal: false
+    };
+  }
+
   componentDidMount() {
     const {
       installed,
@@ -125,6 +145,7 @@ class PluginsOverview extends React.Component<Props> {
           key={MultiPluginActionType.EXECUTE_PENDING}
           pendingPlugins={pendingPlugins}
           refresh={this.fetchPlugins}
+          onClick={() => this.setState({showPendingModal: true})}
           actionType={MultiPluginActionType.EXECUTE_PENDING}
         />
       );
@@ -140,6 +161,7 @@ class PluginsOverview extends React.Component<Props> {
           key={MultiPluginActionType.CANCEL_PENDING}
           pendingPlugins={pendingPlugins}
           refresh={this.fetchPlugins}
+          onClick={() => this.setState({showCancelModal: true})}
           actionType={MultiPluginActionType.CANCEL_PENDING}
         />
       );
@@ -151,6 +173,7 @@ class PluginsOverview extends React.Component<Props> {
           key={MultiPluginActionType.UPDATE_ALL}
           installedPlugins={collection}
           refresh={this.fetchPlugins}
+          onClick={() => this.setState({showUpdateAllModal: true})}
           actionType={MultiPluginActionType.UPDATE_ALL}
         />
       );
@@ -163,7 +186,30 @@ class PluginsOverview extends React.Component<Props> {
   };
 
   render() {
-    const { loading, error, collection } = this.props;
+    const { loading, error, collection, pendingPlugins } = this.props;
+
+    const { showPendingModal, showCancelModal, showUpdateAllModal} = this.state;
+
+    if (showPendingModal) {
+      return <ExecutePendingActionModal
+        onClose={() => this.setState({showPendingModal: false})}
+        pendingPlugins={pendingPlugins}
+      />;
+    }
+    if (showCancelModal) {
+      return <CancelPendingActionModal
+        onClose={() => this.setState({showCancelModal: false})}
+        refresh={this.fetchPlugins}
+        pendingPlugins={pendingPlugins}
+      />;
+    }
+    if (showUpdateAllModal) {
+      return <UpdateAllActionModal
+        onClose={() => this.setState({showUpdateAllModal: false})}
+        refresh={this.fetchPlugins}
+        installedPlugins={collection}
+      />;
+    }
 
     if (error) {
       return <ErrorNotification error={error} />;