Only renders empty state for pipelines table if no pipelines are received when request is made
This commit is contained in:
parent
71e2f4ec7d
commit
8fa6fb5265
|
@ -1,11 +1,11 @@
|
|||
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);
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
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() {
|
||||
|
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: Fix Pipelines table empty state - only render empty state if we receive 0 pipelines
|
||||
merge_request:
|
||||
author:
|
Loading…
Reference in New Issue