Cleanup MultiPluginAction

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

@@ -11,56 +11,21 @@ export const MultiPluginActionType = {
 };
 
 type Props = {
-  actionType: string,
-  pendingPlugins?: PendingPlugins,
-  installedPlugins?: PluginCollection,
-  refresh: () => void,
+  icon: string,
+  label: string,
   onClick: () => void,
-
-  // context props
-  t: (key: string, params?: Object) => string
 };
 
 class MultiPluginAction extends React.Component<Props> {
-
-  renderLabel = () => {
-    const { t, actionType, installedPlugins } = this.props;
-
-    if (actionType === MultiPluginActionType.EXECUTE_PENDING) {
-      return t("plugins.executePending");
-    } else if (actionType === MultiPluginActionType.CANCEL_PENDING) {
-      return t("plugins.cancelPending");
-    } else {
-      const outdatedPlugins = installedPlugins._embedded.plugins.filter(
-        p => p._links.update
-      ).length;
-      return t("plugins.outdatedPlugins", {
-        count: outdatedPlugins
-      });
-    }
-  };
-
-  renderIcon = () => {
-    const { actionType } = this.props;
-
-    if (actionType === MultiPluginActionType.EXECUTE_PENDING) {
-      return "arrow-circle-right";
-    } else if (actionType === MultiPluginActionType.CANCEL_PENDING) {
-      return "times";
-    } else {
-      return "sync-alt";
-    }
-  };
-
   render() {
-    const { onClick } = this.props;
+    const { onClick, icon, label } = this.props;
     return (
       <>
         <Button
           color="primary"
           reducedMobile={true}
-          icon={this.renderIcon()}
-          label={this.renderLabel()}
+          icon={icon}
+          label={label}
           action={() => onClick()}
         />
       </>
@@ -68,4 +33,4 @@ class MultiPluginAction extends React.Component<Props> {
   }
 }
 
-export default translate("admin")(MultiPluginAction);
+export default MultiPluginAction;

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

@@ -28,9 +28,7 @@ import {
 } from "../../../modules/indexResource";
 import PluginTopActions from "../components/PluginTopActions";
 import PluginBottomActions from "../components/PluginBottomActions";
-import MultiPluginAction, {
-  MultiPluginActionType
-} from "../components/MultiPluginAction";
+import MultiPluginAction from "../components/MultiPluginAction";
 import ExecutePendingActionModal from "../components/ExecutePendingActionModal";
 import CancelPendingActionModal from "../components/CancelPendingActionModal";
 import UpdateAllActionModal from "../components/UpdateAllActionModal";
@@ -47,7 +45,7 @@ type Props = {
   pendingPlugins: PendingPlugins,
 
   // context objects
-  t: string => string,
+  t: (key: string, params?: Object) => string,
 
   // dispatched functions
   fetchPluginsByLink: (link: string) => void,
@@ -132,7 +130,7 @@ class PluginsOverview extends React.Component<Props, State> {
   };
 
   createActions = () => {
-    const { pendingPlugins, collection } = this.props;
+    const { pendingPlugins, collection, t } = this.props;
     const buttons = [];
 
     if (
@@ -142,11 +140,11 @@ class PluginsOverview extends React.Component<Props, State> {
     ) {
       buttons.push(
         <MultiPluginAction
-          key={MultiPluginActionType.EXECUTE_PENDING}
-          pendingPlugins={pendingPlugins}
+          key={"executePending"}
+          icon={"arrow-circle-right"}
+          label={t("plugins.executePending")}
           refresh={this.fetchPlugins}
           onClick={() => this.setState({showPendingModal: true})}
-          actionType={MultiPluginActionType.EXECUTE_PENDING}
         />
       );
     }
@@ -158,11 +156,11 @@ class PluginsOverview extends React.Component<Props, State> {
     ) {
       buttons.push(
         <MultiPluginAction
-          key={MultiPluginActionType.CANCEL_PENDING}
-          pendingPlugins={pendingPlugins}
+          key={"cancelPending"}
+          icon={"times"}
+          label={t("plugins.cancelPending")}
           refresh={this.fetchPlugins}
           onClick={() => this.setState({showCancelModal: true})}
-          actionType={MultiPluginActionType.CANCEL_PENDING}
         />
       );
     }
@@ -170,11 +168,11 @@ class PluginsOverview extends React.Component<Props, State> {
     if (collection && collection._links && collection._links.update) {
       buttons.push(
         <MultiPluginAction
-          key={MultiPluginActionType.UPDATE_ALL}
-          installedPlugins={collection}
+          key={"updateAll"}
+          icon={"sync-alt"}
+          label={this.computeUpdateAllSize()}
           refresh={this.fetchPlugins}
           onClick={() => this.setState({showUpdateAllModal: true})}
-          actionType={MultiPluginActionType.UPDATE_ALL}
         />
       );
     }
@@ -185,6 +183,16 @@ class PluginsOverview extends React.Component<Props, State> {
     return null;
   };
 
+  computeUpdateAllSize = () => {
+    const {collection, t} = this.props;
+    const outdatedPlugins = collection._embedded.plugins.filter(
+      p => p._links.update
+    ).length;
+    return t("plugins.outdatedPlugins", {
+      count: outdatedPlugins
+    });
+  };
+
   render() {
     const { loading, error, collection, pendingPlugins } = this.props;