[389-ds-base] branch 389-ds-base-1.4.2 updated: Issue 51031 UI - transition between two instances needs improvement

This is an automated email from the git hooks/post-receive script.

mreynolds pushed a commit to branch 389-ds-base-1.4.2
in repository 389-ds-base.

The following commit(s) were added to refs/heads/389-ds-base-1.4.2 by this push:
     new 3ce0896  Issue 51031 UI - transition between two instances needs improvement
3ce0896 is described below

commit 3ce08963e80bd276f693f4559ce5a03294954a72
Author: Mark Reynolds 
AuthorDate: Fri Apr 17 15:46:42 2020 -0400

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!)
---
 src/cockpit/389-console/src/ds.jsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

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>