Merge branch 'okr-ingress-modsecurity-settings' into 'master'

Migrate button in ingress_modsecurity_settings.vue

Closes #219790

See merge request gitlab-org/gitlab!43717

app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue

@@ -5,7 +5,7 @@ import {
   GlSprintf,
   GlLink,
   GlToggle,
-  GlDeprecatedButton,
+  GlButton,
   GlDeprecatedDropdown,
   GlDeprecatedDropdownItem,
   GlIcon,
@@ -25,7 +25,7 @@ export default {
     GlSprintf,
     GlLink,
     GlToggle,
-    GlDeprecatedButton,
+    GlButton,
     GlDeprecatedDropdown,
     GlDeprecatedDropdownItem,
     GlIcon,
@@ -232,18 +232,24 @@ export default {
               </gl-deprecated-dropdown>
             </div>
           </div>
-          <div v-if="showButtons" class="mt-3">
-            <gl-deprecated-button
-              class="btn-success inline mr-1"
+          <div v-if="showButtons" class="gl-mt-5 gl-display-flex">
+            <gl-button
+              variant="success"
+              category="primary"
+              data-qa-selector="save_ingress_modsecurity_settings"
               :loading="saving"
               :disabled="saveButtonDisabled"
               @click="updateApplication"
             >
               {{ saveButtonLabel }}
-            </gl-deprecated-button>
-            <gl-deprecated-button :disabled="saveButtonDisabled" @click="resetStatus">
+            </gl-button>
+            <gl-button
+              data-qa-selector="cancel_ingress_modsecurity_settings"
+              :disabled="saveButtonDisabled"
+              @click="resetStatus"
+            >
               {{ __('Cancel') }}
-            </gl-deprecated-button>
+            </gl-button>
           </div>
         </div>
       </div>

changelogs/unreleased/okr-ingress-modsecurity-settings.yml

+---
+title: Migrate deprecated button to GlButton in ingress_modsecurity_settings.vue
+merge_request: 43717
+author:
+type: other

spec/frontend/clusters/components/ingress_modsecurity_settings_spec.js

@@ -28,8 +28,10 @@ describe('IngressModsecuritySettings', () => {
     });
   };
 
-  const findSaveButton = () => wrapper.find('.btn-success');
-  const findCancelButton = () => wrapper.find('[variant="secondary"]');
+  const findSaveButton = () =>
+    wrapper.find('[data-qa-selector="save_ingress_modsecurity_settings"]');
+  const findCancelButton = () =>
+    wrapper.find('[data-qa-selector="cancel_ingress_modsecurity_settings"]');
   const findModSecurityToggle = () => wrapper.find(GlToggle);
   const findModSecurityDropdown = () => wrapper.find(GlDeprecatedDropdown);