Merge branch 'fix-vue-no-lone-template' into 'master'

Fix vue/no-lone-template violations

See merge request gitlab-org/gitlab!51393

.eslintrc.yml

@@ -51,7 +51,6 @@ rules:
   # new ones, to ease migration to v7, so violations of each can be fixed
   # separately.
   vue/no-mutating-props: off
-  vue/no-lone-template: off
   # END eslint-plugin-vue@7 overrides
 overrides:
   - files:

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

@@ -88,7 +88,6 @@ export default {
         </gl-button>
       </div>
     </template>
-    <template>
     <gl-datepicker
       ref="datePicker"
       :value="parsedDueDate"
@@ -96,7 +95,6 @@ export default {
       @input="setDueDate"
       @clear="setDueDate(null)"
     />
-    </template>
   </board-editable-item>
 </template>
 <style>

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

@@ -136,7 +136,6 @@ export default {
     <template #collapsed>
       <span class="gl-text-gray-800">{{ issue.referencePath }}</span>
     </template>
-    <template>
     <gl-alert v-if="showChangesAlert" variant="warning" class="gl-mb-5" :dismissible="false">
       {{ $options.i18n.reviewYourChanges }}
     </gl-alert>
@@ -166,6 +165,5 @@ export default {
         </gl-button>
       </div>
     </gl-form>
-    </template>
   </board-editable-item>
 </template>

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

@@ -122,7 +122,6 @@ export default {
     <template v-if="hasMilestone" #collapsed>
       <strong class="gl-text-gray-900">{{ activeIssue.milestone.title }}</strong>
     </template>
-    <template>
     <gl-dropdown
       ref="dropdown"
       :text="dropdownText"
@@ -156,6 +155,5 @@ export default {
         {{ $options.i18n.noMilestonesFound }}
       </gl-dropdown-text>
     </gl-dropdown>
-    </template>
   </board-editable-item>
 </template>

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

@@ -131,7 +131,6 @@ export default {
       :title="modalTitle"
       kind="danger"
     >
-      <template>
       <p>{{ warningMessage }}</p>
       <div v-if="confirmCleanup">
         {{ s__('ClusterIntegration|This will permanently delete the following resources:') }}
@@ -172,7 +171,6 @@ export default {
           'ClusterIntegration|If you do not wish to delete all associated GitLab resources, you can simply remove the integration.',
         )
       }}</span>
-      </template>
       <template #modal-footer>
         <gl-button variant="secondary" @click="handleCancel">{{ s__('Cancel') }}</gl-button>
         <template v-if="confirmCleanup">

app/assets/javascripts/feature_flags/components/feature_flags_tab.vue

@@ -68,7 +68,6 @@ export default {
       <span data-testid="feature-flags-tab-title">{{ title }}</span>
       <gl-badge size="sm" class="gl-tab-counter-badge">{{ itemCount }}</gl-badge>
     </template>
-    <template>
     <gl-alert
       v-for="(message, index) in alerts"
       :key="index"
@@ -103,6 +102,5 @@ export default {
       </template>
     </gl-empty-state>
     <slot> </slot>
-    </template>
   </gl-tab>
 </template>

app/assets/javascripts/jobs/components/environments_block.vue

@@ -201,9 +201,7 @@ export default {
             />
             <template v-else>{{ clusterNameOrLink.name }}</template>
           </template>
-          <template #kubernetesNamespace>
-            <template>{{ kubernetesNamespace }}</template>
-          </template>
+          <template #kubernetesNamespace>{{ kubernetesNamespace }}</template>
           <template #deploymentLink>
             <gl-link
               :href="deploymentLink.path"

app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue

@@ -85,7 +85,6 @@ export default {
 
 <template>
   <gl-modal ref="modal" modal-id="delete-user-modal" :title="modalTitle" kind="danger">
-    <template>
     <p>
       <gl-sprintf :message="content">
         <template #username>
@@ -116,7 +115,6 @@ export default {
         autocomplete="off"
       />
     </form>
-    </template>
     <template #modal-footer>
       <gl-button @click="onCancel">{{ s__('Cancel') }}</gl-button>
       <gl-button

app/assets/javascripts/pipelines/components/graph_shared/links_inner.vue

@@ -123,7 +123,6 @@ export default {
       :width="`${containerMeasurements.width}px`"
       :height="`${containerMeasurements.height}px`"
     >
-      <template>
       <path
         v-for="link in links"
         :key="link.path"
@@ -133,7 +132,6 @@ export default {
         :class="getLinkClasses(link)"
         :stroke-width="$options.STROKE_WIDTH"
       />
-      </template>
     </svg>
     <slot></slot>
   </div>

app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue

@@ -224,7 +224,6 @@ export default {
       data-testid="graph-container"
     >
       <svg :viewBox="viewBox" :width="width" :height="height" class="gl-absolute">
-        <template>
         <path
           v-for="link in links"
           :key="link.path"
@@ -234,7 +233,6 @@ export default {
           :class="getLinkClasses(link)"
           :stroke-width="$options.STROKE_WIDTH"
         />
-        </template>
       </svg>
       <div
         v-for="(stage, index) in pipelineStages"

app/assets/javascripts/serverless/components/functions.vue

@@ -69,7 +69,6 @@ export default {
 
     <div v-else-if="isInstalled">
       <div v-if="hasFunctionData">
-        <template>
         <div class="groups-list-tree-container js-functions-wrapper">
           <ul class="content-list group-list-tree">
             <environment-row
@@ -80,7 +79,6 @@ export default {
             />
           </ul>
         </div>
-        </template>
         <gl-loading-icon v-if="isLoading" size="lg" class="gl-mt-3 gl-mb-3 js-functions-loader" />
       </div>
       <div v-else class="empty-state js-empty-state">

app/assets/javascripts/static_site_editor/components/edit_drawer.vue

@@ -22,11 +22,6 @@ export default {
 <template>
   <gl-drawer class="gl-pt-8" :open="isOpen" @close="$emit('close')">
     <template #header>{{ __('Page settings') }}</template>
-    <template>
-      <front-matter-controls
-        :settings="settings"
-        @updateSettings="$emit('updateSettings', $event)"
-      />
-    </template>
+    <front-matter-controls :settings="settings" @updateSettings="$emit('updateSettings', $event)" />
   </gl-drawer>
 </template>

app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue

@@ -36,10 +36,8 @@ export default {
     aria-expanded="false"
   >
     <gl-loading-icon v-show="isLoading" :inline="true" />
-    <template>
     <slot v-if="$slots.default"></slot>
     <span v-else class="dropdown-toggle-text"> {{ toggleText }} </span>
-    </template>
     <gl-icon
       v-show="!isLoading"
       class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500"

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

@@ -60,9 +60,7 @@ export default {
     </div>
     <span v-if="canAttachFile" class="uploading-container">
       <span class="uploading-progress-container hide">
-        <template>
         <gl-icon name="media" />
-        </template>
         <span class="attaching-file-message"></span>
         <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings -->
         <span class="uploading-progress">0%</span>

ee/app/assets/javascripts/analytics/cycle_analytics/components/labels_selector.vue

@@ -144,7 +144,6 @@ export default {
       </slot>
     </template>
 
-    <template>
     <slot name="label-dropdown-list-header">
       <gl-dropdown-section-header>{{ __('Select a label') }} </gl-dropdown-section-header>
     </slot>
@@ -178,6 +177,5 @@ export default {
         {{ __('No matching labels') }}
       </div>
     </div>
-    </template>
   </gl-dropdown>
 </template>

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

@@ -51,7 +51,6 @@ export default {
   >
     <template #header>{{ __('Issue details') }}</template>
 
-    <template>
     <board-sidebar-issue-title />
     <board-assignee-dropdown />
     <board-sidebar-epic-select />
@@ -61,6 +60,5 @@ export default {
     <board-sidebar-labels-select />
     <board-sidebar-weight-input v-if="glFeatures.issueWeights" />
     <board-sidebar-subscription />
-    </template>
   </gl-drawer>
 </template>

ee/app/assets/javascripts/boards/components/sidebar/board_sidebar_epic_select.vue

@@ -81,7 +81,6 @@ export default {
         {{ storedEpic.title }}
       </a>
     </template>
-    <template>
     <epics-select
       ref="epicSelect"
       class="gl-w-full"
@@ -93,6 +92,5 @@ export default {
       :show-header="false"
       @onEpicSelect="setEpic"
     />
-    </template>
   </board-editable-item>
 </template>

ee/app/assets/javascripts/boards/components/sidebar/board_sidebar_weight_input.vue

@@ -87,7 +87,6 @@ export default {
         </gl-button>
       </div>
     </template>
-    <template>
     <gl-form @submit.prevent="handleFormSubmit()">
       <gl-form-input
         v-model.number="weight"
@@ -97,6 +96,5 @@ export default {
         :placeholder="__('Enter a number')"
       />
     </gl-form>
-    </template>
   </board-editable-item>
 </template>

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

@@ -233,9 +233,7 @@ export default {
       @cancel="hideNodeActionModal"
       @ok="handleNodeAction"
     >
-      <template>
       {{ modalMessage }}
-      </template>
     </gl-modal>
   </div>
 </template>

ee/app/assets/javascripts/incidents_settings/components/service_level_agreement_form.vue

@@ -144,10 +144,8 @@ export default {
             :options="$options.selectOptions"
           />
         </div>
-        <template name="valid-feedback">
-          <gl-form-text v-show="showValidFeedback" class="gl-font-base gl-text-gray-400!">
+        <template v-if="showValidFeedback" #description>
           {{ $options.i18n.validFeedback }}
-          </gl-form-text>
         </template>
       </gl-form-group>
       <gl-button variant="success" type="submit" :disabled="disableSubmit" :loading="loading">

ee/app/assets/javascripts/issue_show/components/incidents/metrics_tab.vue

@@ -93,13 +93,12 @@ export default {
       @primary.prevent="onUpload"
     >
       <p>{{ $options.i18n.modalDescription }}</p>
-      <gl-form-group :label="__('URL')" label-for="upload-url-input">
+      <gl-form-group
+        :label="__('URL')"
+        label-for="upload-url-input"
+        :description="s__('Incidents|Must start with http or https')"
+      >
         <gl-form-input id="upload-url-input" v-model="modalUrl" />
-        <template name="description">
-          <p class="gl-text-gray-500 gl-mt-3 gl-mb-0">
-            {{ s__('Incidents|Must start with http or https') }}
-          </p>
-        </template>
       </gl-form-group>
     </gl-modal>
     <metrics-image v-for="metric in metricImages" :key="metric.id" v-bind="metric" />

ee/app/assets/javascripts/requirements/components/requirement_form.vue

@@ -246,7 +246,6 @@ export default {
         />
       </div>
     </template>
-    <template>
     <issuable-body
       :issuable="requirementObject"
       :enable-edit="canEditRequirement"
@@ -298,6 +297,5 @@ export default {
         </div>
       </template>
     </issuable-body>
-    </template>
   </gl-drawer>
 </template>

ee/app/assets/javascripts/threat_monitoring/components/network_policy_list.vue

@@ -277,7 +277,6 @@ export default {
           </div>
         </div>
       </template>
-      <template>
       <div v-if="hasSelectedPolicy">
         <policy-drawer v-if="shouldShowCiliumDrawer" v-model="selectedPolicy.manifest" />
 
@@ -299,7 +298,6 @@ export default {
         <p>{{ s__('NetworkPolicies|Choose whether to enforce this policy.') }}</p>
         <gl-toggle v-model="selectedPolicy.isEnabled" data-testid="policyToggle" />
       </div>
-      </template>
     </gl-drawer>
   </div>
 </template>

ee/app/assets/javascripts/vue_shared/license_compliance/components/add_license_form.vue

@@ -101,7 +101,7 @@ export default {
           :aria-describedby="`js-${option.value}-license-radio`"
           :class="{ 'mb-3': isDescriptionEnabled }"
         >
-          <template>{{ option.label }}</template>
+          {{ option.label }}
           <div v-if="isDescriptionEnabled" class="text-secondary">
             {{ option.description }}
           </div>

ee/spec/frontend/incidents_settings/components/__snapshots__/service_level_agreement_form_spec.js.snap

@@ -59,16 +59,6 @@ exports[`Alert integration settings form should match the default snapshot 1`] =
           value="minutes"
         />
       </div>
-       
-      <gl-form-text-stub
-        class="gl-font-base gl-text-gray-400!"
-        tag="small"
-        textvariant="muted"
-      >
-        
-          Time limit must be a multiple of 15 minutes
-        
-      </gl-form-text-stub>
     </gl-form-group-stub>
      
     <gl-button-stub

ee/spec/frontend/vue_shared/license_compliance/components/__snapshots__/add_license_form_spec.js.snap

@@ -7,7 +7,9 @@ exports[`AddLicenseForm template does not show radio button descriptions, if lic
   data-qa-selector="approved_license_radio"
   value="approved"
 >
+  
         Allow
+        
   <!---->
 </gl-form-radio-stub>
 `;
@@ -19,7 +21,9 @@ exports[`AddLicenseForm template does not show radio button descriptions, if lic
   data-qa-selector="blacklisted_license_radio"
   value="blacklisted"
 >
+  
         Deny
+        
   <!---->
 </gl-form-radio-stub>
 `;