From 5fc5267fced3da1fd2ac1c07d9ff7a9161cd1630 Mon Sep 17 00:00:00 2001
From: Andrew <50115930+yb-andrew@users.noreply.github.com>
Date: Fri, 24 Jan 2020 12:54:13 -0800
Subject: [PATCH] [YW][#3429] Add additional conditional before fetching
 Universe tables and remove border from TaskProgress (#3440)

Summary:
Add additional check whether tables have been already fetched before calling API to fetch
tables. Remove border from TaskProgress because it was distracting and caused the spacing to look
strange.

Test Plan:
Create a backup (preferably one that takes a long time), and then navigate to the
universe-level Tasks tab and check what happens to the UI. Make sure that the stepbar does not do
any flickering.
*One symptom of the incorrect code was that a TON of network requests were being made and causing the UI to lag*

I recommend connecting local YW to customer's environment to repro. After tunneling, you can add the url to .env with `REACT_APP_YUGAWARE_API_URL=http://localhost:8080/api`

Example of fixed UI:
{F13140}

Reviewers: wesley, arnav, ram

Reviewed By: ram

Subscribers: kannan, rao, ui

Differential Revision: https://phabricator.dev.yugabyte.com/D7831
---
 .../src/components/config/OnPrem/OnPremConfiguration.scss   | 1 -
 .../components/universes/UniverseDetail/UniverseDetail.js   | 6 +++---
 .../universes/UniverseDetail/UniverseDetailContainer.js     | 1 +
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/managed/ui/src/components/config/OnPrem/OnPremConfiguration.scss b/managed/ui/src/components/config/OnPrem/OnPremConfiguration.scss
index ef85aaed47e2..d3b158a2bb71 100644
--- a/managed/ui/src/components/config/OnPrem/OnPremConfiguration.scss
+++ b/managed/ui/src/components/config/OnPrem/OnPremConfiguration.scss
@@ -112,7 +112,6 @@
 }
 
 .provider-task-progress-container {
-  border: 1px solid #d3d3d3;
   padding: 6px 8px;
   width: 100%;
 }
diff --git a/managed/ui/src/components/universes/UniverseDetail/UniverseDetail.js b/managed/ui/src/components/universes/UniverseDetail/UniverseDetail.js
index ddf58e0b668a..116cd413e49a 100644
--- a/managed/ui/src/components/universes/UniverseDetail/UniverseDetail.js
+++ b/managed/ui/src/components/universes/UniverseDetail/UniverseDetail.js
@@ -76,11 +76,11 @@ class UniverseDetail extends Component {
     }
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    const { universe: { currentUniverse }} = this.props;
+  componentDidUpdate(prevProps) {
+    const { universe: { currentUniverse }, universeTables } = this.props;
     if (getPromiseState(currentUniverse).isSuccess() &&
         !getPromiseState(prevProps.universe.currentUniverse).isSuccess()) {
-      if (hasLiveNodes(currentUniverse.data)) {
+      if (hasLiveNodes(currentUniverse.data) && !universeTables.length) {
         this.props.fetchUniverseTables(currentUniverse.data.universeUUID);
       }
     }
diff --git a/managed/ui/src/components/universes/UniverseDetail/UniverseDetailContainer.js b/managed/ui/src/components/universes/UniverseDetail/UniverseDetailContainer.js
index 157f3e73124c..6e8a52ce2267 100644
--- a/managed/ui/src/components/universes/UniverseDetail/UniverseDetailContainer.js
+++ b/managed/ui/src/components/universes/UniverseDetail/UniverseDetailContainer.js
@@ -126,6 +126,7 @@ function mapStateToProps(state, ownProps) {
     customer: state.customer,
     universe: state.universe,
     tasks: state.tasks,
+    universeTables: state.tables.universeTablesList,
     modal: state.modal,
     providers: state.cloud.providers,
     updateAvailable: isUpdateAvailable(state)