Merge branch '227259-migrate-feature-highlight-popover-to-gitlab-ui' into 'master'

Migrate feature highlight to Vue

See merge request gitlab-org/gitlab!53487

app/assets/javascripts/feature_highlight/feature_highlight.js

-import $ from 'jquery';
-import { togglePopover, mouseenter, debouncedMouseleave } from '../shared/popover';
-import { getSelector, inserted } from './feature_highlight_helper';
-
-export function setupFeatureHighlightPopover(id, debounceTimeout = 300) {
-  const $selector = $(getSelector(id));
-  const $parent = $selector.parent();
-  const $popoverContent = $parent.siblings('.feature-highlight-popover-content');
-  const hideOnScroll = togglePopover.bind($selector, false);
-
-  $selector
-    // Set up popover
-    .data('content', $popoverContent.prop('outerHTML'))
-    .popover({
-      html: true,
-      // Override the existing template to add custom CSS classes
-      template: `
-        <div class="popover feature-highlight-popover" role="tooltip">
-          <div class="arrow"></div>
-          <div class="popover-body"></div>
-        </div>
-      `,
-    })
-    .on('mouseenter', mouseenter)
-    .on('mouseleave', debouncedMouseleave(debounceTimeout))
-    .on('inserted.bs.popover', inserted)
-    .on('show.bs.popover', () => {
-      window.addEventListener('scroll', hideOnScroll, { once: true });
-    })
-    // Display feature highlight
-    .removeAttr('disabled');
-}
-
-const getPriority = (e) => parseInt(e.dataset.highlightPriority, 10) || 0;
-
-export function findHighestPriorityFeature() {
-  let priorityFeature;
-
-  const sortedFeatureEls = [].slice
-    .call(document.querySelectorAll('.js-feature-highlight'))
-    .sort((a, b) => getPriority(b) - getPriority(a));
-
-  const [priorityFeatureEl] = sortedFeatureEls;
-  if (priorityFeatureEl) {
-    priorityFeature = priorityFeatureEl.dataset.highlight;
-  }
-
-  return priorityFeature;
-}
-
-export function highlightFeatures() {
-  const priorityFeature = findHighestPriorityFeature();
-
-  if (priorityFeature) {
-    setupFeatureHighlightPopover(priorityFeature);
-  }
-
-  return priorityFeature;
-}

app/assets/javascripts/feature_highlight/feature_highlight_helper.js

-import $ from 'jquery';
-import { deprecatedCreateFlash as Flash } from '../flash';
-import LazyLoader from '../lazy_loader';
+import { deprecatedCreateFlash as Flash } from '~/flash';
 import axios from '../lib/utils/axios_utils';
 import { __ } from '../locale';
-import { togglePopover } from '../shared/popover';
 
 export const getSelector = (highlightId) => `.js-feature-highlight[data-highlight=${highlightId}]`;
 
-export function dismiss(highlightId) {
-  axios
-    .post(this.attr('data-dismiss-endpoint'), {
+export function dismiss(endpoint, highlightId) {
+  return axios
+    .post(endpoint, {
       feature_name: highlightId,
     })
     .catch(() =>
@@ -19,21 +16,4 @@ export function dismiss(highlightId) {
         ),
       ),
     );
-
-  togglePopover.call(this, false);
-  this.hide();
-}
-
-export function inserted() {
-  const popoverId = this.getAttribute('aria-describedby');
-  const highlightId = this.dataset.highlight;
-  const $popover = $(this);
-  const dismissWrapper = dismiss.bind($popover, highlightId);
-
-  $(`#${popoverId} .dismiss-feature-highlight`).on('click', dismissWrapper);
-
-  const lazyImg = $(`#${popoverId} .feature-highlight-illustration`)[0];
-  if (lazyImg) {
-    LazyLoader.loadImage(lazyImg);
-  }
 }

app/assets/javascripts/feature_highlight/feature_highlight_options.js

-import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
-import { highlightFeatures } from './feature_highlight';
-
-export default function domContentLoaded() {
-  if (bp.getBreakpointSize() === 'xl') {
-    highlightFeatures();
-    return true;
-  }
-  return false;
-}
-
-document.addEventListener('DOMContentLoaded', domContentLoaded);

app/assets/javascripts/main.js

@@ -27,7 +27,7 @@ import { localTimeAgo } from './lib/utils/datetime_utility';
 import { getLocationHash, visitUrl } from './lib/utils/url_utility';
 
 // everything else
-import './feature_highlight/feature_highlight_options';
+import initFeatureHighlight from './feature_highlight';
 import LazyLoader from './lazy_loader';
 import { __ } from './locale';
 import initLogoAnimation from './logo';
@@ -114,6 +114,7 @@ function deferredInitialisation() {
   initFrequentItemDropdowns();
   initPersistentUserCallouts();
   initDefaultTrackers();
+  initFeatureHighlight();
 
   const search = document.querySelector('#search');
   if (search) {

app/assets/stylesheets/framework/feature_highlight.scss

 .feature-highlight {
-  position: relative;
-  margin-left: $gl-padding;
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-
   &::before {
     content: '';
     display: block;
-    position: absolute;
     top: 6px;
     left: 6px;
     width: 8px;
@@ -29,56 +22,22 @@
   }
 }
 
-.feature-highlight-popover-content {
-  display: none;
-
-  hr {
-    margin: $gl-padding 0;
-  }
-
-  .btn-link {
-    svg {
-      @include btn-svg;
-
-      path {
-        fill: currentColor;
-      }
-    }
-  }
-
-  .feature-highlight-illustration {
-    width: 100%;
-    height: 100px;
-    padding-top: 12px;
-    padding-bottom: 12px;
 
-    background-color: $indigo-50;
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
-    border-bottom: 1px solid darken($gray-normal, 8%);
-  }
-}
-
-.popover .feature-highlight-popover-content {
-  display: block;
+.feature-highlight-illustration {
+  background-color: $indigo-50;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  border-bottom: 1px solid darken($gray-normal, 8%);
 }
 
 .feature-highlight-popover {
   width: 240px;
 
-  &.right > .arrow {
-    border-right-color: $border-color;
-  }
-
   .popover-body {
     padding: 0;
   }
 }
 
-.feature-highlight-popover-sub-content {
-  padding: $gl-padding $gl-padding-12;
-}
-
 @include keyframes(pulse-highlight) {
   0% {
     box-shadow: 0 0 0 0 rgba($blue-200, 0.4);

app/views/layouts/nav/sidebar/_project.html.haml

@@ -284,27 +284,14 @@
                   %span
                     = _('Kubernetes')
                   - if show_cluster_hint
-                    .feature-highlight.js-feature-highlight{ disabled: true,
+                    .js-feature-highlight{ disabled: true,
                       data: { trigger: 'manual',
                         container: 'body',
                         placement: 'right',
                         highlight: UserCalloutsHelper::GKE_CLUSTER_INTEGRATION,
                         highlight_priority: UserCallout.feature_names[:GKE_CLUSTER_INTEGRATION],
-                        dismiss_endpoint: user_callouts_path } }
-                - if show_cluster_hint
-                  .feature-highlight-popover-content
-                    = image_tag 'illustrations/cluster_popover.svg', class: 'feature-highlight-illustration', lazy: false, alt: _('Kubernetes popover')
-                    .feature-highlight-popover-sub-content
-                      %p= _('Allows you to add and manage Kubernetes clusters.')
-                      %p
-                        = _('Protip:')
-                        = link_to _('Auto DevOps'), help_page_path('topics/autodevops/index.md')
-                        %span= _('uses Kubernetes clusters to deploy your code!')
-                      %hr
-                      %button.gl-button.btn.btn-success.btn-sm.dismiss-feature-highlight{ type: 'button' }
-                        %span.gl-mr-2= _("Got it!")
-                        = sprite_icon('thumb-up')
-
+                        dismiss_endpoint: user_callouts_path,
+                        auto_devops_help_path: help_page_path('topics/autodevops/index.md') } }
             - if project_nav_tab? :environments
               = nav_link(controller: :environments, action: [:index, :folder, :show, :new, :edit, :create, :update, :stop, :terminal]) do
                 = link_to project_environments_path(@project), title: _('Environments'), class: 'shortcuts-environments qa-operations-environments-link' do

locale/gitlab.pot

@@ -17135,9 +17135,6 @@ msgstr ""
 msgid "Kubernetes error: %{error_code}"
 msgstr ""
 
-msgid "Kubernetes popover"
-msgstr ""
-
 msgid "LDAP"
 msgstr ""
 
@@ -23979,9 +23976,6 @@ msgstr ""
 msgid "ProtectedEnvironment|Your environment has been unprotected"
 msgstr ""
 
-msgid "Protip:"
-msgstr ""
-
 msgid "Protip: %{linkStart}Auto DevOps%{linkEnd} uses Kubernetes clusters to deploy your code!"
 msgstr ""
 
@@ -35645,9 +35639,6 @@ msgstr ""
 msgid "username"
 msgstr ""
 
-msgid "uses Kubernetes clusters to deploy your code!"
-msgstr ""
-
 msgid "v%{version} published %{timeAgo}"
 msgstr ""
 

spec/frontend/feature_highlight/feature_highlight_helper_spec.js

-import $ from 'jquery';
-import { getSelector, dismiss, inserted } from '~/feature_highlight/feature_highlight_helper';
+import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
-import { togglePopover } from '~/shared/popover';
+import { dismiss } from '~/feature_highlight/feature_highlight_helper';
+import { deprecatedCreateFlash as Flash } from '~/flash';
+import httpStatusCodes from '~/lib/utils/http_status';
 
-describe('feature highlight helper', () => {
-  describe('getSelector', () => {
-    it('returns js-feature-highlight selector', () => {
-      const highlightId = 'highlightId';
-
-      expect(getSelector(highlightId)).toEqual(
-        `.js-feature-highlight[data-highlight=${highlightId}]`,
-      );
-    });
-  });
+jest.mock('~/flash');
 
+describe('feature highlight helper', () => {
   describe('dismiss', () => {
-    const context = {
-      hide: () => {},
-      attr: () => '/-/callouts/dismiss',
-    };
+    let mockAxios;
+    const endpoint = '/-/callouts/dismiss';
+    const highlightId = '123';
+    const { CREATED, INTERNAL_SERVER_ERROR } = httpStatusCodes;
 
     beforeEach(() => {
-      jest.spyOn(axios, 'post').mockResolvedValue();
-      jest.spyOn(togglePopover, 'call').mockImplementation(() => {});
-      jest.spyOn(context, 'hide').mockImplementation(() => {});
-      dismiss.call(context);
+      mockAxios = new MockAdapter(axios);
     });
 
-    it('calls persistent dismissal endpoint', () => {
-      expect(axios.post).toHaveBeenCalledWith(
-        '/-/callouts/dismiss',
-        expect.objectContaining({ feature_name: undefined }),
-      );
+    afterEach(() => {
+      mockAxios.reset();
     });
 
-    it('calls hide popover', () => {
-      expect(togglePopover.call).toHaveBeenCalledWith(context, false);
-    });
+    it('calls persistent dismissal endpoint with highlightId', async () => {
+      mockAxios.onPost(endpoint, { feature_name: highlightId }).replyOnce(CREATED);
 
-    it('calls hide', () => {
-      expect(context.hide).toHaveBeenCalled();
+      await expect(dismiss(endpoint, highlightId)).resolves.toEqual(expect.anything());
     });
-  });
 
-  describe('inserted', () => {
-    it('registers click event callback', (done) => {
-      const context = {
-        getAttribute: () => 'popoverId',
-        dataset: {
-          highlight: 'some-feature',
-        },
-      };
-
-      jest.spyOn($.fn, 'on').mockImplementation((event) => {
-        expect(event).toEqual('click');
-        done();
-      });
-      inserted.call(context);
+    it('triggers flash when dismiss request fails', async () => {
+      mockAxios.onPost(endpoint, { feature_name: highlightId }).replyOnce(INTERNAL_SERVER_ERROR);
+
+      await dismiss(endpoint, highlightId);
+
+      expect(Flash).toHaveBeenCalledWith(
+        'An error occurred while dismissing the feature highlight. Refresh the page and try dismissing again.',
+      );
     });
   });
 });

spec/frontend/feature_highlight/feature_highlight_options_spec.js

-import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
-import domContentLoaded from '~/feature_highlight/feature_highlight_options';
-
-describe('feature highlight options', () => {
-  describe('domContentLoaded', () => {
-    it.each`
-      breakPoint | shouldCall
-      ${'xs'}    | ${false}
-      ${'sm'}    | ${false}
-      ${'md'}    | ${false}
-      ${'lg'}    | ${false}
-      ${'xl'}    | ${true}
-    `(
-      'when breakpoint is $breakPoint should call highlightFeatures is $shouldCall',
-      ({ breakPoint, shouldCall }) => {
-        jest.spyOn(bp, 'getBreakpointSize').mockReturnValue(breakPoint);
-
-        expect(domContentLoaded()).toBe(shouldCall);
-      },
-    );
-  });
-});

spec/frontend/feature_highlight/feature_highlight_spec.js

-import MockAdapter from 'axios-mock-adapter';
-import $ from 'jquery';
-import * as featureHighlight from '~/feature_highlight/feature_highlight';
-import axios from '~/lib/utils/axios_utils';
-import * as popover from '~/shared/popover';
-
-jest.mock('~/shared/popover');
-
-describe('feature highlight', () => {
-  beforeEach(() => {
-    setFixtures(`
-      <div>
-        <div class="js-feature-highlight" data-highlight="test" data-highlight-priority="10" data-dismiss-endpoint="/test" disabled>
-          Trigger
-        </div>
-      </div>
-      <div class="feature-highlight-popover-content">
-        Content
-        <div class="dismiss-feature-highlight">
-          Dismiss
-        </div>
-      </div>
-    `);
-  });
-
-  describe('setupFeatureHighlightPopover', () => {
-    let mock;
-    const selector = '.js-feature-highlight[data-highlight=test]';
-
-    beforeEach(() => {
-      mock = new MockAdapter(axios);
-      mock.onGet('/test').reply(200);
-      jest.spyOn(window, 'addEventListener').mockImplementation(() => {});
-      featureHighlight.setupFeatureHighlightPopover('test', 0);
-    });
-
-    afterEach(() => {
-      mock.restore();
-    });
-
-    it('setup popover content', () => {
-      const $popoverContent = $('.feature-highlight-popover-content');
-      const outerHTML = $popoverContent.prop('outerHTML');
-
-      expect($(selector).data('content')).toEqual(outerHTML);
-    });
-
-    it('setup mouseenter', () => {
-      $(selector).trigger('mouseenter');
-
-      expect(popover.mouseenter).toHaveBeenCalledWith(expect.any(Object));
-    });
-
-    it('setup debounced mouseleave', () => {
-      $(selector).trigger('mouseleave');
-
-      expect(popover.debouncedMouseleave).toHaveBeenCalled();
-    });
-
-    it('setup show.bs.popover', () => {
-      $(selector).trigger('show.bs.popover');
-
-      expect(window.addEventListener).toHaveBeenCalledWith('scroll', expect.any(Function), {
-        once: true,
-      });
-    });
-
-    it('removes disabled attribute', () => {
-      expect($('.js-feature-highlight').is(':disabled')).toEqual(false);
-    });
-  });
-
-  describe('findHighestPriorityFeature', () => {
-    beforeEach(() => {
-      setFixtures(`
-        <div class="js-feature-highlight" data-highlight="test" data-highlight-priority="10" disabled></div>
-        <div class="js-feature-highlight" data-highlight="test-high-priority" data-highlight-priority="20" disabled></div>
-        <div class="js-feature-highlight" data-highlight="test-low-priority" data-highlight-priority="0" disabled></div>
-      `);
-    });
-
-    it('should pick the highest priority feature highlight', () => {
-      setFixtures(`
-        <div class="js-feature-highlight" data-highlight="test" data-highlight-priority="10" disabled></div>
-        <div class="js-feature-highlight" data-highlight="test-high-priority" data-highlight-priority="20" disabled></div>
-        <div class="js-feature-highlight" data-highlight="test-low-priority" data-highlight-priority="0" disabled></div>
-      `);
-
-      expect($('.js-feature-highlight').length).toBeGreaterThan(1);
-      expect(featureHighlight.findHighestPriorityFeature()).toEqual('test-high-priority');
-    });
-
-    it('should work when no priority is set', () => {
-      setFixtures(`
-        <div class="js-feature-highlight" data-highlight="test" disabled></div>
-      `);
-
-      expect(featureHighlight.findHighestPriorityFeature()).toEqual('test');
-    });
-
-    it('should pick the highest priority feature highlight when some have no priority set', () => {
-      setFixtures(`
-        <div class="js-feature-highlight" data-highlight="test-no-priority1" disabled></div>
-        <div class="js-feature-highlight" data-highlight="test" data-highlight-priority="10" disabled></div>
-        <div class="js-feature-highlight" data-highlight="test-no-priority2" disabled></div>
-        <div class="js-feature-highlight" data-highlight="test-high-priority" data-highlight-priority="20" disabled></div>
-        <div class="js-feature-highlight" data-highlight="test-low-priority" data-highlight-priority="0" disabled></div>
-      `);
-
-      expect($('.js-feature-highlight').length).toBeGreaterThan(1);
-      expect(featureHighlight.findHighestPriorityFeature()).toEqual('test-high-priority');
-    });
-  });
-
-  describe('highlightFeatures', () => {
-    it('calls setupFeatureHighlightPopover', () => {
-      expect(featureHighlight.highlightFeatures()).toEqual('test');
-    });
-  });
-});