Change ActiveToggle to ActiveCheckbox

Use GlFormCheckbox instead of GlToggle for setting
of "Active" integration.

app/assets/javascripts/integrations/edit/components/active_toggle.vue → app/assets/javascripts/integrations/edit/components/active_checkbox.vue

 <script>
 import { mapGetters } from 'vuex';
-import { GlFormGroup, GlToggle } from '@gitlab/ui';
+import { GlFormGroup, GlFormCheckbox } from '@gitlab/ui';
 import eventHub from '../event_hub';
 
 export default {
-  name: 'ActiveToggle',
+  name: 'ActiveCheckbox',
   components: {
     GlFormGroup,
-    GlToggle,
-  },
-  props: {
-    initialActivated: {
-      type: Boolean,
-      required: true,
-    },
+    GlFormCheckbox,
   },
   data() {
     return {
-      activated: this.initialActivated,
+      activated: false,
     };
   },
   computed: {
-    ...mapGetters(['isInheriting']),
+    ...mapGetters(['isInheriting', 'propsSource']),
   },
   mounted() {
+    this.activated = this.propsSource.initialActivated;
     // Initialize view
     this.$nextTick(() => {
-      this.onToggle(this.activated);
+      this.onChange(this.activated);
     });
   },
   methods: {
-    onToggle(e) {
+    onChange(e) {
       eventHub.$emit('toggle', e);
     },
   },
@@ -39,12 +34,15 @@ export default {
 
 <template>
   <gl-form-group :label="__('Enable integration')" label-for="service[active]">
-    <gl-toggle
+    <input name="service[active]" type="hidden" :value="activated || false" />
+    <gl-form-checkbox
       v-model="activated"
       name="service[active]"
       class="gl-display-block gl-line-height-0"
       :disabled="isInheriting"
-      @change="onToggle"
-    />
+      @change="onChange"
+    >
+      {{ __('Active') }}
+    </gl-form-checkbox>
   </gl-form-group>
 </template>

app/assets/javascripts/integrations/edit/components/integration_form.vue

@@ -3,7 +3,7 @@ import { mapState, mapActions, mapGetters } from 'vuex';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 import OverrideDropdown from './override_dropdown.vue';
-import ActiveToggle from './active_toggle.vue';
+import ActiveCheckbox from './active_checkbox.vue';
 import JiraTriggerFields from './jira_trigger_fields.vue';
 import JiraIssuesFields from './jira_issues_fields.vue';
 import TriggerFields from './trigger_fields.vue';
@@ -13,7 +13,7 @@ export default {
   name: 'IntegrationForm',
   components: {
     OverrideDropdown,
-    ActiveToggle,
+    ActiveCheckbox,
     JiraTriggerFields,
     JiraIssuesFields,
     TriggerFields,
@@ -44,11 +44,7 @@ export default {
       :override="override"
       @change="setOverride"
     />
-    <active-toggle
-      v-if="propsSource.showActive"
-      :key="`${currentKey}-active-toggle`"
-      v-bind="propsSource.activeToggleProps"
-    />
+    <active-checkbox v-if="propsSource.showActive" :key="`${currentKey}-active-checkbox`" />
     <jira-trigger-fields
       v-if="isJira"
       :key="`${currentKey}-jira-trigger-fields`"

app/assets/javascripts/integrations/edit/index.js

@@ -35,9 +35,7 @@ function parseDatasetToProps(data) {
   } = parseBooleanInData(booleanAttributes);
 
   return {
-    activeToggleProps: {
-      initialActivated: activated,
-    },
+    initialActivated: activated,
     showActive,
     type,
     triggerFieldsProps: {

changelogs/unreleased/222785-toggle-component-on-the-integration-settings-pages-should-be-a-che.yml

+---
+title: Change active toggle on integration settings page to checkbox
+merge_request: 39586
+author:
+type: changed

spec/features/admin/admin_settings_spec.rb

@@ -525,6 +525,7 @@ RSpec.describe 'Admin updates settings', :clean_gitlab_redis_shared_state, :do_n
   end
 
   def check_all_events
+    page.check('Active')
     page.check('Push')
     page.check('Issue')
     page.check('Confidential Issue')

spec/features/projects/services/user_activates_issue_tracker_spec.rb

@@ -8,7 +8,7 @@ RSpec.describe 'User activates issue tracker', :js do
   let(:url) { 'http://tracker.example.com' }
 
   def fill_form(disable: false, skip_new_issue_url: false)
-    click_active_toggle if disable
+    click_active_checkbox if disable
 
     fill_in 'service_project_url', with: url
     fill_in 'service_issues_url', with: "#{url}/:id"

spec/features/projects/services/user_activates_mattermost_slash_command_spec.rb

@@ -28,7 +28,7 @@ RSpec.describe 'Set up Mattermost slash commands', :js do
         token = ('a'..'z').to_a.join
 
         fill_in 'service_token', with: token
-        click_active_toggle
+        click_active_checkbox
         click_on 'Save changes'
 
         expect(current_path).to eq(edit_project_service_path(project, :mattermost_slash_commands))

spec/features/projects/services/user_activates_slack_slash_command_spec.rb

@@ -21,7 +21,7 @@ RSpec.describe 'Slack slash commands', :js do
 
   it 'redirects to the integrations page after saving but not activating' do
     fill_in 'Token', with: 'token'
-    click_active_toggle
+    click_active_checkbox
     click_on 'Save'
 
     expect(current_path).to eq(edit_project_service_path(project, :slack_slash_commands))

spec/frontend/integrations/edit/components/active_checkbox_spec.js

+import { mount } from '@vue/test-utils';
+import { GlFormCheckbox } from '@gitlab/ui';
+import { createStore } from '~/integrations/edit/store';
+
+import ActiveCheckbox from '~/integrations/edit/components/active_checkbox.vue';
+
+describe('ActiveCheckbox', () => {
+  let wrapper;
+
+  const createComponent = (customStateProps = {}, isInheriting = false) => {
+    wrapper = mount(ActiveCheckbox, {
+      store: createStore({
+        customState: { ...customStateProps },
+      }),
+      computed: {
+        isInheriting: () => isInheriting,
+      },
+    });
+  };
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+      wrapper = null;
+    }
+  });
+
+  const findGlFormCheckbox = () => wrapper.find(GlFormCheckbox);
+  const findInputInCheckbox = () => findGlFormCheckbox().find('input');
+
+  describe('template', () => {
+    describe('is inheriting adminSettings', () => {
+      it('renders GlFormCheckbox as disabled', () => {
+        createComponent({}, true);
+
+        expect(findGlFormCheckbox().exists()).toBe(true);
+        expect(findInputInCheckbox().attributes('disabled')).toBe('disabled');
+      });
+    });
+
+    describe('initialActivated is false', () => {
+      it('renders GlFormCheckbox as unchecked', () => {
+        createComponent({
+          initialActivated: false,
+        });
+
+        expect(findGlFormCheckbox().exists()).toBe(true);
+        expect(findGlFormCheckbox().vm.$attrs.checked).toBe(false);
+        expect(findInputInCheckbox().attributes('disabled')).toBeUndefined();
+      });
+    });
+
+    describe('initialActivated is true', () => {
+      beforeEach(() => {
+        createComponent({
+          initialActivated: true,
+        });
+      });
+
+      it('renders GlFormCheckbox as checked', () => {
+        expect(findGlFormCheckbox().exists()).toBe(true);
+        expect(findGlFormCheckbox().vm.$attrs.checked).toBe(true);
+      });
+
+      describe('on checkbox click', () => {
+        it('switches the form value', async () => {
+          findInputInCheckbox().trigger('click');
+
+          await wrapper.vm.$nextTick();
+
+          expect(findGlFormCheckbox().vm.$attrs.checked).toBe(false);
+        });
+      });
+    });
+  });
+});

spec/frontend/integrations/edit/components/active_toggle_spec.js

-import { mount } from '@vue/test-utils';
-import { GlToggle } from '@gitlab/ui';
-
-import ActiveToggle from '~/integrations/edit/components/active_toggle.vue';
-
-const GL_TOGGLE_ACTIVE_CLASS = 'is-checked';
-const GL_TOGGLE_DISABLED_CLASS = 'is-disabled';
-
-describe('ActiveToggle', () => {
-  let wrapper;
-
-  const defaultProps = {
-    initialActivated: true,
-  };
-
-  const createComponent = (props = {}, isInheriting = false) => {
-    wrapper = mount(ActiveToggle, {
-      propsData: { ...defaultProps, ...props },
-      computed: {
-        isInheriting: () => isInheriting,
-      },
-    });
-  };
-
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.destroy();
-      wrapper = null;
-    }
-  });
-
-  const findGlToggle = () => wrapper.find(GlToggle);
-  const findButtonInToggle = () => findGlToggle().find('button');
-  const findInputInToggle = () => findGlToggle().find('input');
-
-  describe('template', () => {
-    describe('is inheriting adminSettings', () => {
-      it('renders GlToggle as disabled', () => {
-        createComponent({}, true);
-
-        expect(findGlToggle().exists()).toBe(true);
-        expect(findButtonInToggle().classes()).toContain(GL_TOGGLE_DISABLED_CLASS);
-      });
-    });
-
-    describe('initialActivated is false', () => {
-      it('renders GlToggle as inactive', () => {
-        createComponent({
-          initialActivated: false,
-        });
-
-        expect(findGlToggle().exists()).toBe(true);
-        expect(findButtonInToggle().classes()).not.toContain(GL_TOGGLE_ACTIVE_CLASS);
-        expect(findInputInToggle().attributes('value')).toBe('false');
-      });
-    });
-
-    describe('initialActivated is true', () => {
-      beforeEach(() => {
-        createComponent();
-      });
-
-      it('renders GlToggle as active', () => {
-        expect(findGlToggle().exists()).toBe(true);
-        expect(findButtonInToggle().classes()).toContain(GL_TOGGLE_ACTIVE_CLASS);
-        expect(findInputInToggle().attributes('value')).toBe('true');
-      });
-
-      describe('on toggle click', () => {
-        it('switches the form value', () => {
-          findButtonInToggle().trigger('click');
-
-          wrapper.vm.$nextTick(() => {
-            expect(findButtonInToggle().classes()).not.toContain(GL_TOGGLE_ACTIVE_CLASS);
-            expect(findInputInToggle().attributes('value')).toBe('false');
-          });
-        });
-      });
-    });
-  });
-});

spec/frontend/integrations/edit/components/integration_form_spec.js

@@ -3,7 +3,7 @@ import { mockIntegrationProps } from 'jest/integrations/edit/mock_data';
 import { createStore } from '~/integrations/edit/store';
 import IntegrationForm from '~/integrations/edit/components/integration_form.vue';
 import OverrideDropdown from '~/integrations/edit/components/override_dropdown.vue';
-import ActiveToggle from '~/integrations/edit/components/active_toggle.vue';
+import ActiveCheckbox from '~/integrations/edit/components/active_checkbox.vue';
 import JiraTriggerFields from '~/integrations/edit/components/jira_trigger_fields.vue';
 import JiraIssuesFields from '~/integrations/edit/components/jira_issues_fields.vue';
 import TriggerFields from '~/integrations/edit/components/trigger_fields.vue';
@@ -21,7 +21,7 @@ describe('IntegrationForm', () => {
       }),
       stubs: {
         OverrideDropdown,
-        ActiveToggle,
+        ActiveCheckbox,
         JiraTriggerFields,
         TriggerFields,
       },
@@ -39,27 +39,27 @@ describe('IntegrationForm', () => {
   });
 
   const findOverrideDropdown = () => wrapper.find(OverrideDropdown);
-  const findActiveToggle = () => wrapper.find(ActiveToggle);
+  const findActiveCheckbox = () => wrapper.find(ActiveCheckbox);
   const findJiraTriggerFields = () => wrapper.find(JiraTriggerFields);
   const findJiraIssuesFields = () => wrapper.find(JiraIssuesFields);
   const findTriggerFields = () => wrapper.find(TriggerFields);
 
   describe('template', () => {
     describe('showActive is true', () => {
-      it('renders ActiveToggle', () => {
+      it('renders ActiveCheckbox', () => {
         createComponent();
 
-        expect(findActiveToggle().exists()).toBe(true);
+        expect(findActiveCheckbox().exists()).toBe(true);
       });
     });
 
     describe('showActive is false', () => {
-      it('does not render ActiveToggle', () => {
+      it('does not render ActiveCheckbox', () => {
         createComponent({
           showActive: false,
         });
 
-        expect(findActiveToggle().exists()).toBe(false);
+        expect(findActiveCheckbox().exists()).toBe(false);
       });
     });
 

spec/frontend/integrations/edit/mock_data.js

 // eslint-disable-next-line import/prefer-default-export
 export const mockIntegrationProps = {
   id: 25,
-  activeToggleProps: {
-    initialActivated: true,
-  },
+  initialActivated: true,
   showActive: true,
   triggerFieldsProps: {
     initialTriggerCommit: false,

spec/support/shared_contexts/project_service_jira_context.rb

@@ -5,7 +5,7 @@ RSpec.shared_context 'project service Jira context' do
   let(:test_url) { 'http://jira.example.com/rest/api/2/serverInfo' }
 
   def fill_form(disable: false)
-    click_active_toggle if disable
+    click_active_checkbox if disable
 
     fill_in 'service_url', with: url
     fill_in 'service_username', with: 'username'

spec/support/shared_contexts/project_service_shared_context.rb

@@ -18,8 +18,8 @@ RSpec.shared_context 'project service activation' do
     click_link(name)
   end
 
-  def click_active_toggle
-    find('input[name="service[active]"] + button').click
+  def click_active_checkbox
+    find('input[name="service[active]"]').click
   end
 
   def click_test_integration