Run prettier on 31 files - 32 of 73

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

.prettierignore

@@ -848,39 +848,6 @@ app/assets/javascripts/snippets/components/snippet_blob_view.vue
 app/assets/javascripts/snippets/components/snippet_header.vue
 app/assets/javascripts/snippets/mixins/snippets.js
 
-## practical-wozniak
-app/assets/javascripts/vue_shared/components/rich_content_editor/services/sanitize_html.js
-app/assets/javascripts/vue_shared/components/select2_select.vue
-app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue
-app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue
-app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue
-app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue
-app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/getters.js
-app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutations.js
-app/assets/javascripts/vue_shared/components/split_button.vue
-app/assets/javascripts/vue_shared/components/tabs/tabs.js
-app/assets/javascripts/vue_shared/components/timezone_dropdown.vue
-app/assets/javascripts/vue_shared/components/web_ide_link.vue
-app/assets/javascripts/vue_shared/directives/autofocusonshow.js
-app/assets/javascripts/vue_shared/directives/validation.js
-app/assets/javascripts/vue_shared/gl_feature_flags_plugin.js
-app/assets/javascripts/vue_shared/mixins/ci_pagination_api_mixin.js
-app/assets/javascripts/vue_shared/security_reports/security_reports_app.vue
-app/assets/javascripts/vue_shared/security_reports/store/getters.js
-app/assets/javascripts/vue_shared/security_reports/store/modules/sast/actions.js
-app/assets/javascripts/vue_shared/security_reports/store/modules/secret_detection/actions.js
-app/assets/javascripts/vue_shared/security_reports/store/utils.js
-app/assets/javascripts/vue_shared/translate.js
-app/assets/javascripts/vuex_shared/bindings.js
-app/assets/javascripts/whats_new/components/app.vue
-app/assets/javascripts/whats_new/index.js
-app/assets/javascripts/whats_new/utils/get_drawer_body_height.js
-app/assets/javascripts/whats_new/utils/notification.js
-app/assets/javascripts/zen_mode.js
-config/helpers/is_eslint.js
-config/helpers/vendor_dll_hash.js
-config/karma.config.js
-
 ## frosty-kare
 config/plugins/monaco_webpack.js
 config/webpack.config.js

app/assets/javascripts/vue_shared/components/rich_content_editor/services/sanitize_html.js

@@ -5,7 +5,7 @@ import { getURLOrigin } from '~/lib/utils/url_utility';
 const sanitizer = createSanitizer(window);
 const ADD_TAGS = ['iframe'];
 
-sanitizer.addHook('uponSanitizeElement', node => {
+sanitizer.addHook('uponSanitizeElement', (node) => {
   if (node.tagName !== 'IFRAME') {
     return;
   }
@@ -17,6 +17,6 @@ sanitizer.addHook('uponSanitizeElement', node => {
   }
 });
 
-const sanitize = content => sanitizer.sanitize(content, { ADD_TAGS });
+const sanitize = (content) => sanitizer.sanitize(content, { ADD_TAGS });
 
 export default sanitize;

app/assets/javascripts/vue_shared/components/select2_select.vue

@@ -26,7 +26,7 @@ export default {
         $(this.$refs.dropdownInput)
           .val(this.value)
           .select2(this.options)
-          .on('change', event => this.$emit('input', event.target.value));
+          .on('change', (event) => this.$emit('input', event.target.value));
       })
       .catch(() => {});
   },

app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue

@@ -18,7 +18,7 @@ export default {
   },
   created() {
     const rawLabelsColors = gon.suggested_label_colors;
-    this.suggestedColors = Object.keys(rawLabelsColors).map(colorCode => ({
+    this.suggestedColors = Object.keys(rawLabelsColors).map((colorCode) => ({
       colorCode,
       title: rawLabelsColors[colorCode],
     }));

app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue

@@ -20,7 +20,7 @@ export default {
       const labelsString = this.labels.length
         ? this.labels
             .slice(0, 5)
-            .map(label => label.title)
+            .map((label) => label.title)
             .join(', ')
         : s__('LabelSelect|Labels');
 

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue

@@ -25,7 +25,7 @@ export default {
     },
     suggestedColors() {
       const colorsMap = gon.suggested_label_colors;
-      return Object.keys(colorsMap).map(color => ({ [color]: colorsMap[color] }));
+      return Object.keys(colorsMap).map((color) => ({ [color]: colorsMap[color] }));
     },
   },
   methods: {

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue

@@ -182,9 +182,9 @@ export default {
         !state.showDropdownButton &&
         !state.showDropdownContents
       ) {
-        let filterFn = label => label.touched;
+        let filterFn = (label) => label.touched;
         if (this.isDropdownVariantEmbedded) {
-          filterFn = label => label.set;
+          filterFn = (label) => label.set;
         }
         this.handleDropdownClose(state.labels.filter(filterFn));
       }
@@ -204,13 +204,13 @@ export default {
         'js-btn-cancel-create',
         'js-sidebar-dropdown-toggle',
       ].some(
-        className =>
+        (className) =>
           target?.classList.contains(className) ||
           target?.parentElement?.classList.contains(className),
       );
 
       const hadExceptionParent = ['.js-btn-back', '.js-labels-list'].some(
-        className => $(target).parents(className).length,
+        (className) => $(target).parents(className).length,
       );
 
       if (

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/getters.js

@@ -9,7 +9,7 @@ import { DropdownVariant } from '../constants';
  */
 export const dropdownButtonText = (state, getters) => {
   const selectedLabels = getters.isDropdownVariantSidebar
-    ? state.labels.filter(label => label.set)
+    ? state.labels.filter((label) => label.set)
     : state.selectedLabels;
 
   if (!selectedLabels.length) {
@@ -28,25 +28,25 @@ export const dropdownButtonText = (state, getters) => {
  * selectedLabels array.
  * @param {object} state
  */
-export const selectedLabelsList = state => state.selectedLabels.map(label => label.id);
+export const selectedLabelsList = (state) => state.selectedLabels.map((label) => label.id);
 
 /**
  * Returns boolean representing whether dropdown variant
  * is `sidebar`
  * @param {object} state
  */
-export const isDropdownVariantSidebar = state => state.variant === DropdownVariant.Sidebar;
+export const isDropdownVariantSidebar = (state) => state.variant === DropdownVariant.Sidebar;
 
 /**
  * Returns boolean representing whether dropdown variant
  * is `standalone`
  * @param {object} state
  */
-export const isDropdownVariantStandalone = state => state.variant === DropdownVariant.Standalone;
+export const isDropdownVariantStandalone = (state) => state.variant === DropdownVariant.Standalone;
 
 /**
  * Returns boolean representing whether dropdown variant
  * is `embedded`
  * @param {object} state
  */
-export const isDropdownVariantEmbedded = state => state.variant === DropdownVariant.Embedded;
+export const isDropdownVariantEmbedded = (state) => state.variant === DropdownVariant.Embedded;

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutations.js

@@ -33,7 +33,7 @@ export default {
     // Iterate over every label and add a `set` prop
     // to determine whether it is already a part of
     // selectedLabels array.
-    const selectedLabelIds = state.selectedLabels.map(label => label.id);
+    const selectedLabelIds = state.selectedLabels.map((label) => label.id);
     state.labelsFetchInProgress = false;
     state.labels = labels.reduce((allLabels, label) => {
       allLabels.push({
@@ -61,7 +61,7 @@ export default {
     // Find the label to update from all the labels
     // and change `set` prop value to represent their current state.
     const labelId = labels.pop()?.id;
-    const candidateLabel = state.labels.find(label => labelId === label.id);
+    const candidateLabel = state.labels.find((label) => labelId === label.id);
     if (candidateLabel) {
       candidateLabel.touched = true;
       candidateLabel.set = !candidateLabel.set;

app/assets/javascripts/vue_shared/components/split_button.vue

@@ -2,7 +2,7 @@
 import { isString } from 'lodash';
 import { GlDropdown, GlDropdownDivider, GlDropdownItem } from '@gitlab/ui';
 
-const isValidItem = item =>
+const isValidItem = (item) =>
   isString(item.eventName) && isString(item.title) && isString(item.description);
 
 export default {

app/assets/javascripts/vue_shared/components/tabs/tabs.js

@@ -17,8 +17,8 @@ export default {
   },
   methods: {
     updateTabs() {
-      this.tabs = this.$children.filter(child => child.isTab);
-      this.currentIndex = this.tabs.findIndex(tab => tab.localActive);
+      this.tabs = this.$children.filter((child) => child.isTab);
+      this.currentIndex = this.tabs.findIndex((tab) => tab.localActive);
     },
     setTab(e, index) {
       if (this.stopPropagation) {
@@ -48,7 +48,7 @@ export default {
                 href: '#',
               },
               on: {
-                click: e => this.setTab(e, i),
+                click: (e) => this.setTab(e, i),
               },
             },
             tab.$slots.title || tab.title,

app/assets/javascripts/vue_shared/components/timezone_dropdown.vue

@@ -36,14 +36,14 @@ export default {
   },
   computed: {
     timezones() {
-      return this.timezoneData.map(timezone => ({
+      return this.timezoneData.map((timezone) => ({
         formattedTimezone: this.formatTimezone(timezone),
         identifier: timezone.identifier,
       }));
     },
     filteredResults() {
       const lowerCasedSearchTerm = this.searchTerm.toLowerCase();
-      return this.timezones.filter(timezone =>
+      return this.timezones.filter((timezone) =>
         timezone.formattedTimezone.toLowerCase().includes(lowerCasedSearchTerm),
       );
     },

app/assets/javascripts/vue_shared/components/web_ide_link.vue

@@ -72,7 +72,7 @@ export default {
   },
   computed: {
     actions() {
-      return [this.webIdeAction, this.editAction, this.gitpodAction].filter(action => action);
+      return [this.webIdeAction, this.editAction, this.gitpodAction].filter((action) => action);
     },
     editAction() {
       if (!this.showEditButton) {

app/assets/javascripts/vue_shared/directives/autofocusonshow.js

@@ -11,8 +11,8 @@ export default {
   inserted(el) {
     if ('IntersectionObserver' in window) {
       // Element visibility is dynamic, so we attach observer
-      el.visibilityObserver = new IntersectionObserver(entries => {
-        entries.forEach(entry => {
+      el.visibilityObserver = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
           // Combining `intersectionRatio > 0` and
           // element's `offsetParent` presence will
           // deteremine if element is truely visible

app/assets/javascripts/vue_shared/directives/validation.js

@@ -12,19 +12,19 @@ import { s__ } from '~/locale';
  */
 const defaultFeedbackMap = {
   valueMissing: {
-    isInvalid: el => el.validity?.valueMissing,
+    isInvalid: (el) => el.validity?.valueMissing,
     message: s__('Please fill out this field.'),
   },
   urlTypeMismatch: {
-    isInvalid: el => el.type === 'url' && el.validity?.typeMismatch,
+    isInvalid: (el) => el.type === 'url' && el.validity?.typeMismatch,
     message: s__('Please enter a valid URL format, ex: http://www.example.com/home'),
   },
 };
 
 const getFeedbackForElement = (feedbackMap, el) =>
-  Object.values(feedbackMap).find(f => f.isInvalid(el))?.message || el.validationMessage;
+  Object.values(feedbackMap).find((f) => f.isInvalid(el))?.message || el.validationMessage;
 
-const focusFirstInvalidInput = e => {
+const focusFirstInvalidInput = (e) => {
   const { target: formEl } = e;
   const invalidInput = formEl.querySelector('input:invalid');
 
@@ -33,7 +33,7 @@ const focusFirstInvalidInput = e => {
   }
 };
 
-const isEveryFieldValid = form => Object.values(form.fields).every(({ state }) => state === true);
+const isEveryFieldValid = (form) => Object.values(form.fields).every(({ state }) => state === true);
 
 const createValidator = (context, feedbackMap) => ({ el, reportInvalidInput = false }) => {
   const { form } = context;

app/assets/javascripts/vue_shared/gl_feature_flags_plugin.js

-export default Vue => {
+export default (Vue) => {
   Vue.mixin({
     provide: {
       glFeatures: { ...((window.gon && window.gon.features) || {}) },

app/assets/javascripts/vue_shared/mixins/ci_pagination_api_mixin.js

@@ -48,7 +48,7 @@ export default {
       this.poll.stop();
 
       const queryString = Object.keys(parameters)
-        .map(parameter => {
+        .map((parameter) => {
           const value = parameters[parameter];
           // update internal state for UI
           this[parameter] = value;

app/assets/javascripts/vue_shared/security_reports/security_reports_app.vue

@@ -97,7 +97,7 @@ export default {
           projectPath: this.targetProjectFullPath,
           iid: String(this.mrIid),
           reportTypes: this.$options.reportTypes.map(
-            reportType => reportTypeToSecurityReportTypeEnum[reportType],
+            (reportType) => reportTypeToSecurityReportTypeEnum[reportType],
           ),
         };
       },
@@ -151,7 +151,7 @@ export default {
   created() {
     if (!this.canShowDownloads) {
       this.checkAvailableSecurityReports(this.$options.reportTypes)
-        .then(availableSecurityReports => {
+        .then((availableSecurityReports) => {
           this.onCheckingAvailableSecurityReports(Array.from(availableSecurityReports));
         })
         .catch(this.showError);

app/assets/javascripts/vue_shared/security_reports/store/getters.js

@@ -3,7 +3,7 @@ import { countVulnerabilities, groupedTextBuilder } from './utils';
 import { LOADING, ERROR, SUCCESS } from '~/reports/constants';
 import { TRANSLATION_IS_LOADING } from './messages';
 
-export const summaryCounts = state =>
+export const summaryCounts = (state) =>
   countVulnerabilities(
     state.reportTypes.reduce((acc, reportType) => {
       acc.push(...state[reportType].newIssues);
@@ -50,17 +50,17 @@ export const summaryStatus = (state, getters) => {
   return SUCCESS;
 };
 
-export const areReportsLoading = state =>
-  state.reportTypes.some(reportType => state[reportType].isLoading);
+export const areReportsLoading = (state) =>
+  state.reportTypes.some((reportType) => state[reportType].isLoading);
 
-export const areAllReportsLoading = state =>
-  state.reportTypes.every(reportType => state[reportType].isLoading);
+export const areAllReportsLoading = (state) =>
+  state.reportTypes.every((reportType) => state[reportType].isLoading);
 
-export const allReportsHaveError = state =>
-  state.reportTypes.every(reportType => state[reportType].hasError);
+export const allReportsHaveError = (state) =>
+  state.reportTypes.every((reportType) => state[reportType].hasError);
 
-export const anyReportHasError = state =>
-  state.reportTypes.some(reportType => state[reportType].hasError);
+export const anyReportHasError = (state) =>
+  state.reportTypes.some((reportType) => state[reportType].hasError);
 
-export const anyReportHasIssues = state =>
-  state.reportTypes.some(reportType => state[reportType].newIssues.length > 0);
+export const anyReportHasIssues = (state) =>
+  state.reportTypes.some((reportType) => state[reportType].newIssues.length > 0);

app/assets/javascripts/vue_shared/security_reports/store/modules/sast/actions.js

@@ -15,7 +15,7 @@ export const fetchDiff = ({ state, rootState, dispatch }) => {
   dispatch('requestDiff');
 
   return fetchDiffData(rootState, state.paths.diffEndpoint, 'sast')
-    .then(data => {
+    .then((data) => {
       dispatch('receiveDiffSuccess', data);
     })
     .catch(() => {

app/assets/javascripts/vue_shared/security_reports/store/modules/secret_detection/actions.js

@@ -15,7 +15,7 @@ export const fetchDiff = ({ state, rootState, dispatch }) => {
   dispatch('requestDiff');
 
   return fetchDiffData(rootState, state.paths.diffEndpoint, 'secret_detection')
-    .then(data => {
+    .then((data) => {
       dispatch('receiveDiffSuccess', data);
     })
     .catch(() => {

app/assets/javascripts/vue_shared/security_reports/store/utils.js

@@ -29,7 +29,7 @@ export const fetchDiffData = (state, endpoint, category) => {
  */
 export const enrichVulnerabilityWithFeedback = (vulnerability, feedback = []) =>
   feedback
-    .filter(fb => fb.project_fingerprint === vulnerability.project_fingerprint)
+    .filter((fb) => fb.project_fingerprint === vulnerability.project_fingerprint)
     .reduce((vuln, fb) => {
       if (fb.feedback_type === FEEDBACK_TYPE_DISMISSAL) {
         return {
@@ -63,7 +63,7 @@ export const enrichVulnerabilityWithFeedback = (vulnerability, feedback = []) =>
  * @returns {Object}
  */
 export const parseDiff = (diff, enrichData) => {
-  const enrichVulnerability = vulnerability => ({
+  const enrichVulnerability = (vulnerability) => ({
     ...enrichVulnerabilityWithFeedback(vulnerability, enrichData),
     category: vulnerability.report_type,
     title: vulnerability.message || vulnerability.name,

app/assets/javascripts/vue_shared/translate.js

 import { __, n__, s__, sprintf } from '../locale';
 
-export default Vue => {
+export default (Vue) => {
   Vue.mixin({
     methods: {
       /**

app/assets/javascripts/vuex_shared/bindings.js

@@ -11,7 +11,7 @@
  */
 export const mapComputed = (list, defaultUpdateFn, root) => {
   const result = {};
-  list.forEach(item => {
+  list.forEach((item) => {
     const [getter, key, updateFn] =
       typeof item === 'string'
         ? [false, item, defaultUpdateFn]

app/assets/javascripts/whats_new/components/app.vue

@@ -71,7 +71,7 @@ export default {
       this.setDrawerBodyHeight(height);
     },
     featuresForVersion(version) {
-      return this.features.filter(feature => {
+      return this.features.filter((feature) => {
         return feature.release === parseFloat(version);
       });
     },

app/assets/javascripts/whats_new/index.js

@@ -6,7 +6,7 @@ import { getStorageKey, setNotification } from './utils/notification';
 
 let whatsNewApp;
 
-export default el => {
+export default (el) => {
   if (whatsNewApp) {
     store.dispatch('openDrawer');
   } else {

app/assets/javascripts/whats_new/utils/get_drawer_body_height.js

-export const getDrawerBodyHeight = drawer => {
+export const getDrawerBodyHeight = (drawer) => {
   const drawerViewableHeight = drawer.clientHeight - drawer.getBoundingClientRect().top;
   const drawerHeaderHeight = drawer.querySelector('.gl-drawer-header').clientHeight;
 

app/assets/javascripts/whats_new/utils/notification.js

-export const getStorageKey = appEl => appEl.getAttribute('data-storage-key');
+export const getStorageKey = (appEl) => appEl.getAttribute('data-storage-key');
 
-export const setNotification = appEl => {
+export const setNotification = (appEl) => {
   const storageKey = getStorageKey(appEl);
   const notificationEl = document.querySelector('.header-help');
   let notificationCountEl = notificationEl.querySelector('.js-whats-new-notification-count');

app/assets/javascripts/zen_mode.js

@@ -39,21 +39,21 @@ export default class ZenMode {
   constructor() {
     this.active_backdrop = null;
     this.active_textarea = null;
-    $(document).on('click', '.js-zen-enter', e => {
+    $(document).on('click', '.js-zen-enter', (e) => {
       e.preventDefault();
       return $(e.currentTarget).trigger('zen_mode:enter');
     });
-    $(document).on('click', '.js-zen-leave', e => {
+    $(document).on('click', '.js-zen-leave', (e) => {
       e.preventDefault();
       return $(e.currentTarget).trigger('zen_mode:leave');
     });
-    $(document).on('zen_mode:enter', e => {
+    $(document).on('zen_mode:enter', (e) => {
       this.enter($(e.target).closest('.md-area').find('.zen-backdrop'));
     });
     $(document).on('zen_mode:leave', () => {
       this.exit();
     });
-    $(document).on('keydown', e => {
+    $(document).on('keydown', (e) => {
       // Esc
       if (e.keyCode === 27) {
         e.preventDefault();

config/helpers/is_eslint.js

 /**
  * Returns true if the given module is required from eslint
  */
-const isESLint = mod => {
+const isESLint = (mod) => {
   let parent = mod.parent;
 
   while (parent) {

config/helpers/vendor_dll_hash.js

@@ -9,9 +9,9 @@ const CACHE_PATHS = [
   './yarn.lock',
 ];
 
-const resolvePath = file => path.resolve(__dirname, '../..', file);
-const readFile = file => fs.readFileSync(file);
-const fileHash = buffer => crypto.createHash('md5').update(buffer).digest('hex');
+const resolvePath = (file) => path.resolve(__dirname, '../..', file);
+const readFile = (file) => fs.readFileSync(file);
+const fileHash = (buffer) => crypto.createHash('md5').update(buffer).digest('hex');
 
 module.exports = () => {
   const fileBuffers = CACHE_PATHS.map(resolvePath).map(readFile);

config/karma.config.js

@@ -71,13 +71,13 @@ const createContext = (specFiles, regex, suffix) => {
 
 if (specFilters.length) {
   // resolve filters
-  let filteredSpecFiles = specFilters.map(filter =>
+  let filteredSpecFiles = specFilters.map((filter) =>
     glob
       .sync(filter, {
         root: ROOT_PATH,
         matchBase: true,
       })
-      .filter(path => path.endsWith('spec.js')),
+      .filter((path) => path.endsWith('spec.js')),
   );
 
   // flatten
@@ -92,14 +92,14 @@ if (specFilters.length) {
     exit('Your filter did not match any test files.', isError);
   }
 
-  if (!filteredSpecFiles.every(file => SPECS_PATH.test(file))) {
+  if (!filteredSpecFiles.every((file) => SPECS_PATH.test(file))) {
     exitError('Test files must be located within /spec/javascripts.');
   }
 
-  const CE_FILES = filteredSpecFiles.filter(file => !file.startsWith('ee'));
+  const CE_FILES = filteredSpecFiles.filter((file) => !file.startsWith('ee'));
   createContext(CE_FILES, /[^e]{2}[\\\/]spec[\\\/]javascripts$/, 'spec/javascripts');
 
-  const EE_FILES = filteredSpecFiles.filter(file => file.startsWith('ee'));
+  const EE_FILES = filteredSpecFiles.filter((file) => file.startsWith('ee'));
   createContext(EE_FILES, /ee[\\\/]spec[\\\/]javascripts$/, 'ee/spec/javascripts');
 }