Run prettier on 36 files - 31 of 73

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

.prettierignore

@@ -848,44 +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
 
-## thirsty-mccarthy
-app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
-app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker_input.vue
-app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker_lib.js
-app/assets/javascripts/vue_shared/components/deprecated_modal_2.vue
-app/assets/javascripts/vue_shared/components/dismissible_container.vue
-app/assets/javascripts/vue_shared/components/file_finder/index.vue
-app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue
-app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_utils.js
-app/assets/javascripts/vue_shared/components/filtered_search_bar/store/modules/filters/actions.js
-app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue
-app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/branch_token.vue
-app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue
-app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue
-app/assets/javascripts/vue_shared/components/gfm_autocomplete/gfm_autocomplete.vue
-app/assets/javascripts/vue_shared/components/gfm_autocomplete/utils.js
-app/assets/javascripts/vue_shared/components/lib/utils/diff_utils.js
-app/assets/javascripts/vue_shared/components/markdown/field.vue
-app/assets/javascripts/vue_shared/components/markdown/header.vue
-app/assets/javascripts/vue_shared/components/markdown/suggestions.vue
-app/assets/javascripts/vue_shared/components/modal_copy_button.vue
-app/assets/javascripts/vue_shared/components/ordered_layout.vue
-app/assets/javascripts/vue_shared/components/paginated_table_with_search_and_tabs/paginated_table_with_search_and_tabs.vue
-app/assets/javascripts/vue_shared/components/paginated_table_with_search_and_tabs/utils.js
-app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue
-app/assets/javascripts/vue_shared/components/registry/list_item.vue
-app/assets/javascripts/vue_shared/components/registry/title_area.vue
-app/assets/javascripts/vue_shared/components/rich_content_editor/rich_content_editor.vue
-app/assets/javascripts/vue_shared/components/rich_content_editor/services/build_custom_renderer.js
-app/assets/javascripts/vue_shared/components/rich_content_editor/services/build_html_to_markdown_renderer.js
-app/assets/javascripts/vue_shared/components/rich_content_editor/services/editor_service.js
-app/assets/javascripts/vue_shared/components/rich_content_editor/services/renderers/build_uneditable_token.js
-app/assets/javascripts/vue_shared/components/rich_content_editor/services/renderers/render_html_block.js
-app/assets/javascripts/vue_shared/components/rich_content_editor/services/renderers/render_identifier_instance_text.js
-app/assets/javascripts/vue_shared/components/rich_content_editor/services/renderers/render_identifier_paragraph.js
-app/assets/javascripts/vue_shared/components/rich_content_editor/services/renderers/render_softbreak.js
-app/assets/javascripts/vue_shared/components/rich_content_editor/services/renderers/render_utils.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/date_time_picker/date_time_picker.vue

@@ -202,7 +202,7 @@ export default {
 <template>
   <tooltip-on-truncate
     :title="timeWindowText"
-    :truncate-target="elem => elem.querySelector('.gl-dropdown-toggle-text')"
+    :truncate-target="(elem) => elem.querySelector('.gl-dropdown-toggle-text')"
     placement="top"
     class="d-inline-block"
   >

app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker_input.vue

@@ -20,12 +20,12 @@ export default {
     state: {
       default: null,
       required: true,
-      validator: prop => typeof prop === 'boolean' || prop === null,
+      validator: (prop) => typeof prop === 'boolean' || prop === null,
     },
     value: {
       default: null,
       required: false,
-      validator: prop => typeof prop === 'string' || prop === null,
+      validator: (prop) => typeof prop === 'string' || prop === null,
     },
     label: {
       type: String,

app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker_lib.js

@@ -25,7 +25,7 @@ export const defaultTimeRanges = [
   },
 ];
 
-export const defaultTimeRange = defaultTimeRanges.find(tr => tr.default);
+export const defaultTimeRange = defaultTimeRanges.find((tr) => tr.default);
 
 export const dateFormats = {
   /**
@@ -49,7 +49,7 @@ export const dateFormats = {
  * @param {string} value - Value as typed by the user
  * @returns true if the value can be parsed as a valid date, false otherwise
  */
-export const isValidInputString = value => {
+export const isValidInputString = (value) => {
   try {
     // dateformat throws error that can be caught.
     // This is better than using `new Date()`

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

@@ -21,7 +21,7 @@ export default {
       type: String,
       required: false,
       default: 'md',
-      validator: value => sizeVariants.includes(value),
+      validator: (value) => sizeVariants.includes(value),
     },
     headerTitleText: {
       type: String,
@@ -32,7 +32,7 @@ export default {
       type: String,
       required: false,
       default: 'primary',
-      validator: value => buttonVariants.includes(value),
+      validator: (value) => buttonVariants.includes(value),
     },
     footerPrimaryButtonText: {
       type: String,

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

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

app/assets/javascripts/vue_shared/components/file_finder/index.vue

@@ -128,7 +128,7 @@ export default {
       this.focusedIndex = 0;
     }
 
-    Mousetrap.bind(['t', 'mod+p'], e => {
+    Mousetrap.bind(['t', 'mod+p'], (e) => {
       if (e.preventDefault) {
         e.preventDefault();
       }

app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue

@@ -59,7 +59,7 @@ export default {
       type: String,
       required: false,
       default: '',
-      validator: value => value === '' || /(_desc)|(_asc)/g.test(value),
+      validator: (value) => value === '' || /(_desc)|(_asc)/g.test(value),
     },
     showCheckbox: {
       type: Boolean,
@@ -89,7 +89,7 @@ export default {
     if (this.initialSortBy) {
       selectedSortOption = this.sortOptions
         .filter(
-          sortBy =>
+          (sortBy) =>
             sortBy.sortDirection.ascending === this.initialSortBy ||
             sortBy.sortDirection.descending === this.initialSortBy,
         )
@@ -204,12 +204,12 @@ export default {
 
       this.recentSearchesStore = new RecentSearchesStore({
         isLocalStorageAvailable: RecentSearchesService.isAvailable(),
-        allowedKeys: this.tokens.map(token => token.type),
+        allowedKeys: this.tokens.map((token) => token.type),
       });
 
       this.recentSearchesPromise = this.recentSearchesService
         .fetch()
-        .catch(error => {
+        .catch((error) => {
           if (error.name === 'RecentSearchesServiceError') return undefined;
 
           createFlash(__('An error occurred while parsing recent searches'));
@@ -217,7 +217,7 @@ export default {
           // Gracefully fail to empty array
           return [];
         })
-        .then(searches => {
+        .then((searches) => {
           if (!searches) return;
 
           // Put any searches that may have come in before
@@ -250,7 +250,7 @@ export default {
      * spaces.
      */
     removeQuotesEnclosure(filters = []) {
-      return filters.map(filter => {
+      return filters.map((filter) => {
         if (typeof filter === 'object') {
           const valueString = filter.value.data;
           return {
@@ -305,8 +305,8 @@ export default {
     },
     historyTokenOptionTitle(historyToken) {
       const tokenOption = this.tokens
-        .find(token => token.type === historyToken.type)
-        ?.options?.find(option => option.value === historyToken.value.data);
+        .find((token) => token.type === historyToken.type)
+        ?.options?.find((option) => option.value === historyToken.value.data);
 
       if (!tokenOption?.title) {
         return historyToken.value.data;

app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_utils.js

@@ -8,7 +8,7 @@ import { queryToObject } from '~/lib/utils/url_utility';
  *
  * @returns {String} String without any enclosure
  */
-export const stripQuotes = value => value.replace(/^('|")(.*)('|")$/, '$2');
+export const stripQuotes = (value) => value.replace(/^('|")(.*)('|")$/, '$2');
 
 /**
  * This method removes duplicate tokens from tokens array.
@@ -17,7 +17,7 @@ export const stripQuotes = value => value.replace(/^('|")(.*)('|")$/, '$2');
  *
  * @returns {Array} Unique array of tokens
  */
-export const uniqueTokens = tokens => {
+export const uniqueTokens = (tokens) => {
   const knownTokens = [];
   return tokens.reduce((uniques, token) => {
     if (typeof token === 'object' && token.type !== 'filtered-search-term') {
@@ -61,7 +61,7 @@ export function prepareTokens(filters = {}) {
       return memo;
     }
     if (Array.isArray(value)) {
-      return [...memo, ...value.map(filterValue => createToken(key, filterValue))];
+      return [...memo, ...value.map((filterValue) => createToken(key, filterValue))];
     }
 
     return [...memo, createToken(key, value)];
@@ -99,8 +99,8 @@ export function filterToQueryObject(filters = {}) {
     let selected;
     let unselected;
     if (Array.isArray(filter)) {
-      selected = filter.filter(item => item.operator === '=').map(item => item.value);
-      unselected = filter.filter(item => item.operator === '!=').map(item => item.value);
+      selected = filter.filter((item) => item.operator === '=').map((item) => item.value);
+      unselected = filter.filter((item) => item.operator === '!=').map((item) => item.value);
     } else {
       selected = filter?.operator === '=' ? filter.value : null;
       unselected = filter?.operator === '!=' ? filter.value : null;
@@ -155,7 +155,7 @@ export function urlQueryToFilter(query = '') {
       previousValues = memo[filterName];
     }
     if (Array.isArray(value)) {
-      const newAdditions = value.filter(Boolean).map(item => ({ value: item, operator }));
+      const newAdditions = value.filter(Boolean).map((item) => ({ value: item, operator }));
       return { ...memo, [filterName]: [...previousValues, ...newAdditions] };
     }
 

app/assets/javascripts/vue_shared/components/filtered_search_bar/store/modules/filters/actions.js

@@ -17,7 +17,7 @@ export function fetchBranches({ commit, state }, search = '') {
   commit(types.REQUEST_BRANCHES);
 
   return Api.branches(projectEndpoint, search)
-    .then(response => {
+    .then((response) => {
       commit(types.RECEIVE_BRANCHES_SUCCESS, response.data);
       return response;
     })
@@ -34,7 +34,7 @@ export const fetchMilestones = ({ commit, state }, search_title = '') => {
 
   return axios
     .get(milestonesEndpoint, { params: { search_title } })
-    .then(response => {
+    .then((response) => {
       commit(types.RECEIVE_MILESTONES_SUCCESS, response.data);
       return response;
     })
@@ -50,7 +50,7 @@ export const fetchLabels = ({ commit, state }, search = '') => {
 
   return axios
     .get(state.labelsEndpoint, { params: { search } })
-    .then(response => {
+    .then((response) => {
       commit(types.RECEIVE_LABELS_SUCCESS, response.data);
       return response;
     })
@@ -67,13 +67,13 @@ function fetchUser(options = {}) {
 
   let fetchUserPromise;
   if (projectEndpoint) {
-    fetchUserPromise = Api.projectUsers(projectEndpoint, query).then(data => ({ data }));
+    fetchUserPromise = Api.projectUsers(projectEndpoint, query).then((data) => ({ data }));
   } else {
     fetchUserPromise = Api.groupMembers(groupEndpoint, { query });
   }
 
   return fetchUserPromise
-    .then(response => {
+    .then((response) => {
       commit(`RECEIVE_${action}_SUCCESS`, response.data);
       return response;
     })

app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue

@@ -43,7 +43,7 @@ export default {
       return this.value.data.toLowerCase();
     },
     activeAuthor() {
-      return this.authors.find(author => author.username.toLowerCase() === this.currentValue);
+      return this.authors.find((author) => author.username.toLowerCase() === this.currentValue);
     },
   },
   watch: {
@@ -63,7 +63,7 @@ export default {
         : this.config.fetchAuthors(searchTerm);
 
       fetchPromise
-        .then(res => {
+        .then((res) => {
           // We'd want to avoid doing this check but
           // users.json and /groups/:id/members & /projects/:id/users
           // return response differently.

app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/branch_token.vue

@@ -43,7 +43,7 @@ export default {
       return this.value.data.toLowerCase();
     },
     activeBranch() {
-      return this.branches.find(branch => branch.name.toLowerCase() === this.currentValue);
+      return this.branches.find((branch) => branch.name.toLowerCase() === this.currentValue);
     },
   },
   watch: {

app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue

@@ -47,7 +47,7 @@ export default {
     },
     activeLabel() {
       return this.labels.find(
-        label => label.title.toLowerCase() === stripQuotes(this.currentValue),
+        (label) => label.title.toLowerCase() === stripQuotes(this.currentValue),
       );
     },
     containerStyle() {
@@ -74,7 +74,7 @@ export default {
       this.loading = true;
       this.config
         .fetchLabels(searchTerm)
-        .then(res => {
+        .then((res) => {
           // We'd want to avoid doing this check but
           // labels.json and /groups/:id/labels & /projects/:id/labels
           // return response differently.

app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue

@@ -43,7 +43,7 @@ export default {
     },
     activeMilestone() {
       return this.milestones.find(
-        milestone => milestone.title.toLowerCase() === stripQuotes(this.currentValue),
+        (milestone) => milestone.title.toLowerCase() === stripQuotes(this.currentValue),
       );
     },
   },

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

@@ -28,7 +28,7 @@ export default {
   },
   computed: {
     config() {
-      return this.autocompleteTypes.map(type => ({
+      return this.autocompleteTypes.map((type) => ({
         ...tributeConfig[type].config,
         loadingItemTemplate: `<span class="gl-spinner gl-vertical-align-text-bottom gl-ml-3 gl-mr-2"></span>${__(
           'Loading',
@@ -56,7 +56,7 @@ export default {
 
       if (!this.assignees || !isAssigneesLengthSame) {
         this.assignees =
-          SidebarMediator.singleton?.store?.assignees?.map(assignee => assignee.username) || [];
+          SidebarMediator.singleton?.store?.assignees?.map((assignee) => assignee.username) || [];
       }
     },
     filterValues(type) {
@@ -88,7 +88,7 @@ export default {
         } else if (this.dataSources[type]) {
           axios
             .get(this.dataSources[type])
-            .then(response => {
+            .then((response) => {
               this.cache[type] = response.data;
               processValues(this.filterValues(type));
             })

app/assets/javascripts/vue_shared/components/gfm_autocomplete/utils.js

@@ -27,7 +27,7 @@ export const tributeConfig = {
   [GfmAutocompleteType.Emojis]: {
     config: {
       trigger: ':',
-      lookup: value => value,
+      lookup: (value) => value,
       menuItemTemplate: ({ original }) => `${original} ${Emoji.glEmojiTag(original)}`,
       selectTemplate: ({ original }) => `:${original}:`,
     },
@@ -36,7 +36,7 @@ export const tributeConfig = {
   [GfmAutocompleteType.Issues]: {
     config: {
       trigger: '#',
-      lookup: value => `${value.iid}${value.title}`,
+      lookup: (value) => `${value.iid}${value.title}`,
       menuItemTemplate: ({ original }) =>
         `<small>${original.reference || original.iid}</small> ${escape(original.title)}`,
       selectTemplate: ({ original }) => original.reference || `#${original.iid}`,
@@ -57,11 +57,11 @@ export const tributeConfig = {
     },
     filterValues({ collection, fullText, selectionStart }) {
       if (doesCurrentLineStartWith('/label', fullText, selectionStart)) {
-        return collection.filter(label => !label.set);
+        return collection.filter((label) => !label.set);
       }
 
       if (doesCurrentLineStartWith('/unlabel', fullText, selectionStart)) {
-        return collection.filter(label => label.set);
+        return collection.filter((label) => label.set);
       }
 
       return collection;
@@ -72,7 +72,7 @@ export const tributeConfig = {
     config: {
       trigger: '@',
       fillAttr: 'username',
-      lookup: value =>
+      lookup: (value) =>
         value.type === groupType ? last(value.name.split(' / ')) : `${value.name}${value.username}`,
       menuItemTemplate: ({ original }) => {
         const commonClasses = 'gl-avatar gl-avatar-s24 gl-flex-shrink-0';
@@ -113,11 +113,11 @@ export const tributeConfig = {
     },
     filterValues({ assignees, collection, fullText, selectionStart }) {
       if (doesCurrentLineStartWith('/assign', fullText, selectionStart)) {
-        return collection.filter(member => !assignees.includes(member.username));
+        return collection.filter((member) => !assignees.includes(member.username));
       }
 
       if (doesCurrentLineStartWith('/unassign', fullText, selectionStart)) {
-        return collection.filter(member => assignees.includes(member.username));
+        return collection.filter((member) => assignees.includes(member.username));
       }
 
       return collection;
@@ -127,7 +127,7 @@ export const tributeConfig = {
   [GfmAutocompleteType.MergeRequests]: {
     config: {
       trigger: '!',
-      lookup: value => `${value.iid}${value.title}`,
+      lookup: (value) => `${value.iid}${value.title}`,
       menuItemTemplate: ({ original }) =>
         `<small>${original.reference || original.iid}</small> ${escape(original.title)}`,
       selectTemplate: ({ original }) => original.reference || `!${original.iid}`,
@@ -147,7 +147,7 @@ export const tributeConfig = {
     config: {
       trigger: '/',
       fillAttr: 'name',
-      lookup: value => `${value.name}${value.aliases.join()}`,
+      lookup: (value) => `${value.name}${value.aliases.join()}`,
       menuItemTemplate: ({ original }) => {
         const aliases = original.aliases.length
           ? `<small>(or /${original.aliases.join(', /')})</small>`
@@ -175,7 +175,7 @@ export const tributeConfig = {
     config: {
       trigger: '$',
       fillAttr: 'id',
-      lookup: value => `${value.id}${value.title}`,
+      lookup: (value) => `${value.id}${value.title}`,
       menuItemTemplate: ({ original }) => `<small>${original.id}</small> ${escape(original.title)}`,
     },
   },

app/assets/javascripts/vue_shared/components/lib/utils/diff_utils.js

@@ -15,5 +15,5 @@ function cleanSuggestionLine(line = {}) {
 }
 
 export function selectDiffLines(lines) {
-  return lines.filter(line => line.type !== 'match').map(line => cleanSuggestionLine(line));
+  return lines.filter((line) => line.type !== 'match').map((line) => cleanSuggestionLine(line));
 }

app/assets/javascripts/vue_shared/components/markdown/field.vue

@@ -158,7 +158,7 @@ export default {
       const mediaInPreview = this.$refs['markdown-preview'].querySelectorAll('video, audio');
 
       if (mediaInPreview) {
-        mediaInPreview.forEach(media => {
+        mediaInPreview.forEach((media) => {
           media.pause();
         });
       }
@@ -199,7 +199,7 @@ export default {
         this.markdownPreview = __('Loading…');
         axios
           .post(this.markdownPreviewPath, { text: this.textareaValue })
-          .then(response => this.renderMarkdown(response.data))
+          .then((response) => this.renderMarkdown(response.data))
           .catch(() => new Flash(__('Error loading markdown preview')));
       } else {
         this.renderMarkdown();

app/assets/javascripts/vue_shared/components/markdown/header.vue

@@ -110,7 +110,7 @@ export default {
       const area = this.$el.parentNode.querySelector('textarea');
 
       CopyAsGFM.nodeToGFM(transformed)
-        .then(gfm => {
+        .then((gfm) => {
           CopyAsGFM.insertPastedText(area, documentFragment.textContent, CopyAsGFM.quoted(gfm));
         })
         .catch(() => {});

app/assets/javascripts/vue_shared/components/markdown/suggestions.vue

@@ -98,11 +98,11 @@ export default {
         this.$emit('applyBatch', { flashContainer: this.$el });
       });
 
-      suggestionDiff.$on('addToBatch', suggestionId => {
+      suggestionDiff.$on('addToBatch', (suggestionId) => {
         this.$emit('addToBatch', suggestionId);
       });
 
-      suggestionDiff.$on('removeFromBatch', suggestionId => {
+      suggestionDiff.$on('removeFromBatch', (suggestionId) => {
         this.$emit('removeFromBatch', suggestionId);
       });
 

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

@@ -70,14 +70,14 @@ export default {
           document.body,
       });
       this.clipboard
-        .on('success', e => {
+        .on('success', (e) => {
           this.$root.$emit('bv::hide::tooltip', this.id);
           this.$emit('success', e);
           // Clear the selection and blur the trigger so it loses its border
           e.clearSelection();
           e.trigger.blur();
         })
-        .on('error', e => this.$emit('error', e));
+        .on('error', (e) => this.$emit('error', e));
     });
   },
   destroyed() {

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

@@ -4,7 +4,7 @@ export default {
   render(h, context) {
     const { slotKeys } = context.props;
     const slots = context.slots();
-    const children = slotKeys.map(key => slots[key]).filter(x => x);
+    const children = slotKeys.map((key) => slots[key]).filter((x) => x);
 
     return children;
   },

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

@@ -203,7 +203,7 @@ export default {
       this.resetPagination();
       const filterParams = { authorUsername: '', assigneeUsername: '', search: '' };
 
-      filters.forEach(filter => {
+      filters.forEach((filter) => {
         if (typeof filter === 'object') {
           switch (filter.type) {
             case 'author_username':

app/assets/javascripts/vue_shared/components/paginated_table_with_search_and_tabs/utils.js

@@ -6,6 +6,6 @@ import { __ } from '~/locale';
  * @param {String} value
  * @returns {String}
  */
-export const isAny = value => {
+export const isAny = (value) => {
   return value === __('Any') ? '' : value;
 };

app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue

@@ -13,7 +13,7 @@ export default {
     project: {
       type: Object,
       required: true,
-      validator: p =>
+      validator: (p) =>
         (Number.isFinite(p.id) || isString(p.id)) &&
         isString(p.name) &&
         (isString(p.name_with_namespace) || isString(p.nameWithNamespace)),

app/assets/javascripts/vue_shared/components/registry/list_item.vue

@@ -39,7 +39,7 @@ export default {
     },
   },
   mounted() {
-    this.detailsSlots = Object.keys(this.$slots).filter(k => k.startsWith('details-'));
+    this.detailsSlots = Object.keys(this.$slots).filter((k) => k.startsWith('details-'));
   },
   methods: {
     toggleDetails() {

app/assets/javascripts/vue_shared/components/registry/title_area.vue

@@ -38,11 +38,11 @@ export default {
   },
   async mounted() {
     const METADATA_PREFIX = 'metadata-';
-    this.metadataSlots = Object.keys(this.$slots).filter(k => k.startsWith(METADATA_PREFIX));
+    this.metadataSlots = Object.keys(this.$slots).filter((k) => k.startsWith(METADATA_PREFIX));
 
     // we need to wait for next tick to ensure that dynamic names slots are picked up
     await this.$nextTick();
-    this.metadataSlots = Object.keys(this.$slots).filter(k => k.startsWith(METADATA_PREFIX));
+    this.metadataSlots = Object.keys(this.$slots).filter((k) => k.startsWith(METADATA_PREFIX));
   },
 };
 </script>

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

@@ -20,7 +20,7 @@ export default {
   components: {
     ToastEditor: () =>
       import(/* webpackChunkName: 'toast_editor' */ '@toast-ui/vue-editor').then(
-        toast => toast.Editor,
+        (toast) => toast.Editor,
       ),
     AddImageModal,
     InsertVideoModal,

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

@@ -17,12 +17,12 @@ const listItemRenderers = [renderListItem];
 const softbreakRenderers = [renderSoftbreak];
 
 const executeRenderer = (renderers, node, context) => {
-  const availableRenderer = renderers.find(renderer => renderer.canRender(node, context));
+  const availableRenderer = renderers.find((renderer) => renderer.canRender(node, context));
 
   return availableRenderer ? availableRenderer.render(node, context) : context.origin();
 };
 
-const buildCustomHTMLRenderer = customRenderers => {
+const buildCustomHTMLRenderer = (customRenderers) => {
   const renderersByType = {
     ...customRenderers,
     htmlBlock: union(htmlBlockRenderers, customRenderers?.htmlBlock),
@@ -34,7 +34,7 @@ const buildCustomHTMLRenderer = customRenderers => {
     softbreak: union(softbreakRenderers, customRenderers?.softbreak),
   };
 
-  return mapValues(renderersByType, renderers => {
+  return mapValues(renderersByType, (renderers) => {
     return (node, context) => executeRenderer(renderers, node, context);
   });
 };

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

@@ -9,7 +9,7 @@ const DEFAULTS = {
   emphasis: '_',
 };
 
-const countIndentSpaces = text => {
+const countIndentSpaces = (text) => {
   const matches = text.match(/^\s+/m);
 
   return matches ? matches[0].length : 0;
@@ -52,7 +52,7 @@ const buildHTMLToMarkdownRender = (baseRenderer, formattingPreferences = {}) =>
       const firstLevelIndentSpacesCount = countIndentSpaces(baseResult) || 1;
       const reindentedList = baseResult
         .split('\n')
-        .map(line => {
+        .map((line) => {
           const itemIndentSpacesCount = countIndentSpaces(line);
           const nestingLevel = Math.ceil(itemIndentSpacesCount / firstLevelIndentSpacesCount);
           const indentSpaces = repeat(' ', subListIndentSpaces * nestingLevel);

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

@@ -6,7 +6,7 @@ import buildCustomHTMLRenderer from './build_custom_renderer';
 import { TOOLBAR_ITEM_CONFIGS, VIDEO_ATTRIBUTES } from '../constants';
 import sanitizeHTML from './sanitize_html';
 
-const buildWrapper = propsData => {
+const buildWrapper = (propsData) => {
   const instance = new Vue({
     render(createElement) {
       return createElement(ToolbarItem, propsData);
@@ -17,7 +17,7 @@ const buildWrapper = propsData => {
   return instance.$el;
 };
 
-const buildVideoIframe = src => {
+const buildVideoIframe = (src) => {
   const wrapper = document.createElement('figure');
   const iframe = document.createElement('iframe');
   const videoAttributes = { ...VIDEO_ATTRIBUTES, src };
@@ -48,7 +48,7 @@ const buildImg = (alt, originalSrc, file) => {
   return img;
 };
 
-export const generateToolbarItem = config => {
+export const generateToolbarItem = (config) => {
   const { icon, classes, event, command, tooltip, isDivider } = config;
 
   if (isDivider) {
@@ -92,14 +92,14 @@ export const insertVideo = ({ editor }, url) => {
   }
 };
 
-export const getMarkdown = editorInstance => editorInstance.invoke('getMarkdown');
+export const getMarkdown = (editorInstance) => editorInstance.invoke('getMarkdown');
 
 /**
  * This function allow us to extend Toast UI HTML to Markdown renderer. It is
  * a temporary measure because Toast UI does not provide an API
  * to achieve this goal.
  */
-export const registerHTMLToMarkdownRenderer = editorApi => {
+export const registerHTMLToMarkdownRenderer = (editorApi) => {
   const { renderer } = editorApi.toMarkOptions;
 
   Object.assign(editorApi.toMarkOptions, {
@@ -107,10 +107,10 @@ export const registerHTMLToMarkdownRenderer = editorApi => {
   });
 };
 
-export const getEditorOptions = externalOptions => {
+export const getEditorOptions = (externalOptions) => {
   return defaults({
     customHTMLRenderer: buildCustomHTMLRenderer(externalOptions?.customRenderers),
-    toolbarItems: TOOLBAR_ITEM_CONFIGS.map(toolbarItem => generateToolbarItem(toolbarItem)),
-    customHTMLSanitizer: html => sanitizeHTML(html),
+    toolbarItems: TOOLBAR_ITEM_CONFIGS.map((toolbarItem) => generateToolbarItem(toolbarItem)),
+    customHTMLSanitizer: (html) => sanitizeHTML(html),
   });
 };

app/assets/javascripts/vue_shared/components/rich_content_editor/services/renderers/build_uneditable_token.js

@@ -32,20 +32,20 @@ export const buildUneditableCloseTokens = (token, tagType = TAG_TYPES.block) =>
 
 // Complete helpers (open plus close)
 
-export const buildTextToken = content => buildToken('text', null, { content });
+export const buildTextToken = (content) => buildToken('text', null, { content });
 
-export const buildUneditableBlockTokens = token => {
+export const buildUneditableBlockTokens = (token) => {
   return [...buildUneditableOpenTokens(token), buildUneditableCloseToken()];
 };
 
-export const buildUneditableInlineTokens = token => {
+export const buildUneditableInlineTokens = (token) => {
   return [
     ...buildUneditableOpenTokens(token, TAG_TYPES.inline),
     buildUneditableCloseToken(TAG_TYPES.inline),
   ];
 };
 
-export const buildUneditableHtmlAsTextTokens = node => {
+export const buildUneditableHtmlAsTextTokens = (node) => {
   /*
   Toast UI internally appends ' data-tomark-pass ' attribute flags so it can target certain
   nested nodes for internal use during Markdown <=> WYSIWYG conversions. In our case, we want

app/assets/javascripts/vue_shared/components/rich_content_editor/services/renderers/render_html_block.js

@@ -2,7 +2,7 @@ import { buildUneditableHtmlAsTextTokens } from './build_uneditable_token';
 import { ALLOWED_VIDEO_ORIGINS } from '../../constants';
 import { getURLOrigin } from '~/lib/utils/url_utility';
 
-const isVideoFrame = html => {
+const isVideoFrame = (html) => {
   const parser = new DOMParser();
   const doc = parser.parseFromString(html, 'text/html');
   const {
@@ -18,6 +18,6 @@ const canRender = ({ type, literal }) => {
   return type === 'htmlBlock' && !isVideoFrame(literal);
 };
 
-const render = node => buildUneditableHtmlAsTextTokens(node);
+const render = (node) => buildUneditableHtmlAsTextTokens(node);
 
 export default { canRender, render };

app/assets/javascripts/vue_shared/components/rich_content_editor/services/renderers/render_identifier_instance_text.js

@@ -17,7 +17,7 @@ Regexp notes:
 */
 const identifierInstanceRegex = /((?:\[.+?\]){1}(?:\[\]|\[.+?\])?(?!:))/g;
 
-const isIdentifierInstance = literal => {
+const isIdentifierInstance = (literal) => {
   // Reset lastIndex as global flag in regexp are stateful (https://stackoverflow.com/a/11477448)
   identifierInstanceRegex.lastIndex = 0;
   return identifierInstanceRegex.test(literal);
@@ -25,9 +25,9 @@ const isIdentifierInstance = literal => {
 
 const canRender = ({ literal }) => isIdentifierInstance(literal);
 
-const tokenize = text => {
+const tokenize = (text) => {
   const matches = text.split(identifierInstanceRegex);
-  const tokens = matches.map(match => {
+  const tokens = matches.map((match) => {
     const token = buildTextToken(match);
     return isIdentifierInstance(match) ? buildUneditableInlineTokens(token) : token;
   });

app/assets/javascripts/vue_shared/components/rich_content_editor/services/renderers/render_identifier_paragraph.js

 const identifierRegex = /(^\[.+\]: .+)/;
 
-const isIdentifier = text => {
+const isIdentifier = (text) => {
   return identifierRegex.test(text);
 };
 

app/assets/javascripts/vue_shared/components/rich_content_editor/services/renderers/render_softbreak.js

-const canRender = node => ['emph', 'strong'].includes(node.parent?.type);
+const canRender = (node) => ['emph', 'strong'].includes(node.parent?.type);
 const render = () => ({
   type: 'text',
   content: ' ',

app/assets/javascripts/vue_shared/components/rich_content_editor/services/renderers/render_utils.js

@@ -11,9 +11,9 @@ export const renderUneditableBranch = (_, { entering, origin }) =>
 
 const attributeDefinitionRegexp = /(^{:.+}$)/;
 
-export const isAttributeDefinition = text => attributeDefinitionRegexp.test(text);
+export const isAttributeDefinition = (text) => attributeDefinitionRegexp.test(text);
 
-const findAttributeDefinition = node => {
+const findAttributeDefinition = (node) => {
   const literal =
     node?.next?.firstChild?.literal || node?.firstChild?.firstChild?.next?.next?.literal; // for headings // for list items;