diff options
Diffstat (limited to 'app/assets/javascripts/jira_connect')
12 files changed, 190 insertions, 106 deletions
diff --git a/app/assets/javascripts/jira_connect/branches/graphql/queries/get_projects.query.graphql b/app/assets/javascripts/jira_connect/branches/graphql/queries/get_projects.query.graphql index e768154e210..32fbc1113bc 100644 --- a/app/assets/javascripts/jira_connect/branches/graphql/queries/get_projects.query.graphql +++ b/app/assets/javascripts/jira_connect/branches/graphql/queries/get_projects.query.graphql @@ -1,6 +1,6 @@ #import "~/graphql_shared/fragments/pageInfo.fragment.graphql" -query getProjects( +query jiraGetProjects( $search: String! $after: String = "" $first: Int! diff --git a/app/assets/javascripts/jira_connect/branches/index.js b/app/assets/javascripts/jira_connect/branches/index.js index 95bd4f5c675..04510fcff4b 100644 --- a/app/assets/javascripts/jira_connect/branches/index.js +++ b/app/assets/javascripts/jira_connect/branches/index.js @@ -14,12 +14,7 @@ export default async function initJiraConnectBranches() { const { initialBranchName, successStateSvgPath } = el.dataset; const apolloProvider = new VueApollo({ - defaultClient: createDefaultClient( - {}, - { - assumeImmutableResults: true, - }, - ), + defaultClient: createDefaultClient(), }); return new Vue({ diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_button.vue b/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_button.vue new file mode 100644 index 00000000000..0b286bc903f --- /dev/null +++ b/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_button.vue @@ -0,0 +1,24 @@ +<script> +import { GlButton, GlModalDirective } from '@gitlab/ui'; +import { ADD_NAMESPACE_MODAL_ID } from '../constants'; +import AddNamespaceModal from './add_namespace_modal/add_namespace_modal.vue'; + +export default { + components: { + GlButton, + AddNamespaceModal, + }, + directives: { + GlModal: GlModalDirective, + }, + ADD_NAMESPACE_MODAL_ID, +}; +</script> +<template> + <div> + <gl-button v-gl-modal="$options.ADD_NAMESPACE_MODAL_ID" category="primary" variant="info"> + {{ s__('Integrations|Add namespace') }} + </gl-button> + <add-namespace-modal /> + </div> +</template> diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/add_namespace_modal.vue b/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/add_namespace_modal.vue new file mode 100644 index 00000000000..0e209a09b16 --- /dev/null +++ b/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/add_namespace_modal.vue @@ -0,0 +1,26 @@ +<script> +import { GlModal } from '@gitlab/ui'; +import { __, s__ } from '~/locale'; +import { ADD_NAMESPACE_MODAL_ID } from '../../constants'; +import GroupsList from './groups_list.vue'; + +export default { + components: { GlModal, GroupsList }, + modal: { + id: ADD_NAMESPACE_MODAL_ID, + title: s__('Integrations|Link namespaces'), + cancelProps: { + text: __('Cancel'), + }, + }, +}; +</script> +<template> + <gl-modal + :modal-id="$options.modal.id" + :title="$options.modal.title" + :action-cancel="$options.modal.cancelProps" + > + <groups-list /> + </gl-modal> +</template> diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/groups_list.vue b/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/groups_list.vue index 5a49d7c1a90..5a49d7c1a90 100644 --- a/app/assets/javascripts/jira_connect/subscriptions/components/groups_list.vue +++ b/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/groups_list.vue diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/groups_list_item.vue b/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/groups_list_item.vue index ed7585e8a88..005c3bcd0e3 100644 --- a/app/assets/javascripts/jira_connect/subscriptions/components/groups_list_item.vue +++ b/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/groups_list_item.vue @@ -4,7 +4,7 @@ import { helpPagePath } from '~/helpers/help_page_helper'; import { addSubscription } from '~/jira_connect/subscriptions/api'; import { persistAlert, reloadPage } from '~/jira_connect/subscriptions/utils'; import { s__ } from '~/locale'; -import GroupItemName from './group_item_name.vue'; +import GroupItemName from '../group_item_name.vue'; export default { components: { diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/app.vue b/app/assets/javascripts/jira_connect/subscriptions/components/app.vue index 413424be28d..c0504cbb645 100644 --- a/app/assets/javascripts/jira_connect/subscriptions/components/app.vue +++ b/app/assets/javascripts/jira_connect/subscriptions/components/app.vue @@ -1,65 +1,51 @@ <script> -import { GlAlert, GlButton, GlLink, GlModal, GlModalDirective, GlSprintf } from '@gitlab/ui'; +import { GlAlert, GlLink, GlSprintf, GlEmptyState } from '@gitlab/ui'; +import { isEmpty } from 'lodash'; import { mapState, mapMutations } from 'vuex'; -import { retrieveAlert, getLocation } from '~/jira_connect/subscriptions/utils'; -import { __ } from '~/locale'; +import { retrieveAlert } from '~/jira_connect/subscriptions/utils'; import { SET_ALERT } from '../store/mutation_types'; -import GroupsList from './groups_list.vue'; import SubscriptionsList from './subscriptions_list.vue'; +import AddNamespaceButton from './add_namespace_button.vue'; +import SignInButton from './sign_in_button.vue'; export default { name: 'JiraConnectApp', components: { GlAlert, - GlButton, GlLink, - GlModal, GlSprintf, - GroupsList, + GlEmptyState, SubscriptionsList, - }, - directives: { - GlModalDirective, + AddNamespaceButton, + SignInButton, }, inject: { usersPath: { default: '', }, - }, - data() { - return { - location: '', - }; + subscriptions: { + default: [], + }, }, computed: { ...mapState(['alert']), - usersPathWithReturnTo() { - if (this.location) { - return `${this.usersPath}?return_to=${this.location}`; - } - - return this.usersPath; - }, shouldShowAlert() { return Boolean(this.alert?.message); }, - }, - modal: { - cancelProps: { - text: __('Cancel'), + hasSubscriptions() { + return !isEmpty(this.subscriptions); + }, + userSignedIn() { + return Boolean(!this.usersPath); }, }, created() { this.setInitialAlert(); - this.setLocation(); }, methods: { ...mapMutations({ setAlert: SET_ALERT, }), - async setLocation() { - this.location = await getLocation(); - }, setInitialAlert() { const { linkUrl, title, message, variant } = retrieveAlert() || {}; this.setAlert({ linkUrl, title, message, variant }); @@ -88,38 +74,44 @@ export default { </template> </gl-alert> - <h2 class="gl-text-center">{{ s__('JiraService|GitLab for Jira Configuration') }}</h2> + <h2 class="gl-text-center gl-mb-7">{{ s__('JiraService|GitLab for Jira Configuration') }}</h2> + <div class="jira-connect-app-body gl-mx-auto gl-px-5 gl-mb-7"> + <template v-if="hasSubscriptions"> + <div class="gl-display-flex gl-justify-content-end"> + <sign-in-button v-if="!userSignedIn" :users-path="usersPath" /> + <add-namespace-button v-else /> + </div> - <div class="jira-connect-app-body gl-my-7 gl-px-5 gl-pb-4"> - <div class="gl-display-flex gl-justify-content-end"> - <gl-button - v-if="usersPath" - category="primary" - variant="info" - class="gl-align-self-center" - :href="usersPathWithReturnTo" - target="_blank" - >{{ s__('Integrations|Sign in to add namespaces') }}</gl-button + <subscriptions-list /> + </template> + <template v-else> + <div v-if="!userSignedIn" class="gl-text-center"> + <p class="gl-mb-7">{{ s__('JiraService|Sign in to GitLab.com to get started.') }}</p> + <sign-in-button class="gl-mb-7" :users-path="usersPath"> + {{ __('Sign in to GitLab') }} + </sign-in-button> + <p> + {{ + s__( + 'Integrations|Note: this integration only works with accounts on GitLab.com (SaaS).', + ) + }} + </p> + </div> + <gl-empty-state + v-else + :title="s__('Integrations|No linked namespaces')" + :description=" + s__( + 'Integrations|Namespaces are the GitLab groups and subgroups you link to this Jira instance.', + ) + " > - <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> - - <subscriptions-list /> + <template #actions> + <add-namespace-button /> + </template> + </gl-empty-state> + </template> </div> </div> </template> diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/sign_in_button.vue b/app/assets/javascripts/jira_connect/subscriptions/components/sign_in_button.vue new file mode 100644 index 00000000000..dc0a77e99c2 --- /dev/null +++ b/app/assets/javascripts/jira_connect/subscriptions/components/sign_in_button.vue @@ -0,0 +1,36 @@ +<script> +import { GlButton } from '@gitlab/ui'; +import { getGitlabSignInURL } from '~/jira_connect/subscriptions/utils'; + +export default { + components: { + GlButton, + }, + props: { + usersPath: { + type: String, + required: true, + }, + }, + data() { + return { + signInURL: '', + }; + }, + created() { + this.setSignInURL(); + }, + methods: { + async setSignInURL() { + this.signInURL = await getGitlabSignInURL(this.usersPath); + }, + }, +}; +</script> +<template> + <gl-button category="primary" variant="info" :href="signInURL" target="_blank"> + <slot> + {{ s__('Integrations|Sign in to add namespaces') }} + </slot> + </gl-button> +</template> diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/subscriptions_list.vue b/app/assets/javascripts/jira_connect/subscriptions/components/subscriptions_list.vue index 7062fb370ed..33126040c16 100644 --- a/app/assets/javascripts/jira_connect/subscriptions/components/subscriptions_list.vue +++ b/app/assets/javascripts/jira_connect/subscriptions/components/subscriptions_list.vue @@ -1,5 +1,5 @@ <script> -import { GlButton, GlEmptyState, GlTable } from '@gitlab/ui'; +import { GlButton, GlTable } from '@gitlab/ui'; import { isEmpty } from 'lodash'; import { mapMutations } from 'vuex'; import { removeSubscription } from '~/jira_connect/subscriptions/api'; @@ -12,7 +12,6 @@ import GroupItemName from './group_item_name.vue'; export default { components: { GlButton, - GlEmptyState, GlTable, GroupItemName, TimeagoTooltip, @@ -44,17 +43,15 @@ export default { }, ], i18n: { - emptyTitle: s__('Integrations|No linked namespaces'), - emptyDescription: s__( - 'Integrations|Namespaces are the GitLab groups and subgroups you link to this Jira instance.', - ), unlinkError: s__('Integrations|Failed to unlink namespace. Please try again.'), }, methods: { ...mapMutations({ setAlert: SET_ALERT, }), - isEmpty, + isUnlinkButtonDisabled(item) { + return !isEmpty(item); + }, isLoadingItem(item) { return this.loadingItem === item; }, @@ -81,29 +78,22 @@ export default { </script> <template> - <div> - <gl-empty-state - v-if="isEmpty(subscriptions)" - :title="$options.i18n.emptyTitle" - :description="$options.i18n.emptyDescription" - /> - <gl-table v-else :items="subscriptions" :fields="$options.fields"> - <template #cell(name)="{ item }"> - <group-item-name :group="item.group" /> - </template> - <template #cell(created_at)="{ item }"> - <timeago-tooltip :time="item.created_at" /> - </template> - <template #cell(actions)="{ item }"> - <gl-button - :class="unlinkBtnClass(item)" - category="secondary" - :loading="isLoadingItem(item)" - :disabled="!isEmpty(loadingItem)" - @click.prevent="onClick(item)" - >{{ __('Unlink') }}</gl-button - > - </template> - </gl-table> - </div> + <gl-table :items="subscriptions" :fields="$options.fields"> + <template #cell(name)="{ item }"> + <group-item-name :group="item.group" /> + </template> + <template #cell(created_at)="{ item }"> + <timeago-tooltip :time="item.created_at" /> + </template> + <template #cell(actions)="{ item }"> + <gl-button + :class="unlinkBtnClass(item)" + category="secondary" + :loading="isLoadingItem(item)" + :disabled="isUnlinkButtonDisabled(loadingItem)" + @click.prevent="onClick(item)" + >{{ __('Unlink') }}</gl-button + > + </template> + </gl-table> </template> diff --git a/app/assets/javascripts/jira_connect/subscriptions/constants.js b/app/assets/javascripts/jira_connect/subscriptions/constants.js index 8dff83eabb5..2a65b7bc1fa 100644 --- a/app/assets/javascripts/jira_connect/subscriptions/constants.js +++ b/app/assets/javascripts/jira_connect/subscriptions/constants.js @@ -1,3 +1,5 @@ export const DEFAULT_GROUPS_PER_PAGE = 10; export const ALERT_LOCALSTORAGE_KEY = 'gitlab_alert'; export const MINIMUM_SEARCH_TERM_LENGTH = 3; + +export const ADD_NAMESPACE_MODAL_ID = 'add-namespace-modal'; diff --git a/app/assets/javascripts/jira_connect/subscriptions/index.js b/app/assets/javascripts/jira_connect/subscriptions/index.js index f1262be0174..8a7a80d885d 100644 --- a/app/assets/javascripts/jira_connect/subscriptions/index.js +++ b/app/assets/javascripts/jira_connect/subscriptions/index.js @@ -7,16 +7,20 @@ import Translate from '~/vue_shared/translate'; import JiraConnectApp from './components/app.vue'; import createStore from './store'; -import { getLocation, sizeToParent } from './utils'; +import { getGitlabSignInURL, sizeToParent } from './utils'; const store = createStore(); +/** + * Add `return_to` query param to all HAML-defined GitLab sign in links. + */ const updateSignInLinks = async () => { - const location = await getLocation(); - Array.from(document.querySelectorAll('.js-jira-connect-sign-in')).forEach((el) => { - const updatedLink = `${el.getAttribute('href')}?return_to=${location}`; - el.setAttribute('href', updatedLink); - }); + await Promise.all( + Array.from(document.querySelectorAll('.js-jira-connect-sign-in')).map(async (el) => { + const updatedLink = await getGitlabSignInURL(el.getAttribute('href')); + el.setAttribute('href', updatedLink); + }), + ); }; export async function initJiraConnect() { diff --git a/app/assets/javascripts/jira_connect/subscriptions/utils.js b/app/assets/javascripts/jira_connect/subscriptions/utils.js index ed7a9484a81..b2d03a1fbba 100644 --- a/app/assets/javascripts/jira_connect/subscriptions/utils.js +++ b/app/assets/javascripts/jira_connect/subscriptions/utils.js @@ -1,4 +1,5 @@ import AccessorUtilities from '~/lib/utils/accessor'; +import { objectToQuery } from '~/lib/utils/url_utility'; import { ALERT_LOCALSTORAGE_KEY } from './constants'; const isFunction = (fn) => typeof fn === 'function'; @@ -71,3 +72,17 @@ export const sizeToParent = () => { AP.sizeToParent(); } }; + +export const getGitlabSignInURL = async (signInURL) => { + const location = await getLocation(); + + if (location) { + const queryParams = { + return_to: location, + }; + + return `${signInURL}?${objectToQuery(queryParams)}`; + } + + return signInURL; +}; |