Merge branch 'nicolasdular/experiment-vue-component-rename' into 'master'

Rename experiment vue component

See merge request gitlab-org/gitlab!60444

app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue

 <script>
 import { GlEmptyState } from '@gitlab/ui';
-import Experiment from '~/experimentation/components/experiment.vue';
+import GitlabExperiment from '~/experimentation/components/gitlab_experiment.vue';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { s__ } from '~/locale';
 import PipelinesCiTemplates from './pipelines_ci_templates.vue';
@@ -17,7 +17,7 @@ export default {
   name: 'PipelinesEmptyState',
   components: {
     GlEmptyState,
-    Experiment,
+    GitlabExperiment,
     PipelinesCiTemplates,
   },
   props: {
@@ -39,7 +39,7 @@ export default {
 </script>
 <template>
   <div>
-    <experiment name="pipeline_empty_state_templates">
+    <gitlab-experiment name="pipeline_empty_state_templates">
       <template #control>
         <gl-empty-state
           v-if="canSetCi"
@@ -59,6 +59,6 @@ export default {
       <template #candidate>
         <pipelines-ci-templates />
       </template>
-    </experiment>
+    </gitlab-experiment>
   </div>
 </template>

doc/development/experiment_guide/gitlab_experiment.md

@@ -503,7 +503,7 @@ so you can use it when resolving some concepts around experimentation in the cli
 
 ### Use experiments in Vue
 
-With the `experiment` component, you can define slots that match the name of the
+With the `gitlab-experiment` component, you can define slots that match the name of the
 variants pushed to `window.gon.experiment`. For example, if we alter the `pill_color`
 experiment to just use the default variants of `control` and `candidate` like so:
 
@@ -520,15 +520,15 @@ We can make use of the named slots `control` and `candidate` in the Vue componen
 
 ```vue
 <script>
-import Experiment from '~/experimentation/components/experiment.vue';
+import GitlabExperiment from '~/experimentation/components/gitlab_experiment.vue';
 
 export default {
-  components: { Experiment }
+  components: { GitlabExperiment }
 }
 </script>
 
 <template>
-  <experiment name="pill_color">
+  <gitlab-experiment name="pill_color">
     <template #control>
       <button class="bg-default">Click default button</button>
     </template>
@@ -536,7 +536,7 @@ export default {
     <template #candidate>
       <button class="bg-red">Click red button</button>
     </template>
-  </experiment>
+  </gitlab-experiment>
 </template>
 ```
 
@@ -545,7 +545,7 @@ For example, the Vue component for the previously-defined `pill_color` experimen
 
 ```vue
 <template>
-  <experiment name="pill_color">
+  <gitlab-experiment name="pill_color">
     <template #control>
       <button class="bg-default">Click default button</button>
     </template>
@@ -557,7 +557,7 @@ For example, the Vue component for the previously-defined `pill_color` experimen
     <template #blue>
       <button class="bg-blue">Click blue button</button>
     </template>
-  </experiment>
+  </gitlab-experiment>
 </template>
 ```
 

spec/frontend/experimentation/components/experiment_spec.js → spec/frontend/experimentation/components/gitlab_experiment_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import ExperimentComponent from '~/experimentation/components/experiment.vue';
+import ExperimentComponent from '~/experimentation/components/gitlab_experiment.vue';
 
 const defaultProps = { name: 'experiment_name' };
 const defaultSlots = {