diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-04-12 15:09:15 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-04-12 15:09:15 +0300 |
commit | d7fd035dc387e9c2e5c31bbb53d867239689cfbf (patch) | |
tree | cfa2a19998e4743be51c987f200495d80a4c4466 /app/assets/javascripts/jira_connect | |
parent | ede2fbdc8734f095d371614d362b5ae373d6a243 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/jira_connect')
3 files changed, 67 insertions, 45 deletions
diff --git a/app/assets/javascripts/jira_connect/api.js b/app/assets/javascripts/jira_connect/api.js index d78aba0a3f7..8da2ca73f9a 100644 --- a/app/assets/javascripts/jira_connect/api.js +++ b/app/assets/javascripts/jira_connect/api.js @@ -39,11 +39,12 @@ export const removeSubscription = async (removePath) => { }); }; -export const fetchGroups = async (groupsPath, { page, perPage }) => { +export const fetchGroups = async (groupsPath, { page, perPage, search }) => { return axios.get(groupsPath, { params: { page, per_page: perPage, + search, }, }); }; diff --git a/app/assets/javascripts/jira_connect/components/groups_list.vue b/app/assets/javascripts/jira_connect/components/groups_list.vue index 69f2903388c..275ff820419 100644 --- a/app/assets/javascripts/jira_connect/components/groups_list.vue +++ b/app/assets/javascripts/jira_connect/components/groups_list.vue @@ -1,5 +1,5 @@ <script> -import { GlTabs, GlTab, GlLoadingIcon, GlPagination, GlAlert } from '@gitlab/ui'; +import { GlLoadingIcon, GlPagination, GlAlert, GlSearchBoxByType } from '@gitlab/ui'; import { fetchGroups } from '~/jira_connect/api'; import { defaultPerPage } from '~/jira_connect/constants'; import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils'; @@ -8,11 +8,10 @@ import GroupsListItem from './groups_list_item.vue'; export default { components: { - GlTabs, - GlTab, GlLoadingIcon, GlPagination, GlAlert, + GlSearchBoxByType, GroupsListItem, }, inject: { @@ -23,7 +22,8 @@ export default { data() { return { groups: [], - isLoading: false, + isLoadingInitial: true, + isLoadingMore: false, page: 1, perPage: defaultPerPage, totalItems: 0, @@ -31,15 +31,18 @@ export default { }; }, mounted() { - this.loadGroups(); + return this.loadGroups().finally(() => { + this.isLoadingInitial = false; + }); }, methods: { - loadGroups() { - this.isLoading = true; + loadGroups({ searchTerm } = {}) { + this.isLoadingMore = true; - fetchGroups(this.groupsPath, { + return fetchGroups(this.groupsPath, { page: this.page, perPage: this.perPage, + search: searchTerm, }) .then((response) => { const { page, total } = parseIntPagination(normalizeHeaders(response.headers)); @@ -51,50 +54,61 @@ export default { this.errorMessage = s__('Integrations|Failed to load namespaces. Please try again.'); }) .finally(() => { - this.isLoading = false; + this.isLoadingMore = false; }); }, + onGroupSearch(searchTerm) { + return this.loadGroups({ searchTerm }); + }, }, }; </script> <template> <div> - <gl-alert v-if="errorMessage" class="gl-mb-6" variant="danger" @dismiss="errorMessage = null"> + <gl-alert v-if="errorMessage" class="gl-mb-5" variant="danger" @dismiss="errorMessage = null"> {{ errorMessage }} </gl-alert> - <gl-tabs> - <gl-tab :title="__('Groups and subgroups')" class="gl-pt-3"> - <gl-loading-icon v-if="isLoading" size="md" /> - <div v-else-if="groups.length === 0" class="gl-text-center"> - <h5>{{ s__('Integrations|No available namespaces.') }}</h5> - <p class="gl-mt-5"> - {{ - s__('Integrations|You must have owner or maintainer permissions to link namespaces.') - }} - </p> - </div> - <ul v-else class="gl-list-style-none gl-pl-0"> - <groups-list-item - v-for="group in groups" - :key="group.id" - :group="group" - @error="errorMessage = $event" - /> - </ul> + <gl-search-box-by-type + class="gl-mb-5" + debounce="500" + :placeholder="__('Search by name')" + :is-loading="isLoadingMore" + @input="onGroupSearch" + /> + + <gl-loading-icon v-if="isLoadingInitial" size="md" /> + <div v-else-if="groups.length === 0" class="gl-text-center"> + <h5>{{ s__('Integrations|No available namespaces.') }}</h5> + <p class="gl-mt-5"> + {{ s__('Integrations|You must have owner or maintainer permissions to link namespaces.') }} + </p> + </div> + <ul + v-else + class="gl-list-style-none gl-pl-0 gl-border-t-1 gl-border-t-solid gl-border-t-gray-100" + :class="{ 'gl-opacity-5': isLoadingMore }" + data-testid="groups-list" + > + <groups-list-item + v-for="group in groups" + :key="group.id" + :group="group" + :disabled="isLoadingMore" + @error="errorMessage = $event" + /> + </ul> - <div class="gl-display-flex gl-justify-content-center gl-mt-5"> - <gl-pagination - v-if="totalItems > perPage && groups.length > 0" - v-model="page" - class="gl-mb-0" - :per-page="perPage" - :total-items="totalItems" - @input="loadGroups" - /> - </div> - </gl-tab> - </gl-tabs> + <div class="gl-display-flex gl-justify-content-center gl-mt-5"> + <gl-pagination + v-if="totalItems > perPage && groups.length > 0" + v-model="page" + class="gl-mb-0" + :per-page="perPage" + :total-items="totalItems" + @input="loadGroups" + /> + </div> </div> </template> diff --git a/app/assets/javascripts/jira_connect/components/groups_list_item.vue b/app/assets/javascripts/jira_connect/components/groups_list_item.vue index b8959a2a505..9c5722c44c7 100644 --- a/app/assets/javascripts/jira_connect/components/groups_list_item.vue +++ b/app/assets/javascripts/jira_connect/components/groups_list_item.vue @@ -21,6 +21,11 @@ export default { type: Object, required: true, }, + disabled: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { @@ -60,7 +65,7 @@ export default { </script> <template> - <li class="gl-border-b-1 gl-border-b-solid gl-border-b-gray-200"> + <li class="gl-border-b-1 gl-border-b-solid gl-border-b-gray-100"> <div class="gl-display-flex gl-align-items-center gl-py-3"> <gl-icon name="folder-o" class="gl-mr-3" /> <div class="gl-display-none gl-flex-shrink-0 gl-sm-display-flex gl-mr-3"> @@ -83,11 +88,13 @@ export default { <gl-button category="secondary" - variant="success" + variant="confirm" :loading="isLoading" + :disabled="disabled" @click.prevent="onClick" - >{{ __('Link') }}</gl-button > + {{ __('Link') }} + </gl-button> </div> </div> </li> |