From db6cd2375f8421184f32ff54f87a1f4a79b0e4a8 Mon Sep 17 00:00:00 2001
From: Mark Reynolds <mreynolds@redhat.com>
Date: Apr 20 2020 14:24:13 +0000
Subject: Issue 51031 UI - transition between two instances needs improvement


Bug Description:  When you switch between instances in the UI, there is
                  no loading page, there is a long wait before the dropdown
                  menu changes, and it does not refresh the page content
                  (it still contains the previous instance's data).

Fix Description:  Set the "loading" flag and the serverId right away when
                  instance is changed.   Then we set the tab component's
                  key to the server ID so the content is automatically
                  refreshed.

fixes: https://pagure.io/389-ds-base/issue/51031

Reviewed by: spichugi(Thanks!)

---

diff --git a/src/cockpit/389-console/src/ds.jsx b/src/cockpit/389-console/src/ds.jsx
index b8be78e..7ff8b03 100644
--- a/src/cockpit/389-console/src/ds.jsx
+++ b/src/cockpit/389-console/src/ds.jsx
@@ -332,6 +332,11 @@ export class DSInstance extends React.Component {
     }
 
     handleServerIdChange(e) {
+        this.setState({
+            pageLoadingState: { state: "loading", jsx: "" },
+            progressValue: 25,
+            serverId: e.target.value
+        });
         this.loadInstanceList(e.target.value);
     }
 
@@ -625,6 +630,7 @@ export class DSInstance extends React.Component {
                                                 addNotification={this.addNotification}
                                                 serverId={this.state.serverId}
                                                 wasActiveList={this.state.wasActiveList}
+                                                key={this.state.serverId}
                                             />
                                         </TabPane>
                                         <TabPane eventKey={2}>
@@ -632,6 +638,7 @@ export class DSInstance extends React.Component {
                                                 addNotification={this.addNotification}
                                                 serverId={this.state.serverId}
                                                 wasActiveList={this.state.wasActiveList}
+                                                key={this.state.serverId}
                                             />
                                         </TabPane>
                                         <TabPane eventKey={3}>
@@ -639,6 +646,7 @@ export class DSInstance extends React.Component {
                                                 addNotification={this.addNotification}
                                                 serverId={this.state.serverId}
                                                 wasActiveList={this.state.wasActiveList}
+                                                key={this.state.serverId}
                                             />
                                         </TabPane>
                                         <TabPane eventKey={4}>
@@ -646,6 +654,7 @@ export class DSInstance extends React.Component {
                                                 addNotification={this.addNotification}
                                                 serverId={this.state.serverId}
                                                 wasActiveList={this.state.wasActiveList}
+                                                key={this.state.serverId}
                                             />
                                         </TabPane>
                                         <TabPane eventKey={5}>
@@ -653,6 +662,7 @@ export class DSInstance extends React.Component {
                                                 addNotification={this.addNotification}
                                                 serverId={this.state.serverId}
                                                 wasActiveList={this.state.wasActiveList}
+                                                key={this.state.serverId}
                                             />
                                         </TabPane>
                                         <TabPane eventKey={6}>
@@ -660,6 +670,7 @@ export class DSInstance extends React.Component {
                                                 addNotification={this.addNotification}
                                                 serverId={this.state.serverId}
                                                 wasActiveList={this.state.wasActiveList}
+                                                key={this.state.serverId}
                                             />
                                         </TabPane>
                                     </TabContent>