mirror of
https://github.com/scm-manager/scm-manager.git
synced 2025-11-13 00:45:44 +01:00
scm-ui: new repository layout
This commit is contained in:
Sebastian Sdorra
@@ -0,0 +1,68 @@
|
||||
// @flow
|
||||
import React from "react";
|
||||
import { Button } from "@scm-manager/ui-components";
|
||||
import type { PendingPlugins } from "@scm-manager/ui-types";
|
||||
import { translate } from "react-i18next";
|
||||
import ExecutePendingModal from "./ExecutePendingModal";
|
||||
|
||||
type Props = {
|
||||
pendingPlugins: PendingPlugins,
|
||||
|
||||
// context props
|
||||
t: string => string
|
||||
};
|
||||
|
||||
type State = {
|
||||
showModal: boolean
|
||||
};
|
||||
|
||||
class ExecutePendingAction extends React.Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
showModal: false
|
||||
};
|
||||
}
|
||||
|
||||
openModal = () => {
|
||||
this.setState({
|
||||
showModal: true
|
||||
});
|
||||
};
|
||||
|
||||
closeModal = () => {
|
||||
this.setState({
|
||||
showModal: false
|
||||
});
|
||||
};
|
||||
|
||||
renderModal = () => {
|
||||
const { showModal } = this.state;
|
||||
const { pendingPlugins } = this.props;
|
||||
if (showModal) {
|
||||
return (
|
||||
<ExecutePendingModal
|
||||
pendingPlugins={pendingPlugins}
|
||||
onClose={this.closeModal}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
render() {
|
||||
const { t } = this.props;
|
||||
return (
|
||||
<>
|
||||
{this.renderModal()}
|
||||
<Button
|
||||
color="primary"
|
||||
label={t("plugins.executePending")}
|
||||
action={this.openModal}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default translate("admin")(ExecutePendingAction);
|
||||
@@ -0,0 +1,185 @@
|
||||
// @flow
|
||||
import React from "react";
|
||||
import {
|
||||
apiClient,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
ErrorNotification,
|
||||
Modal,
|
||||
Notification
|
||||
} from "@scm-manager/ui-components";
|
||||
import type { PendingPlugins } from "@scm-manager/ui-types";
|
||||
import { translate } from "react-i18next";
|
||||
import waitForRestart from "./waitForRestart";
|
||||
import SuccessNotification from "./SuccessNotification";
|
||||
|
||||
type Props = {
|
||||
onClose: () => void,
|
||||
pendingPlugins: PendingPlugins,
|
||||
|
||||
// context props
|
||||
t: string => string
|
||||
};
|
||||
|
||||
type State = {
|
||||
loading: boolean,
|
||||
success: boolean,
|
||||
error?: Error
|
||||
};
|
||||
|
||||
class ExecutePendingModal extends React.Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
loading: false,
|
||||
success: false
|
||||
};
|
||||
}
|
||||
|
||||
renderNotifications = () => {
|
||||
const { t } = this.props;
|
||||
const { error, success } = this.state;
|
||||
if (error) {
|
||||
return <ErrorNotification error={error} />;
|
||||
} else if (success) {
|
||||
return <SuccessNotification />;
|
||||
} else {
|
||||
return (
|
||||
<Notification type="warning">
|
||||
{t("plugins.modal.restartNotification")}
|
||||
</Notification>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
executeAndRestart = () => {
|
||||
const { pendingPlugins } = this.props;
|
||||
this.setState({
|
||||
loading: true
|
||||
});
|
||||
|
||||
apiClient
|
||||
.post(pendingPlugins._links.execute.href)
|
||||
.then(waitForRestart)
|
||||
.then(() => {
|
||||
this.setState({
|
||||
success: true,
|
||||
loading: false,
|
||||
error: undefined
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
this.setState({
|
||||
success: false,
|
||||
loading: false,
|
||||
error: error
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
renderInstallQueue = () => {
|
||||
const { pendingPlugins, t } = this.props;
|
||||
return (
|
||||
<>
|
||||
{pendingPlugins._embedded &&
|
||||
pendingPlugins._embedded.new.length > 0 && (
|
||||
<>
|
||||
<strong>{t("plugins.modal.installQueue")}</strong>
|
||||
<ul>
|
||||
{pendingPlugins._embedded.new.map(plugin => (
|
||||
<li key={plugin.name}>{plugin.name}</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
renderUpdateQueue = () => {
|
||||
const { pendingPlugins, t } = this.props;
|
||||
return (
|
||||
<>
|
||||
{pendingPlugins._embedded &&
|
||||
pendingPlugins._embedded.update.length > 0 && (
|
||||
<>
|
||||
<strong>{t("plugins.modal.updateQueue")}</strong>
|
||||
<ul>
|
||||
{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>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
renderBody = () => {
|
||||
const { t } = this.props;
|
||||
return (
|
||||
<>
|
||||
<div className="media">
|
||||
<div className="content">
|
||||
<p>{t("plugins.modal.executePending")}</p>
|
||||
{this.renderInstallQueue()}
|
||||
{this.renderUpdateQueue()}
|
||||
{this.renderUninstallQueue()}
|
||||
</div>
|
||||
</div>
|
||||
<div className="media">{this.renderNotifications()}</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
renderFooter = () => {
|
||||
const { onClose, t } = this.props;
|
||||
const { loading, error, success } = this.state;
|
||||
return (
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
color="warning"
|
||||
label={t("plugins.modal.executeAndRestart")}
|
||||
loading={loading}
|
||||
action={this.executeAndRestart}
|
||||
disabled={error || success}
|
||||
/>
|
||||
<Button label={t("plugins.modal.abort")} action={onClose} />
|
||||
</ButtonGroup>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { onClose, t } = this.props;
|
||||
return (
|
||||
<Modal
|
||||
title={t("plugins.modal.executeAndRestart")}
|
||||
closeFunction={onClose}
|
||||
body={this.renderBody()}
|
||||
footer={this.renderFooter()}
|
||||
active={true}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default translate("admin")(ExecutePendingModal);
|
||||
@@ -0,0 +1,22 @@
|
||||
//@flow
|
||||
import React from "react";
|
||||
import {ExtensionPoint} from "@scm-manager/ui-extensions";
|
||||
import type {Plugin} from "@scm-manager/ui-types";
|
||||
import {Image} from "@scm-manager/ui-components";
|
||||
|
||||
type Props = {
|
||||
plugin: Plugin
|
||||
};
|
||||
|
||||
export default class PluginAvatar extends React.Component<Props> {
|
||||
render() {
|
||||
const { plugin } = this.props;
|
||||
return (
|
||||
<p className="image is-64x64">
|
||||
<ExtensionPoint name="plugins.plugin-avatar" props={{ plugin }}>
|
||||
<Image src={plugin.avatarUrl ? plugin.avatarUrl : "/images/blib.jpg"} alt="Logo" />
|
||||
</ExtensionPoint>
|
||||
</p>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
// @flow
|
||||
import * as React from "react";
|
||||
import classNames from "classnames";
|
||||
import injectSheet from "react-jss";
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
border: "2px solid #e9f7fd",
|
||||
padding: "1em 1em",
|
||||
marginTop: "2em",
|
||||
display: "flex",
|
||||
justifyContent: "center"
|
||||
}
|
||||
};
|
||||
|
||||
type Props = {
|
||||
children?: React.Node,
|
||||
|
||||
// context props
|
||||
classes: any
|
||||
};
|
||||
|
||||
class PluginBottomActions extends React.Component<Props> {
|
||||
render() {
|
||||
const { children, classes } = this.props;
|
||||
return <div className={classNames(classes.container)}>{children}</div>;
|
||||
}
|
||||
}
|
||||
|
||||
export default injectSheet(styles)(PluginBottomActions);
|
||||
205
scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.js
Normal file
205
scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.js
Normal file
@@ -0,0 +1,205 @@
|
||||
//@flow
|
||||
import React from "react";
|
||||
import injectSheet from "react-jss";
|
||||
import { translate } from "react-i18next";
|
||||
import type { Plugin } from "@scm-manager/ui-types";
|
||||
import { CardColumn, Icon } from "@scm-manager/ui-components";
|
||||
import PluginAvatar from "./PluginAvatar";
|
||||
import classNames from "classnames";
|
||||
import PluginModal from "./PluginModal";
|
||||
|
||||
export const PluginAction = {
|
||||
INSTALL: "install",
|
||||
UPDATE: "update",
|
||||
UNINSTALL: "uninstall"
|
||||
};
|
||||
|
||||
type Props = {
|
||||
plugin: Plugin,
|
||||
refresh: () => void,
|
||||
|
||||
// context props
|
||||
classes: any,
|
||||
t: string => string
|
||||
};
|
||||
|
||||
type State = {
|
||||
showInstallModal: boolean,
|
||||
showUpdateModal: boolean,
|
||||
showUninstallModal: boolean
|
||||
};
|
||||
|
||||
const styles = {
|
||||
link: {
|
||||
cursor: "pointer",
|
||||
pointerEvents: "all",
|
||||
marginBottom: "0 !important",
|
||||
padding: "0.5rem",
|
||||
border: "solid 1px #cdcdcd", // $dark-25
|
||||
borderRadius: "4px",
|
||||
"&:hover": {
|
||||
borderColor: "#9a9a9a" // $dark-50
|
||||
}
|
||||
},
|
||||
actionbar: {
|
||||
display: "flex",
|
||||
"& span + span": {
|
||||
marginLeft: "0.5rem"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
class PluginEntry extends React.Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
showInstallModal: false,
|
||||
showUpdateModal: false,
|
||||
showUninstallModal: false
|
||||
};
|
||||
}
|
||||
|
||||
createAvatar = (plugin: Plugin) => {
|
||||
return <PluginAvatar plugin={plugin} />;
|
||||
};
|
||||
|
||||
toggleModal = (showModal: string) => {
|
||||
const oldValue = this.state[showModal];
|
||||
this.setState({ [showModal]: !oldValue });
|
||||
};
|
||||
|
||||
createFooterRight = (plugin: Plugin) => {
|
||||
return <small className="level-item">{plugin.author}</small>;
|
||||
};
|
||||
|
||||
isInstallable = () => {
|
||||
const { plugin } = this.props;
|
||||
return plugin._links && plugin._links.install && plugin._links.install.href;
|
||||
};
|
||||
|
||||
isUpdatable = () => {
|
||||
const { plugin } = this.props;
|
||||
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, t } = this.props;
|
||||
return (
|
||||
<div className={classes.actionbar}>
|
||||
{this.isInstallable() && (
|
||||
<span
|
||||
className={classNames(classes.link, "level-item")}
|
||||
onClick={() => this.toggleModal("showInstallModal")}
|
||||
>
|
||||
<Icon title={t("plugins.modal.install")} name="download" color="info" />
|
||||
</span>
|
||||
)}
|
||||
{this.isUninstallable() && (
|
||||
<span
|
||||
className={classNames(classes.link, "level-item")}
|
||||
onClick={() => this.toggleModal("showUninstallModal")}
|
||||
>
|
||||
<Icon title={t("plugins.modal.uninstall")} name="trash" color="info" />
|
||||
</span>
|
||||
)}
|
||||
{this.isUpdatable() && (
|
||||
<span
|
||||
className={classNames(classes.link, "level-item")}
|
||||
onClick={() => this.toggleModal("showUpdateModal")}
|
||||
>
|
||||
<Icon title={t("plugins.modal.update")} name="sync-alt" color="info" />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
renderModal = () => {
|
||||
const { plugin, refresh } = this.props;
|
||||
if (this.state.showInstallModal && this.isInstallable()) {
|
||||
return (
|
||||
<PluginModal
|
||||
plugin={plugin}
|
||||
pluginAction={PluginAction.INSTALL}
|
||||
refresh={refresh}
|
||||
onClose={() => this.toggleModal("showInstallModal")}
|
||||
/>
|
||||
);
|
||||
} else if (this.state.showUpdateModal && this.isUpdatable()) {
|
||||
return (
|
||||
<PluginModal
|
||||
plugin={plugin}
|
||||
pluginAction={PluginAction.UPDATE}
|
||||
refresh={refresh}
|
||||
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;
|
||||
return (
|
||||
<span className={classes.topRight}>
|
||||
<i
|
||||
className={classNames(
|
||||
"fas fa-spinner fa-lg fa-spin",
|
||||
plugin.markedForUninstall ? "has-text-danger" : "has-text-info"
|
||||
)}
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { plugin } = this.props;
|
||||
const avatar = this.createAvatar(plugin);
|
||||
const actionbar = this.createActionbar();
|
||||
const footerRight = this.createFooterRight(plugin);
|
||||
|
||||
const modal = this.renderModal();
|
||||
|
||||
return (
|
||||
<>
|
||||
<CardColumn
|
||||
action={
|
||||
this.isInstallable()
|
||||
? () => this.toggleModal("showInstallModal")
|
||||
: null
|
||||
}
|
||||
avatar={avatar}
|
||||
title={plugin.displayName ? plugin.displayName : plugin.name}
|
||||
description={plugin.description}
|
||||
contentRight={
|
||||
plugin.pending || plugin.markedForUninstall
|
||||
? this.createPendingSpinner()
|
||||
: actionbar
|
||||
}
|
||||
footerRight={footerRight}
|
||||
/>
|
||||
{modal}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default injectSheet(styles)(translate("admin")(PluginEntry));
|
||||
@@ -0,0 +1,22 @@
|
||||
//@flow
|
||||
import React from "react";
|
||||
import { CardColumnGroup } from "@scm-manager/ui-components";
|
||||
import type { PluginGroup } from "@scm-manager/ui-types";
|
||||
import PluginEntry from "./PluginEntry";
|
||||
|
||||
type Props = {
|
||||
group: PluginGroup,
|
||||
refresh: () => void
|
||||
};
|
||||
|
||||
class PluginGroupEntry extends React.Component<Props> {
|
||||
render() {
|
||||
const { group, refresh } = this.props;
|
||||
const entries = group.plugins.map(plugin => {
|
||||
return <PluginEntry plugin={plugin} key={plugin.name} refresh={refresh} />;
|
||||
});
|
||||
return <CardColumnGroup name={group.name} elements={entries} />;
|
||||
}
|
||||
}
|
||||
|
||||
export default PluginGroupEntry;
|
||||
27
scm-ui/ui-webapp/src/admin/plugins/components/PluginList.js
Normal file
27
scm-ui/ui-webapp/src/admin/plugins/components/PluginList.js
Normal file
@@ -0,0 +1,27 @@
|
||||
//@flow
|
||||
import React from "react";
|
||||
import type { Plugin } from "@scm-manager/ui-types";
|
||||
import PluginGroupEntry from "../components/PluginGroupEntry";
|
||||
import groupByCategory from "./groupByCategory";
|
||||
|
||||
type Props = {
|
||||
plugins: Plugin[],
|
||||
refresh: () => void
|
||||
};
|
||||
|
||||
class PluginList extends React.Component<Props> {
|
||||
render() {
|
||||
const { plugins, refresh } = this.props;
|
||||
|
||||
const groups = groupByCategory(plugins);
|
||||
return (
|
||||
<div className="content is-plugin-page">
|
||||
{groups.map(group => {
|
||||
return <PluginGroupEntry group={group} key={group.name} refresh={refresh} />;
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PluginList;
|
||||
339
scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.js
Normal file
339
scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.js
Normal file
@@ -0,0 +1,339 @@
|
||||
//@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 {
|
||||
apiClient,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
Checkbox,
|
||||
ErrorNotification,
|
||||
Modal,
|
||||
Notification
|
||||
} from "@scm-manager/ui-components";
|
||||
import classNames from "classnames";
|
||||
import waitForRestart from "./waitForRestart";
|
||||
import SuccessNotification from "./SuccessNotification";
|
||||
import { PluginAction } from "./PluginEntry";
|
||||
|
||||
type Props = {
|
||||
plugin: Plugin,
|
||||
pluginAction: string,
|
||||
refresh: () => void,
|
||||
onClose: () => void,
|
||||
|
||||
// context props
|
||||
classes: any,
|
||||
t: (key: string, params?: Object) => string
|
||||
};
|
||||
|
||||
type State = {
|
||||
success: boolean,
|
||||
restart: boolean,
|
||||
loading: boolean,
|
||||
error?: Error
|
||||
};
|
||||
|
||||
const styles = {
|
||||
userLabelAlignment: {
|
||||
textAlign: "left",
|
||||
marginRight: 0
|
||||
},
|
||||
userLabelMarginSmall: {
|
||||
minWidth: "5.5em"
|
||||
},
|
||||
userLabelMarginLarge: {
|
||||
minWidth: "10em"
|
||||
},
|
||||
userFieldFlex: {
|
||||
flexGrow: 4
|
||||
}
|
||||
};
|
||||
|
||||
class PluginModal extends React.Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
loading: false,
|
||||
restart: false,
|
||||
success: false
|
||||
};
|
||||
}
|
||||
|
||||
onSuccess = () => {
|
||||
const { restart } = this.state;
|
||||
const { refresh, onClose } = this.props;
|
||||
|
||||
const newState = {
|
||||
loading: false,
|
||||
error: undefined
|
||||
};
|
||||
|
||||
if (restart) {
|
||||
waitForRestart()
|
||||
.then(() => {
|
||||
this.setState({
|
||||
...newState,
|
||||
success: true
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
this.setState({
|
||||
loading: false,
|
||||
success: false,
|
||||
error
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.setState(newState, () => {
|
||||
refresh();
|
||||
onClose();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
createPluginActionLink = () => {
|
||||
const { plugin, pluginAction } = this.props;
|
||||
const { restart } = this.state;
|
||||
|
||||
let pluginActionLink = "";
|
||||
|
||||
if (pluginAction === PluginAction.INSTALL) {
|
||||
pluginActionLink = plugin._links.install.href;
|
||||
} else if (pluginAction === PluginAction.UPDATE) {
|
||||
pluginActionLink = plugin._links.update.href;
|
||||
} else if (pluginAction === PluginAction.UNINSTALL) {
|
||||
pluginActionLink = plugin._links.uninstall.href;
|
||||
}
|
||||
return pluginActionLink + "?restart=" + restart.toString();
|
||||
};
|
||||
|
||||
handlePluginAction = (e: Event) => {
|
||||
this.setState({
|
||||
loading: true
|
||||
});
|
||||
e.preventDefault();
|
||||
apiClient
|
||||
.post(this.createPluginActionLink())
|
||||
.then(this.onSuccess)
|
||||
.catch(error => {
|
||||
this.setState({
|
||||
loading: false,
|
||||
error: error
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
footer = () => {
|
||||
const { pluginAction, onClose, t } = this.props;
|
||||
const { loading, error, restart, success } = this.state;
|
||||
|
||||
let color = pluginAction === PluginAction.UNINSTALL ? "warning" : "primary";
|
||||
let label = `plugins.modal.${pluginAction}`;
|
||||
if (restart) {
|
||||
color = "warning";
|
||||
label = `plugins.modal.${pluginAction}AndRestart`;
|
||||
}
|
||||
return (
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
label={t(label)}
|
||||
color={color}
|
||||
action={this.handlePluginAction}
|
||||
loading={loading}
|
||||
disabled={!!error || success}
|
||||
/>
|
||||
<Button label={t("plugins.modal.abort")} action={onClose} />
|
||||
</ButtonGroup>
|
||||
);
|
||||
};
|
||||
|
||||
renderDependencies() {
|
||||
const { plugin, classes, t } = this.props;
|
||||
|
||||
let dependencies = null;
|
||||
if (plugin.dependencies && plugin.dependencies.length > 0) {
|
||||
dependencies = (
|
||||
<div className="media">
|
||||
<Notification type="warning">
|
||||
<strong>{t("plugins.modal.dependencyNotification")}</strong>
|
||||
<ul className={classes.listSpacing}>
|
||||
{plugin.dependencies.map((dependency, index) => {
|
||||
return <li key={index}>{dependency}</li>;
|
||||
})}
|
||||
</ul>
|
||||
</Notification>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return dependencies;
|
||||
}
|
||||
|
||||
renderNotifications = () => {
|
||||
const { t } = this.props;
|
||||
const { restart, error, success } = this.state;
|
||||
if (error) {
|
||||
return (
|
||||
<div className="media">
|
||||
<ErrorNotification error={error} />
|
||||
</div>
|
||||
);
|
||||
} else if (success) {
|
||||
return (
|
||||
<div className="media">
|
||||
<SuccessNotification />
|
||||
</div>
|
||||
);
|
||||
} else if (restart) {
|
||||
return (
|
||||
<div className="media">
|
||||
<Notification type="warning">
|
||||
{t("plugins.modal.restartNotification")}
|
||||
</Notification>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
handleRestartChange = (value: boolean) => {
|
||||
this.setState({
|
||||
restart: value
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { restart } = this.state;
|
||||
const { plugin, pluginAction, onClose, classes, t } = this.props;
|
||||
|
||||
const body = (
|
||||
<>
|
||||
<div className="media">
|
||||
<div className="media-content">
|
||||
<p>{plugin.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="media">
|
||||
<div className="media-content">
|
||||
<div className="field is-horizontal">
|
||||
<div
|
||||
className={classNames(
|
||||
classes.userLabelAlignment,
|
||||
pluginAction === PluginAction.INSTALL
|
||||
? classes.userLabelMarginSmall
|
||||
: classes.userLabelMarginLarge,
|
||||
"field-label is-inline-flex"
|
||||
)}
|
||||
>
|
||||
{t("plugins.modal.author")}:
|
||||
</div>
|
||||
<div
|
||||
className={classNames(
|
||||
classes.userFieldFlex,
|
||||
"field-body is-inline-flex"
|
||||
)}
|
||||
>
|
||||
{plugin.author}
|
||||
</div>
|
||||
</div>
|
||||
{pluginAction === PluginAction.INSTALL && (
|
||||
<div className="field is-horizontal">
|
||||
<div
|
||||
className={classNames(
|
||||
classes.userLabelAlignment,
|
||||
classes.userLabelMarginSmall,
|
||||
"field-label is-inline-flex"
|
||||
)}
|
||||
>
|
||||
{t("plugins.modal.version")}:
|
||||
</div>
|
||||
<div
|
||||
className={classNames(
|
||||
classes.userFieldFlex,
|
||||
"field-body is-inline-flex"
|
||||
)}
|
||||
>
|
||||
{plugin.version}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{(pluginAction === PluginAction.UPDATE ||
|
||||
pluginAction === PluginAction.UNINSTALL) && (
|
||||
<div className="field is-horizontal">
|
||||
<div
|
||||
className={classNames(
|
||||
classes.userLabelAlignment,
|
||||
classes.userLabelMarginLarge,
|
||||
"field-label is-inline-flex"
|
||||
)}
|
||||
>
|
||||
{t("plugins.modal.currentVersion")}:
|
||||
</div>
|
||||
<div
|
||||
className={classNames(
|
||||
classes.userFieldFlex,
|
||||
"field-body is-inline-flex"
|
||||
)}
|
||||
>
|
||||
{plugin.version}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{pluginAction === 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()}
|
||||
</div>
|
||||
</div>
|
||||
<div className="media">
|
||||
<div className="media-content">
|
||||
<Checkbox
|
||||
checked={restart}
|
||||
label={t("plugins.modal.restart")}
|
||||
onChange={this.handleRestartChange}
|
||||
disabled={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{this.renderNotifications()}
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={t(`plugins.modal.title.${pluginAction}`, {
|
||||
name: plugin.displayName ? plugin.displayName : plugin.name
|
||||
})}
|
||||
closeFunction={() => onClose()}
|
||||
body={body}
|
||||
footer={this.footer()}
|
||||
active={true}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default compose(
|
||||
injectSheet(styles),
|
||||
translate("admin")
|
||||
)(PluginModal);
|
||||
@@ -0,0 +1,32 @@
|
||||
// @flow
|
||||
import * as React from "react";
|
||||
import classNames from "classnames";
|
||||
import injectSheet from "react-jss";
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
alignItems: "center"
|
||||
}
|
||||
};
|
||||
|
||||
type Props = {
|
||||
children?: React.Node,
|
||||
|
||||
// context props
|
||||
classes: any
|
||||
};
|
||||
|
||||
class PluginTopActions extends React.Component<Props> {
|
||||
render() {
|
||||
const { children, classes } = this.props;
|
||||
return (
|
||||
<div className={classNames(classes.container, "column", "is-one-fifths", "is-mobile-action-spacing")}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default injectSheet(styles)(PluginTopActions);
|
||||
@@ -0,0 +1,25 @@
|
||||
// @flow
|
||||
import React from "react";
|
||||
import { translate } from "react-i18next";
|
||||
import { Notification } from "@scm-manager/ui-components";
|
||||
|
||||
type Props = {
|
||||
// context props
|
||||
t: string => string
|
||||
};
|
||||
|
||||
class InstallSuccessNotification extends React.Component<Props> {
|
||||
render() {
|
||||
const { t } = this.props;
|
||||
return (
|
||||
<Notification type="success">
|
||||
{t("plugins.modal.successNotification")}{" "}
|
||||
<a onClick={e => window.location.reload(true)}>
|
||||
{t("plugins.modal.reload")}
|
||||
</a>
|
||||
</Notification>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default translate("admin")(InstallSuccessNotification);
|
||||
@@ -0,0 +1,39 @@
|
||||
// @flow
|
||||
import type { Plugin, PluginGroup } from "@scm-manager/ui-types";
|
||||
|
||||
export default function groupByCategory(
|
||||
plugins: Plugin[]
|
||||
): PluginGroup[] {
|
||||
let groups = {};
|
||||
for (let plugin of plugins) {
|
||||
const groupName = plugin.category;
|
||||
|
||||
let group = groups[groupName];
|
||||
if (!group) {
|
||||
group = {
|
||||
name: groupName,
|
||||
plugins: []
|
||||
};
|
||||
groups[groupName] = group;
|
||||
}
|
||||
group.plugins.push(plugin);
|
||||
}
|
||||
|
||||
let groupArray = [];
|
||||
for (let groupName in groups) {
|
||||
const group = groups[groupName];
|
||||
group.plugins.sort(sortByName);
|
||||
groupArray.push(groups[groupName]);
|
||||
}
|
||||
groupArray.sort(sortByName);
|
||||
return groupArray;
|
||||
}
|
||||
|
||||
function sortByName(a, b) {
|
||||
if (a.name < b.name) {
|
||||
return -1;
|
||||
} else if (a.name > b.name) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
// @flow
|
||||
import { apiClient } from "@scm-manager/ui-components";
|
||||
|
||||
const waitForRestart = () => {
|
||||
const endTime = Number(new Date()) + 10000;
|
||||
let started = false;
|
||||
|
||||
const executor = (resolve, reject) => {
|
||||
// we need some initial delay
|
||||
if (!started) {
|
||||
started = true;
|
||||
setTimeout(executor, 1000, resolve, reject);
|
||||
} else {
|
||||
apiClient
|
||||
.get("")
|
||||
.then(resolve)
|
||||
.catch(() => {
|
||||
if (Number(new Date()) < endTime) {
|
||||
setTimeout(executor, 500, resolve, reject);
|
||||
} else {
|
||||
reject(new Error("timeout reached"));
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return new Promise<void>(executor);
|
||||
};
|
||||
|
||||
export default waitForRestart;
|
||||
Reference in New Issue
Block a user