app/assets/javascripts/runner/components/runner_detail_groups.vue

+<script>
+import { GlAvatar, GlLink } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlAvatar,
+    GlLink,
+  },
+  props: {
+    runner: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    groups() {
+      return this.runner.groups?.nodes || [];
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-border-t-gray-100 gl-border-t-1 gl-border-t-solid">
+    <h3 class="gl-font-lg gl-my-5">{{ s__('Runners|Assigned Group') }}</h3>
+    <template v-if="groups.length">
+      <div v-for="group in groups" :key="group.id" class="gl-display-flex gl-align-items-center">
+        <gl-link
+          :href="group.webUrl"
+          data-testid="group-avatar"
+          class="gl-text-decoration-none! gl-mr-3"
+        >
+          <gl-avatar
+            shape="rect"
+            :entity-name="group.name"
+            :src="group.avatarUrl"
+            :alt="group.name"
+            :size="48"
+          />
+        </gl-link>
+
+        <gl-link :href="group.webUrl" class="gl-font-lg gl-font-weight-bold gl-text-gray-900!">{{
+          group.fullName
+        }}</gl-link>
+      </div>
+    </template>
+    <span v-else class="gl-text-gray-500">{{ __('None') }}</span>
+  </div>
+</template>

app/assets/javascripts/runner/components/runner_details.vue

@@ -3,8 +3,9 @@ import { GlTabs, GlTab, GlIntersperse } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
-import { ACCESS_LEVEL_REF_PROTECTED } from '../constants';
+import { ACCESS_LEVEL_REF_PROTECTED, GROUP_TYPE } from '../constants';
 import RunnerDetail from './runner_detail.vue';
+import RunnerDetailGroups from './runner_detail_groups.vue';
 import RunnerTags from './runner_tags.vue';
 
 export default {
@@ -13,6 +14,7 @@ export default {
     GlTab,
     GlIntersperse,
     RunnerDetail,
+    RunnerDetailGroups,
     RunnerTags,
     TimeAgo,
   },
@@ -43,6 +45,9 @@ export default {
       }
       return null;
     },
+    isGroupRunner() {
+      return this.runner?.runnerType === GROUP_TYPE;
+    },
   },
   ACCESS_LEVEL_REF_PROTECTED,
 };
@@ -53,40 +58,44 @@ export default {
     <gl-tab>
       <template #title>{{ s__('Runners|Details') }}</template>
 
-      <div v-if="runner" class="gl-py-4">
-        <dl>
-          <runner-detail :label="s__('Runners|Description')" :value="runner.description" />
-          <runner-detail
-            :label="s__('Runners|Last contact')"
-            :empty-value="s__('Runners|Never contacted')"
-          >
-            <template #value>
-              <time-ago v-if="runner.contactedAt" :time="runner.contactedAt" />
-            </template>
-          </runner-detail>
-          <runner-detail :label="s__('Runners|Version')" :value="runner.version" />
-          <runner-detail :label="s__('Runners|IP Address')" :value="runner.ipAddress" />
-          <runner-detail :label="s__('Runners|Configuration')">
-            <template #value>
-              <gl-intersperse v-if="configTextProtected || configTextUntagged">
-                <span v-if="configTextProtected">{{ configTextProtected }}</span>
-                <span v-if="configTextUntagged">{{ configTextUntagged }}</span>
-              </gl-intersperse>
-            </template>
-          </runner-detail>
-          <runner-detail :label="s__('Runners|Maximum job timeout')" :value="maximumTimeout" />
-          <runner-detail :label="s__('Runners|Tags')">
-            <template #value>
-              <runner-tags
-                v-if="runner.tagList && runner.tagList.length"
-                class="gl-vertical-align-middle"
-                :tag-list="runner.tagList"
-                size="sm"
-              />
-            </template>
-          </runner-detail>
-        </dl>
-      </div>
+      <template v-if="runner">
+        <div class="gl-pt-4">
+          <dl class="gl-mb-0">
+            <runner-detail :label="s__('Runners|Description')" :value="runner.description" />
+            <runner-detail
+              :label="s__('Runners|Last contact')"
+              :empty-value="s__('Runners|Never contacted')"
+            >
+              <template #value>
+                <time-ago v-if="runner.contactedAt" :time="runner.contactedAt" />
+              </template>
+            </runner-detail>
+            <runner-detail :label="s__('Runners|Version')" :value="runner.version" />
+            <runner-detail :label="s__('Runners|IP Address')" :value="runner.ipAddress" />
+            <runner-detail :label="s__('Runners|Configuration')">
+              <template #value>
+                <gl-intersperse v-if="configTextProtected || configTextUntagged">
+                  <span v-if="configTextProtected">{{ configTextProtected }}</span>
+                  <span v-if="configTextUntagged">{{ configTextUntagged }}</span>
+                </gl-intersperse>
+              </template>
+            </runner-detail>
+            <runner-detail :label="s__('Runners|Maximum job timeout')" :value="maximumTimeout" />
+            <runner-detail :label="s__('Runners|Tags')">
+              <template #value>
+                <runner-tags
+                  v-if="runner.tagList && runner.tagList.length"
+                  class="gl-vertical-align-middle"
+                  :tag-list="runner.tagList"
+                  size="sm"
+                />
+              </template>
+            </runner-detail>
+          </dl>
+        </div>
+
+        <runner-detail-groups v-if="isGroupRunner" :runner="runner" />
+      </template>
     </gl-tab>
   </gl-tabs>
 </template>

app/assets/javascripts/runner/components/runner_header.vue

@@ -63,6 +63,6 @@ export default {
         <strong>{{ heading }}</strong>
       </template>
     </div>
-    <div class="gl-ml-auto"><slot name="actions"></slot></div>
+    <div class="gl-ml-auto gl-flex-shrink-0"><slot name="actions"></slot></div>
   </div>
 </template>

app/assets/javascripts/runner/components/runner_pause_button.vue

+<script>
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
+import runnerToggleActiveMutation from '~/runner/graphql/runner_toggle_active.mutation.graphql';
+import { createAlert } from '~/flash';
+import { captureException } from '~/runner/sentry_utils';
+import { I18N_PAUSE, I18N_RESUME } from '../constants';
+
+export default {
+  name: 'RunnerPauseButton',
+  components: {
+    GlButton,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    runner: {
+      type: Object,
+      required: true,
+    },
+    compact: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      updating: false,
+    };
+  },
+  computed: {
+    isActive() {
+      return this.runner.active;
+    },
+    icon() {
+      return this.isActive ? 'pause' : 'play';
+    },
+    label() {
+      return this.isActive ? I18N_PAUSE : I18N_RESUME;
+    },
+    buttonContent() {
+      if (this.compact) {
+        return null;
+      }
+      return this.label;
+    },
+    ariaLabel() {
+      if (this.compact) {
+        return this.label;
+      }
+      return null;
+    },
+    tooltip() {
+      // Only show tooltip when compact.
+      // Also prevent a "sticky" tooltip: If this button is
+      // disabled, mouseout listeners don't run leaving the tooltip stuck
+      if (this.compact && !this.updating) {
+        return this.label;
+      }
+      return '';
+    },
+  },
+  methods: {
+    async onToggle() {
+      this.updating = true;
+      try {
+        const input = {
+          id: this.runner.id,
+          active: !this.isActive,
+        };
+
+        const {
+          data: {
+            runnerUpdate: { errors },
+          },
+        } = await this.$apollo.mutate({
+          mutation: runnerToggleActiveMutation,
+          variables: {
+            input,
+          },
+        });
+
+        if (errors && errors.length) {
+          throw new Error(errors.join(' '));
+        }
+      } catch (e) {
+        this.onError(e);
+      } finally {
+        this.updating = false;
+      }
+    },
+    onError(error) {
+      const { message } = error;
+      createAlert({ message });
+
+      this.reportToSentry(error);
+    },
+    reportToSentry(error) {
+      captureException({ error, component: this.$options.name });
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-button
+    v-gl-tooltip.hover.viewport="tooltip"
+    v-bind="$attrs"
+    :aria-label="ariaLabel"
+    :icon="icon"
+    :loading="updating"
+    @click="onToggle"
+    v-on="$listeners"
+  >
+    <!--
+      Use <template v-if> to ensure a square button is shown when compact: true.
+      Sending empty content will still show a distorted/rectangular button.
+    -->
+    <template v-if="buttonContent">{{ buttonContent }}</template>
+  </gl-button>
+</template>

app/assets/javascripts/runner/components/runner_type_tabs.vue

 <script>
 import { GlTabs, GlTab } from '@gitlab/ui';
-import { s__ } from '~/locale';
 import { searchValidator } from '~/runner/runner_search_utils';
-import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE } from '../constants';
+import {
+  INSTANCE_TYPE,
+  GROUP_TYPE,
+  PROJECT_TYPE,
+  I18N_ALL_TYPES,
+  I18N_INSTANCE_TYPE,
+  I18N_GROUP_TYPE,
+  I18N_PROJECT_TYPE,
+} from '../constants';
 
-const tabs = [
-  {
-    title: s__('Runners|All'),
-    runnerType: null,
-  },
-  {
-    title: s__('Runners|Instance'),
-    runnerType: INSTANCE_TYPE,
-  },
-  {
-    title: s__('Runners|Group'),
-    runnerType: GROUP_TYPE,
-  },
-  {
-    title: s__('Runners|Project'),
-    runnerType: PROJECT_TYPE,
-  },
-];
+const I18N_TAB_TITLES = {
+  [INSTANCE_TYPE]: I18N_INSTANCE_TYPE,
+  [GROUP_TYPE]: I18N_GROUP_TYPE,
+  [PROJECT_TYPE]: I18N_PROJECT_TYPE,
+};
 
 export default {
   components: {
@@ -29,12 +23,34 @@ export default {
     GlTab,
   },
   props: {
+    runnerTypes: {
+      type: Array,
+      required: false,
+      default: () => [INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE],
+    },
     value: {
       type: Object,
       required: true,
       validator: searchValidator,
     },
   },
+  computed: {
+    tabs() {
+      const tabs = this.runnerTypes.map((runnerType) => ({
+        title: I18N_TAB_TITLES[runnerType],
+        runnerType,
+      }));
+
+      // Always add a "All" tab that resets filters
+      return [
+        {
+          title: I18N_ALL_TYPES,
+          runnerType: null,
+        },
+        ...tabs,
+      ];
+    },
+  },
   methods: {
     onTabSelected({ runnerType }) {
       this.$emit('input', {
@@ -47,13 +63,12 @@ export default {
       return runnerType === this.value.runnerType;
     },
   },
-  tabs,
 };
 </script>
 <template>
   <gl-tabs v-bind="$attrs" data-testid="runner-type-tabs">
     <gl-tab
-      v-for="tab in $options.tabs"
+      v-for="tab in tabs"
       :key="`${tab.runnerType}`"
       :active="isTabActive(tab)"
       @click="onTabSelected(tab)"

app/assets/javascripts/runner/constants.js

-import { s__ } from '~/locale';
+import { __, s__ } from '~/locale';
 
 export const RUNNER_PAGE_SIZE = 20;
 export const RUNNER_JOB_COUNT_LIMIT = 1000;
-export const GROUP_RUNNER_COUNT_LIMIT = 1000;
 
 export const I18N_FETCH_ERROR = s__('Runners|Something went wrong while fetching runner data.');
 export const I18N_DETAILS_TITLE = s__('Runners|Runner #%{runner_id}');
 
 // Type
+
+export const I18N_ALL_TYPES = s__('Runners|All');
+export const I18N_INSTANCE_TYPE = s__('Runners|Instance');
+export const I18N_GROUP_TYPE = s__('Runners|Group');
+export const I18N_PROJECT_TYPE = s__('Runners|Project');
 export const I18N_INSTANCE_RUNNER_DESCRIPTION = s__('Runners|Available to all projects');
 export const I18N_GROUP_RUNNER_DESCRIPTION = s__(
   'Runners|Available to all projects and subgroups in the group',
@@ -28,6 +32,10 @@ export const I18N_STALE_RUNNER_DESCRIPTION = s__(
   'Runners|No contact from this runner in over 3 months',
 );
 
+// Active flag
+export const I18N_PAUSE = __('Pause');
+export const I18N_RESUME = __('Resume');
+
 export const I18N_LOCKED_RUNNER_DESCRIPTION = s__('Runners|You cannot assign to other projects');
 export const I18N_PAUSED_RUNNER_DESCRIPTION = s__('Runners|Not available to run jobs');
 

app/assets/javascripts/runner/graphql/runner_actions_update.mutation.graphql

-#import "~/runner/graphql/runner_node.fragment.graphql"
-
-# Mutation for updates within the runners list via action
-# buttons (play, pause, ...), loads attributes shown in the
-# runner list.
-
-mutation runnerActionsUpdate($input: RunnerUpdateInput!) {
-  runnerUpdate(input: $input) {
-    runner {
-      ...RunnerNode
-    }
-    errors
-  }
-}

app/assets/javascripts/runner/graphql/runner_details_shared.fragment.graphql

@@ -18,4 +18,13 @@ fragment RunnerDetailsShared on CiRunner {
     updateRunner
     deleteRunner
   }
+  groups {
+    nodes {
+      id
+      avatarUrl
+      name
+      fullName
+      webUrl
+    }
+  }
 }

app/assets/javascripts/runner/graphql/runner_toggle_active.mutation.graphql

+# Mutation executed for the pause/resume button in the
+# runner list and details views.
+
+mutation runnerToggleActive($input: RunnerUpdateInput!) {
+  runnerUpdate(input: $input) {
+    runner {
+      id
+      active
+    }
+    errors
+  }
+}

app/assets/javascripts/runner/group_runners/group_runners_app.vue

 <script>
-import { GlLink } from '@gitlab/ui';
+import { GlBadge, GlLink } from '@gitlab/ui';
 import { createAlert } from '~/flash';
 import { fetchPolicies } from '~/lib/graphql';
 import { updateHistory } from '~/lib/utils/url_utility';
-import { formatNumber, sprintf, s__ } from '~/locale';
+import { formatNumber } from '~/locale';
 
 import RegistrationDropdown from '../components/registration/registration_dropdown.vue';
 import RunnerFilteredSearchBar from '../components/runner_filtered_search_bar.vue';
@@ -18,7 +18,7 @@ import {
   I18N_FETCH_ERROR,
   GROUP_FILTERED_SEARCH_NAMESPACE,
   GROUP_TYPE,
-  GROUP_RUNNER_COUNT_LIMIT,
+  PROJECT_TYPE,
   STATUS_ONLINE,
   STATUS_OFFLINE,
   STATUS_STALE,
@@ -46,6 +46,7 @@ const runnersCountSmartQuery = {
 export default {
   name: 'GroupRunnersApp',
   components: {
+    GlBadge,
     GlLink,
     RegistrationDropdown,
     RunnerFilteredSearchBar,
@@ -131,6 +132,33 @@ export default {
         };
       },
     },
+    allRunnersCount: {
+      ...runnersCountSmartQuery,
+      variables() {
+        return {
+          ...this.countVariables,
+          type: null,
+        };
+      },
+    },
+    groupRunnersCount: {
+      ...runnersCountSmartQuery,
+      variables() {
+        return {
+          ...this.countVariables,
+          type: GROUP_TYPE,
+        };
+      },
+    },
+    projectRunnersCount: {
+      ...runnersCountSmartQuery,
+      variables() {
+        return {
+          ...this.countVariables,
+          type: PROJECT_TYPE,
+        };
+      },
+    },
   },
   computed: {
     variables() {
@@ -139,23 +167,17 @@ export default {
         groupFullPath: this.groupFullPath,
       };
     },
+    countVariables() {
+      // Exclude pagination variables, leave only filters variables
+      const { sort, before, last, after, first, ...countVariables } = this.variables;
+      return countVariables;
+    },
     runnersLoading() {
       return this.$apollo.queries.runners.loading;
     },
     noRunnersFound() {
       return !this.runnersLoading && !this.runners.items.length;
     },
-    groupRunnersCount() {
-      if (this.groupRunnersLimitedCount > GROUP_RUNNER_COUNT_LIMIT) {
-        return `${formatNumber(GROUP_RUNNER_COUNT_LIMIT)}+`;
-      }
-      return formatNumber(this.groupRunnersLimitedCount);
-    },
-    runnerCountMessage() {
-      return sprintf(s__('Runners|Runners in this group: %{groupRunnersCount}'), {
-        groupRunnersCount: this.groupRunnersCount,
-      });
-    },
     searchTokens() {
       return [statusTokenConfig];
     },
@@ -179,10 +201,31 @@ export default {
     this.reportToSentry(error);
   },
   methods: {
+    tabCount({ runnerType }) {
+      let count;
+      switch (runnerType) {
+        case null:
+          count = this.allRunnersCount;
+          break;
+        case GROUP_TYPE:
+          count = this.groupRunnersCount;
+          break;
+        case PROJECT_TYPE:
+          count = this.projectRunnersCount;
+          break;
+        default:
+          return null;
+      }
+      if (typeof count === 'number') {
+        return formatNumber(count);
+      }
+      return null;
+    },
     reportToSentry(error) {
       captureException({ error, component: this.$options.name });
     },
   },
+  TABS_RUNNER_TYPES: [GROUP_TYPE, PROJECT_TYPE],
   GROUP_TYPE,
 };
 </script>
@@ -198,9 +241,17 @@ export default {
     <div class="gl-display-flex gl-align-items-center">
       <runner-type-tabs
         v-model="search"
+        :runner-types="$options.TABS_RUNNER_TYPES"
         content-class="gl-display-none"
         nav-class="gl-border-none!"
-      />
+      >
+        <template #title="{ tab }">
+          {{ tab.title }}
+          <gl-badge v-if="tabCount(tab)" class="gl-ml-1" size="sm">
+            {{ tabCount(tab) }}
+          </gl-badge>
+        </template>
+      </runner-type-tabs>
 
       <registration-dropdown
         class="gl-ml-auto"

app/assets/javascripts/security_configuration/components/app.vue

@@ -50,7 +50,7 @@ export default {
     TrainingProviderList,
   },
   mixins: [glFeatureFlagsMixin()],
-  inject: ['projectPath'],
+  inject: ['projectFullPath'],
   props: {
     augmentedSecurityFeatures: {
       type: Array,
@@ -107,14 +107,14 @@ export default {
     shouldShowAutoDevopsEnabledAlert() {
       return (
         this.autoDevopsEnabled &&
-        !this.autoDevopsEnabledAlertDismissedProjects.includes(this.projectPath)
+        !this.autoDevopsEnabledAlertDismissedProjects.includes(this.projectFullPath)
       );
     },
   },
   methods: {
     dismissAutoDevopsEnabledAlert() {
       const dismissedProjects = new Set(this.autoDevopsEnabledAlertDismissedProjects);
-      dismissedProjects.add(this.projectPath);
+      dismissedProjects.add(this.projectFullPath);
       this.autoDevopsEnabledAlertDismissedProjects = Array.from(dismissedProjects);
     },
     onError(message) {

app/assets/javascripts/security_configuration/components/constants.js

@@ -217,6 +217,10 @@ export const securityFeatures = [
     helpPath: CONTAINER_SCANNING_HELP_PATH,
     configurationHelpPath: CONTAINER_SCANNING_CONFIG_HELP_PATH,
     type: REPORT_TYPE_CONTAINER_SCANNING,
+
+    // This field will eventually come from the backend, the progress is
+    // tracked in https://gitlab.com/gitlab-org/gitlab/-/issues/331621
+    canEnableByMergeRequest: true,
   },
   {
     name: CLUSTER_IMAGE_SCANNING_NAME,

app/assets/javascripts/security_configuration/components/training_provider_list.vue

@@ -21,10 +21,18 @@ export default {
     GlLink,
     GlSkeletonLoader,
   },
-  inject: ['projectPath'],
+  inject: ['projectFullPath'],
   apollo: {
     securityTrainingProviders: {
       query: securityTrainingProvidersQuery,
+      variables() {
+        return {
+          fullPath: this.projectFullPath,
+        };
+      },
+      update({ project }) {
+        return project?.securityTrainingProviders;
+      },
       error() {
         this.errorMessage = this.$options.i18n.providerQueryErrorMessage;
       },
@@ -68,7 +76,7 @@ export default {
           variables: {
             input: {
               enabledProviders: enabledProviderIds,
-              fullPath: this.projectPath,
+              fullPath: this.projectFullPath,
             },
           },
         });

app/assets/javascripts/security_configuration/components/upgrade_banner.vue

 <script>
 import { GlBanner } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import Tracking from '~/tracking';
+
+export const SECURITY_UPGRADE_BANNER = 'security_upgrade_banner';
+export const UPGRADE_OR_FREE_TRIAL = 'upgrade_or_free_trial';
 
 export default {
   components: {
     GlBanner,
   },
+  mixins: [Tracking.mixin({ property: SECURITY_UPGRADE_BANNER })],
   inject: ['upgradePath'],
   i18n: {
     title: s__('SecurityConfiguration|Secure your project'),
@@ -22,6 +27,17 @@ export default {
     ],
     buttonText: s__('SecurityConfiguration|Upgrade or start a free trial'),
   },
+  mounted() {
+    this.track('display_banner', { label: SECURITY_UPGRADE_BANNER });
+  },
+  methods: {
+    bannerClosed() {
+      this.track('dismiss_banner', { label: SECURITY_UPGRADE_BANNER });
+    },
+    bannerButtonClicked() {
+      this.track('click_button', { label: UPGRADE_OR_FREE_TRIAL });
+    },
+  },
 };
 </script>
 
@@ -31,6 +47,8 @@ export default {
     :button-text="$options.i18n.buttonText"
     :button-link="upgradePath"
     variant="introduction"
+    @close="bannerClosed"
+    @primary="bannerButtonClicked"
     v-on="$listeners"
   >
     <p>{{ $options.i18n.bodyStart }}</p>

app/assets/javascripts/security_configuration/graphql/security_training_providers.query.graphql

-query Query {
-  securityTrainingProviders @client {
-    name
+query getSecurityTrainingProviders($fullPath: ID!) {
+  project(fullPath: $fullPath) {
     id
-    description
-    isEnabled
-    url
+    securityTrainingProviders {
+      name
+      id
+      description
+      isEnabled
+      url
+    }
   }
 }

app/assets/javascripts/security_configuration/index.js

@@ -19,7 +19,7 @@ export const initSecurityConfiguration = (el) => {
   });
 
   const {
-    projectPath,
+    projectFullPath,
     upgradePath,
     features,
     latestPipelinePath,
@@ -38,7 +38,7 @@ export const initSecurityConfiguration = (el) => {
     el,
     apolloProvider,
     provide: {
-      projectPath,
+      projectFullPath,
       upgradePath,
       autoDevopsHelpPagePath,
       autoDevopsPath,

app/assets/javascripts/serverless/survey_banner.vue

 <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;
     },
   },

app/assets/javascripts/tabs/constants.js

-export const ACTIVE_TAB_CLASSES = Object.freeze([
-  'active',
-  'gl-tab-nav-item-active',
-  'gl-tab-nav-item-active-indigo',
-]);
+export const ACTIVE_TAB_CLASSES = Object.freeze(['active', 'gl-tab-nav-item-active']);
 
 export const ACTIVE_PANEL_CLASS = 'active';
 

app/assets/javascripts/user_callout.js

 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();

app/assets/javascripts/vue_alerts.js

 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),
             });
           },