diff options
Diffstat (limited to 'app/assets/javascripts/jira_connect/components')
3 files changed, 140 insertions, 47 deletions
diff --git a/app/assets/javascripts/jira_connect/components/app.vue b/app/assets/javascripts/jira_connect/components/app.vue index f5bf30f4488..a4ba86dc6a1 100644 --- a/app/assets/javascripts/jira_connect/components/app.vue +++ b/app/assets/javascripts/jira_connect/components/app.vue @@ -1,8 +1,10 @@ <script> -import { mapState } from 'vuex'; import { GlAlert, GlButton, GlModal, GlModalDirective } from '@gitlab/ui'; +import { mapState } from 'vuex'; +import { getLocation } from '~/jira_connect/api'; import { __ } from '~/locale'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; + import GroupsList from './groups_list.vue'; export default { @@ -17,17 +19,42 @@ export default { GlModalDirective, }, mixins: [glFeatureFlagsMixin()], + inject: { + usersPath: { + default: '', + }, + }, + data() { + return { + location: '', + }; + }, computed: { ...mapState(['errorMessage']), showNewUI() { return this.glFeatures.newJiraConnectUi; }, + usersPathWithReturnTo() { + if (this.location) { + return `${this.usersPath}?return_to=${this.location}`; + } + + return this.usersPath; + }, }, modal: { cancelProps: { text: __('Cancel'), }, }, + created() { + this.setLocation(); + }, + methods: { + async setLocation() { + this.location = await getLocation(); + }, + }, }; </script> @@ -37,27 +64,40 @@ export default { {{ errorMessage }} </gl-alert> - <h1>GitLab for Jira Configuration</h1> + <h2>{{ s__('JiraService|GitLab for Jira Configuration') }}</h2> <div v-if="showNewUI" - class="gl-display-flex gl-justify-content-space-between gl-my-5 gl-pb-4 gl-border-b-solid gl-border-b-1 gl-border-b-gray-200" + class="gl-display-flex gl-justify-content-space-between gl-my-7 gl-pb-4 gl-border-b-solid gl-border-b-1 gl-border-b-gray-200" > - <h3 data-testid="new-jira-connect-ui-heading">{{ s__('Integrations|Linked namespaces') }}</h3> + <h5 class="gl-align-self-center gl-mb-0" data-testid="new-jira-connect-ui-heading"> + {{ s__('Integrations|Linked namespaces') }} + </h5> <gl-button - v-gl-modal-directive="'add-namespace-modal'" + v-if="usersPath" category="primary" variant="info" class="gl-align-self-center" - >{{ s__('Integrations|Add namespace') }}</gl-button - > - <gl-modal - modal-id="add-namespace-modal" - :title="s__('Integrations|Link namespaces')" - :action-cancel="$options.modal.cancelProps" + :href="usersPathWithReturnTo" + target="_blank" + >{{ s__('Integrations|Sign in to add namespaces') }}</gl-button > - <groups-list /> - </gl-modal> + <template v-else> + <gl-button + v-gl-modal-directive="'add-namespace-modal'" + category="primary" + variant="info" + class="gl-align-self-center" + >{{ s__('Integrations|Add namespace') }}</gl-button + > + <gl-modal + modal-id="add-namespace-modal" + :title="s__('Integrations|Link namespaces')" + :action-cancel="$options.modal.cancelProps" + > + <groups-list /> + </gl-modal> + </template> </div> </div> </template> diff --git a/app/assets/javascripts/jira_connect/components/groups_list.vue b/app/assets/javascripts/jira_connect/components/groups_list.vue index eeddd32addc..69f2903388c 100644 --- a/app/assets/javascripts/jira_connect/components/groups_list.vue +++ b/app/assets/javascripts/jira_connect/components/groups_list.vue @@ -1,9 +1,9 @@ <script> -import { GlTabs, GlTab, GlLoadingIcon, GlPagination } from '@gitlab/ui'; -import { s__ } from '~/locale'; -import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils'; +import { GlTabs, GlTab, GlLoadingIcon, GlPagination, GlAlert } from '@gitlab/ui'; import { fetchGroups } from '~/jira_connect/api'; import { defaultPerPage } from '~/jira_connect/constants'; +import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils'; +import { s__ } from '~/locale'; import GroupsListItem from './groups_list_item.vue'; export default { @@ -12,6 +12,7 @@ export default { GlTab, GlLoadingIcon, GlPagination, + GlAlert, GroupsListItem, }, inject: { @@ -26,6 +27,7 @@ export default { page: 1, perPage: defaultPerPage, totalItems: 0, + errorMessage: null, }; }, mounted() { @@ -46,8 +48,7 @@ export default { this.groups = response.data; }) .catch(() => { - // eslint-disable-next-line no-alert - alert(s__('Integrations|Failed to load namespaces. Please try again.')); + this.errorMessage = s__('Integrations|Failed to load namespaces. Please try again.'); }) .finally(() => { this.isLoading = false; @@ -58,31 +59,42 @@ export default { </script> <template> - <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" /> - </ul> + <div> + <gl-alert v-if="errorMessage" class="gl-mb-6" 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> - <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> + </gl-tab> + </gl-tabs> + </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 15e37ab3cb0..69b09ab0a21 100644 --- a/app/assets/javascripts/jira_connect/components/groups_list_item.vue +++ b/app/assets/javascripts/jira_connect/components/groups_list_item.vue @@ -1,10 +1,18 @@ <script> -import { GlIcon, GlAvatar } from '@gitlab/ui'; +import { GlAvatar, GlButton, GlIcon } from '@gitlab/ui'; +import { addSubscription } from '~/jira_connect/api'; +import { s__ } from '~/locale'; export default { components: { - GlIcon, GlAvatar, + GlButton, + GlIcon, + }, + inject: { + subscriptionsPath: { + default: '', + }, }, props: { group: { @@ -12,6 +20,31 @@ export default { required: true, }, }, + data() { + return { + isLoading: false, + }; + }, + methods: { + onClick() { + this.isLoading = true; + + addSubscription(this.subscriptionsPath, this.group.full_path) + .then(() => { + AP.navigator.reload(); + }) + .catch((error) => { + this.$emit( + 'error', + error?.response?.data?.error || + s__('Integrations|Failed to link namespace. Please try again.'), + ); + }) + .finally(() => { + this.isLoading = false; + }); + }, + }, }; </script> @@ -19,7 +52,7 @@ export default { <li class="gl-border-b-1 gl-border-b-solid gl-border-b-gray-200"> <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-display-sm-flex gl-mr-3"> + <div class="gl-display-none gl-flex-shrink-0 gl-sm-display-flex gl-mr-3"> <gl-avatar :size="32" shape="rect" :entity-name="group.name" :src="group.avatar_url" /> </div> <div class="gl-min-w-0 gl-display-flex gl-flex-grow-1 gl-flex-shrink-1 gl-align-items-center"> @@ -36,6 +69,14 @@ export default { <p class="gl-mt-2! gl-mb-0 gl-text-gray-600" v-text="group.description"></p> </div> </div> + + <gl-button + category="secondary" + variant="success" + :loading="isLoading" + @click.prevent="onClick" + >{{ __('Link') }}</gl-button + > </div> </div> </li> |