Enable vue/no-mutating-props rule

Existing violations of this rule have been specifically ignored, as
fixing each one requires non-trivial work to fix.

Addresses https://gitlab.com/gitlab-org/gitlab/-/issues/297222, part of
https://gitlab.com/groups/gitlab-org/-/epics/5168.

.eslintrc.yml

@@ -43,15 +43,6 @@ rules:
   promise/always-return: off
   promise/no-callback-in-promise: off
   "@gitlab/no-global-event-off": error
-
-  # BEGIN eslint-plugin-vue@7 overrides
-  # TODO: Remove these rules as part of
-  # https://gitlab.com/groups/gitlab-org/-/epics/5142. These are setting
-  # various vue lint rules as they were in eslint-plugin-vue@6, or disabling
-  # new ones, to ease migration to v7, so violations of each can be fixed
-  # separately.
-  vue/no-mutating-props: off
-  # END eslint-plugin-vue@7 overrides
 overrides:
   - files:
       - '**/spec/**/*'

app/assets/javascripts/boards/components/board_column_deprecated.vue

@@ -46,6 +46,7 @@ export default {
   watch: {
     filter: {
       handler() {
+        // eslint-disable-next-line vue/no-mutating-props
         this.list.page = 1;
         this.list.getIssues(true).catch(() => {
           // TODO: handle request error

app/assets/javascripts/boards/components/board_list_deprecated.vue

@@ -63,6 +63,7 @@ export default {
   watch: {
     filters: {
       handler() {
+        // eslint-disable-next-line vue/no-mutating-props
         this.list.loadingMore = false;
         this.$refs.list.scrollTop = 0;
       },
@@ -75,6 +76,7 @@ export default {
           this.list.issuesSize > this.list.issues.length &&
           this.list.isExpanded
         ) {
+          // eslint-disable-next-line vue/no-mutating-props
           this.list.page += 1;
           this.list.getIssues(false).catch(() => {
             // TODO: handle request error
@@ -283,6 +285,7 @@ export default {
                * issue indexes are far apart, this logic should ever kick in.
                */
               setTimeout(() => {
+                // eslint-disable-next-line vue/no-mutating-props
                 this.list.issues.splice(i, 1);
               }, 0);
             });
@@ -386,10 +389,12 @@ export default {
     loadNextPage() {
       const getIssues = this.list.nextPage();
       const loadingDone = () => {
+        // eslint-disable-next-line vue/no-mutating-props
         this.list.loadingMore = false;
       };
 
       if (getIssues) {
+        // eslint-disable-next-line vue/no-mutating-props
         this.list.loadingMore = true;
         getIssues.then(loadingDone).catch(loadingDone);
       }

app/assets/javascripts/boards/components/board_list_header.vue

@@ -147,6 +147,7 @@ export default {
       eventHub.$emit(`toggle-issue-form-${this.list.id}`);
     },
     toggleExpanded() {
+      // eslint-disable-next-line vue/no-mutating-props
       this.list.collapsed = !this.list.collapsed;
 
       if (!this.isLoggedIn) {

app/assets/javascripts/boards/components/board_list_header_deprecated.vue

@@ -131,6 +131,7 @@ export default {
       eventHub.$emit(`toggle-issue-form-${this.list.id}`);
     },
     toggleExpanded() {
+      // eslint-disable-next-line vue/no-mutating-props
       this.list.isExpanded = !this.list.isExpanded;
 
       if (!this.isLoggedIn) {

app/assets/javascripts/clusters/components/applications.vue

@@ -349,6 +349,7 @@ export default {
               {{ s__('ClusterIntegration|Issuer Email') }}
             </label>
             <div class="input-group">
+              <!-- eslint-disable vue/no-mutating-props -->
               <input
                 id="cert-manager-issuer-email"
                 v-model="applications.cert_manager.email"
@@ -356,6 +357,7 @@ export default {
                 type="text"
                 class="form-control js-email"
               />
+              <!-- eslint-enable vue/no-mutating-props -->
             </div>
             <p class="form-text text-muted">
               {{
@@ -522,6 +524,7 @@ export default {
               <label for="jupyter-hostname">{{ s__('ClusterIntegration|Jupyter Hostname') }}</label>
 
               <div class="input-group">
+                <!-- eslint-disable vue/no-mutating-props -->
                 <input
                   id="jupyter-hostname"
                   v-model="applications.jupyter.hostname"
@@ -529,6 +532,7 @@ export default {
                   type="text"
                   class="form-control js-hostname"
                 />
+                <!-- eslint-enable vue/no-mutating-props -->
                 <span class="input-group-append">
                   <clipboard-button
                     :text="jupyterHostname"

app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue

@@ -130,9 +130,11 @@ export default {
     },
     resetStatus() {
       if (this.initialMode !== null) {
+        // eslint-disable-next-line vue/no-mutating-props
         this.ingress.modsecurity_mode = this.initialMode;
       }
       if (this.initialValue !== null) {
+        // eslint-disable-next-line vue/no-mutating-props
         this.ingress.modsecurity_enabled = this.initialValue;
       }
       this.initialValue = null;

app/assets/javascripts/ide/components/preview/navigator.vue

@@ -78,6 +78,7 @@ export default {
       this.visitPath(this.path);
     },
     visitPath(path) {
+      // eslint-disable-next-line vue/no-mutating-props
       this.manager.iframe.src = `${this.manager.bundlerURL}${path}`;
     },
   },

app/assets/javascripts/issue_show/components/description.vue

@@ -154,6 +154,7 @@ export default {
       }"
       class="md"
     ></div>
+    <!-- eslint-disable vue/no-mutating-props -->
     <textarea
       v-if="descriptionText"
       ref="textarea"
@@ -163,6 +164,7 @@ export default {
       dir="auto"
     >
     </textarea>
+    <!-- eslint-enable vue/no-mutating-props -->
 
     <recaptcha-modal v-show="showRecaptcha" :html="recaptchaHTML" @close="closeRecaptcha" />
   </div>

app/assets/javascripts/issue_show/components/fields/description.vue

@@ -49,6 +49,7 @@ export default {
       :textarea-value="formState.description"
     >
       <template #textarea>
+        <!-- eslint-disable vue/no-mutating-props -->
         <textarea
           id="issue-description"
           ref="textarea"
@@ -62,6 +63,7 @@ export default {
           @keydown.ctrl.enter="updateIssuable"
         >
         </textarea>
+        <!-- eslint-enable vue/no-mutating-props -->
       </template>
     </markdown-field>
   </div>

app/assets/javascripts/issue_show/components/fields/description_template.vue

@@ -35,6 +35,7 @@ export default {
     // Create the editor for the template
     const editor = document.querySelector('.detail-page-description .note-textarea') || {};
     editor.setValue = (val) => {
+      // eslint-disable-next-line vue/no-mutating-props
       this.formState.description = val;
     };
     editor.getValue = () => this.formState.description;

app/assets/javascripts/issue_show/components/fields/title.vue

@@ -15,6 +15,7 @@ export default {
 <template>
   <fieldset>
     <label class="sr-only" for="issuable-title">{{ __('Title') }}</label>
+    <!-- eslint-disable vue/no-mutating-props -->
     <input
       id="issuable-title"
       ref="input"
@@ -27,5 +28,6 @@ export default {
       @keydown.meta.enter="updateIssuable"
       @keydown.ctrl.enter="updateIssuable"
     />
+    <!-- eslint-enable vue/no-mutating-props -->
   </fieldset>
 </template>

app/assets/javascripts/merge_conflicts/components/diff_file_editor.js

@@ -90,9 +90,11 @@ import { __ } from '~/locale';
         this.saved = true;
 
         // This probably be better placed in the data provider
+        /* eslint-disable vue/no-mutating-props */
         this.file.content = this.editor.getValue();
         this.file.resolveEditChanged = this.file.content !== this.originalContent;
         this.file.promptDiscardConfirmation = false;
+        /* eslint-enable vue/no-mutating-props */
       },
       resetEditorContent() {
         if (this.fileLoaded) {

app/assets/javascripts/notes/components/note_body.vue

@@ -156,6 +156,7 @@ export default {
       @handleFormUpdate="handleFormUpdate"
       @cancelForm="formCancelHandler"
     />
+    <!-- eslint-disable vue/no-mutating-props -->
     <textarea
       v-if="canEdit"
       v-model="note.note"
@@ -163,6 +164,7 @@ export default {
       class="hidden js-task-list-field"
       dir="auto"
     ></textarea>
+    <!-- eslint-enable vue/no-mutating-props -->
     <note-edited-text
       v-if="note.last_edited_at"
       :edited-at="note.last_edited_at"

app/assets/javascripts/notes/components/noteable_note.vue

@@ -289,6 +289,7 @@ export default {
       };
       this.isRequesting = true;
       this.oldContent = this.note.note_html;
+      // eslint-disable-next-line vue/no-mutating-props
       this.note.note_html = escape(noteText);
 
       this.updateNote(data)
@@ -321,6 +322,7 @@ export default {
       }
       this.$refs.noteBody.resetAutoSave();
       if (this.oldContent) {
+        // eslint-disable-next-line vue/no-mutating-props
         this.note.note_html = this.oldContent;
         this.oldContent = null;
       }
@@ -330,6 +332,7 @@ export default {
     recoverNoteContent(noteText) {
       // we need to do this to prevent noteForm inconsistent content warning
       // this is something we intentionally do so we need to recover the content
+      // eslint-disable-next-line vue/no-mutating-props
       this.note.note = noteText;
       const { noteBody } = this.$refs;
       if (noteBody) {

app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue

@@ -48,11 +48,11 @@ export default {
     /*
       In issue list, "time-tracking-collapsed-state" is always rendered even if the sidebar isn't collapsed.
       The actual hiding is controlled with css classes:
-        Hide "time-tracking-collapsed-state" 
+        Hide "time-tracking-collapsed-state"
           if .right-sidebar .right-sidebar-collapsed .sidebar-collapsed-icon
         Show "time-tracking-collapsed-state"
           if .right-sidebar .right-sidebar-expanded .sidebar-collapsed-icon
-      
+
       In Swimlanes sidebar, we do not use collapsed state at all.
     */
     showCollapsed: {
@@ -99,10 +99,12 @@ export default {
     update(data) {
       const { timeEstimate, timeSpent, humanTimeEstimate, humanTimeSpent } = data;
 
+      /* eslint-disable vue/no-mutating-props */
       this.timeEstimate = timeEstimate;
       this.timeSpent = timeSpent;
       this.humanTimeEstimate = humanTimeEstimate;
       this.humanTimeSpent = humanTimeSpent;
+      /* eslint-enable vue/no-mutating-props */
     },
   },
 };

app/assets/javascripts/snippets/components/snippet_blob_view.vue

@@ -31,8 +31,10 @@ export default {
       },
       result() {
         if (this.activeViewerType === RICH_BLOB_VIEWER) {
+          // eslint-disable-next-line vue/no-mutating-props
           this.blob.richViewer.renderError = null;
         } else {
+          // eslint-disable-next-line vue/no-mutating-props
           this.blob.simpleViewer.renderError = null;
         }
       },

ee/app/assets/javascripts/analytics/cycle_analytics/components/create_value_stream_form/custom_stage_fields.vue

@@ -97,6 +97,7 @@ export default {
         :invalid-feedback="fieldErrorMessage('name')"
         :data-testid="`custom-stage-name-${index}`"
       >
+        <!-- eslint-disable vue/no-mutating-props -->
         <gl-form-input
           v-model.trim="stage.name"
           :name="`custom-stage-name-${index}`"
@@ -104,6 +105,7 @@ export default {
           required
           @input="$emit('input', { field: 'name', value: $event })"
         />
+        <!-- eslint-enable vue/no-mutating-props -->
       </gl-form-group>
       <stage-field-actions
         v-if="hasMultipleStages"

ee/app/assets/javascripts/analytics/cycle_analytics/components/create_value_stream_form/default_stage_fields.vue

@@ -69,6 +69,7 @@ export default {
         :state="isValid('name')"
         :invalid-feedback="renderError('name')"
       >
+        <!-- eslint-disable vue/no-mutating-props -->
         <gl-form-input
           v-model.trim="stage.name"
           :name="`create-value-stream-stage-${index}`"
@@ -76,6 +77,7 @@ export default {
           required
           @input="$emit('input', $event)"
         />
+        <!-- eslint-enable vue/no-mutating-props -->
       </gl-form-group>
       <stage-field-actions
         :index="index"

ee/app/assets/javascripts/analytics/merge_request_analytics/components/app.vue

@@ -37,7 +37,9 @@ export default {
   },
   methods: {
     setDateRange({ startDate, endDate }) {
+      // eslint-disable-next-line vue/no-mutating-props
       this.startDate = startDate;
+      // eslint-disable-next-line vue/no-mutating-props
       this.endDate = endDate;
     },
   },

ee/app/assets/javascripts/boards/components/assignee_select.vue

@@ -89,7 +89,9 @@ export default {
           id: undefined,
         };
       }
+      // eslint-disable-next-line vue/no-mutating-props
       this.board.assignee_id = assignee.id;
+      // eslint-disable-next-line vue/no-mutating-props
       this.board.assignee = assignee;
     },
   },

ee/app/assets/javascripts/boards/components/board_scope.vue

@@ -74,8 +74,10 @@ export default {
   methods: {
     handleLabelClick(label) {
       if (label.isAny) {
+        // eslint-disable-next-line vue/no-mutating-props
         this.board.labels = [];
       } else if (!this.board.labels.find((l) => l.id === label.id)) {
+        // eslint-disable-next-line vue/no-mutating-props
         this.board.labels.push(
           new ListLabel({
             id: label.id,
@@ -87,6 +89,7 @@ export default {
       } else {
         let { labels } = this.board;
         labels = labels.filter((selected) => selected.id !== label.id);
+        // eslint-disable-next-line vue/no-mutating-props
         this.board.labels = labels;
       }
     },
@@ -145,12 +148,14 @@ export default {
         wrapper-class="assignee"
       />
 
+      <!-- eslint-disable vue/no-mutating-props -->
       <board-weight-select
         v-model="board.weight"
         :board="board"
         :weights="weights"
         :can-edit="canAdminBoard"
       />
+      <!-- eslint-enable vue/no-mutating-props -->
     </div>
   </div>
 </template>

ee/app/assets/javascripts/boards/components/milestone_select.vue

@@ -65,7 +65,9 @@ export default {
       } else if (milestone.title === NO_MILESTONE) {
         id = 0;
       }
+      // eslint-disable-next-line vue/no-mutating-props
       this.board.milestone_id = id;
+      // eslint-disable-next-line vue/no-mutating-props
       this.board.milestone = {
         ...milestone,
         id,

ee/app/assets/javascripts/boards/components/weight_select.vue

@@ -50,6 +50,7 @@ export default {
       this.$refs.dropdown.$children[0].show();
     },
     selectWeight(weight) {
+      // eslint-disable-next-line vue/no-mutating-props
       this.board.weight = this.weightInt(weight);
       this.dropdownHidden = true;
     },

ee/app/assets/javascripts/geo_node_form/components/geo_node_form_capacities.vue

@@ -105,6 +105,7 @@ export default {
       :state="Boolean(formErrors[formGroup.key])"
       :invalid-feedback="formErrors[formGroup.key]"
     >
+      <!-- eslint-disable vue/no-mutating-props -->
       <gl-form-input
         :id="formGroup.id"
         v-model="nodeData[formGroup.key]"
@@ -113,6 +114,7 @@ export default {
         type="number"
         @update="checkCapacity(formGroup)"
       />
+      <!-- eslint-enable vue/no-mutating-props -->
     </gl-form-group>
   </div>
 </template>

ee/app/assets/javascripts/geo_node_form/components/geo_node_form_core.vue

@@ -72,6 +72,7 @@ export default {
         :class="{ 'is-invalid': Boolean(formErrors.name) }"
         class="gl-display-flex gl-align-items-center"
       >
+        <!-- eslint-disable vue/no-mutating-props -->
         <gl-form-input
           id="node-name-field"
           v-model="nodeData.name"
@@ -81,6 +82,7 @@ export default {
           type="text"
           @update="checkName"
         />
+        <!-- eslint-enable vue/no-mutating-props -->
         <span class="gl-text-gray-500 m-n5 gl-z-index-2">{{ 255 - nodeData.name.length }}</span>
       </div>
     </gl-form-group>
@@ -109,6 +111,7 @@ export default {
           :class="{ 'is-invalid': Boolean(formErrors.url) }"
           class="gl-display-flex gl-align-items-center"
         >
+          <!-- eslint-disable vue/no-mutating-props -->
           <gl-form-input
             id="node-url-field"
             v-model="nodeData.url"
@@ -118,6 +121,7 @@ export default {
             type="text"
             @update="checkUrl"
           />
+          <!-- eslint-enable vue/no-mutating-props -->
           <span class="gl-text-gray-500 m-n5 gl-z-index-2">{{ 255 - nodeData.url.length }}</span>
         </div>
       </gl-form-group>
@@ -149,12 +153,14 @@ export default {
           </gl-sprintf>
         </template>
         <div class="gl-display-flex gl-align-items-center">
+          <!-- eslint-disable vue/no-mutating-props -->
           <gl-form-input
             id="node-internal-url-field"
             v-model="nodeData.internalUrl"
             class="gl-pr-8!"
             type="text"
           />
+          <!-- eslint-enable vue/no-mutating-props -->
           <span class="gl-text-gray-500 m-n5 gl-z-index-2">{{
             255 - nodeData.internalUrl.length
           }}</span>

ee/app/assets/javascripts/geo_node_form/components/geo_node_form_selective_sync.vue

@@ -67,6 +67,7 @@ export default {
       label-for="node-selective-synchronization-field"
       :description="__('Choose specific groups or storage shards')"
     >
+      <!-- eslint-disable vue/no-mutating-props -->
       <gl-form-select
         id="node-selective-synchronization-field"
         v-model="nodeData.selectiveSyncType"
@@ -75,6 +76,7 @@ export default {
         text-field="label"
         class="col-sm-3"
       />
+      <!-- eslint-enable vue/no-mutating-props -->
     </gl-form-group>
     <gl-form-group
       v-if="selectiveSyncNamespaces"
@@ -120,9 +122,11 @@ export default {
           </template>
         </gl-sprintf>
       </template>
+      <!-- eslint-disable vue/no-mutating-props -->
       <gl-form-checkbox id="node-object-storage-field" v-model="nodeData.syncObjectStorage">{{
         __('Allow this secondary node to replicate content on Object Storage')
       }}</gl-form-checkbox>
+      <!-- eslint-enable vue/no-mutating-props -->
     </gl-form-group>
   </div>
 </template>

ee/app/assets/javascripts/group_member_contributions/components/app.vue

@@ -31,6 +31,8 @@ export default {
   },
   methods: {
     handleColumnClick(columnName) {
+      // This is probably a false positive.
+      // eslint-disable-next-line vue/no-mutating-props
       this.store.sortMembers(columnName);
     },
   },

ee/app/assets/javascripts/roadmap/components/epic_item.vue

@@ -115,6 +115,7 @@ export default {
       if (this.epic.newEpic) {
         this.$nextTick(() => {
           delay(() => {
+            // eslint-disable-next-line vue/no-mutating-props
             this.epic.newEpic = false;
           }, EPIC_HIGHLIGHT_REMOVE_AFTER);
         });
@@ -142,7 +143,7 @@ export default {
         class="epic-timeline-cell"
         data-qa-selector="epic_timeline_cell"
       >
-        <!-- 
+        <!--
           CurrentDayIndicator internally checks if a given timeframeItem is for today.
           However, we are doing a duplicate check (index === todaysIndex) here -
           so that the the indicator is rendered once.

ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_rule_builder.vue

@@ -83,6 +83,7 @@ export default {
       },
       set(value) {
         const { field } = this.currentRuleComponent;
+        // eslint-disable-next-line vue/no-mutating-props
         this.rule[field] = value;
       },
     },
@@ -158,12 +159,14 @@ export default {
         </template>
 
         <template #ruleDirection>
+          <!-- eslint-disable vue/no-mutating-props -->
           <gl-form-select
             id="direction"
             v-model="rule.direction"
             class="gl-mr-4 gl-mb-5"
             :options="$options.trafficDirections"
           />
+          <!-- eslint-enable vue/no-mutating-props -->
         </template>
 
         <template #ruleSelector>
@@ -212,6 +215,7 @@ export default {
         </template>
 
         <template #ports>
+          <!-- eslint-disable vue/no-mutating-props -->
           <gl-form-select
             id="portMatch"
             v-model="rule.portMatchMode"
@@ -228,6 +232,7 @@ export default {
             placeholder="80/tcp"
           />
           <!-- eslint-enable @gitlab/vue-require-i18n-attribute-strings -->
+          <!-- eslint-enable vue/no-mutating-props -->
         </template>
       </gl-sprintf>
     </gl-form>