Change Order of Buttons in Configure Feature Flags

The primary action is now to close the modal and do nothing, while the
secondary action is to rotate the token.

The cancel action is no longer used, as it has become the primary action
instead.

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

@@ -84,6 +84,11 @@ export default {
     cancelActionProps() {
       return {
         text: this.$options.translations.cancelActionLabel,
+        attributes: [
+          {
+            category: 'secondary',
+          },
+        ],
       };
     },
     canRegenerateInstanceId() {
@@ -120,11 +125,11 @@ export default {
 <template>
   <gl-modal
     :modal-id="modalId"
-    :action-cancel="cancelActionProps"
-    :action-primary="regenerateInstanceIdActionProps"
-    @canceled="clearState"
+    :action-primary="cancelActionProps"
+    :action-secondary="regenerateInstanceIdActionProps"
+    @secondary.prevent="rotateToken"
     @hide="clearState"
-    @primary.prevent="rotateToken"
+    @primary="clearState"
   >
     <template #modal-title>
       {{ $options.translations.modalTitle }}

changelogs/unreleased/switch-order-of-buttons-configure-feature-flag-modal.yml

+---
+title: Change the order of action buttons in the configure feature flags modal
+merge_request: 54731
+author:
+type: changed

spec/frontend/feature_flags/components/configure_feature_flags_modal_spec.js

@@ -32,8 +32,9 @@ describe('Configure Feature Flags Modal', () => {
     });
   };
-  const findGlModal = () => wrapper.find(GlModal);
+  const findGlModal = () => wrapper.findComponent(GlModal);
   const findPrimaryAction = () => findGlModal().props('actionPrimary');
+  const findSecondaryAction = () => findGlModal().props('actionSecondary');
   const findProjectNameInput = () => wrapper.find('#project_name_verification');
   const findDangerGlAlert = () =>
     wrapper.findAll(GlAlert).filter((c) => c.props('variant') === 'danger');
@@ -42,18 +43,18 @@ describe('Configure Feature Flags Modal', () => {
     afterEach(() => wrapper.destroy());
     beforeEach(factory);
-    it('should have Primary and Cancel actions', () => {
-      expect(findGlModal().props('actionCancel').text).toBe('Close');
-      expect(findPrimaryAction().text).toBe('Regenerate instance ID');
+    it('should have Primary and Secondary actions', () => {
+      expect(findPrimaryAction().text).toBe('Close');
+      expect(findSecondaryAction().text).toBe('Regenerate instance ID');
     });
-    it('should default disable the primary action', async () => {
-      const [{ disabled }] = findPrimaryAction().attributes;
+    it('should default disable the primary action', () => {
+      const [{ disabled }] = findSecondaryAction().attributes;
       expect(disabled).toBe(true);
     });
     it('should emit a `token` event when clicking on the Primary action', async () => {
-      findGlModal().vm.$emit('primary', mockEvent);
+      findGlModal().vm.$emit('secondary', mockEvent);
       await wrapper.vm.$nextTick();
       expect(wrapper.emitted('token')).toEqual([[]]);
       expect(mockEvent.preventDefault).toHaveBeenCalled();
@@ -112,10 +113,10 @@ describe('Configure Feature Flags Modal', () => {
     afterEach(() => wrapper.destroy());
     beforeEach(factory);
-    it('should enable the primary action', async () => {
+    it('should enable the secondary action', async () => {
       findProjectNameInput().vm.$emit('input', provide.projectName);
       await wrapper.vm.$nextTick();
-      const [{ disabled }] = findPrimaryAction().attributes;
+      const [{ disabled }] = findSecondaryAction().attributes;
       expect(disabled).toBe(false);
     });
   });
@@ -124,8 +125,8 @@ describe('Configure Feature Flags Modal', () => {
     afterEach(() => wrapper.destroy());
     beforeEach(factory.bind(null, { canUserRotateToken: false }));
-    it('should not display the primary action', async () => {
-      expect(findPrimaryAction()).toBe(null);
+    it('should not display the primary action', () => {
+      expect(findSecondaryAction()).toBe(null);
     });
     it('should not display regenerating instance ID', async () => {