Merge branch 'feature-flags-new-gl-button' into 'master'

Remove Deprecated Button Usage

Closes #219871

See merge request gitlab-org/gitlab!37000

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,
@@ -255,22 +255,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);