Merge branch '31998-pipelines-empty-state' into 'master'

Only renders empty state for pipelines table if no pipelines are received when request is made

Closes #31998

See merge request !11405

app/assets/javascripts/commit/pipelines/pipelines_table.js

 import Vue from 'vue';
 import Visibility from 'visibilityjs';
-import PipelinesTableComponent from '../../vue_shared/components/pipelines_table';
+import pipelinesTableComponent from '../../vue_shared/components/pipelines_table';
 import PipelinesService from '../../pipelines/services/pipelines_service';
 import PipelineStore from '../../pipelines/stores/pipelines_store';
 import eventHub from '../../pipelines/event_hub';
-import EmptyState from '../../pipelines/components/empty_state.vue';
-import ErrorState from '../../pipelines/components/error_state.vue';
+import emptyState from '../../pipelines/components/empty_state.vue';
+import errorState from '../../pipelines/components/error_state.vue';
 import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 import '../../lib/utils/common_utils';
 import '../../vue_shared/vue_resource_interceptor';
@@ -23,9 +23,9 @@ import Poll from '../../lib/utils/poll';
 export default Vue.component('pipelines-table', {
 
   components: {
-    'pipelines-table-component': PipelinesTableComponent,
-    'error-state': ErrorState,
-    'empty-state': EmptyState,
+    pipelinesTableComponent,
+    errorState,
+    emptyState,
     loadingIcon,
   },
 
@@ -47,6 +47,7 @@ export default Vue.component('pipelines-table', {
       hasError: false,
       isMakingRequest: false,
       updateGraphDropdown: false,
+      hasMadeRequest: false,
     };
   },
 
@@ -55,9 +56,15 @@ export default Vue.component('pipelines-table', {
       return this.hasError && !this.isLoading;
     },
 
+    /**
+     * Empty state is only rendered if after the first request we receive no pipelines.
+     *
+     * @return {Boolean}
+     */
     shouldRenderEmptyState() {
       return !this.state.pipelines.length &&
         !this.isLoading &&
+        this.hasMadeRequest &&
         !this.hasError;
     },
 
@@ -94,6 +101,10 @@ export default Vue.component('pipelines-table', {
     if (!Visibility.hidden()) {
       this.isLoading = true;
       this.poll.makeRequest();
+    } else {
+      // If tab is not visible we need to make the first request so we don't show the empty
+      // state without knowing if there are any pipelines
+      this.fetchPipelines();
     }
 
     Visibility.change(() => {
@@ -127,6 +138,8 @@ export default Vue.component('pipelines-table', {
     successCallback(resp) {
       const response = resp.json();
 
+      this.hasMadeRequest = true;
+
       // depending of the endpoint the response can either bring a `pipelines` key or not.
       const pipelines = response.pipelines || response;
       this.store.storePipelines(pipelines);

app/assets/javascripts/pipelines/pipelines.js

 import Visibility from 'visibilityjs';
 import PipelinesService from './services/pipelines_service';
 import eventHub from './event_hub';
-import PipelinesTableComponent from '../vue_shared/components/pipelines_table';
+import pipelinesTableComponent from '../vue_shared/components/pipelines_table';
 import tablePagination from '../vue_shared/components/table_pagination.vue';
-import EmptyState from './components/empty_state.vue';
-import ErrorState from './components/error_state.vue';
-import NavigationTabs from './components/navigation_tabs';
-import NavigationControls from './components/nav_controls';
+import emptyState from './components/empty_state.vue';
+import errorState from './components/error_state.vue';
+import navigationTabs from './components/navigation_tabs';
+import navigationControls from './components/nav_controls';
 import loadingIcon from '../vue_shared/components/loading_icon.vue';
 import Poll from '../lib/utils/poll';
 
@@ -20,11 +20,11 @@ export default {
 
   components: {
     tablePagination,
-    'pipelines-table-component': PipelinesTableComponent,
-    'empty-state': EmptyState,
-    'error-state': ErrorState,
-    'navigation-tabs': NavigationTabs,
-    'navigation-controls': NavigationControls,
+    pipelinesTableComponent,
+    emptyState,
+    errorState,
+    navigationTabs,
+    navigationControls,
     loadingIcon,
   },
 
@@ -52,6 +52,7 @@ export default {
       hasError: false,
       isMakingRequest: false,
       updateGraphDropdown: false,
+      hasMadeRequest: false,
     };
   },
 
@@ -78,6 +79,7 @@ export default {
     shouldRenderEmptyState() {
       return !this.isLoading &&
         !this.hasError &&
+        this.hasMadeRequest &&
         !this.state.pipelines.length &&
         (this.scope === 'all' || this.scope === null);
     },
@@ -150,6 +152,10 @@ export default {
     if (!Visibility.hidden()) {
       this.isLoading = true;
       poll.makeRequest();
+    } else {
+      // If tab is not visible we need to make the first request so we don't show the empty
+      // state without knowing if there are any pipelines
+      this.fetchPipelines();
     }
 
     Visibility.change(() => {
@@ -202,6 +208,7 @@ export default {
 
       this.isLoading = false;
       this.updateGraphDropdown = true;
+      this.hasMadeRequest = true;
     },
 
     errorCallback() {

changelogs/unreleased/31998-pipelines-empty-state.yml

+---
+title: Fix Pipelines table empty state - only render empty state if we receive 0 pipelines
+merge_request:
+author: