Refactor file names

4 files changed, 107 insertions, 114 deletions

diff --git a/app/assets/javascripts/feature_highlight/feature_highlight.js b/app/assets/javascripts/feature_highlight/feature_highlight.js
index 0dd18405e86..f70f2e5f1a1 100644
--- a/app/assets/javascripts/feature_highlight/feature_highlight.js
+++ b/app/assets/javascripts/feature_highlight/feature_highlight.js
@@ -1,58 +1,56 @@
 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');
-  this.addClass('js-popover-show');
-
-  return true;
+import {
+  getCookieName,
+  getSelector,
+  hidePopover,
+  setupDismissButton,
+  mouseenter,
+  mouseleave,
+} from './feature_highlight_helper';
+
+export const setupFeatureHighlightPopover = (id) => {
+  const $selector = $(getSelector(id));
+  const $parent = $selector.parent();
+  const $popoverContent = $parent.siblings('.feature-highlight-popover-content');
+  const hideOnScroll = hidePopover.bind($selector);
+
+  $selector
+    // Setup popover
+    .data('content', $popoverContent[0].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', mouseleave)
+    .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 hidePopover = function hidePopover() {
-  if (!this.hasClass('js-popover-show')) {
-    return false;
-  }
-  this.popover('hide');
-  this.removeClass('disable-animation');
-  this.removeClass('js-popover-show');
+export const shouldHighlightFeature = (id) => {
+  const element = document.querySelector(getSelector(id));
+  const previouslyDismissed = Cookies.get(getCookieName(id)) === 'true';
 
-  return true;
+  return element && !previouslyDismissed;
 };
 
-export const dismiss = function dismiss(cookieId) {
-  Cookies.set(getCookieName(cookieId), true);
-  hidePopover.call(this);
-  this.hide();
-};
+export const highlightFeatures = (highlightOrder) => {
+  const featureId = highlightOrder.find(shouldHighlightFeature);
 
-export const mouseleave = function mouseleave() {
-  if (!$('.popover:hover').length > 0) {
-    const $featureHighlight = $(this);
-    hidePopover.call($featureHighlight);
+  if (featureId) {
+    setupFeatureHighlightPopover(featureId);
   }
 };
-
-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);
-
-  $(`#${popoverId} .dismiss-feature-highlight`)
-    .on('click', dismiss.bind($popover, cookieId));
-};
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..0dd18405e86
--- /dev/null
+++ b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
@@ -0,0 +1,58 @@
+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');
+  this.addClass('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');
+  this.removeClass('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);
+
+  $(`#${popoverId} .dismiss-feature-highlight`)
+    .on('click', dismiss.bind($popover, cookieId));
+};
diff --git a/app/assets/javascripts/feature_highlight/feature_highlight_manager.js b/app/assets/javascripts/feature_highlight/feature_highlight_manager.js
deleted file mode 100644
index 6baa2fb2c2b..00000000000
--- a/app/assets/javascripts/feature_highlight/feature_highlight_manager.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import Cookies from 'js-cookie';
-import {
-  getCookieName,
-  getSelector,
-  hidePopover,
-  setupDismissButton,
-  mouseenter,
-  mouseleave,
-} from './feature_highlight';
-
-export default class FeatureHighlightManager {
-  constructor(highlightOrder) {
-    this.highlightOrder = highlightOrder;
-  }
-
-  init() {
-    const featureId = this.highlightOrder.find(FeatureHighlightManager.shouldHighlightFeature);
-
-    if (featureId) {
-      FeatureHighlightManager.highlightFeature(featureId);
-    }
-  }
-
-  static shouldHighlightFeature(id) {
-    const element = document.querySelector(getSelector(id));
-    const previouslyDismissed = Cookies.get(getCookieName(id)) === 'true';
-
-    return element && !previouslyDismissed;
-  }
-
-  static highlightFeature(id) {
-    const $selector = $(getSelector(id));
-    const $parent = $selector.parent();
-    const $popoverContent = $parent.siblings('.feature-highlight-popover-content');
-    const hideOnScroll = hidePopover.bind($selector);
-
-    $selector
-      // Setup popover
-      .data('content', $popoverContent[0].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', mouseleave)
-      .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');
-  }
-}
diff --git a/app/assets/javascripts/feature_highlight/feature_highlight_options.js b/app/assets/javascripts/feature_highlight/feature_highlight_options.js
index 51e2eec2165..7895a15c4f9 100644
--- a/app/assets/javascripts/feature_highlight/feature_highlight_options.js
+++ b/app/assets/javascripts/feature_highlight/feature_highlight_options.js
@@ -1,8 +1,7 @@
-import FeatureHighlightManager from './feature_highlight_manager';
+import { highlightFeatures } from './feature_highlight';
 
 const highlightOrder = ['issue-boards'];
 
 document.addEventListener('DOMContentLoaded', () => {
-  const featureHighlight = new FeatureHighlightManager(highlightOrder);
-  featureHighlight.init();
+  highlightFeatures(highlightOrder);
 });