diff options
Diffstat (limited to 'app/assets/javascripts/groups/components/app.vue')
-rw-r--r-- | app/assets/javascripts/groups/components/app.vue | 75 |
1 files changed, 24 insertions, 51 deletions
diff --git a/app/assets/javascripts/groups/components/app.vue b/app/assets/javascripts/groups/components/app.vue index 15f5a3518a5..46d5341ea97 100644 --- a/app/assets/javascripts/groups/components/app.vue +++ b/app/assets/javascripts/groups/components/app.vue @@ -1,21 +1,25 @@ <script> -import { GlLoadingIcon, GlModal } from '@gitlab/ui'; +import { GlLoadingIcon, GlModal, GlEmptyState } from '@gitlab/ui'; import { createAlert } from '~/flash'; import { mergeUrlParams, getParameterByName } from '~/lib/utils/url_utility'; -import { HIDDEN_CLASS } from '~/lib/utils/constants'; import { __, s__, sprintf } from '~/locale'; -import { COMMON_STR, CONTENT_LIST_CLASS } from '../constants'; +import { COMMON_STR } from '../constants'; import eventHub from '../event_hub'; import GroupsComponent from './groups.vue'; -import EmptyState from './empty_state.vue'; export default { + i18n: { + searchEmptyState: { + title: __('No results found'), + description: __('Edit your search and try again'), + }, + }, components: { GroupsComponent, GlModal, GlLoadingIcon, - EmptyState, + GlEmptyState, }, props: { action: { @@ -40,20 +44,14 @@ export default { type: Boolean, required: true, }, - renderEmptyState: { - type: Boolean, - required: false, - default: false, - }, }, data() { return { isModalVisible: false, isLoading: true, - isSearchEmpty: false, + fromSearch: false, targetGroup: null, targetParentGroup: null, - showEmptyState: false, }; }, computed: { @@ -79,6 +77,9 @@ export default { groups() { return this.store.getGroups(); }, + hasGroups() { + return this.groups && this.groups.length > 0; + }, pageInfo() { return this.store.getPaginationInfo(); }, @@ -231,47 +232,17 @@ export default { this.targetGroup.isBeingRemoved = false; }); }, - showLegacyEmptyState() { - const { containerEl } = this; - - if (!containerEl) return; - - const contentListEl = containerEl.querySelector(CONTENT_LIST_CLASS); - const emptyStateEl = containerEl.querySelector('.empty-state'); - - if (contentListEl) { - contentListEl.remove(); - } - - if (emptyStateEl) { - emptyStateEl.classList.remove(HIDDEN_CLASS); - } - }, updatePagination(headers) { this.store.setPaginationInfo(headers); }, updateGroups(groups, fromSearch) { - const hasGroups = groups && groups.length > 0; - - if (this.renderEmptyState) { - this.isSearchEmpty = fromSearch && !hasGroups; - } else { - this.isSearchEmpty = !hasGroups; - } + this.fromSearch = fromSearch; if (fromSearch) { this.store.setSearchedGroups(groups); } else { this.store.setGroups(groups); } - - if (this.action && !hasGroups && !fromSearch) { - if (this.renderEmptyState) { - this.showEmptyState = true; - } else { - this.showLegacyEmptyState(); - } - } }, }, }; @@ -285,14 +256,16 @@ export default { size="lg" class="loading-animation prepend-top-20" /> - <groups-component - v-else - :groups="groups" - :search-empty="isSearchEmpty" - :page-info="pageInfo" - :action="action" - /> - <empty-state v-if="showEmptyState" /> + <template v-else> + <groups-component v-if="hasGroups" :groups="groups" :page-info="pageInfo" :action="action" /> + <gl-empty-state + v-else-if="fromSearch" + :title="$options.i18n.searchEmptyState.title" + :description="$options.i18n.searchEmptyState.description" + data-testid="search-empty-state" + /> + <slot v-else name="empty-state"></slot> + </template> <gl-modal modal-id="leave-group-modal" :visible="isModalVisible" |