Run prettier on 31 files - 22 of 73

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

.prettierignore

@@ -517,39 +517,6 @@ app/assets/javascripts/lib/utils/text_markdown.js
 app/assets/javascripts/lib/utils/text_utility.js
 app/assets/javascripts/lib/utils/type_utility.js
 
-## practical-cohen
-app/assets/javascripts/onboarding_issues/index.js
-app/assets/javascripts/operation_settings/store/actions.js
-app/assets/javascripts/operation_settings/store/index.js
-app/assets/javascripts/packages/details/components/package_files.vue
-app/assets/javascripts/packages/list/components/packages_list.vue
-app/assets/javascripts/packages/list/components/packages_list_app.vue
-app/assets/javascripts/packages/list/components/packages_sort.vue
-app/assets/javascripts/packages/list/stores/getters.js
-app/assets/javascripts/packages/shared/components/package_tags.vue
-app/assets/javascripts/packages/shared/utils.js
-app/assets/javascripts/pages/admin/admin.js
-app/assets/javascripts/pages/admin/application_settings/payload_previewer.js
-app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js
-app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue
-app/assets/javascripts/pages/admin/projects/index.js
-app/assets/javascripts/pages/admin/projects/index/index.js
-app/assets/javascripts/pages/admin/users/index.js
-app/assets/javascripts/pages/admin/users/new/index.js
-app/assets/javascripts/pages/dashboard/projects/index/components/customize_homepage_banner.vue
-app/assets/javascripts/pages/dashboard/projects/index/init_customize_homepage_banner.js
-app/assets/javascripts/pages/groups/new/group_path_validator.js
-app/assets/javascripts/pages/groups/shared/group_tabs.js
-app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue
-app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue
-app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js
-app/assets/javascripts/pages/milestones/shared/promote_milestone_modal_init.js
-app/assets/javascripts/pages/profiles/show/index.js
-app/assets/javascripts/pages/projects/blob/show/index.js
-app/assets/javascripts/pages/projects/graphs/charts/index.js
-app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue
-app/assets/javascripts/pages/projects/issues/service_desk/filtered_search.js
-
 ## vigorous-wiles
 app/assets/javascripts/pages/projects/issues/show.js
 app/assets/javascripts/pages/projects/jobs/index/index.js

app/assets/javascripts/onboarding_issues/index.js

@@ -57,7 +57,7 @@ const showPopover = (el, path, footer, options) => {
     .popover('show');
 
   // The previous popover actions have been taken, don't show those popovers anymore.
-  Object.keys(settings).forEach(pathSetting => {
+  Object.keys(settings).forEach((pathSetting) => {
     if (path !== pathSetting) {
       settings[pathSetting] = false;
     } else {
@@ -71,7 +71,7 @@ const showPopover = (el, path, footer, options) => {
   }
 };
 
-export const showLearnGitLabGroupItemPopover = id => {
+export const showLearnGitLabGroupItemPopover = (id) => {
   const el = document.querySelector(`#group-${id} .group-text a`);
 
   if (!el) return;

app/assets/javascripts/operation_settings/store/actions.js

@@ -21,7 +21,7 @@ export const saveChanges = ({ state, dispatch }) =>
       },
     })
     .then(() => dispatch('receiveSaveChangesSuccess'))
-    .catch(error => dispatch('receiveSaveChangesError', error));
+    .catch((error) => dispatch('receiveSaveChangesError', error));
 
 export const receiveSaveChangesSuccess = () => {
   /**

app/assets/javascripts/operation_settings/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,

app/assets/javascripts/packages/details/components/package_files.vue

@@ -25,14 +25,14 @@ export default {
   },
   computed: {
     filesTableRows() {
-      return this.packageFiles.map(pf => ({
+      return this.packageFiles.map((pf) => ({
         ...pf,
         size: this.formatSize(pf.size),
         pipeline: last(pf.pipelines),
       }));
     },
     showCommitColumn() {
-      return this.filesTableRows.some(row => Boolean(row.pipeline?.id));
+      return this.filesTableRows.some((row) => Boolean(row.pipeline?.id));
     },
     filesTableHeaderFields() {
       return [
@@ -55,7 +55,7 @@ export default {
           label: __('Created'),
           class: 'gl-text-right',
         },
-      ].filter(c => !c.hide);
+      ].filter((c) => !c.hide);
     },
   },
   methods: {

app/assets/javascripts/packages/list/components/packages_list.vue

@@ -24,10 +24,10 @@ export default {
   },
   computed: {
     ...mapState({
-      perPage: state => state.pagination.perPage,
-      totalItems: state => state.pagination.total,
-      page: state => state.pagination.page,
-      isGroupPage: state => state.config.isGroupPage,
+      perPage: (state) => state.pagination.perPage,
+      totalItems: (state) => state.pagination.total,
+      page: (state) => state.pagination.page,
+      isGroupPage: (state) => state.config.isGroupPage,
       isLoading: 'isLoading',
     }),
     ...mapGetters({ list: 'getList' }),

app/assets/javascripts/packages/list/components/packages_list_app.vue

@@ -25,12 +25,12 @@ export default {
   },
   computed: {
     ...mapState({
-      emptyListIllustration: state => state.config.emptyListIllustration,
-      emptyListHelpUrl: state => state.config.emptyListHelpUrl,
-      filterQuery: state => state.filterQuery,
-      selectedType: state => state.selectedType,
-      packageHelpUrl: state => state.config.packageHelpUrl,
-      packagesCount: state => state.pagination?.total,
+      emptyListIllustration: (state) => state.config.emptyListIllustration,
+      emptyListHelpUrl: (state) => state.config.emptyListHelpUrl,
+      filterQuery: (state) => state.filterQuery,
+      selectedType: (state) => state.selectedType,
+      packageHelpUrl: (state) => state.config.packageHelpUrl,
+      packagesCount: (state) => state.pagination?.total,
     }),
     tabsToRender() {
       return PACKAGE_REGISTRY_TABS;

app/assets/javascripts/packages/list/components/packages_sort.vue

@@ -12,12 +12,12 @@ export default {
   },
   computed: {
     ...mapState({
-      isGroupPage: state => state.config.isGroupPage,
-      orderBy: state => state.sorting.orderBy,
-      sort: state => state.sorting.sort,
+      isGroupPage: (state) => state.config.isGroupPage,
+      orderBy: (state) => state.sorting.orderBy,
+      sort: (state) => state.sorting.sort,
     }),
     sortText() {
-      const field = this.sortableFields.find(s => s.orderBy === this.orderBy);
+      const field = this.sortableFields.find((s) => s.orderBy === this.orderBy);
       return field ? field.label : '';
     },
     sortableFields() {

app/assets/javascripts/packages/list/stores/getters.js

 import { LIST_KEY_PROJECT } from '../constants';
 import { beautifyPath } from '../../shared/utils';
 
-export default state =>
-  state.packages.map(p => ({ ...p, projectPathName: beautifyPath(p[LIST_KEY_PROJECT]) }));
+export default (state) =>
+  state.packages.map((p) => ({ ...p, projectPathName: beautifyPath(p[LIST_KEY_PROJECT]) }));

app/assets/javascripts/packages/shared/components/package_tags.vue

@@ -43,7 +43,7 @@ export default {
       if (this.moreTagsDisplay) {
         return this.tags
           .slice(this.tagDisplayLimit)
-          .map(x => x.name)
+          .map((x) => x.name)
           .join(', ');
       }
 

app/assets/javascripts/packages/shared/utils.js

 import { s__ } from '~/locale';
 import { PackageType, TrackingCategories } from './constants';
 
-export const packageTypeToTrackCategory = type =>
+export const packageTypeToTrackCategory = (type) =>
   // eslint-disable-next-line @gitlab/require-i18n-strings
   `UI::${TrackingCategories[type]}`;
 
-export const beautifyPath = path => (path ? path.split('/').join(' / ') : '');
+export const beautifyPath = (path) => (path ? path.split('/').join(' / ') : '');
 
-export const getPackageTypeLabel = packageType => {
+export const getPackageTypeLabel = (packageType) => {
   switch (packageType) {
     case PackageType.CONAN:
       return s__('PackageType|Conan');

app/assets/javascripts/pages/admin/admin.js

@@ -23,7 +23,7 @@ export default function adminInit() {
     }
   });
 
-  $('body').on('click', '.js-toggle-colors-link', e => {
+  $('body').on('click', '.js-toggle-colors-link', (e) => {
     e.preventDefault();
     $('.js-toggle-colors-container').toggleClass('hide');
   });
@@ -33,7 +33,7 @@ export default function adminInit() {
     $(this).tab('show');
   });
 
-  $('.log-bottom').on('click', e => {
+  $('.log-bottom').on('click', (e) => {
     e.preventDefault();
     const $visibleLog = $('.file-content:visible');
 
@@ -52,7 +52,7 @@ export default function adminInit() {
     modal.show();
   });
 
-  $('.change-owner-cancel-link').on('click', e => {
+  $('.change-owner-cancel-link').on('click', (e) => {
     e.preventDefault();
     modal.hide();
     $('.change-owner-link').show();

app/assets/javascripts/pages/admin/application_settings/payload_previewer.js

@@ -14,7 +14,7 @@ export default class PayloadPreviewer {
     this.spinner = this.trigger.querySelector('.js-spinner');
     this.text = this.trigger.querySelector('.js-text');
 
-    this.trigger.addEventListener('click', event => {
+    this.trigger.addEventListener('click', (event) => {
       event.preventDefault();
 
       if (this.isVisible) return this.hidePayload();

app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js

@@ -82,7 +82,7 @@ export default () => {
     return $jsBroadcastMessagePreview.css(selectedColorStyle);
   };
 
-  const setSuggestedColor = e => {
+  const setSuggestedColor = (e) => {
     const color = $(e.currentTarget).data('color');
     $broadcastMessageColor
       .val(color)

app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue

@@ -26,11 +26,11 @@ export default {
     onSubmit() {
       return axios
         .post(this.url)
-        .then(response => {
+        .then((response) => {
           // follow the rediect to refresh the page
           redirectTo(response.request.responseURL);
         })
-        .catch(error => {
+        .catch((error) => {
           createFlash(s__('AdminArea|Stopping jobs failed'));
           throw error;
         });

app/assets/javascripts/pages/admin/projects/index.js

@@ -24,5 +24,5 @@ document.addEventListener('DOMContentLoaded', () => {
 
   document
     .querySelectorAll('.js-namespace-select')
-    .forEach(dropdown => new NamespaceSelect({ dropdown }));
+    .forEach((dropdown) => new NamespaceSelect({ dropdown }));
 });

app/assets/javascripts/pages/admin/projects/index/index.js

@@ -18,7 +18,7 @@ document.addEventListener('DOMContentLoaded', () => {
     },
     mounted() {
       const deleteProjectButtons = document.querySelectorAll('.delete-project-button');
-      deleteProjectButtons.forEach(button => {
+      deleteProjectButtons.forEach((button) => {
         button.addEventListener('click', () => {
           const buttonProps = button.dataset;
           deleteModal.deleteProjectUrl = buttonProps.deleteProjectUrl;

app/assets/javascripts/pages/admin/users/index.js

@@ -17,7 +17,7 @@ function loadModalsConfigurationFromHtml(modalsElement) {
     throw new Error('Modals content element not found!');
   }
 
-  Array.from(modalsElement.children).forEach(node => {
+  Array.from(modalsElement.children).forEach((node) => {
     const { modal, ...config } = node.dataset;
     modalsConfiguration[modal] = {
       title: node.dataset.title,

app/assets/javascripts/pages/admin/users/new/index.js

@@ -15,7 +15,7 @@ export default class UserInternalRegexHandler {
   }
 
   addListenerToEmailField() {
-    $('#user_email').on('input', event => {
+    $('#user_email').on('input', (event) => {
       this.setExternalCheckbox(event.currentTarget.value);
     });
   }

app/assets/javascripts/pages/dashboard/projects/index/components/customize_homepage_banner.vue

@@ -57,7 +57,7 @@ export default {
         .post(this.calloutsPath, {
           feature_name: this.calloutsFeatureId,
         })
-        .catch(e => {
+        .catch((e) => {
           // eslint-disable-next-line @gitlab/require-i18n-strings, no-console
           console.error('Failed to dismiss banner.', e);
         });

app/assets/javascripts/pages/dashboard/projects/index/init_customize_homepage_banner.js

@@ -11,6 +11,6 @@ export default () => {
   return new Vue({
     el,
     provide: { ...el.dataset },
-    render: createElement => createElement(CustomizeHomepageBanner),
+    render: (createElement) => createElement(CustomizeHomepageBanner),
   });
 };

app/assets/javascripts/pages/groups/new/group_path_validator.js

@@ -21,11 +21,11 @@ export default class GroupPathValidator extends InputValidator {
     const container = opts.container || '';
     const validateElements = document.querySelectorAll(`${container} .js-validate-group-path`);
 
-    this.debounceValidateInput = debounce(inputDomElement => {
+    this.debounceValidateInput = debounce((inputDomElement) => {
       GroupPathValidator.validateGroupPathInput(inputDomElement);
     }, debounceTimeoutDuration);
 
-    validateElements.forEach(element =>
+    validateElements.forEach((element) =>
       element.addEventListener('input', this.eventHandler.bind(this)),
     );
   }
@@ -45,7 +45,7 @@ export default class GroupPathValidator extends InputValidator {
 
       fetchGroupPathAvailability(groupPath)
         .then(({ data }) => data)
-        .then(data => {
+        .then((data) => {
           GroupPathValidator.setInputState(inputDomElement, !data.exists);
           GroupPathValidator.setMessageVisibility(inputDomElement, pendingMessageSelector, false);
           GroupPathValidator.setMessageVisibility(

app/assets/javascripts/pages/groups/shared/group_tabs.js

@@ -20,7 +20,7 @@ export default class GroupTabs extends UserTabs {
   bindEvents() {
     this.$parentEl
       .off('shown.bs.tab', '.nav-links a[data-toggle="tab"]')
-      .on('shown.bs.tab', '.nav-links a[data-toggle="tab"]', event => this.tabShown(event));
+      .on('shown.bs.tab', '.nav-links a[data-toggle="tab"]', (event) => this.tabShown(event));
   }
 
   tabShown(event) {
@@ -117,7 +117,7 @@ export default class GroupTabs extends UserTabs {
 
   cleanFilterState() {
     const values = Object.values(this.loaded);
-    const loadedTabs = values.filter(e => e === true);
+    const loadedTabs = values.filter((e) => e === true);
 
     if (!loadedTabs.length) {
       return;

app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue

@@ -82,7 +82,7 @@ Once deleted, it cannot be undone or recovered.`),
 
       return axios
         .delete(this.milestoneUrl)
-        .then(response => {
+        .then((response) => {
           eventHub.$emit('deleteMilestoneModal.requestFinished', {
             milestoneUrl: this.milestoneUrl,
             successful: true,
@@ -91,7 +91,7 @@ Once deleted, it cannot be undone or recovered.`),
           // follow the rediect to milestones overview page
           redirectTo(response.request.responseURL);
         })
-        .catch(error => {
+        .catch((error) => {
           eventHub.$emit('deleteMilestoneModal.requestFinished', {
             milestoneUrl: this.milestoneUrl,
             successful: false,

app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue

@@ -43,14 +43,14 @@ export default {
       eventHub.$emit('promoteMilestoneModal.requestStarted', this.url);
       return axios
         .post(this.url, { params: { format: 'json' } })
-        .then(response => {
+        .then((response) => {
           eventHub.$emit('promoteMilestoneModal.requestFinished', {
             milestoneUrl: this.url,
             successful: true,
           });
           visitUrl(response.data.url);
         })
-        .catch(error => {
+        .catch((error) => {
           eventHub.$emit('promoteMilestoneModal.requestFinished', {
             milestoneUrl: this.url,
             successful: false,

app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js

@@ -20,7 +20,7 @@ export default () => {
 
   const deleteMilestoneButtons = document.querySelectorAll('.js-delete-milestone-button');
 
-  const onRequestStarted = milestoneUrl => {
+  const onRequestStarted = (milestoneUrl) => {
     const button = document.querySelector(
       `.js-delete-milestone-button[data-milestone-url="${milestoneUrl}"]`,
     );
@@ -44,7 +44,7 @@ export default () => {
     },
     mounted() {
       eventHub.$on('deleteMilestoneModal.props', this.setModalProps);
-      deleteMilestoneButtons.forEach(button => {
+      deleteMilestoneButtons.forEach((button) => {
         button.removeAttribute('disabled');
         button.addEventListener('click', () => {
           this.$root.$emit('bv::show::modal', 'delete-milestone-modal');

app/assets/javascripts/pages/milestones/shared/promote_milestone_modal_init.js

@@ -16,7 +16,7 @@ export default () => {
     }
   };
 
-  const onRequestStarted = milestoneUrl => {
+  const onRequestStarted = (milestoneUrl) => {
     const button = document.querySelector(
       `.js-promote-project-milestone-button[data-url="${milestoneUrl}"]`,
     );
@@ -24,7 +24,7 @@ export default () => {
     eventHub.$once('promoteMilestoneModal.requestFinished', onRequestFinished);
   };
 
-  const onDeleteButtonClick = event => {
+  const onDeleteButtonClick = (event) => {
     const button = event.currentTarget;
     const modalProps = {
       milestoneTitle: button.dataset.milestoneTitle,
@@ -36,12 +36,12 @@ export default () => {
   };
 
   const promoteMilestoneButtons = document.querySelectorAll('.js-promote-project-milestone-button');
-  promoteMilestoneButtons.forEach(button => {
+  promoteMilestoneButtons.forEach((button) => {
     button.addEventListener('click', onDeleteButtonClick);
   });
 
   eventHub.$once('promoteMilestoneModal.mounted', () => {
-    promoteMilestoneButtons.forEach(button => {
+    promoteMilestoneButtons.forEach((button) => {
       button.removeAttribute('disabled');
     });
   });

app/assets/javascripts/pages/profiles/show/index.js

@@ -14,7 +14,7 @@ document.addEventListener('DOMContentLoaded', () => {
   const statusEmojiField = document.getElementById('js-status-emoji-field');
   const statusMessageField = document.getElementById('js-status-message-field');
 
-  const toggleNoEmojiPlaceholder = isVisible => {
+  const toggleNoEmojiPlaceholder = (isVisible) => {
     const placeholderElement = document.getElementById('js-no-emoji-placeholder');
     placeholderElement.classList.toggle('hidden', !isVisible);
   };

app/assets/javascripts/pages/projects/blob/show/index.js

@@ -41,7 +41,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const { codeNavigationPath, blobPath, definitionPathPrefix } = codeNavEl.dataset;
 
     // eslint-disable-next-line promise/catch-or-return
-    import('~/code_navigation').then(m =>
+    import('~/code_navigation').then((m) =>
       m.default({
         blobs: [{ path: blobPath, codeNavigationPath }],
         definitionPathPrefix,

app/assets/javascripts/pages/projects/graphs/charts/index.js

@@ -5,7 +5,7 @@ import { __ } from '~/locale';
 import CodeCoverage from '../components/code_coverage.vue';
 import SeriesDataMixin from './series_data_mixin';
 
-const seriesDataToBarData = raw => Object.entries(raw).map(([name, data]) => ({ name, data }));
+const seriesDataToBarData = (raw) => Object.entries(raw).map(([name, data]) => ({ name, data }));
 
 document.addEventListener('DOMContentLoaded', () => {
   waitForCSSLoaded(() => {
@@ -43,7 +43,7 @@ document.addEventListener('DOMContentLoaded', () => {
       },
       computed: {
         seriesData() {
-          return [{ name: 'full', data: this.chartData.map(d => [d.label, d.value]) }];
+          return [{ name: 'full', data: this.chartData.map((d) => [d.label, d.value]) }];
         },
       },
       render(h) {

app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue

@@ -74,7 +74,7 @@ export default {
       );
     },
     formattedData() {
-      return this.sortedData.map(value => [dateFormat(value.date, 'mmm dd'), value.coverage]);
+      return this.sortedData.map((value) => [dateFormat(value.date, 'mmm dd'), value.coverage]);
     },
     chartData() {
       return [

app/assets/javascripts/pages/projects/issues/service_desk/filtered_search.js

@@ -21,7 +21,7 @@ export default class FilteredSearchServiceDesk extends FilteredSearchManager {
 
   modifyUrlParams(paramsArray) {
     const supportBotParamPair = `${AUTHOR_PARAM_KEY}=${this.supportBotData.username}`;
-    const onlyValidParams = paramsArray.filter(param => param.indexOf(AUTHOR_PARAM_KEY) === -1);
+    const onlyValidParams = paramsArray.filter((param) => param.indexOf(AUTHOR_PARAM_KEY) === -1);
 
     // unshift ensures author param is always first token element
     onlyValidParams.unshift(supportBotParamPair);