Run prettier on 31 files - 25 of 73

Part of our prettier migration; changing the arrow-parens style.

app/assets/javascripts/pipelines/stores/test_reports/getters.js

 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;

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,

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

app/assets/javascripts/pipelines/utils.js

 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.

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

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

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;

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;

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

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

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

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 = {

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

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

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

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: {

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

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

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

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})'), {

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})'), {

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: {

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

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

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,

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

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(() => {

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

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 {

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,

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