added more information to modal body

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

@@ -31,12 +31,14 @@
     },
     "noPlugins": "Keine Plugins gefunden.",
     "modal": {
-      "title": "Plugin installieren",
+      "title": "{{name}} Plugin installieren",
-      "dependency": "Abhängigkeit:",
-      "dependency_plural": "Abhängigkeiten:",
       "restart": "Neustarten um Plugin zu aktivieren",
       "install": "Installieren",
-      "abort": "Abbrechen"
+      "abort": "Abbrechen",
+      "author": "Autor",
+      "version": "Version",
+      "dependencyNotification": "Mit diesem Plugin werden folgende Abhängigkeiten mit installieren wenn sie noch nicht vorhanden sind.",
+      "dependencies": "Abhängigkeiten"
     }
   },
   "repositoryRole": {

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

@@ -6,7 +6,7 @@
       "settingsNavLink": "Settings",
       "generalNavLink": "General"
     },
-    "info":  {
+    "info": {
       "currentAppVersion": "Current Application Version",
       "communityTitle": "Community Support",
       "communityIconAlt": "Community Support Icon",
@@ -31,12 +31,14 @@
     },
     "noPlugins": "No plugins found.",
     "modal": {
-      "title": "Install Plugin",
+      "title": "Install {{name}} Plugin",
-      "dependency": "Dependency:",
-      "dependency_plural": "Dependencies:",
       "restart": "Restart to activate",
       "install": "Install",
-      "abort": "Abort"
+      "abort": "Abort",
+      "author": "Author",
+      "version": "Version",
+      "dependencyNotification": "With this plugin, the following dependencies are installed if they are not available yet.",
+      "dependencies": "Dependencies"
     }
   },
   "repositoryRole": {
@@ -61,7 +63,7 @@
       "permissions": "Permissions",
       "submit": "Save"
     },
-    "delete" : {
+    "delete": {
       "button": "Löschen",
       "subtitle": "Berechtigungsrolle löschen",
       "confirmAlert": {

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

@@ -19,6 +19,7 @@ type State = {
 
 const styles = {
   link: {
+    cursor: "pointer",
     pointerEvents: "all"
   }
 };

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

@@ -1,6 +1,8 @@
 //@flow
 import React from "react";
+import { compose } from "redux";
 import { translate } from "react-i18next";
+import injectSheet from "react-jss";
 import type { Plugin } from "@scm-manager/ui-types";
 import {
   Button,
@@ -9,6 +11,7 @@ import {
   Modal,
   SubmitButton
 } from "@scm-manager/ui-components";
+import classNames from "classnames";
 
 type Props = {
   plugin: Plugin,
@@ -16,23 +19,58 @@ type Props = {
   onClose: () => void,
 
   // context props
+  classes: any,
   t: string => string
 };
 
+const styles = {
+  titleVersion: {
+    marginLeft: "0.75rem"
+  },
+  userLabelAlignment: {
+    textAlign: "left",
+    marginRight: 0,
+    minWidth: "5.5em"
+  },
+  userFieldFlex: {
+    flexGrow: 4
+  },
+  listSpacing: {
+    marginTop: "0 !important"
+  }
+};
+
 class PluginModal extends React.Component<Props> {
   renderDependencies() {
-    const { plugin, t } = this.props;
+    const { plugin, classes, t } = this.props;
 
     let dependencies = null;
     if (plugin.dependencies && plugin.dependencies.length > 0) {
       dependencies = (
         <>
-          {t("plugins.modal.dependency", {count: plugin.dependencies.length})}
+          <strong>{t("plugin.modal.dependencyNotification")}</strong>
-          <ul>
+          <div className="field is-horizontal">
-            {plugin.dependencies.map((dependency, index) => {
+            <div
-              return <li key={index}>{dependency}</li>;
+              className={classNames(
-            })}
+                classes.userLabelAlignment,
-          </ul>
+                "field-label is-inline-flex"
+              )}
+            >
+              {t("plugins.modal.dependencies")}:
+            </div>
+            <div
+              className={classNames(
+                classes.userFieldFlex,
+                "field-body is-inline-flex"
+              )}
+            >
+              <ul className={classes.listSpacing}>
+                {plugin.dependencies.map((dependency, index) => {
+                  return <li key={index}>{dependency}</li>;
+                })}
+              </ul>
+            </div>
+          </div>
         </>
       );
     }
@@ -40,17 +78,67 @@ class PluginModal extends React.Component<Props> {
   }
 
   render() {
-    const { onSubmit, onClose, t } = this.props;
+    const { plugin, onSubmit, onClose, classes, t } = this.props;
 
     const body = (
       <>
-        {this.renderDependencies()}
+        <div className="media">
-        <Checkbox
+          <div className="media-content">
-          checked={false}
+            <p>{plugin.description && plugin.description}</p>
-          label={t("plugins.modal.restart")}
+          </div>
-          onChange={null}
+        </div>
-          disabled={null}
+        <div className="media">
-        />
+          <div className="media-content">
+            <div className="field is-horizontal">
+              <div
+                className={classNames(
+                  classes.userLabelAlignment,
+                  "field-label is-inline-flex"
+                )}
+              >
+                {t("plugins.modal.author")}:
+              </div>
+              <div
+                className={classNames(
+                  classes.userFieldFlex,
+                  "field-body is-inline-flex"
+                )}
+              >
+                {plugin.author}
+              </div>
+            </div>
+            <div className="field is-horizontal">
+              <div
+                className={classNames(
+                  classes.userLabelAlignment,
+                  "field-label is-inline-flex"
+                )}
+              >
+                {t("plugins.modal.version")}:
+              </div>
+              <div
+                className={classNames(
+                  classes.userFieldFlex,
+                  "field-body is-inline-flex"
+                )}
+              >
+                {plugin.version}
+              </div>
+            </div>
+
+            {this.renderDependencies()}
+          </div>
+        </div>
+        <div className="media">
+          <div className="media-content">
+            <Checkbox
+              checked={false}
+              label={t("plugins.modal.restart")}
+              onChange={null}
+              disabled={null}
+            />
+          </div>
+        </div>
       </>
     );
 
@@ -65,7 +153,9 @@ class PluginModal extends React.Component<Props> {
 
     return (
       <Modal
-        title={t("plugins.modal.title")}
+        title={t("plugins.modal.title", {
+          name: plugin.displayName ? plugin.displayName : ""
+        })}
         closeFunction={() => onClose()}
         body={body}
         footer={footer}
@@ -75,4 +165,7 @@ class PluginModal extends React.Component<Props> {
   }
 }
 
-export default translate("admin")(PluginModal);
+export default compose(
+  injectSheet(styles),
+  translate("admin")
+)(PluginModal);