Update feature flag form buttons to gl-button

changelogs/unreleased/219899-replace-gl-deprecated-button-with-gl-button-in-ee-app-assets-javas.yml

+---
+title: Update feature flag form buttons to gl-button
+merge_request: 39220
+author:
+type: changed

ee/app/assets/javascripts/feature_flags/components/form.vue

@@ -2,7 +2,7 @@
 import Vue from 'vue';
 import { memoize, isString, cloneDeep, isNumber, uniqueId } from 'lodash';
 import {
-  GlDeprecatedButton,
+  GlButton,
   GlDeprecatedBadge as GlBadge,
   GlTooltip,
   GlTooltipDirective,
@@ -32,7 +32,7 @@ import RelatedIssuesRoot from 'ee/related_issues/components/related_issues_root.
 
 export default {
   components: {
-    GlDeprecatedButton,
+    GlButton,
     GlBadge,
     GlFormTextarea,
     GlFormCheckbox,
@@ -340,9 +340,9 @@ export default {
             <h4>{{ s__('FeatureFlags|Strategies') }}</h4>
             <div class="flex align-items-baseline justify-content-between">
               <p class="mr-3">{{ $options.translations.newHelpText }}</p>
-              <gl-deprecated-button variant="success" category="secondary" @click="addStrategy">
+              <gl-button variant="success" category="secondary" @click="addStrategy">
                 {{ s__('FeatureFlags|Add strategy') }}
-              </gl-deprecated-button>
+              </gl-button>
             </div>
           </div>
         </div>
@@ -523,15 +523,14 @@ export default {
                   {{ s__('FeatureFlags|Remove') }}
                 </div>
                 <div class="table-mobile-content js-feature-flag-delete">
-                  <gl-deprecated-button
+                  <gl-button
                     v-if="!isAllEnvironment(scope.environmentScope) && canUpdateScope(scope)"
                     v-gl-tooltip
                     :title="s__('FeatureFlags|Remove')"
                     class="js-delete-scope btn-transparent pr-3 pl-3"
+                    icon="clear"
                     @click="removeScope(scope)"
-                  >
-                    <icon name="clear" />
-                  </gl-deprecated-button>
+                  />
                 </div>
               </div>
             </div>
@@ -592,7 +591,7 @@ export default {
     </fieldset>
 
     <div class="form-actions">
-      <gl-deprecated-button
+      <gl-button
         ref="submitButton"
         :disabled="readOnly"
         type="button"
@@ -601,14 +600,13 @@ export default {
         @click="handleSubmit"
       >
         {{ submitText }}
-      </gl-deprecated-button>
-      <gl-deprecated-button
+      </gl-button>
+      <gl-button
         :href="cancelPath"
-        variant="secondary"
         class="js-ff-cancel col-xs-12 float-right"
       >
         {{ __('Cancel') }}
-      </gl-deprecated-button>
+      </gl-button>
     </div>
   </form>
 </template>

ee/spec/frontend/feature_flags/components/form_spec.js

 import { uniqueId } from 'lodash';
 import { shallowMount } from '@vue/test-utils';
-import { GlFormTextarea, GlFormCheckbox, GlDeprecatedButton } from '@gitlab/ui';
+import { GlFormTextarea, GlFormCheckbox, GlButton } from '@gitlab/ui';
 import Api from 'ee/api';
 import Form from 'ee/feature_flags/components/form.vue';
 import EnvironmentsDropdown from 'ee/feature_flags/components/environments_dropdown.vue';
@@ -455,7 +455,7 @@ describe('feature flag form', () => {
     });
 
     it('adds an all users strategy when clicking the Add button', () => {
-      wrapper.find(GlDeprecatedButton).vm.$emit('click');
+      wrapper.find(GlButton).vm.$emit('click');
 
       return wrapper.vm.$nextTick().then(() => {
         const strategies = wrapper.findAll(Strategy);