Enable "prefer-destructuring" in JS files

Partially addresses #47006.

.eslintrc.yml

@@ -69,5 +69,3 @@ rules:
       FunctionExpression:
         parameters: 1
         body: 1
-  ## Destructuring: https://eslint.org/docs/rules/prefer-destructuring
-  prefer-destructuring: off

app/assets/javascripts/ajax_loading_spinner.js

@@ -26,7 +26,7 @@ export default class AjaxLoadingSpinner {
   }
   static toggleLoadingIcon(iconElement) {
-    const classList = iconElement.classList;
+    const { classList } = iconElement;
     classList.toggle(iconElement.dataset.icon);
     classList.toggle('fa-spinner');
     classList.toggle('fa-spin');

app/assets/javascripts/behaviors/copy_to_clipboard.js

@@ -52,7 +52,7 @@ export default function initCopyToClipboard() {
    * data types to the intended values.
    */
   $(document).on('copy', 'body > textarea[readonly]', (e) => {
-    const clipboardData = e.originalEvent.clipboardData;
+    const { clipboardData } = e.originalEvent;
     if (!clipboardData) return;
     const text = e.target.value;

app/assets/javascripts/behaviors/markdown/copy_as_gfm.js

@@ -321,7 +321,7 @@ export class CopyAsGFM {
   }
   static copyAsGFM(e, transformer) {
-    const clipboardData = e.originalEvent.clipboardData;
+    const { clipboardData } = e.originalEvent;
     if (!clipboardData) return;
     const documentFragment = getSelectedFragment();
@@ -338,7 +338,7 @@ export class CopyAsGFM {
   }
   static pasteGFM(e) {
-    const clipboardData = e.originalEvent.clipboardData;
+    const { clipboardData } = e.originalEvent;
     if (!clipboardData) return;
     const text = clipboardData.getData('text/plain');

app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js

@@ -84,7 +84,7 @@ class BalsamiqViewer {
   renderTemplate(preview) {
     const resource = this.getResource(preview.resourceID);
     const name = BalsamiqViewer.parseTitle(resource);
-    const image = preview.image;
+    const { image } = preview;
     const template = PREVIEW_TEMPLATE({
       name,

app/assets/javascripts/blob/balsamiq_viewer.js

@@ -12,7 +12,7 @@ export default function loadBalsamiqFile() {
   if (!(viewer instanceof Element)) return;
-  const endpoint = viewer.dataset.endpoint;
+  const { endpoint } = viewer.dataset;
   const balsamiqViewer = new BalsamiqViewer(viewer);
   balsamiqViewer.loadFile(endpoint).catch(onError);

app/assets/javascripts/blob/stl_viewer.js

@@ -5,7 +5,7 @@ export default () => {
   [].slice.call(document.querySelectorAll('.js-material-changer')).forEach((el) => {
     el.addEventListener('click', (e) => {
-      const target = e.target;
+      const { target } = e;
       e.preventDefault();

app/assets/javascripts/boards/components/sidebar/remove_issue.vue

@@ -23,7 +23,7 @@
     },
     methods: {
       removeIssue() {
-        const issue = this.issue;
+        const { issue } = this;
         const lists = issue.getLists();
         const listLabelIds = lists.map(list => list.label.id);

app/assets/javascripts/boards/index.js

@@ -121,7 +121,7 @@ export default () => {
         this.filterManager.updateTokens();
       },
       updateDetailIssue(newIssue) {
-        const sidebarInfoEndpoint = newIssue.sidebarInfoEndpoint;
+        const { sidebarInfoEndpoint } = newIssue;
         if (sidebarInfoEndpoint && newIssue.subscribed === undefined) {
           newIssue.setFetchingState('subscriptions', true);
           BoardService.getIssueInfo(sidebarInfoEndpoint)
@@ -144,7 +144,7 @@ export default () => {
         Store.detail.issue = {};
       },
       toggleSubscription(id) {
-        const issue = Store.detail.issue;
+        const { issue } = Store.detail;
         if (issue.id === id && issue.toggleSubscriptionEndpoint) {
           issue.setFetchingState('subscriptions', true);
           BoardService.toggleIssueSubscription(issue.toggleSubscriptionEndpoint)

app/assets/javascripts/boards/stores/modal_store.js

@@ -26,7 +26,7 @@ class ModalStore {
   toggleIssue(issueObj) {
     const issue = issueObj;
-    const selected = issue.selected;
+    const { selected } = issue;
     issue.selected = !selected;

app/assets/javascripts/clusters/clusters_bundle.js

@@ -81,7 +81,7 @@ export default class Clusters {
   }
   initApplications() {
-    const store = this.store;
+    const { store } = this;
     const el = document.querySelector('#js-cluster-applications');
     this.applications = new Vue({

app/assets/javascripts/commit/image_file.js

@@ -122,7 +122,7 @@ export default class ImageFile {
       return $('.swipe.view', this.file).each((function(_this) {
         return function(index, view) {
           var $swipeWrap, $swipeBar, $swipeFrame, wrapPadding, ref;
-          ref = _this.prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1];
+          ref = _this.prepareFrames(view), [maxWidth, maxHeight] = ref;
           $swipeFrame = $('.swipe-frame', view);
           $swipeWrap = $('.swipe-wrap', view);
           $swipeBar = $('.swipe-bar', view);
@@ -159,7 +159,7 @@ export default class ImageFile {
       return $('.onion-skin.view', this.file).each((function(_this) {
         return function(index, view) {
           var $frame, $track, $dragger, $frameAdded, framePadding, ref, dragging = false;
-          ref = _this.prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1];
+          ref = _this.prepareFrames(view), [maxWidth, maxHeight] = ref;
           $frame = $('.onion-skin-frame', view);
           $frameAdded = $('.frame.added', view);
           $track = $('.drag-track', view);

app/assets/javascripts/create_merge_request_dropdown.js

@@ -281,7 +281,7 @@ export default class CreateMergeRequestDropdown {
     if (event.target === this.branchInput) {
       target = 'branch';
-      value = this.branchInput.value;
+      ({ value } = this.branchInput);
     } else if (event.target === this.refInput) {
       target = 'ref';
       value =

app/assets/javascripts/diff_notes/components/diff_note_avatars.js

@@ -111,7 +111,7 @@ const DiffNoteAvatars = Vue.extend({
       });
     },
     addNoCommentClass() {
-      const notesCount = this.notesCount;
+      const { notesCount } = this;
       $(this.$el).closest('.js-avatar-container')
         .toggleClass('no-comment-btn', notesCount > 0)

app/assets/javascripts/diff_notes/components/jump_to_discussion.js

@@ -73,7 +73,7 @@ const JumpToDiscussion = Vue.extend({
         }).toArray();
       };
-      const discussions = this.discussions;
+      const { discussions } = this;
       if (activeTab === 'diffs') {
         discussionsSelector = '.diffs .notes[data-discussion-id]';

app/assets/javascripts/diff_notes/diff_notes_bundle.js

@@ -18,7 +18,7 @@ import './components/new_issue_for_discussion';
 export default () => {
   const projectPathHolder =
     document.querySelector('.merge-request') || document.querySelector('.commit-box');
-  const projectPath = projectPathHolder.dataset.projectPath;
+  const { projectPath } = projectPathHolder.dataset;
   const COMPONENT_SELECTOR =
     'resolve-btn, resolve-discussion-btn, jump-to-discussion, comment-and-resolve-btn, new-issue-for-discussion-btn';

app/assets/javascripts/diffs/components/diff_gutter_avatars.vue

@@ -47,7 +47,7 @@ export default {
   methods: {
     ...mapActions(['toggleDiscussion']),
     getTooltipText(noteData) {
-      let note = noteData.note;
+      let { note } = noteData;
       if (note.length > LENGTH_OF_AVATAR_TOOLTIP) {
         note = truncate(note, LENGTH_OF_AVATAR_TOOLTIP);

app/assets/javascripts/diffs/components/diff_line_gutter_content.vue

@@ -124,7 +124,7 @@ export default {
       const newLineNumber = this.metaData.newPos || 0;
       const offset = newLineNumber - oldLineNumber;
       const bottom = this.isBottom;
-      const fileHash = this.fileHash;
+      const { fileHash } = this;
       const view = this.diffViewType;
       let unfold = true;
       let lineNumber = newLineNumber - 1;

app/assets/javascripts/diffs/components/parallel_diff_view.vue

@@ -89,7 +89,7 @@ export default {
       return isLeftExpanded || isRightExpanded;
     },
     getLineCode(line, side) {
-      const lineCode = side.lineCode;
+      const { lineCode } = side;
       if (lineCode) {
         return lineCode;
       }

app/assets/javascripts/environments/components/environment_item.vue

@@ -292,7 +292,7 @@
         if (this.model &&
           this.model.last_deployment &&
           this.model.last_deployment.deployable) {
-          const deployable = this.model.last_deployment.deployable;
+          const { deployable } = this.model.last_deployment;
           return `${deployable.name} #${deployable.id}`;
         }
         return '';