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,7 +83,8 @@ export default {
       <div class="pl-4">{{ stateItem.description }}</div>
     </li>
 
-    <div class="text-right p-3">
+    <template #footer>
+      <div class="gl-text-right gl-px-3">
         <gl-button ref="cancel-button" class="mr-2" @click="closeDropdown">
           {{ __('Cancel') }}
         </gl-button>
@@ -96,5 +97,6 @@ export default {
           {{ 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.
       });