Migrate button to GlButton in …/pipeline_schedules_callout.vue

app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue

 <script>
 import Vue from 'vue';
 import Cookies from 'js-cookie';
-import { GlIcon } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import Translate from '../../../../../vue_shared/translate';
 import { parseBoolean } from '~/lib/utils/common_utils';
 
@@ -12,7 +12,7 @@ const cookieKey = 'pipeline_schedules_callout_dismissed';
 export default {
   name: 'PipelineSchedulesCallout',
   components: {
-    GlIcon,
+    GlButton,
   },
   data() {
     return {
@@ -32,9 +32,13 @@ export default {
 <template>
   <div v-if="!calloutDismissed" class="pipeline-schedules-user-callout user-callout">
     <div class="bordered-box landing content-block">
-      <button id="dismiss-callout-btn" class="btn btn-default close" @click="dismissCallout">
-        <gl-icon name="close" aria-hidden="true" />
-      </button>
+      <gl-button
+        category="tertiary"
+        icon="close"
+        :aria-label="__('Dismiss')"
+        class="gl-absolute gl-top-2 gl-right-2"
+        @click="dismissCallout"
+      />
       <div class="svg-container">
         <img :src="imageUrl" />
       </div>

app/assets/stylesheets/page_bundles/pipeline_schedules.scss

@@ -50,11 +50,7 @@
   .bordered-box.content-block {
     border: 1px solid var(--border-color, $border-color);
     background-color: transparent;
-    padding: 16px;
-  }
-
-  #dismiss-callout-btn {
-    color: var(--gl-text-color, $gl-text-color);
+    padding: $gl-spacing-scale-5;
   }
 }
 

changelogs/unreleased/229308-migrate-bootstrap-button-to-gitlab-ui-glbutton-in-app-assets-javas.yml

+---
+title: Replace close button in Scheduling Pipelines user notice with GlButton
+merge_request: 46264
+author:
+type: other

spec/frontend/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js

 import Vue from 'vue';
 import Cookies from 'js-cookie';
+import { getByRole } from '@testing-library/dom';
 import PipelineSchedulesCallout from '~/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue';
 
 const PipelineSchedulesCalloutComponent = Vue.extend(PipelineSchedulesCallout);
@@ -80,7 +81,7 @@ describe('Pipeline Schedule Callout', () => {
     });
 
     it('updates calloutDismissed when close button is clicked', done => {
-      calloutComponent.$el.querySelector('#dismiss-callout-btn').click();
+      getByRole(calloutComponent.$el, 'button', /dismiss/i).click();
 
       Vue.nextTick(() => {
         expect(calloutComponent.calloutDismissed).toBe(true);
@@ -98,7 +99,7 @@ describe('Pipeline Schedule Callout', () => {
     });
 
     it('is hidden when close button is clicked', done => {
-      calloutComponent.$el.querySelector('#dismiss-callout-btn').click();
+      getByRole(calloutComponent.$el, 'button', /dismiss/i).click();
 
       Vue.nextTick(() => {
         expect(calloutComponent.$el.childNodes.length).toBe(0);