Add latest changes from gitlab-org/gitlab@master

6 files changed, 49 insertions, 90 deletions

diff --git a/app/assets/javascripts/jobs/store/actions.js b/app/assets/javascripts/jobs/store/actions.js
index 6da8f8b455e..e76a3693db9 100644
--- a/app/assets/javascripts/jobs/store/actions.js
+++ b/app/assets/javascripts/jobs/store/actions.js
@@ -2,7 +2,7 @@ import Visibility from 'visibilityjs';
 import * as types from './mutation_types';
 import axios from '~/lib/utils/axios_utils';
 import Poll from '~/lib/utils/poll';
-import { setFaviconOverlay, resetFavicon } from '~/lib/utils/common_utils';
+import { setFaviconOverlay, resetFavicon } from '~/lib/utils/favicon';
 import { deprecatedCreateFlash as flash } from '~/flash';
 import { __ } from '~/locale';
 import {
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index 1c8cb423828..128ef5b335e 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -6,7 +6,6 @@ import { GlBreakpointInstance as breakpointInstance } from '@gitlab/ui/dist/util
 import $ from 'jquery';
 import { isFunction, defer } from 'lodash';
 import Cookies from 'js-cookie';
-import axios from './axios_utils';
 import { getLocationHash } from './url_utility';
 import { convertToCamelCase, convertToSnakeCase } from './text_utility';
 import { isObject } from './type_utility';
@@ -548,92 +547,6 @@ export const backOff = (fn, timeout = 60000) => {
   });
 };
 
-export const createOverlayIcon = (iconPath, overlayPath) => {
-  const faviconImage = document.createElement('img');
-
-  return new Promise((resolve) => {
-    faviconImage.onload = () => {
-      const size = 32;
-
-      const canvas = document.createElement('canvas');
-      canvas.width = size;
-      canvas.height = size;
-
-      const context = canvas.getContext('2d');
-      context.clearRect(0, 0, size, size);
-      context.drawImage(
-        faviconImage,
-        0,
-        0,
-        faviconImage.width,
-        faviconImage.height,
-        0,
-        0,
-        size,
-        size,
-      );
-
-      const overlayImage = document.createElement('img');
-      overlayImage.onload = () => {
-        context.drawImage(
-          overlayImage,
-          0,
-          0,
-          overlayImage.width,
-          overlayImage.height,
-          0,
-          0,
-          size,
-          size,
-        );
-
-        const faviconWithOverlayUrl = canvas.toDataURL();
-
-        resolve(faviconWithOverlayUrl);
-      };
-      overlayImage.src = overlayPath;
-    };
-    faviconImage.src = iconPath;
-  });
-};
-
-export const setFaviconOverlay = (overlayPath) => {
-  const faviconEl = document.getElementById('favicon');
-
-  if (!faviconEl) {
-    return null;
-  }
-
-  const iconPath = faviconEl.getAttribute('data-original-href');
-
-  return createOverlayIcon(iconPath, overlayPath).then((faviconWithOverlayUrl) =>
-    faviconEl.setAttribute('href', faviconWithOverlayUrl),
-  );
-};
-
-export const resetFavicon = () => {
-  const faviconEl = document.getElementById('favicon');
-
-  if (faviconEl) {
-    const originalFavicon = faviconEl.getAttribute('data-original-href');
-    faviconEl.setAttribute('href', originalFavicon);
-  }
-};
-
-export const setCiStatusFavicon = (pageUrl) =>
-  axios
-    .get(pageUrl)
-    .then(({ data }) => {
-      if (data && data.favicon) {
-        return setFaviconOverlay(data.favicon);
-      }
-      return resetFavicon();
-    })
-    .catch((error) => {
-      resetFavicon();
-      throw error;
-    });
-
 export const spriteIcon = (icon, className = '') => {
   const classAttribute = className.length > 0 ? `class="${className}"` : '';
 
diff --git a/app/assets/javascripts/lib/utils/favicon.js b/app/assets/javascripts/lib/utils/favicon.js
new file mode 100644
index 00000000000..47596a76306
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/favicon.js
@@ -0,0 +1,30 @@
+import { FaviconOverlayManager } from '@gitlab/favicon-overlay';
+import { memoize } from 'lodash';
+
+// FaviconOverlayManager is a glorious singleton/static class. Let's start to encapsulate that with this helper.
+const getDefaultFaviconManager = memoize(async () => {
+  await FaviconOverlayManager.initialize({ faviconSelector: '#favicon' });
+
+  return FaviconOverlayManager;
+});
+
+export const setFaviconOverlay = async (path) => {
+  const manager = await getDefaultFaviconManager();
+
+  manager.setFaviconOverlay(path);
+};
+
+export const resetFavicon = async () => {
+  const manager = await getDefaultFaviconManager();
+
+  manager.resetFaviconOverlay();
+};
+
+/**
+ * Clears the cached memoization of the default manager.
+ *
+ * This is needed for determinism in tests.
+ */
+export const clearMemoizeCache = () => {
+  getDefaultFaviconManager.cache.clear();
+};
diff --git a/app/assets/javascripts/lib/utils/favicon_ci.js b/app/assets/javascripts/lib/utils/favicon_ci.js
new file mode 100644
index 00000000000..613e2620e02
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/favicon_ci.js
@@ -0,0 +1,16 @@
+import axios from './axios_utils';
+import { setFaviconOverlay, resetFavicon } from './favicon';
+
+export const setCiStatusFavicon = (pageUrl) =>
+  axios
+    .get(pageUrl)
+    .then(({ data }) => {
+      if (data && data.favicon) {
+        return setFaviconOverlay(data.favicon);
+      }
+      return resetFavicon();
+    })
+    .catch((error) => {
+      resetFavicon();
+      throw error;
+    });
diff --git a/app/assets/javascripts/pipelines.js b/app/assets/javascripts/pipelines.js
index 07abe714367..3b4e8d0e019 100644
--- a/app/assets/javascripts/pipelines.js
+++ b/app/assets/javascripts/pipelines.js
@@ -1,5 +1,5 @@
 import LinkedTabs from './lib/utils/bootstrap_linked_tabs';
-import { setCiStatusFavicon } from './lib/utils/common_utils';
+import { setCiStatusFavicon } from './lib/utils/favicon_ci';
 
 export default class Pipelines {
   constructor(options = {}) {
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index a620e155ff5..cebbc7f2466 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -43,7 +43,7 @@ import SourceBranchRemovalStatus from './components/source_branch_removal_status
 import TerraformPlan from './components/terraform/mr_widget_terraform_container.vue';
 import GroupedCodequalityReportsApp from '../reports/codequality_report/grouped_codequality_reports_app.vue';
 import GroupedTestReportsApp from '../reports/components/grouped_test_reports_app.vue';
-import { setFaviconOverlay } from '../lib/utils/common_utils';
+import { setFaviconOverlay } from '../lib/utils/favicon';
 import GroupedAccessibilityReportsApp from '../reports/accessibility_report/grouped_accessibility_reports_app.vue';
 import getStateQuery from './queries/get_state.query.graphql';