diff --git a/scm-ui-components/packages/ui-types/src/Plugin.js b/scm-ui-components/packages/ui-types/src/Plugin.js index 3f4f9858c1..157ef06098 100644 --- a/scm-ui-components/packages/ui-types/src/Plugin.js +++ b/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 }; diff --git a/scm-ui/public/locales/de/admin.json b/scm-ui/public/locales/de/admin.json index 54ae1ab91a..3f39de2717 100644 --- a/scm-ui/public/locales/de/admin.json +++ b/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", diff --git a/scm-ui/public/locales/en/admin.json b/scm-ui/public/locales/en/admin.json index 2402f21423..970dc44c7f 100644 --- a/scm-ui/public/locales/en/admin.json +++ b/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", diff --git a/scm-ui/src/admin/plugins/components/PluginEntry.js b/scm-ui/src/admin/plugins/components/PluginEntry.js index 7aaeb3f67f..12bc5c35c5 100644 --- a/scm-ui/src/admin/plugins/components/PluginEntry.js +++ b/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 { +class PluginEntry extends React.Component { + constructor(props: Props) { + super(props); + + this.state = { + showModal: false + }; + } + createAvatar = (plugin: Plugin) => { return ; }; + 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 ( -
console.log(plugin._links.install.href) /*TODO trigger plugin installation*/}> - +
+
); } @@ -44,22 +63,28 @@ class PluginEntry extends React.Component { 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 ? : null; + // TODO: Add link to plugin page below return ( - + <> + + {modal} + ); } } diff --git a/scm-ui/src/admin/plugins/components/PluginModal.js b/scm-ui/src/admin/plugins/components/PluginModal.js new file mode 100644 index 0000000000..aa126f6c58 --- /dev/null +++ b/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 { + 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})} +
    + {plugin.dependencies.map((dependency, index) => { + return
  • {dependency}
  • ; + })} +
+ + ); + } + return dependencies; + } + + render() { + const { onSubmit, onClose, t } = this.props; + + const body = ( + <> + {this.renderDependencies()} + + + ); + + const footer = ( +
+ + +