Add feature highlight to Issue Boards in new navigation sidebar

3 files changed, 130 insertions, 0 deletions

diff --git a/app/assets/javascripts/feature_highlight/feature_highlight.js b/app/assets/javascripts/feature_highlight/feature_highlight.js
new file mode 100644
index 00000000000..800ca05cd11
--- /dev/null
+++ b/app/assets/javascripts/feature_highlight/feature_highlight.js
@@ -0,0 +1,61 @@
+import Cookies from 'js-cookie';
+import _ from 'underscore';
+import {
+  getCookieName,
+  getSelector,
+  hidePopover,
+  setupDismissButton,
+  mouseenter,
+  mouseleave,
+} from './feature_highlight_helper';
+
+export const setupFeatureHighlightPopover = (id, debounceTimeout = 300) => {
+  const $selector = $(getSelector(id));
+  const $parent = $selector.parent();
+  const $popoverContent = $parent.siblings('.feature-highlight-popover-content');
+  const hideOnScroll = hidePopover.bind($selector);
+  const debouncedMouseleave = _.debounce(mouseleave, debounceTimeout);
+
+  $selector
+    // Setup 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-content"></div>
+        </div>
+      `,
+    })
+    .on('mouseenter', mouseenter)
+    .on('mouseleave', debouncedMouseleave)
+    .on('inserted.bs.popover', setupDismissButton)
+    .on('show.bs.popover', () => {
+      window.addEventListener('scroll', hideOnScroll);
+    })
+    .on('hide.bs.popover', () => {
+      window.removeEventListener('scroll', hideOnScroll);
+    })
+    // Display feature highlight
+    .removeAttr('disabled');
+};
+
+export const shouldHighlightFeature = (id) => {
+  const element = document.querySelector(getSelector(id));
+  const previouslyDismissed = Cookies.get(getCookieName(id)) === 'true';
+
+  return element && !previouslyDismissed;
+};
+
+export const highlightFeatures = (highlightOrder) => {
+  const featureId = highlightOrder.find(shouldHighlightFeature);
+
+  if (featureId) {
+    setupFeatureHighlightPopover(featureId);
+    return true;
+  }
+
+  return false;
+};
diff --git a/app/assets/javascripts/feature_highlight/feature_highlight_helper.js b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
new file mode 100644
index 00000000000..9f741355cd7
--- /dev/null
+++ b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
@@ -0,0 +1,57 @@
+import Cookies from 'js-cookie';
+
+export const getCookieName = cookieId => `feature-highlighted-${cookieId}`;
+export const getSelector = highlightId => `.js-feature-highlight[data-highlight=${highlightId}]`;
+
+export const showPopover = function showPopover() {
+  if (this.hasClass('js-popover-show')) {
+    return false;
+  }
+  this.popover('show');
+  this.addClass('disable-animation js-popover-show');
+
+  return true;
+};
+
+export const hidePopover = function hidePopover() {
+  if (!this.hasClass('js-popover-show')) {
+    return false;
+  }
+  this.popover('hide');
+  this.removeClass('disable-animation js-popover-show');
+
+  return true;
+};
+
+export const dismiss = function dismiss(cookieId) {
+  Cookies.set(getCookieName(cookieId), true);
+  hidePopover.call(this);
+  this.hide();
+};
+
+export const mouseleave = function mouseleave() {
+  if (!$('.popover:hover').length > 0) {
+    const $featureHighlight = $(this);
+    hidePopover.call($featureHighlight);
+  }
+};
+
+export const mouseenter = function mouseenter() {
+  const $featureHighlight = $(this);
+
+  const showedPopover = showPopover.call($featureHighlight);
+  if (showedPopover) {
+    $('.popover')
+      .on('mouseleave', mouseleave.bind($featureHighlight));
+  }
+};
+
+export const setupDismissButton = function setupDismissButton() {
+  const popoverId = this.getAttribute('aria-describedby');
+  const cookieId = this.dataset.highlight;
+  const $popover = $(this);
+  const dismissWrapper = dismiss.bind($popover, cookieId);
+
+  $(`#${popoverId} .dismiss-feature-highlight`)
+    .on('click', dismissWrapper);
+};
diff --git a/app/assets/javascripts/feature_highlight/feature_highlight_options.js b/app/assets/javascripts/feature_highlight/feature_highlight_options.js
new file mode 100644
index 00000000000..fd48f2e87cc
--- /dev/null
+++ b/app/assets/javascripts/feature_highlight/feature_highlight_options.js
@@ -0,0 +1,12 @@
+import { highlightFeatures } from './feature_highlight';
+import bp from '../breakpoints';
+
+const highlightOrder = ['issue-boards'];
+
+export default function domContentLoaded(order) {
+  if (bp.getBreakpointSize() === 'lg') {
+    highlightFeatures(order);
+  }
+}
+
+document.addEventListener('DOMContentLoaded', domContentLoaded.bind(this, highlightOrder));