Merge branch '352423-change-button-variant-in-web-ide-modals' into 'master'

Change button variant to confirm in Web IDE modals

See merge request gitlab-org/gitlab!80780

app/assets/javascripts/ide/components/new_dropdown/modal.vue

@@ -6,6 +6,10 @@ import { __, sprintf } from '~/locale';
 import { modalTypes } from '../../constants';
 import { trimPathComponents, getPathParent } from '../../utils';
 
+const i18n = {
+  cancelButtonText: __('Cancel'),
+};
+
 export default {
   components: {
     GlModal,
@@ -43,6 +47,18 @@ export default {
 
       return __('Create file');
     },
+    actionPrimary() {
+      return {
+        text: this.buttonLabel,
+        attributes: [{ variant: 'confirm' }],
+      };
+    },
+    actionCancel() {
+      return {
+        text: i18n.cancelButtonText,
+        attributes: [{ variant: 'default' }],
+      };
+    },
     isCreatingNewFile() {
       return this.modalType === modalTypes.blob;
     },
@@ -136,11 +152,11 @@ export default {
     data-qa-selector="new_file_modal"
     data-testid="ide-new-entry"
     :title="modalTitle"
-    :ok-title="buttonLabel"
-    ok-variant="success"
     size="lg"
-    @ok="submitForm"
-    @hide="resetData"
+    :action-primary="actionPrimary"
+    :action-cancel="actionCancel"
+    @primary="submitForm"
+    @cancel="resetData"
   >
     <div class="form-group row">
       <label class="label-bold col-form-label col-sm-2"> {{ __('Name') }} </label>

spec/frontend/ide/components/new_dropdown/modal_spec.js

@@ -38,7 +38,7 @@ describe('new file modal component', () => {
     });
 
     it(`sets button label as ${entryType}`, () => {
-      expect(document.querySelector('.btn-success').textContent.trim()).toBe(btnTitle);
+      expect(document.querySelector('.btn-confirm').textContent.trim()).toBe(btnTitle);
     });
 
     it(`sets form label as ${entryType}`, () => {
@@ -77,7 +77,7 @@ describe('new file modal component', () => {
 
         await nextTick();
         expect(document.querySelector('.modal-title').textContent.trim()).toBe(modalTitle);
-        expect(document.querySelector('.btn-success').textContent.trim()).toBe(btnTitle);
+        expect(document.querySelector('.btn-confirm').textContent.trim()).toBe(btnTitle);
       },
     );
 

spec/frontend_integration/ide/helpers/ide_helper.js

@@ -106,7 +106,7 @@ const fillFileNameModal = async (value, submitText = 'Create file') => {
   const nameField = await findByTestId(modal, 'file-name-field');
   fireEvent.input(nameField, { target: { value } });
 
-  const createButton = getByText(modal, submitText, { selector: 'button' });
+  const createButton = getByText(modal, submitText, { selector: 'button > span' });
   createButton.click();
 };