implement plugin uninstall modal / add uninstall marked plugins to pending modal

scm-ui-components/packages/ui-types/src/Plugin.js

@@ -11,6 +11,7 @@ export type Plugin = {
   category: string,
   avatarUrl: string,
   pending: boolean,
+  markedForUninstall?: boolean,
   dependencies: string[],
   _links: Links
 };
@@ -31,5 +32,6 @@ export type PendingPlugins = {
   _embedded: {
     new: [],
     update: [],
+    uninstall: []
   }
 }

scm-ui/public/locales/de/admin.json

@@ -34,15 +34,19 @@
     "modal": {
       "title": {
         "install": "{{name}} Plugin installieren",
-        "update": "{{name}} Plugin aktualisieren"
+        "update": "{{name}} Plugin aktualisieren",
+        "uninstall": "{{name}} Plugin deinstallieren"
       },
       "restart": "Neustarten um Plugin zu aktivieren",
       "install": "Installieren",
       "update": "Aktualisieren",
+      "uninstall": "Deinstallieren",
       "installQueue": "Werden installiert:",
       "updateQueue": "Werden aktualisiert:",
+      "uninstallQueue": "Werden deinstalliert:",
       "installAndRestart": "Installieren und Neustarten",
       "updateAndRestart": "Aktualisieren und Neustarten",
+      "uninstallAndRestart": "Deinstallieren and Neustarten",
       "executeAndRestart": "Ausführen und Neustarten",
       "abort": "Abbrechen",
       "author": "Autor",

scm-ui/public/locales/en/admin.json

@@ -34,15 +34,19 @@
     "modal": {
       "title": {
         "install": "Install {{name}} Plugin",
-        "update": "Update {{name}} Plugin"
+        "update": "Update {{name}} Plugin",
+        "uninstall": "Uninstall {{name}} Plugin"
       },
       "restart": "Restart to activate",
       "install": "Install",
       "update": "Update",
+      "uninstall": "Uninstall",
       "installQueue": "Will be installed:",
       "updateQueue": "Will be updated:",
+      "uninstallQueue": "Will be uninstalled:",
       "installAndRestart": "Install and Restart",
       "updateAndRestart": "Update and Restart",
+      "uninstallAndRestart": "Uninstall and Restart",
       "executeAndRestart": "Execute and Restart",
       "abort": "Abort",
       "author": "Author",

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

@@ -86,9 +86,7 @@ class ExecutePendingModal extends React.Component<Props, State> {
             <>
               <strong>{t("plugins.modal.installQueue")}</strong>
               <ul>
-                {pendingPlugins._embedded.new
-                  .filter(plugin => plugin.pending)
-                  .map(plugin => (
+                {pendingPlugins._embedded.new.map(plugin => (
                   <li key={plugin.name}>{plugin.name}</li>
                 ))}
               </ul>
@@ -107,9 +105,26 @@ class ExecutePendingModal extends React.Component<Props, State> {
             <>
               <strong>{t("plugins.modal.updateQueue")}</strong>
               <ul>
-                {pendingPlugins._embedded.update
-                  .filter(plugin => plugin.pending)
-                  .map(plugin => (
+                {pendingPlugins._embedded.update.map(plugin => (
+                  <li key={plugin.name}>{plugin.name}</li>
+                ))}
+              </ul>
+            </>
+          )}
+      </>
+    );
+  };
+
+  renderUninstallQueue = () => {
+    const { pendingPlugins, t } = this.props;
+    return (
+      <>
+        {pendingPlugins._embedded &&
+          pendingPlugins._embedded.uninstall.length > 0 && (
+            <>
+              <strong>{t("plugins.modal.uninstallQueue")}</strong>
+              <ul>
+                {pendingPlugins._embedded.uninstall.map(plugin => (
                   <li key={plugin.name}>{plugin.name}</li>
                 ))}
               </ul>
@@ -128,6 +143,7 @@ class ExecutePendingModal extends React.Component<Props, State> {
             <p>{t("plugins.modal.executePending")}</p>
             {this.renderInstallQueue()}
             {this.renderUpdateQueue()}
+            {this.renderUninstallQueue()}
           </div>
         </div>
         <div className="media">{this.renderNotifications()}</div>

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

@@ -7,10 +7,10 @@ import PluginAvatar from "./PluginAvatar";
 import classNames from "classnames";
 import PluginModal from "./PluginModal";
 
-
 const PluginAction = {
   INSTALL: "install",
-  UPDATE: "update"
+  UPDATE: "update",
+  UNINSTALL: "uninstall"
 };
 
 type Props = {
@@ -22,7 +22,9 @@ type Props = {
 };
 
 type State = {
-  showModal: boolean
+  showInstallModal: boolean,
+  showUpdateModal: boolean,
+  showUninstallModal: boolean
 };
 
 const styles = {
@@ -45,6 +47,12 @@ const styles = {
     "& .level": {
       paddingBottom: "0.5rem"
     }
+  },
+  actionbar: {
+    display: "flex",
+    "& span + span": {
+      marginLeft: "0.5rem"
+    }
   }
 };
 
@@ -53,7 +61,9 @@ class PluginEntry extends React.Component<Props, State> {
     super(props);
 
     this.state = {
-      showModal: false
+      showInstallModal: false,
+      showUpdateModal: false,
+      showUninstallModal: false
     };
   }
 
@@ -61,10 +71,9 @@ class PluginEntry extends React.Component<Props, State> {
     return <PluginAvatar plugin={plugin} />;
   };
 
-  toggleModal = () => {
-    this.setState(prevState => ({
-      showModal: !prevState.showModal
-    }));
+  toggleModal = (showModal: string) => {
+    const oldValue = this.state[showModal];
+    this.setState({ [showModal]: !oldValue });
   };
 
   createFooterRight = (plugin: Plugin) => {
@@ -81,72 +90,100 @@ class PluginEntry extends React.Component<Props, State> {
     return plugin._links && plugin._links.update && plugin._links.update.href;
   };
 
+  isUninstallable = () => {
+    const { plugin } = this.props;
+    return (
+      plugin._links && plugin._links.uninstall && plugin._links.uninstall.href
+    );
+  };
+
   createActionbar = () => {
     const { classes } = this.props;
-    if (this.isInstallable()) {
     return (
+      <div className={classNames(classes.actionbar, classes.topRight)}>
+        {this.isInstallable() && (
           <span
-          className={classNames(classes.link, classes.topRight, "level-item")}
-          onClick={this.toggleModal}
+            className={classNames(classes.link, "level-item")}
+            onClick={() => this.toggleModal("showInstallModal")}
           >
             <i className="fas fa-download has-text-info" />
           </span>
-      );
-    } else if (this.isUpdatable()) {
-      return (
+        )}
+        {this.isUninstallable() && (
           <span
-          className={classNames(classes.link, classes.topRight, "level-item")}
-          onClick={this.toggleModal}
+            className={classNames(classes.link, "level-item")}
+            onClick={() => this.toggleModal("showUninstallModal")}
+          >
+            <i className="fas fa-trash has-text-info" />
+          </span>
+        )}
+        {this.isUpdatable() && (
+          <span
+            className={classNames(classes.link, "level-item")}
+            onClick={() => this.toggleModal("showUpdateModal")}
           >
             <i className="fas fa-sync-alt has-text-info" />
           </span>
+        )}
+      </div>
     );
-    }
   };
 
   renderModal = () => {
     const { plugin, refresh } = this.props;
-    if (this.isInstallable()) {
+    if (this.state.showInstallModal && this.isInstallable()) {
       return (
         <PluginModal
           plugin={plugin}
           pluginAction={PluginAction.INSTALL}
           refresh={refresh}
-          onClose={this.toggleModal}
+          onClose={() => this.toggleModal("showInstallModal")}
         />
       );
-    } else if (this.isUpdatable()) {
+    } else if (this.state.showUpdateModal && this.isUpdatable()) {
       return (
         <PluginModal
           plugin={plugin}
           pluginAction={PluginAction.UPDATE}
           refresh={refresh}
-          onClose={this.toggleModal}
+          onClose={() => this.toggleModal("showUpdateModal")}
         />
       );
+    } else if (this.state.showUninstallModal && this.isUninstallable()) {
+      return (
+        <PluginModal
+          plugin={plugin}
+          pluginAction={PluginAction.UNINSTALL}
+          refresh={refresh}
+          onClose={() => this.toggleModal("showUninstallModal")}
+        />
+      );
+    } else {
+      return null;
     }
   };
 
   createPendingSpinner = () => {
     const { plugin, classes } = this.props;
-    if (plugin.pending) {
     return (
       <span className={classes.topRight}>
-          <i className="fas fa-spinner fa-spin has-text-info" />
+        <i
+          className={classNames(
+            "fas fa-spinner fa-lg fa-spin",
+            plugin.markedForUninstall ? "has-text-danger" : "has-text-info"
+          )}
+        />
       </span>
     );
-    }
-    return null;
   };
 
   render() {
     const { plugin, classes } = this.props;
-    const { showModal } = this.state;
     const avatar = this.createAvatar(plugin);
     const actionbar = this.createActionbar();
     const footerRight = this.createFooterRight(plugin);
 
-    const modal = showModal ? this.renderModal() : null;
+    const modal = this.renderModal();
 
     return (
       <>
@@ -157,7 +194,9 @@ class PluginEntry extends React.Component<Props, State> {
           title={plugin.displayName ? plugin.displayName : plugin.name}
           description={plugin.description}
           contentRight={
-            plugin.pending ? this.createPendingSpinner() : actionbar
+            plugin.pending || plugin.markedForUninstall
+              ? this.createPendingSpinner()
+              : actionbar
           }
           footerRight={footerRight}
         />

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

@@ -103,6 +103,8 @@ class PluginModal extends React.Component<Props, State> {
       pluginActionLink = plugin._links.install.href;
     } else if (pluginAction === "update") {
       pluginActionLink = plugin._links.update.href;
+    } else if (pluginAction === "uninstall") {
+      pluginActionLink = plugin._links.uninstall.href;
     }
     return pluginActionLink + "?restart=" + restart.toString();
   };
@@ -256,8 +258,7 @@ class PluginModal extends React.Component<Props, State> {
                 </div>
               </div>
             )}
-            {pluginAction === "update" && (
-              <>
+            {(pluginAction === "update" || pluginAction === "uninstall") && (
               <div className="field is-horizontal">
                 <div
                   className={classNames(
@@ -277,6 +278,8 @@ class PluginModal extends React.Component<Props, State> {
                   {plugin.version}
                 </div>
               </div>
+            )}
+            {pluginAction === "update" && (
               <div className="field is-horizontal">
                 <div
                   className={classNames(
@@ -296,9 +299,7 @@ class PluginModal extends React.Component<Props, State> {
                   {plugin.newVersion}
                 </div>
               </div>
-              </>
             )}
-
             {this.renderDependencies()}
           </div>
         </div>