Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-13 00:45:44 +01:00
Code Issues Packages Projects Releases Activity

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

Browse Source
This commit is contained in:
Eduard Heimbuch
2019-09-17 16:25:24 +02:00
parent a6f50e628b
commit e10b7df289
6 changed files with 160 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scm-ui-components/packages/ui-types/src/Plugin.js
View File

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

6
scm-ui/public/locales/de/admin.json
View File

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

6
scm-ui/public/locales/en/admin.json
View File

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

36
scm-ui/src/admin/plugins/components/ExecutePendingModal.js
View File

@@ -86,11 +86,9 @@ class ExecutePendingModal extends React.Component<Props, State> {
<> <>
<strong>{t("plugins.modal.installQueue")}</strong> <strong>{t("plugins.modal.installQueue")}</strong>
<ul> <ul>
{pendingPlugins._embedded.new {pendingPlugins._embedded.new.map(plugin => (
.filter(plugin => plugin.pending) <li key={plugin.name}>{plugin.name}</li>
.map(plugin => ( ))}
<li key={plugin.name}>{plugin.name}</li>
))}
</ul> </ul>
</> </>
)} )}
@@ -107,11 +105,28 @@ class ExecutePendingModal extends React.Component<Props, State> {
<> <>
<strong>{t("plugins.modal.updateQueue")}</strong> <strong>{t("plugins.modal.updateQueue")}</strong>
<ul> <ul>
{pendingPlugins._embedded.update {pendingPlugins._embedded.update.map(plugin => (
.filter(plugin => plugin.pending) <li key={plugin.name}>{plugin.name}</li>
.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> </ul>
</> </>
)} )}
@@ -128,6 +143,7 @@ class ExecutePendingModal extends React.Component<Props, State> {
<p>{t("plugins.modal.executePending")}</p> <p>{t("plugins.modal.executePending")}</p>
{this.renderInstallQueue()} {this.renderInstallQueue()}
{this.renderUpdateQueue()} {this.renderUpdateQueue()}
{this.renderUninstallQueue()}
</div> </div>
</div> </div>
<div className="media">{this.renderNotifications()}</div> <div className="media">{this.renderNotifications()}</div>

123
scm-ui/src/admin/plugins/components/PluginEntry.js
View File

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

81
scm-ui/src/admin/plugins/components/PluginModal.js
View File

@@ -103,6 +103,8 @@ class PluginModal extends React.Component<Props, State> {
pluginActionLink = plugin._links.install.href; pluginActionLink = plugin._links.install.href;
} else if (pluginAction === "update") { } else if (pluginAction === "update") {
pluginActionLink = plugin._links.update.href; pluginActionLink = plugin._links.update.href;
} else if (pluginAction === "uninstall") {
pluginActionLink = plugin._links.uninstall.href;
} }
return pluginActionLink + "?restart=" + restart.toString(); return pluginActionLink + "?restart=" + restart.toString();
}; };
@@ -256,49 +258,48 @@ class PluginModal extends React.Component<Props, State> {
</div> </div>
</div> </div>
)} )}
{pluginAction === "update" && ( {(pluginAction === "update" || pluginAction === "uninstall") && (
<> <div className="field is-horizontal">
<div className="field is-horizontal"> <div
<div className={classNames(
className={classNames( classes.userLabelAlignment,
classes.userLabelAlignment, classes.userLabelMarginLarge,
classes.userLabelMarginLarge, "field-label is-inline-flex"
"field-label is-inline-flex" )}
)} >
> {t("plugins.modal.currentVersion")}:
{t("plugins.modal.currentVersion")}:
</div>
<div
className={classNames(
classes.userFieldFlex,
"field-body is-inline-flex"
)}
>
{plugin.version}
</div>
</div> </div>
<div className="field is-horizontal"> <div
<div className={classNames(
className={classNames( classes.userFieldFlex,
classes.userLabelAlignment, "field-body is-inline-flex"
classes.userLabelMarginLarge, )}
"field-label is-inline-flex" >
)} {plugin.version}
>
{t("plugins.modal.newVersion")}:
</div>
<div
className={classNames(
classes.userFieldFlex,
"field-body is-inline-flex"
)}
>
{plugin.newVersion}
</div>
</div> </div>
</> </div>
)}
{pluginAction === "update" && (
<div className="field is-horizontal">
<div
className={classNames(
classes.userLabelAlignment,
classes.userLabelMarginLarge,
"field-label is-inline-flex"
)}
>
{t("plugins.modal.newVersion")}:
</div>
<div
className={classNames(
classes.userFieldFlex,
"field-body is-inline-flex"
)}
>
{plugin.newVersion}
</div>
</div>
)} )}
{this.renderDependencies()} {this.renderDependencies()}
</div> </div>
</div> </div>