Add latest changes from gitlab-org/gitlab@master

335 files changed, 1059 insertions, 1043 deletions

diff --git a/app/assets/javascripts/filtered_search/stores/recent_searches_store.js b/app/assets/javascripts/filtered_search/stores/recent_searches_store.js
index 423f123f71c..ca0a58137b1 100644
--- a/app/assets/javascripts/filtered_search/stores/recent_searches_store.js
+++ b/app/assets/javascripts/filtered_search/stores/recent_searches_store.js
@@ -19,7 +19,7 @@ class RecentSearchesStore {
   }
 
   setRecentSearches(searches = []) {
-    const trimmedSearches = searches.map(search =>
+    const trimmedSearches = searches.map((search) =>
       typeof search === 'string' ? search.trim() : search,
     );
 
diff --git a/app/assets/javascripts/filtered_search/visual_token_value.js b/app/assets/javascripts/filtered_search/visual_token_value.js
index f73646da6d1..0d36126943b 100644
--- a/app/assets/javascripts/filtered_search/visual_token_value.js
+++ b/app/assets/javascripts/filtered_search/visual_token_value.js
@@ -40,7 +40,7 @@ export default class VisualTokenValue {
 
     return (
       UsersCache.retrieve(username)
-        .then(user => {
+        .then((user) => {
           if (!user) {
             return;
           }
@@ -68,9 +68,9 @@ export default class VisualTokenValue {
     );
 
     return AjaxCache.retrieve(labelsEndpointWithParams)
-      .then(labels => {
+      .then((labels) => {
         const matchingLabel = (labels || []).find(
-          label => `~${DropdownUtils.getEscapedText(label.title)}` === tokenValue,
+          (label) => `~${DropdownUtils.getEscapedText(label.title)}` === tokenValue,
         );
 
         if (!matchingLabel) {
@@ -96,8 +96,8 @@ export default class VisualTokenValue {
     );
 
     return AjaxCache.retrieve(epicsEndpointWithParams)
-      .then(epics => {
-        const matchingEpic = (epics || []).find(epic => epic.id === Number(tokenValue));
+      .then((epics) => {
+        const matchingEpic = (epics || []).find((epic) => epic.id === Number(tokenValue));
 
         if (!matchingEpic) {
           return;
diff --git a/app/assets/javascripts/flash.js b/app/assets/javascripts/flash.js
index 1d5f09a265b..0f7b631e673 100644
--- a/app/assets/javascripts/flash.js
+++ b/app/assets/javascripts/flash.js
@@ -34,7 +34,7 @@ const hideFlash = (flashEl, fadeTransition = true) => {
   if (!fadeTransition) flashEl.dispatchEvent(new Event('transitionend'));
 };
 
-const createAction = config => `
+const createAction = (config) => `
   <a
     href="${config.href || '#'}"
     class="flash-action"
@@ -97,7 +97,7 @@ const deprecatedCreateFlash = function deprecatedCreateFlash(
     if (actionConfig.clickHandler) {
       flashEl
         .querySelector('.flash-action')
-        .addEventListener('click', e => actionConfig.clickHandler(e));
+        .addEventListener('click', (e) => actionConfig.clickHandler(e));
     }
   }
 
@@ -151,7 +151,7 @@ const createFlash = function createFlash({
     if (actionConfig.clickHandler) {
       flashEl
         .querySelector('.flash-action')
-        .addEventListener('click', e => actionConfig.clickHandler(e));
+        .addEventListener('click', (e) => actionConfig.clickHandler(e));
     }
   }
 
diff --git a/app/assets/javascripts/fly_out_nav.js b/app/assets/javascripts/fly_out_nav.js
index b9ce0851585..5df0ac37812 100644
--- a/app/assets/javascripts/fly_out_nav.js
+++ b/app/assets/javascripts/fly_out_nav.js
@@ -12,7 +12,7 @@ let sidebar;
 
 export const mousePos = [];
 
-export const setSidebar = el => {
+export const setSidebar = (el) => {
   sidebar = el;
 };
 export const getOpenMenu = () => currentOpenMenu;
@@ -32,7 +32,7 @@ const setHeaderHeight = () => {
 export const isSidebarCollapsed = () =>
   sidebar && sidebar.classList.contains(SIDEBAR_COLLAPSED_CLASS);
 
-export const canShowActiveSubItems = el => {
+export const canShowActiveSubItems = (el) => {
   if (el.classList.contains('active') && !isSidebarCollapsed()) {
     return false;
   }
@@ -71,7 +71,7 @@ export const calculateTop = (boundingRect, outerHeight) => {
     : boundingRect.top;
 };
 
-export const hideMenu = el => {
+export const hideMenu = (el) => {
   if (!el) return;
 
   const parentEl = el.parentNode;
@@ -112,7 +112,7 @@ export const moveSubItemsToPosition = (el, subItems) => {
   }
 };
 
-export const showSubLevelItems = el => {
+export const showSubLevelItems = (el) => {
   const subItems = el.querySelector('.sidebar-sub-level-items');
   const isIconOnly = subItems && subItems.classList.contains('is-fly-out-only');
 
@@ -139,7 +139,7 @@ export const mouseEnterTopItems = (el, timeout = getHideSubItemsInterval()) => {
   }, timeout);
 };
 
-export const mouseLeaveTopItem = el => {
+export const mouseLeaveTopItem = (el) => {
   const subItems = el.querySelector('.sidebar-sub-level-items');
 
   if (
@@ -152,7 +152,7 @@ export const mouseLeaveTopItem = el => {
   el.classList.remove(IS_OVER_CLASS);
 };
 
-export const documentMouseMove = e => {
+export const documentMouseMove = (e) => {
   mousePos.push({
     x: e.clientX,
     y: e.clientY,
@@ -161,7 +161,7 @@ export const documentMouseMove = e => {
   if (mousePos.length > 6) mousePos.shift();
 };
 
-export const subItemsMouseLeave = relatedTarget => {
+export const subItemsMouseLeave = (relatedTarget) => {
   clearTimeout(timeoutId);
 
   if (relatedTarget && !relatedTarget.closest(`.${IS_OVER_CLASS}`)) {
@@ -189,15 +189,15 @@ export default () => {
 
   requestIdleCallback(setHeaderHeight);
 
-  items.forEach(el => {
+  items.forEach((el) => {
     const subItems = el.querySelector('.sidebar-sub-level-items');
 
     if (subItems) {
-      subItems.addEventListener('mouseleave', e => subItemsMouseLeave(e.relatedTarget));
+      subItems.addEventListener('mouseleave', (e) => subItemsMouseLeave(e.relatedTarget));
     }
 
-    el.addEventListener('mouseenter', e => mouseEnterTopItems(e.currentTarget));
-    el.addEventListener('mouseleave', e => mouseLeaveTopItem(e.currentTarget));
+    el.addEventListener('mouseenter', (e) => mouseEnterTopItems(e.currentTarget));
+    el.addEventListener('mouseleave', (e) => mouseLeaveTopItem(e.currentTarget));
   });
 
   document.addEventListener('mousemove', documentMouseMove);
diff --git a/app/assets/javascripts/frequent_items/components/app.vue b/app/assets/javascripts/frequent_items/components/app.vue
index c4f61b839e4..68cc8645813 100644
--- a/app/assets/javascripts/frequent_items/components/app.vue
+++ b/app/assets/javascripts/frequent_items/components/app.vue
@@ -77,7 +77,7 @@ export default {
 
       // Check if item already exists in list
       const itemMatchIndex = storedFrequentItems.findIndex(
-        frequentItem => frequentItem.id === item.id,
+        (frequentItem) => frequentItem.id === item.id,
       );
 
       if (itemMatchIndex > -1) {
diff --git a/app/assets/javascripts/frequent_items/index.js b/app/assets/javascripts/frequent_items/index.js
index 639562bf961..cef8be37a40 100644
--- a/app/assets/javascripts/frequent_items/index.js
+++ b/app/assets/javascripts/frequent_items/index.js
@@ -18,7 +18,7 @@ const frequentItemDropdowns = [
 ];
 
 export default function initFrequentItemDropdowns() {
-  frequentItemDropdowns.forEach(dropdown => {
+  frequentItemDropdowns.forEach((dropdown) => {
     const { namespace, key } = dropdown;
     const el = document.getElementById(`js-${namespace}-dropdown`);
     const navEl = document.getElementById(`nav-${namespace}-dropdown`);
diff --git a/app/assets/javascripts/frequent_items/store/actions.js b/app/assets/javascripts/frequent_items/store/actions.js
index d4756e2ea6a..b16501aeb09 100644
--- a/app/assets/javascripts/frequent_items/store/actions.js
+++ b/app/assets/javascripts/frequent_items/store/actions.js
@@ -59,7 +59,7 @@ export const fetchSearchedItems = ({ state, dispatch }, searchQuery) => {
   }
 
   return Api[state.namespace](searchQuery, params)
-    .then(results => {
+    .then((results) => {
       dispatch('receiveSearchedItemsSuccess', results);
     })
     .catch(() => {
diff --git a/app/assets/javascripts/frequent_items/store/getters.js b/app/assets/javascripts/frequent_items/store/getters.js
index 36cc9020d8d..e52678dbec2 100644
--- a/app/assets/javascripts/frequent_items/store/getters.js
+++ b/app/assets/javascripts/frequent_items/store/getters.js
@@ -1 +1 @@
-export const hasSearchQuery = state => state.searchQuery !== '';
+export const hasSearchQuery = (state) => state.searchQuery !== '';
diff --git a/app/assets/javascripts/frequent_items/store/mutations.js b/app/assets/javascripts/frequent_items/store/mutations.js
index 78ccef7f253..eee00243867 100644
--- a/app/assets/javascripts/frequent_items/store/mutations.js
+++ b/app/assets/javascripts/frequent_items/store/mutations.js
@@ -50,7 +50,7 @@ export default {
   [types.RECEIVE_SEARCHED_ITEMS_SUCCESS](state, results) {
     const rawItems = results.data ? results.data : results; // Api.groups returns array, Api.projects returns object
     Object.assign(state, {
-      items: rawItems.map(rawItem => ({
+      items: rawItems.map((rawItem) => ({
         id: rawItem.id,
         name: rawItem.name,
         namespace: rawItem.name_with_namespace || rawItem.full_name,
diff --git a/app/assets/javascripts/frequent_items/utils.js b/app/assets/javascripts/frequent_items/utils.js
index 954d426c86c..63fe0ef20b0 100644
--- a/app/assets/javascripts/frequent_items/utils.js
+++ b/app/assets/javascripts/frequent_items/utils.js
@@ -5,7 +5,7 @@ import { FREQUENT_ITEMS, HOUR_IN_MS } from './constants';
 
 export const isMobile = () => ['md', 'sm', 'xs'].includes(bp.getBreakpointSize());
 
-export const getTopFrequentItems = items => {
+export const getTopFrequentItems = (items) => {
   if (!items) {
     return [];
   }
@@ -13,7 +13,7 @@ export const getTopFrequentItems = items => {
     ? FREQUENT_ITEMS.LIST_COUNT_MOBILE
     : FREQUENT_ITEMS.LIST_COUNT_DESKTOP;
 
-  const frequentItems = items.filter(item => item.frequency >= FREQUENT_ITEMS.ELIGIBLE_FREQUENCY);
+  const frequentItems = items.filter((item) => item.frequency >= FREQUENT_ITEMS.ELIGIBLE_FREQUENCY);
 
   if (!frequentItems || frequentItems.length === 0) {
     return [];
@@ -45,9 +45,9 @@ export const updateExistingFrequentItem = (frequentItem, item) => {
   };
 };
 
-export const sanitizeItem = item => {
+export const sanitizeItem = (item) => {
   // Only sanitize if the key exists on the item
-  const maybeSanitize = key => {
+  const maybeSanitize = (key) => {
     if (!Object.prototype.hasOwnProperty.call(item, key)) {
       return {};
     }
diff --git a/app/assets/javascripts/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js
index 2e055f350a6..8a2b35752ae 100644
--- a/app/assets/javascripts/gfm_auto_complete.js
+++ b/app/assets/javascripts/gfm_auto_complete.js
@@ -15,7 +15,7 @@ function sanitize(str) {
 }
 
 export function membersBeforeSave(members) {
-  return members.map(member => {
+  return members.map((member) => {
     const GROUP_TYPE = 'Group';
 
     let title = '';
@@ -156,7 +156,7 @@ class GfmAutoComplete {
         ...this.getDefaultCallbacks(),
         beforeSave(commands) {
           if (GfmAutoComplete.isLoading(commands)) return commands;
-          return $.map(commands, c => {
+          return $.map(commands, (c) => {
             let search = c.name;
             if (c.aliases.length > 0) {
               search = `${search} ${c.aliases.join(' ')}`;
@@ -237,7 +237,7 @@ class GfmAutoComplete {
           });
 
           // return to the form atwho wants
-          return results.map(name => ({ name }));
+          return results.map((name) => ({ name }));
         },
       },
     });
@@ -288,7 +288,7 @@ class GfmAutoComplete {
           const subtextNodes = subtext.split(/\n+/g).pop().split(GfmAutoComplete.regexSubtext);
 
           // Check if @ is followed by '/assign', '/reassign', '/unassign' or '/cc' commands.
-          command = subtextNodes.find(node => {
+          command = subtextNodes.find((node) => {
             if (Object.values(MEMBER_COMMAND).includes(node)) {
               return node;
             }
@@ -298,7 +298,7 @@ class GfmAutoComplete {
           // Cache assignees list for easier filtering later
           assignees =
             SidebarMediator.singleton?.store?.assignees?.map(
-              assignee => `${assignee.username} ${assignee.name}`,
+              (assignee) => `${assignee.username} ${assignee.name}`,
             ) || [];
 
           const match = GfmAutoComplete.defaultMatcher(flag, subtext, this.app.controllers);
@@ -316,10 +316,10 @@ class GfmAutoComplete {
 
           if (command === MEMBER_COMMAND.ASSIGN) {
             // Only include members which are not assigned to Issuable currently
-            return data.filter(member => !assignees.includes(member.search));
+            return data.filter((member) => !assignees.includes(member.search));
           } else if (command === MEMBER_COMMAND.UNASSIGN) {
             // Only include members which are assigned to Issuable currently
-            return data.filter(member => assignees.includes(member.search));
+            return data.filter((member) => assignees.includes(member.search));
           }
 
           return data;
@@ -346,7 +346,7 @@ class GfmAutoComplete {
       callbacks: {
         ...this.getDefaultCallbacks(),
         beforeSave(issues) {
-          return $.map(issues, i => {
+          return $.map(issues, (i) => {
             if (i.title == null) {
               return i;
             }
@@ -380,7 +380,7 @@ class GfmAutoComplete {
       callbacks: {
         ...this.getDefaultCallbacks(),
         beforeSave(milestones) {
-          return $.map(milestones, m => {
+          return $.map(milestones, (m) => {
             if (m.title == null) {
               return m;
             }
@@ -413,7 +413,7 @@ class GfmAutoComplete {
       callbacks: {
         ...this.getDefaultCallbacks(),
         beforeSave(merges) {
-          return $.map(merges, m => {
+          return $.map(merges, (m) => {
             if (m.title == null) {
               return m;
             }
@@ -454,7 +454,7 @@ class GfmAutoComplete {
         ...this.getDefaultCallbacks(),
         beforeSave(merges) {
           if (GfmAutoComplete.isLoading(merges)) return merges;
-          return $.map(merges, m => ({
+          return $.map(merges, (m) => ({
             title: sanitize(m.title),
             color: m.color,
             search: m.title,
@@ -465,7 +465,7 @@ class GfmAutoComplete {
           const subtextNodes = subtext.split(/\n+/g).pop().split(GfmAutoComplete.regexSubtext);
 
           // Check if ~ is followed by '/label', '/relabel' or '/unlabel' commands.
-          command = subtextNodes.find(node => {
+          command = subtextNodes.find((node) => {
             if (
               node === LABEL_COMMAND.LABEL ||
               node === LABEL_COMMAND.RELABEL ||
@@ -486,7 +486,7 @@ class GfmAutoComplete {
               return null;
             }
             const lastCandidate = subtext.split(flag).pop();
-            if (labels.find(label => label.title.startsWith(lastCandidate))) {
+            if (labels.find((label) => label.title.startsWith(lastCandidate))) {
               return lastCandidate;
             }
           } else {
@@ -513,10 +513,10 @@ class GfmAutoComplete {
           // because we want to return all the labels (unfiltered) for that command.
           if (command === LABEL_COMMAND.LABEL) {
             // Return labels with set: undefined.
-            return data.filter(label => !label.set);
+            return data.filter((label) => !label.set);
           } else if (command === LABEL_COMMAND.UNLABEL) {
             // Return labels with set: true.
-            return data.filter(label => label.set);
+            return data.filter((label) => label.set);
           }
 
           return data;
@@ -543,7 +543,7 @@ class GfmAutoComplete {
       callbacks: {
         ...this.getDefaultCallbacks(),
         beforeSave(snippets) {
-          return $.map(snippets, m => {
+          return $.map(snippets, (m) => {
             if (m.title == null) {
               return m;
             }
@@ -648,7 +648,7 @@ class GfmAutoComplete {
       this.loadEmojiData($input, at).catch(() => {});
     } else if (dataSource) {
       AjaxCache.retrieve(dataSource, true)
-        .then(data => {
+        .then((data) => {
           this.loadData($input, at, data);
         })
         .catch(() => {
@@ -690,11 +690,11 @@ class GfmAutoComplete {
       }
       lookup[key].push({ kind, emoji });
     };
-    Object.values(emojis).forEach(emoji => {
+    Object.values(emojis).forEach((emoji) => {
       add(emoji.name, 'name', emoji);
       add(emoji.d, 'description', emoji);
       add(emoji.e, 'unicode', emoji);
-      emoji.aliases.forEach(a => add(a, 'alias', emoji));
+      emoji.aliases.forEach((a) => add(a, 'alias', emoji));
     });
     this.emojiLookup = lookup;
 
@@ -766,7 +766,7 @@ GfmAutoComplete.atTypeMap = {
 };
 
 GfmAutoComplete.typesWithBackendFiltering = ['vulnerabilities'];
-GfmAutoComplete.isTypeWithBackendFiltering = type =>
+GfmAutoComplete.isTypeWithBackendFiltering = (type) =>
   GfmAutoComplete.typesWithBackendFiltering.includes(GfmAutoComplete.atTypeMap[type]);
 
 function findEmoji(name) {
diff --git a/app/assets/javascripts/gl_field_errors.js b/app/assets/javascripts/gl_field_errors.js
index ad79483d5ec..eec7a138ea7 100644
--- a/app/assets/javascripts/gl_field_errors.js
+++ b/app/assets/javascripts/gl_field_errors.js
@@ -16,14 +16,14 @@ export default class GlFieldErrors {
   initValidators() {
     // register selectors here as needed
     const validateSelectors = [':text', ':password', '[type=email]', '[type=url]', '[type=number]']
-      .map(selector => `input${selector}`)
+      .map((selector) => `input${selector}`)
       .join(',');
 
     this.state.inputs = this.form
       .find(validateSelectors)
       .toArray()
-      .filter(input => !input.classList.contains(customValidationFlag))
-      .map(input => new GlFieldError({ input, formErrors: this }));
+      .filter((input) => !input.classList.contains(customValidationFlag))
+      .map((input) => new GlFieldError({ input, formErrors: this }));
 
     this.form.on('submit', GlFieldErrors.catchInvalidFormSubmit);
   }
@@ -45,7 +45,7 @@ export default class GlFieldErrors {
 
   /* Public method for triggering validity updates manually  */
   updateFormValidityState() {
-    this.state.inputs.forEach(field => {
+    this.state.inputs.forEach((field) => {
       if (field.state.submitted) {
         field.updateValidity();
       }
diff --git a/app/assets/javascripts/gl_form.js b/app/assets/javascripts/gl_form.js
index f056ce989f8..f34695ef807 100644
--- a/app/assets/javascripts/gl_form.js
+++ b/app/assets/javascripts/gl_form.js
@@ -20,7 +20,7 @@ export default class GLForm {
 
     // Disable autocomplete for keywords which do not have dataSources available
     const dataSources = (gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources) || {};
-    Object.keys(this.enableGFM).forEach(item => {
+    Object.keys(this.enableGFM).forEach((item) => {
       if (item !== 'emojis' && !dataSources[item]) {
         this.enableGFM[item] = false;
       }
diff --git a/app/assets/javascripts/gpg_badges.js b/app/assets/javascripts/gpg_badges.js
index e0f64c8e843..3a8ae56bb8f 100644
--- a/app/assets/javascripts/gpg_badges.js
+++ b/app/assets/javascripts/gpg_badges.js
@@ -28,7 +28,7 @@ export default class GpgBadges {
     return axios
       .get(endpoint, { params })
       .then(({ data }) => {
-        data.signatures.forEach(signature => {
+        data.signatures.forEach((signature) => {
           badges.filter(`[data-commit-sha="${signature.commit_sha}"]`).replaceWith(signature.html);
         });
       })
diff --git a/app/assets/javascripts/grafana_integration/store/actions.js b/app/assets/javascripts/grafana_integration/store/actions.js
index d28e59925d4..436f92eae84 100644
--- a/app/assets/javascripts/grafana_integration/store/actions.js
+++ b/app/assets/javascripts/grafana_integration/store/actions.js
@@ -24,7 +24,7 @@ export const updateGrafanaIntegration = ({ state, dispatch }) =>
       },
     })
     .then(() => dispatch('receiveGrafanaIntegrationUpdateSuccess'))
-    .catch(error => dispatch('receiveGrafanaIntegrationUpdateError', error));
+    .catch((error) => dispatch('receiveGrafanaIntegrationUpdateError', error));
 
 export const receiveGrafanaIntegrationUpdateSuccess = () => {
   /**
diff --git a/app/assets/javascripts/grafana_integration/store/index.js b/app/assets/javascripts/grafana_integration/store/index.js
index e96bb1e8aad..e3dcfd31a83 100644
--- a/app/assets/javascripts/grafana_integration/store/index.js
+++ b/app/assets/javascripts/grafana_integration/store/index.js
@@ -6,7 +6,7 @@ import mutations from './mutations';
 
 Vue.use(Vuex);
 
-export const createStore = initialState =>
+export const createStore = (initialState) =>
   new Vuex.Store({
     state: createState(initialState),
     actions,
diff --git a/app/assets/javascripts/graphql_shared/utils.js b/app/assets/javascripts/graphql_shared/utils.js
index 813e21b6ce9..4715bbc94f6 100644
--- a/app/assets/javascripts/graphql_shared/utils.js
+++ b/app/assets/javascripts/graphql_shared/utils.js
@@ -51,4 +51,4 @@ export const convertToGraphQLId = (type, id) => {
  * @param {Array} ids An array of id values
  * @returns {Array}
  */
-export const convertToGraphQLIds = (type, ids) => ids.map(id => convertToGraphQLId(type, id));
+export const convertToGraphQLIds = (type, ids) => ids.map((id) => convertToGraphQLId(type, id));
diff --git a/app/assets/javascripts/group.js b/app/assets/javascripts/group.js
index a840e995860..6878635b288 100644
--- a/app/assets/javascripts/group.js
+++ b/app/assets/javascripts/group.js
@@ -12,7 +12,7 @@ export default class Group {
     this.resetHandler = this.reset.bind(this);
     this.updateGroupPathSlugHandler = this.updateGroupPathSlug.bind(this);
 
-    this.groupNames.forEach(groupName => {
+    this.groupNames.forEach((groupName) => {
       if (groupName.value === '') {
         groupName.addEventListener('keyup', this.updateHandler);
 
@@ -22,7 +22,7 @@ export default class Group {
       }
     });
 
-    this.groupPaths.forEach(groupPath => {
+    this.groupPaths.forEach((groupPath) => {
       groupPath.addEventListener('keydown', this.resetHandler);
     });
   }
@@ -30,21 +30,21 @@ export default class Group {
   update({ currentTarget: { value: updatedValue } }) {
     const slug = slugify(updatedValue);
 
-    this.groupNames.forEach(element => {
+    this.groupNames.forEach((element) => {
       element.value = updatedValue;
     });
-    this.groupPaths.forEach(element => {
+    this.groupPaths.forEach((element) => {
       element.value = slug;
     });
   }
 
   reset() {
-    this.groupNames.forEach(groupName => {
+    this.groupNames.forEach((groupName) => {
       groupName.removeEventListener('keyup', this.updateHandler);
       groupName.removeEventListener('blur', this.checkPathHandler);
     });
 
-    this.groupPaths.forEach(groupPath => {
+    this.groupPaths.forEach((groupPath) => {
       groupPath.removeEventListener('keydown', this.resetHandler);
     });
   }
@@ -59,7 +59,7 @@ export default class Group {
         if (exists && suggests.length) {
           const [suggestedSlug] = suggests;
 
-          this.groupPaths.forEach(element => {
+          this.groupPaths.forEach((element) => {
             element.value = suggestedSlug;
           });
         } else if (exists && !suggests.length) {
diff --git a/app/assets/javascripts/group_settings/components/shared_runners_form.vue b/app/assets/javascripts/group_settings/components/shared_runners_form.vue
index e396521ce7c..d6ed08a9407 100644
--- a/app/assets/javascripts/group_settings/components/shared_runners_form.vue
+++ b/app/assets/javascripts/group_settings/components/shared_runners_form.vue
@@ -82,7 +82,7 @@ export default {
         .then(() => {
           this.isLoading = false;
         })
-        .catch(error => {
+        .catch((error) => {
           const message = [
             error.response?.data?.error || __('An error occurred while updating configuration.'),
             ERROR_MESSAGE,
diff --git a/app/assets/javascripts/groups/components/app.vue b/app/assets/javascripts/groups/components/app.vue
index e057012a246..ac36d284384 100644
--- a/app/assets/javascripts/groups/components/app.vue
+++ b/app/assets/javascripts/groups/components/app.vue
@@ -108,7 +108,7 @@ export default {
     fetchGroups({ parentId, page, filterGroupsBy, sortBy, archived, updatePagination }) {
       return this.service
         .getGroups(parentId, page, filterGroupsBy, sortBy, archived)
-        .then(res => {
+        .then((res) => {
           if (updatePagination) {
             this.updatePagination(res.headers);
           }
@@ -135,7 +135,7 @@ export default {
         sortBy,
         archived,
         updatePagination: true,
-      }).then(res => {
+      }).then((res) => {
         this.isLoading = false;
         this.updateGroups(res, Boolean(filterGroupsBy));
       });
@@ -149,7 +149,7 @@ export default {
         sortBy,
         archived,
         updatePagination: true,
-      }).then(res => {
+      }).then((res) => {
         this.isLoading = false;
         $.scrollTo(0);
 
@@ -173,7 +173,7 @@ export default {
           this.fetchGroups({
             parentId: parentGroup.id,
           })
-            .then(res => {
+            .then((res) => {
               this.store.setGroupChildren(parentGroup, res);
             })
             .catch(() => {
@@ -194,12 +194,12 @@ export default {
       this.targetGroup.isBeingRemoved = true;
       this.service
         .leaveGroup(this.targetGroup.leavePath)
-        .then(res => {
+        .then((res) => {
           $.scrollTo(0);
           this.store.removeGroup(this.targetGroup, this.targetParentGroup);
           this.$toast.show(res.data.notice);
         })
-        .catch(err => {
+        .catch((err) => {
           let message = COMMON_STR.FAILURE;
           if (err.status === 403) {
             message = COMMON_STR.LEAVE_FORBIDDEN;
diff --git a/app/assets/javascripts/groups/components/visibility_level_dropdown.vue b/app/assets/javascripts/groups/components/visibility_level_dropdown.vue
index ff0f8c3ff46..0933045fc38 100644
--- a/app/assets/javascripts/groups/components/visibility_level_dropdown.vue
+++ b/app/assets/javascripts/groups/components/visibility_level_dropdown.vue
@@ -23,7 +23,7 @@ export default {
   },
   methods: {
     getDefaultOption() {
-      return this.visibilityLevelOptions.find(option => option.level === this.defaultLevel);
+      return this.visibilityLevelOptions.find((option) => option.level === this.defaultLevel);
     },
     onClick(option) {
       this.selectedOption = option;
diff --git a/app/assets/javascripts/groups/init_invite_members_banner.js b/app/assets/javascripts/groups/init_invite_members_banner.js
index c7967827917..2052dd6ac8c 100644
--- a/app/assets/javascripts/groups/init_invite_members_banner.js
+++ b/app/assets/javascripts/groups/init_invite_members_banner.js
@@ -18,6 +18,6 @@ export default function initInviteMembersBanner() {
       isDismissedKey,
       trackLabel,
     },
-    render: createElement => createElement(InviteMembersBanner),
+    render: (createElement) => createElement(InviteMembersBanner),
   });
 }
diff --git a/app/assets/javascripts/groups/members/index.js b/app/assets/javascripts/groups/members/index.js
index 9ce0e3c1179..3ec874b8d36 100644
--- a/app/assets/javascripts/groups/members/index.js
+++ b/app/assets/javascripts/groups/members/index.js
@@ -38,6 +38,6 @@ export const initGroupMembersApp = (
     el,
     components: { App },
     store,
-    render: createElement => createElement('app'),
+    render: (createElement) => createElement('app'),
   });
 };
diff --git a/app/assets/javascripts/groups/members/utils.js b/app/assets/javascripts/groups/members/utils.js
index 2d584556bbc..4fcf348b69f 100644
--- a/app/assets/javascripts/groups/members/utils.js
+++ b/app/assets/javascripts/groups/members/utils.js
@@ -7,7 +7,7 @@ import {
   GROUP_LINK_ACCESS_LEVEL_PROPERTY_NAME,
 } from './constants';
 
-export const parseDataAttributes = el => {
+export const parseDataAttributes = (el) => {
   const { members, groupId, memberPath, canManageMembers } = el.dataset;
 
   return {
diff --git a/app/assets/javascripts/groups/store/groups_store.js b/app/assets/javascripts/groups/store/groups_store.js
index b6cea38e87f..6cf70f4052e 100644
--- a/app/assets/javascripts/groups/store/groups_store.js
+++ b/app/assets/javascripts/groups/store/groups_store.js
@@ -12,15 +12,15 @@ export default class GroupsStore {
 
   setGroups(rawGroups) {
     if (rawGroups && rawGroups.length) {
-      this.state.groups = rawGroups.map(rawGroup => this.formatGroupItem(rawGroup));
+      this.state.groups = rawGroups.map((rawGroup) => this.formatGroupItem(rawGroup));
     } else {
       this.state.groups = [];
     }
   }
 
   setSearchedGroups(rawGroups) {
-    const formatGroups = groups =>
-      groups.map(group => {
+    const formatGroups = (groups) =>
+      groups.map((group) => {
         const formattedGroup = this.formatGroupItem(group);
         if (formattedGroup.children && formattedGroup.children.length) {
           formattedGroup.children = formatGroups(formattedGroup.children);
@@ -37,7 +37,7 @@ export default class GroupsStore {
 
   setGroupChildren(parentGroup, children) {
     const updatedParentGroup = parentGroup;
-    updatedParentGroup.children = children.map(rawChild => this.formatGroupItem(rawChild));
+    updatedParentGroup.children = children.map((rawChild) => this.formatGroupItem(rawChild));
     updatedParentGroup.isOpen = true;
     updatedParentGroup.isChildrenLoading = false;
   }
@@ -103,9 +103,9 @@ export default class GroupsStore {
   removeGroup(group, parentGroup) {
     const updatedParentGroup = parentGroup;
     if (updatedParentGroup.children && updatedParentGroup.children.length) {
-      updatedParentGroup.children = parentGroup.children.filter(child => group.id !== child.id);
+      updatedParentGroup.children = parentGroup.children.filter((child) => group.id !== child.id);
     } else {
-      this.state.groups = this.state.groups.filter(child => group.id !== child.id);
+      this.state.groups = this.state.groups.filter((child) => group.id !== child.id);
     }
   }
 }
diff --git a/app/assets/javascripts/groups/transfer_dropdown.js b/app/assets/javascripts/groups/transfer_dropdown.js
index cefd803c631..59cc779d2ae 100644
--- a/app/assets/javascripts/groups/transfer_dropdown.js
+++ b/app/assets/javascripts/groups/transfer_dropdown.js
@@ -20,11 +20,11 @@ export default class TransferDropdown {
     initDeprecatedJQueryDropdown(this.groupDropdown, {
       selectable: true,
       filterable: true,
-      toggleLabel: item => item.text,
+      toggleLabel: (item) => item.text,
       search: { fields: ['text'] },
       data: extraOptions.concat(this.data),
-      text: item => item.text,
-      clicked: options => {
+      text: (item) => item.text,
+      clicked: (options) => {
         const { e } = options;
         e.preventDefault();
         this.assignSelected(options.selectedObj);
diff --git a/app/assets/javascripts/groups_select.js b/app/assets/javascripts/groups_select.js
index 29af8c77d25..c65fff432d0 100644
--- a/app/assets/javascripts/groups_select.js
+++ b/app/assets/javascripts/groups_select.js
@@ -6,11 +6,11 @@ import { normalizeHeaders } from './lib/utils/common_utils';
 import { __ } from '~/locale';
 import { loadCSSFile } from './lib/utils/css_utils';
 
-const fetchGroups = params => {
+const fetchGroups = (params) => {
   axios[params.type.toLowerCase()](params.url, {
     params: params.data,
   })
-    .then(res => {
+    .then((res) => {
       const results = res.data || [];
       const headers = normalizeHeaders(res.headers);
       const currentPage = parseInt(headers['X-PAGE'], 10) || 0;
@@ -67,7 +67,7 @@ const groupsSelect = () => {
 
               const groups = data.length ? data : data.results || [];
               const more = data.pagination ? data.pagination.more : false;
-              const results = groups.filter(group => skipGroups.indexOf(group.id) === -1);
+              const results = groups.filter((group) => skipGroups.indexOf(group.id) === -1);
 
               return {
                 results,
diff --git a/app/assets/javascripts/helpers/event_hub_factory.js b/app/assets/javascripts/helpers/event_hub_factory.js
index a9c301e3a93..62af67d3ef3 100644
--- a/app/assets/javascripts/helpers/event_hub_factory.js
+++ b/app/assets/javascripts/helpers/event_hub_factory.js
@@ -45,7 +45,7 @@ class EventHub {
   $off(type, handler) {
     const handlers = this.$_all.get(type) || [];
 
-    const newHandlers = handler ? handlers.filter(x => x !== handler) : [];
+    const newHandlers = handler ? handlers.filter((x) => x !== handler) : [];
 
     if (newHandlers.length) {
       this.$_all.set(type, newHandlers);
@@ -77,7 +77,7 @@ class EventHub {
   $emit(type, ...args) {
     const handlers = this.$_all.get(type) || [];
 
-    handlers.forEach(handler => {
+    handlers.forEach((handler) => {
       handler(...args);
     });
   }
diff --git a/app/assets/javascripts/helpers/monitor_helper.js b/app/assets/javascripts/helpers/monitor_helper.js
index 5e345321013..7c6a6d6a433 100644
--- a/app/assets/javascripts/helpers/monitor_helper.js
+++ b/app/assets/javascripts/helpers/monitor_helper.js
@@ -38,7 +38,7 @@ const templatedLabel = (queryLabel, metricAttributes) => {
  * @example
  * multiMetricLabel('', {__name__: "up", app: "prometheus"}) -> "__name__: up, app: prometheus"
  */
-const multiMetricLabel = metricAttributes => {
+const multiMetricLabel = (metricAttributes) => {
   return Object.entries(metricAttributes)
     .map(([templateVar, label]) => `${templateVar}: ${label}`)
     .join(', ');
@@ -64,7 +64,7 @@ export const getSeriesLabel = (queryLabel, metricAttributes) => {
  * @returns {Array} The formatted values
  */
 export const makeDataSeries = (queryResults, defaultConfig) =>
-  queryResults.map(result => {
+  queryResults.map((result) => {
     return {
       ...defaultConfig,
       data: result.values,
diff --git a/app/assets/javascripts/helpers/startup_css_helper.js b/app/assets/javascripts/helpers/startup_css_helper.js
index d41a6209898..0f62a13bd8c 100644
--- a/app/assets/javascripts/helpers/startup_css_helper.js
+++ b/app/assets/javascripts/helpers/startup_css_helper.js
@@ -23,13 +23,13 @@ const handleStartupEvents = () => {
 /* For `waitForCSSLoaded` methods, see docs.gitlab.com/ee/development/fe_guide/performance.html#important-considerations */
 export const waitForCSSLoaded = (action = () => {}) => {
   if (!gon?.features?.startupCss || allLinksLoaded()) {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
       action();
       resolve();
     });
   }
 
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     document.addEventListener(CSS_LOADED_EVENT, resolve, { once: true });
     document.addEventListener(STARTUP_LINK_LOADED_EVENT, handleStartupEvents);
   }).then(action);
diff --git a/app/assets/javascripts/ide/commit_icon.js b/app/assets/javascripts/ide/commit_icon.js
index 4984b5bb91d..70ee9cff22b 100644
--- a/app/assets/javascripts/ide/commit_icon.js
+++ b/app/assets/javascripts/ide/commit_icon.js
@@ -1,6 +1,6 @@
 import { commitItemIconMap } from './constants';
 
-export default file => {
+export default (file) => {
   if (file.deleted) {
     return commitItemIconMap.deleted;
   } else if (file.tempFile && !file.prevPath) {
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
index 123e0aba959..4192a002486 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
@@ -63,7 +63,7 @@ export default {
       return this.openPendingTab({
         file: this.file,
         keyPrefix: this.keyPrefix,
-      }).then(changeViewer => {
+      }).then((changeViewer) => {
         if (changeViewer) {
           this.updateViewer(viewerTypes.diff);
         }
diff --git a/app/assets/javascripts/ide/components/file_templates/bar.vue b/app/assets/javascripts/ide/components/file_templates/bar.vue
index 88dca2f0556..bd4c4f18141 100644
--- a/app/assets/javascripts/ide/components/file_templates/bar.vue
+++ b/app/assets/javascripts/ide/components/file_templates/bar.vue
@@ -29,7 +29,7 @@ export default {
       'undoFileTemplate',
     ]),
     setInitialType() {
-      const initialTemplateType = this.templateTypes.find(t => t.name === this.activeFile.name);
+      const initialTemplateType = this.templateTypes.find((t) => t.name === this.activeFile.name);
 
       if (initialTemplateType) {
         this.setSelectedTemplateType(initialTemplateType);
diff --git a/app/assets/javascripts/ide/components/file_templates/dropdown.vue b/app/assets/javascripts/ide/components/file_templates/dropdown.vue
index 5d5b66a6444..772dab3fed3 100644
--- a/app/assets/javascripts/ide/components/file_templates/dropdown.vue
+++ b/app/assets/javascripts/ide/components/file_templates/dropdown.vue
@@ -44,7 +44,7 @@ export default {
   computed: {
     ...mapState('fileTemplates', ['templates', 'isLoading']),
     outputData() {
-      return (this.isAsyncData ? this.templates : this.data).filter(t => {
+      return (this.isAsyncData ? this.templates : this.data).filter((t) => {
         if (!this.searchable) return true;
 
         return t.name.toLowerCase().indexOf(this.search.toLowerCase()) >= 0;
diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index f8568f46cd6..aac899fde0d 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -73,7 +73,7 @@ export default {
     },
   },
   mounted() {
-    window.onbeforeunload = e => this.onBeforeUnload(e);
+    window.onbeforeunload = (e) => this.onBeforeUnload(e);
 
     if (this.themeName)
       document.querySelector('.navbar-gitlab').classList.add(`theme-${this.themeName}`);
diff --git a/app/assets/javascripts/ide/components/ide_sidebar_nav.vue b/app/assets/javascripts/ide/components/ide_sidebar_nav.vue
index 966c36d6e71..9dbed0ace40 100644
--- a/app/assets/javascripts/ide/components/ide_sidebar_nav.vue
+++ b/app/assets/javascripts/ide/components/ide_sidebar_nav.vue
@@ -37,7 +37,7 @@ export default {
   },
   methods: {
     isActiveTab(tab) {
-      return this.isOpen && tab.views.some(view => view.name === this.currentView);
+      return this.isOpen && tab.views.some((view) => view.name === this.currentView);
     },
     buttonClasses(tab) {
       return [
diff --git a/app/assets/javascripts/ide/components/new_dropdown/upload.vue b/app/assets/javascripts/ide/components/new_dropdown/upload.vue
index a261bea95f9..51faa90c511 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/upload.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/upload.vue
@@ -30,7 +30,7 @@ export default {
       const rawContent = encodedContent ? atob(encodedContent) : '';
       const isText = isTextFile({ content: rawContent, mimeType, name });
 
-      const emitCreateEvent = content =>
+      const emitCreateEvent = (content) =>
         this.$emit('create', {
           name: `${this.path ? `${this.path}/` : ''}${name}`,
           type: 'blob',
@@ -42,7 +42,7 @@ export default {
       if (isText) {
         const reader = new FileReader();
 
-        reader.addEventListener('load', e => emitCreateEvent(e.target.result), { once: true });
+        reader.addEventListener('load', (e) => emitCreateEvent(e.target.result), { once: true });
         reader.readAsText(file);
       } else {
         emitCreateEvent(rawContent);
@@ -51,11 +51,11 @@ export default {
     readFile(file) {
       const reader = new FileReader();
 
-      reader.addEventListener('load', e => this.createFile(e.target, file), { once: true });
+      reader.addEventListener('load', (e) => this.createFile(e.target, file), { once: true });
       reader.readAsDataURL(file);
     },
     openFile() {
-      Array.from(this.$refs.fileUpload.files).forEach(file => this.readFile(file));
+      Array.from(this.$refs.fileUpload.files).forEach((file) => this.readFile(file));
     },
     startFileUpload() {
       this.$refs.fileUpload.click();
diff --git a/app/assets/javascripts/ide/components/panes/collapsible_sidebar.vue b/app/assets/javascripts/ide/components/panes/collapsible_sidebar.vue
index 87019c3b2a5..6f42ae48cc9 100644
--- a/app/assets/javascripts/ide/components/panes/collapsible_sidebar.vue
+++ b/app/assets/javascripts/ide/components/panes/collapsible_sidebar.vue
@@ -35,13 +35,13 @@ export default {
       return `${this.side}Pane`;
     },
     tabs() {
-      return this.extensionTabs.filter(tab => tab.show);
+      return this.extensionTabs.filter((tab) => tab.show);
     },
     tabViews() {
-      return this.tabs.map(tab => tab.views).flat();
+      return this.tabs.map((tab) => tab.views).flat();
     },
     aliveTabViews() {
-      return this.tabViews.filter(view => this.isAliveView(view.name));
+      return this.tabViews.filter((view) => this.isAliveView(view.name));
     },
   },
   methods: {
diff --git a/app/assets/javascripts/ide/components/preview/clientside.vue b/app/assets/javascripts/ide/components/preview/clientside.vue
index f65b1201d94..c9adc6d6d0c 100644
--- a/app/assets/javascripts/ide/components/preview/clientside.vue
+++ b/app/assets/javascripts/ide/components/preview/clientside.vue
@@ -108,7 +108,7 @@ export default {
         .then(() => {
           this.initManager();
 
-          this.listener = listen(e => {
+          this.listener = listen((e) => {
             switch (e.type) {
               case 'done':
                 this.sandpackReady = true;
@@ -139,8 +139,8 @@ export default {
 
       const settings = {
         fileResolver: {
-          isFile: p => Promise.resolve(Boolean(this.entries[createPathWithExt(p)])),
-          readFile: p => this.loadFileContent(createPathWithExt(p)).then(content => content),
+          isFile: (p) => Promise.resolve(Boolean(this.entries[createPathWithExt(p)])),
+          readFile: (p) => this.loadFileContent(createPathWithExt(p)).then((content) => content),
         },
         ...(bundlerURL ? { bundlerURL } : {}),
       };
diff --git a/app/assets/javascripts/ide/components/preview/navigator.vue b/app/assets/javascripts/ide/components/preview/navigator.vue
index 60710251fef..8986359427f 100644
--- a/app/assets/javascripts/ide/components/preview/navigator.vue
+++ b/app/assets/javascripts/ide/components/preview/navigator.vue
@@ -31,7 +31,7 @@ export default {
     },
   },
   mounted() {
-    this.listener = listen(e => {
+    this.listener = listen((e) => {
       switch (e.type) {
         case 'urlchange':
           this.onUrlChange(e);
diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue
index dfd25feed08..8092ef3bce6 100644
--- a/app/assets/javascripts/ide/components/repo_commit_section.vue
+++ b/app/assets/javascripts/ide/components/repo_commit_section.vue
@@ -41,12 +41,12 @@ export default {
         file,
         keyPrefix: file.staged ? stageKeys.staged : stageKeys.unstaged,
       })
-        .then(changeViewer => {
+        .then((changeViewer) => {
           if (changeViewer) {
             this.updateViewer('diff');
           }
         })
-        .catch(e => {
+        .catch((e) => {
           throw e;
         });
     },
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index 54b16e9b8af..a9c05f2e1ac 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -219,7 +219,7 @@ export default {
         .then(() => {
           this.createEditorInstance();
         })
-        .catch(err => {
+        .catch((err) => {
           flash(
             __('Error setting up editor. Please try again.'),
             'alert',
@@ -281,7 +281,7 @@ export default {
 
       this.model.updateOptions(this.rules);
 
-      this.model.onChange(model => {
+      this.model.onChange((model) => {
         const { file } = model;
         if (!file.active) return;
 
@@ -329,7 +329,7 @@ export default {
       }
     },
     fetchEditorconfigRules() {
-      return getRulesWithTraversal(this.file.path, path => {
+      return getRulesWithTraversal(this.file.path, (path) => {
         const entry = this.entries[path];
         if (!entry) return Promise.resolve(null);
 
@@ -339,7 +339,7 @@ export default {
         return this.getFileData({ path: entry.path, makeFileActive: false }).then(() =>
           this.getRawFileData({ path: entry.path }),
         );
-      }).then(rules => {
+      }).then((rules) => {
         this.rules = mapRulesToMonaco(rules);
       });
     },
@@ -353,7 +353,7 @@ export default {
         event.preventDefault();
         event.stopImmediatePropagation();
 
-        return readFileAsDataURL(file).then(content => {
+        return readFileAsDataURL(file).then((content) => {
           const parentPath = getPathParent(this.file.path);
           const path = `${parentPath ? `${parentPath}/` : ''}${file.name}`;
 
diff --git a/app/assets/javascripts/ide/ide_router.js b/app/assets/javascripts/ide/ide_router.js
index b9ebacef7e1..0e6775d87f1 100644
--- a/app/assets/javascripts/ide/ide_router.js
+++ b/app/assets/javascripts/ide/ide_router.js
@@ -39,7 +39,7 @@ const EmptyRouterComponent = {
   },
 };
 
-export const createRouter = store => {
+export const createRouter = (store) => {
   const router = new IdeRouter({
     mode: 'history',
     base: joinPaths(gon.relative_url_root || '', '/-/ide/'),
@@ -54,11 +54,11 @@ export const createRouter = store => {
           },
           {
             path: ':targetmode(edit|tree|blob)/:branchid+/',
-            redirect: to => joinPaths(to.path, '/-/'),
+            redirect: (to) => joinPaths(to.path, '/-/'),
           },
           {
             path: ':targetmode(edit|tree|blob)',
-            redirect: to => joinPaths(to.path, '/master/-/'),
+            redirect: (to) => joinPaths(to.path, '/master/-/'),
           },
           {
             path: 'merge_requests/:mrid',
@@ -66,7 +66,7 @@ export const createRouter = store => {
           },
           {
             path: '',
-            redirect: to => joinPaths(to.path, '/edit/master/-/'),
+            redirect: (to) => joinPaths(to.path, '/edit/master/-/'),
           },
         ],
       },
@@ -110,7 +110,7 @@ export const createRouter = store => {
             });
           }
         })
-        .catch(e => {
+        .catch((e) => {
           flash(
             __('Error while loading the project data. Please try again.'),
             'alert',
diff --git a/app/assets/javascripts/ide/lib/common/disposable.js b/app/assets/javascripts/ide/lib/common/disposable.js
index 84b29bdb600..c5d0773c9a2 100644
--- a/app/assets/javascripts/ide/lib/common/disposable.js
+++ b/app/assets/javascripts/ide/lib/common/disposable.js
@@ -4,11 +4,11 @@ export default class Disposable {
   }
 
   add(...disposers) {
-    disposers.forEach(disposer => this.disposers.add(disposer));
+    disposers.forEach((disposer) => this.disposers.add(disposer));
   }
 
   dispose() {
-    this.disposers.forEach(disposer => disposer.dispose());
+    this.disposers.forEach((disposer) => disposer.dispose());
     this.disposers.clear();
   }
 }
diff --git a/app/assets/javascripts/ide/lib/common/model.js b/app/assets/javascripts/ide/lib/common/model.js
index 2471b3627ce..4969875439e 100644
--- a/app/assets/javascripts/ide/lib/common/model.js
+++ b/app/assets/javascripts/ide/lib/common/model.js
@@ -75,7 +75,7 @@ export default class Model {
   }
 
   onChange(cb) {
-    this.events.add(this.disposable.add(this.model.onDidChangeContent(e => cb(this, e))));
+    this.events.add(this.disposable.add(this.model.onDidChangeContent((e) => cb(this, e))));
   }
 
   onDispose(cb) {
@@ -121,7 +121,7 @@ export default class Model {
   dispose() {
     if (!this.model.isDisposed()) this.applyCustomOptions();
 
-    this.events.forEach(cb => {
+    this.events.forEach((cb) => {
       if (typeof cb === 'function') cb();
     });
 
diff --git a/app/assets/javascripts/ide/lib/create_file_diff.js b/app/assets/javascripts/ide/lib/create_file_diff.js
index 5ae4993321c..b417b4765d8 100644
--- a/app/assets/javascripts/ide/lib/create_file_diff.js
+++ b/app/assets/javascripts/ide/lib/create_file_diff.js
@@ -12,13 +12,13 @@ const NEW_LINE = '\n';
  *
  * - Removes "=======" separator added at the beginning
  */
-const cleanTwoFilesPatch = text => text.replace(/^(=+\s*)/, '');
+const cleanTwoFilesPatch = (text) => text.replace(/^(=+\s*)/, '');
 
-const endsWithNewLine = val => !val || val[val.length - 1] === NEW_LINE;
+const endsWithNewLine = (val) => !val || val[val.length - 1] === NEW_LINE;
 
-const addEndingNewLine = val => (endsWithNewLine(val) ? val : val + NEW_LINE);
+const addEndingNewLine = (val) => (endsWithNewLine(val) ? val : val + NEW_LINE);
 
-const removeEndingNewLine = val => (endsWithNewLine(val) ? val.substr(0, val.length - 1) : val);
+const removeEndingNewLine = (val) => (endsWithNewLine(val) ? val.substr(0, val.length - 1) : val);
 
 const diffHead = (prevPath, newPath = '') =>
   `diff --git "a/${prevPath}" "b/${newPath || prevPath}"`;
@@ -37,7 +37,7 @@ const createDiffBody = (path, content, isCreate) => {
 
   const chunkHead = isCreate ? `@@ -0,0 +1,${lines.length} @@` : `@@ -1,${lines.length} +0,0 @@`;
   const chunk = lines
-    .map(line => `${prefix}${line}`)
+    .map((line) => `${prefix}${line}`)
     .concat(!hasNewLine ? [NO_NEW_LINE] : [])
     .join(NEW_LINE);
 
diff --git a/app/assets/javascripts/ide/lib/decorations/controller.js b/app/assets/javascripts/ide/lib/decorations/controller.js
index 13d477bb2cf..b5d3eb10952 100644
--- a/app/assets/javascripts/ide/lib/decorations/controller.js
+++ b/app/assets/javascripts/ide/lib/decorations/controller.js
@@ -11,7 +11,7 @@ export default class DecorationsController {
     const modelDecorations = this.decorations.get(model.url);
     const decorations = [];
 
-    modelDecorations.forEach(val => decorations.push(...val));
+    modelDecorations.forEach((val) => decorations.push(...val));
 
     return decorations;
   }
diff --git a/app/assets/javascripts/ide/lib/diff/controller.js b/app/assets/javascripts/ide/lib/diff/controller.js
index 35fcda6a6c5..3efe692be13 100644
--- a/app/assets/javascripts/ide/lib/diff/controller.js
+++ b/app/assets/javascripts/ide/lib/diff/controller.js
@@ -3,7 +3,7 @@ import { throttle } from 'lodash';
 import DirtyDiffWorker from './diff_worker';
 import Disposable from '../common/disposable';
 
-export const getDiffChangeType = change => {
+export const getDiffChangeType = (change) => {
   if (change.modified) {
     return 'modified';
   } else if (change.added) {
@@ -15,7 +15,7 @@ export const getDiffChangeType = change => {
   return '';
 };
 
-export const getDecorator = change => ({
+export const getDecorator = (change) => ({
   range: new Range(change.lineNumber, 1, change.endLineNumber, 1),
   options: {
     isWholeLine: true,
@@ -71,7 +71,7 @@ export default class DirtyDiffController {
   }
 
   decorate({ data }) {
-    const decorations = data.changes.map(change => getDecorator(change));
+    const decorations = data.changes.map((change) => getDecorator(change));
     const model = this.modelManager.getModel(data.path);
     this.decorationsController.addDecorations(model, 'dirtyDiff', decorations);
   }
diff --git a/app/assets/javascripts/ide/lib/diff/diff.js b/app/assets/javascripts/ide/lib/diff/diff.js
index 62ec798b372..5a6401f56ec 100644
--- a/app/assets/javascripts/ide/lib/diff/diff.js
+++ b/app/assets/javascripts/ide/lib/diff/diff.js
@@ -11,7 +11,7 @@ export const computeDiff = (originalContent, newContent) => {
 
   let lineNumber = 1;
   return changes.reduce((acc, change) => {
-    const findOnLine = acc.find(c => c.lineNumber === lineNumber);
+    const findOnLine = acc.find((c) => c.lineNumber === lineNumber);
 
     if (findOnLine) {
       Object.assign(findOnLine, change, {
diff --git a/app/assets/javascripts/ide/lib/diff/diff_worker.js b/app/assets/javascripts/ide/lib/diff/diff_worker.js
index 77416a8de9d..78b2eab6399 100644
--- a/app/assets/javascripts/ide/lib/diff/diff_worker.js
+++ b/app/assets/javascripts/ide/lib/diff/diff_worker.js
@@ -1,7 +1,7 @@
 import { computeDiff } from './diff';
 
 // eslint-disable-next-line no-restricted-globals
-self.addEventListener('message', e => {
+self.addEventListener('message', (e) => {
   const { data } = e;
 
   // eslint-disable-next-line no-restricted-globals
diff --git a/app/assets/javascripts/ide/lib/editor.js b/app/assets/javascripts/ide/lib/editor.js
index 493dedcd89a..4fad0c09ce7 100644
--- a/app/assets/javascripts/ide/lib/editor.js
+++ b/app/assets/javascripts/ide/lib/editor.js
@@ -12,7 +12,7 @@ import { clearDomElement } from '~/editor/utils';
 import { registerLanguages } from '../utils';
 
 function setupThemes() {
-  themes.forEach(theme => {
+  themes.forEach((theme) => {
     monacoEditor.defineTheme(theme.name, theme.data);
   });
 }
@@ -108,7 +108,7 @@ export default class Editor {
 
     this.instance.updateOptions(
       editorOptions.reduce((acc, obj) => {
-        Object.keys(obj).forEach(key => {
+        Object.keys(obj).forEach((key) => {
           Object.assign(acc, {
             [key]: obj[key](model),
           });
@@ -177,7 +177,7 @@ export default class Editor {
   onPositionChange(cb) {
     if (!this.instance.onDidChangeCursorPosition) return;
 
-    this.disposable.add(this.instance.onDidChangeCursorPosition(e => cb(this.instance, e)));
+    this.disposable.add(this.instance.onDidChangeCursorPosition((e) => cb(this.instance, e)));
   }
 
   updateDiffView() {
@@ -213,14 +213,14 @@ export default class Editor {
 
   addCommands() {
     const { store } = this;
-    const getKeyCode = key => {
+    const getKeyCode = (key) => {
       const monacoKeyMod = key.indexOf('KEY_') === 0;
 
       return monacoKeyMod ? KeyCode[key] : KeyMod[key];
     };
 
-    keymap.forEach(command => {
-      const keybindings = command.bindings.map(binding => {
+    keymap.forEach((command) => {
+      const keybindings = command.bindings.map((binding) => {
         const keys = binding.split('+');
 
         // eslint-disable-next-line no-bitwise
diff --git a/app/assets/javascripts/ide/lib/editor_options.js b/app/assets/javascripts/ide/lib/editor_options.js
index f182a1ec50e..9f2a9a8cf4a 100644
--- a/app/assets/javascripts/ide/lib/editor_options.js
+++ b/app/assets/javascripts/ide/lib/editor_options.js
@@ -31,7 +31,7 @@ export const defaultModelOptions = {
 
 export const editorOptions = [
   {
-    readOnly: model => Boolean(model.file.file_lock),
-    quickSuggestions: model => !(model.language === 'markdown'),
+    readOnly: (model) => Boolean(model.file.file_lock),
+    quickSuggestions: (model) => !(model.language === 'markdown'),
   },
 ];
diff --git a/app/assets/javascripts/ide/lib/editorconfig/parser.js b/app/assets/javascripts/ide/lib/editorconfig/parser.js
index 838302c327f..2adc643a15b 100644
--- a/app/assets/javascripts/ide/lib/editorconfig/parser.js
+++ b/app/assets/javascripts/ide/lib/editorconfig/parser.js
@@ -2,7 +2,7 @@ import { parseString } from 'editorconfig/src/lib/ini';
 import minimatch from 'minimatch';
 import { getPathParents } from '../../utils';
 
-const dirname = path => path.replace(/\.editorconfig$/, '');
+const dirname = (path) => path.replace(/\.editorconfig$/, '');
 
 function isRootConfig(config) {
   return config.some(([pattern, rules]) => !pattern && rules?.root === 'true');
@@ -44,16 +44,16 @@ function getRulesWithConfigs(filePath, configFiles = [], rules = {}) {
 
 export function getRulesWithTraversal(filePath, getFileContent) {
   const editorconfigPaths = [
-    ...getPathParents(filePath).map(x => `${x}/.editorconfig`),
+    ...getPathParents(filePath).map((x) => `${x}/.editorconfig`),
     '.editorconfig',
   ];
 
   return Promise.all(
-    editorconfigPaths.map(path => getFileContent(path).then(content => ({ path, content }))),
-  ).then(results =>
+    editorconfigPaths.map((path) => getFileContent(path).then((content) => ({ path, content }))),
+  ).then((results) =>
     getRulesWithConfigs(
       filePath,
-      results.filter(x => x.content),
+      results.filter((x) => x.content),
     ),
   );
 }
diff --git a/app/assets/javascripts/ide/lib/editorconfig/rules_mapper.js b/app/assets/javascripts/ide/lib/editorconfig/rules_mapper.js
index f9d5579511a..25ffa9a15be 100644
--- a/app/assets/javascripts/ide/lib/editorconfig/rules_mapper.js
+++ b/app/assets/javascripts/ide/lib/editorconfig/rules_mapper.js
@@ -1,23 +1,23 @@
 import { isBoolean, isNumber } from 'lodash';
 
-const map = (key, validValues) => value =>
+const map = (key, validValues) => (value) =>
   value in validValues ? { [key]: validValues[value] } : {};
 
-const bool = key => value => (isBoolean(value) ? { [key]: value } : {});
+const bool = (key) => (value) => (isBoolean(value) ? { [key]: value } : {});
 
-const int = (key, isValid) => value =>
+const int = (key, isValid) => (value) =>
   isNumber(value) && isValid(value) ? { [key]: Math.trunc(value) } : {};
 
 const rulesMapper = {
   indent_style: map('insertSpaces', { tab: false, space: true }),
-  indent_size: int('tabSize', n => n > 0),
-  tab_width: int('tabSize', n => n > 0),
+  indent_size: int('tabSize', (n) => n > 0),
+  tab_width: int('tabSize', (n) => n > 0),
   trim_trailing_whitespace: bool('trimTrailingWhitespace'),
   end_of_line: map('endOfLine', { crlf: 1, lf: 0 }),
   insert_final_newline: bool('insertFinalNewline'),
 };
 
-const parseValue = x => {
+const parseValue = (x) => {
   let value = typeof x === 'string' ? x.toLowerCase() : x;
   if (/^[0-9.-]+$/.test(value)) value = Number(value);
   if (value === 'true') value = true;
diff --git a/app/assets/javascripts/ide/lib/errors.js b/app/assets/javascripts/ide/lib/errors.js
index e62d9d1e77f..f975034a872 100644
--- a/app/assets/javascripts/ide/lib/errors.js
+++ b/app/assets/javascripts/ide/lib/errors.js
@@ -6,17 +6,17 @@ const CODEOWNERS_REGEX = /Push.*protected branches.*CODEOWNERS/;
 const BRANCH_CHANGED_REGEX = /changed.*since.*start.*edit/;
 const BRANCH_ALREADY_EXISTS = /branch.*already.*exists/;
 
-const createNewBranchAndCommit = store =>
+const createNewBranchAndCommit = (store) =>
   store
     .dispatch('commit/updateCommitAction', consts.COMMIT_TO_NEW_BRANCH)
     .then(() => store.dispatch('commit/commitChanges'));
 
-export const createUnexpectedCommitError = message => ({
+export const createUnexpectedCommitError = (message) => ({
   title: __('Unexpected error'),
   messageHTML: escape(message) || __('Could not commit. An unexpected error occurred.'),
 });
 
-export const createCodeownersCommitError = message => ({
+export const createCodeownersCommitError = (message) => ({
   title: __('CODEOWNERS rule violation'),
   messageHTML: escape(message),
   primaryAction: {
@@ -25,7 +25,7 @@ export const createCodeownersCommitError = message => ({
   },
 });
 
-export const createBranchChangedCommitError = message => ({
+export const createBranchChangedCommitError = (message) => ({
   title: __('Branch changed'),
   messageHTML: `${escape(message)}<br/><br/>${__('Would you like to create a new branch?')}`,
   primaryAction: {
@@ -34,19 +34,19 @@ export const createBranchChangedCommitError = message => ({
   },
 });
 
-export const branchAlreadyExistsCommitError = message => ({
+export const branchAlreadyExistsCommitError = (message) => ({
   title: __('Branch already exists'),
   messageHTML: `${escape(message)}<br/><br/>${__(
     'Would you like to try auto-generating a branch name?',
   )}`,
   primaryAction: {
     text: __('Create new branch'),
-    callback: store =>
+    callback: (store) =>
       store.dispatch('commit/addSuffixToBranchName').then(() => createNewBranchAndCommit(store)),
   },
 });
 
-export const parseCommitError = e => {
+export const parseCommitError = (e) => {
   const { message } = e?.response?.data || {};
 
   if (!message) {
diff --git a/app/assets/javascripts/ide/lib/files.js b/app/assets/javascripts/ide/lib/files.js
index bc5140654a1..3fdf012bbb2 100644
--- a/app/assets/javascripts/ide/lib/files.js
+++ b/app/assets/javascripts/ide/lib/files.js
@@ -1,6 +1,6 @@
 import { decorateData, sortTree } from '../stores/utils';
 
-export const splitParent = path => {
+export const splitParent = (path) => {
   const idx = path.lastIndexOf('/');
 
   return {
@@ -32,7 +32,7 @@ export const decorateFiles = ({
   let file;
   let parentPath;
 
-  const insertParent = path => {
+  const insertParent = (path) => {
     if (!path) {
       return null;
     } else if (entries[path]) {
@@ -67,7 +67,7 @@ export const decorateFiles = ({
     return tree;
   };
 
-  data.forEach(path => {
+  data.forEach((path) => {
     const { parent, name } = splitParent(path);
 
     const fileFolder = parent && insertParent(parent);
diff --git a/app/assets/javascripts/ide/lib/mirror.js b/app/assets/javascripts/ide/lib/mirror.js
index a516c28ad7a..6f9cfec9465 100644
--- a/app/assets/javascripts/ide/lib/mirror.js
+++ b/app/assets/javascripts/ide/lib/mirror.js
@@ -12,23 +12,23 @@ export const MSG_CONNECTION_ERROR = __('Could not connect to Web IDE file mirror
 const noop = () => {};
 export const SERVICE_DELAY = 8000;
 
-const cancellableWait = time => {
+const cancellableWait = (time) => {
   let timeoutId = 0;
 
   const cancel = () => clearTimeout(timeoutId);
 
-  const promise = new Promise(resolve => {
+  const promise = new Promise((resolve) => {
     timeoutId = setTimeout(resolve, time);
   });
 
   return [promise, cancel];
 };
 
-const isErrorResponse = error => error && error.code !== 0;
+const isErrorResponse = (error) => error && error.code !== 0;
 
-const isErrorPayload = payload => payload && payload.status_code !== 200;
+const isErrorPayload = (payload) => payload && payload.status_code !== 200;
 
-const getErrorFromResponse = data => {
+const getErrorFromResponse = (data) => {
   if (isErrorResponse(data.error)) {
     return { message: data.error.Message };
   } else if (isErrorPayload(data.payload)) {
@@ -38,9 +38,9 @@ const getErrorFromResponse = data => {
   return null;
 };
 
-const getFullPath = path => mergeUrlParams({ service: SERVICE_NAME }, getWebSocketUrl(path));
+const getFullPath = (path) => mergeUrlParams({ service: SERVICE_NAME }, getWebSocketUrl(path));
 
-const createWebSocket = fullPath =>
+const createWebSocket = (fullPath) =>
   new Promise((resolve, reject) => {
     const socket = new WebSocket(fullPath, [PROTOCOL]);
     const resetCallbacks = () => {
@@ -59,7 +59,7 @@ const createWebSocket = fullPath =>
     };
   });
 
-export const canConnect = ({ services = [] }) => services.some(name => name === SERVICE_NAME);
+export const canConnect = ({ services = [] }) => services.some((name) => name === SERVICE_NAME);
 
 export const createMirror = () => {
   let socket = null;
@@ -71,23 +71,23 @@ export const createMirror = () => {
     cancelHandler = noop;
   };
 
-  const onCancelConnect = fn => {
+  const onCancelConnect = (fn) => {
     cancelHandler = fn;
   };
 
-  const receiveMessage = ev => {
+  const receiveMessage = (ev) => {
     const handle = nextMessageHandler;
     nextMessageHandler = noop;
     handle(JSON.parse(ev.data));
   };
 
-  const onNextMessage = fn => {
+  const onNextMessage = (fn) => {
     nextMessageHandler = fn;
   };
 
   const waitForNextMessage = () =>
     new Promise((resolve, reject) => {
-      onNextMessage(data => {
+      onNextMessage((data) => {
         const err = getErrorFromResponse(data);
 
         if (err) {
@@ -133,7 +133,7 @@ export const createMirror = () => {
 
       return wait
         .then(() => createWebSocket(fullPath))
-        .then(newSocket => {
+        .then((newSocket) => {
           socket = newSocket;
           socket.onmessage = receiveMessage;
         });
diff --git a/app/assets/javascripts/ide/services/index.js b/app/assets/javascripts/ide/services/index.js
index 6d012ee5854..2264d63c737 100644
--- a/app/assets/javascripts/ide/services/index.js
+++ b/app/assets/javascripts/ide/services/index.js
@@ -4,9 +4,9 @@ import Api from '~/api';
 import getUserPermissions from '../queries/getUserPermissions.query.graphql';
 import { query } from './gql';
 
-const fetchApiProjectData = projectPath => Api.project(projectPath).then(({ data }) => data);
+const fetchApiProjectData = (projectPath) => Api.project(projectPath).then(({ data }) => data);
 
-const fetchGqlProjectData = projectPath =>
+const fetchGqlProjectData = (projectPath) =>
   query({
     query: getUserPermissions,
     variables: { projectPath },
@@ -31,7 +31,7 @@ export default {
 
     return axios
       .get(file.rawPath, {
-        transformResponse: [f => f],
+        transformResponse: [(f) => f],
         ...options,
       })
       .then(({ data }) => data);
@@ -54,7 +54,7 @@ export default {
           escapeFileUrl(filePath),
         ),
         {
-          transformResponse: [f => f],
+          transformResponse: [(f) => f],
         },
       )
       .then(({ data }) => data);
diff --git a/app/assets/javascripts/ide/services/terminals.js b/app/assets/javascripts/ide/services/terminals.js
index 17b4329037d..ea54733baa4 100644
--- a/app/assets/javascripts/ide/services/terminals.js
+++ b/app/assets/javascripts/ide/services/terminals.js
@@ -1,6 +1,6 @@
 import axios from '~/lib/utils/axios_utils';
 
-export const baseUrl = projectPath => `/${projectPath}/ide_terminals`;
+export const baseUrl = (projectPath) => `/${projectPath}/ide_terminals`;
 
 export const checkConfig = (projectPath, branch) =>
   axios.post(`${baseUrl(projectPath)}/check_config`, {
diff --git a/app/assets/javascripts/ide/stores/actions.js b/app/assets/javascripts/ide/stores/actions.js
index 9dbb5c20578..d62dfc35d15 100644
--- a/app/assets/javascripts/ide/stores/actions.js
+++ b/app/assets/javascripts/ide/stores/actions.js
@@ -20,7 +20,7 @@ export const redirectToUrl = (self, url) => visitUrl(url);
 export const setInitialData = ({ commit }, data) => commit(types.SET_INITIAL_DATA, data);
 
 export const discardAllChanges = ({ state, commit, dispatch }) => {
-  state.changedFiles.forEach(file => dispatch('restoreOriginalFile', file.path));
+  state.changedFiles.forEach((file) => dispatch('restoreOriginalFile', file.path));
 
   commit(types.REMOVE_ALL_CHANGES_FILES);
 };
@@ -106,7 +106,7 @@ export const stageAllChanges = ({ state, commit, dispatch, getters }) => {
 
   commit(types.SET_LAST_COMMIT_MSG, '');
 
-  state.changedFiles.forEach(file =>
+  state.changedFiles.forEach((file) =>
     commit(types.STAGE_CHANGE, { path: file.path, diffInfo: getters.getDiffInfo(file.path) }),
   );
 
@@ -123,7 +123,7 @@ export const stageAllChanges = ({ state, commit, dispatch, getters }) => {
 export const unstageAllChanges = ({ state, commit, dispatch, getters }) => {
   const openFile = state.openFiles[0];
 
-  state.stagedFiles.forEach(file =>
+  state.stagedFiles.forEach((file) =>
     commit(types.UNSTAGE_CHANGE, { path: file.path, diffInfo: getters.getDiffInfo(file.path) }),
   );
 
@@ -194,7 +194,7 @@ export const deleteEntry = ({ commit, dispatch, state }, path) => {
   if (entry.opened) dispatch('closeFile', entry);
 
   if (isTree) {
-    entry.tree.forEach(f => dispatch('deleteEntry', f.path));
+    entry.tree.forEach((f) => dispatch('deleteEntry', f.path));
   }
 
   commit(types.DELETE_ENTRY, path);
@@ -221,7 +221,7 @@ export const renameEntry = ({ dispatch, commit, state, getters }, { path, name,
   commit(types.RENAME_ENTRY, { path, name, parentPath });
 
   if (entry.type === 'tree') {
-    state.entries[newPath].tree.forEach(f => {
+    state.entries[newPath].tree.forEach((f) => {
       dispatch('renameEntry', {
         path: f.path,
         name: f.name,
@@ -280,7 +280,7 @@ export const getBranchData = ({ commit, state }, { projectId, branchId, force =
           commit(types.SET_BRANCH_WORKING_REFERENCE, { projectId, branchId, reference: id });
           resolve(data);
         })
-        .catch(e => {
+        .catch((e) => {
           if (e.response.status === 404) {
             reject(e);
           } else {
diff --git a/app/assets/javascripts/ide/stores/actions/file.js b/app/assets/javascripts/ide/stores/actions/file.js
index 8b43c7238fd..0859d76b5d0 100644
--- a/app/assets/javascripts/ide/stores/actions/file.js
+++ b/app/assets/javascripts/ide/stores/actions/file.js
@@ -14,7 +14,7 @@ import { viewerTypes, stageKeys } from '../../constants';
 
 export const closeFile = ({ commit, state, dispatch, getters }, file) => {
   const { path } = file;
-  const indexOfClosedFile = state.openFiles.findIndex(f => f.key === file.key);
+  const indexOfClosedFile = state.openFiles.findIndex((f) => f.key === file.key);
   const fileWasActive = file.active;
 
   if (file.pending) {
@@ -108,7 +108,7 @@ export const getFileData = (
     .catch(() => {
       dispatch('setErrorMessage', {
         text: __('An error occurred while loading the file.'),
-        action: payload =>
+        action: (payload) =>
           dispatch('getFileData', payload).then(() => dispatch('setErrorMessage', null)),
         actionText: __('Please try again'),
         actionPayload: { path, makeFileActive },
@@ -125,13 +125,13 @@ export const setFileMrChange = ({ commit }, { file, mrChange }) => {
 
 export const getRawFileData = ({ state, commit, dispatch, getters }, { path }) => {
   const file = state.entries[path];
-  const stagedFile = state.stagedFiles.find(f => f.path === path);
+  const stagedFile = state.stagedFiles.find((f) => f.path === path);
 
   const fileDeletedAndReadded = getters.isFileDeletedAndReadded(path);
   commit(types.TOGGLE_LOADING, { entry: file, forceValue: true });
   return service
     .getRawFileData(fileDeletedAndReadded ? stagedFile : file)
-    .then(raw => {
+    .then((raw) => {
       if (!(file.tempFile && !file.prevPath && !fileDeletedAndReadded))
         commit(types.SET_FILE_RAW_DATA, { file, raw, fileDeletedAndReadded });
 
@@ -139,7 +139,7 @@ export const getRawFileData = ({ state, commit, dispatch, getters }, { path }) =
         const baseSha =
           (getters.currentMergeRequest && getters.currentMergeRequest.baseCommitSha) || '';
 
-        return service.getBaseRawFileData(file, state.currentProjectId, baseSha).then(baseRaw => {
+        return service.getBaseRawFileData(file, state.currentProjectId, baseSha).then((baseRaw) => {
           commit(types.SET_FILE_BASE_RAW_DATA, {
             file,
             baseRaw,
@@ -149,10 +149,10 @@ export const getRawFileData = ({ state, commit, dispatch, getters }, { path }) =
       }
       return raw;
     })
-    .catch(e => {
+    .catch((e) => {
       dispatch('setErrorMessage', {
         text: __('An error occurred while loading the file content.'),
-        action: payload =>
+        action: (payload) =>
           dispatch('getRawFileData', payload).then(() => dispatch('setErrorMessage', null)),
         actionText: __('Please try again'),
         actionPayload: { path },
@@ -178,7 +178,7 @@ export const changeFileContent = ({ commit, state, getters }, { path, content })
     content,
   });
 
-  const indexOfChangedFile = state.changedFiles.findIndex(f => f.path === path);
+  const indexOfChangedFile = state.changedFiles.findIndex((f) => f.path === path);
 
   if (file.changed && indexOfChangedFile === -1) {
     commit(types.STAGE_CHANGE, { path, diffInfo: getters.getDiffInfo(path) });
@@ -225,7 +225,7 @@ export const discardFileChanges = ({ dispatch, state, commit, getters }, path) =
       .then(() => {
         dispatch('router/push', getters.getUrlForPath(file.path), { root: true });
       })
-      .catch(e => {
+      .catch((e) => {
         throw e;
       });
   }
@@ -275,7 +275,7 @@ export const unstageChange = ({ commit, dispatch, getters }, path) => {
 export const openPendingTab = ({ commit, dispatch, getters, state }, { file, keyPrefix }) => {
   if (getters.activeFile && getters.activeFile.key === `${keyPrefix}-${file.key}`) return false;
 
-  state.openFiles.forEach(f => eventHub.$emit(`editor.update.model.dispose.${f.key}`));
+  state.openFiles.forEach((f) => eventHub.$emit(`editor.update.model.dispose.${f.key}`));
 
   commit(types.ADD_PENDING_TAB, { file, keyPrefix });
 
diff --git a/app/assets/javascripts/ide/stores/actions/merge_request.js b/app/assets/javascripts/ide/stores/actions/merge_request.js
index 547665b49c6..8215cba7ccf 100644
--- a/app/assets/javascripts/ide/stores/actions/merge_request.js
+++ b/app/assets/javascripts/ide/stores/actions/merge_request.js
@@ -33,7 +33,7 @@ export const getMergeRequestsForBranch = (
         commit(types.SET_CURRENT_MERGE_REQUEST, `${currentMR.iid}`);
       }
     })
-    .catch(e => {
+    .catch((e) => {
       flash(
         __(`Error fetching merge requests for ${branchId}`),
         'alert',
@@ -66,7 +66,7 @@ export const getMergeRequestData = (
         .catch(() => {
           dispatch('setErrorMessage', {
             text: __('An error occurred while loading the merge request.'),
-            action: payload =>
+            action: (payload) =>
               dispatch('getMergeRequestData', payload).then(() =>
                 dispatch('setErrorMessage', null),
               ),
@@ -99,7 +99,7 @@ export const getMergeRequestChanges = (
         .catch(() => {
           dispatch('setErrorMessage', {
             text: __('An error occurred while loading the merge request changes.'),
-            action: payload =>
+            action: (payload) =>
               dispatch('getMergeRequestChanges', payload).then(() =>
                 dispatch('setErrorMessage', null),
               ),
@@ -121,8 +121,8 @@ export const getMergeRequestVersions = (
     if (!state.projects[projectId].mergeRequests[mergeRequestId].versions.length || force) {
       service
         .getProjectMergeRequestVersions(targetProjectId || projectId, mergeRequestId)
-        .then(res => res.data)
-        .then(data => {
+        .then((res) => res.data)
+        .then((data) => {
           commit(types.SET_MERGE_REQUEST_VERSIONS, {
             projectPath: projectId,
             mergeRequestId,
@@ -133,7 +133,7 @@ export const getMergeRequestVersions = (
         .catch(() => {
           dispatch('setErrorMessage', {
             text: __('An error occurred while loading the merge request version data.'),
-            action: payload =>
+            action: (payload) =>
               dispatch('getMergeRequestVersions', payload).then(() =>
                 dispatch('setErrorMessage', null),
               ),
@@ -156,7 +156,7 @@ export const openMergeRequest = (
     targetProjectId,
     mergeRequestId,
   })
-    .then(mr => {
+    .then((mr) => {
       dispatch('setCurrentBranchId', mr.source_branch);
 
       return dispatch('getBranchData', {
@@ -186,7 +186,7 @@ export const openMergeRequest = (
         mergeRequestId,
       }),
     )
-    .then(mrChanges => {
+    .then((mrChanges) => {
       if (mrChanges.changes.length) {
         dispatch('updateActivityBarView', leftSidebarViews.review.name);
       }
@@ -210,7 +210,7 @@ export const openMergeRequest = (
         }
       });
     })
-    .catch(e => {
+    .catch((e) => {
       flash(__('Error while loading the merge request. Please try again.'));
       throw e;
     });
diff --git a/app/assets/javascripts/ide/stores/actions/project.js b/app/assets/javascripts/ide/stores/actions/project.js
index 51e9bf6a84c..c5549c096c7 100644
--- a/app/assets/javascripts/ide/stores/actions/project.js
+++ b/app/assets/javascripts/ide/stores/actions/project.js
@@ -11,8 +11,8 @@ export const getProjectData = ({ commit, state }, { namespace, projectId, force
       commit(types.TOGGLE_LOADING, { entry: state });
       service
         .getProjectData(namespace, projectId)
-        .then(res => res.data)
-        .then(data => {
+        .then((res) => res.data)
+        .then((data) => {
           commit(types.TOGGLE_LOADING, { entry: state });
           commit(types.SET_PROJECT, { projectPath: `${namespace}/${projectId}`, project: data });
           commit(types.SET_CURRENT_PROJECT, `${namespace}/${projectId}`);
@@ -61,7 +61,7 @@ export const createNewBranchFromDefault = ({ state, dispatch, getters }, branch)
     .catch(() => {
       dispatch('setErrorMessage', {
         text: __('An error occurred creating the new branch.'),
-        action: payload => dispatch('createNewBranchFromDefault', payload),
+        action: (payload) => dispatch('createNewBranchFromDefault', payload),
         actionText: __('Please try again'),
         actionPayload: branch,
       });
@@ -76,7 +76,7 @@ export const showBranchNotFoundError = ({ dispatch }, branchId) => {
       },
       false,
     ),
-    action: payload => dispatch('createNewBranchFromDefault', payload),
+    action: (payload) => dispatch('createNewBranchFromDefault', payload),
     actionText: __('Create branch'),
     actionPayload: branchId,
   });
@@ -102,7 +102,7 @@ export const loadFile = ({ dispatch, state }, { basePath }) => {
   if (basePath) {
     const path = basePath.slice(-1) === '/' ? basePath.slice(0, -1) : basePath;
     const treeEntryKey = Object.keys(state.entries).find(
-      key => key === path && !state.entries[key].pending,
+      (key) => key === path && !state.entries[key].pending,
     );
     const treeEntry = state.entries[treeEntryKey];
 
@@ -144,7 +144,7 @@ export const loadBranch = ({ dispatch, getters, state }, { projectId, branchId }
         ref: branch.commit.id,
       });
     })
-    .catch(err => {
+    .catch((err) => {
       dispatch('showBranchNotFoundError', branchId);
       throw err;
     });
diff --git a/app/assets/javascripts/ide/stores/actions/tree.js b/app/assets/javascripts/ide/stores/actions/tree.js
index 23a5e26bc1c..150dfcb2726 100644
--- a/app/assets/javascripts/ide/stores/actions/tree.js
+++ b/app/assets/javascripts/ide/stores/actions/tree.js
@@ -87,10 +87,10 @@ export const getFiles = ({ state, commit, dispatch }, payload = {}) => {
 
           resolve();
         })
-        .catch(e => {
+        .catch((e) => {
           dispatch('setErrorMessage', {
             text: __('An error occurred while loading all the files.'),
-            action: actionPayload =>
+            action: (actionPayload) =>
               dispatch('getFiles', actionPayload).then(() => dispatch('setErrorMessage', null)),
             actionText: __('Please try again'),
             actionPayload: { projectId, branchId },
diff --git a/app/assets/javascripts/ide/stores/extend.js b/app/assets/javascripts/ide/stores/extend.js
index 1c1636cf6ca..b2777ec89ff 100644
--- a/app/assets/javascripts/ide/stores/extend.js
+++ b/app/assets/javascripts/ide/stores/extend.js
@@ -8,7 +8,7 @@ const plugins = () => [
 
 export default (store, el) => {
   // plugins is actually an array of plugin factories, so we have to create first then call
-  plugins().forEach(plugin => plugin(el)(store));
+  plugins().forEach((plugin) => plugin(el)(store));
 
   return store;
 };
diff --git a/app/assets/javascripts/ide/stores/getters.js b/app/assets/javascripts/ide/stores/getters.js
index 500ce9f32d5..59e8d37a92a 100644
--- a/app/assets/javascripts/ide/stores/getters.js
+++ b/app/assets/javascripts/ide/stores/getters.js
@@ -9,19 +9,19 @@ import {
 import { addNumericSuffix } from '~/ide/utils';
 import Api from '~/api';
 
-export const activeFile = state => state.openFiles.find(file => file.active) || null;
+export const activeFile = (state) => state.openFiles.find((file) => file.active) || null;
 
-export const addedFiles = state => state.changedFiles.filter(f => f.tempFile);
+export const addedFiles = (state) => state.changedFiles.filter((f) => f.tempFile);
 
-export const modifiedFiles = state => state.changedFiles.filter(f => !f.tempFile);
+export const modifiedFiles = (state) => state.changedFiles.filter((f) => !f.tempFile);
 
-export const projectsWithTrees = state =>
-  Object.keys(state.projects).map(projectId => {
+export const projectsWithTrees = (state) =>
+  Object.keys(state.projects).map((projectId) => {
     const project = state.projects[projectId];
 
     return {
       ...project,
-      branches: Object.keys(project.branches).map(branchId => {
+      branches: Object.keys(project.branches).map((branchId) => {
         const branch = project.branches[branchId];
 
         return {
@@ -32,7 +32,7 @@ export const projectsWithTrees = state =>
     };
   });
 
-export const currentMergeRequest = state => {
+export const currentMergeRequest = (state) => {
   if (
     state.projects[state.currentProjectId] &&
     state.projects[state.currentProjectId].mergeRequests
@@ -42,19 +42,19 @@ export const currentMergeRequest = state => {
   return null;
 };
 
-export const findProject = state => projectId => state.projects[projectId];
+export const findProject = (state) => (projectId) => state.projects[projectId];
 
 export const currentProject = (state, getters) => getters.findProject(state.currentProjectId);
 
-export const emptyRepo = state =>
+export const emptyRepo = (state) =>
   state.projects[state.currentProjectId] && state.projects[state.currentProjectId].empty_repo;
 
-export const currentTree = state =>
+export const currentTree = (state) =>
   state.trees[`${state.currentProjectId}/${state.currentBranchId}`];
 
-export const hasMergeRequest = state => Boolean(state.currentMergeRequestId);
+export const hasMergeRequest = (state) => Boolean(state.currentMergeRequestId);
 
-export const allBlobs = state =>
+export const allBlobs = (state) =>
   Object.keys(state.entries)
     .reduce((acc, key) => {
       const entry = state.entries[key];
@@ -67,35 +67,35 @@ export const allBlobs = state =>
     }, [])
     .sort((a, b) => b.lastOpenedAt - a.lastOpenedAt);
 
-export const getChangedFile = state => path => state.changedFiles.find(f => f.path === path);
-export const getStagedFile = state => path => state.stagedFiles.find(f => f.path === path);
-export const getOpenFile = state => path => state.openFiles.find(f => f.path === path);
+export const getChangedFile = (state) => (path) => state.changedFiles.find((f) => f.path === path);
+export const getStagedFile = (state) => (path) => state.stagedFiles.find((f) => f.path === path);
+export const getOpenFile = (state) => (path) => state.openFiles.find((f) => f.path === path);
 
-export const lastOpenedFile = state =>
+export const lastOpenedFile = (state) =>
   [...state.changedFiles, ...state.stagedFiles].sort((a, b) => b.lastOpenedAt - a.lastOpenedAt)[0];
 
-export const isEditModeActive = state => state.currentActivityView === leftSidebarViews.edit.name;
-export const isCommitModeActive = state =>
+export const isEditModeActive = (state) => state.currentActivityView === leftSidebarViews.edit.name;
+export const isCommitModeActive = (state) =>
   state.currentActivityView === leftSidebarViews.commit.name;
-export const isReviewModeActive = state =>
+export const isReviewModeActive = (state) =>
   state.currentActivityView === leftSidebarViews.review.name;
 
-export const someUncommittedChanges = state =>
+export const someUncommittedChanges = (state) =>
   Boolean(state.changedFiles.length || state.stagedFiles.length);
 
-export const getChangesInFolder = state => path => {
-  const changedFilesCount = state.changedFiles.filter(f => filePathMatches(f.path, path)).length;
+export const getChangesInFolder = (state) => (path) => {
+  const changedFilesCount = state.changedFiles.filter((f) => filePathMatches(f.path, path)).length;
   const stagedFilesCount = state.stagedFiles.filter(
-    f => filePathMatches(f.path, path) && !getChangedFile(state)(f.path),
+    (f) => filePathMatches(f.path, path) && !getChangedFile(state)(f.path),
   ).length;
 
   return changedFilesCount + stagedFilesCount;
 };
 
-export const getUnstagedFilesCountForPath = state => path =>
+export const getUnstagedFilesCountForPath = (state) => (path) =>
   getChangesCountForFiles(state.changedFiles, path);
 
-export const getStagedFilesCountForPath = state => path =>
+export const getStagedFilesCountForPath = (state) => (path) =>
   getChangesCountForFiles(state.stagedFiles, path);
 
 export const lastCommit = (state, getters) => {
@@ -115,7 +115,7 @@ export const currentBranch = (state, getters) =>
 
 export const branchName = (_state, getters) => getters.currentBranch && getters.currentBranch.name;
 
-export const packageJson = state => state.entries[packageJsonPath];
+export const packageJson = (state) => state.entries[packageJsonPath];
 
 export const isOnDefaultBranch = (_state, getters) =>
   getters.currentProject && getters.currentProject.default_branch === getters.branchName;
@@ -124,14 +124,14 @@ export const canPushToBranch = (_state, getters) => {
   return Boolean(getters.currentBranch ? getters.currentBranch.can_push : getters.canPushCode);
 };
 
-export const isFileDeletedAndReadded = (state, getters) => path => {
+export const isFileDeletedAndReadded = (state, getters) => (path) => {
   const stagedFile = getters.getStagedFile(path);
   const file = state.entries[path];
   return Boolean(stagedFile && stagedFile.deleted && file.tempFile);
 };
 
 // checks if any diff exists in the staged or unstaged changes for this path
-export const getDiffInfo = (state, getters) => path => {
+export const getDiffInfo = (state, getters) => (path) => {
   const stagedFile = getters.getStagedFile(path);
   const file = state.entries[path];
   const renamed = file.prevPath ? file.path !== file.prevPath : false;
@@ -149,7 +149,7 @@ export const getDiffInfo = (state, getters) => path => {
   };
 };
 
-export const findProjectPermissions = (state, getters) => projectId =>
+export const findProjectPermissions = (state, getters) => (projectId) =>
   getters.findProject(projectId)?.userPermissions || {};
 
 export const canReadMergeRequests = (state, getters) =>
@@ -161,10 +161,10 @@ export const canCreateMergeRequests = (state, getters) =>
 export const canPushCode = (state, getters) =>
   Boolean(getters.findProjectPermissions(state.currentProjectId)[PERMISSION_PUSH_CODE]);
 
-export const entryExists = state => path =>
+export const entryExists = (state) => (path) =>
   Boolean(state.entries[path] && !state.entries[path].deleted);
 
-export const getAvailableFileName = (state, getters) => path => {
+export const getAvailableFileName = (state, getters) => (path) => {
   let newPath = path;
 
   while (getters.entryExists(newPath)) {
@@ -174,10 +174,10 @@ export const getAvailableFileName = (state, getters) => path => {
   return newPath;
 };
 
-export const getUrlForPath = state => path =>
+export const getUrlForPath = (state) => (path) =>
   `/project/${state.currentProjectId}/tree/${state.currentBranchId}/-/${path}/`;
 
-export const getJsonSchemaForPath = (state, getters) => path => {
+export const getJsonSchemaForPath = (state, getters) => (path) => {
   const [namespace, ...project] = state.currentProjectId.split('/');
   return {
     uri:
diff --git a/app/assets/javascripts/ide/stores/modules/branches/actions.js b/app/assets/javascripts/ide/stores/modules/branches/actions.js
index c46289f77e2..74a4cd9848b 100644
--- a/app/assets/javascripts/ide/stores/modules/branches/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/branches/actions.js
@@ -8,7 +8,7 @@ export const receiveBranchesError = ({ commit, dispatch }, { search }) => {
     'setErrorMessage',
     {
       text: __('Error loading branches.'),
-      action: payload =>
+      action: (payload) =>
         dispatch('fetchBranches', payload).then(() =>
           dispatch('setErrorMessage', null, { root: true }),
         ),
diff --git a/app/assets/javascripts/ide/stores/modules/branches/mutations.js b/app/assets/javascripts/ide/stores/modules/branches/mutations.js
index 0a455f4500f..3883e1cc905 100644
--- a/app/assets/javascripts/ide/stores/modules/branches/mutations.js
+++ b/app/assets/javascripts/ide/stores/modules/branches/mutations.js
@@ -9,7 +9,7 @@ export default {
   },
   [types.RECEIVE_BRANCHES_SUCCESS](state, data) {
     state.isLoading = false;
-    state.branches = data.map(branch => ({
+    state.branches = data.map((branch) => ({
       name: branch.name,
       committedDate: branch.commit.committed_date,
     }));
diff --git a/app/assets/javascripts/ide/stores/modules/commit/actions.js b/app/assets/javascripts/ide/stores/modules/commit/actions.js
index e0d2028d2e1..3434ec873d5 100644
--- a/app/assets/javascripts/ide/stores/modules/commit/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/commit/actions.js
@@ -78,8 +78,8 @@ export const updateFilesAfterCommit = ({ commit, dispatch, rootState, rootGetter
     { root: true },
   );
 
-  rootState.stagedFiles.forEach(file => {
-    const changedFile = rootState.changedFiles.find(f => f.path === file.path);
+  rootState.stagedFiles.forEach((file) => {
+    const changedFile = rootState.changedFiles.find((f) => f.path === file.path);
 
     commit(
       rootTypes.UPDATE_FILE_AFTER_COMMIT,
@@ -133,7 +133,7 @@ export const commitChanges = ({ commit, state, getters, dispatch, rootState, roo
 
       return service.commit(rootState.currentProjectId, payload);
     })
-    .catch(e => {
+    .catch((e) => {
       commit(types.UPDATE_LOADING, false);
       commit(types.SET_ERROR, parseCommitError(e));
 
@@ -193,12 +193,12 @@ export const commitChanges = ({ commit, state, getters, dispatch, rootState, roo
               },
               { root: true },
             )
-              .then(changeViewer => {
+              .then((changeViewer) => {
                 if (changeViewer) {
                   dispatch('updateViewer', 'diff', { root: true });
                 }
               })
-              .catch(e => {
+              .catch((e) => {
                 throw e;
               });
           } else {
diff --git a/app/assets/javascripts/ide/stores/modules/commit/getters.js b/app/assets/javascripts/ide/stores/modules/commit/getters.js
index 416ca88d6c9..2301cf23f9f 100644
--- a/app/assets/javascripts/ide/stores/modules/commit/getters.js
+++ b/app/assets/javascripts/ide/stores/modules/commit/getters.js
@@ -11,7 +11,7 @@ const createTranslatedTextForFiles = (files, text) => {
   });
 };
 
-export const discardDraftButtonDisabled = state =>
+export const discardDraftButtonDisabled = (state) =>
   state.commitMessage === '' || state.submitCommitLoading;
 
 // Note: If changing the structure of the placeholder branch name, please also
@@ -37,18 +37,18 @@ export const preBuiltCommitMessage = (state, _, rootState) => {
   if (state.commitMessage) return state.commitMessage;
 
   const files = rootState.stagedFiles.length ? rootState.stagedFiles : rootState.changedFiles;
-  const modifiedFiles = files.filter(f => !f.deleted);
-  const deletedFiles = files.filter(f => f.deleted);
+  const modifiedFiles = files.filter((f) => !f.deleted);
+  const deletedFiles = files.filter((f) => f.deleted);
 
   return [
     createTranslatedTextForFiles(modifiedFiles, __('Update')),
     createTranslatedTextForFiles(deletedFiles, __('Deleted')),
   ]
-    .filter(t => t)
+    .filter((t) => t)
     .join('\n');
 };
 
-export const isCreatingNewBranch = state => state.commitAction === consts.COMMIT_TO_NEW_BRANCH;
+export const isCreatingNewBranch = (state) => state.commitAction === consts.COMMIT_TO_NEW_BRANCH;
 
 export const shouldHideNewMrOption = (_state, getters, _rootState, rootGetters) =>
   !getters.isCreatingNewBranch &&
diff --git a/app/assets/javascripts/ide/stores/modules/editor/setup.js b/app/assets/javascripts/ide/stores/modules/editor/setup.js
index c5a613c6baa..341e2aa47a4 100644
--- a/app/assets/javascripts/ide/stores/modules/editor/setup.js
+++ b/app/assets/javascripts/ide/stores/modules/editor/setup.js
@@ -1,13 +1,13 @@
 import eventHub from '~/ide/eventhub';
 import { commitActionTypes } from '~/ide/constants';
 
-const removeUnusedFileEditors = store => {
+const removeUnusedFileEditors = (store) => {
   Object.keys(store.state.editor.fileEditors)
-    .filter(path => !store.state.entries[path])
-    .forEach(path => store.dispatch('editor/removeFileEditor', path));
+    .filter((path) => !store.state.entries[path])
+    .forEach((path) => store.dispatch('editor/removeFileEditor', path));
 };
 
-export const setupFileEditorsSync = store => {
+export const setupFileEditorsSync = (store) => {
   eventHub.$on('ide.files.change', ({ type, ...payload } = {}) => {
     if (type === commitActionTypes.move) {
       store.dispatch('editor/renameFileEditor', payload);
diff --git a/app/assets/javascripts/ide/stores/modules/file_templates/actions.js b/app/assets/javascripts/ide/stores/modules/file_templates/actions.js
index 6b2c929cd44..6800f824da0 100644
--- a/app/assets/javascripts/ide/stores/modules/file_templates/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/file_templates/actions.js
@@ -68,7 +68,7 @@ export const receiveTemplateError = ({ dispatch }, template) => {
     'setErrorMessage',
     {
       text: __('Error loading template.'),
-      action: payload =>
+      action: (payload) =>
         dispatch('fetchTemplateTypes', payload).then(() =>
           dispatch('setErrorMessage', null, { root: true }),
         ),
diff --git a/app/assets/javascripts/ide/stores/modules/file_templates/getters.js b/app/assets/javascripts/ide/stores/modules/file_templates/getters.js
index 4a407aea557..0613fe9b12b 100644
--- a/app/assets/javascripts/ide/stores/modules/file_templates/getters.js
+++ b/app/assets/javascripts/ide/stores/modules/file_templates/getters.js
@@ -24,6 +24,6 @@ export const templateTypes = () => [
   },
 ];
 
-export const showFileTemplatesBar = (_, getters, rootState) => name =>
-  getters.templateTypes.find(t => t.name === name) &&
+export const showFileTemplatesBar = (_, getters, rootState) => (name) =>
+  getters.templateTypes.find((t) => t.name === name) &&
   rootState.currentActivityView === leftSidebarViews.edit.name;
diff --git a/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js b/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js
index 6a1a0de033e..299f7a883d2 100644
--- a/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js
@@ -9,7 +9,7 @@ export const receiveMergeRequestsError = ({ commit, dispatch }, { type, search }
     'setErrorMessage',
     {
       text: __('Error loading merge requests.'),
-      action: payload =>
+      action: (payload) =>
         dispatch('fetchMergeRequests', payload).then(() =>
           dispatch('setErrorMessage', null, { root: true }),
         ),
diff --git a/app/assets/javascripts/ide/stores/modules/merge_requests/mutations.js b/app/assets/javascripts/ide/stores/modules/merge_requests/mutations.js
index 7576b2477d1..eae64ad80c3 100644
--- a/app/assets/javascripts/ide/stores/modules/merge_requests/mutations.js
+++ b/app/assets/javascripts/ide/stores/modules/merge_requests/mutations.js
@@ -9,7 +9,7 @@ export default {
   },
   [types.RECEIVE_MERGE_REQUESTS_SUCCESS](state, data) {
     state.isLoading = false;
-    state.mergeRequests = data.map(mergeRequest => ({
+    state.mergeRequests = data.map((mergeRequest) => ({
       id: mergeRequest.id,
       iid: mergeRequest.iid,
       title: mergeRequest.title,
diff --git a/app/assets/javascripts/ide/stores/modules/pane/getters.js b/app/assets/javascripts/ide/stores/modules/pane/getters.js
index ce597329df1..66d23c8ebdc 100644
--- a/app/assets/javascripts/ide/stores/modules/pane/getters.js
+++ b/app/assets/javascripts/ide/stores/modules/pane/getters.js
@@ -1,2 +1,2 @@
-export const isAliveView = state => view =>
+export const isAliveView = (state) => (view) =>
   state.keepAliveViews[view] || (state.isOpen && state.currentView === view);
diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/actions.js b/app/assets/javascripts/ide/stores/modules/pipelines/actions.js
index 99bd08ee876..2c2034d76d0 100644
--- a/app/assets/javascripts/ide/stores/modules/pipelines/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/pipelines/actions.js
@@ -47,7 +47,7 @@ export const receiveLatestPipelineSuccess = ({ rootGetters, commit }, { pipeline
 
   if (pipelines && pipelines.length) {
     const lastCommitHash = rootGetters.lastCommit && rootGetters.lastCommit.id;
-    lastCommitPipeline = pipelines.find(pipeline => pipeline.commit.id === lastCommitHash);
+    lastCommitPipeline = pipelines.find((pipeline) => pipeline.commit.id === lastCommitHash);
   }
 
   commit(types.RECEIVE_LASTEST_PIPELINE_SUCCESS, lastCommitPipeline);
@@ -63,7 +63,7 @@ export const fetchLatestPipeline = ({ dispatch, rootGetters }) => {
     method: 'lastCommitPipelines',
     data: { getters: rootGetters },
     successCallback: ({ data }) => dispatch('receiveLatestPipelineSuccess', data),
-    errorCallback: err => dispatch('receiveLatestPipelineError', err),
+    errorCallback: (err) => dispatch('receiveLatestPipelineError', err),
   });
 
   if (!Visibility.hidden()) {
@@ -85,7 +85,7 @@ export const receiveJobsError = ({ commit, dispatch }, stage) => {
     'setErrorMessage',
     {
       text: __('An error occurred while loading the pipelines jobs.'),
-      action: payload =>
+      action: (payload) =>
         dispatch('fetchJobs', payload).then(() =>
           dispatch('setErrorMessage', null, { root: true }),
         ),
diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/mutations.js b/app/assets/javascripts/ide/stores/modules/pipelines/mutations.js
index 3a3cb4a7cb2..09006df7e94 100644
--- a/app/assets/javascripts/ide/stores/modules/pipelines/mutations.js
+++ b/app/assets/javascripts/ide/stores/modules/pipelines/mutations.js
@@ -23,7 +23,7 @@ export default {
         yamlError: pipeline.yaml_errors,
       };
       state.stages = pipeline.details.stages.map((stage, i) => {
-        const foundStage = state.stages.find(s => s.id === i);
+        const foundStage = state.stages.find((s) => s.id === i);
         return {
           id: i,
           dropdownPath: stage.dropdown_path,
@@ -39,26 +39,26 @@ export default {
     }
   },
   [types.REQUEST_JOBS](state, id) {
-    state.stages = state.stages.map(stage => ({
+    state.stages = state.stages.map((stage) => ({
       ...stage,
       isLoading: stage.id === id ? true : stage.isLoading,
     }));
   },
   [types.RECEIVE_JOBS_ERROR](state, id) {
-    state.stages = state.stages.map(stage => ({
+    state.stages = state.stages.map((stage) => ({
       ...stage,
       isLoading: stage.id === id ? false : stage.isLoading,
     }));
   },
   [types.RECEIVE_JOBS_SUCCESS](state, { id, data }) {
-    state.stages = state.stages.map(stage => ({
+    state.stages = state.stages.map((stage) => ({
       ...stage,
       isLoading: stage.id === id ? false : stage.isLoading,
       jobs: stage.id === id ? data.latest_statuses.map(normalizeJob) : stage.jobs,
     }));
   },
   [types.TOGGLE_STAGE_COLLAPSE](state, id) {
-    state.stages = state.stages.map(stage => ({
+    state.stages = state.stages.map((stage) => ({
       ...stage,
       isCollapsed: stage.id === id ? !stage.isCollapsed : stage.isCollapsed,
     }));
diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/utils.js b/app/assets/javascripts/ide/stores/modules/pipelines/utils.js
index 95716e0a0c6..ded00196ab7 100644
--- a/app/assets/javascripts/ide/stores/modules/pipelines/utils.js
+++ b/app/assets/javascripts/ide/stores/modules/pipelines/utils.js
@@ -1,4 +1,4 @@
-export const normalizeJob = job => ({
+export const normalizeJob = (job) => ({
   id: job.id,
   name: job.name,
   status: job.status,
diff --git a/app/assets/javascripts/ide/stores/modules/terminal/actions/checks.js b/app/assets/javascripts/ide/stores/modules/terminal/actions/checks.js
index 43b6650b241..b2c1ddd877c 100644
--- a/app/assets/javascripts/ide/stores/modules/terminal/actions/checks.js
+++ b/app/assets/javascripts/ide/stores/modules/terminal/actions/checks.js
@@ -36,7 +36,7 @@ export const fetchConfigCheck = ({ dispatch, rootState, rootGetters }) => {
     .then(() => {
       dispatch('receiveConfigCheckSuccess');
     })
-    .catch(e => {
+    .catch((e) => {
       dispatch('receiveConfigCheckError', e);
     });
 };
@@ -92,7 +92,7 @@ export const fetchRunnersCheck = ({ dispatch, rootGetters }, options = {}) => {
     .then(({ data }) => {
       dispatch('receiveRunnersCheckSuccess', data);
     })
-    .catch(e => {
+    .catch((e) => {
       dispatch('receiveRunnersCheckError', e);
     });
 };
diff --git a/app/assets/javascripts/ide/stores/modules/terminal/actions/session_controls.js b/app/assets/javascripts/ide/stores/modules/terminal/actions/session_controls.js
index f20f7fc9cd6..aa460859b4c 100644
--- a/app/assets/javascripts/ide/stores/modules/terminal/actions/session_controls.js
+++ b/app/assets/javascripts/ide/stores/modules/terminal/actions/session_controls.js
@@ -45,7 +45,7 @@ export const startSession = ({ state, dispatch, rootGetters, rootState }) => {
     .then(({ data }) => {
       dispatch('receiveStartSessionSuccess', data);
     })
-    .catch(error => {
+    .catch((error) => {
       dispatch('receiveStartSessionError', error);
     });
 };
@@ -73,7 +73,7 @@ export const stopSession = ({ state, dispatch }) => {
     .then(() => {
       dispatch('receiveStopSessionSuccess');
     })
-    .catch(err => {
+    .catch((err) => {
       dispatch('receiveStopSessionError', err);
     });
 };
@@ -103,7 +103,7 @@ export const restartSession = ({ state, dispatch, rootState }) => {
     .then(({ data }) => {
       dispatch('receiveStartSessionSuccess', data);
     })
-    .catch(error => {
+    .catch((error) => {
       const responseStatus = error.response && error.response.status;
       // We may have removed the build, in this case we'll just create a new session
       if (
diff --git a/app/assets/javascripts/ide/stores/modules/terminal/actions/session_status.js b/app/assets/javascripts/ide/stores/modules/terminal/actions/session_status.js
index d715d555aa9..3ab1817e662 100644
--- a/app/assets/javascripts/ide/stores/modules/terminal/actions/session_status.js
+++ b/app/assets/javascripts/ide/stores/modules/terminal/actions/session_status.js
@@ -58,7 +58,7 @@ export const fetchSessionStatus = ({ dispatch, state }) => {
     .then(({ data }) => {
       dispatch('receiveSessionStatusSuccess', data);
     })
-    .catch(error => {
+    .catch((error) => {
       dispatch('receiveSessionStatusError', error);
     });
 };
diff --git a/app/assets/javascripts/ide/stores/modules/terminal/getters.js b/app/assets/javascripts/ide/stores/modules/terminal/getters.js
index b29d391845d..fb9a1a2fa39 100644
--- a/app/assets/javascripts/ide/stores/modules/terminal/getters.js
+++ b/app/assets/javascripts/ide/stores/modules/terminal/getters.js
@@ -1,11 +1,11 @@
-export const allCheck = state => {
+export const allCheck = (state) => {
   const checks = Object.values(state.checks);
 
-  if (checks.some(check => check.isLoading)) {
+  if (checks.some((check) => check.isLoading)) {
     return { isLoading: true };
   }
 
-  const invalidCheck = checks.find(check => !check.isValid);
+  const invalidCheck = checks.find((check) => !check.isValid);
   const isValid = !invalidCheck;
   const message = !invalidCheck ? '' : invalidCheck.message;
 
diff --git a/app/assets/javascripts/ide/stores/modules/terminal/messages.js b/app/assets/javascripts/ide/stores/modules/terminal/messages.js
index bf35ce0f0bc..967ba80cd2c 100644
--- a/app/assets/javascripts/ide/stores/modules/terminal/messages.js
+++ b/app/assets/javascripts/ide/stores/modules/terminal/messages.js
@@ -46,7 +46,7 @@ export const configCheckError = (status, helpUrl) => {
   return UNEXPECTED_ERROR_CONFIG;
 };
 
-export const runnersCheckEmpty = helpUrl =>
+export const runnersCheckEmpty = (helpUrl) =>
   sprintf(
     EMPTY_RUNNERS,
     {
diff --git a/app/assets/javascripts/ide/stores/modules/terminal/utils.js b/app/assets/javascripts/ide/stores/modules/terminal/utils.js
index c30136b5277..1f4bca9f50a 100644
--- a/app/assets/javascripts/ide/stores/modules/terminal/utils.js
+++ b/app/assets/javascripts/ide/stores/modules/terminal/utils.js
@@ -1,5 +1,5 @@
 import { STARTING, PENDING, RUNNING } from './constants';
 
-export const isStartingStatus = status => status === STARTING || status === PENDING;
-export const isRunningStatus = status => status === RUNNING;
-export const isEndingStatus = status => !isStartingStatus(status) && !isRunningStatus(status);
+export const isStartingStatus = (status) => status === STARTING || status === PENDING;
+export const isRunningStatus = (status) => status === RUNNING;
+export const isEndingStatus = (status) => !isStartingStatus(status) && !isRunningStatus(status);
diff --git a/app/assets/javascripts/ide/stores/modules/terminal_sync/actions.js b/app/assets/javascripts/ide/stores/modules/terminal_sync/actions.js
index 2fee6b4e974..006800f58c2 100644
--- a/app/assets/javascripts/ide/stores/modules/terminal_sync/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/terminal_sync/actions.js
@@ -9,7 +9,7 @@ export const upload = ({ rootState, commit }) => {
     .then(() => {
       commit(types.SET_SUCCESS);
     })
-    .catch(err => {
+    .catch((err) => {
       commit(types.SET_ERROR, err);
     });
 };
@@ -34,7 +34,7 @@ export const start = ({ rootState, commit }) => {
     .then(() => {
       commit(types.SET_SUCCESS);
     })
-    .catch(err => {
+    .catch((err) => {
       commit(types.SET_ERROR, err);
       throw err;
     });
diff --git a/app/assets/javascripts/ide/stores/mutations.js b/app/assets/javascripts/ide/stores/mutations.js
index 460d3ced381..6ed6798a5b6 100644
--- a/app/assets/javascripts/ide/stores/mutations.js
+++ b/app/assets/javascripts/ide/stores/mutations.js
@@ -61,7 +61,7 @@ export default {
         });
       } else {
         const tree = entry.tree.filter(
-          f => foundEntry.tree.find(e => e.path === f.path) === undefined,
+          (f) => foundEntry.tree.find((e) => e.path === f.path) === undefined,
         );
         Object.assign(foundEntry, {
           tree: sortTree(foundEntry.tree.concat(tree)),
@@ -72,7 +72,7 @@ export default {
     }, []);
 
     const currentTree = state.trees[`${state.currentProjectId}/${state.currentBranchId}`];
-    const foundEntry = currentTree.tree.find(e => e.path === data.treeList[0].path);
+    const foundEntry = currentTree.tree.find((e) => e.path === data.treeList[0].path);
 
     if (!foundEntry) {
       Object.assign(currentTree, {
@@ -125,7 +125,7 @@ export default {
     });
   },
   [types.UPDATE_FILE_AFTER_COMMIT](state, { file, lastCommit }) {
-    const changedFile = state.changedFiles.find(f => f.path === file.path);
+    const changedFile = state.changedFiles.find((f) => f.path === file.path);
     const { prevPath } = file;
 
     Object.assign(state.entries[file.path], {
@@ -172,7 +172,7 @@ export default {
     entry.deleted = true;
 
     if (parent) {
-      parent.tree = parent.tree.filter(f => f.path !== entry.path);
+      parent.tree = parent.tree.filter((f) => f.path !== entry.path);
     }
 
     if (entry.type === 'blob') {
@@ -181,8 +181,8 @@ export default {
         // changed and staged. Otherwise, we'd need to somehow evaluate the difference between
         // changed and HEAD.
         // https://gitlab.com/gitlab-org/create-stage/-/issues/12669
-        state.changedFiles = state.changedFiles.filter(f => f.path !== path);
-        state.stagedFiles = state.stagedFiles.filter(f => f.path !== path);
+        state.changedFiles = state.changedFiles.filter((f) => f.path !== path);
+        state.stagedFiles = state.stagedFiles.filter((f) => f.path !== path);
       } else {
         state.changedFiles = state.changedFiles.concat(entry);
       }
diff --git a/app/assets/javascripts/ide/stores/mutations/file.js b/app/assets/javascripts/ide/stores/mutations/file.js
index 61a55d45128..4446971d5d6 100644
--- a/app/assets/javascripts/ide/stores/mutations/file.js
+++ b/app/assets/javascripts/ide/stores/mutations/file.js
@@ -12,7 +12,7 @@ export default {
 
     if (active && !state.entries[path].pending) {
       Object.assign(state, {
-        openFiles: state.openFiles.map(f =>
+        openFiles: state.openFiles.map((f) =>
           Object.assign(f, { active: f.pending ? false : f.active }),
         ),
       });
@@ -28,21 +28,21 @@ export default {
 
     if (entry.opened) {
       Object.assign(state, {
-        openFiles: state.openFiles.filter(f => f.path !== path).concat(state.entries[path]),
+        openFiles: state.openFiles.filter((f) => f.path !== path).concat(state.entries[path]),
       });
     } else {
       Object.assign(state, {
-        openFiles: state.openFiles.filter(f => f.key !== entry.key),
+        openFiles: state.openFiles.filter((f) => f.key !== entry.key),
       });
     }
   },
   [types.SET_FILE_DATA](state, { data, file }) {
     const stateEntry = state.entries[file.path];
-    const stagedFile = state.stagedFiles.find(f => f.path === file.path);
-    const openFile = state.openFiles.find(f => f.path === file.path);
-    const changedFile = state.changedFiles.find(f => f.path === file.path);
+    const stagedFile = state.stagedFiles.find((f) => f.path === file.path);
+    const openFile = state.openFiles.find((f) => f.path === file.path);
+    const changedFile = state.changedFiles.find((f) => f.path === file.path);
 
-    [stateEntry, stagedFile, openFile, changedFile].forEach(f => {
+    [stateEntry, stagedFile, openFile, changedFile].forEach((f) => {
       if (f) {
         Object.assign(
           f,
@@ -57,10 +57,10 @@ export default {
   },
   [types.SET_FILE_RAW_DATA](state, { file, raw, fileDeletedAndReadded = false }) {
     const openPendingFile = state.openFiles.find(
-      f =>
+      (f) =>
         f.path === file.path && f.pending && !(f.tempFile && !f.prevPath && !fileDeletedAndReadded),
     );
-    const stagedFile = state.stagedFiles.find(f => f.path === file.path);
+    const stagedFile = state.stagedFiles.find((f) => f.path === file.path);
 
     if (file.tempFile && file.content === '' && !fileDeletedAndReadded) {
       Object.assign(state.entries[file.path], { content: raw });
@@ -86,7 +86,7 @@ export default {
     });
   },
   [types.UPDATE_FILE_CONTENT](state, { path, content }) {
-    const stagedFile = state.stagedFiles.find(f => f.path === path);
+    const stagedFile = state.stagedFiles.find((f) => f.path === path);
     const rawContent = stagedFile ? stagedFile.content : state.entries[path].raw;
     const changed = content !== rawContent;
 
@@ -112,7 +112,7 @@ export default {
     });
   },
   [types.DISCARD_FILE_CHANGES](state, path) {
-    const stagedFile = state.stagedFiles.find(f => f.path === path);
+    const stagedFile = state.stagedFiles.find((f) => f.path === path);
     const entry = state.entries[path];
     const { deleted } = entry;
 
@@ -137,14 +137,14 @@ export default {
   },
   [types.REMOVE_FILE_FROM_CHANGED](state, path) {
     Object.assign(state, {
-      changedFiles: state.changedFiles.filter(f => f.path !== path),
+      changedFiles: state.changedFiles.filter((f) => f.path !== path),
     });
   },
   [types.STAGE_CHANGE](state, { path, diffInfo }) {
-    const stagedFile = state.stagedFiles.find(f => f.path === path);
+    const stagedFile = state.stagedFiles.find((f) => f.path === path);
 
     Object.assign(state, {
-      changedFiles: state.changedFiles.filter(f => f.path !== path),
+      changedFiles: state.changedFiles.filter((f) => f.path !== path),
       entries: Object.assign(state.entries, {
         [path]: Object.assign(state.entries[path], {
           staged: diffInfo.exists,
@@ -162,12 +162,12 @@ export default {
     }
 
     if (!diffInfo.exists) {
-      state.stagedFiles = state.stagedFiles.filter(f => f.path !== path);
+      state.stagedFiles = state.stagedFiles.filter((f) => f.path !== path);
     }
   },
   [types.UNSTAGE_CHANGE](state, { path, diffInfo }) {
-    const changedFile = state.changedFiles.find(f => f.path === path);
-    const stagedFile = state.stagedFiles.find(f => f.path === path);
+    const changedFile = state.changedFiles.find((f) => f.path === path);
+    const stagedFile = state.stagedFiles.find((f) => f.path === path);
 
     if (!changedFile && stagedFile) {
       Object.assign(state.entries[path], {
@@ -182,11 +182,11 @@ export default {
     }
 
     if (!diffInfo.exists) {
-      state.changedFiles = state.changedFiles.filter(f => f.path !== path);
+      state.changedFiles = state.changedFiles.filter((f) => f.path !== path);
     }
 
     Object.assign(state, {
-      stagedFiles: state.stagedFiles.filter(f => f.path !== path),
+      stagedFiles: state.stagedFiles.filter((f) => f.path !== path),
       entries: Object.assign(state.entries, {
         [path]: Object.assign(state.entries[path], {
           staged: false,
@@ -206,7 +206,7 @@ export default {
     state.entries[file.path].opened = false;
     state.entries[file.path].active = false;
     state.entries[file.path].lastOpenedAt = new Date().getTime();
-    state.openFiles.forEach(f =>
+    state.openFiles.forEach((f) =>
       Object.assign(f, {
         opened: false,
         active: false,
@@ -224,13 +224,13 @@ export default {
   },
   [types.REMOVE_PENDING_TAB](state, file) {
     Object.assign(state, {
-      openFiles: state.openFiles.filter(f => f.key !== file.key),
+      openFiles: state.openFiles.filter((f) => f.key !== file.key),
     });
   },
   [types.REMOVE_FILE_FROM_STAGED_AND_CHANGED](state, file) {
     Object.assign(state, {
-      changedFiles: state.changedFiles.filter(f => f.key !== file.key),
-      stagedFiles: state.stagedFiles.filter(f => f.key !== file.key),
+      changedFiles: state.changedFiles.filter((f) => f.key !== file.key),
+      stagedFiles: state.stagedFiles.filter((f) => f.key !== file.key),
     });
 
     Object.assign(state.entries[file.path], {
diff --git a/app/assets/javascripts/ide/stores/mutations/tree.js b/app/assets/javascripts/ide/stores/mutations/tree.js
index cce43a99bd9..c38002bd4e0 100644
--- a/app/assets/javascripts/ide/stores/mutations/tree.js
+++ b/app/assets/javascripts/ide/stores/mutations/tree.js
@@ -45,7 +45,7 @@ export default {
       ? state.entries[entry.parentPath]
       : state.trees[`${state.currentProjectId}/${state.currentBranchId}`];
 
-    if (!parent.tree.find(f => f.path === path)) {
+    if (!parent.tree.find((f) => f.path === path)) {
       parent.tree = sortTree(parent.tree.concat(entry));
     }
   },
diff --git a/app/assets/javascripts/ide/stores/plugins/terminal.js b/app/assets/javascripts/ide/stores/plugins/terminal.js
index 66539c7bd4f..94139d5bdf0 100644
--- a/app/assets/javascripts/ide/stores/plugins/terminal.js
+++ b/app/assets/javascripts/ide/stores/plugins/terminal.js
@@ -11,7 +11,7 @@ function getPathsFromData(el) {
 }
 
 export default function createTerminalPlugin(el) {
-  return store => {
+  return (store) => {
     store.registerModule('terminal', terminalModule());
 
     store.dispatch('terminal/setPaths', getPathsFromData(el));
diff --git a/app/assets/javascripts/ide/stores/plugins/terminal_sync.js b/app/assets/javascripts/ide/stores/plugins/terminal_sync.js
index c60bba4293a..0d01f392f55 100644
--- a/app/assets/javascripts/ide/stores/plugins/terminal_sync.js
+++ b/app/assets/javascripts/ide/stores/plugins/terminal_sync.js
@@ -12,7 +12,7 @@ const UPLOAD_DEBOUNCE = 200;
  * - Listens for file change event to control upload.
  */
 export default function createMirrorPlugin() {
-  return store => {
+  return (store) => {
     store.registerModule('terminalSync', terminalSyncModule());
 
     const upload = debounce(() => {
@@ -36,8 +36,8 @@ export default function createMirrorPlugin() {
     };
 
     store.watch(
-      x => x.terminal && x.terminal.session && x.terminal.session.status,
-      val => {
+      (x) => x.terminal && x.terminal.session && x.terminal.session.status,
+      (val) => {
         if (isRunningStatus(val)) {
           start();
         } else if (isEndingStatus(val)) {
diff --git a/app/assets/javascripts/ide/stores/utils.js b/app/assets/javascripts/ide/stores/utils.js
index ef09f118431..04eacf271b8 100644
--- a/app/assets/javascripts/ide/stores/utils.js
+++ b/app/assets/javascripts/ide/stores/utils.js
@@ -34,7 +34,7 @@ export const dataStructure = () => ({
   mimeType: '',
 });
 
-export const decorateData = entity => {
+export const decorateData = (entity) => {
   const {
     id,
     type,
@@ -69,7 +69,7 @@ export const decorateData = entity => {
   });
 };
 
-export const setPageTitle = title => {
+export const setPageTitle = (title) => {
   document.title = title;
 };
 
@@ -78,7 +78,7 @@ export const setPageTitleForFile = (state, file) => {
   setPageTitle(title);
 };
 
-export const commitActionForFile = file => {
+export const commitActionForFile = (file) => {
   if (file.prevPath) {
     return commitActionTypes.move;
   } else if (file.deleted) {
@@ -90,7 +90,7 @@ export const commitActionForFile = file => {
   return commitActionTypes.update;
 };
 
-export const getCommitFiles = stagedFiles =>
+export const getCommitFiles = (stagedFiles) =>
   stagedFiles.reduce((acc, file) => {
     if (file.type === 'tree') return acc;
 
@@ -109,7 +109,7 @@ export const createCommitPayload = ({
 }) => ({
   branch,
   commit_message: state.commitMessage || getters.preBuiltCommitMessage,
-  actions: getCommitFiles(rootState.stagedFiles).map(f => {
+  actions: getCommitFiles(rootState.stagedFiles).map((f) => {
     const isBlob = isBlobUrl(f.rawPath);
     const content = isBlob ? btoa(f.content) : f.content;
 
@@ -139,9 +139,9 @@ const sortTreesByTypeAndName = (a, b) => {
   return 0;
 };
 
-export const sortTree = sortedTree =>
+export const sortTree = (sortedTree) =>
   sortedTree
-    .map(entity =>
+    .map((entity) =>
       Object.assign(entity, {
         tree: entity.tree.length ? sortTree(entity.tree) : [],
       }),
@@ -151,7 +151,7 @@ export const sortTree = sortedTree =>
 export const filePathMatches = (filePath, path) => filePath.indexOf(`${path}/`) === 0;
 
 export const getChangesCountForFiles = (files, path) =>
-  files.filter(f => filePathMatches(f.path, path)).length;
+  files.filter((f) => filePathMatches(f.path, path)).length;
 
 export const mergeTrees = (fromTree, toTree) => {
   if (!fromTree || !fromTree.length) {
@@ -162,7 +162,7 @@ export const mergeTrees = (fromTree, toTree) => {
     if (!n) {
       return t;
     }
-    const existingTreeNode = t.find(el => el.path === n.path);
+    const existingTreeNode = t.find((el) => el.path === n.path);
 
     if (existingTreeNode && n.tree.length > 0) {
       existingTreeNode.opened = true;
@@ -183,7 +183,7 @@ export const mergeTrees = (fromTree, toTree) => {
 
 export const swapInStateArray = (state, arr, key, entryPath) =>
   Object.assign(state, {
-    [arr]: state[arr].map(f => (f.key === key ? state.entries[entryPath] : f)),
+    [arr]: state[arr].map((f) => (f.key === key ? state.entries[entryPath] : f)),
   });
 
 export const getEntryOrRoot = (state, path) =>
@@ -216,12 +216,12 @@ export const removeFromParentTree = (state, oldKey, parentPath) => {
 };
 
 export const updateFileCollections = (state, key, entryPath) => {
-  ['openFiles', 'changedFiles', 'stagedFiles'].forEach(fileCollection => {
+  ['openFiles', 'changedFiles', 'stagedFiles'].forEach((fileCollection) => {
     swapInStateArray(state, fileCollection, key, entryPath);
   });
 };
 
-export const cleanTrailingSlash = path => path.replace(/\/$/, '');
+export const cleanTrailingSlash = (path) => path.replace(/\/$/, '');
 
 export const pathsAreEqual = (a, b) => {
   const cleanA = a ? cleanTrailingSlash(a) : '';
diff --git a/app/assets/javascripts/ide/sync_router_and_store.js b/app/assets/javascripts/ide/sync_router_and_store.js
index b33bcbb94ea..d73ac93dc1d 100644
--- a/app/assets/javascripts/ide/sync_router_and_store.js
+++ b/app/assets/javascripts/ide/sync_router_and_store.js
@@ -21,8 +21,8 @@ export const syncRouterAndStore = (router, store) => {
   // sync store to router
   disposables.push(
     store.watch(
-      state => state.router.fullPath,
-      fullPath => {
+      (state) => state.router.fullPath,
+      (fullPath) => {
         if (currentPath === fullPath) {
           return;
         }
@@ -36,7 +36,7 @@ export const syncRouterAndStore = (router, store) => {
 
   // sync router to store
   disposables.push(
-    router.afterEach(to => {
+    router.afterEach((to) => {
       if (currentPath === to.fullPath) {
         return;
       }
@@ -47,7 +47,7 @@ export const syncRouterAndStore = (router, store) => {
   );
 
   const unsync = () => {
-    disposables.forEach(fn => fn());
+    disposables.forEach((fn) => fn());
   };
 
   return unsync;
diff --git a/app/assets/javascripts/ide/utils.js b/app/assets/javascripts/ide/utils.js
index 2c966d9c27c..8eb2d17b876 100644
--- a/app/assets/javascripts/ide/utils.js
+++ b/app/assets/javascripts/ide/utils.js
@@ -3,17 +3,17 @@ import { flatten, isString } from 'lodash';
 import { SIDE_LEFT, SIDE_RIGHT } from './constants';
 import { performanceMarkAndMeasure } from '~/performance/utils';
 
-const toLowerCase = x => x.toLowerCase();
+const toLowerCase = (x) => x.toLowerCase();
 
 const monacoLanguages = languages.getLanguages();
 const monacoExtensions = new Set(
-  flatten(monacoLanguages.map(lang => lang.extensions?.map(toLowerCase) || [])),
+  flatten(monacoLanguages.map((lang) => lang.extensions?.map(toLowerCase) || [])),
 );
 const monacoMimetypes = new Set(
-  flatten(monacoLanguages.map(lang => lang.mimetypes?.map(toLowerCase) || [])),
+  flatten(monacoLanguages.map((lang) => lang.mimetypes?.map(toLowerCase) || [])),
 );
 const monacoFilenames = new Set(
-  flatten(monacoLanguages.map(lang => lang.filenames?.map(toLowerCase) || [])),
+  flatten(monacoLanguages.map((lang) => lang.filenames?.map(toLowerCase) || [])),
 );
 
 const KNOWN_TYPES = [
@@ -44,7 +44,7 @@ const KNOWN_TYPES = [
 ];
 
 export function isTextFile({ name, raw, content, mimeType = '' }) {
-  const knownType = KNOWN_TYPES.find(type => type.isMatch(mimeType, name));
+  const knownType = KNOWN_TYPES.find((type) => type.isMatch(mimeType, name));
   if (knownType) return knownType.isText;
 
   // does the string contain ascii characters only (ranges from space to tilde, tabs and new lines)
@@ -56,20 +56,20 @@ export function isTextFile({ name, raw, content, mimeType = '' }) {
   return isString(fileContents) && (fileContents === '' || asciiRegex.test(fileContents));
 }
 
-export const createPathWithExt = p => {
+export const createPathWithExt = (p) => {
   const ext = p.lastIndexOf('.') >= 0 ? p.substring(p.lastIndexOf('.') + 1) : '';
 
   return `${p.substring(1, p.lastIndexOf('.') + 1 || p.length)}${ext || '.js'}`;
 };
 
-export const trimPathComponents = path =>
+export const trimPathComponents = (path) =>
   path
     .split('/')
-    .map(s => s.trim())
+    .map((s) => s.trim())
     .join('/');
 
 export function registerLanguages(def, ...defs) {
-  defs.forEach(lang => registerLanguages(lang));
+  defs.forEach((lang) => registerLanguages(lang));
 
   const languageId = def.id;
 
@@ -80,7 +80,7 @@ export function registerLanguages(def, ...defs) {
 
 export function registerSchema(schema) {
   const defaults = [languages.json.jsonDefaults, languages.yaml.yamlDefaults];
-  defaults.forEach(d =>
+  defaults.forEach((d) =>
     d.setDiagnosticsOptions({
       validate: true,
       enableSchemaRequest: true,
@@ -91,7 +91,7 @@ export function registerSchema(schema) {
   );
 }
 
-export const otherSide = side => (side === SIDE_RIGHT ? SIDE_LEFT : SIDE_RIGHT);
+export const otherSide = (side) => (side === SIDE_RIGHT ? SIDE_LEFT : SIDE_RIGHT);
 
 export function trimTrailingWhitespace(content) {
   return content.replace(/[^\S\r\n]+$/gm, '');
@@ -125,9 +125,9 @@ export function getPathParent(path) {
  * @param {File} file
  */
 export function readFileAsDataURL(file) {
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     const reader = new FileReader();
-    reader.addEventListener('load', e => resolve(e.target.result), { once: true });
+    reader.addEventListener('load', (e) => resolve(e.target.result), { once: true });
     reader.readAsDataURL(file);
   });
 }
diff --git a/app/assets/javascripts/image_diff/helpers/badge_helper.js b/app/assets/javascripts/image_diff/helpers/badge_helper.js
index 229e0a62c51..8ee72235a23 100644
--- a/app/assets/javascripts/image_diff/helpers/badge_helper.js
+++ b/app/assets/javascripts/image_diff/helpers/badge_helper.js
@@ -3,7 +3,7 @@ import { spriteIcon } from '~/lib/utils/common_utils';
 export function createImageBadge(noteId, { x, y }, classNames = []) {
   const buttonEl = document.createElement('button');
   const classList = classNames.concat(['js-image-badge']);
-  classList.forEach(className => buttonEl.classList.add(className));
+  classList.forEach((className) => buttonEl.classList.add(className));
   buttonEl.setAttribute('type', 'button');
   buttonEl.setAttribute('disabled', true);
   buttonEl.dataset.noteId = noteId;
diff --git a/app/assets/javascripts/image_diff/init_discussion_tab.js b/app/assets/javascripts/image_diff/init_discussion_tab.js
index 54ff2858206..4e0c5a6d916 100644
--- a/app/assets/javascripts/image_diff/init_discussion_tab.js
+++ b/app/assets/javascripts/image_diff/init_discussion_tab.js
@@ -7,7 +7,7 @@ export default () => {
   const renderCommentBadge = true;
 
   const diffFileEls = document.querySelectorAll('.timeline-content .diff-file.js-image-file');
-  [...diffFileEls].forEach(diffFileEl =>
+  [...diffFileEls].forEach((diffFileEl) =>
     initImageDiffHelper.initImageDiff(diffFileEl, canCreateNote, renderCommentBadge),
   );
 };
diff --git a/app/assets/javascripts/image_diff/replaced_image_diff.js b/app/assets/javascripts/image_diff/replaced_image_diff.js
index 8d9e65155d8..2df15e5e1a5 100644
--- a/app/assets/javascripts/image_diff/replaced_image_diff.js
+++ b/app/assets/javascripts/image_diff/replaced_image_diff.js
@@ -26,7 +26,7 @@ export default class ReplacedImageDiff extends ImageDiff {
     this.imageEls = {};
 
     const viewTypeNames = Object.getOwnPropertyNames(viewTypes);
-    viewTypeNames.forEach(viewType => {
+    viewTypeNames.forEach((viewType) => {
       this.imageEls[viewType] = this.imageFrameEls[viewType].querySelector('img');
     });
   }
@@ -62,7 +62,7 @@ export default class ReplacedImageDiff extends ImageDiff {
 
     // Clear existing badges on new view
     const existingBadges = this.imageFrameEl.querySelectorAll('.badge');
-    [...existingBadges].map(badge => badge.remove());
+    [...existingBadges].map((badge) => badge.remove());
 
     // Remove existing references to old view image badges
     this.imageBadges = [];
diff --git a/app/assets/javascripts/image_diff/view_types.js b/app/assets/javascripts/image_diff/view_types.js
index 1a5123de220..f08b29e468c 100644
--- a/app/assets/javascripts/image_diff/view_types.js
+++ b/app/assets/javascripts/image_diff/view_types.js
@@ -5,5 +5,5 @@ export const viewTypes = {
 };
 
 export function isValidViewType(validate) {
-  return Boolean(Object.getOwnPropertyNames(viewTypes).find(viewType => viewType === validate));
+  return Boolean(Object.getOwnPropertyNames(viewTypes).find((viewType) => viewType === validate));
 }
diff --git a/app/assets/javascripts/import_entities/import_groups/components/import_table.vue b/app/assets/javascripts/import_entities/import_groups/components/import_table.vue
index 153c58b556e..80e2e73f420 100644
--- a/app/assets/javascripts/import_entities/import_groups/components/import_table.vue
+++ b/app/assets/javascripts/import_entities/import_groups/components/import_table.vue
@@ -7,7 +7,7 @@ import setNewNameMutation from '../graphql/mutations/set_new_name.mutation.graph
 import importGroupMutation from '../graphql/mutations/import_group.mutation.graphql';
 import ImportTableRow from './import_table_row.vue';
 
-const mapApolloMutations = mutations =>
+const mapApolloMutations = (mutations) =>
   Object.fromEntries(
     Object.entries(mutations).map(([key, mutation]) => [
       key,
diff --git a/app/assets/javascripts/import_entities/import_groups/components/import_table_row.vue b/app/assets/javascripts/import_entities/import_groups/components/import_table_row.vue
index 07603d89f0f..1707ab10c89 100644
--- a/app/assets/javascripts/import_entities/import_groups/components/import_table_row.vue
+++ b/app/assets/javascripts/import_entities/import_groups/components/import_table_row.vue
@@ -35,7 +35,7 @@ export default {
 
     select2Options() {
       return {
-        data: this.availableNamespaces.map(namespace => ({
+        data: this.availableNamespaces.map((namespace) => ({
           id: namespace.full_path,
           text: namespace.full_path,
         })),
diff --git a/app/assets/javascripts/import_entities/import_groups/graphql/client_factory.js b/app/assets/javascripts/import_entities/import_groups/graphql/client_factory.js
index 4fcaa1b55fc..8f2d488d661 100644
--- a/app/assets/javascripts/import_entities/import_groups/graphql/client_factory.js
+++ b/app/assets/javascripts/import_entities/import_groups/graphql/client_factory.js
@@ -23,7 +23,7 @@ export function createResolvers({ endpoints }) {
         } = await client.query({ query: availableNamespacesQuery });
 
         return axios.get(endpoints.status).then(({ data }) => {
-          return data.importable_data.map(group => ({
+          return data.importable_data.map((group) => ({
             __typename: clientTypenames.BulkImportSourceGroup,
             ...group,
             status: STATUSES.NONE,
@@ -37,7 +37,7 @@ export function createResolvers({ endpoints }) {
 
       availableNamespaces: () =>
         axios.get(endpoints.availableNamespaces).then(({ data }) =>
-          data.map(namespace => ({
+          data.map((namespace) => ({
             __typename: clientTypenames.AvailableNamespace,
             ...namespace,
           })),
@@ -45,14 +45,14 @@ export function createResolvers({ endpoints }) {
     },
     Mutation: {
       setTargetNamespace(_, { targetNamespace, sourceGroupId }, { client }) {
-        new SourceGroupsManager({ client }).updateById(sourceGroupId, sourceGroup => {
+        new SourceGroupsManager({ client }).updateById(sourceGroupId, (sourceGroup) => {
           // eslint-disable-next-line no-param-reassign
           sourceGroup.import_target.target_namespace = targetNamespace;
         });
       },
 
       setNewName(_, { newName, sourceGroupId }, { client }) {
-        new SourceGroupsManager({ client }).updateById(sourceGroupId, sourceGroup => {
+        new SourceGroupsManager({ client }).updateById(sourceGroupId, (sourceGroup) => {
           // eslint-disable-next-line no-param-reassign
           sourceGroup.import_target.new_name = newName;
         });
diff --git a/app/assets/javascripts/import_entities/import_groups/graphql/services/source_groups_manager.js b/app/assets/javascripts/import_entities/import_groups/graphql/services/source_groups_manager.js
index f752ecc8cd6..047b04fe7d6 100644
--- a/app/assets/javascripts/import_entities/import_groups/graphql/services/source_groups_manager.js
+++ b/app/assets/javascripts/import_entities/import_groups/graphql/services/source_groups_manager.js
@@ -37,7 +37,7 @@ export class SourceGroupsManager {
   }
 
   setImportStatus(group, status) {
-    this.update(group, sourceGroup => {
+    this.update(group, (sourceGroup) => {
       // eslint-disable-next-line no-param-reassign
       sourceGroup.status = status;
     });
diff --git a/app/assets/javascripts/import_entities/import_groups/graphql/services/status_poller.js b/app/assets/javascripts/import_entities/import_groups/graphql/services/status_poller.js
index 5d2922b0ba8..41dd25b9150 100644
--- a/app/assets/javascripts/import_entities/import_groups/graphql/services/status_poller.js
+++ b/app/assets/javascripts/import_entities/import_groups/graphql/services/status_poller.js
@@ -5,7 +5,7 @@ import bulkImportSourceGroupsQuery from '../queries/bulk_import_source_groups.qu
 import { STATUSES } from '../../../constants';
 import { SourceGroupsManager } from './source_groups_manager';
 
-const groupId = i => `group${i}`;
+const groupId = (i) => `group${i}`;
 
 function generateGroupsQuery(groups) {
   return gql`{
@@ -46,14 +46,14 @@ export class StatusPoller {
       const { bulkImportSourceGroups } = this.client.readQuery({
         query: bulkImportSourceGroupsQuery,
       });
-      const groupsInProgress = bulkImportSourceGroups.filter(g => g.status === STATUSES.STARTED);
+      const groupsInProgress = bulkImportSourceGroups.filter((g) => g.status === STATUSES.STARTED);
       if (groupsInProgress.length) {
         const { data: results } = await this.client.query({
           query: generateGroupsQuery(groupsInProgress),
           fetchPolicy: 'no-cache',
         });
         const completedGroups = groupsInProgress.filter((_, idx) => Boolean(results[groupId(idx)]));
-        completedGroups.forEach(group => {
+        completedGroups.forEach((group) => {
           this.groupManager.setImportStatus(group, STATUSES.FINISHED);
         });
       }
diff --git a/app/assets/javascripts/import_entities/import_projects/store/actions.js b/app/assets/javascripts/import_entities/import_projects/store/actions.js
index 7b7afd13c55..a8217ff1033 100644
--- a/app/assets/javascripts/import_entities/import_projects/store/actions.js
+++ b/app/assets/javascripts/import_entities/import_projects/store/actions.js
@@ -12,9 +12,9 @@ import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 
 let eTagPoll;
 
-const hasRedirectInError = e => e?.response?.data?.error?.redirect;
-const redirectToUrlInError = e => visitUrl(e.response.data.error.redirect);
-const tooManyRequests = e => e.response.status === httpStatusCodes.TOO_MANY_REQUESTS;
+const hasRedirectInError = (e) => e?.response?.data?.error?.redirect;
+const redirectToUrlInError = (e) => visitUrl(e.response.data.error.redirect);
+const tooManyRequests = (e) => e.response.status === httpStatusCodes.TOO_MANY_REQUESTS;
 const pathWithParams = ({ path, ...params }) => {
   const filteredParams = Object.fromEntries(
     Object.entries(params).filter(([, value]) => value !== ''),
@@ -47,7 +47,7 @@ const importAll = ({ state, dispatch }) => {
   return Promise.all(
     state.repositories
       .filter(isProjectImportable)
-      .map(r => dispatch('fetchImport', r.importSource.id)),
+      .map((r) => dispatch('fetchImport', r.importSource.id)),
   );
 };
 
@@ -69,7 +69,7 @@ const fetchReposFactory = ({ reposPath = isRequired() }) => ({ state, commit })
     .then(({ data }) => {
       commit(types.RECEIVE_REPOS_SUCCESS, convertObjectPropsToCamelCase(data, { deep: true }));
     })
-    .catch(e => {
+    .catch((e) => {
       commit(types.SET_PAGE, nextPage - 1);
 
       if (hasRedirectInError(e)) {
@@ -114,7 +114,7 @@ const fetchImportFactory = (importPath = isRequired()) => ({ state, commit, gett
         repoId,
       });
     })
-    .catch(e => {
+    .catch((e) => {
       const serverErrorMessage = e?.response?.data?.errors;
       const flashMessage = serverErrorMessage
         ? sprintf(
@@ -145,7 +145,7 @@ export const fetchJobsFactory = (jobsPath = isRequired()) => ({ state, commit, d
     method: 'fetchJobs',
     successCallback: ({ data }) =>
       commit(types.RECEIVE_JOBS_SUCCESS, convertObjectPropsToCamelCase(data, { deep: true })),
-    errorCallback: e => {
+    errorCallback: (e) => {
       if (hasRedirectInError(e)) {
         redirectToUrlInError(e);
       } else {
diff --git a/app/assets/javascripts/import_entities/import_projects/store/getters.js b/app/assets/javascripts/import_entities/import_projects/store/getters.js
index 31e22b50554..8903133ea12 100644
--- a/app/assets/javascripts/import_entities/import_projects/store/getters.js
+++ b/app/assets/javascripts/import_entities/import_projects/store/getters.js
@@ -1,27 +1,27 @@
 import { STATUSES } from '../../constants';
 import { isProjectImportable, isIncompatible } from '../utils';
 
-export const isLoading = state => state.isLoadingRepos || state.isLoadingNamespaces;
+export const isLoading = (state) => state.isLoadingRepos || state.isLoadingNamespaces;
 
-export const isImportingAnyRepo = state =>
-  state.repositories.some(repo =>
+export const isImportingAnyRepo = (state) =>
+  state.repositories.some((repo) =>
     [STATUSES.SCHEDULING, STATUSES.SCHEDULED, STATUSES.STARTED].includes(
       repo.importedProject?.importStatus,
     ),
   );
 
-export const hasIncompatibleRepos = state => state.repositories.some(isIncompatible);
+export const hasIncompatibleRepos = (state) => state.repositories.some(isIncompatible);
 
-export const hasImportableRepos = state => state.repositories.some(isProjectImportable);
+export const hasImportableRepos = (state) => state.repositories.some(isProjectImportable);
 
-export const importAllCount = state => state.repositories.filter(isProjectImportable).length;
+export const importAllCount = (state) => state.repositories.filter(isProjectImportable).length;
 
-export const getImportTarget = state => repoId => {
+export const getImportTarget = (state) => (repoId) => {
   if (state.customImportTargets[repoId]) {
     return state.customImportTargets[repoId];
   }
 
-  const repo = state.repositories.find(r => r.importSource.id === repoId);
+  const repo = state.repositories.find((r) => r.importSource.id === repoId);
 
   return {
     newName: repo.importSource.sanitizedName,
diff --git a/app/assets/javascripts/import_entities/import_projects/store/mutations.js b/app/assets/javascripts/import_entities/import_projects/store/mutations.js
index 3d718a6a386..1a96508bd48 100644
--- a/app/assets/javascripts/import_entities/import_projects/store/mutations.js
+++ b/app/assets/javascripts/import_entities/import_projects/store/mutations.js
@@ -2,7 +2,7 @@ import Vue from 'vue';
 import * as types from './mutation_types';
 import { STATUSES } from '../../constants';
 
-const makeNewImportedProject = importedProject => ({
+const makeNewImportedProject = (importedProject) => ({
   importSource: {
     id: importedProject.id,
     fullName: importedProject.importSource,
@@ -12,15 +12,15 @@ const makeNewImportedProject = importedProject => ({
   importedProject,
 });
 
-const makeNewIncompatibleProject = project => ({
+const makeNewIncompatibleProject = (project) => ({
   importSource: { ...project, incompatible: true },
   importedProject: null,
 });
 
 const processLegacyEntries = ({ newRepositories, existingRepositories, factory }) => {
   const newEntries = [];
-  newRepositories.forEach(project => {
-    const existingProject = existingRepositories.find(p => p.importSource.id === project.id);
+  newRepositories.forEach((project) => {
+    const existingProject = existingRepositories.find((p) => p.importSource.id === project.id);
     const importedProjectShape = factory(project);
 
     if (existingProject) {
@@ -66,7 +66,7 @@ export default {
       state.repositories = [
         ...newImportedProjects,
         ...state.repositories,
-        ...repositories.providerRepos.map(project => ({
+        ...repositories.providerRepos.map((project) => ({
           importSource: project,
           importedProject: null,
         })),
@@ -91,7 +91,7 @@ export default {
   },
 
   [types.REQUEST_IMPORT](state, { repoId, importTarget }) {
-    const existingRepo = state.repositories.find(r => r.importSource.id === repoId);
+    const existingRepo = state.repositories.find((r) => r.importSource.id === repoId);
     existingRepo.importedProject = {
       importStatus: STATUSES.SCHEDULING,
       fullPath: `/${importTarget.targetNamespace}/${importTarget.newName}`,
@@ -99,18 +99,18 @@ export default {
   },
 
   [types.RECEIVE_IMPORT_SUCCESS](state, { importedProject, repoId }) {
-    const existingRepo = state.repositories.find(r => r.importSource.id === repoId);
+    const existingRepo = state.repositories.find((r) => r.importSource.id === repoId);
     existingRepo.importedProject = importedProject;
   },
 
   [types.RECEIVE_IMPORT_ERROR](state, repoId) {
-    const existingRepo = state.repositories.find(r => r.importSource.id === repoId);
+    const existingRepo = state.repositories.find((r) => r.importSource.id === repoId);
     existingRepo.importedProject = null;
   },
 
   [types.RECEIVE_JOBS_SUCCESS](state, updatedProjects) {
-    updatedProjects.forEach(updatedProject => {
-      const repo = state.repositories.find(p => p.importedProject?.id === updatedProject.id);
+    updatedProjects.forEach((updatedProject) => {
+      const repo = state.repositories.find((p) => p.importedProject?.id === updatedProject.id);
       if (repo?.importedProject) {
         repo.importedProject.importStatus = updatedProject.importStatus;
       }
@@ -131,7 +131,7 @@ export default {
   },
 
   [types.SET_IMPORT_TARGET](state, { repoId, importTarget }) {
-    const existingRepo = state.repositories.find(r => r.importSource.id === repoId);
+    const existingRepo = state.repositories.find((r) => r.importSource.id === repoId);
 
     if (
       importTarget.targetNamespace === state.defaultTargetNamespace &&
diff --git a/app/assets/javascripts/init_changes_dropdown.js b/app/assets/javascripts/init_changes_dropdown.js
index c0dc6ce07b1..22667d8ae88 100644
--- a/app/assets/javascripts/init_changes_dropdown.js
+++ b/app/assets/javascripts/init_changes_dropdown.js
@@ -2,7 +2,7 @@ import $ from 'jquery';
 import { stickyMonitor } from './lib/utils/sticky';
 import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
-export default stickyTop => {
+export default (stickyTop) => {
   stickyMonitor(document.querySelector('.js-diff-files-changed'), stickyTop);
 
   initDeprecatedJQueryDropdown($('.js-diff-stats-dropdown'), {
diff --git a/app/assets/javascripts/integrations/edit/components/dynamic_field.vue b/app/assets/javascripts/integrations/edit/components/dynamic_field.vue
index 9dde1ed1055..f568f7e6d3d 100644
--- a/app/assets/javascripts/integrations/edit/components/dynamic_field.vue
+++ b/app/assets/javascripts/integrations/edit/components/dynamic_field.vue
@@ -92,7 +92,7 @@ export default {
       return isEmpty(this.value) && this.required;
     },
     options() {
-      return this.choices.map(choice => {
+      return this.choices.map((choice) => {
         return {
           value: choice[1],
           text: choice[0],
diff --git a/app/assets/javascripts/integrations/edit/components/override_dropdown.vue b/app/assets/javascripts/integrations/edit/components/override_dropdown.vue
index c31dada8d2f..4e2c37ac7f3 100644
--- a/app/assets/javascripts/integrations/edit/components/override_dropdown.vue
+++ b/app/assets/javascripts/integrations/edit/components/override_dropdown.vue
@@ -40,7 +40,7 @@ export default {
   },
   data() {
     return {
-      selected: dropdownOptions.find(x => x.value === this.override),
+      selected: dropdownOptions.find((x) => x.value === this.override),
     };
   },
   computed: {
diff --git a/app/assets/javascripts/integrations/edit/store/getters.js b/app/assets/javascripts/integrations/edit/store/getters.js
index 310d970c73e..39e14de2d0d 100644
--- a/app/assets/javascripts/integrations/edit/store/getters.js
+++ b/app/assets/javascripts/integrations/edit/store/getters.js
@@ -1,6 +1,6 @@
-export const isInheriting = state => (state.defaultState === null ? false : !state.override);
+export const isInheriting = (state) => (state.defaultState === null ? false : !state.override);
 
-export const isDisabled = state => state.isSaving || state.isTesting || state.isResetting;
+export const isDisabled = (state) => state.isSaving || state.isTesting || state.isResetting;
 
 export const propsSource = (state, getters) =>
   getters.isInheriting ? state.defaultState : state.customState;
diff --git a/app/assets/javascripts/integrations/integration_settings_form.js b/app/assets/javascripts/integrations/integration_settings_form.js
index 85fcbcec96a..861655a6a64 100644
--- a/app/assets/javascripts/integrations/integration_settings_form.js
+++ b/app/assets/javascripts/integrations/integration_settings_form.js
@@ -23,7 +23,7 @@ export default class IntegrationSettingsForm {
       document.querySelector('.js-vue-integration-settings'),
       document.querySelector('.js-vue-default-integration-settings'),
     );
-    eventHub.$on('toggle', active => {
+    eventHub.$on('toggle', (active) => {
       this.formActive = active;
       this.toggleServiceState();
     });
diff --git a/app/assets/javascripts/invite_member/init_invite_member_modal.js b/app/assets/javascripts/invite_member/init_invite_member_modal.js
index 7d60d78d3d9..901e3e315ee 100644
--- a/app/assets/javascripts/invite_member/init_invite_member_modal.js
+++ b/app/assets/javascripts/invite_member/init_invite_member_modal.js
@@ -16,6 +16,6 @@ export default function initInviteMembersModal() {
   return new Vue({
     el,
     provide: { membersPath },
-    render: createElement => createElement(InviteMemberModal),
+    render: (createElement) => createElement(InviteMemberModal),
   });
 }
diff --git a/app/assets/javascripts/invite_member/init_invite_member_trigger.js b/app/assets/javascripts/invite_member/init_invite_member_trigger.js
index a5f904b87a6..5e763e4f47d 100644
--- a/app/assets/javascripts/invite_member/init_invite_member_trigger.js
+++ b/app/assets/javascripts/invite_member/init_invite_member_trigger.js
@@ -11,6 +11,6 @@ export default function initInviteMembersTrigger() {
   return new Vue({
     el,
     provide: { ...el.dataset },
-    render: createElement => createElement(InviteMemberTrigger),
+    render: (createElement) => createElement(InviteMemberTrigger),
   });
 }
diff --git a/app/assets/javascripts/invite_members/components/invite_members_modal.vue b/app/assets/javascripts/invite_members/components/invite_members_modal.vue
index 7dbbe072ba6..dbb0ed11e1b 100644
--- a/app/assets/javascripts/invite_members/components/invite_members_modal.vue
+++ b/app/assets/javascripts/invite_members/components/invite_members_modal.vue
@@ -93,7 +93,7 @@ export default {
     },
     selectedRoleName() {
       return Object.keys(this.accessLevels).find(
-        key => this.accessLevels[key] === Number(this.selectedAccessLevel),
+        (key) => this.accessLevels[key] === Number(this.selectedAccessLevel),
       );
     },
   },
diff --git a/app/assets/javascripts/invite_members/components/members_token_select.vue b/app/assets/javascripts/invite_members/components/members_token_select.vue
index aed2e5e3236..d839c089f2e 100644
--- a/app/assets/javascripts/invite_members/components/members_token_select.vue
+++ b/app/assets/javascripts/invite_members/components/members_token_select.vue
@@ -34,7 +34,7 @@ export default {
   computed: {
     newUsersToInvite() {
       return this.selectedTokens
-        .map(obj => {
+        .map((obj) => {
           return obj.id;
         })
         .join(',');
@@ -55,8 +55,8 @@ export default {
     },
     retrieveUsers: debounce(function debouncedRetrieveUsers() {
       return Api.users(this.query, this.$options.queryOptions)
-        .then(response => {
-          this.users = response.data.map(token => ({
+        .then((response) => {
+          this.users = response.data.map((token) => ({
             id: token.id,
             name: token.name,
             username: token.username,
diff --git a/app/assets/javascripts/invite_members/init_invite_members_modal.js b/app/assets/javascripts/invite_members/init_invite_members_modal.js
index db957ecacfd..4c67c310e9e 100644
--- a/app/assets/javascripts/invite_members/init_invite_members_modal.js
+++ b/app/assets/javascripts/invite_members/init_invite_members_modal.js
@@ -13,7 +13,7 @@ export default function initInviteMembersModal() {
 
   return new Vue({
     el,
-    render: createElement =>
+    render: (createElement) =>
       createElement(InviteMembersModal, {
         props: {
           ...el.dataset,
diff --git a/app/assets/javascripts/invite_members/init_invite_members_trigger.js b/app/assets/javascripts/invite_members/init_invite_members_trigger.js
index bee4f1c0f72..a7b95960995 100644
--- a/app/assets/javascripts/invite_members/init_invite_members_trigger.js
+++ b/app/assets/javascripts/invite_members/init_invite_members_trigger.js
@@ -10,7 +10,7 @@ export default function initInviteMembersTrigger() {
 
   return new Vue({
     el,
-    render: createElement =>
+    render: (createElement) =>
       createElement(InviteMembersTrigger, {
         props: {
           ...el.dataset,
diff --git a/app/assets/javascripts/issuable_bulk_update_actions.js b/app/assets/javascripts/issuable_bulk_update_actions.js
index 6ba21cd7869..8bb76edbd47 100644
--- a/app/assets/javascripts/issuable_bulk_update_actions.js
+++ b/app/assets/javascripts/issuable_bulk_update_actions.js
@@ -101,7 +101,7 @@ export default {
     // Collect unique label IDs for all checked issues
     this.getElement('.selected-issuable:checked').each((i, el) => {
       issuableLabels = this.getElement(`#${this.prefixId}${el.dataset.id}`).data('labels');
-      issuableLabels.forEach(labelId => {
+      issuableLabels.forEach((labelId) => {
         // Store unique IDs
         if (uniqueIds.indexOf(labelId) === -1) {
           uniqueIds.push(labelId);
@@ -113,7 +113,7 @@ export default {
     // Add uniqueIds to add it as argument for _.intersection
     labelIds.unshift(uniqueIds);
     // Return IDs that are present but not in all selected issueables
-    return uniqueIds.filter(x => !intersection.apply(this, labelIds).includes(x));
+    return uniqueIds.filter((x) => !intersection.apply(this, labelIds).includes(x));
   },
 
   getElement(selector) {
diff --git a/app/assets/javascripts/issuable_bulk_update_sidebar.js b/app/assets/javascripts/issuable_bulk_update_sidebar.js
index 7d9cefbe66a..b9daa16874a 100644
--- a/app/assets/javascripts/issuable_bulk_update_sidebar.js
+++ b/app/assets/javascripts/issuable_bulk_update_sidebar.js
@@ -39,9 +39,9 @@ export default class IssuableBulkUpdateSidebar {
   }
 
   bindEvents() {
-    this.$bulkUpdateEnableBtn.on('click', e => this.toggleBulkEdit(e, true));
-    this.$bulkEditCancelBtn.on('click', e => this.toggleBulkEdit(e, false));
-    this.$checkAllContainer.on('click', e => this.selectAll(e));
+    this.$bulkUpdateEnableBtn.on('click', (e) => this.toggleBulkEdit(e, true));
+    this.$bulkEditCancelBtn.on('click', (e) => this.toggleBulkEdit(e, false));
+    this.$checkAllContainer.on('click', (e) => this.selectAll(e));
     this.$issuesList.on('change', () => this.updateFormState());
     this.$bulkEditSubmitBtn.on('click', () => this.prepForSubmit());
     this.$checkAllContainer.on('click', () => this.updateFormState());
@@ -159,7 +159,7 @@ export default class IssuableBulkUpdateSidebar {
     const $checkedIssues = $('.selected-issuable:checked');
 
     if ($checkedIssues.length > 0) {
-      return $.map($checkedIssues, value => $(value).data('id'));
+      return $.map($checkedIssues, (value) => $(value).data('id'));
     }
 
     return [];
diff --git a/app/assets/javascripts/issuable_context.js b/app/assets/javascripts/issuable_context.js
index 2072e41514d..6fcff90b608 100644
--- a/app/assets/javascripts/issuable_context.js
+++ b/app/assets/javascripts/issuable_context.js
@@ -31,7 +31,7 @@ export default class IssuableContext {
     });
     $(document)
       .off('click', '.issuable-sidebar .dropdown-content a')
-      .on('click', '.issuable-sidebar .dropdown-content a', e => e.preventDefault());
+      .on('click', '.issuable-sidebar .dropdown-content a', (e) => e.preventDefault());
 
     $(document)
       .off('click', '.edit-link')
diff --git a/app/assets/javascripts/issuable_form.js b/app/assets/javascripts/issuable_form.js
index 5ebd2caf130..a8fd7aaecdf 100644
--- a/app/assets/javascripts/issuable_form.js
+++ b/app/assets/javascripts/issuable_form.js
@@ -89,9 +89,9 @@ export default class IssuableForm {
         theme: 'gitlab-theme animate-picker',
         format: 'yyyy-mm-dd',
         container: $issuableDueDate.parent().get(0),
-        parse: dateString => parsePikadayDate(dateString),
-        toString: date => pikadayToString(date),
-        onSelect: dateText => $issuableDueDate.val(calendar.toString(dateText)),
+        parse: (dateString) => parsePikadayDate(dateString),
+        toString: (date) => pikadayToString(date),
+        onSelect: (dateText) => $issuableDueDate.val(calendar.toString(dateText)),
         firstDay: gon.first_day_of_week,
       });
       calendar.setDate(parsePikadayDate($issuableDueDate.val()));
@@ -202,7 +202,7 @@ export default class IssuableForm {
                 results(data) {
                   return {
                     // `data` keys are translated so we can't just access them with a string based key
-                    results: data[Object.keys(data)[0]].map(name => ({
+                    results: data[Object.keys(data)[0]].map((name) => ({
                       id: name,
                       text: name,
                     })),
diff --git a/app/assets/javascripts/issuable_index.js b/app/assets/javascripts/issuable_index.js
index 92158c42de3..4f31d26ab5d 100644
--- a/app/assets/javascripts/issuable_index.js
+++ b/app/assets/javascripts/issuable_index.js
@@ -13,7 +13,7 @@ export default class IssuableIndex {
   static resetIncomingEmailToken() {
     const $resetToken = $('.incoming-email-token-reset');
 
-    $resetToken.on('click', e => {
+    $resetToken.on('click', (e) => {
       e.preventDefault();
 
       $resetToken.text(s__('EmailToken|resetting...'));
diff --git a/app/assets/javascripts/issuable_list/components/issuable_list_root.vue b/app/assets/javascripts/issuable_list/components/issuable_list_root.vue
index b2312c55f01..c5475a34d3c 100644
--- a/app/assets/javascripts/issuable_list/components/issuable_list_root.vue
+++ b/app/assets/javascripts/issuable_list/components/issuable_list_root.vue
@@ -200,7 +200,7 @@ export default {
       this.checkedIssuables[this.issuableId(issuable)].checked = value;
     },
     handleAllIssuablesCheckedInput(value) {
-      Object.keys(this.checkedIssuables).forEach(issuableId => {
+      Object.keys(this.checkedIssuables).forEach((issuableId) => {
         this.checkedIssuables[issuableId].checked = value;
       });
     },
diff --git a/app/assets/javascripts/issuable_suggestions/components/app.vue b/app/assets/javascripts/issuable_suggestions/components/app.vue
index 8a9a880e7ee..ac5f04147d3 100644
--- a/app/assets/javascripts/issuable_suggestions/components/app.vue
+++ b/app/assets/javascripts/issuable_suggestions/components/app.vue
@@ -29,7 +29,7 @@ export default {
       skip() {
         return this.isSearchEmpty;
       },
-      update: data => data.project.issues.edges.map(({ node }) => node),
+      update: (data) => data.project.issues.edges.map(({ node }) => node),
       variables() {
         return {
           fullPath: this.projectPath,
diff --git a/app/assets/javascripts/issue.js b/app/assets/javascripts/issue.js
index 66462937ef5..91912c684ad 100644
--- a/app/assets/javascripts/issue.js
+++ b/app/assets/javascripts/issue.js
@@ -23,7 +23,7 @@ export default class Issue {
     }
 
     // Listen to state changes in the Vue app
-    document.addEventListener('issuable_vue_app:change', event => {
+    document.addEventListener('issuable_vue_app:change', (event) => {
       this.updateTopState(event.detail.isClosed, event.detail.data);
     });
   }
@@ -80,7 +80,7 @@ export default class Issue {
       alertMovedFromServiceDeskWarning.show();
     }
 
-    alertMovedFromServiceDeskWarning.on('click', '.js-close', e => {
+    alertMovedFromServiceDeskWarning.on('click', '.js-close', (e) => {
       e.preventDefault();
       e.stopImmediatePropagation();
       alertMovedFromServiceDeskWarning.remove();
diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index 61e5db0970a..d569ad573a2 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -250,7 +250,7 @@ export default {
     this.poll = new Poll({
       resource: this.service,
       method: 'getData',
-      successCallback: res => this.store.updateState(res.data),
+      successCallback: (res) => this.store.updateState(res.data),
       errorCallback(err) {
         throw new Error(err);
       },
@@ -294,8 +294,8 @@ export default {
     updateStoreState() {
       return this.service
         .getData()
-        .then(res => res.data)
-        .then(data => {
+        .then((res) => res.data)
+        .then((data) => {
           this.store.updateState(data);
         })
         .catch(() => {
@@ -320,7 +320,7 @@ export default {
     requestTemplatesAndShowForm() {
       return this.service
         .loadTemplates(this.issuableTemplateNamesPath)
-        .then(res => {
+        .then((res) => {
           this.updateAndShowForm(res.data);
         })
         .catch(() => {
@@ -345,9 +345,9 @@ export default {
     updateIssuable() {
       return this.service
         .updateIssuable(this.store.formState)
-        .then(res => res.data)
-        .then(data => this.checkForSpam(data))
-        .then(data => {
+        .then((res) => res.data)
+        .then((data) => this.checkForSpam(data))
+        .then((data) => {
           if (!window.location.pathname.includes(data.web_url)) {
             visitUrl(data.web_url);
           }
@@ -384,8 +384,8 @@ export default {
     deleteIssuable(payload) {
       return this.service
         .deleteIssuable(payload)
-        .then(res => res.data)
-        .then(data => {
+        .then((res) => res.data)
+        .then((data) => {
           // Stop the poll so we don't get 404's with the issuable not existing
           this.poll.stop();
 
diff --git a/app/assets/javascripts/issue_show/components/fields/description_template.vue b/app/assets/javascripts/issue_show/components/fields/description_template.vue
index ea6e03404e7..71299381aae 100644
--- a/app/assets/javascripts/issue_show/components/fields/description_template.vue
+++ b/app/assets/javascripts/issue_show/components/fields/description_template.vue
@@ -34,7 +34,7 @@ export default {
   mounted() {
     // Create the editor for the template
     const editor = document.querySelector('.detail-page-description .note-textarea') || {};
-    editor.setValue = val => {
+    editor.setValue = (val) => {
       this.formState.description = val;
     };
     editor.getValue = () => this.formState.description;
diff --git a/app/assets/javascripts/issue_show/issue.js b/app/assets/javascripts/issue_show/issue.js
index 8260460828b..83fd1355f26 100644
--- a/app/assets/javascripts/issue_show/issue.js
+++ b/app/assets/javascripts/issue_show/issue.js
@@ -57,6 +57,6 @@ export function initIssueHeaderActions(store) {
       reportAbusePath: el.dataset.reportAbusePath,
       submitAsSpamPath: el.dataset.submitAsSpamPath,
     },
-    render: createElement => createElement(HeaderActions),
+    render: (createElement) => createElement(HeaderActions),
   });
 }
diff --git a/app/assets/javascripts/issue_show/utils/parse_data.js b/app/assets/javascripts/issue_show/utils/parse_data.js
index 12f38005366..d5e7d2a8807 100644
--- a/app/assets/javascripts/issue_show/utils/parse_data.js
+++ b/app/assets/javascripts/issue_show/utils/parse_data.js
@@ -4,7 +4,7 @@ import { sanitize } from '~/lib/dompurify';
 // We currently load + parse the data from the issue app and related merge request
 let cachedParsedData;
 
-export const parseIssuableData = el => {
+export const parseIssuableData = (el) => {
   try {
     if (cachedParsedData) return cachedParsedData;
 
diff --git a/app/assets/javascripts/issues_list/components/issuable.vue b/app/assets/javascripts/issues_list/components/issuable.vue
index 16f8e67cde0..bb9feb262f7 100644
--- a/app/assets/javascripts/issues_list/components/issuable.vue
+++ b/app/assets/javascripts/issues_list/components/issuable.vue
@@ -110,7 +110,7 @@ export default {
       return getDayDifference(new Date(this.issuable.created_at), new Date()) < 1;
     },
     labelIdsString() {
-      return JSON.stringify(this.issuable.labels.map(l => l.id));
+      return JSON.stringify(this.issuable.labels.map((l) => l.id));
     },
     milestoneDueDate() {
       const { due_date: dueDate } = this.issuable.milestone || {};
diff --git a/app/assets/javascripts/issues_list/components/issuables_list_app.vue b/app/assets/javascripts/issues_list/components/issuables_list_app.vue
index 0ce2bcc1cce..eda8bc2b61f 100644
--- a/app/assets/javascripts/issues_list/components/issuables_list_app.vue
+++ b/app/assets/javascripts/issues_list/components/issuables_list_app.vue
@@ -208,7 +208,7 @@ export default {
   },
   mounted() {
     if (this.canBulkEdit) {
-      this.unsubscribeToggleBulkEdit = issueableEventHub.$on('issuables:toggleBulkEdit', val => {
+      this.unsubscribeToggleBulkEdit = issueableEventHub.$on('issuables:toggleBulkEdit', (val) => {
         this.isBulkEditing = val;
       });
     }
@@ -223,7 +223,7 @@ export default {
       return Boolean(this.selection[issuableId]);
     },
     setSelection(ids) {
-      ids.forEach(id => {
+      ids.forEach((id) => {
         this.select(id, true);
       });
     },
@@ -254,7 +254,7 @@ export default {
             per_page: this.itemsPerPage,
           },
         })
-        .then(response => {
+        .then((response) => {
           this.loading = false;
           this.issuables = response.data;
           this.totalItems = Number(response.headers['x-total']);
@@ -335,7 +335,7 @@ export default {
     handleFilter(filters) {
       let search = null;
 
-      filters.forEach(filter => {
+      filters.forEach((filter) => {
         if (typeof filter === 'string') {
           search = filter;
         }
diff --git a/app/assets/javascripts/issues_list/index.js b/app/assets/javascripts/issues_list/index.js
index 5ef86536865..42e97766b95 100644
--- a/app/assets/javascripts/issues_list/index.js
+++ b/app/assets/javascripts/issues_list/index.js
@@ -40,7 +40,7 @@ function mountIssuablesListApp() {
     return;
   }
 
-  document.querySelectorAll('.js-issuables-list').forEach(el => {
+  document.querySelectorAll('.js-issuables-list').forEach((el) => {
     const { canBulkEdit, emptyStateMeta = {}, scopedLabelsAvailable, ...data } = el.dataset;
 
     return new Vue({
diff --git a/app/assets/javascripts/jira_connect/index.js b/app/assets/javascripts/jira_connect/index.js
index e7aa4c437bb..cc18d67aebd 100644
--- a/app/assets/javascripts/jira_connect/index.js
+++ b/app/assets/javascripts/jira_connect/index.js
@@ -27,7 +27,7 @@ const initJiraFormHandlers = () => {
     alert(error);
   };
 
-  AP.getLocation(location => {
+  AP.getLocation((location) => {
     $('.js-jira-connect-sign-in').each(function updateSignInLink() {
       const updatedLink = `${$(this).attr('href')}?return_to=${location}`;
       $(this).attr('href', updatedLink);
@@ -38,7 +38,7 @@ const initJiraFormHandlers = () => {
     const actionUrl = $(this).attr('action');
     e.preventDefault();
 
-    AP.context.getToken(token => {
+    AP.context.getToken((token) => {
       // eslint-disable-next-line no-jquery/no-ajax
       $.post(actionUrl, {
         jwt: token,
@@ -46,7 +46,7 @@ const initJiraFormHandlers = () => {
         format: 'json',
       })
         .done(reqComplete)
-        .fail(err => reqFailed(err, 'Failed to add namespace. Please try again.'));
+        .fail((err) => reqFailed(err, 'Failed to add namespace. Please try again.'));
     });
   });
 
@@ -54,7 +54,7 @@ const initJiraFormHandlers = () => {
     const href = $(this).attr('href');
     e.preventDefault();
 
-    AP.context.getToken(token => {
+    AP.context.getToken((token) => {
       // eslint-disable-next-line no-jquery/no-ajax
       $.ajax({
         url: href,
@@ -65,7 +65,7 @@ const initJiraFormHandlers = () => {
         },
       })
         .done(reqComplete)
-        .fail(err => reqFailed(err, 'Failed to remove namespace. Please try again.'));
+        .fail((err) => reqFailed(err, 'Failed to remove namespace. Please try again.'));
     });
   });
 };
diff --git a/app/assets/javascripts/jira_import/components/jira_import_form.vue b/app/assets/javascripts/jira_import/components/jira_import_form.vue
index 4a1bca110fd..ab475c3c85a 100644
--- a/app/assets/javascripts/jira_import/components/jira_import_form.vue
+++ b/app/assets/javascripts/jira_import/components/jira_import_form.vue
@@ -118,7 +118,7 @@ export default {
     this.getJiraUserMapping();
 
     this.searchUsers()
-      .then(data => {
+      .then((data) => {
         this.initialUsers = data;
       })
       .catch(() => {});
@@ -219,7 +219,7 @@ export default {
       }
     },
     updateMapping(jiraAccountId, gitlabId, gitlabUsername) {
-      this.userMappings = this.userMappings.map(userMapping =>
+      this.userMappings = this.userMappings.map((userMapping) =>
         userMapping.jiraAccountId === jiraAccountId
           ? {
               ...userMapping,
diff --git a/app/assets/javascripts/jira_import/utils/cache_update.js b/app/assets/javascripts/jira_import/utils/cache_update.js
index 65b2e459f03..db7dbb7353f 100644
--- a/app/assets/javascripts/jira_import/utils/cache_update.js
+++ b/app/assets/javascripts/jira_import/utils/cache_update.js
@@ -20,7 +20,7 @@ export const addInProgressImportToStore = (store, jiraImportStart, fullPath) =>
 
   store.writeQuery({
     ...queryDetails,
-    data: produce(sourceData, draftData => {
+    data: produce(sourceData, (draftData) => {
       draftData.project.jiraImportStatus = IMPORT_STATE.SCHEDULED; // eslint-disable-line no-param-reassign
       // eslint-disable-next-line no-param-reassign
       draftData.project.jiraImports.nodes = [
diff --git a/app/assets/javascripts/jira_import/utils/jira_import_utils.js b/app/assets/javascripts/jira_import/utils/jira_import_utils.js
index edd6fad4aac..4e3b5b2fbde 100644
--- a/app/assets/javascripts/jira_import/utils/jira_import_utils.js
+++ b/app/assets/javascripts/jira_import/utils/jira_import_utils.js
@@ -9,10 +9,10 @@ export const IMPORT_STATE = {
   STARTED: 'started',
 };
 
-export const isInProgress = state =>
+export const isInProgress = (state) =>
   state === IMPORT_STATE.SCHEDULED || state === IMPORT_STATE.STARTED;
 
-export const isFinished = state => state === IMPORT_STATE.FINISHED;
+export const isFinished = (state) => state === IMPORT_STATE.FINISHED;
 
 /**
  * Converts the list of Jira projects into a format consumable by GlFormSelect.
@@ -22,7 +22,7 @@ export const isFinished = state => state === IMPORT_STATE.FINISHED;
  * @param {string} projects[].name - Jira project name
  * @returns {Object[]} - List of Jira projects in a format consumable by GlFormSelect
  */
-export const extractJiraProjectsOptions = projects =>
+export const extractJiraProjectsOptions = (projects) =>
   projects.map(({ key, name }) => ({ text: `${name} (${key})`, value: key }));
 
 /**
@@ -32,10 +32,10 @@ export const extractJiraProjectsOptions = projects =>
  * @param {string} jiraImports[].jiraProjectKey - Jira project key
  * @returns {string} - A label title
  */
-const calculateJiraImportLabelTitle = jiraImports => {
+const calculateJiraImportLabelTitle = (jiraImports) => {
   const mostRecentJiraProjectKey = last(jiraImports)?.jiraProjectKey;
   const jiraProjectImportCount = jiraImports.filter(
-    jiraImport => jiraImport.jiraProjectKey === mostRecentJiraProjectKey,
+    (jiraImport) => jiraImport.jiraProjectKey === mostRecentJiraProjectKey,
   ).length;
   return `jira-import::${mostRecentJiraProjectKey}-${jiraProjectImportCount}`;
 };
@@ -50,7 +50,7 @@ const calculateJiraImportLabelTitle = jiraImports => {
  * @returns {string} - The label color associated with the given labelTitle
  */
 const calculateJiraImportLabelColor = (labelTitle, labels) =>
-  labels.find(label => label.title === labelTitle)?.color;
+  labels.find((label) => label.title === labelTitle)?.color;
 
 /**
  * Calculates the label for the most recent Jira import.
@@ -91,7 +91,7 @@ export const shouldShowFinishedAlert = (labelTitle, importStatus) => {
  *
  * @param {string} labelTitle - Jira import label, for checking localStorage
  */
-export const setFinishedAlertHideMap = labelTitle => {
+export const setFinishedAlertHideMap = (labelTitle) => {
   const finishedAlertHideMap =
     JSON.parse(localStorage.getItem(JIRA_IMPORT_SUCCESS_ALERT_HIDE_MAP_KEY)) || {};
 
diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index 30093224631..b0ba6ce52d1 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -134,7 +134,7 @@ export default {
       if (isEmpty(oldVal) && !isEmpty(newVal.pipeline)) {
         const stages = this.job.pipeline.details.stages || [];
 
-        const defaultStage = stages.find(stage => stage && stage.name === this.selectedStage);
+        const defaultStage = stages.find((stage) => stage && stage.name === this.selectedStage);
 
         if (defaultStage) {
           this.fetchJobsForStage(defaultStage);
diff --git a/app/assets/javascripts/jobs/components/log/line.vue b/app/assets/javascripts/jobs/components/log/line.vue
index 87af387ca91..2d9714cd06b 100644
--- a/app/assets/javascripts/jobs/components/log/line.vue
+++ b/app/assets/javascripts/jobs/components/log/line.vue
@@ -18,7 +18,7 @@ export default {
   render(h, { props }) {
     const { line, path } = props;
 
-    const chars = line.content.map(content => {
+    const chars = line.content.map((content) => {
       return h(
         'span',
         {
@@ -26,7 +26,7 @@ export default {
         },
         // Simple "tokenization": Split text in chunks of text
         // which alternate between text and urls.
-        content.text.split(linkRegex).map(chunk => {
+        content.text.split(linkRegex).map((chunk) => {
           // Return normal string for non-links
           if (!chunk.match(linkRegex)) {
             return chunk;
diff --git a/app/assets/javascripts/jobs/components/manual_variables_form.vue b/app/assets/javascripts/jobs/components/manual_variables_form.vue
index 9189c88c1c7..24276cbe60a 100644
--- a/app/assets/javascripts/jobs/components/manual_variables_form.vue
+++ b/app/assets/javascripts/jobs/components/manual_variables_form.vue
@@ -94,7 +94,7 @@ export default {
     },
     deleteVariable(id) {
       this.variables.splice(
-        this.variables.findIndex(el => el.id === id),
+        this.variables.findIndex((el) => el.id === id),
         1,
       );
     },
diff --git a/app/assets/javascripts/jobs/components/trigger_block.vue b/app/assets/javascripts/jobs/components/trigger_block.vue
index 3cb5e63fd36..1d46dd8cea4 100644
--- a/app/assets/javascripts/jobs/components/trigger_block.vue
+++ b/app/assets/javascripts/jobs/components/trigger_block.vue
@@ -27,7 +27,7 @@ export default {
       return this.showVariableValues ? __('Hide values') : __('Reveal values');
     },
     hasValues() {
-      return this.trigger.variables.some(v => v.value);
+      return this.trigger.variables.some((v) => v.value);
     },
   },
   methods: {
diff --git a/app/assets/javascripts/jobs/store/actions.js b/app/assets/javascripts/jobs/store/actions.js
index cac9dc06284..a47c1d961d2 100644
--- a/app/assets/javascripts/jobs/store/actions.js
+++ b/app/assets/javascripts/jobs/store/actions.js
@@ -188,7 +188,7 @@ export const fetchTrace = ({ dispatch, state }) =>
         dispatch('startPollingTrace');
       }
     })
-    .catch(e =>
+    .catch((e) =>
       e.response.status === httpStatusCodes.FORBIDDEN
         ? dispatch('receiveTraceUnauthorizedError')
         : dispatch('receiveTraceError'),
@@ -244,7 +244,7 @@ export const fetchJobsForStage = ({ dispatch }, stage = {}) => {
       },
     })
     .then(({ data }) => {
-      const retriedJobs = data.retried.map(job => ({ ...job, retried: true }));
+      const retriedJobs = data.retried.map((job) => ({ ...job, retried: true }));
       const jobs = data.latest_statuses.concat(retriedJobs);
 
       dispatch('receiveJobsForStageSuccess', jobs);
@@ -259,7 +259,7 @@ export const receiveJobsForStageError = ({ commit }) => {
 };
 
 export const triggerManualJob = ({ state, dispatch }, variables) => {
-  const parsedVariables = variables.map(variable => {
+  const parsedVariables = variables.map((variable) => {
     const copyVar = { ...variable };
     delete copyVar.id;
     return copyVar;
diff --git a/app/assets/javascripts/jobs/store/getters.js b/app/assets/javascripts/jobs/store/getters.js
index 8c2d1dd8ab2..30a4a247dc4 100644
--- a/app/assets/javascripts/jobs/store/getters.js
+++ b/app/assets/javascripts/jobs/store/getters.js
@@ -1,37 +1,37 @@
 import { isEmpty, isString } from 'lodash';
 import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
 
-export const headerTime = state => (state.job.started ? state.job.started : state.job.created_at);
+export const headerTime = (state) => (state.job.started ? state.job.started : state.job.created_at);
 
-export const hasForwardDeploymentFailure = state =>
+export const hasForwardDeploymentFailure = (state) =>
   state?.job?.failure_reason === 'forward_deployment_failure';
 
-export const hasUnmetPrerequisitesFailure = state =>
+export const hasUnmetPrerequisitesFailure = (state) =>
   state?.job?.failure_reason === 'unmet_prerequisites';
 
-export const shouldRenderCalloutMessage = state =>
+export const shouldRenderCalloutMessage = (state) =>
   !isEmpty(state.job.status) && !isEmpty(state.job.callout_message);
 
 /**
  * When job has not started the key will be null
  * When job started the key will be a string with a date.
  */
-export const shouldRenderTriggeredLabel = state => isString(state.job.started);
+export const shouldRenderTriggeredLabel = (state) => isString(state.job.started);
 
-export const hasEnvironment = state => !isEmpty(state.job.deployment_status);
+export const hasEnvironment = (state) => !isEmpty(state.job.deployment_status);
 
 /**
  * Checks if it the job has trace.
  * Used to check if it should render the job log or the empty state
  * @returns {Boolean}
  */
-export const hasTrace = state =>
+export const hasTrace = (state) =>
   state.job.has_trace || (!isEmpty(state.job.status) && state.job.status.group === 'running');
 
-export const emptyStateIllustration = state =>
+export const emptyStateIllustration = (state) =>
   (state.job && state.job.status && state.job.status.illustration) || {};
 
-export const emptyStateAction = state =>
+export const emptyStateAction = (state) =>
   (state.job && state.job.status && state.job.status.action) || null;
 
 /**
@@ -40,12 +40,12 @@ export const emptyStateAction = state =>
  *
  * @returns {Boolean}
  */
-export const shouldRenderSharedRunnerLimitWarning = state =>
+export const shouldRenderSharedRunnerLimitWarning = (state) =>
   !isEmpty(state.job.runners) &&
   !isEmpty(state.job.runners.quota) &&
   state.job.runners.quota.used >= state.job.runners.quota.limit;
 
-export const isScrollingDown = state => isScrolledToBottom() && !state.isTraceComplete;
+export const isScrollingDown = (state) => isScrolledToBottom() && !state.isTraceComplete;
 
-export const hasRunnersForProject = state =>
+export const hasRunnersForProject = (state) =>
   state.job.runners.available && !state.job.runners.online;
diff --git a/app/assets/javascripts/jobs/store/utils.js b/app/assets/javascripts/jobs/store/utils.js
index ea9c214de32..a0e0a0fb8bd 100644
--- a/app/assets/javascripts/jobs/store/utils.js
+++ b/app/assets/javascripts/jobs/store/utils.js
@@ -43,7 +43,7 @@ export const parseHeaderLine = (line = {}, lineNumber) => ({
  * @param Object durationLine
  */
 export function addDurationToHeader(data, durationLine) {
-  data.forEach(el => {
+  data.forEach((el) => {
     if (el.line && el.line.section === durationLine.section) {
       el.line.section_duration = durationLine.section_duration;
     }
@@ -72,7 +72,7 @@ export const isCollapsibleSection = (acc = [], last = {}, section = {}) =>
  * @param Array acc
  * @returns Number
  */
-export const getIncrementalLineNumber = acc => {
+export const getIncrementalLineNumber = (acc) => {
   let lineNumberValue;
   const lastIndex = acc.length - 1;
   const lastElement = acc[lastIndex];
diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js
index 2928a64b7e8..337d063b02a 100644
--- a/app/assets/javascripts/labels_select.js
+++ b/app/assets/javascripts/labels_select.js
@@ -124,15 +124,15 @@ export default class LabelsSelect {
                 const toRemoveIds = Array.from(
                   $form.find(`input[type="hidden"][name="${fieldName}"]`),
                 )
-                  .map(el => el.value)
+                  .map((el) => el.value)
                   .map(Number);
 
-                data.labels.forEach(label => {
+                data.labels.forEach((label) => {
                   const index = toRemoveIds.indexOf(label.id);
                   toRemoveIds.splice(index, 1);
                 });
 
-                toRemoveIds.forEach(id => {
+                toRemoveIds.forEach((id) => {
                   $form
                     .find(`input[type="hidden"][name="${fieldName}"][value="${id}"]`)
                     .last()
@@ -157,7 +157,7 @@ export default class LabelsSelect {
           const labelUrl = $dropdown.attr('data-labels');
           axios
             .get(labelUrl)
-            .then(res => {
+            .then((res) => {
               let { data } = res;
               if ($dropdown.hasClass('js-extra-options')) {
                 const extraData = [];
@@ -390,7 +390,7 @@ export default class LabelsSelect {
               );
             } else {
               let { labels } = boardsStore.detail.issue;
-              labels = labels.filter(selectedLabel => selectedLabel.id !== label.id);
+              labels = labels.filter((selectedLabel) => selectedLabel.id !== label.id);
               boardsStore.detail.issue.labels = labels;
             }
 
@@ -401,12 +401,12 @@ export default class LabelsSelect {
               .update($dropdown.attr('data-issue-update'))
               .then(() => {
                 if (isScopedLabel(label)) {
-                  const prevIds = oldLabels.map(label => label.id);
-                  const newIds = boardsStore.detail.issue.labels.map(label => label.id);
-                  const differentIds = prevIds.filter(x => !newIds.includes(x));
+                  const prevIds = oldLabels.map((label) => label.id);
+                  const newIds = boardsStore.detail.issue.labels.map((label) => label.id);
+                  const differentIds = prevIds.filter((x) => !newIds.includes(x));
                   $dropdown.data('marked', newIds);
                   $dropdownMenu
-                    .find(differentIds.map(id => `[data-label-id="${id}"]`).join(','))
+                    .find(differentIds.map((id) => `[data-label-id="${id}"]`).join(','))
                     .removeClass('is-active');
                 }
               })
diff --git a/app/assets/javascripts/lazy_loader.js b/app/assets/javascripts/lazy_loader.js
index aa7fe087678..b7cb6aa0a21 100644
--- a/app/assets/javascripts/lazy_loader.js
+++ b/app/assets/javascripts/lazy_loader.js
@@ -28,10 +28,10 @@ export default class LazyLoader {
         const lazyImages = [].slice.call(document.querySelectorAll('.lazy'));
 
         if (LazyLoader.supportsNativeLazyLoading()) {
-          lazyImages.forEach(img => LazyLoader.loadImage(img));
+          lazyImages.forEach((img) => LazyLoader.loadImage(img));
         } else if (LazyLoader.supportsIntersectionObserver()) {
           if (this.intersectionObserver) {
-            lazyImages.forEach(img => this.intersectionObserver.observe(img));
+            lazyImages.forEach((img) => this.intersectionObserver.observe(img));
           }
         } else if (lazyImages.length) {
           this.lazyImages = lazyImages;
@@ -98,8 +98,8 @@ export default class LazyLoader {
     });
   };
 
-  onIntersection = entries => {
-    entries.forEach(entry => {
+  onIntersection = (entries) => {
+    entries.forEach((entry) => {
       // We are using `intersectionRatio > 0` over `isIntersecting`, as some browsers did not ship the latter
       // See: https://gitlab.com/gitlab-org/gitlab-foss/issues/54407
       if (entry.intersectionRatio > 0) {
@@ -126,7 +126,7 @@ export default class LazyLoader {
     const visHeight = scrollTop + window.innerHeight + SCROLL_THRESHOLD;
 
     // Loading Images which are in the current viewport or close to them
-    this.lazyImages = this.lazyImages.filter(selectedImage => {
+    this.lazyImages = this.lazyImages.filter((selectedImage) => {
       if (selectedImage.getAttribute('data-src')) {
         const imgBoundRect = selectedImage.getBoundingClientRect();
         const imgTop = scrollTop + imgBoundRect.top;
diff --git a/app/assets/javascripts/lib/chrome_84_icon_fix.js b/app/assets/javascripts/lib/chrome_84_icon_fix.js
index 60497186c19..20fe9590ce3 100644
--- a/app/assets/javascripts/lib/chrome_84_icon_fix.js
+++ b/app/assets/javascripts/lib/chrome_84_icon_fix.js
@@ -30,7 +30,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 
   const fixSVGs = () => {
     requestIdleCallback(() => {
-      document.querySelectorAll(`use:not([${SKIP_ATTRIBUTE}])`).forEach(use => {
+      document.querySelectorAll(`use:not([${SKIP_ATTRIBUTE}])`).forEach((use) => {
         const href = use?.getAttribute('href') ?? use?.getAttribute('xlink:href') ?? '';
 
         if (href.includes(window.gon.sprite_icons)) {
@@ -60,7 +60,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     div.classList.add('hidden');
     const result = await fetch(url);
     div.innerHTML = await result.text();
-    div.querySelectorAll('[id]').forEach(node => {
+    div.querySelectorAll('[id]').forEach((node) => {
       node.setAttribute('id', `${prefix}-${node.getAttribute('id')}`);
     });
     document.body.append(div);
diff --git a/app/assets/javascripts/lib/dompurify.js b/app/assets/javascripts/lib/dompurify.js
index d9ea57fbbce..76624c81ed5 100644
--- a/app/assets/javascripts/lib/dompurify.js
+++ b/app/assets/javascripts/lib/dompurify.js
@@ -11,9 +11,9 @@ const defaultConfig = {
 const getAllowedIconUrls = (gon = window.gon) =>
   [gon.sprite_file_icons, gon.sprite_icons].filter(Boolean);
 
-const isUrlAllowed = url => getAllowedIconUrls().some(allowedUrl => url.startsWith(allowedUrl));
+const isUrlAllowed = (url) => getAllowedIconUrls().some((allowedUrl) => url.startsWith(allowedUrl));
 
-const isHrefSafe = url =>
+const isHrefSafe = (url) =>
   isUrlAllowed(url) || isUrlAllowed(relativePathToAbsolute(url, getBaseURL()));
 
 const removeUnsafeHref = (node, attr) => {
@@ -36,7 +36,7 @@ const removeUnsafeHref = (node, attr) => {
  *
  * @param {Object} node - Node to sanitize
  */
-const sanitizeSvgIcon = node => {
+const sanitizeSvgIcon = (node) => {
   removeUnsafeHref(node, 'href');
 
   // Note: `xlink:href` is deprecated, but still in use
@@ -44,7 +44,7 @@ const sanitizeSvgIcon = node => {
   removeUnsafeHref(node, 'xlink:href');
 };
 
-addHook('afterSanitizeAttributes', node => {
+addHook('afterSanitizeAttributes', (node) => {
   if (node.tagName.toLowerCase() === 'use') {
     sanitizeSvgIcon(node);
   }
diff --git a/app/assets/javascripts/lib/graphql.js b/app/assets/javascripts/lib/graphql.js
index e0d9a903e0a..5c4bb5ea01f 100644
--- a/app/assets/javascripts/lib/graphql.js
+++ b/app/assets/javascripts/lib/graphql.js
@@ -36,13 +36,13 @@ export default (resolvers = {}, config = {}) => {
   };
 
   const uploadsLink = ApolloLink.split(
-    operation => operation.getContext().hasUpload || operation.getContext().isSingleRequest,
+    (operation) => operation.getContext().hasUpload || operation.getContext().isSingleRequest,
     createUploadLink(httpOptions),
     new BatchHttpLink(httpOptions),
   );
 
   const performanceBarLink = new ApolloLink((operation, forward) => {
-    return forward(operation).map(response => {
+    return forward(operation).map((response) => {
       const httpResponse = operation.getContext().response;
 
       if (PerformanceBarService.interceptor) {
diff --git a/app/assets/javascripts/lib/utils/ajax_cache.js b/app/assets/javascripts/lib/utils/ajax_cache.js
index 2d976dbdbbe..935bd0f16e9 100644
--- a/app/assets/javascripts/lib/utils/ajax_cache.js
+++ b/app/assets/javascripts/lib/utils/ajax_cache.js
@@ -25,7 +25,7 @@ class AjaxCache extends Cache {
           this.internalStorage[endpoint] = data;
           delete this.pendingRequests[endpoint];
         })
-        .catch(e => {
+        .catch((e) => {
           const error = new Error(`${endpoint}: ${e.message}`);
           error.textStatus = e.message;
 
diff --git a/app/assets/javascripts/lib/utils/apollo_startup_js_link.js b/app/assets/javascripts/lib/utils/apollo_startup_js_link.js
index 5c120dd532f..014823f3831 100644
--- a/app/assets/javascripts/lib/utils/apollo_startup_js_link.js
+++ b/app/assets/javascripts/lib/utils/apollo_startup_js_link.js
@@ -7,7 +7,7 @@ import { isEqual, pickBy } from 'lodash';
  * @param obj
  * @returns {Dictionary<unknown>}
  */
-const pickDefinedValues = obj => pickBy(obj, x => x !== undefined);
+const pickDefinedValues = (obj) => pickBy(obj, (x) => x !== undefined);
 
 /**
  * Compares two set of variables, order independent
@@ -28,9 +28,9 @@ export class StartupJSLink extends ApolloLink {
   // Extract operationNames from the queries and ensure that we can
   // match operationName => element from result array
   parseStartupCalls(calls) {
-    calls.forEach(call => {
+    calls.forEach((call) => {
       const { query, variables, fetchCall } = call;
-      const operationName = parse(query)?.definitions?.find(x => x.kind === 'OperationDefinition')
+      const operationName = parse(query)?.definitions?.find((x) => x.kind === 'OperationDefinition')
         ?.name?.value;
 
       if (operationName) {
@@ -71,9 +71,9 @@ export class StartupJSLink extends ApolloLink {
       return forward(operation);
     }
 
-    return new Observable(observer => {
+    return new Observable((observer) => {
       fetchCall
-        .then(response => {
+        .then((response) => {
           // Handle HTTP errors
           if (!response.ok) {
             throw new Error('fetchCall failed');
@@ -81,7 +81,7 @@ export class StartupJSLink extends ApolloLink {
           operation.setContext({ response });
           return response.json();
         })
-        .then(result => {
+        .then((result) => {
           if (result && (result.errors || !result.data)) {
             throw new Error('Received GraphQL error');
           }
@@ -92,10 +92,10 @@ export class StartupJSLink extends ApolloLink {
         })
         .catch(() => {
           forward(operation).subscribe({
-            next: result => {
+            next: (result) => {
               observer.next(result);
             },
-            error: error => {
+            error: (error) => {
               observer.error(error);
             },
             complete: observer.complete.bind(observer),
diff --git a/app/assets/javascripts/lib/utils/autosave.js b/app/assets/javascripts/lib/utils/autosave.js
index 56df2532528..dac1da743a2 100644
--- a/app/assets/javascripts/lib/utils/autosave.js
+++ b/app/assets/javascripts/lib/utils/autosave.js
@@ -1,6 +1,6 @@
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 
-export const clearDraft = autosaveKey => {
+export const clearDraft = (autosaveKey) => {
   try {
     window.localStorage.removeItem(`autosave/${autosaveKey}`);
   } catch (e) {
@@ -9,7 +9,7 @@ export const clearDraft = autosaveKey => {
   }
 };
 
-export const getDraft = autosaveKey => {
+export const getDraft = (autosaveKey) => {
   try {
     return window.localStorage.getItem(`autosave/${autosaveKey}`);
   } catch (e) {
diff --git a/app/assets/javascripts/lib/utils/axios_startup_calls.js b/app/assets/javascripts/lib/utils/axios_startup_calls.js
index 7bb1da5aed5..f9d58ff9b1d 100644
--- a/app/assets/javascripts/lib/utils/axios_startup_calls.js
+++ b/app/assets/javascripts/lib/utils/axios_startup_calls.js
@@ -3,9 +3,9 @@ import { mergeUrlParams } from './url_utility';
 
 // We should probably not couple this utility to `gon.gitlab_url`
 // Also, this would replace occurrences that aren't at the beginning of the string
-const removeGitLabUrl = url => url.replace(gon.gitlab_url, '');
+const removeGitLabUrl = (url) => url.replace(gon.gitlab_url, '');
 
-const getFullUrl = req => {
+const getFullUrl = (req) => {
   const url = removeGitLabUrl(req.url);
   return mergeUrlParams(req.params || {}, url, { sort: true });
 };
@@ -36,7 +36,7 @@ const handleStartupCall = async ({ fetchCall }, req) => {
   });
 };
 
-const setupAxiosStartupCalls = axios => {
+const setupAxiosStartupCalls = (axios) => {
   const { startup_calls: startupCalls } = window.gl || {};
 
   if (!startupCalls || isEmpty(startupCalls)) {
@@ -45,7 +45,7 @@ const setupAxiosStartupCalls = axios => {
 
   const remainingCalls = new Map(Object.entries(startupCalls));
 
-  const interceptor = axios.interceptors.request.use(async req => {
+  const interceptor = axios.interceptors.request.use(async (req) => {
     const fullUrl = getFullUrl(req);
 
     const startupCall = remainingCalls.get(fullUrl);
diff --git a/app/assets/javascripts/lib/utils/axios_utils.js b/app/assets/javascripts/lib/utils/axios_utils.js
index 9d517f45caa..cb479e243b2 100644
--- a/app/assets/javascripts/lib/utils/axios_utils.js
+++ b/app/assets/javascripts/lib/utils/axios_utils.js
@@ -9,7 +9,7 @@ axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
 // Maintain a global counter for active requests
 // see: spec/support/wait_for_requests.rb
-axios.interceptors.request.use(config => {
+axios.interceptors.request.use((config) => {
   window.pendingRequests = window.pendingRequests || 0;
   window.pendingRequests += 1;
   return config;
@@ -19,11 +19,11 @@ setupAxiosStartupCalls(axios);
 
 // Remove the global counter
 axios.interceptors.response.use(
-  response => {
+  (response) => {
     window.pendingRequests -= 1;
     return response;
   },
-  err => {
+  (err) => {
     window.pendingRequests -= 1;
     return Promise.reject(err);
   },
@@ -37,8 +37,8 @@ window.addEventListener('beforeunload', () => {
 // Ignore AJAX errors caused by requests
 // being cancelled due to browser navigation
 axios.interceptors.response.use(
-  response => response,
-  err => suppressAjaxErrorsDuringNavigation(err, isUserNavigating),
+  (response) => response,
+  (err) => suppressAjaxErrorsDuringNavigation(err, isUserNavigating),
 );
 
 export default axios;
diff --git a/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js b/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js
index 28a7ebfdc69..286fc2568b2 100644
--- a/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js
+++ b/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js
@@ -68,7 +68,7 @@ export default class LinkedTabs {
     // since this is a custom event we need jQuery :(
     $(document)
       .off('shown.bs.tab', tabSelector)
-      .on('shown.bs.tab', tabSelector, e => this.tabShown(e));
+      .on('shown.bs.tab', tabSelector, (e) => this.tabShown(e));
 
     this.activateTab(this.action);
   }
diff --git a/app/assets/javascripts/lib/utils/chart_utils.js b/app/assets/javascripts/lib/utils/chart_utils.js
index 4a1e6c5d68c..7da3bab0a4b 100644
--- a/app/assets/javascripts/lib/utils/chart_utils.js
+++ b/app/assets/javascripts/lib/utils/chart_utils.js
@@ -34,7 +34,7 @@ const commonChartOptions = () => ({
   legend: false,
 });
 
-export const barChartOptions = shouldAdjustFontSize => ({
+export const barChartOptions = (shouldAdjustFontSize) => ({
   ...commonChartOptions(),
   scales: {
     ...yAxesConfig(shouldAdjustFontSize),
@@ -89,7 +89,7 @@ export const lineChartOptions = ({ width, numberOfPoints, shouldAdjustFontSize }
  * @param {Array} data
  * @returns {[*, *]}
  */
-export const firstAndLastY = data => {
+export const firstAndLastY = (data) => {
   const [firstEntry] = data;
   const [lastEntry] = data.slice(-1);
 
diff --git a/app/assets/javascripts/lib/utils/color_utils.js b/app/assets/javascripts/lib/utils/color_utils.js
index 07fb2915ca7..a1f56b15631 100644
--- a/app/assets/javascripts/lib/utils/color_utils.js
+++ b/app/assets/javascripts/lib/utils/color_utils.js
@@ -4,7 +4,7 @@
  * @param hex string
  * @returns array|null
  */
-export const hexToRgb = hex => {
+export const hexToRgb = (hex) => {
   // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
   const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
   const fullHex = hex.replace(shorthandRegex, (_m, r, g, b) => r + r + g + g + b + b);
@@ -15,7 +15,7 @@ export const hexToRgb = hex => {
     : null;
 };
 
-export const textColorForBackground = backgroundColor => {
+export const textColorForBackground = (backgroundColor) => {
   const [r, g, b] = hexToRgb(backgroundColor);
 
   if (r + g + b > 500) {
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index 9e52de4b959..ba1280d89d5 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -54,7 +54,7 @@ export const getCspNonceValue = () => {
   return metaTag && metaTag.content;
 };
 
-export const rstrip = val => {
+export const rstrip = (val) => {
   if (val) {
     return val.replace(/\s+$/, '');
   }
@@ -149,13 +149,13 @@ export const isInViewport = (el, offset = {}) => {
   );
 };
 
-export const parseUrl = url => {
+export const parseUrl = (url) => {
   const parser = document.createElement('a');
   parser.href = url;
   return parser;
 };
 
-export const parseUrlPathname = url => {
+export const parseUrlPathname = (url) => {
   const parsedUrl = parseUrl(url);
   // parsedUrl.pathname will return an absolute path for Firefox and a relative path for IE11
   // We have to make sure we always have an absolute path.
@@ -166,8 +166,8 @@ const splitPath = (path = '') => path.replace(/^\?/, '').split('&');
 
 export const urlParamsToArray = (path = '') =>
   splitPath(path)
-    .filter(param => param.length > 0)
-    .map(param => {
+    .filter((param) => param.length > 0)
+    .map((param) => {
       const split = param.split('=');
       return [decodeURI(split[0]), split[1]].join('=');
     });
@@ -209,13 +209,13 @@ export const urlParamsToObject = (path = '') =>
     return data;
   }, {});
 
-export const isMetaKey = e => e.metaKey || e.ctrlKey || e.altKey || e.shiftKey;
+export const isMetaKey = (e) => e.metaKey || e.ctrlKey || e.altKey || e.shiftKey;
 
 // Identify following special clicks
 // 1) Cmd + Click on Mac (e.metaKey)
 // 2) Ctrl + Click on PC (e.ctrlKey)
 // 3) Middle-click or Mouse Wheel Click (e.which is 2)
-export const isMetaClick = e => e.metaKey || e.ctrlKey || e.which === 2;
+export const isMetaClick = (e) => e.metaKey || e.ctrlKey || e.which === 2;
 
 export const contentTop = () => {
   const isDesktop = breakpointInstance.isDesktop();
@@ -277,7 +277,7 @@ export const scrollToElement = (element, options = {}) => {
   );
 };
 
-export const scrollToElementWithContext = element => {
+export const scrollToElementWithContext = (element) => {
   const offsetMultiplier = -0.1;
   return scrollToElement(element, { offset: window.innerHeight * offsetMultiplier });
 };
@@ -287,7 +287,7 @@ export const scrollToElementWithContext = element => {
  * each browser screen repaint.
  * @param {Function} fn
  */
-export const debounceByAnimationFrame = fn => {
+export const debounceByAnimationFrame = (fn) => {
   let requestId;
 
   return function debounced(...args) {
@@ -334,7 +334,7 @@ const handleSelectedRange = (range, restrictToNode) => {
   return range.cloneContents();
 };
 
-export const getSelectedFragment = restrictToNode => {
+export const getSelectedFragment = (restrictToNode) => {
   const selection = window.getSelection();
   if (selection.rangeCount === 0) return null;
   // Most usages of the selection only want text from a part of the page (e.g. discussion)
@@ -390,10 +390,10 @@ export const insertText = (target, text) => {
   this will take in the headers from an API response and normalize them
   this way we don't run into production issues when nginx gives us lowercased header keys
 */
-export const normalizeHeaders = headers => {
+export const normalizeHeaders = (headers) => {
   const upperCaseHeaders = {};
 
-  Object.keys(headers || {}).forEach(e => {
+  Object.keys(headers || {}).forEach((e) => {
     upperCaseHeaders[e.toUpperCase()] = headers[e];
   });
 
@@ -406,7 +406,7 @@ export const normalizeHeaders = headers => {
  * @param {Object} paginationInformation
  * @returns {Object}
  */
-export const parseIntPagination = paginationInformation => ({
+export const parseIntPagination = (paginationInformation) => ({
   perPage: parseInt(paginationInformation['X-PER-PAGE'], 10),
   page: parseInt(paginationInformation['X-PAGE'], 10),
   total: parseInt(paginationInformation['X-TOTAL'], 10),
@@ -445,10 +445,10 @@ export const parseQueryStringIntoObject = (query = '') => {
  */
 export const objectToQueryString = (params = {}) =>
   Object.keys(params)
-    .map(param => `${param}=${params[param]}`)
+    .map((param) => `${param}=${params[param]}`)
     .join('&');
 
-export const buildUrlWithCurrentLocation = param => {
+export const buildUrlWithCurrentLocation = (param) => {
   if (param) return `${window.location.pathname}${param}`;
 
   return window.location.pathname;
@@ -460,7 +460,7 @@ export const buildUrlWithCurrentLocation = param => {
  *
  * @param {String} param
  */
-export const historyPushState = newUrl => {
+export const historyPushState = (newUrl) => {
   window.history.pushState({}, document.title, newUrl);
 };
 
@@ -470,7 +470,7 @@ export const historyPushState = newUrl => {
  *
  * @param {String} param
  */
-export const historyReplaceState = newUrl => {
+export const historyReplaceState = (newUrl) => {
   window.history.replaceState({}, document.title, newUrl);
 };
 
@@ -482,7 +482,7 @@ export const historyReplaceState = newUrl => {
  * @param  {String} value
  * @returns {Boolean}
  */
-export const parseBoolean = value => (value && value.toString()) === 'true';
+export const parseBoolean = (value) => (value && value.toString()) === 'true';
 
 export const BACKOFF_TIMEOUT = 'BACKOFF_TIMEOUT';
 
@@ -529,7 +529,7 @@ export const backOff = (fn, timeout = 60000) => {
   let timeElapsed = 0;
 
   return new Promise((resolve, reject) => {
-    const stop = arg => (arg instanceof Error ? reject(arg) : resolve(arg));
+    const stop = (arg) => (arg instanceof Error ? reject(arg) : resolve(arg));
 
     const next = () => {
       if (timeElapsed < timeout) {
@@ -548,7 +548,7 @@ export const backOff = (fn, timeout = 60000) => {
 export const createOverlayIcon = (iconPath, overlayPath) => {
   const faviconImage = document.createElement('img');
 
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     faviconImage.onload = () => {
       const size = 32;
 
@@ -594,7 +594,7 @@ export const createOverlayIcon = (iconPath, overlayPath) => {
   });
 };
 
-export const setFaviconOverlay = overlayPath => {
+export const setFaviconOverlay = (overlayPath) => {
   const faviconEl = document.getElementById('favicon');
 
   if (!faviconEl) {
@@ -603,7 +603,7 @@ export const setFaviconOverlay = overlayPath => {
 
   const iconPath = faviconEl.getAttribute('data-original-href');
 
-  return createOverlayIcon(iconPath, overlayPath).then(faviconWithOverlayUrl =>
+  return createOverlayIcon(iconPath, overlayPath).then((faviconWithOverlayUrl) =>
     faviconEl.setAttribute('href', faviconWithOverlayUrl),
   );
 };
@@ -617,7 +617,7 @@ export const resetFavicon = () => {
   }
 };
 
-export const setCiStatusFavicon = pageUrl =>
+export const setCiStatusFavicon = (pageUrl) =>
   axios
     .get(pageUrl)
     .then(({ data }) => {
@@ -626,7 +626,7 @@ export const setCiStatusFavicon = pageUrl =>
       }
       return resetFavicon();
     })
-    .catch(error => {
+    .catch((error) => {
       resetFavicon();
       throw error;
     });
@@ -728,7 +728,7 @@ export const convertObjectPropsToCamelCase = (obj = {}, options = {}) =>
 export const convertObjectPropsToSnakeCase = (obj = {}, options = {}) =>
   convertObjectProps(convertToSnakeCase, obj, options);
 
-export const imagePath = imgUrl =>
+export const imagePath = (imgUrl) =>
   `${gon.asset_host || ''}${gon.relative_url_root || ''}/assets/${imgUrl}`;
 
 export const addSelectOnFocusBehaviour = (selector = '.js-select-on-focus') => {
@@ -737,7 +737,7 @@ export const addSelectOnFocusBehaviour = (selector = '.js-select-on-focus') => {
   $(selector).on('focusin', function selectOnFocusCallback() {
     $(this)
       .select()
-      .one('mouseup', e => {
+      .one('mouseup', (e) => {
         e.preventDefault();
       });
   });
@@ -833,7 +833,7 @@ export const searchBy = (query = '', searchSpace = {}) => {
 
   const normalizedQuery = query.toLowerCase();
   const matches = targetKeys
-    .filter(item => {
+    .filter((item) => {
       const searchItem = `${searchSpace[item]}`.toLowerCase();
 
       return (
@@ -867,9 +867,9 @@ export const isScopedLabel = ({ title = '' }) => title.indexOf('::') !== -1;
 // Methods to set and get Cookie
 export const setCookie = (name, value) => Cookies.set(name, value, { expires: 365 });
 
-export const getCookie = name => Cookies.get(name);
+export const getCookie = (name) => Cookies.get(name);
 
-export const removeCookie = name => Cookies.remove(name);
+export const removeCookie = (name) => Cookies.remove(name);
 
 /**
  * Returns the status of a feature flag.
@@ -884,4 +884,4 @@ export const removeCookie = name => Cookies.remove(name);
  * @param {String} flag Feature flag
  * @returns {Boolean} on/off
  */
-export const isFeatureFlagEnabled = flag => window.gon.features?.[flag];
+export const isFeatureFlagEnabled = (flag) => window.gon.features?.[flag];
diff --git a/app/assets/javascripts/lib/utils/css_utils.js b/app/assets/javascripts/lib/utils/css_utils.js
index 02f092e73e1..76ac442a470 100644
--- a/app/assets/javascripts/lib/utils/css_utils.js
+++ b/app/assets/javascripts/lib/utils/css_utils.js
@@ -1,5 +1,5 @@
 export function loadCSSFile(path) {
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     if (!path) resolve();
 
     if (document.querySelector(`link[href="${path}"]`)) {
diff --git a/app/assets/javascripts/lib/utils/datetime_range.js b/app/assets/javascripts/lib/utils/datetime_range.js
index 8efbcb89607..391b685f740 100644
--- a/app/assets/javascripts/lib/utils/datetime_range.js
+++ b/app/assets/javascripts/lib/utils/datetime_range.js
@@ -7,7 +7,7 @@ const MINIMUM_DATE = new Date(0);
 
 const DEFAULT_DIRECTION = 'before';
 
-const durationToMillis = duration => {
+const durationToMillis = (duration) => {
   if (Object.entries(duration).length === 1 && Number.isFinite(duration.seconds)) {
     return secondsToMilliseconds(duration.seconds);
   }
@@ -19,9 +19,9 @@ const dateMinusDuration = (date, duration) => new Date(date.getTime() - duration
 
 const datePlusDuration = (date, duration) => new Date(date.getTime() + durationToMillis(duration));
 
-const isValidDuration = duration => Boolean(duration && Number.isFinite(duration.seconds));
+const isValidDuration = (duration) => Boolean(duration && Number.isFinite(duration.seconds));
 
-const isValidDateString = dateString => {
+const isValidDateString = (dateString) => {
   if (typeof dateString !== 'string' || !dateString.trim()) {
     return false;
   }
@@ -225,7 +225,7 @@ export function getRangeType(range) {
  *
  * @returns {FixedRange} An object with a start and end in ISO8601 format.
  */
-export const convertToFixedRange = dateTimeRange =>
+export const convertToFixedRange = (dateTimeRange) =>
   handlers[getRangeType(dateTimeRange)](dateTimeRange);
 
 /**
@@ -242,7 +242,7 @@ export const convertToFixedRange = dateTimeRange =>
  * @param {Object} timeRange - A time range object
  * @returns Copy of time range
  */
-const pruneTimeRange = timeRange => {
+const pruneTimeRange = (timeRange) => {
   const res = pick(timeRange, ['start', 'end', 'anchor', 'duration', 'direction']);
   if (res.direction === DEFAULT_DIRECTION) {
     return omit(res, 'direction');
@@ -272,7 +272,7 @@ export const isEqualTimeRanges = (timeRange, other) => {
  * @param {Array} timeRanges - Array of time tanges (haystack)
  */
 export const findTimeRange = (timeRange, timeRanges) =>
-  timeRanges.find(element => isEqualTimeRanges(element, timeRange));
+  timeRanges.find((element) => isEqualTimeRanges(element, timeRange));
 
 // Time Ranges as URL Parameters Utils
 
@@ -289,11 +289,11 @@ export const timeRangeParamNames = ['start', 'end', 'anchor', 'duration_seconds'
  * @param {Object} A time range
  * @returns key-value pairs object that can be used as parameters in a URL.
  */
-export const timeRangeToParams = timeRange => {
+export const timeRangeToParams = (timeRange) => {
   let params = pruneTimeRange(timeRange);
   if (timeRange.duration) {
     const durationParms = {};
-    Object.keys(timeRange.duration).forEach(key => {
+    Object.keys(timeRange.duration).forEach((key) => {
       durationParms[`duration_${key}`] = timeRange.duration[key].toString();
     });
     params = { ...durationParms, ...params };
@@ -309,7 +309,7 @@ export const timeRangeToParams = timeRange => {
  *
  * @param {params} params - key-value pairs object.
  */
-export const timeRangeFromParams = params => {
+export const timeRangeFromParams = (params) => {
   const timeRangeParams = pick(params, timeRangeParamNames);
   let range = Object.entries(timeRangeParams).reduce((acc, [key, val]) => {
     // unflatten duration
diff --git a/app/assets/javascripts/lib/utils/datetime_utility.js b/app/assets/javascripts/lib/utils/datetime_utility.js
index 46b0f0cbc70..1be84d9351d 100644
--- a/app/assets/javascripts/lib/utils/datetime_utility.js
+++ b/app/assets/javascripts/lib/utils/datetime_utility.js
@@ -12,7 +12,7 @@ window.timeago = timeago;
  *
  * @param {Date} date
  */
-export const newDate = date => (date instanceof Date ? new Date(date.getTime()) : new Date());
+export const newDate = (date) => (date instanceof Date ? new Date(date.getTime()) : new Date());
 
 /**
  * Returns i18n month names array.
@@ -21,7 +21,7 @@ export const newDate = date => (date instanceof Date ? new Date(date.getTime())
  *
  * @param {Boolean} abbreviated
  */
-export const getMonthNames = abbreviated => {
+export const getMonthNames = (abbreviated) => {
   if (abbreviated) {
     return [
       s__('Jan'),
@@ -74,7 +74,7 @@ export const getWeekdayNames = () => [
  * @param {date} date
  * @returns {String}
  */
-export const getDayName = date =>
+export const getDayName = (date) =>
   [
     __('Sunday'),
     __('Monday'),
@@ -242,7 +242,7 @@ export const getDayDifference = (a, b) => {
  * @param  {Number} seconds
  * @return {String}
  */
-export const timeIntervalInWords = intervalInSeconds => {
+export const timeIntervalInWords = (intervalInSeconds) => {
   const secondsInteger = parseInt(intervalInSeconds, 10);
   const minutes = Math.floor(secondsInteger / 60);
   const seconds = secondsInteger - minutes * 60;
@@ -316,7 +316,7 @@ export const monthInWords = (date, abbreviated = false) => {
  *
  * @param {Date} date
  */
-export const totalDaysInMonth = date => {
+export const totalDaysInMonth = (date) => {
   if (!date) {
     return 0;
   }
@@ -329,7 +329,7 @@ export const totalDaysInMonth = date => {
  *
  * @param {Array} quarter
  */
-export const totalDaysInQuarter = quarter =>
+export const totalDaysInQuarter = (quarter) =>
   quarter.reduce((acc, month) => acc + totalDaysInMonth(month), 0);
 
 /**
@@ -338,7 +338,7 @@ export const totalDaysInQuarter = quarter =>
  *
  * @param {Date} date
  */
-export const getSundays = date => {
+export const getSundays = (date) => {
   if (!date) {
     return [];
   }
@@ -449,7 +449,7 @@ window.gl.utils = {
  * @param milliseconds
  * @returns {string}
  */
-export const formatTime = milliseconds => {
+export const formatTime = (milliseconds) => {
   const remainingSeconds = Math.floor(milliseconds / 1000) % 60;
   const remainingMinutes = Math.floor(milliseconds / 1000 / 60) % 60;
   const remainingHours = Math.floor(milliseconds / 1000 / 60 / 60);
@@ -468,7 +468,7 @@ export const formatTime = milliseconds => {
  * @param {String} dateString Date in yyyy-mm-dd format
  * @return {Date} UTC format
  */
-export const parsePikadayDate = dateString => {
+export const parsePikadayDate = (dateString) => {
   const parts = dateString.split('-');
   const year = parseInt(parts[0], 10);
   const month = parseInt(parts[1] - 1, 10);
@@ -482,7 +482,7 @@ export const parsePikadayDate = dateString => {
  * @param {Date} date UTC format
  * @return {String} Date formatted in yyyy-mm-dd
  */
-export const pikadayToString = date => {
+export const pikadayToString = (date) => {
   const day = pad(date.getDate());
   const month = pad(date.getMonth() + 1);
   const year = date.getFullYear();
@@ -523,7 +523,7 @@ export const parseSeconds = (
 
   let unorderedMinutes = Math.abs(seconds / SECONDS_PER_MINUTE);
 
-  return mapValues(timePeriodConstraints, minutesPerPeriod => {
+  return mapValues(timePeriodConstraints, (minutesPerPeriod) => {
     if (minutesPerPeriod === 0) {
       return 0;
     }
@@ -567,7 +567,7 @@ export const stringifyTime = (timeObject, fullNameFormat = false) => {
  * @param endDate date string that the time difference is calculated for
  * @return {Number} number of milliseconds remaining until the given date
  */
-export const calculateRemainingMilliseconds = endDate => {
+export const calculateRemainingMilliseconds = (endDate) => {
   const remainingMilliseconds = new Date(endDate).getTime() - Date.now();
   return Math.max(remainingMilliseconds, 0);
 };
@@ -598,7 +598,7 @@ export const getDateInFuture = (date, daysInFuture) =>
  * @param  {Date} date
  * @returns boolean
  */
-export const isValidDate = date => date instanceof Date && !Number.isNaN(date.getTime());
+export const isValidDate = (date) => date instanceof Date && !Number.isNaN(date.getTime());
 
 /*
  * Appending T00:00:00 makes JS assume local time and prevents it from shifting the date
@@ -606,7 +606,7 @@ export const isValidDate = date => date instanceof Date && !Number.isNaN(date.ge
  * be consistent with the "edit issue -> due date" UI.
  */
 
-export const newDateAsLocaleTime = date => {
+export const newDateAsLocaleTime = (date) => {
   const suffix = 'T00:00:00';
   return new Date(`${date}${suffix}`);
 };
@@ -620,7 +620,7 @@ export const endOfDayTime = 'T23:59:59Z';
  * @param {Function} formatter
  * @return {Any[]} an array of formatted dates between 2 given dates (including start&end date)
  */
-export const getDatesInRange = (d1, d2, formatter = x => x) => {
+export const getDatesInRange = (d1, d2, formatter = (x) => x) => {
   if (!(d1 instanceof Date) || !(d2 instanceof Date)) {
     return [];
   }
@@ -643,7 +643,7 @@ export const getDatesInRange = (d1, d2, formatter = x => x) => {
  * @param {Number} seconds
  * @return {Number} number of milliseconds
  */
-export const secondsToMilliseconds = seconds => seconds * 1000;
+export const secondsToMilliseconds = (seconds) => seconds * 1000;
 
 /**
  * Converts the supplied number of seconds to days.
@@ -651,7 +651,7 @@ export const secondsToMilliseconds = seconds => seconds * 1000;
  * @param {Number} seconds
  * @return {Number} number of days
  */
-export const secondsToDays = seconds => Math.round(seconds / 86400);
+export const secondsToDays = (seconds) => Math.round(seconds / 86400);
 
 /**
  * Converts a numeric utc offset in seconds to +/- hours
@@ -662,7 +662,7 @@ export const secondsToDays = seconds => Math.round(seconds / 86400);
  *
  * @return {String} the + or - offset in hours
  */
-export const secondsToHours = offset => {
+export const secondsToHours = (offset) => {
   const parsed = parseInt(offset, 10);
   if (Number.isNaN(parsed) || parsed === 0) {
     return `0`;
@@ -687,7 +687,7 @@ export const nDaysAfter = (date, numberOfDays) =>
  * @param {Date} date the initial date
  * @return {Date} the date following the date provided
  */
-export const dayAfter = date => new Date(newDate(date).setDate(date.getDate() + 1));
+export const dayAfter = (date) => new Date(newDate(date).setDate(date.getDate() + 1));
 
 /**
  * Mimics the behaviour of the rails distance_of_time_in_words function
@@ -795,7 +795,7 @@ export const differenceInMilliseconds = (startDate, endDate = Date.now()) => {
  *
  * @return {Date} the date at the first day of the month
  */
-export const dateAtFirstDayOfMonth = date => new Date(newDate(date).setDate(1));
+export const dateAtFirstDayOfMonth = (date) => new Date(newDate(date).setDate(1));
 
 /**
  * A utility function which checks if two dates match.
diff --git a/app/assets/javascripts/lib/utils/dom_utils.js b/app/assets/javascripts/lib/utils/dom_utils.js
index 2f19a0c9b26..f11c7658a88 100644
--- a/app/assets/javascripts/lib/utils/dom_utils.js
+++ b/app/assets/javascripts/lib/utils/dom_utils.js
@@ -6,7 +6,7 @@ import { isInIssuePage, isInMRPage, isInEpicPage } from './common_utils';
  *
  * @param element DOM element to check
  */
-export const hasHorizontalOverflow = element =>
+export const hasHorizontalOverflow = (element) =>
   Boolean(element && element.scrollWidth > element.offsetWidth);
 
 export const addClassIfElementExists = (element, className) => {
@@ -64,7 +64,7 @@ export const parseBooleanDataAttributes = ({ dataset }, names) =>
  * @param {HTMLElement} element The element to test
  * @returns {Boolean} `true` if the element is currently visible, otherwise false
  */
-export const isElementVisible = element =>
+export const isElementVisible = (element) =>
   Boolean(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
 
 /**
@@ -76,4 +76,4 @@ export const isElementVisible = element =>
  * @param {HTMLElement} element The element to test
  * @returns {Boolean} `true` if the element is currently hidden, otherwise false
  */
-export const isElementHidden = element => !isElementVisible(element);
+export const isElementHidden = (element) => !isElementVisible(element);
diff --git a/app/assets/javascripts/lib/utils/forms.js b/app/assets/javascripts/lib/utils/forms.js
index 1c5f6cefeda..52e1323412d 100644
--- a/app/assets/javascripts/lib/utils/forms.js
+++ b/app/assets/javascripts/lib/utils/forms.js
@@ -1,14 +1,14 @@
-export const serializeFormEntries = entries =>
+export const serializeFormEntries = (entries) =>
   entries.reduce((acc, { name, value }) => Object.assign(acc, { [name]: value }), {});
 
-export const serializeForm = form => {
+export const serializeForm = (form) => {
   const fdata = new FormData(form);
-  const entries = Array.from(fdata.keys()).map(key => {
+  const entries = Array.from(fdata.keys()).map((key) => {
     let val = fdata.getAll(key);
     // Microsoft Edge has a bug in FormData.getAll() that returns an undefined
     // value for each form element that does not match the given key:
     // https://github.com/jimmywarting/FormData/issues/80
-    val = val.filter(n => n);
+    val = val.filter((n) => n);
     return { name: key, value: val.length === 1 ? val[0] : val };
   });
 
@@ -27,7 +27,7 @@ export const serializeForm = form => {
  * @example
  * returns true for '', [], null, undefined
  */
-export const isEmptyValue = value => value == null || value.length === 0;
+export const isEmptyValue = (value) => value == null || value.length === 0;
 
 /**
  * A form object serializer
@@ -42,7 +42,7 @@ export const isEmptyValue = value => value == null || value.length === 0;
  * Returns
  * {"project": "hello", "username": "john"}
  */
-export const serializeFormObject = form =>
+export const serializeFormObject = (form) =>
   Object.fromEntries(
     Object.entries(form).reduce((acc, [name, { value }]) => {
       if (!isEmptyValue(value)) {
diff --git a/app/assets/javascripts/lib/utils/grammar.js b/app/assets/javascripts/lib/utils/grammar.js
index b1f38429369..f68767b9acd 100644
--- a/app/assets/javascripts/lib/utils/grammar.js
+++ b/app/assets/javascripts/lib/utils/grammar.js
@@ -16,7 +16,7 @@ import { sprintf, s__ } from '~/locale';
  *
  * @param {String[]} items
  */
-export const toNounSeriesText = items => {
+export const toNounSeriesText = (items) => {
   if (items.length === 0) {
     return '';
   } else if (items.length === 1) {
diff --git a/app/assets/javascripts/lib/utils/icon_utils.js b/app/assets/javascripts/lib/utils/icon_utils.js
index 043043f2eb5..58274092cf8 100644
--- a/app/assets/javascripts/lib/utils/icon_utils.js
+++ b/app/assets/javascripts/lib/utils/icon_utils.js
@@ -9,7 +9,7 @@ const getSvgDom = memoize(() =>
   axios
     .get(gon.sprite_icons)
     .then(({ data: svgs }) => new DOMParser().parseFromString(svgs, 'text/xml'))
-    .catch(e => {
+    .catch((e) => {
       getSvgDom.cache.clear();
 
       throw e;
@@ -34,9 +34,9 @@ export const clearSvgIconPathContentCache = () => {
  * @param {String} name - Icon name
  * @returns A promise that resolves to the svg path
  */
-export const getSvgIconPathContent = name =>
+export const getSvgIconPathContent = (name) =>
   getSvgDom()
-    .then(doc => {
+    .then((doc) => {
       return doc.querySelector(`#${name} path`).getAttribute('d');
     })
     .catch(() => null);
diff --git a/app/assets/javascripts/lib/utils/notify.js b/app/assets/javascripts/lib/utils/notify.js
index aa7884846a3..2e92c64ab7a 100644
--- a/app/assets/javascripts/lib/utils/notify.js
+++ b/app/assets/javascripts/lib/utils/notify.js
@@ -32,7 +32,7 @@ function notifyMe(message, body, icon, onclick) {
     // If it's okay let's create a notification
     return notificationGranted(message, opts, onclick);
   } else if (Notification.permission !== 'denied') {
-    return Notification.requestPermission(permission => {
+    return Notification.requestPermission((permission) => {
       // If the user accepts, let's create a notification
       if (permission === 'granted') {
         return notificationGranted(message, opts, onclick);
diff --git a/app/assets/javascripts/lib/utils/number_utils.js b/app/assets/javascripts/lib/utils/number_utils.js
index bc87232f40b..d49382733c0 100644
--- a/app/assets/javascripts/lib/utils/number_utils.js
+++ b/app/assets/javascripts/lib/utils/number_utils.js
@@ -112,7 +112,7 @@ export const isOdd = (number = 0) => number % 2;
  * @param {Array} arr An array of numbers
  * @returns {Number} The median of the given array
  */
-export const median = arr => {
+export const median = (arr) => {
   const middle = Math.floor(arr.length / 2);
   const sorted = arr.sort((a, b) => a - b);
   return arr.length % 2 !== 0 ? sorted[middle] : (sorted[middle - 1] + sorted[middle]) / 2;
diff --git a/app/assets/javascripts/lib/utils/poll.js b/app/assets/javascripts/lib/utils/poll.js
index e8583fa951b..6ec1bd206e6 100644
--- a/app/assets/javascripts/lib/utils/poll.js
+++ b/app/assets/javascripts/lib/utils/poll.js
@@ -102,11 +102,11 @@ export default class Poll {
     notificationCallback(true);
 
     return resource[method](data)
-      .then(response => {
+      .then((response) => {
         this.checkConditions(response);
         notificationCallback(false);
       })
-      .catch(error => {
+      .catch((error) => {
         notificationCallback(false);
         if (error.status === httpStatusCodes.ABORTED) {
           return;
diff --git a/app/assets/javascripts/lib/utils/poll_until_complete.js b/app/assets/javascripts/lib/utils/poll_until_complete.js
index 199d0e6f0f7..d3b551ca755 100644
--- a/app/assets/javascripts/lib/utils/poll_until_complete.js
+++ b/app/assets/javascripts/lib/utils/poll_until_complete.js
@@ -29,7 +29,7 @@ export default (url, config = {}) =>
       },
       data: { url, config },
       method: 'axiosGet',
-      successCallback: response => {
+      successCallback: (response) => {
         if (response.status === httpStatusCodes.OK) {
           resolve(response);
           eTagPoll.stop();
diff --git a/app/assets/javascripts/lib/utils/set.js b/app/assets/javascripts/lib/utils/set.js
index 541934c4221..a5393bad8c7 100644
--- a/app/assets/javascripts/lib/utils/set.js
+++ b/app/assets/javascripts/lib/utils/set.js
@@ -5,4 +5,4 @@
  * @returns {boolean}
  */
 export const isSubset = (subset, superset) =>
-  Array.from(subset).every(value => superset.has(value));
+  Array.from(subset).every((value) => superset.has(value));
diff --git a/app/assets/javascripts/lib/utils/simple_poll.js b/app/assets/javascripts/lib/utils/simple_poll.js
index e4e9fb2e6fa..42eb93ea16d 100644
--- a/app/assets/javascripts/lib/utils/simple_poll.js
+++ b/app/assets/javascripts/lib/utils/simple_poll.js
@@ -4,7 +4,7 @@ export default (fn, { interval = 2000, timeout = 60000 } = {}) => {
   const startTime = Date.now();
 
   return new Promise((resolve, reject) => {
-    const stop = arg => (arg instanceof Error ? reject(arg) : resolve(arg));
+    const stop = (arg) => (arg instanceof Error ? reject(arg) : resolve(arg));
     const next = () => {
       if (timeout === 0 || differenceInMilliseconds(startTime) < timeout) {
         setTimeout(fn.bind(null, next, stop), interval);
diff --git a/app/assets/javascripts/lib/utils/sticky.js b/app/assets/javascripts/lib/utils/sticky.js
index f3244301350..6bb7f09b886 100644
--- a/app/assets/javascripts/lib/utils/sticky.js
+++ b/app/assets/javascripts/lib/utils/sticky.js
@@ -67,6 +67,6 @@ export const stickyMonitor = (el, stickyTop, insertPlaceholder = true) => {
  * - If the current environment supports `position: sticky`, do nothing.
  * - Can receive an iterable element list (NodeList, jQuery collection, etc.) or single HTMLElement.
  */
-export const polyfillSticky = el => {
+export const polyfillSticky = (el) => {
   StickyFill.add(el);
 };
diff --git a/app/assets/javascripts/lib/utils/text_markdown.js b/app/assets/javascripts/lib/utils/text_markdown.js
index edff057997a..2c993c8b128 100644
--- a/app/assets/javascripts/lib/utils/text_markdown.js
+++ b/app/assets/javascripts/lib/utils/text_markdown.js
@@ -220,7 +220,7 @@ export function insertMarkdownText({
         : blockTagText(text, textArea, blockTag, selected);
     } else {
       textToInsert = selectedSplit
-        .map(val => {
+        .map((val) => {
           if (tag.indexOf(textPlaceholder) > -1) {
             return tag.replace(textPlaceholder, val);
           }
@@ -349,7 +349,7 @@ export function addEditorMarkdownListeners(editor) {
   // eslint-disable-next-line @gitlab/no-global-event-off
   $('.js-md')
     .off('click')
-    .on('click', e => {
+    .on('click', (e) => {
       const { mdTag, mdBlock, mdPrepend, mdSelect } = $(e.currentTarget).data();
 
       insertMarkdownText({
diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js
index c398874db24..eaf396a7a59 100644
--- a/app/assets/javascripts/lib/utils/text_utility.js
+++ b/app/assets/javascripts/lib/utils/text_utility.js
@@ -14,7 +14,7 @@ import {
  * @param {String} text
  * @returns {String}
  */
-export const addDelimiter = text =>
+export const addDelimiter = (text) =>
   text ? text.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') : text;
 
 /**
@@ -23,7 +23,7 @@ export const addDelimiter = text =>
  * @param {Number} count
  * @return {Number|String}
  */
-export const highCountTrim = count => (count > 99 ? '99+' : count);
+export const highCountTrim = (count) => (count > 99 ? '99+' : count);
 
 /**
  * Converts first char to uppercase and replaces the given separator with spaces
@@ -43,7 +43,7 @@ export const humanize = (string, separator = '_') => {
  * @param {*} str
  * @returns {String}
  */
-export const dasherize = str => str.replace(/[_\s]+/g, '-');
+export const dasherize = (str) => str.replace(/[_\s]+/g, '-');
 
 /**
  * Replaces whitespace and non-sluggish characters with a given separator
@@ -69,7 +69,7 @@ export const slugify = (str, separator = '-') => {
  * @param {String} str
  * @returns {String}
  */
-export const slugifyWithUnderscore = str => slugify(str, '_');
+export const slugifyWithUnderscore = (str) => slugify(str, '_');
 
 /**
  * Truncates given text
@@ -158,7 +158,7 @@ export const truncateWidth = (string, options = {}) => {
  * @param {String} sha
  * @returns {String}
  */
-export const truncateSha = sha => sha.substring(0, 8);
+export const truncateSha = (sha) => sha.substring(0, 8);
 
 const ELLIPSIS_CHAR = '…';
 export const truncatePathMiddleToLength = (text, maxWidth) => {
@@ -166,7 +166,7 @@ export const truncatePathMiddleToLength = (text, maxWidth) => {
   let ellipsisCount = 0;
 
   while (returnText.length >= maxWidth) {
-    const textSplit = returnText.split('/').filter(s => s !== ELLIPSIS_CHAR);
+    const textSplit = returnText.split('/').filter((s) => s !== ELLIPSIS_CHAR);
 
     if (textSplit.length === 0) {
       // There are n - 1 path separators for n segments, so 2n - 1 <= maxWidth
@@ -243,7 +243,7 @@ export const stripHtml = (string, replace = '') => {
  * // returns "trailingUnderscore_"
  * convertToCamelCase('trailing_underscore_')
  */
-export const convertToCamelCase = string =>
+export const convertToCamelCase = (string) =>
   string.replace(/([a-z0-9])_([a-z0-9])/gi, (match, p1, p2) => `${p1}${p2.toUpperCase()}`);
 
 /**
@@ -251,7 +251,7 @@ export const convertToCamelCase = string =>
  *
  * @param {*} string
  */
-export const convertToSnakeCase = string =>
+export const convertToSnakeCase = (string) =>
   slugifyWithUnderscore((string.match(/([a-zA-Z][^A-Z]*)/g) || [string]).join(' '));
 
 /**
@@ -260,7 +260,7 @@ export const convertToSnakeCase = string =>
  *
  * @param {*} string
  */
-export const convertToSentenceCase = string => {
+export const convertToSentenceCase = (string) => {
   const splitWord = string.split(' ').map((word, index) => (index > 0 ? word.toLowerCase() : word));
 
   return splitWord.join(' ');
@@ -273,7 +273,7 @@ export const convertToSentenceCase = string => {
  * @param {String} string
  * @returns {String}
  */
-export const convertToTitleCase = string => string.replace(/\b[a-z]/g, s => s.toUpperCase());
+export const convertToTitleCase = (string) => string.replace(/\b[a-z]/g, (s) => s.toUpperCase());
 
 const unicodeConversion = [
   [/[ÀÁÂÃÅĀĂĄ]/g, 'A'],
@@ -340,7 +340,7 @@ const unicodeConversion = [
  * @param {String} string
  * @returns {String}
  */
-export const convertUnicodeToAscii = string => {
+export const convertUnicodeToAscii = (string) => {
   let convertedString = string;
 
   unicodeConversion.forEach(([regex, replacer]) => {
@@ -356,7 +356,7 @@ export const convertUnicodeToAscii = string => {
  *
  * @param {*} string
  */
-export const splitCamelCase = string =>
+export const splitCamelCase = (string) =>
   string
     .replace(/([A-Z]+)([A-Z][a-z])/g, ' $1 $2')
     .replace(/([a-z\d])([A-Z])/g, '$1 $2')
@@ -398,7 +398,7 @@ export const truncateNamespace = (string = '') => {
  * @param {String} obj The object to test
  * @returns {Boolean}
  */
-export const hasContent = obj => isString(obj) && obj.trim() !== '';
+export const hasContent = (obj) => isString(obj) && obj.trim() !== '';
 
 /**
  * A utility function that validates if a
@@ -408,7 +408,7 @@ export const hasContent = obj => isString(obj) && obj.trim() !== '';
  *
  * @return {Boolean} true if valid
  */
-export const isValidSha1Hash = str => {
+export const isValidSha1Hash = (str) => {
   return /^[0-9a-f]{5,40}$/.test(str);
 };
 
diff --git a/app/assets/javascripts/lib/utils/type_utility.js b/app/assets/javascripts/lib/utils/type_utility.js
index 664c0dbbc84..be1911f7c34 100644
--- a/app/assets/javascripts/lib/utils/type_utility.js
+++ b/app/assets/javascripts/lib/utils/type_utility.js
@@ -1 +1 @@
-export const isObject = obj => obj && obj.constructor === Object;
+export const isObject = (obj) => obj && obj.constructor === Object;
diff --git a/app/assets/javascripts/performance_bar/services/performance_bar_service.js b/app/assets/javascripts/performance_bar/services/performance_bar_service.js
index 3c8303d102e..38255b3a37d 100644
--- a/app/assets/javascripts/performance_bar/services/performance_bar_service.js
+++ b/app/assets/javascripts/performance_bar/services/performance_bar_service.js
@@ -9,7 +9,7 @@ export default class PerformanceBarService {
   }
 
   static registerInterceptor(peekUrl, callback) {
-    PerformanceBarService.interceptor = response => {
+    PerformanceBarService.interceptor = (response) => {
       const [fireCallback, requestId, requestUrl] = PerformanceBarService.callbackParams(
         response,
         peekUrl,
diff --git a/app/assets/javascripts/performance_bar/stores/performance_bar_store.js b/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
index 8c88851f039..9d12d228d35 100644
--- a/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
+++ b/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
@@ -20,7 +20,7 @@ export default class PerformanceBarStore {
   }
 
   findRequest(requestId) {
-    return this.requests.find(request => request.id === requestId);
+    return this.requests.find((request) => request.id === requestId);
   }
 
   addRequestDetails(requestId, requestDetails) {
@@ -43,13 +43,13 @@ export default class PerformanceBarStore {
   }
 
   requestsWithDetails() {
-    return this.requests.filter(request => request.details);
+    return this.requests.filter((request) => request.details);
   }
 
   canTrackRequest(requestUrl) {
     return (
       requestUrl.endsWith('/api/graphql') ||
-      this.requests.filter(request => request.url === requestUrl).length < 2
+      this.requests.filter((request) => request.url === requestUrl).length < 2
     );
   }
 
diff --git a/app/assets/javascripts/persistent_user_callout.js b/app/assets/javascripts/persistent_user_callout.js
index eded64127b6..db42966d159 100644
--- a/app/assets/javascripts/persistent_user_callout.js
+++ b/app/assets/javascripts/persistent_user_callout.js
@@ -28,10 +28,10 @@ export default class PersistentUserCallout {
   }
 
   handleCloseButtonCallout(closeButton) {
-    closeButton.addEventListener('click', event => this.dismiss(event));
+    closeButton.addEventListener('click', (event) => this.dismiss(event));
 
     if (this.deferLinks) {
-      this.container.addEventListener('click', event => {
+      this.container.addEventListener('click', (event) => {
         const isDeferredLink = event.target.classList.contains(DEFERRED_LINK_CLASS);
         if (isDeferredLink) {
           const { href, target } = event.target;
@@ -43,7 +43,7 @@ export default class PersistentUserCallout {
   }
 
   handleFollowLinkCallout(followLink) {
-    followLink.addEventListener('click', event => this.registerCalloutWithLink(event));
+    followLink.addEventListener('click', (event) => this.registerCalloutWithLink(event));
   }
 
   dismiss(event, deferredLinkOptions = null) {
diff --git a/app/assets/javascripts/persistent_user_callouts.js b/app/assets/javascripts/persistent_user_callouts.js
index d4857a19ff7..c177fe25985 100644
--- a/app/assets/javascripts/persistent_user_callouts.js
+++ b/app/assets/javascripts/persistent_user_callouts.js
@@ -11,7 +11,7 @@ const PERSISTENT_USER_CALLOUTS = [
 ];
 
 const initCallouts = () => {
-  PERSISTENT_USER_CALLOUTS.forEach(calloutContainer =>
+  PERSISTENT_USER_CALLOUTS.forEach((calloutContainer) =>
     PersistentUserCallout.factory(document.querySelector(calloutContainer)),
   );
 };
diff --git a/app/assets/javascripts/pipeline_editor/graphql/resolvers.js b/app/assets/javascripts/pipeline_editor/graphql/resolvers.js
index c1cdb5eb2ee..ec55191c946 100644
--- a/app/assets/javascripts/pipeline_editor/graphql/resolvers.js
+++ b/app/assets/javascripts/pipeline_editor/graphql/resolvers.js
@@ -18,7 +18,7 @@ export const resolvers = {
         valid: data.valid,
         errors: data.errors,
         warnings: data.warnings,
-        jobs: data.jobs.map(job => {
+        jobs: data.jobs.map((job) => {
           const only = job.only ? { refs: job.only.refs, __typename: 'CiLintJobOnlyPolicy' } : null;
 
           return {
diff --git a/app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue b/app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue
index f2d68054e80..d25c9a788e0 100644
--- a/app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue
+++ b/app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue
@@ -121,12 +121,12 @@ export default {
       return this.searchTerm.toLowerCase();
     },
     filteredBranches() {
-      return this.branches.filter(branch =>
+      return this.branches.filter((branch) =>
         branch.shortName.toLowerCase().includes(this.lowerCasedSearchTerm),
       );
     },
     filteredTags() {
-      return this.tags.filter(tag =>
+      return this.tags.filter((tag) =>
         tag.shortName.toLowerCase().includes(this.lowerCasedSearchTerm),
       );
     },
@@ -187,7 +187,7 @@ export default {
     setVariable(refValue, type, key, value) {
       const { variables } = this.form[refValue];
 
-      const variable = variables.find(v => v.key === key);
+      const variable = variables.find((v) => v.key === key);
       if (variable) {
         variable.type = type;
         variable.value = value;
@@ -270,11 +270,11 @@ export default {
               stop(data);
             }
           })
-          .catch(error => {
+          .catch((error) => {
             stop(error);
           });
       }, CONFIG_VARIABLES_TIMEOUT)
-        .then(data => {
+        .then((data) => {
           const params = {};
           const descriptions = {};
 
@@ -287,7 +287,7 @@ export default {
 
           return { params, descriptions };
         })
-        .catch(error => {
+        .catch((error) => {
           this.isLoading = false;
 
           Sentry.captureException(error);
@@ -314,7 +314,7 @@ export default {
         .then(({ data }) => {
           redirectTo(`${this.pipelinesPath}/${data.id}`);
         })
-        .catch(err => {
+        .catch((err) => {
           const { errors, warnings, total_warnings: totalWarnings } = err.response.data;
           const [error] = errors;
           this.error = error;
diff --git a/app/assets/javascripts/pipeline_new/utils/format_refs.js b/app/assets/javascripts/pipeline_new/utils/format_refs.js
index e217cd25413..f0fbc5ed7b6 100644
--- a/app/assets/javascripts/pipeline_new/utils/format_refs.js
+++ b/app/assets/javascripts/pipeline_new/utils/format_refs.js
@@ -3,7 +3,7 @@ import { BRANCH_REF_TYPE, TAG_REF_TYPE } from '../constants';
 export default (refs, type) => {
   let fullName;
 
-  return refs.map(ref => {
+  return refs.map((ref) => {
     if (type === BRANCH_REF_TYPE) {
       fullName = `refs/heads/${ref}`;
     } else if (type === TAG_REF_TYPE) {
diff --git a/app/assets/javascripts/pipelines/components/dag/dag.vue b/app/assets/javascripts/pipelines/components/dag/dag.vue
index 85171263f08..2482af2c7f0 100644
--- a/app/assets/javascripts/pipelines/components/dag/dag.vue
+++ b/app/assets/javascripts/pipelines/components/dag/dag.vue
@@ -56,15 +56,15 @@ export default {
 
         const unwrappedGroups = stages
           .map(({ name, groups: { nodes: groups } }) => {
-            return groups.map(group => {
+            return groups.map((group) => {
               return { category: name, ...group };
             });
           })
           .flat(2);
 
-        const nodes = unwrappedGroups.map(group => {
+        const nodes = unwrappedGroups.map((group) => {
           const jobs = group.jobs.nodes.map(({ name, needs }) => {
-            return { name, needs: needs.nodes.map(need => need.name) };
+            return { name, needs: needs.nodes.map((need) => need.name) };
           });
 
           return { ...group, jobs };
diff --git a/app/assets/javascripts/pipelines/components/dag/dag_graph.vue b/app/assets/javascripts/pipelines/components/dag/dag_graph.vue
index 42d1debcddf..5ba0604fa01 100644
--- a/app/assets/javascripts/pipelines/components/dag/dag_graph.vue
+++ b/app/assets/javascripts/pipelines/components/dag/dag_graph.vue
@@ -173,7 +173,7 @@ export default {
     createClip(link) {
       return link
         .append('clipPath')
-        .attr('id', d => {
+        .attr('id', (d) => {
           return this.createAndAssignId(d, 'clipId', 'dag-clip');
         })
         .append('path')
@@ -183,7 +183,7 @@ export default {
     createGradient(link) {
       const gradient = link
         .append('linearGradient')
-        .attr('id', d => {
+        .attr('id', (d) => {
           return this.createAndAssignId(d, 'gradId', 'dag-grad');
         })
         .attr('gradientUnits', 'userSpaceOnUse')
@@ -251,7 +251,7 @@ export default {
         .data(linksData)
         .enter()
         .append('g')
-        .attr('id', d => {
+        .attr('id', (d) => {
           return this.createAndAssignId(d, 'uid', LINK_SELECTOR);
         })
         .classed(
@@ -273,10 +273,10 @@ export default {
           `${NODE_SELECTOR} gl-transition-property-stroke ${this.$options.viewOptions.hoverFadeClasses}`,
           true,
         )
-        .attr('id', d => {
+        .attr('id', (d) => {
           return this.createAndAssignId(d, 'uid', NODE_SELECTOR);
         })
-        .attr('stroke', d => {
+        .attr('stroke', (d) => {
           const color = this.color(d);
           /* eslint-disable-next-line no-param-reassign */
           d.color = color;
@@ -284,10 +284,10 @@ export default {
         })
         .attr('stroke-width', nodeWidth)
         .attr('stroke-linecap', 'round')
-        .attr('x1', d => Math.floor((d.x1 + d.x0) / 2))
-        .attr('x2', d => Math.floor((d.x1 + d.x0) / 2))
-        .attr('y1', d => d.y0 + 4)
-        .attr('y2', d => d.y1 - 4);
+        .attr('x1', (d) => Math.floor((d.x1 + d.x0) / 2))
+        .attr('x2', (d) => Math.floor((d.x1 + d.x0) / 2))
+        .attr('y1', (d) => d.y0 + 4)
+        .attr('y2', (d) => d.y1 - 4);
     },
 
     initColors() {
diff --git a/app/assets/javascripts/pipelines/components/dag/drawing_utils.js b/app/assets/javascripts/pipelines/components/dag/drawing_utils.js
index d56addc473f..3cd09d57ffb 100644
--- a/app/assets/javascripts/pipelines/components/dag/drawing_utils.js
+++ b/app/assets/javascripts/pipelines/components/dag/drawing_utils.js
@@ -92,8 +92,8 @@ export const createSankey = ({
     ]);
   return ({ nodes, links }) =>
     sankeyGenerator({
-      nodes: nodes.map(d => ({ ...d })),
-      links: links.map(d => ({ ...d })),
+      nodes: nodes.map((d) => ({ ...d })),
+      links: links.map((d) => ({ ...d })),
     });
 };
 
diff --git a/app/assets/javascripts/pipelines/components/dag/interactions.js b/app/assets/javascripts/pipelines/components/dag/interactions.js
index e9f3e9f0e2c..69f36feeee4 100644
--- a/app/assets/javascripts/pipelines/components/dag/interactions.js
+++ b/app/assets/javascripts/pipelines/components/dag/interactions.js
@@ -13,22 +13,22 @@ export const getLiveLinksAsDict = () => {
   return Object.fromEntries(
     getLiveLinks()
       .data()
-      .map(d => [d.uid, d]),
+      .map((d) => [d.uid, d]),
   );
 };
 export const currentIsLive = (idx, collection) =>
   getCurrent(idx, collection).classed(IS_HIGHLIGHTED);
 
-const backgroundLinks = selection => selection.style('stroke-opacity', highlightOut);
-const backgroundNodes = selection => selection.attr('stroke', '#f2f2f2');
-const foregroundLinks = selection => selection.style('stroke-opacity', highlightIn);
-const foregroundNodes = selection => selection.attr('stroke', d => d.color);
+const backgroundLinks = (selection) => selection.style('stroke-opacity', highlightOut);
+const backgroundNodes = (selection) => selection.attr('stroke', '#f2f2f2');
+const foregroundLinks = (selection) => selection.style('stroke-opacity', highlightIn);
+const foregroundNodes = (selection) => selection.attr('stroke', (d) => d.color);
 const renewLinks = (selection, baseOpacity) => selection.style('stroke-opacity', baseOpacity);
-const renewNodes = selection => selection.attr('stroke', d => d.color);
+const renewNodes = (selection) => selection.attr('stroke', (d) => d.color);
 
-export const getAllLinkAncestors = node => {
+export const getAllLinkAncestors = (node) => {
   if (node.targetLinks) {
-    return node.targetLinks.flatMap(n => {
+    return node.targetLinks.flatMap((n) => {
       return [n, ...getAllLinkAncestors(n.source)];
     });
   }
@@ -36,11 +36,11 @@ export const getAllLinkAncestors = node => {
   return [];
 };
 
-const getAllNodeAncestors = node => {
+const getAllNodeAncestors = (node) => {
   let allNodes = [];
 
   if (node.targetLinks) {
-    allNodes = node.targetLinks.flatMap(n => {
+    allNodes = node.targetLinks.flatMap((n) => {
       return getAllNodeAncestors(n.source);
     });
   }
@@ -74,7 +74,7 @@ const highlightPath = (parentLinks, parentNodes) => {
   });
 
   /* highlight correct nodes */
-  parentNodes.forEach(id => {
+  parentNodes.forEach((id) => {
     foregroundNodes(d3.select(`#${id}`)).classed(IS_HIGHLIGHTED, true);
   });
 };
@@ -86,7 +86,7 @@ const restoreNodes = () => {
     rehighlights their nodes.
   */
 
-  getLiveLinks().each(d => {
+  getLiveLinks().each((d) => {
     foregroundNodes(d3.select(`#${d.source.uid}`)).classed(IS_HIGHLIGHTED, true);
     foregroundNodes(d3.select(`#${d.target.uid}`)).classed(IS_HIGHLIGHTED, true);
   });
@@ -97,7 +97,7 @@ const restorePath = (parentLinks, parentNodes, baseOpacity) => {
     renewLinks(d3.select(`#${uid}`), baseOpacity).classed(IS_HIGHLIGHTED, false);
   });
 
-  parentNodes.forEach(id => {
+  parentNodes.forEach((id) => {
     d3.select(`#${id}`).classed(IS_HIGHLIGHTED, false);
   });
 
@@ -112,7 +112,7 @@ const restorePath = (parentLinks, parentNodes, baseOpacity) => {
   restoreNodes();
 };
 
-export const restoreLinks = baseOpacity => {
+export const restoreLinks = (baseOpacity) => {
   /*
     if there exist live links, reset to highlight out / pale
     otherwise, reset to base
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component_legacy.vue b/app/assets/javascripts/pipelines/components/graph/graph_component_legacy.vue
index 9ca4dc1e27a..20a04728bbe 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component_legacy.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component_legacy.vue
@@ -78,11 +78,11 @@ export default {
       return (
         this.pipeline.triggered_by &&
         Array.isArray(this.pipeline.triggered_by) &&
-        this.pipeline.triggered_by.find(el => el.isExpanded)
+        this.pipeline.triggered_by.find((el) => el.isExpanded)
       );
     },
     expandedDownstream() {
-      return this.pipeline.triggered && this.pipeline.triggered.find(el => el.isExpanded);
+      return this.pipeline.triggered && this.pipeline.triggered.find((el) => el.isExpanded);
     },
     pipelineTypeUpstream() {
       return this.type !== this.$options.downstream && this.expandedUpstream;
diff --git a/app/assets/javascripts/pipelines/components/graph/utils.js b/app/assets/javascripts/pipelines/components/graph/utils.js
index 32588feb426..74cdbfb0a92 100644
--- a/app/assets/javascripts/pipelines/components/graph/utils.js
+++ b/app/assets/javascripts/pipelines/components/graph/utils.js
@@ -9,7 +9,7 @@ const addMulti = (mainPipelineProjectPath, linkedPipeline) => {
   };
 };
 
-const transformId = linkedPipeline => {
+const transformId = (linkedPipeline) => {
   return { ...linkedPipeline, id: getIdFromGraphQLId(linkedPipeline.id) };
 };
 
@@ -42,7 +42,7 @@ const unwrapPipelineData = (mainPipelineProjectPath, data) => {
 };
 
 const toggleQueryPollingByVisibility = (queryRef, interval = 10000) => {
-  const stopStartQuery = query => {
+  const stopStartQuery = (query) => {
     if (!Visibility.hidden()) {
       query.startPolling(interval);
     } else {
diff --git a/app/assets/javascripts/pipelines/components/header_component.vue b/app/assets/javascripts/pipelines/components/header_component.vue
index af7c0d0ec3f..a20bd70e90a 100644
--- a/app/assets/javascripts/pipelines/components/header_component.vue
+++ b/app/assets/javascripts/pipelines/components/header_component.vue
@@ -54,7 +54,7 @@ export default {
           iid: this.pipelineIid,
         };
       },
-      update: data => data.project.pipeline,
+      update: (data) => data.project.pipeline,
       error() {
         this.reportFailure(LOAD_FAILURE);
       },
diff --git a/app/assets/javascripts/pipelines/components/parsing_utils.js b/app/assets/javascripts/pipelines/components/parsing_utils.js
index 1ed415688f2..9c97fa832d0 100644
--- a/app/assets/javascripts/pipelines/components/parsing_utils.js
+++ b/app/assets/javascripts/pipelines/components/parsing_utils.js
@@ -33,15 +33,15 @@ import { uniqWith, isEqual } from 'lodash';
     10 -> value (constant)
   */
 
-export const createNodeDict = nodes => {
+export const createNodeDict = (nodes) => {
   return nodes.reduce((acc, node) => {
     const newNode = {
       ...node,
-      needs: node.jobs.map(job => job.needs || []).flat(),
+      needs: node.jobs.map((job) => job.needs || []).flat(),
     };
 
     if (node.size > 1) {
-      node.jobs.forEach(job => {
+      node.jobs.forEach((job) => {
         acc[job.name] = newNode;
       });
     }
@@ -54,13 +54,13 @@ export const createNodeDict = nodes => {
 export const makeLinksFromNodes = (nodes, nodeDict) => {
   const constantLinkValue = 10; // all links are the same weight
   return nodes
-    .map(group => {
-      return group.jobs.map(job => {
+    .map((group) => {
+      return group.jobs.map((job) => {
         if (!job.needs) {
           return [];
         }
 
-        return job.needs.map(needed => {
+        return job.needs.map((needed) => {
           return {
             source: nodeDict[needed]?.name,
             target: group.name,
@@ -74,7 +74,7 @@ export const makeLinksFromNodes = (nodes, nodeDict) => {
 
 export const getAllAncestors = (nodes, nodeDict) => {
   const needs = nodes
-    .map(node => {
+    .map((node) => {
       return nodeDict[node].needs || '';
     })
     .flat()
@@ -102,13 +102,13 @@ export const filterByAncestors = (links, nodeDict) =>
   */
     const targetNode = target;
     const targetNodeNeeds = nodeDict[targetNode].needs;
-    const targetNodeNeedsMinusSource = targetNodeNeeds.filter(need => need !== source);
+    const targetNodeNeedsMinusSource = targetNodeNeeds.filter((need) => need !== source);
 
     const allAncestors = getAllAncestors(targetNodeNeedsMinusSource, nodeDict);
     return !allAncestors.includes(source);
   });
 
-export const parseData = nodes => {
+export const parseData = (nodes) => {
   const nodeDict = createNodeDict(nodes);
   const allLinks = makeLinksFromNodes(nodes, nodeDict);
   const filteredLinks = filterByAncestors(allLinks, nodeDict);
@@ -121,7 +121,7 @@ export const parseData = nodes => {
   The number of nodes in the most populous generation drives the height of the graph.
 */
 
-export const getMaxNodes = nodes => {
+export const getMaxNodes = (nodes) => {
   const counts = nodes.reduce((acc, { layer }) => {
     if (!acc[layer]) {
       acc[layer] = 0;
@@ -141,6 +141,6 @@ export const getMaxNodes = nodes => {
   to find nodes that have no relations.
 */
 
-export const removeOrphanNodes = sankeyfiedNodes => {
-  return sankeyfiedNodes.filter(node => node.sourceLinks.length || node.targetLinks.length);
+export const removeOrphanNodes = (sankeyfiedNodes) => {
+  return sankeyfiedNodes.filter((node) => node.sourceLinks.length || node.targetLinks.length);
 };
diff --git a/app/assets/javascripts/pipelines/components/pipeline_graph/drawing_utils.js b/app/assets/javascripts/pipelines/components/pipeline_graph/drawing_utils.js
index a31f3068d5e..b550c599fda 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_graph/drawing_utils.js
+++ b/app/assets/javascripts/pipelines/components/pipeline_graph/drawing_utils.js
@@ -14,7 +14,7 @@ import { createUniqueLinkId } from '../../utils';
 
 export const generateLinksData = ({ links }, containerID) => {
   const containerEl = document.getElementById(containerID);
-  return links.map(link => {
+  return links.map((link) => {
     const path = d3.path();
 
     const sourceId = link.source;
diff --git a/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue b/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue
index 47f0e30b76c..a2e98502f95 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue
@@ -111,13 +111,13 @@ export default {
       // If you are hovering on a job, then the links we want to highlight are:
       // All the links whose `source` and `target` are highlighted jobs.
       if (this.hasHighlightedJob) {
-        const filteredLinks = this.links.filter(link => {
+        const filteredLinks = this.links.filter((link) => {
           return (
             this.highlightedJobs.includes(link.source) && this.highlightedJobs.includes(link.target)
           );
         });
 
-        return filteredLinks.map(link => link.ref);
+        return filteredLinks.map((link) => link.ref);
       }
 
       return [];
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
index ff27226b408..396fbd0a834 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
@@ -246,7 +246,7 @@ export default {
     filterPipelines(filters) {
       this.resetRequestData();
 
-      filters.forEach(filter => {
+      filters.forEach((filter) => {
         // do not add Any for username query param, so we
         // can fetch all trigger authors
         if (
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_filtered_search.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_filtered_search.vue
index 29345f33367..127503f1307 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_filtered_search.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_filtered_search.vue
@@ -33,7 +33,7 @@ export default {
   },
   computed: {
     selectedTypes() {
-      return this.value.map(i => i.type);
+      return this.value.map((i) => i.type);
     },
     tokens() {
       return [
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/stage.vue b/app/assets/javascripts/pipelines/components/pipelines_list/stage.vue
index 581ea5fbb35..a9154d93194 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/stage.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/stage.vue
@@ -124,7 +124,7 @@ export default {
       $(
         '.js-builds-dropdown-list button, .js-builds-dropdown-list a.mini-pipeline-graph-dropdown-item',
         this.$el,
-      ).on('click', e => {
+      ).on('click', (e) => {
         e.stopPropagation();
       });
     },
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue
index 60cb697f1af..24456574a6f 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue
@@ -34,10 +34,10 @@ export default {
     fetchBranches(searchterm) {
       Api.branches(this.config.projectId, searchterm)
         .then(({ data }) => {
-          this.branches = data.map(branch => branch.name);
+          this.branches = data.map((branch) => branch.name);
           this.loading = false;
         })
-        .catch(err => {
+        .catch((err) => {
           createFlash(FETCH_BRANCH_ERROR_MESSAGE);
           this.loading = false;
           throw err;
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_status_token.vue b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_status_token.vue
index dc43d94f4fd..020a08b8cee 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_status_token.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_status_token.vue
@@ -72,7 +72,7 @@ export default {
       ];
     },
     findActiveStatus() {
-      return this.statuses.find(status => status.value === this.value.data);
+      return this.statuses.find((status) => status.value === this.value.data);
     },
   },
 };
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue
index d6ba5fcca85..1241803c612 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue
@@ -34,10 +34,10 @@ export default {
     fetchTags(searchTerm) {
       Api.tags(this.config.projectId, searchTerm)
         .then(({ data }) => {
-          this.tags = data.map(tag => tag.name);
+          this.tags = data.map((tag) => tag.name);
           this.loading = false;
         })
-        .catch(err => {
+        .catch((err) => {
           createFlash(FETCH_TAG_ERROR_MESSAGE);
           this.loading = false;
           throw err;
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue
index c4f744de458..3db5893b565 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue
@@ -45,7 +45,7 @@ export default {
       return this.value.data.toLowerCase();
     },
     activeUser() {
-      return this.users.find(user => {
+      return this.users.find((user) => {
         return user.username.toLowerCase() === this.currentValue;
       });
     },
@@ -56,11 +56,11 @@ export default {
   methods: {
     fetchProjectUsers(searchTerm) {
       Api.projectUsers(this.config.projectId, searchTerm)
-        .then(users => {
+        .then((users) => {
           this.users = users;
           this.loading = false;
         })
-        .catch(err => {
+        .catch((err) => {
           createFlash(FETCH_AUTHOR_ERROR_MESSAGE);
           this.loading = false;
           throw err;
diff --git a/app/assets/javascripts/pipelines/components/unwrapping_utils.js b/app/assets/javascripts/pipelines/components/unwrapping_utils.js
index aa33f622ce6..285a6f52119 100644
--- a/app/assets/javascripts/pipelines/components/unwrapping_utils.js
+++ b/app/assets/javascripts/pipelines/components/unwrapping_utils.js
@@ -8,15 +8,15 @@
 export const unwrapArrayOfJobs = (stages = []) => {
   return stages
     .map(({ name, groups }) => {
-      return groups.map(group => {
+      return groups.map((group) => {
         return { category: name, ...group };
       });
     })
     .flat(2);
 };
 
-const unwrapGroups = stages => {
-  return stages.map(stage => {
+const unwrapGroups = (stages) => {
+  return stages.map((stage) => {
     const {
       groups: { nodes: groups },
     } = stage;
@@ -25,21 +25,21 @@ const unwrapGroups = stages => {
 };
 
 const unwrapNodesWithName = (jobArray, prop, field = 'name') => {
-  return jobArray.map(job => {
-    return { ...job, [prop]: job[prop].nodes.map(item => item[field]) };
+  return jobArray.map((job) => {
+    return { ...job, [prop]: job[prop].nodes.map((item) => item[field]) };
   });
 };
 
-const unwrapJobWithNeeds = denodedJobArray => {
+const unwrapJobWithNeeds = (denodedJobArray) => {
   return unwrapNodesWithName(denodedJobArray, 'needs');
 };
 
-const unwrapStagesWithNeeds = denodedStages => {
+const unwrapStagesWithNeeds = (denodedStages) => {
   const unwrappedNestedGroups = unwrapGroups(denodedStages);
 
-  const nodes = unwrappedNestedGroups.map(node => {
+  const nodes = unwrappedNestedGroups.map((node) => {
     const { groups } = node;
-    const groupsWithJobs = groups.map(group => {
+    const groupsWithJobs = groups.map((group) => {
       const jobs = unwrapJobWithNeeds(group.jobs.nodes);
       return { ...group, jobs };
     });
diff --git a/app/assets/javascripts/pipelines/mixins/graph_pipeline_bundle_mixin.js b/app/assets/javascripts/pipelines/mixins/graph_pipeline_bundle_mixin.js
index bd1b1664a1e..9f15b6c4ae3 100644
--- a/app/assets/javascripts/pipelines/mixins/graph_pipeline_bundle_mixin.js
+++ b/app/assets/javascripts/pipelines/mixins/graph_pipeline_bundle_mixin.js
@@ -6,7 +6,7 @@ export default {
     getExpandedPipelines(pipeline) {
       this.mediator.service
         .getPipeline(this.mediator.getExpandedParameters())
-        .then(response => {
+        .then((response) => {
           this.mediator.store.toggleLoading(pipeline);
           this.mediator.store.storePipeline(response.data);
           this.mediator.poll.enable({ data: this.mediator.getExpandedParameters() });
diff --git a/app/assets/javascripts/pipelines/mixins/pipelines.js b/app/assets/javascripts/pipelines/mixins/pipelines.js
index e31545bba5c..22cdb6b8f72 100644
--- a/app/assets/javascripts/pipelines/mixins/pipelines.js
+++ b/app/assets/javascripts/pipelines/mixins/pipelines.js
@@ -90,7 +90,7 @@ export default {
       // fetch new data
       return this.service
         .getPipelines(this.requestData)
-        .then(response => {
+        .then((response) => {
           this.isLoading = false;
           this.successCallback(response);
 
@@ -124,8 +124,8 @@ export default {
     getPipelines() {
       return this.service
         .getPipelines(this.requestData)
-        .then(response => this.successCallback(response))
-        .catch(error => this.errorCallback(error));
+        .then((response) => this.successCallback(response))
+        .catch((error) => this.errorCallback(error));
     },
     setCommonData(pipelines) {
       this.store.storePipelines(pipelines);
diff --git a/app/assets/javascripts/pipelines/pipeline_details_bundle.js b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
index c5a1159c8ce..ccaf7a2b633 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_bundle.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
@@ -20,7 +20,7 @@ const SELECTORS = {
   PIPELINE_TESTS: '#js-pipeline-tests-detail',
 };
 
-const createLegacyPipelinesDetailApp = mediator => {
+const createLegacyPipelinesDetailApp = (mediator) => {
   if (!document.querySelector(SELECTORS.PIPELINE_GRAPH)) {
     return;
   }
@@ -47,15 +47,15 @@ const createLegacyPipelinesDetailApp = mediator => {
           refreshPipelineGraph: this.requestRefreshPipelineGraph,
           onResetDownstream: (parentPipeline, pipeline) =>
             this.resetDownstreamPipelines(parentPipeline, pipeline),
-          onClickUpstreamPipeline: pipeline => this.clickUpstreamPipeline(pipeline),
-          onClickDownstreamPipeline: pipeline => this.clickDownstreamPipeline(pipeline),
+          onClickUpstreamPipeline: (pipeline) => this.clickUpstreamPipeline(pipeline),
+          onClickDownstreamPipeline: (pipeline) => this.clickDownstreamPipeline(pipeline),
         },
       });
     },
   });
 };
 
-const createLegacyPipelineHeaderApp = mediator => {
+const createLegacyPipelineHeaderApp = (mediator) => {
   if (!document.querySelector(SELECTORS.PIPELINE_HEADER)) {
     return;
   }
diff --git a/app/assets/javascripts/pipelines/pipeline_details_header.js b/app/assets/javascripts/pipelines/pipeline_details_header.js
index 744a8272709..cba29acdb32 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_header.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_header.js
@@ -9,7 +9,7 @@ const apolloProvider = new VueApollo({
   defaultClient: createDefaultClient(),
 });
 
-export const createPipelineHeaderApp = elSelector => {
+export const createPipelineHeaderApp = (elSelector) => {
   const el = document.querySelector(elSelector);
 
   if (!el) {
diff --git a/app/assets/javascripts/pipelines/pipeline_details_mediator.js b/app/assets/javascripts/pipelines/pipeline_details_mediator.js
index d487970aed7..74c5fc45644 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_mediator.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_mediator.js
@@ -55,7 +55,7 @@ export default class pipelinesMediator {
 
     return this.service
       .getPipeline()
-      .then(response => this.successCallback(response))
+      .then((response) => this.successCallback(response))
       .catch(() => this.errorCallback())
       .finally(() =>
         this.poll.restart(
diff --git a/app/assets/javascripts/pipelines/stores/pipeline_store.js b/app/assets/javascripts/pipelines/stores/pipeline_store.js
index e34c847457b..1f804a107a8 100644
--- a/app/assets/javascripts/pipelines/stores/pipeline_store.js
+++ b/app/assets/javascripts/pipelines/stores/pipeline_store.js
@@ -29,11 +29,11 @@ export default class PipelineStore {
     }
 
     if (pipelineCopy.triggered && pipelineCopy.triggered.length) {
-      pipelineCopy.triggered.forEach(el => {
+      pipelineCopy.triggered.forEach((el) => {
         const oldPipeline =
           this.state.pipeline &&
           this.state.pipeline.triggered &&
-          this.state.pipeline.triggered.find(element => element.id === el.id);
+          this.state.pipeline.triggered.find((element) => element.id === el.id);
 
         this.parseTriggeredPipelines(oldPipeline, el);
       });
@@ -67,8 +67,8 @@ export default class PipelineStore {
       }
 
       if (newPipeline.triggered_by?.length > 0) {
-        newPipeline.triggered_by.forEach(el => {
-          const oldTriggeredBy = oldPipeline.triggered_by?.find(element => element.id === el.id);
+        newPipeline.triggered_by.forEach((el) => {
+          const oldTriggeredBy = oldPipeline.triggered_by?.find((element) => element.id === el.id);
           this.parseTriggeredPipelines(oldTriggeredBy, el);
         });
       }
@@ -88,9 +88,9 @@ export default class PipelineStore {
     Vue.set(newPipeline, 'isLoading', false);
 
     if (newPipeline.triggered && newPipeline.triggered.length > 0) {
-      newPipeline.triggered.forEach(el => {
+      newPipeline.triggered.forEach((el) => {
         const oldTriggered =
-          oldPipeline.triggered && oldPipeline.triggered.find(element => element.id === el.id);
+          oldPipeline.triggered && oldPipeline.triggered.find((element) => element.id === el.id);
         this.parseTriggeredPipelines(oldTriggered, el);
       });
     }
@@ -102,7 +102,7 @@ export default class PipelineStore {
    * @param {Object} pipeline
    */
   resetTriggeredByPipeline(parentPipeline, pipeline) {
-    parentPipeline.triggered_by.forEach(el => this.closePipeline(el));
+    parentPipeline.triggered_by.forEach((el) => this.closePipeline(el));
 
     if (pipeline.triggered_by && pipeline.triggered_by) {
       this.resetTriggeredByPipeline(pipeline, pipeline.triggered_by);
@@ -129,7 +129,7 @@ export default class PipelineStore {
     this.closePipeline(pipeline);
 
     if (pipeline.triggered_by && pipeline.triggered_by.length) {
-      pipeline.triggered_by.forEach(triggeredBy => this.closeTriggeredByPipeline(triggeredBy));
+      pipeline.triggered_by.forEach((triggeredBy) => this.closeTriggeredByPipeline(triggeredBy));
     }
   }
 
@@ -139,10 +139,10 @@ export default class PipelineStore {
    * @param {Object} pipeline
    */
   resetTriggeredPipelines(parentPipeline, pipeline) {
-    parentPipeline.triggered.forEach(el => this.closePipeline(el));
+    parentPipeline.triggered.forEach((el) => this.closePipeline(el));
 
     if (pipeline.triggered && pipeline.triggered.length) {
-      pipeline.triggered.forEach(el => this.resetTriggeredPipelines(pipeline, el));
+      pipeline.triggered.forEach((el) => this.resetTriggeredPipelines(pipeline, el));
     }
   }
 
@@ -165,7 +165,7 @@ export default class PipelineStore {
     this.closePipeline(pipeline);
 
     if (pipeline.triggered && pipeline.triggered.length) {
-      pipeline.triggered.forEach(triggered => this.closeTriggeredPipeline(triggered));
+      pipeline.triggered.forEach((triggered) => this.closeTriggeredPipeline(triggered));
     }
   }
 
@@ -199,7 +199,7 @@ export default class PipelineStore {
 
   removeExpandedPipelineToRequestData(id) {
     this.state.expandedPipelines.splice(
-      this.state.expandedPipelines.findIndex(el => el === id),
+      this.state.expandedPipelines.findIndex((el) => el === id),
       1,
     );
   }
diff --git a/app/assets/javascripts/pipelines/stores/test_reports/getters.js b/app/assets/javascripts/pipelines/stores/test_reports/getters.js
index 56f769c00fa..c31e7dd114f 100644
--- a/app/assets/javascripts/pipelines/stores/test_reports/getters.js
+++ b/app/assets/javascripts/pipelines/stores/test_reports/getters.js
@@ -1,18 +1,18 @@
 import { addIconStatus, formattedTime } from './utils';
 
-export const getTestSuites = state => {
+export const getTestSuites = (state) => {
   const { test_suites: testSuites = [] } = state.testReports;
 
-  return testSuites.map(suite => ({
+  return testSuites.map((suite) => ({
     ...suite,
     formattedTime: formattedTime(suite.total_time),
   }));
 };
 
-export const getSelectedSuite = state =>
+export const getSelectedSuite = (state) =>
   state.testReports?.test_suites?.[state.selectedSuiteIndex] || {};
 
-export const getSuiteTests = state => {
+export const getSuiteTests = (state) => {
   const { test_cases: testCases = [] } = getSelectedSuite(state);
   const { page, perPage } = state.pageInfo;
   const start = (page - 1) * perPage;
@@ -20,4 +20,4 @@ export const getSuiteTests = state => {
   return testCases.map(addIconStatus).slice(start, start + perPage);
 };
 
-export const getSuiteTestCount = state => getSelectedSuite(state)?.test_cases?.length || 0;
+export const getSuiteTestCount = (state) => getSelectedSuite(state)?.test_cases?.length || 0;
diff --git a/app/assets/javascripts/pipelines/stores/test_reports/index.js b/app/assets/javascripts/pipelines/stores/test_reports/index.js
index 88f61b09025..204dfc2fb01 100644
--- a/app/assets/javascripts/pipelines/stores/test_reports/index.js
+++ b/app/assets/javascripts/pipelines/stores/test_reports/index.js
@@ -7,7 +7,7 @@ import mutations from './mutations';
 
 Vue.use(Vuex);
 
-export default initialState =>
+export default (initialState) =>
   new Vuex.Store({
     actions,
     getters,
diff --git a/app/assets/javascripts/pipelines/stores/test_reports/utils.js b/app/assets/javascripts/pipelines/stores/test_reports/utils.js
index 42406e5a67a..5c1f27b166a 100644
--- a/app/assets/javascripts/pipelines/stores/test_reports/utils.js
+++ b/app/assets/javascripts/pipelines/stores/test_reports/utils.js
@@ -25,7 +25,7 @@ export const formattedTime = (seconds = 0) => {
   return sprintf(__('%{seconds}s'), { seconds: seconds.toFixed(2) });
 };
 
-export const addIconStatus = testCase => ({
+export const addIconStatus = (testCase) => ({
   ...testCase,
   icon: iconForTestStatus(testCase.status),
   formattedTime: formattedTime(testCase.execution_time),
diff --git a/app/assets/javascripts/pipelines/utils.js b/app/assets/javascripts/pipelines/utils.js
index 28d6c0edb0f..58fbe18dc72 100644
--- a/app/assets/javascripts/pipelines/utils.js
+++ b/app/assets/javascripts/pipelines/utils.js
@@ -1,7 +1,7 @@
 import { pickBy } from 'lodash';
 import { SUPPORTED_FILTER_PARAMETERS } from './constants';
 
-export const validateParams = params => {
+export const validateParams = (params) => {
   return pickBy(params, (val, key) => SUPPORTED_FILTER_PARAMETERS.includes(key) && val);
 };
 
@@ -17,10 +17,10 @@ export const createUniqueLinkId = (stageName, jobName) => `${stageName}-${jobNam
 export const createJobsHash = (stages = []) => {
   const jobsHash = {};
 
-  stages.forEach(stage => {
+  stages.forEach((stage) => {
     if (stage.groups.length > 0) {
-      stage.groups.forEach(group => {
-        group.jobs.forEach(job => {
+      stage.groups.forEach((group) => {
+        group.jobs.forEach((job) => {
           jobsHash[job.name] = job;
         });
       });
@@ -44,13 +44,13 @@ export const generateJobNeedsDict = (jobs = {}) => {
   const arrOfJobNames = Object.keys(jobs);
 
   return arrOfJobNames.reduce((acc, value) => {
-    const recursiveNeeds = jobName => {
+    const recursiveNeeds = (jobName) => {
       if (!jobs[jobName]?.needs) {
         return [];
       }
 
       return jobs[jobName].needs
-        .map(job => {
+        .map((job) => {
           // If we already have the needs of a job in the accumulator,
           // then we use the memoized data instead of the recursive call
           // to save some performance.
diff --git a/app/assets/javascripts/popovers/components/popovers.vue b/app/assets/javascripts/popovers/components/popovers.vue
index 3bb6d284264..05a209a97ad 100644
--- a/app/assets/javascripts/popovers/components/popovers.vue
+++ b/app/assets/javascripts/popovers/components/popovers.vue
@@ -7,7 +7,7 @@
 import { GlPopover } from '@gitlab/ui';
 import { sanitize } from '~/lib/dompurify';
 
-const newPopover = element => {
+const newPopover = (element) => {
   const { content, html, placement, title, triggers = 'focus' } = element.dataset;
 
   return {
@@ -30,8 +30,8 @@ export default {
     };
   },
   created() {
-    this.observer = new MutationObserver(mutations => {
-      mutations.forEach(mutation => {
+    this.observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
         mutation.removedNodes.forEach(this.dispose);
       });
     });
@@ -61,7 +61,7 @@ export default {
       if (!target) {
         this.popovers = [];
       } else {
-        const index = this.popovers.findIndex(popover => popover.target === target);
+        const index = this.popovers.findIndex((popover) => popover.target === target);
 
         if (index > -1) {
           this.popovers.splice(index, 1);
@@ -69,7 +69,7 @@ export default {
       }
     },
     popoverExists(element) {
-      return this.popovers.some(popover => popover.target === element);
+      return this.popovers.some((popover) => popover.target === element);
     },
     getSafeHtml(html) {
       return sanitize(html);
diff --git a/app/assets/javascripts/popovers/index.js b/app/assets/javascripts/popovers/index.js
index bfb61f02a3a..eebbfbdcc68 100644
--- a/app/assets/javascripts/popovers/index.js
+++ b/app/assets/javascripts/popovers/index.js
@@ -32,10 +32,10 @@ const handlePopoverEvent = (rootTarget, e, selector) => {
 };
 
 export const initPopovers = () => {
-  ['mouseenter', 'focus', 'click'].forEach(event => {
+  ['mouseenter', 'focus', 'click'].forEach((event) => {
     document.addEventListener(
       event,
-      e => handlePopoverEvent(document, e, '[data-toggle="popover"]'),
+      (e) => handlePopoverEvent(document, e, '[data-toggle="popover"]'),
       true,
     );
   });
@@ -43,7 +43,7 @@ export const initPopovers = () => {
   return getPopoversApp();
 };
 
-export const dispose = elements => toArray(elements).forEach(getPopoversApp().dispose);
+export const dispose = (elements) => toArray(elements).forEach(getPopoversApp().dispose);
 
 export const destroy = () => {
   getPopoversApp().$destroy();
diff --git a/app/assets/javascripts/profile/account/components/update_username.vue b/app/assets/javascripts/profile/account/components/update_username.vue
index 5feac7485ad..869fdccc800 100644
--- a/app/assets/javascripts/profile/account/components/update_username.vue
+++ b/app/assets/javascripts/profile/account/components/update_username.vue
@@ -84,12 +84,12 @@ Please update your Git repository remotes as soon as possible.`),
 
       return axios
         .put(this.actionUrl, putData)
-        .then(result => {
+        .then((result) => {
           Flash(result.data.message, 'notice');
           this.username = username;
           this.isRequestPending = false;
         })
-        .catch(error => {
+        .catch((error) => {
           Flash(error.response.data.message);
           this.isRequestPending = false;
           throw error;
diff --git a/app/assets/javascripts/profile/add_ssh_key_validation.js b/app/assets/javascripts/profile/add_ssh_key_validation.js
index ab6a6c1896c..5c78de7ffb0 100644
--- a/app/assets/javascripts/profile/add_ssh_key_validation.js
+++ b/app/assets/javascripts/profile/add_ssh_key_validation.js
@@ -12,7 +12,7 @@ export default class AddSshKeyValidation {
   }
 
   register() {
-    this.form.addEventListener('submit', event => this.submit(event));
+    this.form.addEventListener('submit', (event) => this.submit(event));
 
     this.confirmSubmitElement.addEventListener('click', () => {
       this.isValid = true;
diff --git a/app/assets/javascripts/profile/preferences/profile_preferences_bundle.js b/app/assets/javascripts/profile/preferences/profile_preferences_bundle.js
index bcca3140717..744e0174a4e 100644
--- a/app/assets/javascripts/profile/preferences/profile_preferences_bundle.js
+++ b/app/assets/javascripts/profile/preferences/profile_preferences_bundle.js
@@ -18,6 +18,6 @@ export default () => {
     el,
     name: 'ProfilePreferencesApp',
     provide,
-    render: createElement => createElement(ProfilePreferences),
+    render: (createElement) => createElement(ProfilePreferences),
   });
 };
diff --git a/app/assets/javascripts/profile/profile.js b/app/assets/javascripts/profile/profile.js
index ef3b38095b4..bfeeff47163 100644
--- a/app/assets/javascripts/profile/profile.js
+++ b/app/assets/javascripts/profile/profile.js
@@ -20,7 +20,7 @@ export default class Profile {
     this.timezoneDropdown = new TimezoneDropdown({
       $inputEl: this.$inputEl,
       $dropdownEl: $('.js-timezone-dropdown'),
-      displayFormat: selectedItem => formatTimezone(selectedItem),
+      displayFormat: (selectedItem) => formatTimezone(selectedItem),
     });
   }
 
@@ -39,7 +39,7 @@ export default class Profile {
   bindEvents() {
     $('.js-preferences-form').on('change.preference', 'input[type=radio]', this.submitForm);
     $('.js-group-notification-email').on('change', this.submitForm);
-    $('#user_notification_email').on('select2-selecting', event => {
+    $('#user_notification_email').on('select2-selecting', (event) => {
       setTimeout(this.submitForm.bind(event.currentTarget));
     });
     $('#user_notified_of_own_activity').on('change', this.submitForm);
@@ -89,7 +89,7 @@ export default class Profile {
         // Enable submit button after requests ends
         self.form.find(':input[disabled]').enable();
       })
-      .catch(error => flash(error.message));
+      .catch((error) => flash(error.message));
   }
 
   updateHeaderAvatar() {
diff --git a/app/assets/javascripts/project_find_file.js b/app/assets/javascripts/project_find_file.js
index 2ba07a2af27..ddb8956b664 100644
--- a/app/assets/javascripts/project_find_file.js
+++ b/app/assets/javascripts/project_find_file.js
@@ -57,7 +57,7 @@ export default class ProjectFindFile {
   initEvent() {
     // eslint-disable-next-line @gitlab/no-global-event-off
     this.inputElement.off('keyup');
-    this.inputElement.on('keyup', event => {
+    this.inputElement.on('keyup', (event) => {
       const target = $(event.target);
       const value = target.val();
       const ref = target.data('oldValue');
diff --git a/app/assets/javascripts/project_select.js b/app/assets/javascripts/project_select.js
index f7818a457d2..e68430d7dfd 100644
--- a/app/assets/javascripts/project_select.js
+++ b/app/assets/javascripts/project_select.js
@@ -33,7 +33,7 @@ const projectSelect = () => {
         $(select).select2({
           placeholder,
           minimumInputLength: 0,
-          query: query => {
+          query: (query) => {
             let projectsCallback;
             const finalCallback = function (projects) {
               const data = {
diff --git a/app/assets/javascripts/project_select_combo_button.js b/app/assets/javascripts/project_select_combo_button.js
index 6e41a268c5f..4b14df21f05 100644
--- a/app/assets/javascripts/project_select_combo_button.js
+++ b/app/assets/javascripts/project_select_combo_button.js
@@ -17,9 +17,9 @@ export default class ProjectSelectComboButton {
   bindEvents() {
     this.projectSelectInput
       .siblings('.new-project-item-select-button')
-      .on('click', e => this.openDropdown(e));
+      .on('click', (e) => this.openDropdown(e));
 
-    this.newItemBtn.on('click', e => {
+    this.newItemBtn.on('click', (e) => {
       if (!this.getProjectFromLocalStorage()) {
         e.preventDefault();
         this.openDropdown(e);
diff --git a/app/assets/javascripts/project_visibility.js b/app/assets/javascripts/project_visibility.js
index aaf6723c85c..e3868e2925d 100644
--- a/app/assets/javascripts/project_visibility.js
+++ b/app/assets/javascripts/project_visibility.js
@@ -7,7 +7,7 @@ function setVisibilityOptions(namespaceSelector) {
   const selectedNamespace = namespaceSelector.options[namespaceSelector.selectedIndex];
   const { name, visibility, visibilityLevel, showPath, editPath } = selectedNamespace.dataset;
 
-  document.querySelectorAll('.visibility-level-setting .form-check').forEach(option => {
+  document.querySelectorAll('.visibility-level-setting .form-check').forEach((option) => {
     const optionInput = option.querySelector('input[type=radio]');
     const optionValue = optionInput ? optionInput.value : 0;
     const optionTitle = option.querySelector('.option-title');
diff --git a/app/assets/javascripts/projects/commit_box/info/load_branches.js b/app/assets/javascripts/projects/commit_box/info/load_branches.js
index 0efa1998507..8a0b2c30abe 100644
--- a/app/assets/javascripts/projects/commit_box/info/load_branches.js
+++ b/app/assets/javascripts/projects/commit_box/info/load_branches.js
@@ -2,7 +2,7 @@ import axios from 'axios';
 import { sanitize } from '~/lib/dompurify';
 import { __ } from '~/locale';
 
-export const loadBranches = containerEl => {
+export const loadBranches = (containerEl) => {
   if (!containerEl) {
     return;
   }
diff --git a/app/assets/javascripts/projects/commits/components/author_select.vue b/app/assets/javascripts/projects/commits/components/author_select.vue
index 3bc772fe60a..752bb594794 100644
--- a/app/assets/javascripts/projects/commits/components/author_select.vue
+++ b/app/assets/javascripts/projects/commits/components/author_select.vue
@@ -69,7 +69,7 @@ export default {
 
     commitsSearchInput.addEventListener(
       'keyup',
-      debounce(event => this.setSearchParam(event.target.value), 500), // keyup & time is to match effect of "filter by commit message"
+      debounce((event) => this.setSearchParam(event.target.value), 500), // keyup & time is to match effect of "filter by commit message"
     );
   },
   methods: {
diff --git a/app/assets/javascripts/projects/commits/index.js b/app/assets/javascripts/projects/commits/index.js
index 6f85432a77e..03b94fde0f3 100644
--- a/app/assets/javascripts/projects/commits/index.js
+++ b/app/assets/javascripts/projects/commits/index.js
@@ -5,7 +5,7 @@ import store from './store';
 
 Vue.use(Vuex);
 
-export default el => {
+export default (el) => {
   if (!el) {
     return null;
   }
diff --git a/app/assets/javascripts/projects/commits/store/actions.js b/app/assets/javascripts/projects/commits/store/actions.js
index 157e2409f7f..359d81f32f7 100644
--- a/app/assets/javascripts/projects/commits/store/actions.js
+++ b/app/assets/javascripts/projects/commits/store/actions.js
@@ -26,7 +26,7 @@ export default {
         },
       })
       .then(({ data }) => dispatch('receiveAuthorsSuccess', data))
-      .catch(error => {
+      .catch((error) => {
         Sentry.captureException(error);
         dispatch('receiveAuthorsError');
       });
diff --git a/app/assets/javascripts/projects/experiment_new_project_creation/components/app.vue b/app/assets/javascripts/projects/experiment_new_project_creation/components/app.vue
index 2e16071e563..3e9d7bb1d0e 100644
--- a/app/assets/javascripts/projects/experiment_new_project_creation/components/app.vue
+++ b/app/assets/javascripts/projects/experiment_new_project_creation/components/app.vue
@@ -83,11 +83,11 @@ export default {
         return PANELS;
       }
 
-      return PANELS.filter(p => p.name !== CI_CD_PANEL);
+      return PANELS.filter((p) => p.name !== CI_CD_PANEL);
     },
 
     activePanel() {
-      return PANELS.find(p => p.name === this.activeTab);
+      return PANELS.find((p) => p.name === this.activeTab);
     },
 
     breadcrumbs() {
@@ -113,7 +113,7 @@ export default {
       this.handleLocationHashChange();
       this.resetProjectErrors();
     });
-    this.$root.$on('clicked::link', e => {
+    this.$root.$on('clicked::link', (e) => {
       window.location = e.target.href;
     });
   },
diff --git a/app/assets/javascripts/projects/pipelines/charts/components/app.vue b/app/assets/javascripts/projects/pipelines/charts/components/app.vue
index 4bf837faed1..116da641783 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/app.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/app.vue
@@ -252,7 +252,7 @@ export default {
   },
   get chartTitles() {
     const today = dateFormat(new Date(), CHART_DATE_FORMAT);
-    const pastDate = timeScale =>
+    const pastDate = (timeScale) =>
       dateFormat(getDateInPast(new Date(), timeScale), CHART_DATE_FORMAT);
     return {
       lastWeek: sprintf(__('Pipelines for last week (%{oneWeekAgo} - %{today})'), {
diff --git a/app/assets/javascripts/projects/pipelines/charts/components/app_legacy.vue b/app/assets/javascripts/projects/pipelines/charts/components/app_legacy.vue
index c6e2b2e1140..1a102815e97 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/app_legacy.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/app_legacy.vue
@@ -98,7 +98,7 @@ export default {
   },
   get chartTitles() {
     const today = dateFormat(new Date(), CHART_DATE_FORMAT);
-    const pastDate = timeScale =>
+    const pastDate = (timeScale) =>
       dateFormat(getDateInPast(new Date(), timeScale), CHART_DATE_FORMAT);
     return {
       lastWeek: sprintf(__('Pipelines for last week (%{oneWeekAgo} - %{today})'), {
diff --git a/app/assets/javascripts/projects/pipelines/charts/index.js b/app/assets/javascripts/projects/pipelines/charts/index.js
index f6e79f0ab51..c94a4e6af99 100644
--- a/app/assets/javascripts/projects/pipelines/charts/index.js
+++ b/app/assets/javascripts/projects/pipelines/charts/index.js
@@ -10,7 +10,7 @@ const apolloProvider = new VueApollo({
   defaultClient: createDefaultClient(),
 });
 
-const mountPipelineChartsApp = el => {
+const mountPipelineChartsApp = (el) => {
   // Not all of the values will be defined since some them will be
   // empty depending on the value of the graphql_pipeline_analytics
   // feature flag, once the rollout of the feature flag is completed
@@ -62,7 +62,7 @@ const mountPipelineChartsApp = el => {
       provide: {
         projectPath,
       },
-      render: createElement => createElement(ProjectPipelinesCharts, {}),
+      render: (createElement) => createElement(ProjectPipelinesCharts, {}),
     });
   }
 
@@ -72,7 +72,7 @@ const mountPipelineChartsApp = el => {
     components: {
       ProjectPipelinesChartsLegacy,
     },
-    render: createElement =>
+    render: (createElement) =>
       createElement(ProjectPipelinesChartsLegacy, {
         props: {
           counts: {
diff --git a/app/assets/javascripts/projects/project_new.js b/app/assets/javascripts/projects/project_new.js
index 36021c5ca20..e3ba84102a8 100644
--- a/app/assets/javascripts/projects/project_new.js
+++ b/app/assets/javascripts/projects/project_new.js
@@ -39,7 +39,7 @@ const setProjectNamePathHandlers = ($projectNameInput, $projectPathInput) => {
   });
 };
 
-const deriveProjectPathFromUrl = $projectImportUrl => {
+const deriveProjectPathFromUrl = ($projectImportUrl) => {
   const $currentProjectName = $projectImportUrl
     .parents('.toggle-import-form')
     .find('#project_name');
@@ -89,7 +89,7 @@ const bindEvents = () => {
     return;
   }
 
-  $('.how_to_import_link').on('click', e => {
+  $('.how_to_import_link').on('click', (e) => {
     e.preventDefault();
     $(e.currentTarget).next('.modal').show();
   });
@@ -112,7 +112,7 @@ const bindEvents = () => {
     $pushNewProjectTipTrigger
       .removeAttr('rel')
       .removeAttr('target')
-      .on('click', e => {
+      .on('click', (e) => {
         e.preventDefault();
       })
       .popover({
@@ -122,7 +122,7 @@ const bindEvents = () => {
         content: $('.push-new-project-tip-template').html(),
       })
       .on('shown.bs.popover', () => {
-        $(document).on('click.popover touchstart.popover', event => {
+        $(document).on('click.popover touchstart.popover', (event) => {
           if ($(event.target).closest('.popover').length === 0) {
             $pushNewProjectTipTrigger.trigger('click');
           }
diff --git a/app/assets/javascripts/projects/settings/components/shared_runners_toggle.vue b/app/assets/javascripts/projects/settings/components/shared_runners_toggle.vue
index a4924033c1e..51281def7d0 100644
--- a/app/assets/javascripts/projects/settings/components/shared_runners_toggle.vue
+++ b/app/assets/javascripts/projects/settings/components/shared_runners_toggle.vue
@@ -46,7 +46,7 @@ export default {
           this.isLoading = false;
           this.isSharedRunnerEnabled = !this.isSharedRunnerEnabled;
         })
-        .catch(error => {
+        .catch((error) => {
           this.isLoading = false;
           this.errorMessage = error.response?.data?.error || DEFAULT_ERROR_MESSAGE;
         });
diff --git a/app/assets/javascripts/projects/settings_service_desk/components/service_desk_root.vue b/app/assets/javascripts/projects/settings_service_desk/components/service_desk_root.vue
index a07c57c42cb..beaf5820095 100644
--- a/app/assets/javascripts/projects/settings_service_desk/components/service_desk_root.vue
+++ b/app/assets/javascripts/projects/settings_service_desk/components/service_desk_root.vue
@@ -110,7 +110,7 @@ export default {
           this.updatedCustomEmail = data?.service_desk_address;
           this.showAlert(__('Changes were successfully made.'), 'success');
         })
-        .catch(err => {
+        .catch((err) => {
           this.showAlert(
             sprintf(__('An error occured while making the changes: %{error}'), {
               error: err?.response?.data?.message,
diff --git a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
index 9788a32dcbd..0f01167988d 100644
--- a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
+++ b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
@@ -63,7 +63,7 @@ export default {
       this.poll = new Poll({
         resource: this.service,
         method: 'fetchData',
-        successCallback: response => this.successCallback(response),
+        successCallback: (response) => this.successCallback(response),
         errorCallback: this.errorCallback,
       });
 
diff --git a/app/assets/javascripts/prometheus_alerts/components/reset_key.vue b/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
index 6f60141d7ab..91de6d93e19 100644
--- a/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
+++ b/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
@@ -61,7 +61,7 @@ export default {
     resetKey() {
       axios
         .post(this.changeKeyUrl)
-        .then(res => {
+        .then((res) => {
           this.authorizationKey = res.data.token;
         })
         .catch(() => {
diff --git a/app/assets/javascripts/prometheus_metrics/custom_metrics.js b/app/assets/javascripts/prometheus_metrics/custom_metrics.js
index 36df7837785..e891b8bf3b6 100644
--- a/app/assets/javascripts/prometheus_metrics/custom_metrics.js
+++ b/app/assets/javascripts/prometheus_metrics/custom_metrics.js
@@ -65,12 +65,12 @@ export default class CustomMetrics extends PrometheusMetrics {
 
   // eslint-disable-next-line class-methods-use-this
   setHidden(els) {
-    els.forEach(el => el.addClass('hidden'));
+    els.forEach((el) => el.addClass('hidden'));
   }
 
   setVisible(...els) {
-    this.setHidden(this.$els.filter(el => !els.includes(el)));
-    els.forEach(el => el.removeClass('hidden'));
+    this.setHidden(this.$els.filter((el) => !els.includes(el)));
+    els.forEach((el) => el.removeClass('hidden'));
   }
 
   showMonitoringCustomMetricsPanelState(stateName) {
@@ -98,14 +98,14 @@ export default class CustomMetrics extends PrometheusMetrics {
   }
 
   populateCustomMetrics() {
-    const capitalizeGroup = metric => ({
+    const capitalizeGroup = (metric) => ({
       ...metric,
       group: capitalizeFirstCharacter(metric.group),
     });
 
     const sortedMetrics = sortBy(this.customMetrics.map(capitalizeGroup), ['group', 'title']);
 
-    sortedMetrics.forEach(metric => {
+    sortedMetrics.forEach((metric) => {
       this.$monitoredCustomMetricsList.append(CustomMetrics.customMetricTemplate(metric));
     });
 
@@ -145,7 +145,7 @@ export default class CustomMetrics extends PrometheusMetrics {
           this.populateCustomMetrics(customMetrics.data.metrics);
         }
       })
-      .catch(customMetricError => {
+      .catch((customMetricError) => {
         this.showFlashMessage(customMetricError);
         this.showMonitoringCustomMetricsPanelState(PANEL_STATE.EMPTY);
       });
diff --git a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
index bb9689f09a1..57f9cec9682 100644
--- a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
+++ b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
@@ -26,8 +26,8 @@ export default class PrometheusMetrics {
     this.activeMetricsEndpoint = this.$monitoredMetricsPanel.data('activeMetrics');
     this.helpMetricsPath = this.$monitoredMetricsPanel.data('metrics-help-path');
 
-    this.$panelToggleRight.on('click', e => this.handlePanelToggle(e));
-    this.$panelToggleDown.on('click', e => this.handlePanelToggle(e));
+    this.$panelToggleRight.on('click', (e) => this.handlePanelToggle(e));
+    this.$panelToggleDown.on('click', (e) => this.handlePanelToggle(e));
   }
 
   init() {
@@ -72,7 +72,7 @@ export default class PrometheusMetrics {
     let totalMissingEnvVarMetrics = 0;
     let totalExporters = 0;
 
-    metrics.forEach(metric => {
+    metrics.forEach((metric) => {
       if (metric.active_metrics > 0) {
         totalExporters += 1;
         this.$monitoredMetricsList.append(
@@ -137,7 +137,7 @@ export default class PrometheusMetrics {
         })
         .catch(stop);
     })
-      .then(res => {
+      .then((res) => {
         if (res && res.data && res.data.length) {
           this.populateActiveMetrics(res.data);
         } else {
diff --git a/app/assets/javascripts/protected_branches/protected_branch_create.js b/app/assets/javascripts/protected_branches/protected_branch_create.js
index 19f6666fd52..a5c7b18f709 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_create.js
+++ b/app/assets/javascripts/protected_branches/protected_branch_create.js
@@ -90,12 +90,12 @@ export default class ProtectedBranchCreate {
       },
     };
 
-    Object.keys(ACCESS_LEVELS).forEach(level => {
+    Object.keys(ACCESS_LEVELS).forEach((level) => {
       const accessLevel = ACCESS_LEVELS[level];
       const selectedItems = this[`${accessLevel}_dropdown`].getSelectedItems();
       const levelAttributes = [];
 
-      selectedItems.forEach(item => {
+      selectedItems.forEach((item) => {
         if (item.type === LEVEL_TYPES.USER) {
           levelAttributes.push({
             user_id: item.user_id,
diff --git a/app/assets/javascripts/protected_branches/protected_branch_edit.js b/app/assets/javascripts/protected_branches/protected_branch_edit.js
index 1f079123081..f5f27b67c71 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_edit.js
+++ b/app/assets/javascripts/protected_branches/protected_branch_edit.js
@@ -108,7 +108,7 @@ export default class ProtectedBranchEdit {
       .then(({ data }) => {
         this.hasChanges = false;
 
-        Object.keys(ACCESS_LEVELS).forEach(level => {
+        Object.keys(ACCESS_LEVELS).forEach((level) => {
           const accessLevelName = ACCESS_LEVELS[level];
 
           // The data coming from server will be the new persisted *state* for each dropdown
@@ -125,7 +125,7 @@ export default class ProtectedBranchEdit {
   }
 
   setSelectedItemsToDropdown(items = [], dropdownName) {
-    const itemsToAdd = items.map(currentItem => {
+    const itemsToAdd = items.map((currentItem) => {
       if (currentItem.user_id) {
         // Do this only for users for now
         // get the current data for selected items
diff --git a/app/assets/javascripts/read_more.js b/app/assets/javascripts/read_more.js
index d2d1ac8c76a..769782607b8 100644
--- a/app/assets/javascripts/read_more.js
+++ b/app/assets/javascripts/read_more.js
@@ -22,7 +22,7 @@ export default function initReadMore(triggerSelector = '.js-read-more-trigger')
 
   if (!triggerEls) return;
 
-  triggerEls.forEach(triggerEl => {
+  triggerEls.forEach((triggerEl) => {
     const targetEl = triggerEl.previousElementSibling;
 
     if (!targetEl) {
@@ -31,7 +31,7 @@ export default function initReadMore(triggerSelector = '.js-read-more-trigger')
 
     triggerEl.addEventListener(
       'click',
-      e => {
+      (e) => {
         targetEl.classList.add('is-expanded');
         e.target.remove();
       },
diff --git a/app/assets/javascripts/ref/components/ref_results_section.vue b/app/assets/javascripts/ref/components/ref_results_section.vue
index dc74f86fd70..87ce4f1a49c 100644
--- a/app/assets/javascripts/ref/components/ref_results_section.vue
+++ b/app/assets/javascripts/ref/components/ref_results_section.vue
@@ -39,7 +39,7 @@ export default {
     items: {
       type: Array,
       required: true,
-      validator: items => Array.isArray(items) && items.every(item => item.name),
+      validator: (items) => Array.isArray(items) && items.every((item) => item.name),
     },
 
     /**
diff --git a/app/assets/javascripts/ref/components/ref_selector.vue b/app/assets/javascripts/ref/components/ref_selector.vue
index 0084450c9b0..20aec3e12be 100644
--- a/app/assets/javascripts/ref/components/ref_selector.vue
+++ b/app/assets/javascripts/ref/components/ref_selector.vue
@@ -50,9 +50,9 @@ export default {
   },
   computed: {
     ...mapState({
-      matches: state => state.matches,
-      lastQuery: state => state.query,
-      selectedRef: state => state.selectedRef,
+      matches: (state) => state.matches,
+      lastQuery: (state) => state.query,
+      selectedRef: (state) => state.selectedRef,
     }),
     ...mapGetters(['isLoading', 'isQueryPossiblyASha']),
     i18n() {
diff --git a/app/assets/javascripts/ref/stores/actions.js b/app/assets/javascripts/ref/stores/actions.js
index 8fcc99cef38..d9bdd64ace5 100644
--- a/app/assets/javascripts/ref/stores/actions.js
+++ b/app/assets/javascripts/ref/stores/actions.js
@@ -18,10 +18,10 @@ export const searchBranches = ({ commit, state }) => {
   commit(types.REQUEST_START);
 
   Api.branches(state.projectId, state.query)
-    .then(response => {
+    .then((response) => {
       commit(types.RECEIVE_BRANCHES_SUCCESS, response);
     })
-    .catch(error => {
+    .catch((error) => {
       commit(types.RECEIVE_BRANCHES_ERROR, error);
     })
     .finally(() => {
@@ -33,10 +33,10 @@ export const searchTags = ({ commit, state }) => {
   commit(types.REQUEST_START);
 
   Api.tags(state.projectId, state.query)
-    .then(response => {
+    .then((response) => {
       commit(types.RECEIVE_TAGS_SUCCESS, response);
     })
-    .catch(error => {
+    .catch((error) => {
       commit(types.RECEIVE_TAGS_ERROR, error);
     })
     .finally(() => {
@@ -50,10 +50,10 @@ export const searchCommits = ({ commit, state, getters }) => {
     commit(types.REQUEST_START);
 
     Api.commit(state.projectId, state.query)
-      .then(response => {
+      .then((response) => {
         commit(types.RECEIVE_COMMITS_SUCCESS, response);
       })
-      .catch(error => {
+      .catch((error) => {
         commit(types.RECEIVE_COMMITS_ERROR, error);
       })
       .finally(() => {
diff --git a/app/assets/javascripts/ref/stores/mutations.js b/app/assets/javascripts/ref/stores/mutations.js
index 73f9d7ee487..75026a40175 100644
--- a/app/assets/javascripts/ref/stores/mutations.js
+++ b/app/assets/javascripts/ref/stores/mutations.js
@@ -23,7 +23,7 @@ export default {
 
   [types.RECEIVE_BRANCHES_SUCCESS](state, response) {
     state.matches.branches = {
-      list: convertObjectPropsToCamelCase(response.data).map(b => ({
+      list: convertObjectPropsToCamelCase(response.data).map((b) => ({
         name: b.name,
         default: b.default,
       })),
@@ -41,7 +41,7 @@ export default {
 
   [types.RECEIVE_TAGS_SUCCESS](state, response) {
     state.matches.tags = {
-      list: convertObjectPropsToCamelCase(response.data).map(b => ({
+      list: convertObjectPropsToCamelCase(response.data).map((b) => ({
         name: b.name,
       })),
       totalCount: parseInt(response.headers[X_TOTAL_HEADER], 10),
diff --git a/app/assets/javascripts/ref_select_dropdown.js b/app/assets/javascripts/ref_select_dropdown.js
index af8729c1d08..c283fb1ea08 100644
--- a/app/assets/javascripts/ref_select_dropdown.js
+++ b/app/assets/javascripts/ref_select_dropdown.js
@@ -31,7 +31,7 @@ class RefSelectDropdown {
     const $fieldInput = $(`input[name="${$dropdownButton.data('fieldName')}"]`, $dropdownContainer);
     const $filterInput = $('input[type="search"]', $dropdownContainer);
 
-    $filterInput.on('keyup', e => {
+    $filterInput.on('keyup', (e) => {
       const keyCode = e.keyCode || e.which;
       if (keyCode !== 13) return;
 
diff --git a/app/assets/javascripts/registry/explorer/components/details_page/details_header.vue b/app/assets/javascripts/registry/explorer/components/details_page/details_header.vue
index 3eeb7b29386..37b2865444e 100644
--- a/app/assets/javascripts/registry/explorer/components/details_page/details_header.vue
+++ b/app/assets/javascripts/registry/explorer/components/details_page/details_header.vue
@@ -7,6 +7,7 @@ import timeagoMixin from '~/vue_shared/mixins/timeago';
 import { DETAILS_PAGE_TITLE, UPDATED_AT } from '../../constants/index';
 
 export default {
+  name: 'DetailsHeader',
   components: { GlSprintf, TitleArea, MetadataItem },
   mixins: [timeagoMixin],
   props: {
diff --git a/app/assets/javascripts/registry/explorer/components/details_page/tags_list.vue b/app/assets/javascripts/registry/explorer/components/details_page/tags_list.vue
index ad39a898e7b..1e0736c4a53 100644
--- a/app/assets/javascripts/registry/explorer/components/details_page/tags_list.vue
+++ b/app/assets/javascripts/registry/explorer/components/details_page/tags_list.vue
@@ -4,6 +4,7 @@ import TagsListRow from './tags_list_row.vue';
 import { REMOVE_TAGS_BUTTON_TITLE, TAGS_LIST_TITLE } from '../../constants/index';
 
 export default {
+  name: 'TagsList',
   components: {
     GlButton,
     TagsListRow,
@@ -31,10 +32,10 @@ export default {
   },
   computed: {
     hasSelectedItems() {
-      return this.tags.some(tag => this.selectedItems[tag.name]);
+      return this.tags.some((tag) => this.selectedItems[tag.name]);
     },
     showMultiDeleteButton() {
-      return this.tags.some(tag => tag.canDelete) && !this.isMobile;
+      return this.tags.some((tag) => tag.canDelete) && !this.isMobile;
     },
   },
   methods: {
diff --git a/app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue b/app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue
index 3fe61dc231a..f37bc987eb9 100644
--- a/app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue
+++ b/app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue
@@ -18,7 +18,7 @@ import {
 } from '../../constants/index';
 
 export default {
-  name: 'ImageListrow',
+  name: 'ImageListRow',
   components: {
     ClipboardButton,
     DeleteButton,
diff --git a/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue b/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue
index bad804ad172..f01e3c9d24a 100644
--- a/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue
+++ b/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue
@@ -13,6 +13,7 @@ import {
 } from '../../constants/index';
 
 export default {
+  name: 'ListHeader',
   components: {
     TitleArea,
     MetadataItem,
diff --git a/app/assets/javascripts/registry/explorer/components/registry_breadcrumb.vue b/app/assets/javascripts/registry/explorer/components/registry_breadcrumb.vue
index 1cedcc41b2b..b0861ea1a2e 100644
--- a/app/assets/javascripts/registry/explorer/components/registry_breadcrumb.vue
+++ b/app/assets/javascripts/registry/explorer/components/registry_breadcrumb.vue
@@ -14,10 +14,10 @@ export default {
   },
   computed: {
     parsedCrumbs() {
-      return this.crumbs.map(c => ({ ...c, innerHTML: sanitize(c.innerHTML) }));
+      return this.crumbs.map((c) => ({ ...c, innerHTML: sanitize(c.innerHTML) }));
     },
     rootRoute() {
-      return this.$router.options.routes.find(r => r.meta.root);
+      return this.$router.options.routes.find((r) => r.meta.root);
     },
     isRootRoute() {
       return this.$route.name === this.rootRoute.name;
diff --git a/app/assets/javascripts/registry/explorer/index.js b/app/assets/javascripts/registry/explorer/index.js
index d887b6a1b15..ed6d99c62fb 100644
--- a/app/assets/javascripts/registry/explorer/index.js
+++ b/app/assets/javascripts/registry/explorer/index.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import { GlToast } from '@gitlab/ui';
 import Translate from '~/vue_shared/translate';
 import { parseBoolean } from '~/lib/utils/common_utils';
+import PerformancePlugin from '~/performance/vue_performance_plugin';
 import RegistryExplorer from './pages/index.vue';
 import RegistryBreadcrumb from './components/registry_breadcrumb.vue';
 import createRouter from './router';
@@ -10,6 +11,17 @@ import { apolloProvider } from './graphql/index';
 Vue.use(Translate);
 Vue.use(GlToast);
 
+Vue.use(PerformancePlugin, {
+  components: [
+    'RegistryListPage',
+    'ListHeader',
+    'ImageListRow',
+    'RegistryDetailsPage',
+    'DetailsHeader',
+    'TagsList',
+  ],
+});
+
 export default () => {
   const el = document.getElementById('js-container-registry');
 
diff --git a/app/assets/javascripts/registry/explorer/pages/details.vue b/app/assets/javascripts/registry/explorer/pages/details.vue
index 540f02d58d4..779b2c5a108 100644
--- a/app/assets/javascripts/registry/explorer/pages/details.vue
+++ b/app/assets/javascripts/registry/explorer/pages/details.vue
@@ -25,6 +25,7 @@ import {
 } from '../constants/index';
 
 export default {
+  name: 'RegistryDetailsPage',
   components: {
     DeleteAlert,
     PartialCleanupAlert,
@@ -97,7 +98,7 @@ export default {
   },
   methods: {
     deleteTags(toBeDeleted) {
-      this.itemsToBeDeleted = this.tags.filter(tag => toBeDeleted[tag.name]);
+      this.itemsToBeDeleted = this.tags.filter((tag) => toBeDeleted[tag.name]);
       this.track('click_button');
       this.$refs.deleteModal.show();
     },
@@ -111,7 +112,7 @@ export default {
           mutation: deleteContainerRepositoryTagsMutation,
           variables: {
             id: this.queryVariables.id,
-            tagNames: itemsToBeDeleted.map(i => i.name),
+            tagNames: itemsToBeDeleted.map((i) => i.name),
           },
           awaitRefetchQueries: true,
           refetchQueries: [
diff --git a/app/assets/javascripts/registry/explorer/pages/list.vue b/app/assets/javascripts/registry/explorer/pages/list.vue
index 270c01ea60f..2aa28d450d7 100644
--- a/app/assets/javascripts/registry/explorer/pages/list.vue
+++ b/app/assets/javascripts/registry/explorer/pages/list.vue
@@ -38,7 +38,7 @@ import {
 } from '../constants/index';
 
 export default {
-  name: 'RegistryListApp',
+  name: 'RegistryListPage',
   components: {
     GlEmptyState,
     ProjectEmptyState,
diff --git a/app/assets/javascripts/registry/settings/components/registry_settings_app.vue b/app/assets/javascripts/registry/settings/components/registry_settings_app.vue
index 35c7a8be4ea..66eb681784e 100644
--- a/app/assets/javascripts/registry/settings/components/registry_settings_app.vue
+++ b/app/assets/javascripts/registry/settings/components/registry_settings_app.vue
@@ -33,7 +33,7 @@ export default {
           projectPath: this.projectPath,
         };
       },
-      update: data => data.project?.containerExpirationPolicy,
+      update: (data) => data.project?.containerExpirationPolicy,
       result({ data }) {
         this.workingCopy = { ...get(data, 'project.containerExpirationPolicy', {}) };
       },
diff --git a/app/assets/javascripts/registry/settings/components/settings_form.vue b/app/assets/javascripts/registry/settings/components/settings_form.vue
index 1ef0170a7f6..7043cea49ba 100644
--- a/app/assets/javascripts/registry/settings/components/settings_form.vue
+++ b/app/assets/javascripts/registry/settings/components/settings_form.vue
@@ -96,7 +96,7 @@ export default {
       return this.isLoading || this.mutationLoading;
     },
     fieldsAreValid() {
-      return Object.values(this.localErrors).every(error => error);
+      return Object.values(this.localErrors).every((error) => error);
     },
     isSubmitButtonDisabled() {
       return !this.fieldsAreValid || this.showLoadingIcon;
@@ -121,7 +121,7 @@ export default {
   },
   methods: {
     findDefaultOption(option) {
-      return this.value[option] || this.$options.formOptions[option].find(f => f.default)?.key;
+      return this.value[option] || this.$options.formOptions[option].find((f) => f.default)?.key;
     },
     reset() {
       this.track('reset_form');
@@ -131,7 +131,7 @@ export default {
     },
     setApiErrors(response) {
       this.apiErrors = response.graphQLErrors.reduce((acc, curr) => {
-        curr.extensions.problems.forEach(item => {
+        curr.extensions.problems.forEach((item) => {
           acc[item.path[0]] = item.message;
         });
         return acc;
@@ -163,7 +163,7 @@ export default {
             this.$toast.show(UPDATE_SETTINGS_SUCCESS_MESSAGE, { type: 'success' });
           }
         })
-        .catch(error => {
+        .catch((error) => {
           this.setApiErrors(error);
           this.$toast.show(UPDATE_SETTINGS_ERROR_MESSAGE, { type: 'error' });
         })
diff --git a/app/assets/javascripts/registry/settings/graphql/utils/cache_update.js b/app/assets/javascripts/registry/settings/graphql/utils/cache_update.js
index 05b4125a2fc..6becaa38c7e 100644
--- a/app/assets/javascripts/registry/settings/graphql/utils/cache_update.js
+++ b/app/assets/javascripts/registry/settings/graphql/utils/cache_update.js
@@ -1,14 +1,14 @@
 import { produce } from 'immer';
 import expirationPolicyQuery from '../queries/get_expiration_policy.query.graphql';
 
-export const updateContainerExpirationPolicy = projectPath => (client, { data: updatedData }) => {
+export const updateContainerExpirationPolicy = (projectPath) => (client, { data: updatedData }) => {
   const queryAndParams = {
     query: expirationPolicyQuery,
     variables: { projectPath },
   };
   const sourceData = client.readQuery(queryAndParams);
 
-  const data = produce(sourceData, draftState => {
+  const data = produce(sourceData, (draftState) => {
     // eslint-disable-next-line no-param-reassign
     draftState.project.containerExpirationPolicy = {
       ...updatedData.updateContainerExpirationPolicy.containerExpirationPolicy,
diff --git a/app/assets/javascripts/registry/settings/utils.js b/app/assets/javascripts/registry/settings/utils.js
index 51b4fb6bdb8..4a2d7c7d466 100644
--- a/app/assets/javascripts/registry/settings/utils.js
+++ b/app/assets/javascripts/registry/settings/utils.js
@@ -1,18 +1,18 @@
 import { n__ } from '~/locale';
 import { KEEP_N_OPTIONS, CADENCE_OPTIONS, OLDER_THAN_OPTIONS } from './constants';
 
-export const findDefaultOption = options => {
-  const item = options.find(o => o.default);
+export const findDefaultOption = (options) => {
+  const item = options.find((o) => o.default);
   return item ? item.key : null;
 };
 
-export const olderThanTranslationGenerator = variable => n__('%d day', '%d days', variable);
+export const olderThanTranslationGenerator = (variable) => n__('%d day', '%d days', variable);
 
-export const keepNTranslationGenerator = variable =>
+export const keepNTranslationGenerator = (variable) =>
   n__('%d tag per image name', '%d tags per image name', variable);
 
 export const optionLabelGenerator = (collection, translationFn) =>
-  collection.map(option => ({
+  collection.map((option) => ({
     ...option,
     label: translationFn(option.variable),
   }));
diff --git a/app/assets/javascripts/related_issues/components/related_issuable_input.vue b/app/assets/javascripts/related_issues/components/related_issuable_input.vue
index b05a873e939..a124b055e19 100644
--- a/app/assets/javascripts/related_issues/components/related_issuable_input.vue
+++ b/app/assets/javascripts/related_issues/components/related_issuable_input.vue
@@ -118,7 +118,7 @@ export default {
       let position = 0;
 
       const untouchedRawRefs = rawRefs
-        .filter(ref => {
+        .filter((ref) => {
           let isTouched = false;
 
           if (caretPos >= position && caretPos <= position + ref.length) {
@@ -130,7 +130,7 @@ export default {
 
           return !isTouched;
         })
-        .filter(ref => ref.trim().length > 0);
+        .filter((ref) => ref.trim().length > 0);
 
       this.$emit('addIssuableFormInput', {
         newValue: value,
@@ -208,7 +208,7 @@ export default {
           :path-id-separator="pathIdSeparator"
           event-namespace="pendingIssuable"
           @pendingIssuableRemoveRequest="
-            params => {
+            (params) => {
               $emit('pendingIssuableRemoveRequest', params);
             }
           "
diff --git a/app/assets/javascripts/related_issues/components/related_issues_block.vue b/app/assets/javascripts/related_issues/components/related_issues_block.vue
index c913745a8e1..2591e3e7f48 100644
--- a/app/assets/javascripts/related_issues/components/related_issues_block.vue
+++ b/app/assets/javascripts/related_issues/components/related_issues_block.vue
@@ -90,11 +90,11 @@ export default {
     categorisedIssues() {
       if (this.showCategorizedIssues) {
         return Object.values(linkedIssueTypesMap)
-          .map(linkType => ({
+          .map((linkType) => ({
             linkType,
-            issues: this.relatedIssues.filter(issue => issue.linkType === linkType),
+            issues: this.relatedIssues.filter((issue) => issue.linkType === linkType),
           }))
-          .filter(obj => obj.issues.length > 0);
+          .filter((obj) => obj.issues.length > 0);
       }
 
       return [{ issues: this.relatedIssues }];
diff --git a/app/assets/javascripts/related_issues/components/related_issues_root.vue b/app/assets/javascripts/related_issues/components/related_issues_root.vue
index 73ea13ddc40..a81edcf141c 100644
--- a/app/assets/javascripts/related_issues/components/related_issues_root.vue
+++ b/app/assets/javascripts/related_issues/components/related_issues_root.vue
@@ -110,7 +110,7 @@ export default {
   },
   methods: {
     findRelatedIssueById(id) {
-      return this.state.relatedIssues.find(issue => issue.id === id);
+      return this.state.relatedIssues.find((issue) => issue.id === id);
     },
     onRelatedIssueRemoveRequest(idToRemove) {
       const issueToRemove = this.findRelatedIssueById(idToRemove);
@@ -120,7 +120,7 @@ export default {
           .then(({ data }) => {
             this.store.setRelatedIssues(data.issuables);
           })
-          .catch(res => {
+          .catch((res) => {
             if (res && res.status !== 404) {
               Flash(relatedIssuesRemoveErrorMap[this.issuableType]);
             }
@@ -219,7 +219,7 @@ export default {
       this.processAllReferences(newValue);
     },
     processAllReferences(value = '') {
-      const rawReferences = value.split(/\s+/).filter(reference => reference.trim().length > 0);
+      const rawReferences = value.split(/\s+/).filter((reference) => reference.trim().length > 0);
 
       this.store.addPendingReferences(rawReferences);
       this.inputValue = '';
diff --git a/app/assets/javascripts/related_issues/index.js b/app/assets/javascripts/related_issues/index.js
index 2e8626890cb..0ee99df1455 100644
--- a/app/assets/javascripts/related_issues/index.js
+++ b/app/assets/javascripts/related_issues/index.js
@@ -11,7 +11,7 @@ export default function initRelatedIssues() {
       components: {
         relatedIssuesRoot: RelatedIssuesRoot,
       },
-      render: createElement =>
+      render: (createElement) =>
         createElement('related-issues-root', {
           props: {
             endpoint: relatedIssuesRootElement.dataset.endpoint,
diff --git a/app/assets/javascripts/related_issues/stores/related_issues_store.js b/app/assets/javascripts/related_issues/stores/related_issues_store.js
index 14d71628cad..0f0ab150c28 100644
--- a/app/assets/javascripts/related_issues/stores/related_issues_store.js
+++ b/app/assets/javascripts/related_issues/stores/related_issues_store.js
@@ -19,7 +19,7 @@ class RelatedIssuesStore {
   }
 
   removeRelatedIssue(issue) {
-    this.state.relatedIssues = this.state.relatedIssues.filter(x => x.id !== issue.id);
+    this.state.relatedIssues = this.state.relatedIssues.filter((x) => x.id !== issue.id);
   }
 
   updateIssueOrder(oldIndex, newIndex) {
diff --git a/app/assets/javascripts/related_merge_requests/index.js b/app/assets/javascripts/related_merge_requests/index.js
index 092ff1df00f..ce33cf7df1d 100644
--- a/app/assets/javascripts/related_merge_requests/index.js
+++ b/app/assets/javascripts/related_merge_requests/index.js
@@ -15,7 +15,7 @@ export default function initRelatedMergeRequests() {
         RelatedMergeRequests,
       },
       store: createStore(),
-      render: createElement =>
+      render: (createElement) =>
         createElement('related-merge-requests', {
           props: { endpoint, projectNamespace, projectPath },
         }),
diff --git a/app/assets/javascripts/related_merge_requests/store/actions.js b/app/assets/javascripts/related_merge_requests/store/actions.js
index 65f77f2fe19..7baab165820 100644
--- a/app/assets/javascripts/related_merge_requests/store/actions.js
+++ b/app/assets/javascripts/related_merge_requests/store/actions.js
@@ -21,7 +21,7 @@ export const fetchMergeRequests = ({ state, dispatch }) => {
 
   return axios
     .get(`${state.apiEndpoint}?per_page=${REQUEST_PAGE_COUNT}`)
-    .then(res => {
+    .then((res) => {
       const { headers, data } = res;
       const total = Number(normalizeHeaders(headers)['X-TOTAL']) || 0;
 
diff --git a/app/assets/javascripts/releases/components/release_block_assets.vue b/app/assets/javascripts/releases/components/release_block_assets.vue
index eb83d8657c0..36929f559b5 100644
--- a/app/assets/javascripts/releases/components/release_block_assets.vue
+++ b/app/assets/javascripts/releases/components/release_block_assets.vue
@@ -47,7 +47,7 @@ export default {
     sections() {
       return [
         {
-          links: get(this.assets, 'sources', []).map(s => ({
+          links: get(this.assets, 'sources', []).map((s) => ({
             url: s.url,
             name: sprintf(__('Source code (%{fileExtension})'), { fileExtension: s.format }),
           })),
@@ -73,7 +73,7 @@ export default {
           links: this.otherLinks,
           iconName: 'link',
         },
-      ].filter(section => section.links.length > 0);
+      ].filter((section) => section.links.length > 0);
     },
   },
   methods: {
@@ -81,7 +81,7 @@ export default {
       this.isAssetsExpanded = !this.isAssetsExpanded;
     },
     linksForType(type) {
-      return this.assets.links.filter(l => l.linkType === type);
+      return this.assets.links.filter((l) => l.linkType === type);
     },
   },
   externalLinkTooltipText: __('This link points to external content'),
diff --git a/app/assets/javascripts/releases/components/release_block_milestone_info.vue b/app/assets/javascripts/releases/components/release_block_milestone_info.vue
index daa9c3480f4..cf4a6e07af7 100644
--- a/app/assets/javascripts/releases/components/release_block_milestone_info.vue
+++ b/app/assets/javascripts/releases/components/release_block_milestone_info.vue
@@ -64,7 +64,7 @@ export default {
     },
     issueCounts() {
       return this.milestones
-        .map(m => m.issueStats || {})
+        .map((m) => m.issueStats || {})
         .reduce(
           (acc, current) => {
             acc.total += current.total || 0;
@@ -79,11 +79,11 @@ export default {
         );
     },
     showMergeRequestStats() {
-      return this.milestones.some(m => m.mrStats);
+      return this.milestones.some((m) => m.mrStats);
     },
     mergeRequestCounts() {
       return this.milestones
-        .map(m => m.mrStats || {})
+        .map((m) => m.mrStats || {})
         .reduce(
           (acc, current) => {
             acc.total += current.total || 0;
diff --git a/app/assets/javascripts/releases/components/releases_sort.vue b/app/assets/javascripts/releases/components/releases_sort.vue
index 50f6f3c19bd..c8e6e0e4996 100644
--- a/app/assets/javascripts/releases/components/releases_sort.vue
+++ b/app/assets/javascripts/releases/components/releases_sort.vue
@@ -11,14 +11,14 @@ export default {
   },
   computed: {
     ...mapState('list', {
-      orderBy: state => state.sorting.orderBy,
-      sort: state => state.sorting.sort,
+      orderBy: (state) => state.sorting.orderBy,
+      sort: (state) => state.sorting.sort,
     }),
     sortOptions() {
       return SORT_OPTIONS;
     },
     sortText() {
-      const option = this.sortOptions.find(s => s.orderBy === this.orderBy);
+      const option = this.sortOptions.find((s) => s.orderBy === this.orderBy);
       return option.label;
     },
     isSortAscending() {
diff --git a/app/assets/javascripts/releases/mount_edit.js b/app/assets/javascripts/releases/mount_edit.js
index 2f4b0e64e36..1232d55847b 100644
--- a/app/assets/javascripts/releases/mount_edit.js
+++ b/app/assets/javascripts/releases/mount_edit.js
@@ -18,6 +18,6 @@ export default () => {
   return new Vue({
     el,
     store,
-    render: h => h(ReleaseEditNewApp),
+    render: (h) => h(ReleaseEditNewApp),
   });
 };
diff --git a/app/assets/javascripts/releases/mount_index.js b/app/assets/javascripts/releases/mount_index.js
index cd4fa5c5df5..a9538cbc9e5 100644
--- a/app/assets/javascripts/releases/mount_index.js
+++ b/app/assets/javascripts/releases/mount_index.js
@@ -21,6 +21,6 @@ export default () => {
         graphqlMilestoneStats: Boolean(gon.features?.graphqlMilestoneStats),
       },
     }),
-    render: h => h(ReleaseListApp),
+    render: (h) => h(ReleaseListApp),
   });
 };
diff --git a/app/assets/javascripts/releases/mount_new.js b/app/assets/javascripts/releases/mount_new.js
index 5c481498ffb..d85f4cf77d5 100644
--- a/app/assets/javascripts/releases/mount_new.js
+++ b/app/assets/javascripts/releases/mount_new.js
@@ -18,6 +18,6 @@ export default () => {
   return new Vue({
     el,
     store,
-    render: h => h(ReleaseEditNewApp),
+    render: (h) => h(ReleaseEditNewApp),
   });
 };
diff --git a/app/assets/javascripts/releases/mount_show.js b/app/assets/javascripts/releases/mount_show.js
index b09ecc9fb55..f3ed7d6c5ff 100644
--- a/app/assets/javascripts/releases/mount_show.js
+++ b/app/assets/javascripts/releases/mount_show.js
@@ -21,6 +21,6 @@ export default () => {
   return new Vue({
     el,
     store,
-    render: h => h(ReleaseShowApp),
+    render: (h) => h(ReleaseShowApp),
   });
 };
diff --git a/app/assets/javascripts/releases/stores/getters.js b/app/assets/javascripts/releases/stores/getters.js
index 6a1da63289c..2a06f398e26 100644
--- a/app/assets/javascripts/releases/stores/getters.js
+++ b/app/assets/javascripts/releases/stores/getters.js
@@ -2,7 +2,7 @@
  * @returns {Boolean} `true` if all the feature flags
  * required to enable the GraphQL endpoint are enabled
  */
-export const useGraphQLEndpoint = rootState => {
+export const useGraphQLEndpoint = (rootState) => {
   return Boolean(
     rootState.featureFlags.graphqlReleaseData &&
       rootState.featureFlags.graphqlReleasesPage &&
diff --git a/app/assets/javascripts/releases/stores/modules/detail/actions.js b/app/assets/javascripts/releases/stores/modules/detail/actions.js
index e8a46f40d20..127646826a6 100644
--- a/app/assets/javascripts/releases/stores/modules/detail/actions.js
+++ b/app/assets/javascripts/releases/stores/modules/detail/actions.js
@@ -36,12 +36,12 @@ export const fetchRelease = ({ commit, state, rootState }) => {
           tagName: state.tagName,
         },
       })
-      .then(response => {
+      .then((response) => {
         const { data: release } = convertOneReleaseGraphQLResponse(response);
 
         commit(types.RECEIVE_RELEASE_SUCCESS, release);
       })
-      .catch(error => {
+      .catch((error) => {
         commit(types.RECEIVE_RELEASE_ERROR, error);
         createFlash(s__('Release|Something went wrong while getting the release details'));
       });
@@ -52,7 +52,7 @@ export const fetchRelease = ({ commit, state, rootState }) => {
     .then(({ data }) => {
       commit(types.RECEIVE_RELEASE_SUCCESS, apiJsonToRelease(data));
     })
-    .catch(error => {
+    .catch((error) => {
       commit(types.RECEIVE_RELEASE_ERROR, error);
       createFlash(s__('Release|Something went wrong while getting the release details'));
     });
@@ -121,7 +121,7 @@ export const createRelease = ({ commit, dispatch, state, getters }) => {
     .then(({ data }) => {
       dispatch('receiveSaveReleaseSuccess', apiJsonToRelease(data));
     })
-    .catch(error => {
+    .catch((error) => {
       commit(types.RECEIVE_SAVE_RELEASE_ERROR, error);
       createFlash(s__('Release|Something went wrong while creating a new release'));
     });
@@ -163,7 +163,7 @@ export const updateRelease = ({ commit, dispatch, state, getters }) => {
 
         // Delete all links currently associated with this Release
         return Promise.all(
-          getters.releaseLinksToDelete.map(l =>
+          getters.releaseLinksToDelete.map((l) =>
             api.deleteReleaseLink(state.projectId, state.release.tagName, l.id),
           ),
         );
@@ -171,7 +171,7 @@ export const updateRelease = ({ commit, dispatch, state, getters }) => {
       .then(() => {
         // Create a new link for each link in the form
         return Promise.all(
-          apiJson.assets.links.map(l =>
+          apiJson.assets.links.map((l) =>
             api.createReleaseLink(state.projectId, state.release.tagName, l),
           ),
         );
@@ -179,7 +179,7 @@ export const updateRelease = ({ commit, dispatch, state, getters }) => {
       .then(() => {
         dispatch('receiveSaveReleaseSuccess', apiJsonToRelease(updatedRelease));
       })
-      .catch(error => {
+      .catch((error) => {
         commit(types.RECEIVE_SAVE_RELEASE_ERROR, error);
         createFlash(s__('Release|Something went wrong while saving the release details'));
       })
diff --git a/app/assets/javascripts/releases/stores/modules/detail/getters.js b/app/assets/javascripts/releases/stores/modules/detail/getters.js
index 809ed075c16..831037c8861 100644
--- a/app/assets/javascripts/releases/stores/modules/detail/getters.js
+++ b/app/assets/javascripts/releases/stores/modules/detail/getters.js
@@ -5,7 +5,7 @@ import { hasContent } from '~/lib/utils/text_utility';
  * @returns {Boolean} `true` if the app is editing an existing release.
  * `false` if the app is creating a new release.
  */
-export const isExistingRelease = state => {
+export const isExistingRelease = (state) => {
   return Boolean(state.tagName);
 };
 
@@ -15,19 +15,19 @@ export const isExistingRelease = state => {
  * empty (or whitespace-only) values for both `url` and `name`.
  * Otherwise, `false`.
  */
-const isEmptyReleaseLink = link => !hasContent(link.url) && !hasContent(link.name);
+const isEmptyReleaseLink = (link) => !hasContent(link.url) && !hasContent(link.name);
 
 /** Returns all release links that aren't empty */
-export const releaseLinksToCreate = state => {
+export const releaseLinksToCreate = (state) => {
   if (!state.release) {
     return [];
   }
 
-  return state.release.assets.links.filter(l => !isEmptyReleaseLink(l));
+  return state.release.assets.links.filter((l) => !isEmptyReleaseLink(l));
 };
 
 /** Returns all release links that should be deleted */
-export const releaseLinksToDelete = state => {
+export const releaseLinksToDelete = (state) => {
   if (!state.originalRelease) {
     return [];
   }
@@ -36,7 +36,7 @@ export const releaseLinksToDelete = state => {
 };
 
 /** Returns all validation errors on the release object */
-export const validationErrors = state => {
+export const validationErrors = (state) => {
   const errors = {
     assets: {
       links: {},
@@ -56,7 +56,7 @@ export const validationErrors = state => {
   // This is used for detecting duplicate URLs.
   const urlToLinksMap = new Map();
 
-  state.release.assets.links.forEach(link => {
+  state.release.assets.links.forEach((link) => {
     errors.assets.links[link.id] = {};
 
     // Only validate non-empty URLs
@@ -81,7 +81,7 @@ export const validationErrors = state => {
       // add a validation error for each link that shares this URL
       const duplicates = urlToLinksMap.get(normalizedUrl);
       duplicates.push(link);
-      duplicates.forEach(duplicateLink => {
+      duplicates.forEach((duplicateLink) => {
         errors.assets.links[duplicateLink.id].isDuplicate = true;
       });
     } else {
diff --git a/app/assets/javascripts/releases/stores/modules/detail/index.js b/app/assets/javascripts/releases/stores/modules/detail/index.js
index 40fdb04f2eb..e1b7e69accc 100644
--- a/app/assets/javascripts/releases/stores/modules/detail/index.js
+++ b/app/assets/javascripts/releases/stores/modules/detail/index.js
@@ -3,7 +3,7 @@ import * as getters from './getters';
 import mutations from './mutations';
 import createState from './state';
 
-export default initialState => ({
+export default (initialState) => ({
   namespaced: true,
   actions,
   getters,
diff --git a/app/assets/javascripts/releases/stores/modules/detail/mutations.js b/app/assets/javascripts/releases/stores/modules/detail/mutations.js
index 58a1958c5e2..8f4bfbc9b86 100644
--- a/app/assets/javascripts/releases/stores/modules/detail/mutations.js
+++ b/app/assets/javascripts/releases/stores/modules/detail/mutations.js
@@ -3,7 +3,7 @@ import * as types from './mutation_types';
 import { DEFAULT_ASSET_LINK_TYPE } from '../../../constants';
 
 const findReleaseLink = (release, id) => {
-  return release.assets.links.find(l => l.id === id);
+  return release.assets.links.find((l) => l.id === id);
 };
 
 export default {
@@ -93,6 +93,6 @@ export default {
   },
 
   [types.REMOVE_ASSET_LINK](state, linkIdToRemove) {
-    state.release.assets.links = state.release.assets.links.filter(l => l.id !== linkIdToRemove);
+    state.release.assets.links = state.release.assets.links.filter((l) => l.id !== linkIdToRemove);
   },
 };
diff --git a/app/assets/javascripts/releases/stores/modules/list/actions.js b/app/assets/javascripts/releases/stores/modules/list/actions.js
index a62f7c25464..4c4f6e19a93 100644
--- a/app/assets/javascripts/releases/stores/modules/list/actions.js
+++ b/app/assets/javascripts/releases/stores/modules/list/actions.js
@@ -68,7 +68,7 @@ export const fetchReleasesGraphQl = (
         ...paginationParams,
       },
     })
-    .then(response => {
+    .then((response) => {
       const { data, paginationInfo: graphQlPageInfo } = convertAllReleasesGraphQLResponse(response);
 
       commit(types.RECEIVE_RELEASES_SUCCESS, {
diff --git a/app/assets/javascripts/releases/stores/modules/list/index.js b/app/assets/javascripts/releases/stores/modules/list/index.js
index 0f97fa83ced..244f41b6609 100644
--- a/app/assets/javascripts/releases/stores/modules/list/index.js
+++ b/app/assets/javascripts/releases/stores/modules/list/index.js
@@ -2,7 +2,7 @@ import createState from './state';
 import * as actions from './actions';
 import mutations from './mutations';
 
-export default initialState => ({
+export default (initialState) => ({
   namespaced: true,
   actions,
   mutations,
diff --git a/app/assets/javascripts/releases/util.js b/app/assets/javascripts/releases/util.js
index 464f0594b8d..b24a226cf9c 100644
--- a/app/assets/javascripts/releases/util.js
+++ b/app/assets/javascripts/releases/util.js
@@ -17,7 +17,7 @@ export const releaseToApiJson = (release, createFrom = null) => {
 
   // Milestones may be either a list of milestone objects OR just a list
   // of milestone titles. The API requires only the titles be sent.
-  const milestones = (release.milestones || []).map(m => m.title || m);
+  const milestones = (release.milestones || []).map((m) => m.title || m);
 
   return convertObjectPropsToSnakeCase(
     {
@@ -37,7 +37,7 @@ export const releaseToApiJson = (release, createFrom = null) => {
  * into the structure this Vue application can work with.
  * @param {Object} json The JSON object received from the release API
  */
-export const apiJsonToRelease = json => {
+export const apiJsonToRelease = (json) => {
   const release = convertObjectPropsToCamelCase(json, { deep: true });
 
   release.milestones = release.milestones || [];
@@ -47,7 +47,7 @@ export const apiJsonToRelease = json => {
 
 export const gqClient = createGqClient({}, { fetchPolicy: fetchPolicies.NO_CACHE });
 
-const convertScalarProperties = graphQLRelease =>
+const convertScalarProperties = (graphQLRelease) =>
   pick(graphQLRelease, [
     'name',
     'tagName',
@@ -57,29 +57,29 @@ const convertScalarProperties = graphQLRelease =>
     'upcomingRelease',
   ]);
 
-const convertAssets = graphQLRelease => ({
+const convertAssets = (graphQLRelease) => ({
   assets: {
     count: graphQLRelease.assets.count,
     sources: [...graphQLRelease.assets.sources.nodes],
-    links: graphQLRelease.assets.links.nodes.map(l => ({
+    links: graphQLRelease.assets.links.nodes.map((l) => ({
       ...l,
       linkType: l.linkType?.toLowerCase(),
     })),
   },
 });
 
-const convertEvidences = graphQLRelease => ({
-  evidences: graphQLRelease.evidences.nodes.map(e => e),
+const convertEvidences = (graphQLRelease) => ({
+  evidences: graphQLRelease.evidences.nodes.map((e) => e),
 });
 
-const convertLinks = graphQLRelease => ({
+const convertLinks = (graphQLRelease) => ({
   _links: {
     ...graphQLRelease.links,
     self: graphQLRelease.links?.selfUrl,
   },
 });
 
-const convertCommit = graphQLRelease => {
+const convertCommit = (graphQLRelease) => {
   if (!graphQLRelease.commit) {
     return {};
   }
@@ -93,10 +93,10 @@ const convertCommit = graphQLRelease => {
   };
 };
 
-const convertAuthor = graphQLRelease => ({ author: graphQLRelease.author });
+const convertAuthor = (graphQLRelease) => ({ author: graphQLRelease.author });
 
-const convertMilestones = graphQLRelease => ({
-  milestones: graphQLRelease.milestones.nodes.map(m => ({
+const convertMilestones = (graphQLRelease) => ({
+  milestones: graphQLRelease.milestones.nodes.map((m) => ({
     ...m,
     webUrl: m.webPath,
     webPath: undefined,
@@ -115,7 +115,7 @@ const convertMilestones = graphQLRelease => ({
  *
  * @param graphQLRelease The release object returned from a GraphQL query
  */
-export const convertGraphQLRelease = graphQLRelease => ({
+export const convertGraphQLRelease = (graphQLRelease) => ({
   ...convertScalarProperties(graphQLRelease),
   ...convertAssets(graphQLRelease),
   ...convertEvidences(graphQLRelease),
@@ -134,7 +134,7 @@ export const convertGraphQLRelease = graphQLRelease => ({
  *
  * @param response The response received from the GraphQL endpoint
  */
-export const convertAllReleasesGraphQLResponse = response => {
+export const convertAllReleasesGraphQLResponse = (response) => {
   const releases = response.data.project.releases.nodes.map(convertGraphQLRelease);
 
   const paginationInfo = {
@@ -153,7 +153,7 @@ export const convertAllReleasesGraphQLResponse = response => {
  *
  * @param response The response received from the GraphQL endpoint
  */
-export const convertOneReleaseGraphQLResponse = response => {
+export const convertOneReleaseGraphQLResponse = (response) => {
   const release = convertGraphQLRelease(response.data.project.release);
 
   return { data: release };
diff --git a/app/assets/javascripts/reports/accessibility_report/store/getters.js b/app/assets/javascripts/reports/accessibility_report/store/getters.js
index 312b333a771..8f8eec11c7f 100644
--- a/app/assets/javascripts/reports/accessibility_report/store/getters.js
+++ b/app/assets/javascripts/reports/accessibility_report/store/getters.js
@@ -1,7 +1,7 @@
 import { LOADING, ERROR, SUCCESS, STATUS_FAILED } from '../../constants';
 import { s__, n__ } from '~/locale';
 
-export const groupedSummaryText = state => {
+export const groupedSummaryText = (state) => {
   if (state.isLoading) {
     return s__('Reports|Accessibility scanning results are being parsed');
   }
@@ -22,7 +22,7 @@ export const groupedSummaryText = state => {
   );
 };
 
-export const summaryStatus = state => {
+export const summaryStatus = (state) => {
   if (state.isLoading) {
     return LOADING;
   }
@@ -34,12 +34,12 @@ export const summaryStatus = state => {
   return SUCCESS;
 };
 
-export const shouldRenderIssuesList = state =>
-  Object.values(state.report).some(x => Array.isArray(x) && x.length > 0);
+export const shouldRenderIssuesList = (state) =>
+  Object.values(state.report).some((x) => Array.isArray(x) && x.length > 0);
 
 // We could just map state, but we're going to iterate in the future
 // to add notes and warnings to these issue lists, so I'm going to
 // keep these as getters
-export const unresolvedIssues = state => state.report.existing_errors;
-export const resolvedIssues = state => state.report.resolved_errors;
-export const newIssues = state => state.report.new_errors;
+export const unresolvedIssues = (state) => state.report.existing_errors;
+export const resolvedIssues = (state) => state.report.resolved_errors;
+export const newIssues = (state) => state.report.new_errors;
diff --git a/app/assets/javascripts/reports/accessibility_report/store/index.js b/app/assets/javascripts/reports/accessibility_report/store/index.js
index 9fa2c589324..5bfcd69edec 100644
--- a/app/assets/javascripts/reports/accessibility_report/store/index.js
+++ b/app/assets/javascripts/reports/accessibility_report/store/index.js
@@ -7,11 +7,11 @@ import state from './state';
 
 Vue.use(Vuex);
 
-export const getStoreConfig = initialState => ({
+export const getStoreConfig = (initialState) => ({
   actions,
   getters,
   mutations,
   state: state(initialState),
 });
 
-export default initialState => new Vuex.Store(getStoreConfig(initialState));
+export default (initialState) => new Vuex.Store(getStoreConfig(initialState));
diff --git a/app/assets/javascripts/reports/codequality_report/store/actions.js b/app/assets/javascripts/reports/codequality_report/store/actions.js
index bf84d27b5ea..e5fb5caca2e 100644
--- a/app/assets/javascripts/reports/codequality_report/store/actions.js
+++ b/app/assets/javascripts/reports/codequality_report/store/actions.js
@@ -11,13 +11,13 @@ export const fetchReports = ({ state, dispatch, commit }) => {
     return dispatch('receiveReportsError');
   }
   return Promise.all([axios.get(state.headPath), axios.get(state.basePath)])
-    .then(results =>
+    .then((results) =>
       doCodeClimateComparison(
         parseCodeclimateMetrics(results[0].data, state.headBlobPath),
         parseCodeclimateMetrics(results[1].data, state.baseBlobPath),
       ),
     )
-    .then(data => dispatch('receiveReportsSuccess', data))
+    .then((data) => dispatch('receiveReportsSuccess', data))
     .catch(() => dispatch('receiveReportsError'));
 };
 
diff --git a/app/assets/javascripts/reports/codequality_report/store/getters.js b/app/assets/javascripts/reports/codequality_report/store/getters.js
index d7c31bcf459..e017bab976c 100644
--- a/app/assets/javascripts/reports/codequality_report/store/getters.js
+++ b/app/assets/javascripts/reports/codequality_report/store/getters.js
@@ -2,10 +2,10 @@ import { LOADING, ERROR, SUCCESS } from '../../constants';
 import { sprintf, __, s__, n__ } from '~/locale';
 import { spriteIcon } from '~/lib/utils/common_utils';
 
-export const hasCodequalityIssues = state =>
+export const hasCodequalityIssues = (state) =>
   Boolean(state.newIssues?.length || state.resolvedIssues?.length);
 
-export const codequalityStatus = state => {
+export const codequalityStatus = (state) => {
   if (state.isLoading) {
     return LOADING;
   }
@@ -16,7 +16,7 @@ export const codequalityStatus = state => {
   return SUCCESS;
 };
 
-export const codequalityText = state => {
+export const codequalityText = (state) => {
   const { newIssues, resolvedIssues } = state;
   const text = [];
 
@@ -41,7 +41,7 @@ export const codequalityText = state => {
   return text.join('');
 };
 
-export const codequalityPopover = state => {
+export const codequalityPopover = (state) => {
   if (state.headPath && !state.basePath) {
     return {
       title: s__('ciReport|Base pipeline codequality artifact not found'),
diff --git a/app/assets/javascripts/reports/codequality_report/store/index.js b/app/assets/javascripts/reports/codequality_report/store/index.js
index 9fa2c589324..5bfcd69edec 100644
--- a/app/assets/javascripts/reports/codequality_report/store/index.js
+++ b/app/assets/javascripts/reports/codequality_report/store/index.js
@@ -7,11 +7,11 @@ import state from './state';
 
 Vue.use(Vuex);
 
-export const getStoreConfig = initialState => ({
+export const getStoreConfig = (initialState) => ({
   actions,
   getters,
   mutations,
   state: state(initialState),
 });
 
-export default initialState => new Vuex.Store(getStoreConfig(initialState));
+export default (initialState) => new Vuex.Store(getStoreConfig(initialState));
diff --git a/app/assets/javascripts/reports/codequality_report/store/utils/codequality_comparison.js b/app/assets/javascripts/reports/codequality_report/store/utils/codequality_comparison.js
index eba9e340c4e..fd775f52f7d 100644
--- a/app/assets/javascripts/reports/codequality_report/store/utils/codequality_comparison.js
+++ b/app/assets/javascripts/reports/codequality_report/store/utils/codequality_comparison.js
@@ -1,7 +1,7 @@
 import CodeQualityComparisonWorker from '../../workers/codequality_comparison_worker';
 
 export const parseCodeclimateMetrics = (issues = [], path = '') => {
-  return issues.map(issue => {
+  return issues.map((issue) => {
     const parsedIssue = {
       ...issue,
       name: issue.description,
diff --git a/app/assets/javascripts/reports/codequality_report/workers/codequality_comparison_worker.js b/app/assets/javascripts/reports/codequality_report/workers/codequality_comparison_worker.js
index fc55602f95c..ae389d266f8 100644
--- a/app/assets/javascripts/reports/codequality_report/workers/codequality_comparison_worker.js
+++ b/app/assets/javascripts/reports/codequality_report/workers/codequality_comparison_worker.js
@@ -3,7 +3,7 @@ import { differenceBy } from 'lodash';
 const KEY_TO_FILTER_BY = 'fingerprint';
 
 // eslint-disable-next-line no-restricted-globals
-self.addEventListener('message', e => {
+self.addEventListener('message', (e) => {
   const { data } = e;
 
   if (data === undefined) {
diff --git a/app/assets/javascripts/reports/components/grouped_issues_list.vue b/app/assets/javascripts/reports/components/grouped_issues_list.vue
index 97587636644..1826fbaddac 100644
--- a/app/assets/javascripts/reports/components/grouped_issues_list.vue
+++ b/app/assets/javascripts/reports/components/grouped_issues_list.vue
@@ -41,7 +41,7 @@ export default {
   computed: {
     groups() {
       return this.$options.groups
-        .map(group => ({
+        .map((group) => ({
           name: group,
           issues: this[`${group}Issues`],
           heading: this[`${group}Heading`],
diff --git a/app/assets/javascripts/reports/components/grouped_test_reports_app.vue b/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
index c13df60198b..6ac6dbfcb27 100644
--- a/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
+++ b/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
@@ -44,8 +44,8 @@ export default {
   computed: {
     ...mapState(['reports', 'isLoading', 'hasError', 'summary']),
     ...mapState({
-      modalTitle: state => state.modal.title || '',
-      modalData: state => state.modal.data || {},
+      modalTitle: (state) => state.modal.title || '',
+      modalData: (state) => state.modal.data || {},
     }),
     ...mapGetters(['summaryStatus']),
     groupedSummaryText() {
diff --git a/app/assets/javascripts/reports/components/issues_list.vue b/app/assets/javascripts/reports/components/issues_list.vue
index ee07efea3b0..16d5b14d3e9 100644
--- a/app/assets/javascripts/reports/components/issues_list.vue
+++ b/app/assets/javascripts/reports/components/issues_list.vue
@@ -3,7 +3,7 @@ import ReportItem from '~/reports/components/report_item.vue';
 import { STATUS_FAILED, STATUS_NEUTRAL, STATUS_SUCCESS } from '~/reports/constants';
 import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
 
-const wrapIssueWithState = (status, isNew = false) => issue => ({
+const wrapIssueWithState = (status, isNew = false) => (issue) => ({
   status: issue.status || status,
   isNew,
   issue,
diff --git a/app/assets/javascripts/reports/components/report_item.vue b/app/assets/javascripts/reports/components/report_item.vue
index 1b47d03aa01..df20d5c19ba 100644
--- a/app/assets/javascripts/reports/components/report_item.vue
+++ b/app/assets/javascripts/reports/components/report_item.vue
@@ -17,7 +17,7 @@ export default {
       type: String,
       required: false,
       default: '',
-      validator: value => value === '' || Object.values(componentNames).includes(value),
+      validator: (value) => value === '' || Object.values(componentNames).includes(value),
     },
     // failed || success
     status: {
diff --git a/app/assets/javascripts/reports/store/getters.js b/app/assets/javascripts/reports/store/getters.js
index d49e5760b3f..cc8c4cc446c 100644
--- a/app/assets/javascripts/reports/store/getters.js
+++ b/app/assets/javascripts/reports/store/getters.js
@@ -1,6 +1,6 @@
 import { LOADING, ERROR, SUCCESS, STATUS_FAILED } from '../constants';
 
-export const summaryStatus = state => {
+export const summaryStatus = (state) => {
   if (state.isLoading) {
     return LOADING;
   }
diff --git a/app/assets/javascripts/reports/store/mutations.js b/app/assets/javascripts/reports/store/mutations.js
index acaa98754b0..d0727e722bb 100644
--- a/app/assets/javascripts/reports/store/mutations.js
+++ b/app/assets/javascripts/reports/store/mutations.js
@@ -9,7 +9,7 @@ export default {
     state.isLoading = true;
   },
   [types.RECEIVE_REPORTS_SUCCESS](state, response) {
-    state.hasError = response.suites.some(suite => suite.status === 'error');
+    state.hasError = response.suites.some((suite) => suite.status === 'error');
 
     state.isLoading = false;
 
@@ -44,7 +44,7 @@ export default {
   [types.SET_ISSUE_MODAL_DATA](state, payload) {
     state.modal.title = payload.issue.name;
 
-    Object.keys(payload.issue).forEach(key => {
+    Object.keys(payload.issue).forEach((key) => {
       if (Object.prototype.hasOwnProperty.call(state.modal.data, key)) {
         state.modal.data[key] = {
           ...state.modal.data[key],
diff --git a/app/assets/javascripts/reports/store/utils.js b/app/assets/javascripts/reports/store/utils.js
index 2d32daee9d0..d89833032a0 100644
--- a/app/assets/javascripts/reports/store/utils.js
+++ b/app/assets/javascripts/reports/store/utils.js
@@ -7,7 +7,7 @@ import {
   ICON_NOTFOUND,
 } from '../constants';
 
-const textBuilder = results => {
+const textBuilder = (results) => {
   const { failed, errored, resolved, total } = results;
 
   const failedOrErrored = (failed || 0) + (errored || 0);
@@ -70,18 +70,18 @@ export const recentFailuresTextBuilder = (summary = {}) => {
   );
 };
 
-export const countRecentlyFailedTests = subject => {
+export const countRecentlyFailedTests = (subject) => {
   // handle either a single report or an array of reports
   const reports = !subject.length ? [subject] : subject;
 
   return reports
-    .map(report => {
+    .map((report) => {
       return (
         [report.new_failures, report.existing_failures, report.resolved_failures]
           // only count tests which have failed more than once
           .map(
-            failureArray =>
-              failureArray.filter(failure => failure.recent_failures?.count > 1).length,
+            (failureArray) =>
+              failureArray.filter((failure) => failure.recent_failures?.count > 1).length,
           )
           .reduce((total, count) => total + count, 0)
       );
@@ -89,7 +89,7 @@ export const countRecentlyFailedTests = subject => {
     .reduce((total, count) => total + count, 0);
 };
 
-export const statusIcon = status => {
+export const statusIcon = (status) => {
   if (status === STATUS_FAILED) {
     return ICON_WARNING;
   }
diff --git a/app/assets/javascripts/repository/components/breadcrumbs.vue b/app/assets/javascripts/repository/components/breadcrumbs.vue
index a1f1c77df2f..c9862572b16 100644
--- a/app/assets/javascripts/repository/components/breadcrumbs.vue
+++ b/app/assets/javascripts/repository/components/breadcrumbs.vue
@@ -40,7 +40,7 @@ export default {
           projectPath: this.projectPath,
         };
       },
-      update: data => data.project?.userPermissions,
+      update: (data) => data.project?.userPermissions,
       error(error) {
         throw error;
       },
@@ -105,7 +105,7 @@ export default {
     pathLinks() {
       return this.currentPath
         .split('/')
-        .filter(p => p !== '')
+        .filter((p) => p !== '')
         .reduce(
           (acc, name, i) => {
             const path = joinPaths(i > 0 ? acc[i].path : '', escapeFileUrl(name));
diff --git a/app/assets/javascripts/repository/components/directory_download_links.vue b/app/assets/javascripts/repository/components/directory_download_links.vue
index dffadade082..8c029fc9973 100644
--- a/app/assets/javascripts/repository/components/directory_download_links.vue
+++ b/app/assets/javascripts/repository/components/directory_download_links.vue
@@ -18,7 +18,7 @@ export default {
   },
   computed: {
     normalizedLinks() {
-      return this.links.map(link => ({
+      return this.links.map((link) => ({
         text: link.text,
         path: `${link.path}?path=${this.currentPath}`,
       }));
diff --git a/app/assets/javascripts/repository/components/last_commit.vue b/app/assets/javascripts/repository/components/last_commit.vue
index 2626bace363..14687fd61ba 100644
--- a/app/assets/javascripts/repository/components/last_commit.vue
+++ b/app/assets/javascripts/repository/components/last_commit.vue
@@ -39,7 +39,7 @@ export default {
           path: this.currentPath.replace(/^\//, ''),
         };
       },
-      update: data => {
+      update: (data) => {
         const pipelines = data.project?.repository?.tree?.lastCommit?.pipelines?.edges;
 
         return {
diff --git a/app/assets/javascripts/repository/components/table/parent_row.vue b/app/assets/javascripts/repository/components/table/parent_row.vue
index 3014088146a..fb0e505a16e 100644
--- a/app/assets/javascripts/repository/components/table/parent_row.vue
+++ b/app/assets/javascripts/repository/components/table/parent_row.vue
@@ -25,7 +25,7 @@ export default {
       const splitArray = this.path.split('/');
       splitArray.pop();
 
-      return splitArray.map(p => encodeURIComponent(p)).join('/');
+      return splitArray.map((p) => encodeURIComponent(p)).join('/');
     },
     parentRoute() {
       return { path: `/-/tree/${this.commitRef}/${this.parentPath}` };
diff --git a/app/assets/javascripts/repository/components/tree_content.vue b/app/assets/javascripts/repository/components/tree_content.vue
index b42f88631b5..7fe6863d006 100644
--- a/app/assets/javascripts/repository/components/tree_content.vue
+++ b/app/assets/javascripts/repository/components/tree_content.vue
@@ -113,7 +113,7 @@ export default {
             }
           }
         })
-        .catch(error => {
+        .catch((error) => {
           createFlash(__('An error occurred while fetching folder content.'));
           throw error;
         });
diff --git a/app/assets/javascripts/repository/graphql.js b/app/assets/javascripts/repository/graphql.js
index 8dd18027945..dbe129859bc 100644
--- a/app/assets/javascripts/repository/graphql.js
+++ b/app/assets/javascripts/repository/graphql.js
@@ -18,7 +18,7 @@ const defaultClient = createDefaultClient(
   {
     Query: {
       commit(_, { path, fileName, type }) {
-        return new Promise(resolve => {
+        return new Promise((resolve) => {
           fetchLogsTree(defaultClient, path, '0', {
             resolve,
             entry: {
@@ -38,7 +38,7 @@ const defaultClient = createDefaultClient(
   {
     cacheConfig: {
       fragmentMatcher,
-      dataIdFromObject: obj => {
+      dataIdFromObject: (obj) => {
         /* eslint-disable @gitlab/require-i18n-strings */
         // eslint-disable-next-line no-underscore-dangle
         switch (obj.__typename) {
diff --git a/app/assets/javascripts/repository/router.js b/app/assets/javascripts/repository/router.js
index 38a596e229e..e2924454239 100644
--- a/app/assets/javascripts/repository/router.js
+++ b/app/assets/javascripts/repository/router.js
@@ -10,7 +10,7 @@ Vue.use(VueRouter);
 export default function createRouter(base, baseRef) {
   const treePathRoute = {
     component: TreePage,
-    props: route => ({
+    props: (route) => ({
       path: route.params.path?.replace(/^\//, '') || '/',
     }),
   };
diff --git a/app/assets/javascripts/repository/utils/commit.js b/app/assets/javascripts/repository/utils/commit.js
index 0704ac1627f..a67252ec004 100644
--- a/app/assets/javascripts/repository/utils/commit.js
+++ b/app/assets/javascripts/repository/utils/commit.js
@@ -1,5 +1,5 @@
 export function normalizeData(data, path, extra = () => {}) {
-  return data.map(d => ({
+  return data.map((d) => ({
     sha: d.commit.id,
     message: d.commit.message,
     titleHtml: d.commit_title_html,
diff --git a/app/assets/javascripts/repository/utils/readme.js b/app/assets/javascripts/repository/utils/readme.js
index 50692779b1a..c666cd95038 100644
--- a/app/assets/javascripts/repository/utils/readme.js
+++ b/app/assets/javascripts/repository/utils/readme.js
@@ -18,14 +18,14 @@ const MARKUP_EXTENSIONS = [
   'wiki',
 ];
 
-const isRichReadme = file => {
+const isRichReadme = (file) => {
   const re = new RegExp(`^(${FILENAMES.join('|')})\\.(${MARKUP_EXTENSIONS.join('|')})$`, 'i');
   return re.test(file.name);
 };
 
-const isPlainReadme = file => {
+const isPlainReadme = (file) => {
   const re = new RegExp(`^(${FILENAMES.join('|')})(\\.txt)?$`, 'i');
   return re.test(file.name);
 };
 
-export const readmeFile = blobs => blobs.find(isRichReadme) || blobs.find(isPlainReadme);
+export const readmeFile = (blobs) => blobs.find(isRichReadme) || blobs.find(isPlainReadme);
diff --git a/app/assets/javascripts/search/highlight_blob_search_result.js b/app/assets/javascripts/search/highlight_blob_search_result.js
index e17c87735b4..3c3ac3582d0 100644
--- a/app/assets/javascripts/search/highlight_blob_search_result.js
+++ b/app/assets/javascripts/search/highlight_blob_search_result.js
@@ -4,9 +4,9 @@ export default () => {
   const searchTerm = contentBody.querySelector('.js-search-input').value.toLowerCase();
   const blobs = contentBody.querySelectorAll('.blob-result');
 
-  blobs.forEach(blob => {
+  blobs.forEach((blob) => {
     const lines = blob.querySelectorAll('.line');
-    lines.forEach(line => {
+    lines.forEach((line) => {
       if (line.textContent.toLowerCase().includes(searchTerm)) {
         line.classList.add(highlightLineClass);
       }
diff --git a/app/assets/javascripts/search/sidebar/index.js b/app/assets/javascripts/search/sidebar/index.js
index 6419e8ac2c6..1414adcac27 100644
--- a/app/assets/javascripts/search/sidebar/index.js
+++ b/app/assets/javascripts/search/sidebar/index.js
@@ -4,7 +4,7 @@ import GlobalSearchSidebar from './components/app.vue';
 
 Vue.use(Translate);
 
-export const initSidebar = store => {
+export const initSidebar = (store) => {
   const el = document.getElementById('js-search-sidebar');
 
   if (!el) return false;
diff --git a/app/assets/javascripts/search/store/actions.js b/app/assets/javascripts/search/store/actions.js
index 082beb5930d..bdfe966d990 100644
--- a/app/assets/javascripts/search/store/actions.js
+++ b/app/assets/javascripts/search/store/actions.js
@@ -7,7 +7,7 @@ import * as types from './mutation_types';
 export const fetchGroups = ({ commit }, search) => {
   commit(types.REQUEST_GROUPS);
   Api.groups(search)
-    .then(data => {
+    .then((data) => {
       commit(types.RECEIVE_GROUPS_SUCCESS, data);
     })
     .catch(() => {
@@ -19,7 +19,7 @@ export const fetchGroups = ({ commit }, search) => {
 export const fetchProjects = ({ commit, state }, search) => {
   commit(types.REQUEST_PROJECTS);
   const groupId = state.query?.group_id;
-  const callback = data => {
+  const callback = (data) => {
     if (data) {
       commit(types.RECEIVE_PROJECTS_SUCCESS, data);
     } else {
diff --git a/app/assets/javascripts/search/store/index.js b/app/assets/javascripts/search/store/index.js
index e0a7e488f9f..1923c8b96ab 100644
--- a/app/assets/javascripts/search/store/index.js
+++ b/app/assets/javascripts/search/store/index.js
@@ -12,5 +12,5 @@ export const getStoreConfig = ({ query }) => ({
   state: createState({ query }),
 });
 
-const createStore = config => new Vuex.Store(getStoreConfig(config));
+const createStore = (config) => new Vuex.Store(getStoreConfig(config));
 export default createStore;
diff --git a/app/assets/javascripts/search/topbar/index.js b/app/assets/javascripts/search/topbar/index.js
index 024544148a0..f0308109b32 100644
--- a/app/assets/javascripts/search/topbar/index.js
+++ b/app/assets/javascripts/search/topbar/index.js
@@ -40,5 +40,5 @@ const searchableDropdowns = [
   },
 ];
 
-export const initTopbar = store =>
-  searchableDropdowns.map(dropdown => mountSearchableDropdown(store, dropdown));
+export const initTopbar = (store) =>
+  searchableDropdowns.map((dropdown) => mountSearchableDropdown(store, dropdown));
diff --git a/app/assets/javascripts/search_autocomplete.js b/app/assets/javascripts/search_autocomplete.js
index 32559242225..b8a5836e2d4 100644
--- a/app/assets/javascripts/search_autocomplete.js
+++ b/app/assets/javascripts/search_autocomplete.js
@@ -172,7 +172,7 @@ export class SearchAutocomplete {
           term,
         },
       })
-      .then(response => {
+      .then((response) => {
         const options = this.scopedSearchOptions(term);
 
         // List results
@@ -345,7 +345,7 @@ export class SearchAutocomplete {
     this.clearInput.on('click', this.onClearInputClick);
     this.dropdownContent.on('scroll', throttle(this.setScrollFade, 250));
 
-    this.searchInput.on('click', e => {
+    this.searchInput.on('click', (e) => {
       e.stopPropagation();
     });
   }
diff --git a/app/assets/javascripts/self_monitor/store/actions.js b/app/assets/javascripts/self_monitor/store/actions.js
index 10deec6921c..99731309a62 100644
--- a/app/assets/javascripts/self_monitor/store/actions.js
+++ b/app/assets/javascripts/self_monitor/store/actions.js
@@ -9,7 +9,7 @@ const TWO_MINUTES = 120000;
 function backOffRequest(makeRequestCallback) {
   return backOff((next, stop) => {
     makeRequestCallback()
-      .then(resp => {
+      .then((resp) => {
         if (resp.status === statusCodes.ACCEPTED) {
           next();
         } else {
@@ -30,24 +30,24 @@ export const requestCreateProject = ({ dispatch, state, commit }) => {
   commit(types.SET_LOADING, true);
   axios
     .post(state.createProjectEndpoint)
-    .then(resp => {
+    .then((resp) => {
       if (resp.status === statusCodes.ACCEPTED) {
         dispatch('requestCreateProjectStatus', resp.data.job_id);
       }
     })
-    .catch(error => {
+    .catch((error) => {
       dispatch('requestCreateProjectError', error);
     });
 };
 
 export const requestCreateProjectStatus = ({ dispatch, state }, jobId) => {
   backOffRequest(() => axios.get(state.createProjectStatusEndpoint, { params: { job_id: jobId } }))
-    .then(resp => {
+    .then((resp) => {
       if (resp.status === statusCodes.OK) {
         dispatch('requestCreateProjectSuccess', resp.data);
       }
     })
-    .catch(error => {
+    .catch((error) => {
       dispatch('requestCreateProjectError', error);
     });
 };
@@ -82,24 +82,24 @@ export const requestDeleteProject = ({ dispatch, state, commit }) => {
   commit(types.SET_LOADING, true);
   axios
     .delete(state.deleteProjectEndpoint)
-    .then(resp => {
+    .then((resp) => {
       if (resp.status === statusCodes.ACCEPTED) {
         dispatch('requestDeleteProjectStatus', resp.data.job_id);
       }
     })
-    .catch(error => {
+    .catch((error) => {
       dispatch('requestDeleteProjectError', error);
     });
 };
 
 export const requestDeleteProjectStatus = ({ dispatch, state }, jobId) => {
   backOffRequest(() => axios.get(state.deleteProjectStatusEndpoint, { params: { job_id: jobId } }))
-    .then(resp => {
+    .then((resp) => {
       if (resp.status === statusCodes.OK) {
         dispatch('requestDeleteProjectSuccess', resp.data);
       }
     })
-    .catch(error => {
+    .catch((error) => {
       dispatch('requestDeleteProjectError', error);
     });
 };
diff --git a/app/assets/javascripts/self_monitor/store/index.js b/app/assets/javascripts/self_monitor/store/index.js
index a222e9c87b8..1144fff759a 100644
--- a/app/assets/javascripts/self_monitor/store/index.js
+++ b/app/assets/javascripts/self_monitor/store/index.js
@@ -6,7 +6,7 @@ import mutations from './mutations';
 
 Vue.use(Vuex);
 
-export const createStore = initialState =>
+export const createStore = (initialState) =>
   new Vuex.Store({
     modules: {
       selfMonitoring: {
diff --git a/app/assets/javascripts/sentry_error_stack_trace/index.js b/app/assets/javascripts/sentry_error_stack_trace/index.js
index 9b24ddc335d..80fa0988f0a 100644
--- a/app/assets/javascripts/sentry_error_stack_trace/index.js
+++ b/app/assets/javascripts/sentry_error_stack_trace/index.js
@@ -13,7 +13,7 @@ export default function initSentryErrorStacktrace() {
         SentryErrorStackTrace,
       },
       store,
-      render: createElement =>
+      render: (createElement) =>
         createElement('sentry-error-stack-trace', {
           props: { issueStackTracePath },
         }),
diff --git a/app/assets/javascripts/serverless/components/area.vue b/app/assets/javascripts/serverless/components/area.vue
index 71f2e948917..056b342cf39 100644
--- a/app/assets/javascripts/serverless/components/area.vue
+++ b/app/assets/javascripts/serverless/components/area.vue
@@ -39,13 +39,13 @@ export default {
       }, {});
     },
     extractTimeData() {
-      return this.chartData.requests.map(data => data.time);
+      return this.chartData.requests.map((data) => data.time);
     },
     generateSeries() {
       return {
         name: __('Invocations'),
         type: 'line',
-        data: this.chartData.requests.map(data => [data.time, data.value]),
+        data: this.chartData.requests.map((data) => [data.time, data.value]),
         symbolSize: 0,
       };
     },
@@ -69,7 +69,7 @@ export default {
           name: 'time',
           type: 'time',
           axisLabel: {
-            formatter: date => dateFormat(date, 'h:MM TT'),
+            formatter: (date) => dateFormat(date, 'h:MM TT'),
           },
           data: this.extractTimeData,
           nameTextStyle: {
@@ -90,7 +90,7 @@ export default {
       };
     },
     xAxisLabel() {
-      return this.graphData.queries.map(query => query.label).join(', ');
+      return this.graphData.queries.map((query) => query.label).join(', ');
     },
     yAxisLabel() {
       const [query] = this.graphData.queries;
diff --git a/app/assets/javascripts/serverless/store/actions.js b/app/assets/javascripts/serverless/store/actions.js
index b9d57138efa..acd7020f70f 100644
--- a/app/assets/javascripts/serverless/store/actions.js
+++ b/app/assets/javascripts/serverless/store/actions.js
@@ -30,7 +30,7 @@ export const receiveMetricsError = ({ commit }, error) =>
 export const fetchFunctions = ({ dispatch }, { functionsPath }) => {
   let retryCount = 0;
 
-  const functionsPartiallyFetched = data => {
+  const functionsPartiallyFetched = (data) => {
     if (data.functions !== null && data.functions.length) {
       dispatch('receiveFunctionsPartial', data);
     }
@@ -41,7 +41,7 @@ export const fetchFunctions = ({ dispatch }, { functionsPath }) => {
   backOff((next, stop) => {
     axios
       .get(functionsPath)
-      .then(response => {
+      .then((response) => {
         if (response.data.knative_installed === CHECKING_INSTALLED) {
           retryCount += 1;
           if (retryCount < MAX_REQUESTS) {
@@ -56,7 +56,7 @@ export const fetchFunctions = ({ dispatch }, { functionsPath }) => {
       })
       .catch(stop);
   })
-    .then(data => {
+    .then((data) => {
       if (data === TIMEOUT) {
         dispatch('receiveFunctionsTimeout');
         createFlash(__('Loading functions timed out. Please reload the page to try again.'));
@@ -66,7 +66,7 @@ export const fetchFunctions = ({ dispatch }, { functionsPath }) => {
         dispatch('receiveFunctionsNoDataSuccess', data);
       }
     })
-    .catch(error => {
+    .catch((error) => {
       dispatch('receiveFunctionsError', error);
       createFlash(error);
     });
@@ -83,7 +83,7 @@ export const fetchMetrics = ({ dispatch }, { metricsPath, hasPrometheus }) => {
   backOff((next, stop) => {
     axios
       .get(metricsPath)
-      .then(response => {
+      .then((response) => {
         if (response.status === statusCodes.NO_CONTENT) {
           retryCount += 1;
           if (retryCount < MAX_REQUESTS) {
@@ -98,15 +98,15 @@ export const fetchMetrics = ({ dispatch }, { metricsPath, hasPrometheus }) => {
       })
       .catch(stop);
   })
-    .then(data => {
+    .then((data) => {
       if (data === null) {
         return;
       }
 
       const updatedMetric = data.metrics;
-      const queries = data.metrics.queries.map(query => ({
+      const queries = data.metrics.queries.map((query) => ({
         ...query,
-        result: query.result.map(result => ({
+        result: query.result.map((result) => ({
           ...result,
           values: result.values.map(([timestamp, value]) => ({
             time: new Date(timestamp * 1000).toISOString(),
@@ -118,7 +118,7 @@ export const fetchMetrics = ({ dispatch }, { metricsPath, hasPrometheus }) => {
       updatedMetric.queries = queries;
       dispatch('receiveMetricsSuccess', updatedMetric);
     })
-    .catch(error => {
+    .catch((error) => {
       dispatch('receiveMetricsError', error);
       createFlash(error);
     });
diff --git a/app/assets/javascripts/serverless/store/getters.js b/app/assets/javascripts/serverless/store/getters.js
index c9b1d22799a..da975c56e5d 100644
--- a/app/assets/javascripts/serverless/store/getters.js
+++ b/app/assets/javascripts/serverless/store/getters.js
@@ -1,7 +1,7 @@
 import { translate } from '../utils';
 
-export const hasPrometheusMissingData = state => state.hasPrometheus && !state.hasPrometheusData;
+export const hasPrometheusMissingData = (state) => state.hasPrometheus && !state.hasPrometheusData;
 
 // Convert the function list into a k/v grouping based on the environment scope
 
-export const getFunctions = state => translate(state.functions);
+export const getFunctions = (state) => translate(state.functions);
diff --git a/app/assets/javascripts/serverless/utils.js b/app/assets/javascripts/serverless/utils.js
index 1bf03ea8d42..e218a9aa3fd 100644
--- a/app/assets/javascripts/serverless/utils.js
+++ b/app/assets/javascripts/serverless/utils.js
@@ -1,16 +1,16 @@
 // Validate that the object coming in has valid query details and results
-export const validateGraphData = data =>
+export const validateGraphData = (data) =>
   data.queries &&
   Array.isArray(data.queries) &&
-  data.queries.filter(query => {
+  data.queries.filter((query) => {
     if (Array.isArray(query.result)) {
-      return query.result.filter(res => Array.isArray(res.values)).length === query.result.length;
+      return query.result.filter((res) => Array.isArray(res.values)).length === query.result.length;
     }
 
     return false;
   }).length === data.queries.length;
 
-export const translate = functions =>
+export const translate = (functions) =>
   functions.reduce(
     (acc, func) =>
       Object.assign(acc, {
diff --git a/app/assets/javascripts/set_status_modal/utils.js b/app/assets/javascripts/set_status_modal/utils.js
index dccb66be11f..faee4012ef4 100644
--- a/app/assets/javascripts/set_status_modal/utils.js
+++ b/app/assets/javascripts/set_status_modal/utils.js
@@ -3,7 +3,7 @@ export const AVAILABILITY_STATUS = {
   NOT_SET: 'not_set',
 };
 
-export const isUserBusy = status => status === AVAILABILITY_STATUS.BUSY;
+export const isUserBusy = (status) => status === AVAILABILITY_STATUS.BUSY;
 
-export const isValidAvailibility = availability =>
+export const isValidAvailibility = (availability) =>
   availability.length ? Object.values(AVAILABILITY_STATUS).includes(availability) : true;
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignees.vue b/app/assets/javascripts/sidebar/components/assignees/assignees.vue
index 3baf4bf0742..84e7110e2b2 100644
--- a/app/assets/javascripts/sidebar/components/assignees/assignees.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/assignees.vue
@@ -34,8 +34,8 @@ export default {
       return !this.users.length;
     },
     sortedAssigness() {
-      const canMergeUsers = this.users.filter(user => user.can_merge);
-      const canNotMergeUsers = this.users.filter(user => !user.can_merge);
+      const canMergeUsers = this.users.filter((user) => user.can_merge);
+      const canNotMergeUsers = this.users.filter((user) => !user.can_merge);
 
       return [...canMergeUsers, ...canNotMergeUsers];
     },
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignees_realtime.vue b/app/assets/javascripts/sidebar/components/assignees/assignees_realtime.vue
index bf0c52b2341..0eee287e0c2 100644
--- a/app/assets/javascripts/sidebar/components/assignees/assignees_realtime.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/assignees_realtime.vue
@@ -59,7 +59,7 @@ export default {
     handleFetchResult({ data }) {
       const { nodes } = data.project.issue.assignees;
 
-      const assignees = nodes.map(n => ({
+      const assignees = nodes.map((n) => ({
         ...n,
         avatar_url: n.avatarUrl,
         id: getIdFromGraphQLId(n.id),
diff --git a/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue b/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue
index 362ca4ab917..b713b0f960c 100644
--- a/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue
@@ -39,7 +39,7 @@ export default {
       return this.users.length > 2;
     },
     allAssigneesCanMerge() {
-      return this.users.every(user => user.can_merge);
+      return this.users.every((user) => user.can_merge);
     },
     sidebarAvatarCounter() {
       if (this.users.length > DEFAULT_MAX_COUNTER) {
@@ -58,7 +58,7 @@ export default {
         return '';
       }
 
-      const mergeLength = this.users.filter(u => u.can_merge).length;
+      const mergeLength = this.users.filter((u) => u.can_merge).length;
 
       if (mergeLength === this.users.length) {
         return '';
@@ -74,7 +74,7 @@ export default {
     tooltipTitle() {
       const maxRender = Math.min(DEFAULT_RENDER_COUNT, this.users.length);
       const renderUsers = this.users.slice(0, maxRender);
-      const names = renderUsers.map(u => u.name);
+      const names = renderUsers.map((u) => u.name);
 
       if (!this.users.length) {
         return __('Assignee(s)');
diff --git a/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue b/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
index 46d51138ccf..d210f9efcb3 100644
--- a/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
+++ b/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
@@ -48,7 +48,7 @@ export default {
         .then(() => {
           eventHub.$emit('updateIssuableConfidentiality', confidential);
         })
-        .catch(err => {
+        .catch((err) => {
           Flash(
             err || __('Something went wrong trying to change the confidentiality of this issue'),
           );
diff --git a/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue b/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue
index 10b16a44261..9554a98121f 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue
+++ b/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue
@@ -33,7 +33,7 @@ export default {
       return this.users.length > 2;
     },
     allReviewersCanMerge() {
-      return this.users.every(user => user.can_merge);
+      return this.users.every((user) => user.can_merge);
     },
     sidebarAvatarCounter() {
       if (this.users.length > DEFAULT_MAX_COUNTER) {
@@ -48,7 +48,7 @@ export default {
       return this.users.slice(0, collapsedLength);
     },
     tooltipTitleMergeStatus() {
-      const mergeLength = this.users.filter(u => u.can_merge).length;
+      const mergeLength = this.users.filter((u) => u.can_merge).length;
 
       if (mergeLength === this.users.length) {
         return '';
@@ -64,7 +64,7 @@ export default {
     tooltipTitle() {
       const maxRender = Math.min(DEFAULT_RENDER_COUNT, this.users.length);
       const renderUsers = this.users.slice(0, maxRender);
-      const names = renderUsers.map(u => u.name);
+      const names = renderUsers.map((u) => u.name);
 
       if (!this.users.length) {
         return __('Reviewer(s)');
diff --git a/app/assets/javascripts/sidebar/components/reviewers/reviewers.vue b/app/assets/javascripts/sidebar/components/reviewers/reviewers.vue
index 6a3d88f6385..cd62fe5be0f 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/reviewers.vue
+++ b/app/assets/javascripts/sidebar/components/reviewers/reviewers.vue
@@ -36,8 +36,8 @@ export default {
       return !this.users.length;
     },
     sortedReviewers() {
-      const canMergeUsers = this.users.filter(user => user.can_merge);
-      const canNotMergeUsers = this.users.filter(user => !user.can_merge);
+      const canMergeUsers = this.users.filter((user) => user.can_merge);
+      const canNotMergeUsers = this.users.filter((user) => !user.can_merge);
 
       return [...canMergeUsers, ...canNotMergeUsers];
     },
diff --git a/app/assets/javascripts/sidebar/components/severity/sidebar_severity.vue b/app/assets/javascripts/sidebar/components/severity/sidebar_severity.vue
index 8f3610b912a..0cf11e83349 100644
--- a/app/assets/javascripts/sidebar/components/severity/sidebar_severity.vue
+++ b/app/assets/javascripts/sidebar/components/severity/sidebar_severity.vue
@@ -41,7 +41,7 @@ export default {
       type: String,
       required: false,
       default: ISSUABLE_TYPES.INCIDENT,
-      validator: value => {
+      validator: (value) => {
         // currently severity is supported only for incidents, but this list might be extended
         return [ISSUABLE_TYPES.INCIDENT].includes(value);
       },
@@ -67,7 +67,7 @@ export default {
       return this.isDropdownShowing ? 'show' : 'gl-display-none';
     },
     selectedItem() {
-      return this.severitiesList.find(severity => severity.value === this.severity);
+      return this.severitiesList.find((severity) => severity.value === this.severity);
     },
   },
   mounted() {
@@ -106,7 +106,7 @@ export default {
             projectPath: this.projectPath,
           },
         })
-        .then(resp => {
+        .then((resp) => {
           const {
             data: {
               issueSetSeverity: {
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.vue b/app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.vue
index 6bef5ed67a4..26e0a0da860 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.vue
@@ -27,7 +27,7 @@ export default {
     listenForQuickActions() {
       $(document).on('ajax:success', '.gfm-form', this.quickActionListened);
 
-      eventHub.$on('timeTrackingUpdated', data => {
+      eventHub.$on('timeTrackingUpdated', (data) => {
         this.quickActionListened({ detail: [data] });
       });
     },
diff --git a/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js b/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
index edeb1bba020..55847fc43f0 100644
--- a/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
+++ b/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
@@ -46,14 +46,14 @@ class SidebarMoveIssue {
             () => new window.Flash(__('An error occurred while fetching projects autocomplete.')),
           );
       },
-      renderRow: project => `
+      renderRow: (project) => `
         <li>
           <a href="#" class="js-move-issue-dropdown-item">
             ${escape(project.name_with_namespace)}
           </a>
         </li>
       `,
-      clicked: options => {
+      clicked: (options) => {
         const project = options.selectedObj;
         const selectedProjectId = options.isMarking ? project.id : 0;
         this.mediator.setMoveToProjectId(selectedProjectId);
diff --git a/app/assets/javascripts/sidebar/mount_milestone_sidebar.js b/app/assets/javascripts/sidebar/mount_milestone_sidebar.js
index 0f5f8f2b53b..4d9e99941d1 100644
--- a/app/assets/javascripts/sidebar/mount_milestone_sidebar.js
+++ b/app/assets/javascripts/sidebar/mount_milestone_sidebar.js
@@ -16,7 +16,7 @@ export default class SidebarMilestone {
       components: {
         timeTracker,
       },
-      render: createElement =>
+      render: (createElement) =>
         createElement('timeTracker', {
           props: {
             timeEstimate: parseInt(timeEstimate, 10),
diff --git a/app/assets/javascripts/sidebar/mount_sidebar.js b/app/assets/javascripts/sidebar/mount_sidebar.js
index 984cd8a3b1d..8b06dc874fc 100644
--- a/app/assets/javascripts/sidebar/mount_sidebar.js
+++ b/app/assets/javascripts/sidebar/mount_sidebar.js
@@ -40,7 +40,7 @@ function mountAssigneesComponent(mediator) {
     components: {
       SidebarAssignees,
     },
-    render: createElement =>
+    render: (createElement) =>
       createElement('sidebar-assignees', {
         props: {
           mediator,
@@ -70,7 +70,7 @@ function mountReviewersComponent(mediator) {
     components: {
       SidebarReviewers,
     },
-    render: createElement =>
+    render: (createElement) =>
       createElement('sidebar-reviewers', {
         props: {
           mediator,
@@ -105,7 +105,7 @@ export function mountSidebarLabels() {
       allowScopedLabels: parseBoolean(el.dataset.allowScopedLabels),
       initiallySelectedLabels: JSON.parse(el.dataset.selectedLabels),
     },
-    render: createElement => createElement(SidebarLabels),
+    render: (createElement) => createElement(SidebarLabels),
   });
 }
 
@@ -128,7 +128,7 @@ function mountConfidentialComponent(mediator) {
           components: {
             ConfidentialIssueSidebar,
           },
-          render: createElement =>
+          render: (createElement) =>
             createElement('confidential-issue-sidebar', {
               props: {
                 iid: String(iid),
@@ -163,20 +163,20 @@ function mountLockComponent() {
     );
   } else {
     importStore = import(/* webpackChunkName: 'mrNotesStore' */ '~/mr_notes/stores').then(
-      store => store.default,
+      (store) => store.default,
     );
   }
 
   importStore
     .then(
-      store =>
+      (store) =>
         new Vue({
           el,
           store,
           provide: {
             fullPath,
           },
-          render: createElement =>
+          render: (createElement) =>
             createElement(IssuableLockForm, {
               props: {
                 isEditable: initialData.is_editable,
@@ -200,7 +200,7 @@ function mountParticipantsComponent(mediator) {
     components: {
       sidebarParticipants,
     },
-    render: createElement =>
+    render: (createElement) =>
       createElement('sidebar-participants', {
         props: {
           mediator,
@@ -220,7 +220,7 @@ function mountSubscriptionsComponent(mediator) {
     components: {
       sidebarSubscriptions,
     },
-    render: createElement =>
+    render: (createElement) =>
       createElement('sidebar-subscriptions', {
         props: {
           mediator,
@@ -240,7 +240,7 @@ function mountTimeTrackingComponent() {
     components: {
       SidebarTimeTracking,
     },
-    render: createElement => createElement('sidebar-time-tracking', {}),
+    render: (createElement) => createElement('sidebar-time-tracking', {}),
   });
 }
 
@@ -262,7 +262,7 @@ function mountSeverityComponent() {
     components: {
       SidebarSeverity,
     },
-    render: createElement =>
+    render: (createElement) =>
       createElement('sidebar-severity', {
         props: {
           projectPath: fullPath,
diff --git a/app/assets/javascripts/sidebar/sidebar_mediator.js b/app/assets/javascripts/sidebar/sidebar_mediator.js
index 2146fb83b13..d143283653b 100644
--- a/app/assets/javascripts/sidebar/sidebar_mediator.js
+++ b/app/assets/javascripts/sidebar/sidebar_mediator.js
@@ -30,7 +30,7 @@ export default class SidebarMediator {
   }
 
   saveAssignees(field) {
-    const selected = this.store.assignees.map(u => u.id);
+    const selected = this.store.assignees.map((u) => u.id);
 
     // If there are no ids, that means we have to unassign (which is id = 0)
     // And it only accepts an array, hence [0]
@@ -41,7 +41,7 @@ export default class SidebarMediator {
   }
 
   saveReviewers(field) {
-    const selected = this.store.reviewers.map(u => u.id);
+    const selected = this.store.reviewers.map((u) => u.id);
 
     // If there are no ids, that means we have to unassign (which is id = 0)
     // And it only accepts an array, hence [0]
@@ -80,7 +80,7 @@ export default class SidebarMediator {
         this.store.setSubscribedState(!this.store.subscribed);
         this.store.setFetchingState('subscriptions', false);
       })
-      .catch(err => {
+      .catch((err) => {
         this.store.setFetchingState('subscriptions', false);
         throw err;
       });
diff --git a/app/assets/javascripts/sidebar/utils.js b/app/assets/javascripts/sidebar/utils.js
index 23730508b56..20cd4ce9d99 100644
--- a/app/assets/javascripts/sidebar/utils.js
+++ b/app/assets/javascripts/sidebar/utils.js
@@ -1 +1 @@
-export const toLabelGid = id => `gid://gitlab/Label/${id}`;
+export const toLabelGid = (id) => `gid://gitlab/Label/${id}`;
diff --git a/app/assets/javascripts/single_file_diff.js b/app/assets/javascripts/single_file_diff.js
index bd3f89050e6..192eb0784d4 100644
--- a/app/assets/javascripts/single_file_diff.js
+++ b/app/assets/javascripts/single_file_diff.js
@@ -39,7 +39,7 @@ export default class SingleFileDiff {
       this.$chevronDownIcon.removeClass('gl-display-none');
     }
 
-    $('.js-file-title, .click-to-expand', this.file).on('click', e => {
+    $('.js-file-title, .click-to-expand', this.file).on('click', (e) => {
       this.toggleDiff($(e.target));
     });
   }
diff --git a/app/assets/javascripts/smart_interval.js b/app/assets/javascripts/smart_interval.js
index 2a0ac2b25f1..15d04dadb15 100644
--- a/app/assets/javascripts/smart_interval.js
+++ b/app/assets/javascripts/smart_interval.js
@@ -119,7 +119,7 @@ export default class SmartInterval {
       .then(() => {
         this.isLoading = false;
       })
-      .catch(err => {
+      .catch((err) => {
         this.isLoading = false;
         throw err;
       });
diff --git a/app/assets/javascripts/snippet/collapsible_input.js b/app/assets/javascripts/snippet/collapsible_input.js
index e7225162f86..75465d96043 100644
--- a/app/assets/javascripts/snippet/collapsible_input.js
+++ b/app/assets/javascripts/snippet/collapsible_input.js
@@ -1,7 +1,7 @@
-const hide = el => el.classList.add('d-none');
-const show = el => el.classList.remove('d-none');
+const hide = (el) => el.classList.add('d-none');
+const show = (el) => el.classList.remove('d-none');
 
-const setupCollapsibleInput = el => {
+const setupCollapsibleInput = (el) => {
   const collapsedEl = el.querySelector('.js-collapsed');
   const expandedEl = el.querySelector('.js-expanded');
   const collapsedInputEl = collapsedEl.querySelector('textarea,input,select');
@@ -21,7 +21,7 @@ const setupCollapsibleInput = el => {
   // NOTE:
   // We add focus listener to all form inputs so that we can collapse
   // when something is focused that's not the expanded input.
-  formEl.addEventListener('focusin', e => {
+  formEl.addEventListener('focusin', (e) => {
     if (e.target === collapsedInputEl) {
       expand();
       expandedInputEl.focus();
diff --git a/app/assets/javascripts/snippets/components/edit.vue b/app/assets/javascripts/snippets/components/edit.vue
index 08683f25651..ffb5e242973 100644
--- a/app/assets/javascripts/snippets/components/edit.vue
+++ b/app/assets/javascripts/snippets/components/edit.vue
@@ -73,7 +73,7 @@ export default {
       return this.actions.length > 0;
     },
     hasValidBlobs() {
-      return this.actions.every(x => x.content);
+      return this.actions.every((x) => x.content);
     },
     updatePrevented() {
       return this.snippet.title === '' || !this.hasValidBlobs || this.isUpdating;
@@ -130,7 +130,7 @@ export default {
     },
     getAttachedFiles() {
       const fileInputs = Array.from(this.$el.querySelectorAll('[name="files[]"]'));
-      return fileInputs.map(node => node.value);
+      return fileInputs.map((node) => node.value);
     },
     createMutation() {
       return {
@@ -166,7 +166,7 @@ export default {
             redirectTo(baseObj.snippet.webUrl);
           }
         })
-        .catch(e => {
+        .catch((e) => {
           this.flashAPIFailure(e);
         });
     },
diff --git a/app/assets/javascripts/snippets/components/snippet_blob_actions_edit.vue b/app/assets/javascripts/snippets/components/snippet_blob_actions_edit.vue
index ab2553265a2..ff27c90a84d 100644
--- a/app/assets/javascripts/snippets/components/snippet_blob_actions_edit.vue
+++ b/app/assets/javascripts/snippets/components/snippet_blob_actions_edit.vue
@@ -74,7 +74,7 @@ export default {
 
     this.blobsOrig = blobsById;
     this.blobs = cloneDeep(blobsById);
-    this.blobIds = blobs.map(x => x.id);
+    this.blobIds = blobs.map((x) => x.id);
 
     // Show 1 empty blob if none exist
     if (!this.blobIds.length) {
@@ -108,7 +108,7 @@ export default {
       this.blobIds.push(blob.id);
     },
     deleteBlob(id) {
-      this.blobIds = this.blobIds.filter(x => x !== id);
+      this.blobIds = this.blobIds.filter((x) => x !== id);
       this.$delete(this.blobs, id);
     },
     updateBlob(id, args) {
diff --git a/app/assets/javascripts/snippets/components/snippet_blob_edit.vue b/app/assets/javascripts/snippets/components/snippet_blob_edit.vue
index 6a10dc38f2c..c8545e334a6 100644
--- a/app/assets/javascripts/snippets/components/snippet_blob_edit.vue
+++ b/app/assets/javascripts/snippets/components/snippet_blob_edit.vue
@@ -55,12 +55,12 @@ export default {
       axios
         .get(url, {
           // This prevents axios from automatically JSON.parse response
-          transformResponse: [f => f],
+          transformResponse: [(f) => f],
         })
-        .then(res => {
+        .then((res) => {
           this.notifyAboutUpdates({ content: res.data });
         })
-        .catch(e => this.flashAPIFailure(e));
+        .catch((e) => this.flashAPIFailure(e));
     },
     flashAPIFailure(err) {
       Flash(sprintf(SNIPPET_BLOB_CONTENT_FETCH_ERROR, { err }));
diff --git a/app/assets/javascripts/snippets/components/snippet_blob_view.vue b/app/assets/javascripts/snippets/components/snippet_blob_view.vue
index 5a9ac0af060..b01fae6a88f 100644
--- a/app/assets/javascripts/snippets/components/snippet_blob_view.vue
+++ b/app/assets/javascripts/snippets/components/snippet_blob_view.vue
@@ -88,7 +88,7 @@ export default {
       const {
         blobs: { nodes: dataBlobs },
       } = data.snippets.nodes[0];
-      const updatedBlobData = dataBlobs.find(blob => blob.path === blobPath);
+      const updatedBlobData = dataBlobs.find((blob) => blob.path === blobPath);
       return updatedBlobData.richData || updatedBlobData.plainData;
     },
   },
diff --git a/app/assets/javascripts/snippets/components/snippet_header.vue b/app/assets/javascripts/snippets/components/snippet_header.vue
index 32c4c1039f5..e65e55f6595 100644
--- a/app/assets/javascripts/snippets/components/snippet_header.vue
+++ b/app/assets/javascripts/snippets/components/snippet_header.vue
@@ -69,7 +69,7 @@ export default {
   },
   computed: {
     snippetHasBinary() {
-      return Boolean(this.snippet.blobs.find(blob => blob.binary));
+      return Boolean(this.snippet.blobs.find((blob) => blob.binary));
     },
     authoredMessage() {
       return this.snippet.author
@@ -164,7 +164,7 @@ export default {
           this.closeDeleteModal();
           this.redirectToSnippets();
         })
-        .catch(err => {
+        .catch((err) => {
           this.isDeleting = false;
           this.errorMessage = err.message;
         });
diff --git a/app/assets/javascripts/snippets/mixins/snippets.js b/app/assets/javascripts/snippets/mixins/snippets.js
index 5844a55e4f5..89a88958152 100644
--- a/app/assets/javascripts/snippets/mixins/snippets.js
+++ b/app/assets/javascripts/snippets/mixins/snippets.js
@@ -11,7 +11,7 @@ export const getSnippetMixin = {
           ids: [this.snippetGid],
         };
       },
-      update: data => {
+      update: (data) => {
         const res = data.snippets.nodes[0];
         if (res) {
           res.blobs = res.blobs.nodes;