From 707d3d2fd78edc37c35102bcf2b3bbdf7e2aaeb4 Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Wed, 21 Aug 2019 15:07:56 +0200
Subject: [PATCH] refresh plugin list after installation

---
 .../admin/plugins/components/PluginEntry.js   |  5 ++--
 .../plugins/components/PluginGroupEntry.js    |  9 +++---
 .../admin/plugins/components/PluginList.js    |  7 +++--
 .../admin/plugins/components/PluginModal.js   |  9 ++++--
 .../plugins/containers/PluginsOverview.js     | 30 +++++++++++--------
 5 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/scm-ui/src/admin/plugins/components/PluginEntry.js b/scm-ui/src/admin/plugins/components/PluginEntry.js
index c7624a02ef..0ed128e75b 100644
--- a/scm-ui/src/admin/plugins/components/PluginEntry.js
+++ b/scm-ui/src/admin/plugins/components/PluginEntry.js
@@ -9,6 +9,7 @@ import classNames from "classnames";
 
 type Props = {
   plugin: Plugin,
+  refresh: () => void,
 
   // context props
   classes: any
@@ -73,7 +74,7 @@ class PluginEntry extends React.Component<Props, State> {
   };
 
   render() {
-    const { plugin } = this.props;
+    const { plugin, refresh } = this.props;
     const { showModal } = this.state;
     const avatar = this.createAvatar(plugin);
     const footerLeft = this.createFooterLeft(plugin);
@@ -82,7 +83,7 @@ class PluginEntry extends React.Component<Props, State> {
     const modal = showModal ? (
       <PluginModal
         plugin={plugin}
-        onSubmit={this.toggleModal}
+        refresh={refresh}
         onClose={this.toggleModal}
       />
     ) : null;
diff --git a/scm-ui/src/admin/plugins/components/PluginGroupEntry.js b/scm-ui/src/admin/plugins/components/PluginGroupEntry.js
index 44046eb6ab..4255606742 100644
--- a/scm-ui/src/admin/plugins/components/PluginGroupEntry.js
+++ b/scm-ui/src/admin/plugins/components/PluginGroupEntry.js
@@ -5,14 +5,15 @@ import type { PluginGroup } from "@scm-manager/ui-types";
 import PluginEntry from "./PluginEntry";
 
 type Props = {
-  group: PluginGroup
+  group: PluginGroup,
+  refresh: () => void
 };
 
 class PluginGroupEntry extends React.Component<Props> {
   render() {
-    const { group } = this.props;
-    const entries = group.plugins.map((plugin, index) => {
-      return <PluginEntry plugin={plugin} key={index} />;
+    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} />;
   }
diff --git a/scm-ui/src/admin/plugins/components/PluginList.js b/scm-ui/src/admin/plugins/components/PluginList.js
index e04d78d46e..bc8cfe7197 100644
--- a/scm-ui/src/admin/plugins/components/PluginList.js
+++ b/scm-ui/src/admin/plugins/components/PluginList.js
@@ -5,18 +5,19 @@ import PluginGroupEntry from "../components/PluginGroupEntry";
 import groupByCategory from "./groupByCategory";
 
 type Props = {
-  plugins: Plugin[]
+  plugins: Plugin[],
+  refresh: () => void
 };
 
 class PluginList extends React.Component<Props> {
   render() {
-    const { plugins } = this.props;
+    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} />;
+          return <PluginGroupEntry group={group} key={group.name} refresh={refresh} />;
         })}
       </div>
     );
diff --git a/scm-ui/src/admin/plugins/components/PluginModal.js b/scm-ui/src/admin/plugins/components/PluginModal.js
index 78af2d8bec..8f65ba9349 100644
--- a/scm-ui/src/admin/plugins/components/PluginModal.js
+++ b/scm-ui/src/admin/plugins/components/PluginModal.js
@@ -17,7 +17,7 @@ import classNames from "classnames";
 
 type Props = {
   plugin: Plugin,
-  onSubmit: () => void,
+  refresh: () => void,
   onClose: () => void,
 
   // context props
@@ -55,7 +55,7 @@ class PluginModal extends React.Component<Props, State> {
 
   onInstallSuccess = () => {
     const { restart } = this.state;
-    const { onClose } = this.props;
+    const { refresh, onClose } = this.props;
 
     const newState = {
       loading: false,
@@ -68,7 +68,10 @@ class PluginModal extends React.Component<Props, State> {
         success: true
       });
     } else {
-      this.setState(newState, onClose);
+      this.setState(newState, () => {
+        refresh();
+        onClose();
+      });
     }
   };
 
diff --git a/scm-ui/src/admin/plugins/containers/PluginsOverview.js b/scm-ui/src/admin/plugins/containers/PluginsOverview.js
index 375e2ebd6c..ce4324cd3d 100644
--- a/scm-ui/src/admin/plugins/containers/PluginsOverview.js
+++ b/scm-ui/src/admin/plugins/containers/PluginsOverview.js
@@ -9,8 +9,7 @@ import {
   Title,
   Subtitle,
   Notification,
-  ErrorNotification,
-  Button
+  ErrorNotification
 } from "@scm-manager/ui-components";
 import {
   fetchPluginsByLink,
@@ -25,7 +24,7 @@ import {
 } from "../../../modules/indexResource";
 import PluginTopActions from "../components/PluginTopActions";
 import PluginBottomActions from "../components/PluginBottomActions";
-import InstallPendingAction from '../components/InstallPendingAction';
+import InstallPendingAction from "../components/InstallPendingAction";
 
 type Props = {
   loading: boolean,
@@ -55,18 +54,25 @@ class PluginsOverview extends React.Component<Props> {
   }
 
   componentDidUpdate(prevProps) {
+    const {
+      installed,
+    } = this.props;
+    if (prevProps.installed !== installed) {
+      this.fetchPlugins();
+    }
+  }
+
+  fetchPlugins = () => {
     const {
       installed,
       fetchPluginsByLink,
       availablePluginsLink,
       installedPluginsLink
     } = this.props;
-    if (prevProps.installed !== installed) {
-      fetchPluginsByLink(
-        installed ? installedPluginsLink : availablePluginsLink
-      );
-    }
-  }
+    fetchPluginsByLink(
+      installed ? installedPluginsLink : availablePluginsLink
+    );
+  };
 
   renderHeader = (actions: React.Node) => {
     const { installed, t } = this.props;
@@ -97,9 +103,7 @@ class PluginsOverview extends React.Component<Props> {
   createActions = () => {
     const { collection } = this.props;
     if (collection._links.installPending) {
-      return (
-        <InstallPendingAction collection={collection} />
-      );
+      return <InstallPendingAction collection={collection} />;
     }
     return null;
   };
@@ -130,7 +134,7 @@ class PluginsOverview extends React.Component<Props> {
     const { collection, t } = this.props;
 
     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>;
   }