Move VSA stage options to footer

The commit ensures that the VSA custom stage
options are in a sticky footer, always available
at the bottom of the dropdown.

Changelog: fixed
EE: true

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

@@ -4,7 +4,6 @@ import {
   GlButton,
   GlDropdown,
   GlDropdownItem,
-  GlDropdownDivider,
   GlModal,
   GlModalDirective,
   GlSprintf,
@@ -34,7 +33,6 @@ export default {
     GlButton,
     GlDropdown,
     GlDropdownItem,
-    GlDropdownDivider,
     GlModal,
     GlSprintf,
     ValueStreamForm,
@@ -155,27 +153,28 @@ export default {
         @click="onSelect(id)"
         >{{ streamName }}</gl-dropdown-item
       >
-      <gl-dropdown-divider />
-      <gl-dropdown-item
-        v-gl-modal-directive="'value-stream-form-modal'"
-        data-testid="create-value-stream"
-        data-track-action="click_dropdown"
-        data-track-label="create_value_stream_form_open"
-        @click="onCreate"
-        >{{ $options.i18n.CREATE_VALUE_STREAM }}</gl-dropdown-item
-      >
-      <gl-dropdown-item
-        v-if="isCustomValueStream"
-        v-gl-modal-directive="'delete-value-stream-modal'"
-        variant="danger"
-        data-testid="delete-value-stream"
-        data-track-action="click_dropdown"
-        data-track-label="delete_value_stream_form_open"
-      >
-        <gl-sprintf :message="$options.i18n.DELETE_NAME">
-          <template #name>{{ selectedValueStreamName }}</template>
-        </gl-sprintf>
-      </gl-dropdown-item>
+      <template #footer>
+        <gl-dropdown-item
+          v-gl-modal-directive="'value-stream-form-modal'"
+          data-testid="create-value-stream"
+          data-track-action="click_dropdown"
+          data-track-label="create_value_stream_form_open"
+          @click="onCreate"
+          >{{ $options.i18n.CREATE_VALUE_STREAM }}</gl-dropdown-item
+        >
+        <gl-dropdown-item
+          v-if="isCustomValueStream"
+          v-gl-modal-directive="'delete-value-stream-modal'"
+          variant="danger"
+          data-testid="delete-value-stream"
+          data-track-action="click_dropdown"
+          data-track-label="delete_value_stream_form_open"
+        >
+          <gl-sprintf :message="$options.i18n.DELETE_NAME">
+            <template #name>{{ selectedValueStreamName }}</template>
+          </gl-sprintf>
+        </gl-dropdown-item>
+      </template>
     </gl-dropdown>
     <gl-button
       v-else

ee/spec/frontend/analytics/cycle_analytics/components/value_stream_select_spec.js

 import { GlDropdown } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { mount, shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import ValueStreamSelect from 'ee/analytics/cycle_analytics/components/value_stream_select.vue';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
@@ -38,9 +38,9 @@ describe('ValueStreamSelect', () => {
       },
     });
 
-  const createComponent = ({ data = {}, initialState = {} } = {}) =>
+  const createComponent = ({ data = {}, initialState = {}, mountFn = shallowMount } = {}) =>
     extendedWrapper(
-      shallowMount(ValueStreamSelect, {
+      mountFn(ValueStreamSelect, {
         localVue,
         store: fakeStore({ initialState }),
         data() {
@@ -59,44 +59,48 @@ describe('ValueStreamSelect', () => {
   const findModal = (modal) => wrapper.find(`[data-testid="${modal}-value-stream-modal"]`);
   const submitModal = (modal) => findModal(modal).vm.$emit('primary', mockEvent);
   const findSelectValueStreamDropdown = () => wrapper.findComponent(GlDropdown);
-  const findSelectValueStreamDropdownOptions = (_wrapper) => findDropdownItemText(_wrapper);
+  const findSelectValueStreamDropdownOptions = () => findDropdownItemText(wrapper);
   const findCreateValueStreamButton = () => wrapper.findByTestId('create-value-stream-button');
   const findEditValueStreamButton = () => wrapper.findByTestId('edit-value-stream');
   const findDeleteValueStreamButton = () => wrapper.findByTestId('delete-value-stream');
 
-  beforeEach(() => {
-    wrapper = createComponent({
-      initialState: {
-        valueStreams,
-      },
-    });
-    trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
-  });
-
   afterEach(() => {
     unmockTracking();
     wrapper.destroy();
   });
 
   describe('with value streams available', () => {
-    it('does not display the create value stream button', () => {
-      expect(findCreateValueStreamButton().exists()).toBe(false);
-    });
+    describe('default behaviour', () => {
+      beforeEach(() => {
+        wrapper = createComponent({
+          mountFn: mount,
+          initialState: {
+            valueStreams,
+          },
+        });
+        trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+      });
 
-    it('displays the select value stream dropdown', () => {
-      expect(findSelectValueStreamDropdown().exists()).toBe(true);
-    });
+      it('does not display the create value stream button', () => {
+        expect(findCreateValueStreamButton().exists()).toBe(false);
+      });
 
-    it('renders each value stream including a create button', () => {
-      const opts = findSelectValueStreamDropdownOptions(wrapper);
-      [...valueStreams.map((v) => v.name), 'Create new Value Stream'].forEach((vs) => {
-        expect(opts).toContain(vs);
+      it('displays the select value stream dropdown', () => {
+        expect(findSelectValueStreamDropdown().exists()).toBe(true);
+      });
+
+      it('renders each value stream including a create button', () => {
+        const opts = findSelectValueStreamDropdownOptions(wrapper);
+        [...valueStreams.map((v) => v.name), 'Create new Value Stream'].forEach((vs) => {
+          expect(opts).toContain(vs);
+        });
       });
     });
 
     describe('with a selected value stream', () => {
       beforeEach(() => {
         wrapper = createComponent({
+          mountFn: mount,
           initialState: {
             valueStreams,
             selectedValueStream: {
@@ -189,6 +193,8 @@ describe('ValueStreamSelect', () => {
           },
         });
 
+        trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+
         submitModal('delete');
       });