added modal with check for plugin installation

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

@@ -1,7 +1,6 @@
 //@flow
 import type {Collection, Links} from "./hal";
 
-
 export type Plugin = {
   name: string,
   version: string,
@@ -10,6 +9,7 @@ export type Plugin = {
   author: string,
   category: string,
   avatarUrl: string,
+  dependencies: string[],
   _links: Links
 };
 

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

@@ -29,7 +29,15 @@
       "installedNavLink": "Installiert",
       "availableNavLink": "Verfügbar"
     },
-    "noPlugins": "Keine Plugins gefunden."
+    "noPlugins": "Keine Plugins gefunden.",
+    "modal": {
+      "title": "Plugin installieren",
+      "dependency": "Abhängigkeit:",
+      "dependency_plural": "Abhängigkeiten:",
+      "restart": "Neustarten um Plugin zu aktivieren",
+      "install": "Installieren",
+      "abort": "Abbrechen"
+    }
   },
   "repositoryRole": {
     "navLink": "Berechtigungsrollen",

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

@@ -29,7 +29,15 @@
       "installedNavLink": "Installed",
       "availableNavLink": "Available"
     },
-    "noPlugins": "No plugins found."
+    "noPlugins": "No plugins found.",
+    "modal": {
+      "title": "Install Plugin",
+      "dependency": "Dependency:",
+      "dependency_plural": "Dependencies:",
+      "restart": "Restart to activate",
+      "install": "Install",
+      "abort": "Abort"
+    }
   },
   "repositoryRole": {
     "navLink": "Permission Roles",

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

@@ -1,9 +1,10 @@
 //@flow
 import React from "react";
 import injectSheet from "react-jss";
-import type {Plugin} from "@scm-manager/ui-types";
-import {CardColumn} from "@scm-manager/ui-components";
+import type { Plugin } from "@scm-manager/ui-types";
+import { CardColumn } from "@scm-manager/ui-components";
 import PluginAvatar from "./PluginAvatar";
+import PluginModal from "./PluginModal";
 
 type Props = {
   plugin: Plugin,
@@ -12,23 +13,41 @@ type Props = {
   classes: any
 };
 
+type State = {
+  showModal: boolean
+};
+
 const styles = {
   link: {
-    pointerEvents: "cursor"
+    pointerEvents: "all"
   }
 };
 
-class PluginEntry extends React.Component<Props> {
+class PluginEntry extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      showModal: false
+    };
+  }
+
   createAvatar = (plugin: Plugin) => {
     return <PluginAvatar plugin={plugin} />;
   };
 
+  toggleModal = () => {
+    this.setState(prevState => ({
+      showModal: !prevState.showModal
+    }));
+  };
+
   createContentRight = (plugin: Plugin) => {
     const { classes } = this.props;
     if (plugin._links && plugin._links.install && plugin._links.install.href) {
       return (
-        <div className={classes.link} onClick={() => console.log(plugin._links.install.href) /*TODO trigger plugin installation*/}>
-          <i className="fas fa-cloud-download-alt fa-2x has-text-info" />
+        <div className={classes.link} onClick={this.toggleModal}>
+          <i className="fas fa-download fa-2x has-text-info" />
         </div>
       );
     }
@@ -44,13 +63,17 @@ class PluginEntry extends React.Component<Props> {
 
   render() {
     const { plugin } = this.props;
+    const { showModal } = this.state;
     const avatar = this.createAvatar(plugin);
     const contentRight = this.createContentRight(plugin);
     const footerLeft = this.createFooterLeft(plugin);
     const footerRight = this.createFooterRight(plugin);
 
+    const modal = showModal ? <PluginModal plugin={plugin} onSubmit={this.toggleModal} onClose={this.toggleModal} /> : null;
+
     // TODO: Add link to plugin page below
     return (
+      <>
         <CardColumn
           link="#"
           avatar={avatar}
@@ -60,6 +83,8 @@ class PluginEntry extends React.Component<Props> {
           footerLeft={footerLeft}
           footerRight={footerRight}
         />
+        {modal}
+      </>
     );
   }
 }

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

@@ -0,0 +1,78 @@
+//@flow
+import React from "react";
+import { translate } from "react-i18next";
+import type { Plugin } from "@scm-manager/ui-types";
+import {
+  Button,
+  ButtonGroup,
+  Checkbox,
+  Modal,
+  SubmitButton
+} from "@scm-manager/ui-components";
+
+type Props = {
+  plugin: Plugin,
+  onSubmit: () => void,
+  onClose: () => void,
+
+  // context props
+  t: string => string
+};
+
+class PluginModal extends React.Component<Props> {
+  renderDependencies() {
+    const { plugin, t } = this.props;
+
+    let dependencies = null;
+    if (plugin.dependencies && plugin.dependencies.length > 0) {
+      dependencies = (
+        <>
+          {t("plugins.modal.dependency", {count: plugin.dependencies.length})}
+          <ul>
+            {plugin.dependencies.map((dependency, index) => {
+              return <li key={index}>{dependency}</li>;
+            })}
+          </ul>
+        </>
+      );
+    }
+    return dependencies;
+  }
+
+  render() {
+    const { onSubmit, onClose, t } = this.props;
+
+    const body = (
+      <>
+        {this.renderDependencies()}
+        <Checkbox
+          checked={false}
+          label={t("plugins.modal.restart")}
+          onChange={null}
+          disabled={null}
+        />
+      </>
+    );
+
+    const footer = (
+      <form onSubmit={onSubmit}>
+        <ButtonGroup>
+          <SubmitButton label={t("plugins.modal.install")} />
+          <Button label={t("plugins.modal.abort")} action={onClose} />
+        </ButtonGroup>
+      </form>
+    );
+
+    return (
+      <Modal
+        title={t("plugins.modal.title")}
+        closeFunction={() => onClose()}
+        body={body}
+        footer={footer}
+        active={true}
+      />
+    );
+  }
+}
+
+export default translate("admin")(PluginModal);