Add feature highlight to Issue Boards in new navigation sidebar

7 files changed, 236 insertions, 7 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));
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 6d7c7e3c930..69a6e131b59 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -102,6 +102,7 @@ import './label_manager';
 import './labels';
 import './labels_select';
 import './layout_nav';
+import './feature_highlight/feature_highlight_options';
 import LazyLoader from './lazy_loader';
 import './line_highlighter';
 import './logo';
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index b2b3297e880..c0524bf6aa3 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -51,3 +51,4 @@
 @import "framework/snippets";
 @import "framework/memory_graph";
 @import "framework/responsive-tables";
+@import "framework/feature_highlight";
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index b4a6b214e98..82350c36df0 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -46,6 +46,15 @@
   }
 }
 
+@mixin btn-svg {
+  svg {
+    height: 15px;
+    width: 15px;
+    position: relative;
+    top: 2px;
+  }
+}
+
 @mixin btn-color($light, $border-light, $normal, $border-normal, $dark, $border-dark, $color) {
   background-color: $light;
   border-color: $border-light;
@@ -123,6 +132,7 @@
 .btn {
   @include btn-default;
   @include btn-white;
+  @include btn-svg;
 
   color: $gl-text-color;
 
@@ -222,13 +232,6 @@
     }
   }
 
-  svg {
-    height: 15px;
-    width: 15px;
-    position: relative;
-    top: 2px;
-  }
-
   svg,
   .fa {
     &:not(:last-child) {
diff --git a/app/assets/stylesheets/framework/feature_highlight.scss b/app/assets/stylesheets/framework/feature_highlight.scss
new file mode 100644
index 00000000000..ebae473df50
--- /dev/null
+++ b/app/assets/stylesheets/framework/feature_highlight.scss
@@ -0,0 +1,94 @@
+.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;
+    height: 8px;
+    background-color: $blue-500;
+    border-radius: 50%;
+    box-shadow: 0 0 0 rgba($blue-500, 0.4);
+    animation: pulse-highlight 2s infinite;
+  }
+
+  &:hover::before,
+  &.disable-animation::before {
+    animation: none;
+  }
+
+  &[disabled]::before {
+    display: none;
+  }
+}
+
+.is-showing-fly-out {
+  .feature-highlight {
+    display: none;
+  }
+}
+
+.feature-highlight-popover-content {
+  display: none;
+
+  hr {
+    margin: $gl-padding * 0.5 0;
+  }
+
+  .btn-link {
+    @include btn-svg;
+
+    svg path {
+      fill: currentColor;
+    }
+  }
+
+  .dismiss-feature-highlight {
+    padding: 0;
+  }
+
+  svg:first-child {
+    width: 100%;
+    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-popover {
+  padding: 0;
+
+  .popover-content {
+    padding: 0;
+  }
+}
+
+.feature-highlight-popover-sub-content {
+  padding: 9px 14px;
+}
+
+@include keyframes(pulse-highlight) {
+  0% {
+    box-shadow: 0 0 0 0 rgba($blue-200, 0.4);
+  }
+
+  70% {
+    box-shadow: 0 0 0 10px transparent;
+  }
+
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+}