Commit 7e79f593 authored by Tom Quirk's avatar Tom Quirk Committed by Miguel Rincon

Add compatibility alert to Jira Connect App

Make compatibiltiy alert a dismissible banner.

Changelog: changed
parent a35c1e1e
......@@ -8,6 +8,7 @@ import SubscriptionsList from './subscriptions_list.vue';
import AddNamespaceButton from './add_namespace_button.vue';
import SignInButton from './sign_in_button.vue';
import UserLink from './user_link.vue';
import CompatibilityAlert from './compatibility_alert.vue';
export default {
name: 'JiraConnectApp',
......@@ -20,6 +21,7 @@ export default {
AddNamespaceButton,
SignInButton,
UserLink,
CompatibilityAlert,
},
inject: {
usersPath: {
......@@ -58,11 +60,14 @@ export default {
<template>
<div>
<compatibility-alert />
<gl-alert
v-if="shouldShowAlert"
class="gl-mb-7"
:variant="alert.variant"
:title="alert.title"
data-testid="jira-connect-persisted-alert"
@dismiss="setAlert"
>
<gl-sprintf v-if="alert.linkUrl" :message="alert.message">
......
<script>
import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
import { s__ } from '~/locale';
import { helpPagePath } from '~/helpers/help_page_helper';
import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
const COMPATIBILITY_ALERT_STATE_KEY = 'compatibility_alert_dismissed';
export default {
name: 'CompatibilityAlert',
components: {
GlAlert,
GlSprintf,
GlLink,
LocalStorageSync,
},
data() {
return {
alertDismissed: false,
};
},
computed: {
shouldShowAlert() {
return !this.alertDismissed;
},
},
methods: {
dismissAlert() {
this.alertDismissed = true;
},
},
i18n: {
title: s__('Integrations|Known limitations'),
body: s__(
'Integrations|This integration only works with GitLab.com. Adding a namespace only works in browsers that allow cross-site cookies. %{linkStart}Learn more%{linkEnd}.',
),
},
DOCS_LINK_URL: helpPagePath('integration/jira/connect-app'),
COMPATIBILITY_ALERT_STATE_KEY,
};
</script>
<template>
<local-storage-sync
v-model="alertDismissed"
:storage-key="$options.COMPATIBILITY_ALERT_STATE_KEY"
>
<gl-alert
v-if="shouldShowAlert"
class="gl-mb-7"
variant="info"
:title="$options.i18n.title"
@dismiss="dismissAlert"
>
<gl-sprintf :message="$options.i18n.body">
<template #link="{ content }">
<gl-link :href="$options.DOCS_LINK_URL" target="_blank" rel="noopener noreferrer">{{
content
}}</gl-link>
</template>
</gl-sprintf>
</gl-alert>
</local-storage-sync>
</template>
......@@ -4,14 +4,6 @@
%main.jira-connect-app.gl-px-5.gl-pt-7.gl-mx-auto
.js-jira-connect-app{ data: jira_connect_app_data(@subscriptions) }
%p.jira-connect-app-body.gl-px-5.gl-font-base.gl-text-center.gl-mx-auto
%strong= s_('Integrations|Browser limitations')
- browser_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'
- firefox_link_start = browser_link_start.html_safe % { url: 'https://www.mozilla.org/en-US/firefox/' }
- chrome_link_start = browser_link_start.html_safe % { url: 'https://www.google.com/chrome/' }
= s_('Integrations|Adding a namespace works only in browsers that allow cross‑site cookies. Use %{firefox_link_start}Firefox%{link_end}, %{chrome_link_start}Google Chrome%{link_end}, or enable cross‑site cookies in your browser, when adding a namespace.').html_safe % { firefox_link_start: firefox_link_start, chrome_link_start: chrome_link_start, link_end: '</a>'.html_safe }
= link_to _('Learn more'), 'https://gitlab.com/gitlab-org/gitlab/-/issues/284211', target: '_blank', rel: 'noopener noreferrer'
= webpack_bundle_tag 'performance_bar' if performance_bar_enabled?
= webpack_bundle_tag 'jira_connect_app'
......
......@@ -19145,9 +19145,6 @@ msgstr ""
msgid "Integrations|Add namespace"
msgstr ""
msgid "Integrations|Adding a namespace works only in browsers that allow cross‑site cookies. Use %{firefox_link_start}Firefox%{link_end}, %{chrome_link_start}Google Chrome%{link_end}, or enable cross‑site cookies in your browser, when adding a namespace."
msgstr ""
msgid "Integrations|All details"
msgstr ""
......@@ -19160,9 +19157,6 @@ msgstr ""
msgid "Integrations|Branches for which notifications are to be sent"
msgstr ""
msgid "Integrations|Browser limitations"
msgstr ""
msgid "Integrations|Comment detail:"
msgstr ""
......@@ -19232,6 +19226,9 @@ msgstr ""
msgid "Integrations|Keep your PHP dependencies updated on Packagist."
msgstr ""
msgid "Integrations|Known limitations"
msgstr ""
msgid "Integrations|Link namespaces"
msgstr ""
......@@ -19298,6 +19295,9 @@ msgstr ""
msgid "Integrations|There are no projects using custom settings"
msgstr ""
msgid "Integrations|This integration only works with GitLab.com. Adding a namespace only works in browsers that allow cross-site cookies. %{linkStart}Learn more%{linkEnd}."
msgstr ""
msgid "Integrations|This integration, and inheriting projects were reset."
msgstr ""
......
import { GlAlert, GlLink, GlEmptyState } from '@gitlab/ui';
import { mount, shallowMount } from '@vue/test-utils';
import { GlLink, GlEmptyState } from '@gitlab/ui';
import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
import JiraConnectApp from '~/jira_connect/subscriptions/components/app.vue';
import AddNamespaceButton from '~/jira_connect/subscriptions/components/add_namespace_button.vue';
......@@ -20,14 +20,14 @@ describe('JiraConnectApp', () => {
let wrapper;
let store;
const findAlert = () => wrapper.findComponent(GlAlert);
const findAlert = () => wrapper.findByTestId('jira-connect-persisted-alert');
const findAlertLink = () => findAlert().findComponent(GlLink);
const findSignInButton = () => wrapper.findComponent(SignInButton);
const findAddNamespaceButton = () => wrapper.findComponent(AddNamespaceButton);
const findSubscriptionsList = () => wrapper.findComponent(SubscriptionsList);
const findEmptyState = () => wrapper.findComponent(GlEmptyState);
const createComponent = ({ provide, mountFn = shallowMount } = {}) => {
const createComponent = ({ provide, mountFn = shallowMountExtended } = {}) => {
store = createStore();
wrapper = mountFn(JiraConnectApp, {
......@@ -143,7 +143,7 @@ describe('JiraConnectApp', () => {
});
it('renders link when `linkUrl` is set', async () => {
createComponent({ mountFn: mount });
createComponent({ mountFn: mountExtended });
store.commit(SET_ALERT, {
message: __('test message %{linkStart}test link%{linkEnd}'),
......
import { GlAlert, GlLink } from '@gitlab/ui';
import { shallowMount, mount } from '@vue/test-utils';
import CompatibilityAlert from '~/jira_connect/subscriptions/components/compatibility_alert.vue';
import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
describe('CompatibilityAlert', () => {
let wrapper;
const createComponent = ({ mountFn = shallowMount } = {}) => {
wrapper = mountFn(CompatibilityAlert);
};
const findAlert = () => wrapper.findComponent(GlAlert);
const findLink = () => wrapper.findComponent(GlLink);
const findLocalStorageSync = () => wrapper.findComponent(LocalStorageSync);
afterEach(() => {
wrapper.destroy();
});
it('displays an alert', () => {
createComponent();
expect(findAlert().exists()).toBe(true);
});
it('renders help link with target="_blank" and rel="noopener noreferrer"', () => {
createComponent({ mountFn: mount });
expect(findLink().attributes()).toMatchObject({
target: '_blank',
rel: 'noopener noreferrer',
});
});
it('`local-storage-sync` value prop is initially false', () => {
createComponent();
expect(findLocalStorageSync().props('value')).toBe(false);
});
describe('when dismissed', () => {
beforeEach(async () => {
createComponent();
await findAlert().vm.$emit('dismiss');
});
it('hides alert', () => {
expect(findAlert().exists()).toBe(false);
});
it('updates value prop of `local-storage-sync`', () => {
expect(findLocalStorageSync().props('value')).toBe(true);
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment