Merge branch...

Merge branch 'gitlab-ui-integration-1347-feat-alert-migrate-dismiss-button-to-glbutton' into 'master'

Upgrade @gitlab/ui to v28.18.2

See merge request gitlab-org/gitlab!57542

ee/spec/features/groups/group_roadmap_spec.rb

@@ -179,7 +179,7 @@ RSpec.describe 'group epic roadmap', :js do
 
       it 'is removed after dismissal and even after reload' do
         page.within('[data-testid="epics_limit_callout"]') do
-          find('.gl-alert-dismiss').click
+          find('.gl-dismiss-btn').click
         end
 
         expect(page).not_to have_selector('[data-testid="epics_limit_callout"]')

ee/spec/frontend/security_dashboard/components/first_class_group_security_dashboard_vulnerabilities_spec.js

@@ -79,7 +79,7 @@ describe('First Class Group Dashboard Vulnerabilities Component', () => {
 
     it('should have an alert that is dismissable', () => {
       const alert = findAlert();
-      alert.find('button').trigger('click');
+      alert.vm.$emit('dismiss');
       return wrapper.vm.$nextTick(() => {
         expect(alert.exists()).toBe(false);
       });

ee/spec/frontend/security_dashboard/components/first_class_instance_security_dashboard_vulnerabilities_spec.js

@@ -67,7 +67,7 @@ describe('First Class Instance Dashboard Vulnerabilities Component', () => {
 
     it('should have an alert that is dismissable', () => {
       const alert = findAlert();
-      alert.find('button').trigger('click');
+      alert.vm.$emit('dismiss');
       return wrapper.vm.$nextTick(() => {
         expect(alert.exists()).toBe(false);
       });

package.json

@@ -51,7 +51,7 @@
     "@gitlab/favicon-overlay": "2.0.0",
     "@gitlab/svgs": "1.185.0",
     "@gitlab/tributejs": "1.0.0",
-    "@gitlab/ui": "28.15.0",
+    "@gitlab/ui": "28.18.2",
     "@gitlab/visual-review-tools": "1.6.1",
     "@rails/actioncable": "^6.0.3-4",
     "@rails/ujs": "^6.0.3-4",

spec/frontend/pipelines/graph_shared/links_layer_spec.js

-import { GlAlert, GlButton } from '@gitlab/ui';
+import { GlAlert } from '@gitlab/ui';
+import { fireEvent, within } from '@testing-library/dom';
 import { mount, shallowMount } from '@vue/test-utils';
 import LinksInner from '~/pipelines/components/graph_shared/links_inner.vue';
 import LinksLayer from '~/pipelines/components/graph_shared/links_layer.vue';
@@ -7,8 +8,10 @@ import { generateResponse, mockPipelineResponse } from '../graph/mock_data';
 describe('links layer component', () => {
   let wrapper;
 
+  const withinComponent = () => within(wrapper.element);
   const findAlert = () => wrapper.find(GlAlert);
-  const findShowAnyways = () => findAlert().find(GlButton);
+  const findShowAnyways = () =>
+    withinComponent().getByText(wrapper.vm.$options.i18n.showLinksAnyways);
   const findLinksInner = () => wrapper.find(LinksInner);
 
   const pipeline = generateResponse(mockPipelineResponse, 'root/fungi-xoxo');
@@ -103,13 +106,13 @@ describe('links layer component', () => {
       });
 
       it('renders the disable button', () => {
-        expect(findShowAnyways().exists()).toBe(true);
-        expect(findShowAnyways().text()).toBe(wrapper.vm.$options.i18n.showLinksAnyways);
+        expect(findShowAnyways()).not.toBe(null);
       });
 
       it('shows links when override is clicked', async () => {
         expect(findLinksInner().exists()).toBe(false);
-        await findShowAnyways().trigger('click');
+        fireEvent(findShowAnyways(), new MouseEvent('click', { bubbles: true }));
+        await wrapper.vm.$nextTick();
         expect(findLinksInner().exists()).toBe(true);
       });
     });

spec/frontend/vue_alerts_spec.js

@@ -42,15 +42,17 @@ describe('VueAlerts', () => {
 
   const findJsHooks = () => document.querySelectorAll('.js-vue-alert');
   const findAlerts = () => document.querySelectorAll('.gl-alert');
-  const findAlertDismiss = (alert) => alert.querySelector('.gl-alert-dismiss');
+  const findAlertDismiss = (alert) => alert.querySelector('.gl-dismiss-btn');
 
   const serializeAlert = (alert) => ({
     title: alert.querySelector('.gl-alert-title').textContent.trim(),
     html: alert.querySelector('.gl-alert-body div').innerHTML,
-    dismissible: Boolean(alert.querySelector('.gl-alert-dismiss')),
+    dismissible: Boolean(alert.querySelector('.gl-dismiss-btn')),
     primaryButtonText: alert.querySelector('.gl-alert-action').textContent.trim(),
     primaryButtonLink: alert.querySelector('.gl-alert-action').href,
-    variant: [...alert.classList].find((x) => x.match('gl-alert-')).replace('gl-alert-', ''),
+    variant: [...alert.classList]
+      .find((x) => x.match(/gl-alert-(?!not-dismissible)/))
+      .replace('gl-alert-', ''),
   });
 
   it('starts with only JsHooks', () => {

yarn.lock

@@ -907,10 +907,10 @@
   resolved "https://registry.yarnpkg.com/@gitlab/tributejs/-/tributejs-1.0.0.tgz#672befa222aeffc83e7d799b0500a7a4418e59b8"
   integrity sha512-nmKw1+hB6MHvlmPz63yPwVs1qQkycHwsKgxpEbzmky16Y6mL4EJMk3w1b8QlOAF/AIAzjCERPhe/R4MJiohbZw==
 
-"@gitlab/ui@28.15.0":
-  version "28.15.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-28.15.0.tgz#e78a1c0724c7cc8880fcff8161e529ca7bcaf6e8"
-  integrity sha512-muz1tX3nQmu9dMv7GbTNIkWkEwYhvnLPhtwtnrt8eyRGQ0zIUWLEzdoSiwvMNLAqT2JB8kxahoavR5iSFAYtXA==
+"@gitlab/ui@28.18.2":
+  version "28.18.2"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-28.18.2.tgz#b840a44d4f3094e838d2f7409ca8b578064e2a6f"
+  integrity sha512-KRd/gtZj0885C0cGZiEK4jV5Cdlss62z4d0ii/p45Q6KjwmAC9au946a8pgbtBMCvDmybGxvsMmH4U2MmjNDvQ==
   dependencies:
     "@babel/standalone" "^7.0.0"
     "@gitlab/vue-toasted" "^1.3.0"