Skip to content

Fix vue/no-deprecated-slot-attribute violation(s) in src/components/charts/discrete_scatter/discrete_scatter.vue

The file src/components/charts/discrete_scatter/discrete_scatter.vue violates the recently enabled vue/no-deprecated-slot-attribute rule.

Migrating to the newer slot syntax is a requirement for us to be able to adopt Vue 3.

What to do

In broad strokes, migrating this component will involve:

  1. Updating the template to use the newer slot syntax
  2. Fixing tests and/or adding tests in GitLab UI
  3. Creating an integration MR with GitLab, and fixing its tests

Updating the template

This is the easy part! It's usually as simple as one of these example diffs:

-  <template slot="first">
+  <template #first>
-  <div slot="foo">Slot content</div>
+  <template #foo>
+    <div>Slot content</div>
+  </template>
-  <slot slot="foo" name="foo">Slot default content</slot>
+  <template #foo>
+    <slot name="foo">Slot default content</slot>
+  </template>
-  <slot v-for="slot in Object.keys($slots)" :slot="slot" :name="slot"></slot>
+  <template v-for="slot in Object.keys($slots)" #[slot]>
+    <slot :name="slot"></slot>
+  </template>
-  <slot v-for="slot in Object.keys($scopedSlots)" :slot="slot" :name="slot" slot-scope="scope"></slot>
+  <template v-for="slot in Object.keys($scopedSlots)" #[slot]="scope">
+    <slot :name="slot" v-bind="scope"></slot>
+  </template>

Some components will require more work if they have conditional slot rendering.

Fixing GitLab UI tests

  1. If there are no failing tests, verify that the slot content is actually being tested somehow, and write a new test covering this if not.
  2. If there are failing tests, fix them!

Creating an integration MR with GitLab

  1. Once your MR for GitLab UI is in good shape, create an integration MR against GitLab using the create_integration_branch manual CI job.
  2. Fix any test failures.