refresh plugin list after installation

This commit is contained in:
Sebastian Sdorra
2019-08-21 15:07:56 +02:00
parent 05967aca4a
commit 707d3d2fd7
5 changed files with 35 additions and 25 deletions

View File

@@ -9,6 +9,7 @@ import classNames from "classnames";
type Props = { type Props = {
plugin: Plugin, plugin: Plugin,
refresh: () => void,
// context props // context props
classes: any classes: any
@@ -73,7 +74,7 @@ class PluginEntry extends React.Component<Props, State> {
}; };
render() { render() {
const { plugin } = this.props; const { plugin, refresh } = this.props;
const { showModal } = this.state; const { showModal } = this.state;
const avatar = this.createAvatar(plugin); const avatar = this.createAvatar(plugin);
const footerLeft = this.createFooterLeft(plugin); const footerLeft = this.createFooterLeft(plugin);
@@ -82,7 +83,7 @@ class PluginEntry extends React.Component<Props, State> {
const modal = showModal ? ( const modal = showModal ? (
<PluginModal <PluginModal
plugin={plugin} plugin={plugin}
onSubmit={this.toggleModal} refresh={refresh}
onClose={this.toggleModal} onClose={this.toggleModal}
/> />
) : null; ) : null;

View File

@@ -5,14 +5,15 @@ import type { PluginGroup } from "@scm-manager/ui-types";
import PluginEntry from "./PluginEntry"; import PluginEntry from "./PluginEntry";
type Props = { type Props = {
group: PluginGroup group: PluginGroup,
refresh: () => void
}; };
class PluginGroupEntry extends React.Component<Props> { class PluginGroupEntry extends React.Component<Props> {
render() { render() {
const { group } = this.props; const { group, refresh } = this.props;
const entries = group.plugins.map((plugin, index) => { const entries = group.plugins.map(plugin => {
return <PluginEntry plugin={plugin} key={index} />; return <PluginEntry plugin={plugin} key={plugin.name} refresh={refresh} />;
}); });
return <CardColumnGroup name={group.name} elements={entries} />; return <CardColumnGroup name={group.name} elements={entries} />;
} }

View File

@@ -5,18 +5,19 @@ import PluginGroupEntry from "../components/PluginGroupEntry";
import groupByCategory from "./groupByCategory"; import groupByCategory from "./groupByCategory";
type Props = { type Props = {
plugins: Plugin[] plugins: Plugin[],
refresh: () => void
}; };
class PluginList extends React.Component<Props> { class PluginList extends React.Component<Props> {
render() { render() {
const { plugins } = this.props; const { plugins, refresh } = this.props;
const groups = groupByCategory(plugins); const groups = groupByCategory(plugins);
return ( return (
<div className="content is-plugin-page"> <div className="content is-plugin-page">
{groups.map(group => { {groups.map(group => {
return <PluginGroupEntry group={group} key={group.name} />; return <PluginGroupEntry group={group} key={group.name} refresh={refresh} />;
})} })}
</div> </div>
); );

View File

@@ -17,7 +17,7 @@ import classNames from "classnames";
type Props = { type Props = {
plugin: Plugin, plugin: Plugin,
onSubmit: () => void, refresh: () => void,
onClose: () => void, onClose: () => void,
// context props // context props
@@ -55,7 +55,7 @@ class PluginModal extends React.Component<Props, State> {
onInstallSuccess = () => { onInstallSuccess = () => {
const { restart } = this.state; const { restart } = this.state;
const { onClose } = this.props; const { refresh, onClose } = this.props;
const newState = { const newState = {
loading: false, loading: false,
@@ -68,7 +68,10 @@ class PluginModal extends React.Component<Props, State> {
success: true success: true
}); });
} else { } else {
this.setState(newState, onClose); this.setState(newState, () => {
refresh();
onClose();
});
} }
}; };

View File

@@ -9,8 +9,7 @@ import {
Title, Title,
Subtitle, Subtitle,
Notification, Notification,
ErrorNotification, ErrorNotification
Button
} from "@scm-manager/ui-components"; } from "@scm-manager/ui-components";
import { import {
fetchPluginsByLink, fetchPluginsByLink,
@@ -25,7 +24,7 @@ import {
} from "../../../modules/indexResource"; } from "../../../modules/indexResource";
import PluginTopActions from "../components/PluginTopActions"; import PluginTopActions from "../components/PluginTopActions";
import PluginBottomActions from "../components/PluginBottomActions"; import PluginBottomActions from "../components/PluginBottomActions";
import InstallPendingAction from '../components/InstallPendingAction'; import InstallPendingAction from "../components/InstallPendingAction";
type Props = { type Props = {
loading: boolean, loading: boolean,
@@ -55,18 +54,25 @@ class PluginsOverview extends React.Component<Props> {
} }
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
const {
installed,
} = this.props;
if (prevProps.installed !== installed) {
this.fetchPlugins();
}
}
fetchPlugins = () => {
const { const {
installed, installed,
fetchPluginsByLink, fetchPluginsByLink,
availablePluginsLink, availablePluginsLink,
installedPluginsLink installedPluginsLink
} = this.props; } = this.props;
if (prevProps.installed !== installed) { fetchPluginsByLink(
fetchPluginsByLink( installed ? installedPluginsLink : availablePluginsLink
installed ? installedPluginsLink : availablePluginsLink );
); };
}
}
renderHeader = (actions: React.Node) => { renderHeader = (actions: React.Node) => {
const { installed, t } = this.props; const { installed, t } = this.props;
@@ -97,9 +103,7 @@ class PluginsOverview extends React.Component<Props> {
createActions = () => { createActions = () => {
const { collection } = this.props; const { collection } = this.props;
if (collection._links.installPending) { if (collection._links.installPending) {
return ( return <InstallPendingAction collection={collection} />;
<InstallPendingAction collection={collection} />
);
} }
return null; return null;
}; };
@@ -130,7 +134,7 @@ class PluginsOverview extends React.Component<Props> {
const { collection, t } = this.props; const { collection, t } = this.props;
if (collection._embedded && collection._embedded.plugins.length > 0) { if (collection._embedded && collection._embedded.plugins.length > 0) {
return <PluginsList plugins={collection._embedded.plugins} />; return <PluginsList plugins={collection._embedded.plugins} refresh={this.fetchPlugins} />;
} }
return <Notification type="info">{t("plugins.noPlugins")}</Notification>; return <Notification type="info">{t("plugins.noPlugins")}</Notification>;
} }