Merge branch 'gitlab-ui-integration-1674-popover-close-button' into 'master'

Migrate to built-in popover's close button

See merge request gitlab-org/gitlab!78932

ee/app/assets/javascripts/contextual_sidebar/components/trial_status_popover.vue

@@ -52,7 +52,6 @@ export default {
     return {
       disabled: false,
       forciblyShowing: false,
-      showCloseButton: false,
       show: false,
     };
   },
@@ -85,7 +84,6 @@ export default {
 
     if (this.startInitiallyShown) {
       this.forciblyShowing = true;
-      this.showCloseButton = true;
       this.show = true;
       this.onForciblyShown();
     }
@@ -103,7 +101,6 @@ export default {
     },
     onClose() {
       this.forciblyShowing = false;
-      this.show = false;
       this.trackPageAction('closeBtnClick');
     },
     onForciblyShown() {
@@ -141,21 +138,13 @@ export default {
     placement="rightbottom"
     boundary="viewport"
     :delay="{ hide: 400 }"
-    :show.sync="show"
+    :show="show"
     :triggers="forciblyShowing ? '' : 'hover focus'"
+    :show-close-button="startInitiallyShown"
     @shown="onShown"
+    @close-button-clicked.prevent="onClose"
   >
     <template #title>
-      <gl-button
-        v-if="showCloseButton"
-        category="tertiary"
-        class="close"
-        data-testid="closeBtn"
-        :aria-label="$options.i18n.close"
-        @click.prevent="onClose"
-      >
-        <span class="gl-display-inline-block" aria-hidden="true">&times;</span>
-      </gl-button>
       {{ $options.i18n.popoverTitle }}
       <gl-emoji class="gl-vertical-align-baseline gl-font-size-inherit gl-ml-1" data-name="wave" />
     </template>

ee/spec/frontend/contextual_sidebar/trial_status_popover_spec.js

@@ -44,7 +44,6 @@ describe('TrialStatusPopover component', () => {
           planName: 'Ultimate',
           plansHref: 'billing/path-for/group',
           purchaseHref: 'transactions/new',
-          startInitiallyShown: undefined,
           targetId: 'target-element-identifier',
           trialEndDate: new Date('2021-02-28'),
           userCalloutsPath: undefined,
@@ -207,16 +206,24 @@ describe('TrialStatusPopover component', () => {
         wrapper = createComponent({ providers: { startInitiallyShown: true }, mountFn: mount });
       });
 
-      it('is rendered', () => {
-        expect(wrapper.findByTestId('closeBtn').exists()).toBeTruthy();
+      it('is enabled', () => {
+        expect(findGlPopover().props('showCloseButton')).toBe(true);
       });
 
       describe('when clicked', () => {
+        const preventDefault = jest.fn();
+
         beforeEach(async () => {
-          wrapper.findByTestId('closeBtn').trigger('click');
+          findGlPopover().vm.$emit('close-button-clicked', {
+            preventDefault,
+          });
           await nextTick();
         });
 
+        it("calls `preventDefault` so user doesn't trigger the anchor tag", () => {
+          expect(preventDefault).toHaveBeenCalled();
+        });
+
         it('closes the popover component', () => {
           expect(findGlPopover().props('show')).toBeFalsy();
         });
@@ -226,14 +233,14 @@ describe('TrialStatusPopover component', () => {
         });
 
         it('continues to be shown in the popover', () => {
-          expect(wrapper.findByTestId('closeBtn').exists()).toBeTruthy();
+          expect(findGlPopover().props('showCloseButton')).toBe(true);
         });
       });
     });
 
     describe('when the popover does not start off forcibly shown', () => {
       it('is not rendered', () => {
-        expect(wrapper.findByTestId('closeBtn').exists()).toBeFalsy();
+        expect(findGlPopover().props('showCloseButton')).toBe(false);
       });
     });
   });

spec/frontend/__mocks__/@gitlab/ui.js

@@ -41,10 +41,15 @@ jest.mock('@gitlab/ui/dist/components/base/popover/popover.js', () => ({
       default: () => [],
     },
     ...Object.fromEntries(
-      ['title', 'target', 'triggers', 'placement', 'boundary', 'container'].map((prop) => [
-        prop,
-        {},
-      ]),
+      [
+        'title',
+        'target',
+        'triggers',
+        'placement',
+        'boundary',
+        'container',
+        'showCloseButton',
+      ].map((prop) => [prop, {}]),
     ),
   },
   render(h) {