Merge branch '320838-vulnerability-status-dropdown-actions-should-not-scroll' into 'master'

Move action buttons to footer

See merge request gitlab-org/gitlab!54767

ee/app/assets/javascripts/vulnerabilities/components/vulnerability_state_dropdown.vue

@@ -83,18 +83,20 @@ export default {
       <div class="pl-4">{{ stateItem.description }}</div>
     </li>
 
-    <div class="text-right p-3">
-      <gl-button ref="cancel-button" class="mr-2" @click="closeDropdown">
-        {{ __('Cancel') }}
-      </gl-button>
-      <gl-button
-        ref="save-button"
-        variant="success"
-        :disabled="selected === initialStateItem"
-        @click="saveState(selected)"
-      >
-        {{ s__('VulnerabilityManagement|Change status') }}
-      </gl-button>
-    </div>
+    <template #footer>
+      <div class="gl-text-right gl-px-3">
+        <gl-button ref="cancel-button" class="mr-2" @click="closeDropdown">
+          {{ __('Cancel') }}
+        </gl-button>
+        <gl-button
+          ref="save-button"
+          variant="success"
+          :disabled="selected === initialStateItem"
+          @click="saveState(selected)"
+        >
+          {{ s__('VulnerabilityManagement|Change status') }}
+        </gl-button>
+      </div>
+    </template>
   </gl-dropdown>
 </template>

ee/changelogs/unreleased/320838-vulnerability-status-dropdown-actions-should-not-scroll.yml

+---
+title: Move action buttons to dropdown footer
+merge_request: 54767
+author:
+type: fixed

ee/spec/frontend/vulnerabilities/vulnerability_state_dropdown_spec.js

+import { GlDropdown } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import VulnerabilityStateDropdown from 'ee/vulnerabilities/components/vulnerability_state_dropdown.vue';
 import { VULNERABILITY_STATE_OBJECTS } from 'ee/vulnerabilities/constants';
@@ -11,6 +12,9 @@ describe('Vulnerability state dropdown component', () => {
     // Create a dropdown that by default has the first vulnerability state selected.
     wrapper = shallowMount(VulnerabilityStateDropdown, {
       propsData: { initialState },
+      stubs: {
+        GlDropdown,
+      },
     });
 
     // Mock out this function, it's called by some methods in the component.
@@ -142,7 +146,7 @@ describe('Vulnerability state dropdown component', () => {
       wrapper.setProps({ initialState: stateString }); // Change the state.
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(innerDropdown().attributes('text')).toBe(stateString); // Check that the dropdown button's value matches the initial state.
+        expect(innerDropdown().props('text')).toBe(stateString); // Check that the dropdown button's value matches the initial state.
         expect(selectedItem().text()).toMatch(new RegExp(`^${stateObject.action}`, 'i')); // Check that the selected item is the initial state.
         expect(isDisabled(saveButton())).toBe(true); // Check that the save button is disabled.
       });