Commit 032cbcdb authored by Phil Hughes's avatar Phil Hughes

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
parents 71e2f4ec 8fa6fb52
import Vue from 'vue'; import Vue from 'vue';
import Visibility from 'visibilityjs'; 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 PipelinesService from '../../pipelines/services/pipelines_service';
import PipelineStore from '../../pipelines/stores/pipelines_store'; import PipelineStore from '../../pipelines/stores/pipelines_store';
import eventHub from '../../pipelines/event_hub'; import eventHub from '../../pipelines/event_hub';
import EmptyState from '../../pipelines/components/empty_state.vue'; import emptyState from '../../pipelines/components/empty_state.vue';
import ErrorState from '../../pipelines/components/error_state.vue'; import errorState from '../../pipelines/components/error_state.vue';
import loadingIcon from '../../vue_shared/components/loading_icon.vue'; import loadingIcon from '../../vue_shared/components/loading_icon.vue';
import '../../lib/utils/common_utils'; import '../../lib/utils/common_utils';
import '../../vue_shared/vue_resource_interceptor'; import '../../vue_shared/vue_resource_interceptor';
...@@ -23,9 +23,9 @@ import Poll from '../../lib/utils/poll'; ...@@ -23,9 +23,9 @@ import Poll from '../../lib/utils/poll';
export default Vue.component('pipelines-table', { export default Vue.component('pipelines-table', {
components: { components: {
'pipelines-table-component': PipelinesTableComponent, pipelinesTableComponent,
'error-state': ErrorState, errorState,
'empty-state': EmptyState, emptyState,
loadingIcon, loadingIcon,
}, },
...@@ -47,6 +47,7 @@ export default Vue.component('pipelines-table', { ...@@ -47,6 +47,7 @@ export default Vue.component('pipelines-table', {
hasError: false, hasError: false,
isMakingRequest: false, isMakingRequest: false,
updateGraphDropdown: false, updateGraphDropdown: false,
hasMadeRequest: false,
}; };
}, },
...@@ -55,9 +56,15 @@ export default Vue.component('pipelines-table', { ...@@ -55,9 +56,15 @@ export default Vue.component('pipelines-table', {
return this.hasError && !this.isLoading; return this.hasError && !this.isLoading;
}, },
/**
* Empty state is only rendered if after the first request we receive no pipelines.
*
* @return {Boolean}
*/
shouldRenderEmptyState() { shouldRenderEmptyState() {
return !this.state.pipelines.length && return !this.state.pipelines.length &&
!this.isLoading && !this.isLoading &&
this.hasMadeRequest &&
!this.hasError; !this.hasError;
}, },
...@@ -94,6 +101,10 @@ export default Vue.component('pipelines-table', { ...@@ -94,6 +101,10 @@ export default Vue.component('pipelines-table', {
if (!Visibility.hidden()) { if (!Visibility.hidden()) {
this.isLoading = true; this.isLoading = true;
this.poll.makeRequest(); 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(() => { Visibility.change(() => {
...@@ -127,6 +138,8 @@ export default Vue.component('pipelines-table', { ...@@ -127,6 +138,8 @@ export default Vue.component('pipelines-table', {
successCallback(resp) { successCallback(resp) {
const response = resp.json(); const response = resp.json();
this.hasMadeRequest = true;
// depending of the endpoint the response can either bring a `pipelines` key or not. // depending of the endpoint the response can either bring a `pipelines` key or not.
const pipelines = response.pipelines || response; const pipelines = response.pipelines || response;
this.store.storePipelines(pipelines); this.store.storePipelines(pipelines);
......
import Visibility from 'visibilityjs'; import Visibility from 'visibilityjs';
import PipelinesService from './services/pipelines_service'; import PipelinesService from './services/pipelines_service';
import eventHub from './event_hub'; 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 tablePagination from '../vue_shared/components/table_pagination.vue';
import EmptyState from './components/empty_state.vue'; import emptyState from './components/empty_state.vue';
import ErrorState from './components/error_state.vue'; import errorState from './components/error_state.vue';
import NavigationTabs from './components/navigation_tabs'; import navigationTabs from './components/navigation_tabs';
import NavigationControls from './components/nav_controls'; import navigationControls from './components/nav_controls';
import loadingIcon from '../vue_shared/components/loading_icon.vue'; import loadingIcon from '../vue_shared/components/loading_icon.vue';
import Poll from '../lib/utils/poll'; import Poll from '../lib/utils/poll';
...@@ -20,11 +20,11 @@ export default { ...@@ -20,11 +20,11 @@ export default {
components: { components: {
tablePagination, tablePagination,
'pipelines-table-component': PipelinesTableComponent, pipelinesTableComponent,
'empty-state': EmptyState, emptyState,
'error-state': ErrorState, errorState,
'navigation-tabs': NavigationTabs, navigationTabs,
'navigation-controls': NavigationControls, navigationControls,
loadingIcon, loadingIcon,
}, },
...@@ -52,6 +52,7 @@ export default { ...@@ -52,6 +52,7 @@ export default {
hasError: false, hasError: false,
isMakingRequest: false, isMakingRequest: false,
updateGraphDropdown: false, updateGraphDropdown: false,
hasMadeRequest: false,
}; };
}, },
...@@ -78,6 +79,7 @@ export default { ...@@ -78,6 +79,7 @@ export default {
shouldRenderEmptyState() { shouldRenderEmptyState() {
return !this.isLoading && return !this.isLoading &&
!this.hasError && !this.hasError &&
this.hasMadeRequest &&
!this.state.pipelines.length && !this.state.pipelines.length &&
(this.scope === 'all' || this.scope === null); (this.scope === 'all' || this.scope === null);
}, },
...@@ -150,6 +152,10 @@ export default { ...@@ -150,6 +152,10 @@ export default {
if (!Visibility.hidden()) { if (!Visibility.hidden()) {
this.isLoading = true; this.isLoading = true;
poll.makeRequest(); 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(() => { Visibility.change(() => {
...@@ -202,6 +208,7 @@ export default { ...@@ -202,6 +208,7 @@ export default {
this.isLoading = false; this.isLoading = false;
this.updateGraphDropdown = true; this.updateGraphDropdown = true;
this.hasMadeRequest = true;
}, },
errorCallback() { errorCallback() {
......
---
title: Fix Pipelines table empty state - only render empty state if we receive 0 pipelines
merge_request:
author:
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment