diff options
Diffstat (limited to 'app/assets/javascripts/jira_connect')
8 files changed, 89 insertions, 19 deletions
diff --git a/app/assets/javascripts/jira_connect/components/app.vue b/app/assets/javascripts/jira_connect/components/app.vue index a4ba86dc6a1..fe5ad8b67d7 100644 --- a/app/assets/javascripts/jira_connect/components/app.vue +++ b/app/assets/javascripts/jira_connect/components/app.vue @@ -1,10 +1,11 @@ <script> -import { GlAlert, GlButton, GlModal, GlModalDirective } from '@gitlab/ui'; -import { mapState } from 'vuex'; +import { GlAlert, GlButton, GlModal, GlModalDirective, GlLink, GlSprintf } from '@gitlab/ui'; +import { mapState, mapMutations } from 'vuex'; import { getLocation } from '~/jira_connect/api'; import { __ } from '~/locale'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; - +import { SET_ALERT } from '../store/mutation_types'; +import { retrieveAlert } from '../utils'; import GroupsList from './groups_list.vue'; export default { @@ -14,6 +15,8 @@ export default { GlButton, GlModal, GroupsList, + GlLink, + GlSprintf, }, directives: { GlModalDirective, @@ -30,10 +33,7 @@ export default { }; }, computed: { - ...mapState(['errorMessage']), - showNewUI() { - return this.glFeatures.newJiraConnectUi; - }, + ...mapState(['alert']), usersPathWithReturnTo() { if (this.location) { return `${this.usersPath}?return_to=${this.location}`; @@ -41,6 +41,9 @@ export default { return this.usersPath; }, + shouldShowAlert() { + return Boolean(this.alert?.message); + }, }, modal: { cancelProps: { @@ -48,27 +51,48 @@ export default { }, }, 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 }); + }, }, }; </script> <template> <div> - <gl-alert v-if="errorMessage" class="gl-mb-6" variant="danger" :dismissible="false"> - {{ errorMessage }} + <gl-alert + v-if="shouldShowAlert" + class="gl-mb-7" + :variant="alert.variant" + :title="alert.title" + @dismiss="setAlert" + > + <gl-sprintf v-if="alert.linkUrl" :message="alert.message"> + <template #link="{ content }"> + <gl-link :href="alert.linkUrl" target="_blank">{{ content }}</gl-link> + </template> + </gl-sprintf> + + <template v-else> + {{ alert.message }} + </template> </gl-alert> - <h2>{{ s__('JiraService|GitLab for Jira Configuration') }}</h2> + <h2 class="gl-text-center">{{ s__('JiraService|GitLab for Jira Configuration') }}</h2> <div - v-if="showNewUI" - 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" + class="jira-connect-app-body 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" > <h5 class="gl-align-self-center gl-mb-0" data-testid="new-jira-connect-ui-heading"> {{ s__('Integrations|Linked namespaces') }} 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 69b09ab0a21..b8959a2a505 100644 --- a/app/assets/javascripts/jira_connect/components/groups_list_item.vue +++ b/app/assets/javascripts/jira_connect/components/groups_list_item.vue @@ -1,7 +1,9 @@ <script> import { GlAvatar, GlButton, GlIcon } from '@gitlab/ui'; +import { helpPagePath } from '~/helpers/help_page_helper'; import { addSubscription } from '~/jira_connect/api'; import { s__ } from '~/locale'; +import { persistAlert } from '../utils'; export default { components: { @@ -31,6 +33,15 @@ export default { addSubscription(this.subscriptionsPath, this.group.full_path) .then(() => { + persistAlert({ + title: s__('Integrations|Namespace successfully linked'), + message: s__( + 'Integrations|You should now see GitLab.com activity inside your Jira Cloud issues. %{linkStart}Learn more%{linkEnd}', + ), + linkUrl: helpPagePath('integration/jira_development_panel.html', { anchor: 'usage' }), + variant: 'success', + }); + AP.navigator.reload(); }) .catch((error) => { diff --git a/app/assets/javascripts/jira_connect/constants.js b/app/assets/javascripts/jira_connect/constants.js index 2b3be5cd5cd..63b79581a1b 100644 --- a/app/assets/javascripts/jira_connect/constants.js +++ b/app/assets/javascripts/jira_connect/constants.js @@ -1 +1,2 @@ export const defaultPerPage = 10; +export const ALERT_LOCALSTORAGE_KEY = 'gitlab_alert'; diff --git a/app/assets/javascripts/jira_connect/index.js b/app/assets/javascripts/jira_connect/index.js index 7191fce3c33..ecdb41607a4 100644 --- a/app/assets/javascripts/jira_connect/index.js +++ b/app/assets/javascripts/jira_connect/index.js @@ -6,7 +6,7 @@ import Translate from '~/vue_shared/translate'; import JiraConnectApp from './components/app.vue'; import createStore from './store'; -import { SET_ERROR_MESSAGE } from './store/mutation_types'; +import { SET_ALERT } from './store/mutation_types'; const store = createStore(); @@ -17,7 +17,7 @@ const reqComplete = () => { const reqFailed = (res, fallbackErrorMessage) => { const { error = fallbackErrorMessage } = res || {}; - store.commit(SET_ERROR_MESSAGE, error); + store.commit(SET_ALERT, { message: error, variant: 'danger' }); }; const updateSignInLinks = async () => { @@ -77,6 +77,7 @@ export async function initJiraConnect() { Vue.use(GlFeatureFlagsPlugin); const { groupsPath, subscriptionsPath, usersPath } = el.dataset; + AP.sizeToParent(); return new Vue({ el, diff --git a/app/assets/javascripts/jira_connect/store/mutation_types.js b/app/assets/javascripts/jira_connect/store/mutation_types.js index 7f6ff1256bb..15f36b824d9 100644 --- a/app/assets/javascripts/jira_connect/store/mutation_types.js +++ b/app/assets/javascripts/jira_connect/store/mutation_types.js @@ -1 +1 @@ -export const SET_ERROR_MESSAGE = 'SET_ERROR_MESSAGE'; +export const SET_ALERT = 'SET_ALERT'; diff --git a/app/assets/javascripts/jira_connect/store/mutations.js b/app/assets/javascripts/jira_connect/store/mutations.js index c3acd07f89f..2a25e0fe25f 100644 --- a/app/assets/javascripts/jira_connect/store/mutations.js +++ b/app/assets/javascripts/jira_connect/store/mutations.js @@ -1,7 +1,7 @@ -import { SET_ERROR_MESSAGE } from './mutation_types'; +import { SET_ALERT } from './mutation_types'; export default { - [SET_ERROR_MESSAGE](state, errorMessage) { - state.errorMessage = errorMessage; + [SET_ALERT](state, { title, message, variant, linkUrl } = {}) { + state.alert = { title, message, variant, linkUrl }; }, }; diff --git a/app/assets/javascripts/jira_connect/store/state.js b/app/assets/javascripts/jira_connect/store/state.js index 079b8350770..c807df03f00 100644 --- a/app/assets/javascripts/jira_connect/store/state.js +++ b/app/assets/javascripts/jira_connect/store/state.js @@ -1,3 +1,3 @@ export default () => ({ - errorMessage: undefined, + alert: undefined, }); diff --git a/app/assets/javascripts/jira_connect/utils.js b/app/assets/javascripts/jira_connect/utils.js new file mode 100644 index 00000000000..2a6c53ba42c --- /dev/null +++ b/app/assets/javascripts/jira_connect/utils.js @@ -0,0 +1,33 @@ +import AccessorUtilities from '~/lib/utils/accessor'; +import { ALERT_LOCALSTORAGE_KEY } from './constants'; + +/** + * Persist alert data to localStorage. + */ +export const persistAlert = ({ title, message, linkUrl, variant } = {}) => { + if (!AccessorUtilities.isLocalStorageAccessSafe()) { + return; + } + + const payload = JSON.stringify({ title, message, linkUrl, variant }); + localStorage.setItem(ALERT_LOCALSTORAGE_KEY, payload); +}; + +/** + * Return alert data from localStorage. + */ +export const retrieveAlert = () => { + if (!AccessorUtilities.isLocalStorageAccessSafe()) { + return null; + } + + const initialAlertJSON = localStorage.getItem(ALERT_LOCALSTORAGE_KEY); + // immediately clean up + localStorage.removeItem(ALERT_LOCALSTORAGE_KEY); + + if (!initialAlertJSON) { + return null; + } + + return JSON.parse(initialAlertJSON); +}; |