Add latest changes from gitlab-org/gitlab@master

30 files changed, 106 insertions, 100 deletions

diff --git a/app/assets/javascripts/activities.js b/app/assets/javascripts/activities.js
index f45af5fe08e..74e0e1b6225 100644
--- a/app/assets/javascripts/activities.js
+++ b/app/assets/javascripts/activities.js
@@ -1,7 +1,7 @@
 /* eslint-disable class-methods-use-this */
 
 import $ from 'jquery';
-import Cookies from 'js-cookie';
+import { setCookie } from '~/lib/utils/common_utils';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
 import { localTimeAgo } from './lib/utils/datetime_utility';
@@ -55,7 +55,7 @@ export default class Activities {
     const filter = $sender.attr('id').split('_')[0];
 
     $('.event-filter .active').removeClass('active');
-    Cookies.set('event_filter', filter);
+    setCookie('event_filter', filter);
 
     $sender.closest('li').toggleClass('active');
   }
diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js
index 43ca5b5cf89..aa735df7da5 100644
--- a/app/assets/javascripts/awards_handler.js
+++ b/app/assets/javascripts/awards_handler.js
@@ -2,10 +2,10 @@
 
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import $ from 'jquery';
-import Cookies from 'js-cookie';
 import { uniq } from 'lodash';
+import { getCookie, setCookie, scrollToElement } from '~/lib/utils/common_utils';
 import * as Emoji from '~/emoji';
-import { scrollToElement } from '~/lib/utils/common_utils';
+
 import { dispose, fixTitle } from '~/tooltips';
 import createFlash from './flash';
 import axios from './lib/utils/axios_utils';
@@ -506,7 +506,7 @@ export class AwardsHandler {
   addEmojiToFrequentlyUsedList(emoji) {
     if (this.emoji.isEmojiNameValid(emoji)) {
       this.frequentlyUsedEmojis = uniq(this.getFrequentlyUsedEmojis().concat(emoji));
-      Cookies.set('frequently_used_emojis', this.frequentlyUsedEmojis.join(','), { expires: 365 });
+      setCookie('frequently_used_emojis', this.frequentlyUsedEmojis.join(','));
     }
   }
 
@@ -514,7 +514,7 @@ export class AwardsHandler {
     return (
       this.frequentlyUsedEmojis ||
       (() => {
-        const frequentlyUsedEmojis = uniq((Cookies.get('frequently_used_emojis') || '').split(','));
+        const frequentlyUsedEmojis = uniq((getCookie('frequently_used_emojis') || '').split(','));
         this.frequentlyUsedEmojis = frequentlyUsedEmojis.filter((inputName) =>
           this.emoji.isEmojiNameValid(inputName),
         );
diff --git a/app/assets/javascripts/behaviors/shortcuts/shortcuts.js b/app/assets/javascripts/behaviors/shortcuts/shortcuts.js
index acb2355852d..9297b14aac9 100644
--- a/app/assets/javascripts/behaviors/shortcuts/shortcuts.js
+++ b/app/assets/javascripts/behaviors/shortcuts/shortcuts.js
@@ -1,9 +1,9 @@
 import $ from 'jquery';
-import Cookies from 'js-cookie';
 import { flatten } from 'lodash';
 import Mousetrap from 'mousetrap';
 import Vue from 'vue';
-import { parseBoolean } from '~/lib/utils/common_utils';
+import { getCookie, setCookie, parseBoolean } from '~/lib/utils/common_utils';
+
 import findAndFollowLink from '~/lib/utils/navigation_utility';
 import { refreshCurrentPage, visitUrl } from '~/lib/utils/url_utility';
 import {
@@ -161,10 +161,10 @@ export default class Shortcuts {
   static onTogglePerfBar(e) {
     e.preventDefault();
     const performanceBarCookieName = 'perf_bar_enabled';
-    if (parseBoolean(Cookies.get(performanceBarCookieName))) {
-      Cookies.set(performanceBarCookieName, 'false', { expires: 365, path: '/' });
+    if (parseBoolean(getCookie(performanceBarCookieName))) {
+      setCookie(performanceBarCookieName, 'false', { path: '/' });
     } else {
-      Cookies.set(performanceBarCookieName, 'true', { expires: 365, path: '/' });
+      setCookie(performanceBarCookieName, 'true', { path: '/' });
     }
     refreshCurrentPage();
   }
@@ -172,8 +172,8 @@ export default class Shortcuts {
   static onToggleCanary(e) {
     e.preventDefault();
     const canaryCookieName = 'gitlab_canary';
-    const currentValue = parseBoolean(Cookies.get(canaryCookieName));
-    Cookies.set(canaryCookieName, (!currentValue).toString(), {
+    const currentValue = parseBoolean(getCookie(canaryCookieName));
+    setCookie(canaryCookieName, (!currentValue).toString(), {
       expires: 365,
       path: '/',
       // next.gitlab.com uses a leading period. See https://gitlab.com/gitlab-org/gitlab/-/issues/350186
diff --git a/app/assets/javascripts/blob/pipeline_tour_success_modal.vue b/app/assets/javascripts/blob/pipeline_tour_success_modal.vue
index 47a0c4ba2d1..b4ca29114cb 100644
--- a/app/assets/javascripts/blob/pipeline_tour_success_modal.vue
+++ b/app/assets/javascripts/blob/pipeline_tour_success_modal.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlModal, GlSprintf, GlLink, GlButton } from '@gitlab/ui';
-import Cookies from 'js-cookie';
+import { getCookie, removeCookie } from '~/lib/utils/common_utils';
 import { __, s__ } from '~/locale';
 import Tracking from '~/tracking';
 
@@ -62,7 +62,7 @@ export default {
       return this.commitCookiePath || this.projectMergeRequestsPath;
     },
     commitCookiePath() {
-      const cookieVal = Cookies.get(this.commitCookie);
+      const cookieVal = getCookie(this.commitCookie);
 
       if (cookieVal !== 'true') return cookieVal;
       return '';
@@ -85,7 +85,7 @@ export default {
   },
   methods: {
     disableModalFromRenderingAgain() {
-      Cookies.remove(this.commitCookie);
+      removeCookie(this.commitCookie);
     },
   },
 };
diff --git a/app/assets/javascripts/broadcast_notification.js b/app/assets/javascripts/broadcast_notification.js
index 2cf2e922f68..34282c6932e 100644
--- a/app/assets/javascripts/broadcast_notification.js
+++ b/app/assets/javascripts/broadcast_notification.js
@@ -1,4 +1,4 @@
-import Cookies from 'js-cookie';
+import { setCookie } from '~/lib/utils/common_utils';
 
 const handleOnDismiss = ({ currentTarget }) => {
   currentTarget.removeEventListener('click', handleOnDismiss);
@@ -6,7 +6,7 @@ const handleOnDismiss = ({ currentTarget }) => {
     dataset: { id, expireDate },
   } = currentTarget;
 
-  Cookies.set(`hide_broadcast_message_${id}`, true, { expires: new Date(expireDate) });
+  setCookie(`hide_broadcast_message_${id}`, true, { expires: new Date(expireDate) });
 
   const notification = document.querySelector(`.js-broadcast-notification-${id}`);
   notification.parentNode.removeChild(notification);
diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue
index e630ce71bd3..2e198c59926 100644
--- a/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue
@@ -14,8 +14,8 @@ import {
   GlModal,
   GlSprintf,
 } from '@gitlab/ui';
-import Cookies from 'js-cookie';
 import { mapActions, mapState } from 'vuex';
+import { getCookie, setCookie } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
 import Tracking from '~/tracking';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -59,7 +59,7 @@ export default {
   mixins: [glFeatureFlagsMixin(), trackingMixin],
   data() {
     return {
-      isTipDismissed: Cookies.get(AWS_TIP_DISMISSED_COOKIE_NAME) === 'true',
+      isTipDismissed: getCookie(AWS_TIP_DISMISSED_COOKIE_NAME) === 'true',
       validationErrorEventProperty: '',
     };
   },
@@ -176,7 +176,7 @@ export default {
       'setVariableProtected',
     ]),
     dismissTip() {
-      Cookies.set(AWS_TIP_DISMISSED_COOKIE_NAME, 'true', { expires: 90 });
+      setCookie(AWS_TIP_DISMISSED_COOKIE_NAME, 'true', { expires: 90 });
       this.isTipDismissed = true;
     },
     deleteVarAndClose() {
diff --git a/app/assets/javascripts/contextual_sidebar.js b/app/assets/javascripts/contextual_sidebar.js
index 08942374120..d1a68e80608 100644
--- a/app/assets/javascripts/contextual_sidebar.js
+++ b/app/assets/javascripts/contextual_sidebar.js
@@ -1,10 +1,9 @@
 import { GlBreakpointInstance as bp, breakpoints } from '@gitlab/ui/dist/utils';
 import $ from 'jquery';
-import Cookies from 'js-cookie';
 import { debounce } from 'lodash';
+import { getCookie, setCookie, parseBoolean } from '~/lib/utils/common_utils';
 import initInviteMembersModal from '~/invite_members/init_invite_members_modal';
 import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger';
-import { parseBoolean } from '~/lib/utils/common_utils';
 
 export const SIDEBAR_COLLAPSED_CLASS = 'js-sidebar-collapsed';
 
@@ -59,7 +58,7 @@ export default class ContextualSidebar {
     if (!ContextualSidebar.isDesktopBreakpoint()) {
       return;
     }
-    Cookies.set('sidebar_collapsed', value, { expires: 365 * 10 });
+    setCookie('sidebar_collapsed', value, { expires: 365 * 10 });
   }
 
   toggleSidebarNav(show) {
@@ -111,7 +110,7 @@ export default class ContextualSidebar {
     if (!ContextualSidebar.isDesktopBreakpoint()) {
       this.toggleSidebarNav(false);
     } else {
-      const collapse = parseBoolean(Cookies.get('sidebar_collapsed'));
+      const collapse = parseBoolean(getCookie('sidebar_collapsed'));
       this.toggleCollapsedSidebar(collapse, true);
     }
 
diff --git a/app/assets/javascripts/cycle_analytics/components/base.vue b/app/assets/javascripts/cycle_analytics/components/base.vue
index bdfabb8e846..210e76115a2 100644
--- a/app/assets/javascripts/cycle_analytics/components/base.vue
+++ b/app/assets/javascripts/cycle_analytics/components/base.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
-import Cookies from 'js-cookie';
 import { mapActions, mapState, mapGetters } from 'vuex';
+import { getCookie, setCookie } from '~/lib/utils/common_utils';
 import { toYmd } from '~/analytics/shared/utils';
 import PathNavigation from '~/cycle_analytics/components/path_navigation.vue';
 import StageTable from '~/cycle_analytics/components/stage_table.vue';
@@ -35,7 +35,7 @@ export default {
   },
   data() {
     return {
-      isOverviewDialogDismissed: Cookies.get(OVERVIEW_DIALOG_COOKIE),
+      isOverviewDialogDismissed: getCookie(OVERVIEW_DIALOG_COOKIE),
     };
   },
   computed: {
@@ -134,7 +134,7 @@ export default {
     },
     dismissOverviewDialog() {
       this.isOverviewDialogDismissed = true;
-      Cookies.set(OVERVIEW_DIALOG_COOKIE, '1', { expires: 365 });
+      setCookie(OVERVIEW_DIALOG_COOKIE, '1');
     },
     isUserAllowed(id) {
       const { permissions } = this;
diff --git a/app/assets/javascripts/deprecated_notes.js b/app/assets/javascripts/deprecated_notes.js
index 4ab3f140b61..ab57cbbc7c0 100644
--- a/app/assets/javascripts/deprecated_notes.js
+++ b/app/assets/javascripts/deprecated_notes.js
@@ -13,7 +13,6 @@ deprecated_notes_spec.js is the spec for the legacy, jQuery notes application. I
 import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
 import Autosize from 'autosize';
 import $ from 'jquery';
-import Cookies from 'js-cookie';
 import { escape, uniqueId } from 'lodash';
 import Vue from 'vue';
 import '~/lib/utils/jquery_at_who';
@@ -28,6 +27,7 @@ import { defaultAutocompleteConfig } from './gfm_auto_complete';
 import GLForm from './gl_form';
 import axios from './lib/utils/axios_utils';
 import {
+  getCookie,
   isInViewport,
   getPagePath,
   scrollToElement,
@@ -121,7 +121,7 @@ export default class Notes {
   }
 
   setViewType(view) {
-    this.view = Cookies.get('diff_view') || view;
+    this.view = getCookie('diff_view') || view;
   }
 
   addBinding() {
@@ -473,7 +473,7 @@ export default class Notes {
   }
 
   isParallelView() {
-    return Cookies.get('diff_view') === 'parallel';
+    return getCookie('diff_view') === 'parallel';
   }
 
   /**
diff --git a/app/assets/javascripts/design_management/components/design_sidebar.vue b/app/assets/javascripts/design_management/components/design_sidebar.vue
index 6d0ed3b08a3..81d0b6d0df4 100644
--- a/app/assets/javascripts/design_management/components/design_sidebar.vue
+++ b/app/assets/javascripts/design_management/components/design_sidebar.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlCollapse, GlButton, GlPopover } from '@gitlab/ui';
-import Cookies from 'js-cookie';
-import { parseBoolean, isLoggedIn } from '~/lib/utils/common_utils';
+import { getCookie, setCookie, parseBoolean, isLoggedIn } from '~/lib/utils/common_utils';
+
 import { s__ } from '~/locale';
 import Participants from '~/sidebar/components/participants/participants.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -53,7 +53,7 @@ export default {
   },
   data() {
     return {
-      isResolvedCommentsPopoverHidden: parseBoolean(Cookies.get(this.$options.cookieKey)),
+      isResolvedCommentsPopoverHidden: parseBoolean(getCookie(this.$options.cookieKey)),
       discussionWithOpenForm: '',
       isLoggedIn: isLoggedIn(),
     };
@@ -96,7 +96,7 @@ export default {
   methods: {
     handleSidebarClick() {
       this.isResolvedCommentsPopoverHidden = true;
-      Cookies.set(this.$options.cookieKey, 'true', { expires: 365 * 10 });
+      setCookie(this.$options.cookieKey, 'true', { expires: 365 * 10 });
       this.updateActiveDiscussion();
     },
     updateActiveDiscussion(id) {
diff --git a/app/assets/javascripts/diffs/index.js b/app/assets/javascripts/diffs/index.js
index 260ebdf2141..dfe29e767c9 100644
--- a/app/assets/javascripts/diffs/index.js
+++ b/app/assets/javascripts/diffs/index.js
@@ -1,7 +1,7 @@
-import Cookies from 'js-cookie';
 import Vue from 'vue';
 import { mapActions, mapState, mapGetters } from 'vuex';
-import { parseBoolean } from '~/lib/utils/common_utils';
+import { getCookie, setCookie, parseBoolean, removeCookie } from '~/lib/utils/common_utils';
+
 import { getParameterValues } from '~/lib/utils/url_utility';
 import eventHub from '../notes/event_hub';
 import diffsApp from './components/app.vue';
@@ -58,14 +58,14 @@ export default function initDiffsApp(store) {
       // Check for cookie and save that setting for future use.
       // Then delete the cookie as we are phasing it out and using the database as SSOT.
       // NOTE: This can/should be removed later
-      if (Cookies.get(DIFF_WHITESPACE_COOKIE_NAME)) {
-        const hideWhitespace = Cookies.get(DIFF_WHITESPACE_COOKIE_NAME);
+      if (getCookie(DIFF_WHITESPACE_COOKIE_NAME)) {
+        const hideWhitespace = getCookie(DIFF_WHITESPACE_COOKIE_NAME);
         this.setShowWhitespace({
           url: this.endpointUpdateUser,
           showWhitespace: hideWhitespace !== '1',
           trackClick: false,
         });
-        Cookies.remove(DIFF_WHITESPACE_COOKIE_NAME);
+        removeCookie(DIFF_WHITESPACE_COOKIE_NAME);
       } else {
         // This is only to set the the user preference in Vuex for use later
         this.setShowWhitespace({
@@ -77,7 +77,7 @@ export default function initDiffsApp(store) {
 
       const vScrollingParam = getParameterValues('virtual_scrolling')[0];
       if (vScrollingParam === 'false' || vScrollingParam === 'true') {
-        Cookies.set('diffs_virtual_scrolling', vScrollingParam);
+        setCookie('diffs_virtual_scrolling', vScrollingParam);
       }
     },
     methods: {
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index 692cb913a57..572949e585a 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -1,9 +1,14 @@
-import Cookies from 'js-cookie';
 import Vue from 'vue';
+import {
+  setCookie,
+  handleLocationHash,
+  historyPushState,
+  scrollToElement,
+} from '~/lib/utils/common_utils';
 import createFlash from '~/flash';
 import { diffViewerModes } from '~/ide/constants';
 import axios from '~/lib/utils/axios_utils';
-import { handleLocationHash, historyPushState, scrollToElement } from '~/lib/utils/common_utils';
+
 import httpStatusCodes from '~/lib/utils/http_status';
 import Poll from '~/lib/utils/poll';
 import { mergeUrlParams, getLocationHash } from '~/lib/utils/url_utility';
@@ -369,7 +374,7 @@ export const setRenderIt = ({ commit }, file) => commit(types.RENDER_FILE, file)
 export const setInlineDiffViewType = ({ commit }) => {
   commit(types.SET_DIFF_VIEW_TYPE, INLINE_DIFF_VIEW_TYPE);
 
-  Cookies.set(DIFF_VIEW_COOKIE_NAME, INLINE_DIFF_VIEW_TYPE);
+  setCookie(DIFF_VIEW_COOKIE_NAME, INLINE_DIFF_VIEW_TYPE);
   const url = mergeUrlParams({ view: INLINE_DIFF_VIEW_TYPE }, window.location.href);
   historyPushState(url);
 
@@ -381,7 +386,7 @@ export const setInlineDiffViewType = ({ commit }) => {
 export const setParallelDiffViewType = ({ commit }) => {
   commit(types.SET_DIFF_VIEW_TYPE, PARALLEL_DIFF_VIEW_TYPE);
 
-  Cookies.set(DIFF_VIEW_COOKIE_NAME, PARALLEL_DIFF_VIEW_TYPE);
+  setCookie(DIFF_VIEW_COOKIE_NAME, PARALLEL_DIFF_VIEW_TYPE);
   const url = mergeUrlParams({ view: PARALLEL_DIFF_VIEW_TYPE }, window.location.href);
   historyPushState(url);
 
diff --git a/app/assets/javascripts/diffs/store/getters.js b/app/assets/javascripts/diffs/store/getters.js
index ca85be5d829..83c7f8c814b 100644
--- a/app/assets/javascripts/diffs/store/getters.js
+++ b/app/assets/javascripts/diffs/store/getters.js
@@ -1,4 +1,4 @@
-import Cookies from 'js-cookie';
+import { getCookie } from '~/lib/utils/common_utils';
 import { getParameterValues } from '~/lib/utils/url_utility';
 import { __, n__ } from '~/locale';
 import {
@@ -175,7 +175,7 @@ export function suggestionCommitMessage(state, _, rootState) {
 }
 
 export const isVirtualScrollingEnabled = (state) => {
-  const vSrollerCookie = Cookies.get('diffs_virtual_scrolling');
+  const vSrollerCookie = getCookie('diffs_virtual_scrolling');
 
   if (state.disableVirtualScroller) {
     return false;
diff --git a/app/assets/javascripts/diffs/store/modules/diff_state.js b/app/assets/javascripts/diffs/store/modules/diff_state.js
index 5f66360a040..329db1fe2cf 100644
--- a/app/assets/javascripts/diffs/store/modules/diff_state.js
+++ b/app/assets/javascripts/diffs/store/modules/diff_state.js
@@ -1,10 +1,10 @@
-import Cookies from 'js-cookie';
+import { getCookie } from '~/lib/utils/common_utils';
 import { getParameterValues } from '~/lib/utils/url_utility';
 import { INLINE_DIFF_VIEW_TYPE, DIFF_VIEW_COOKIE_NAME } from '../../constants';
 
 const getViewTypeFromQueryString = () => getParameterValues('view')[0];
 
-const viewTypeFromCookie = Cookies.get(DIFF_VIEW_COOKIE_NAME);
+const viewTypeFromCookie = getCookie(DIFF_VIEW_COOKIE_NAME);
 const defaultViewType = INLINE_DIFF_VIEW_TYPE;
 
 export default () => ({
diff --git a/app/assets/javascripts/emoji/components/utils.js b/app/assets/javascripts/emoji/components/utils.js
index 3465a8ae7e6..5eec0992896 100644
--- a/app/assets/javascripts/emoji/components/utils.js
+++ b/app/assets/javascripts/emoji/components/utils.js
@@ -1,5 +1,5 @@
-import Cookies from 'js-cookie';
 import { chunk, memoize, uniq } from 'lodash';
+import { getCookie, setCookie } from '~/lib/utils/common_utils';
 import { initEmojiMap, getEmojiCategoryMap } from '~/emoji';
 import {
   EMOJIS_PER_ROW,
@@ -13,7 +13,7 @@ export const generateCategoryHeight = (emojisLength) =>
   emojisLength * EMOJI_ROW_HEIGHT + CATEGORY_ROW_HEIGHT;
 
 export const getFrequentlyUsedEmojis = () => {
-  const savedEmojis = Cookies.get(FREQUENTLY_USED_COOKIE_KEY);
+  const savedEmojis = getCookie(FREQUENTLY_USED_COOKIE_KEY);
 
   if (!savedEmojis) return null;
 
@@ -30,13 +30,13 @@ export const getFrequentlyUsedEmojis = () => {
 
 export const addToFrequentlyUsed = (emoji) => {
   const frequentlyUsedEmojis = uniq(
-    (Cookies.get(FREQUENTLY_USED_COOKIE_KEY) || '')
+    (getCookie(FREQUENTLY_USED_COOKIE_KEY) || '')
       .split(',')
       .filter((e) => e)
       .concat(emoji),
   );
 
-  Cookies.set(FREQUENTLY_USED_COOKIE_KEY, frequentlyUsedEmojis.join(','), { expires: 365 });
+  setCookie(FREQUENTLY_USED_COOKIE_KEY, frequentlyUsedEmojis.join(','));
 };
 
 export const hasFrequentlyUsedEmojis = () => getFrequentlyUsedEmojis() !== null;
diff --git a/app/assets/javascripts/files_comment_button.js b/app/assets/javascripts/files_comment_button.js
index 0d7a475eb8e..071c95b8f0a 100644
--- a/app/assets/javascripts/files_comment_button.js
+++ b/app/assets/javascripts/files_comment_button.js
@@ -4,7 +4,7 @@
  * causes reflows, visit https://gist.github.com/paulirish/5d52fb081b3570c81e3a
  */
 
-import Cookies from 'js-cookie';
+import { getCookie } from '~/lib/utils/common_utils';
 
 const LINE_NUMBER_CLASS = 'diff-line-num';
 const UNFOLDABLE_LINE_CLASS = 'js-unfold';
@@ -29,7 +29,7 @@ export default {
         $diffFile.closest(DIFF_CONTAINER_SELECTOR).data('canCreateNote') === '';
     }
 
-    this.isParallelView = Cookies.get('diff_view') === 'parallel';
+    this.isParallelView = getCookie('diff_view') === 'parallel';
 
     if (this.userCanCreateNote) {
       $diffFile
diff --git a/app/assets/javascripts/groups/landing.js b/app/assets/javascripts/groups/landing.js
index bfb4d9ce67b..ed76bebf843 100644
--- a/app/assets/javascripts/groups/landing.js
+++ b/app/assets/javascripts/groups/landing.js
@@ -1,5 +1,4 @@
-import Cookies from 'js-cookie';
-import { parseBoolean } from '~/lib/utils/common_utils';
+import { getCookie, setCookie, parseBoolean } from '~/lib/utils/common_utils';
 
 class Landing {
   constructor(landingElement, dismissButton, cookieName) {
@@ -27,11 +26,11 @@ class Landing {
 
   dismissLanding() {
     this.landingElement.classList.add('hidden');
-    Cookies.set(this.cookieName, 'true', { expires: 365 });
+    setCookie(this.cookieName, 'true');
   }
 
   isDismissed() {
-    return parseBoolean(Cookies.get(this.cookieName));
+    return parseBoolean(getCookie(this.cookieName));
   }
 }
 
diff --git a/app/assets/javascripts/issuable/issuable_context.js b/app/assets/javascripts/issuable/issuable_context.js
index 453305dd6e0..37001d00a27 100644
--- a/app/assets/javascripts/issuable/issuable_context.js
+++ b/app/assets/javascripts/issuable/issuable_context.js
@@ -1,6 +1,6 @@
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import $ from 'jquery';
-import Cookies from 'js-cookie';
+import { setCookie } from '~/lib/utils/common_utils';
 import { loadCSSFile } from '~/lib/utils/css_utils';
 import UsersSelect from '~/users_select';
 
@@ -62,7 +62,7 @@ export default class IssuableContext {
       const supportedSizes = ['xs', 'sm', 'md'];
 
       if (supportedSizes.includes(bpBreakpoint)) {
-        Cookies.set('collapsed_gutter', true);
+        setCookie('collapsed_gutter', true);
       }
     });
   }
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index eff00dff7a7..cf6ce2c4889 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -705,7 +705,10 @@ export const scopedLabelKey = ({ title = '' }) => {
 };
 
 // Methods to set and get Cookie
-export const setCookie = (name, value) => Cookies.set(name, value, { expires: 365 });
+export const setCookie = (name, value, attributes) => {
+  const defaults = { expires: 365, secure: Boolean(window.gon?.secure) };
+  Cookies.set(name, value, { ...defaults, ...attributes });
+};
 
 export const getCookie = (name) => Cookies.get(name);
 
diff --git a/app/assets/javascripts/merge_conflicts/store/actions.js b/app/assets/javascripts/merge_conflicts/store/actions.js
index df515c4ac1a..9c101da52f5 100644
--- a/app/assets/javascripts/merge_conflicts/store/actions.js
+++ b/app/assets/javascripts/merge_conflicts/store/actions.js
@@ -1,4 +1,4 @@
-import Cookies from 'js-cookie';
+import { setCookie } from '~/lib/utils/common_utils';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
@@ -51,7 +51,7 @@ export const setFailedRequest = ({ commit }, message) => {
 
 export const setViewType = ({ commit }, viewType) => {
   commit(types.SET_VIEW_TYPE, viewType);
-  Cookies.set('diff_view', viewType);
+  setCookie('diff_view', viewType);
 };
 
 export const setSubmitState = ({ commit }, isSubmitting) => {
diff --git a/app/assets/javascripts/merge_conflicts/store/state.js b/app/assets/javascripts/merge_conflicts/store/state.js
index 8f700f58e54..7a2e28183a7 100644
--- a/app/assets/javascripts/merge_conflicts/store/state.js
+++ b/app/assets/javascripts/merge_conflicts/store/state.js
@@ -1,7 +1,7 @@
-import Cookies from 'js-cookie';
+import { getCookie } from '~/lib/utils/common_utils';
 import { VIEW_TYPES } from '../constants';
 
-const diffViewType = Cookies.get('diff_view');
+const diffViewType = getCookie('diff_view');
 
 export default () => ({
   isLoading: true,
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index a40caea1223..ad0117844cd 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -1,20 +1,21 @@
 /* eslint-disable no-new, class-methods-use-this */
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import $ from 'jquery';
-import Cookies from 'js-cookie';
 import Vue from 'vue';
+import {
+  getCookie,
+  parseUrlPathname,
+  isMetaClick,
+  parseBoolean,
+  scrollToElement,
+} from '~/lib/utils/common_utils';
 import createEventHub from '~/helpers/event_hub_factory';
 import BlobForkSuggestion from './blob/blob_fork_suggestion';
 import Diff from './diff';
 import createFlash from './flash';
 import { initDiffStatsDropdown } from './init_diff_stats_dropdown';
 import axios from './lib/utils/axios_utils';
-import {
-  parseUrlPathname,
-  isMetaClick,
-  parseBoolean,
-  scrollToElement,
-} from './lib/utils/common_utils';
+
 import { localTimeAgo } from './lib/utils/datetime_utility';
 import { isInVueNoteablePage } from './lib/utils/dom_utils';
 import { __ } from './locale';
@@ -514,7 +515,7 @@ export default class MergeRequestTabs {
 
   // Expand the issuable sidebar unless the user explicitly collapsed it
   expandView() {
-    if (parseBoolean(Cookies.get('collapsed_gutter'))) {
+    if (parseBoolean(getCookie('collapsed_gutter'))) {
       return;
     }
     const $gutterBtn = $('.js-sidebar-toggle');
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue
index 42b08bcaa7b..ee70ff858be 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue
@@ -1,8 +1,8 @@
 <script>
 import { GlButton } from '@gitlab/ui';
-import Cookies from 'js-cookie';
 import Vue from 'vue';
-import { parseBoolean } from '~/lib/utils/common_utils';
+import { getCookie, setCookie, parseBoolean } from '~/lib/utils/common_utils';
+
 import Translate from '../../../../../vue_shared/translate';
 
 Vue.use(Translate);
@@ -17,13 +17,13 @@ export default {
   inject: ['docsUrl', 'illustrationUrl'],
   data() {
     return {
-      calloutDismissed: parseBoolean(Cookies.get(cookieKey)),
+      calloutDismissed: parseBoolean(getCookie(cookieKey)),
     };
   },
   methods: {
     dismissCallout() {
       this.calloutDismissed = true;
-      Cookies.set(cookieKey, this.calloutDismissed, { expires: 365 });
+      setCookie(cookieKey, this.calloutDismissed);
     },
   },
 };
diff --git a/app/assets/javascripts/pages/projects/project.js b/app/assets/javascripts/pages/projects/project.js
index a26aeeb6db4..0c17bf2f344 100644
--- a/app/assets/javascripts/pages/projects/project.js
+++ b/app/assets/javascripts/pages/projects/project.js
@@ -1,7 +1,7 @@
 /* eslint-disable func-names, no-return-assign */
 
 import $ from 'jquery';
-import Cookies from 'js-cookie';
+import { setCookie } from '~/lib/utils/common_utils';
 import initClonePanel from '~/clone_panel';
 import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 import createFlash from '~/flash';
@@ -24,19 +24,19 @@ export default class Project {
     }
 
     $('.js-hide-no-ssh-message').on('click', function (e) {
-      Cookies.set('hide_no_ssh_message', 'false');
+      setCookie('hide_no_ssh_message', 'false');
       $(this).parents('.js-no-ssh-key-message').remove();
       return e.preventDefault();
     });
     $('.js-hide-no-password-message').on('click', function (e) {
-      Cookies.set('hide_no_password_message', 'false');
+      setCookie('hide_no_password_message', 'false');
       $(this).parents('.js-no-password-message').remove();
       return e.preventDefault();
     });
     $('.hide-auto-devops-implicitly-enabled-banner').on('click', function (e) {
       const projectId = $(this).data('project-id');
       const cookieKey = `hide_auto_devops_implicitly_enabled_banner_${projectId}`;
-      Cookies.set(cookieKey, 'false');
+      setCookie(cookieKey, 'false');
       $(this).parents('.auto-devops-implicitly-enabled-banner').remove();
       return e.preventDefault();
     });
diff --git a/app/assets/javascripts/pages/users/index.js b/app/assets/javascripts/pages/users/index.js
index 58ceb524360..5cbb7a06bc1 100644
--- a/app/assets/javascripts/pages/users/index.js
+++ b/app/assets/javascripts/pages/users/index.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import Cookies from 'js-cookie';
+import { setCookie } from '~/lib/utils/common_utils';
 import UserCallout from '~/user_callout';
 import UserTabs from './user_tabs';
 
@@ -10,7 +10,7 @@ function initUserProfile(action) {
   // hide project limit message
   $('.hide-project-limit-message').on('click', (e) => {
     e.preventDefault();
-    Cookies.set('hide_project_limit_message', 'false');
+    setCookie('hide_project_limit_message', 'false');
     $(this).parents('.project-limit-message').remove();
   });
 }
diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js
index ee9533bbec3..009afe03ea6 100644
--- a/app/assets/javascripts/right_sidebar.js
+++ b/app/assets/javascripts/right_sidebar.js
@@ -1,7 +1,7 @@
 /* eslint-disable func-names, consistent-return, no-param-reassign */
 
 import $ from 'jquery';
-import Cookies from 'js-cookie';
+import { setCookie } from '~/lib/utils/common_utils';
 import { hide, fixTitle } from '~/tooltips';
 import createFlash from './flash';
 import axios from './lib/utils/axios_utils';
@@ -80,7 +80,7 @@ Sidebar.prototype.sidebarToggleClicked = function (e, triggered) {
   hide($this);
 
   if (!triggered) {
-    Cookies.set('collapsed_gutter', $('.right-sidebar').hasClass('right-sidebar-collapsed'));
+    setCookie('collapsed_gutter', $('.right-sidebar').hasClass('right-sidebar-collapsed'));
   }
 };
 
diff --git a/app/assets/javascripts/serverless/survey_banner.vue b/app/assets/javascripts/serverless/survey_banner.vue
index c48c294c0f7..1a49277efa7 100644
--- a/app/assets/javascripts/serverless/survey_banner.vue
+++ b/app/assets/javascripts/serverless/survey_banner.vue
@@ -1,7 +1,6 @@
 <script>
 import { GlBanner } from '@gitlab/ui';
-import Cookies from 'js-cookie';
-import { parseBoolean } from '~/lib/utils/common_utils';
+import { getCookie, setCookie, parseBoolean } from '~/lib/utils/common_utils';
 
 export default {
   components: {
@@ -19,13 +18,13 @@ export default {
     };
   },
   created() {
-    if (parseBoolean(Cookies.get('hide_serverless_survey'))) {
+    if (parseBoolean(getCookie('hide_serverless_survey'))) {
       this.visible = false;
     }
   },
   methods: {
     handleClose() {
-      Cookies.set('hide_serverless_survey', 'true', { expires: 365 * 10 });
+      setCookie('hide_serverless_survey', 'true', { expires: 365 * 10 });
       this.visible = false;
     },
   },
diff --git a/app/assets/javascripts/user_callout.js b/app/assets/javascripts/user_callout.js
index 44e54c85f3c..ee23f8c5a0c 100644
--- a/app/assets/javascripts/user_callout.js
+++ b/app/assets/javascripts/user_callout.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import Cookies from 'js-cookie';
+import { getCookie, setCookie } from '~/lib/utils/common_utils';
 
 export default class UserCallout {
   constructor(options = {}) {
@@ -9,7 +9,7 @@ export default class UserCallout {
 
     this.userCalloutBody = $(`.${className}`);
     this.cookieName = this.userCalloutBody.data('uid');
-    this.isCalloutDismissed = Cookies.get(this.cookieName);
+    this.isCalloutDismissed = getCookie(this.cookieName);
     this.init();
   }
 
@@ -30,7 +30,7 @@ export default class UserCallout {
       cookieOptions.path = this.userCalloutBody.data('projectPath');
     }
 
-    Cookies.set(this.cookieName, 'true', cookieOptions);
+    setCookie(this.cookieName, 'true', cookieOptions);
 
     if ($currentTarget.hasClass('close') || $currentTarget.hasClass('js-close')) {
       this.userCalloutBody.remove();
diff --git a/app/assets/javascripts/vue_alerts.js b/app/assets/javascripts/vue_alerts.js
index b44f787cf30..f3bf121c0f8 100644
--- a/app/assets/javascripts/vue_alerts.js
+++ b/app/assets/javascripts/vue_alerts.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
-import Cookies from 'js-cookie';
-import { parseBoolean } from '~/lib/utils/common_utils';
+import { setCookie, parseBoolean } from '~/lib/utils/common_utils';
+
 import DismissibleAlert from '~/vue_shared/components/dismissible_alert.vue';
 
 const getCookieExpirationPeriod = (expirationPeriod) => {
@@ -33,7 +33,7 @@ const mountVueAlert = (el) => {
             if (!dismissCookieName) {
               return;
             }
-            Cookies.set(dismissCookieName, true, {
+            setCookie(dismissCookieName, true, {
               expires: getCookieExpirationPeriod(dismissCookieExpire),
             });
           },
diff --git a/app/assets/javascripts/vue_shared/issuable/sidebar/components/issuable_sidebar_root.vue b/app/assets/javascripts/vue_shared/issuable/sidebar/components/issuable_sidebar_root.vue
index 99dcccd12ed..774267639fc 100644
--- a/app/assets/javascripts/vue_shared/issuable/sidebar/components/issuable_sidebar_root.vue
+++ b/app/assets/javascripts/vue_shared/issuable/sidebar/components/issuable_sidebar_root.vue
@@ -1,8 +1,8 @@
 <script>
 import { GlIcon } from '@gitlab/ui';
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
-import Cookies from 'js-cookie';
-import { parseBoolean } from '~/lib/utils/common_utils';
+import { getCookie, setCookie, parseBoolean } from '~/lib/utils/common_utils';
+
 import { USER_COLLAPSED_GUTTER_COOKIE } from '../constants';
 
 export default {
@@ -10,7 +10,7 @@ export default {
     GlIcon,
   },
   data() {
-    const userExpanded = !parseBoolean(Cookies.get(USER_COLLAPSED_GUTTER_COOKIE));
+    const userExpanded = !parseBoolean(getCookie(USER_COLLAPSED_GUTTER_COOKIE));
 
     // We're deliberately keeping two different props for sidebar status;
     // 1. userExpanded reflects value based on cookie `collapsed_gutter`.
@@ -46,7 +46,7 @@ export default {
       this.isExpanded = !this.isExpanded;
       this.userExpanded = this.isExpanded;
 
-      Cookies.set(USER_COLLAPSED_GUTTER_COOKIE, !this.userExpanded);
+      setCookie(USER_COLLAPSED_GUTTER_COOKIE, !this.userExpanded);
       this.updatePageContainerClass();
     },
   },