Merge branch 'revert-feature-highlight' into 'master'

Revert feature highlight

Closes #38087

See merge request gitlab-org/gitlab-ce!14373

7 files changed, 7 insertions, 236 deletions

diff --git a/app/assets/javascripts/feature_highlight/feature_highlight.js b/app/assets/javascripts/feature_highlight/feature_highlight.js
deleted file mode 100644
index 800ca05cd11..00000000000
--- a/app/assets/javascripts/feature_highlight/feature_highlight.js
+++ /dev/null
@@ -1,61 +0,0 @@
-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
deleted file mode 100644
index 9f741355cd7..00000000000
--- a/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
+++ /dev/null
@@ -1,57 +0,0 @@
-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
deleted file mode 100644
index fd48f2e87cc..00000000000
--- a/app/assets/javascripts/feature_highlight/feature_highlight_options.js
+++ /dev/null
@@ -1,12 +0,0 @@
-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 0f84470828a..c2a104df749 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -101,7 +101,6 @@ 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 35e7a10379f..923d14f2c3d 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -52,4 +52,3 @@
 @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 4f208df4216..d178bc17462 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -46,15 +46,6 @@
   }
 }
 
-@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;
@@ -132,7 +123,6 @@
 .btn {
   @include btn-default;
   @include btn-white;
-  @include btn-svg;
 
   color: $gl-text-color;
 
@@ -231,6 +221,13 @@
     }
   }
 
+  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
deleted file mode 100644
index ebae473df50..00000000000
--- a/app/assets/stylesheets/framework/feature_highlight.scss
+++ /dev/null
@@ -1,94 +0,0 @@
-.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;
-  }
-}