Merge branch 'selhorn-ci_variable_modal' into 'master'

Updated gl-deprecated-button to gl-button in ci_variable_modal.vue

Closes #219814

See merge request gitlab-org/gitlab!38836

app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue

@@ -3,7 +3,6 @@ import {
   GlAlert,
   GlButton,
   GlCollapse,
-  GlDeprecatedButton,
   GlFormCheckbox,
   GlFormCombobox,
   GlFormGroup,
@@ -39,7 +38,6 @@ export default {
     GlAlert,
     GlButton,
     GlCollapse,
-    GlDeprecatedButton,
     GlFormCheckbox,
     GlFormCombobox,
     GlFormGroup,
@@ -340,24 +338,25 @@ export default {
       </gl-alert>
     </gl-collapse>
     <template #modal-footer>
-      <gl-deprecated-button @click="hideModal">{{ __('Cancel') }}</gl-deprecated-button>
-      <gl-deprecated-button
+      <gl-button @click="hideModal">{{ __('Cancel') }}</gl-button>
+      <gl-button
         v-if="variableBeingEdited"
         ref="deleteCiVariable"
-        category="secondary"
         variant="danger"
+        category="secondary"
         data-qa-selector="ci_variable_delete_button"
         @click="deleteVarAndClose"
-        >{{ __('Delete variable') }}</gl-deprecated-button
+        >{{ __('Delete variable') }}</gl-button
       >
-      <gl-deprecated-button
+      <gl-button
         ref="updateOrAddVariable"
         :disabled="!canSubmit"
         variant="success"
+        category="primary"
         data-qa-selector="ci_variable_save_button"
         @click="updateOrAddVariable"
         >{{ modalActionText }}
-      </gl-deprecated-button>
+      </gl-button>
     </template>
   </gl-modal>
 </template>

spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js

 import Vuex from 'vuex';
 import { createLocalVue, shallowMount, mount } from '@vue/test-utils';
-import { GlDeprecatedButton, GlFormCombobox } from '@gitlab/ui';
+import { GlButton, GlFormCombobox } from '@gitlab/ui';
 import { AWS_ACCESS_KEY_ID } from '~/ci_variable_list/constants';
 import CiVariableModal from '~/ci_variable_list/components/ci_variable_modal.vue';
 import createStore from '~/ci_variable_list/store';
@@ -29,14 +29,14 @@ describe('Ci variable modal', () => {
   };
 
   const findModal = () => wrapper.find(ModalStub);
-  const addOrUpdateButton = index =>
+  const findAddorUpdateButton = () =>
     findModal()
-      .findAll(GlDeprecatedButton)
-      .at(index);
+      .findAll(GlButton)
+      .wrappers.find(button => button.props('variant') === 'success');
   const deleteVariableButton = () =>
     findModal()
-      .findAll(GlDeprecatedButton)
-      .at(1);
+      .findAll(GlButton)
+      .wrappers.find(button => button.props('variant') === 'danger');
 
   afterEach(() => {
     wrapper.destroy();
@@ -69,7 +69,7 @@ describe('Ci variable modal', () => {
     });
 
     it('button is disabled when no key/value pair are present', () => {
-      expect(addOrUpdateButton(1).attributes('disabled')).toBeTruthy();
+      expect(findAddorUpdateButton().attributes('disabled')).toBeTruthy();
     });
   });
 
@@ -82,11 +82,11 @@ describe('Ci variable modal', () => {
     });
 
     it('button is enabled when key/value pair are present', () => {
-      expect(addOrUpdateButton(1).attributes('disabled')).toBeFalsy();
+      expect(findAddorUpdateButton().attributes('disabled')).toBeFalsy();
     });
 
     it('Add variable button dispatches addVariable action', () => {
-      addOrUpdateButton(1).vm.$emit('click');
+      findAddorUpdateButton().vm.$emit('click');
       expect(store.dispatch).toHaveBeenCalledWith('addVariable');
     });
 
@@ -152,11 +152,11 @@ describe('Ci variable modal', () => {
     });
 
     it('button text is Update variable when updating', () => {
-      expect(addOrUpdateButton(2).text()).toBe('Update variable');
+      expect(findAddorUpdateButton().text()).toBe('Update variable');
     });
 
     it('Update variable button dispatches updateVariable with correct variable', () => {
-      addOrUpdateButton(2).vm.$emit('click');
+      findAddorUpdateButton().vm.$emit('click');
       expect(store.dispatch).toHaveBeenCalledWith('updateVariable');
     });
 
@@ -189,7 +189,7 @@ describe('Ci variable modal', () => {
       });
 
       it('disables the submit button', () => {
-        expect(addOrUpdateButton(1).attributes('disabled')).toBeTruthy();
+        expect(findAddorUpdateButton().attributes('disabled')).toBeTruthy();
       });
 
       it('shows the correct error text', () => {
@@ -213,7 +213,7 @@ describe('Ci variable modal', () => {
       });
 
       it('does not disable the submit button', () => {
-        expect(addOrUpdateButton(1).attributes('disabled')).toBeFalsy();
+        expect(findAddorUpdateButton().attributes('disabled')).toBeFalsy();
       });
     });
   });