Remove Deprecated Button Usage From Feature Flags

Makes the feature flag table buttons match the user list tables and uses
the new GlButton for the rest of the feature flag page.

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

@@ -2,9 +2,9 @@
 import { createNamespacedHelpers } from 'vuex';
 import { isEmpty } from 'lodash';
 import {
+  GlButton,
   GlEmptyState,
   GlLoadingIcon,
-  GlDeprecatedButton,
   GlModalDirective,
   GlLink,
   GlAlert,
@@ -36,7 +36,7 @@ export default {
     TablePagination,
     GlEmptyState,
     GlLoadingIcon,
-    GlDeprecatedButton,
+    GlButton,
     GlLink,
     GlAlert,
     GlSprintf,
@@ -253,22 +253,25 @@ export default {
     <h3 class="page-title with-button">
       {{ s__('FeatureFlags|Feature Flags') }}
       <div class="pull-right">
-        <button
+        <gl-button
           v-if="canUserConfigure"
           v-gl-modal="'configure-feature-flags'"
-          type="button"
-          class="js-ff-configure gl-mr-3 btn-inverted btn btn-primary"
+          variant="info"
+          category="secondary"
+          data-qa-selector="configure_feature_flags_button"
+          data-testid="ff-configure-button"
+          class="gl-mr-3"
         >
           {{ s__('FeatureFlags|Configure') }}
-        </button>
-
-        <gl-deprecated-button
+        </gl-button>
+        <gl-button
           v-if="hasNewPath"
           :href="newFeatureFlagPath"
           variant="success"
-          class="js-ff-new"
-          >{{ s__('FeatureFlags|New feature flag') }}</gl-deprecated-button
+          data-testid="ff-new-button"
         >
+          {{ s__('FeatureFlags|New feature flag') }}
+        </gl-button>
       </div>
     </h3>
     <gl-alert v-if="!isUserListAlertDismissed" @dismiss="isUserListAlertDismissed = true">

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

@@ -201,9 +201,8 @@ export default {
               <gl-button
                 v-gl-tooltip.hover.bottom="__('Edit')"
                 class="js-feature-flag-edit-button"
-                variant="default"
-                category="primary"
                 icon="pencil"
+                category="tertiary"
                 :href="featureFlag.edit_path"
               />
             </template>
@@ -212,7 +211,6 @@ export default {
                 v-gl-tooltip.hover.bottom="__('Delete')"
                 class="js-feature-flag-delete-button"
                 variant="danger"
-                category="primary"
                 icon="remove"
                 :disabled="!canDeleteFlag(featureFlag)"
                 @click="setDeleteModalData(featureFlag)"

ee/spec/features/projects/feature_flags/user_sees_feature_flag_list_spec.rb

@@ -93,7 +93,7 @@ RSpec.describe 'User sees feature flag list', :js do
     it 'shows empty page' do
       expect(page).to have_text 'Get started with feature flags'
       expect(page).to have_selector('.btn-success', text: 'New feature flag')
-      expect(page).to have_selector('.btn-primary.btn-inverted', text: 'Configure')
+      expect(page).to have_selector('[data-qa-selector="configure_feature_flags_button"]', text: 'Configure')
     end
   end
 end

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

@@ -40,8 +40,8 @@ describe('Feature flags', () => {
     });
   };
 
-  const configureButton = () => wrapper.find('.js-ff-configure');
-  const newButton = () => wrapper.find('.js-ff-new');
+  const configureButton = () => wrapper.find('[data-testid="ff-configure-button"]');
+  const newButton = () => wrapper.find('[data-testid="ff-new-button"]');
 
   beforeEach(() => {
     mock = new MockAdapter(axios);