Add compatibility alert to Jira Connect App

Make compatibiltiy alert a dismissible banner.

Changelog: changed

app/assets/javascripts/jira_connect/subscriptions/components/app.vue

@@ -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">

app/assets/javascripts/jira_connect/subscriptions/components/compatibility_alert.vue

+<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>

app/views/jira_connect/subscriptions/index.html.haml

@@ -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'
 

locale/gitlab.pot

@@ -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 ""
 

spec/frontend/jira_connect/subscriptions/components/app_spec.js

-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}'),

spec/frontend/jira_connect/subscriptions/components/compatibility_alert_spec.js

+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);
+    });
+  });
+});