Merge branch 'switch-order-of-buttons-configure-feature-flag-modal' into 'master'

Change Order of Buttons in Configure Feature Flags

See merge request gitlab-org/gitlab!54731

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 () => {