Migrate feature flags page toggles to GlToggle

They are currently using the deprecated `vue_shared` toggle

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

@@ -10,11 +10,11 @@ import {
   GlFormCheckbox,
   GlSprintf,
   GlIcon,
+  GlToggle,
 } from '@gitlab/ui';
 import RelatedIssuesRoot from '~/related_issues/components/related_issues_root.vue';
 import { s__ } from '~/locale';
 import featureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import ToggleButton from '~/vue_shared/components/toggle_button.vue';
 import EnvironmentsDropdown from './environments_dropdown.vue';
 import Strategy from './strategy.vue';
 import {
@@ -37,7 +37,7 @@ export default {
     GlTooltip,
     GlSprintf,
     GlIcon,
-    ToggleButton,
+    GlToggle,
     EnvironmentsDropdown,
     Strategy,
     RelatedIssuesRoot,
@@ -372,7 +372,7 @@ export default {
                   {{ s__('FeatureFlags|Environment Spec') }}
                 </div>
                 <div
-                  class="table-mobile-content js-feature-flag-status d-flex align-items-center justify-content-start"
+                  class="table-mobile-content gl-display-flex gl-align-items-center gl-justify-content-start"
                 >
                   <p v-if="isAllEnvironment(scope.environmentScope)" class="js-scope-all pl-3">
                     {{ $options.translations.allEnvironmentsText }}
@@ -398,10 +398,10 @@ export default {
                 <div class="table-mobile-header" role="rowheader">
                   {{ s__('FeatureFlags|Status') }}
                 </div>
-                <div class="table-mobile-content js-feature-flag-status">
-                  <toggle-button
+                <div class="table-mobile-content gl-display-flex gl-justify-content-center">
+                  <gl-toggle
                     :value="scope.active"
-                    :disabled-input="!active || !canUpdateScope(scope)"
+                    :disabled="!active || !canUpdateScope(scope)"
                     @change="(status) => (scope.active = status)"
                   />
                 </div>
@@ -498,25 +498,26 @@ export default {
                 <div class="table-mobile-header" role="rowheader">
                   {{ s__('FeatureFlags|Remove') }}
                 </div>
-                <div class="table-mobile-content js-feature-flag-delete">
+                <div class="table-mobile-content">
                   <gl-button
                     v-if="!isAllEnvironment(scope.environmentScope) && canUpdateScope(scope)"
                     v-gl-tooltip
                     :title="s__('FeatureFlags|Remove')"
                     class="js-delete-scope btn-transparent pr-3 pl-3"
                     icon="clear"
+                    data-testid="feature-flag-delete"
                     @click="removeScope(scope)"
                   />
                 </div>
               </div>
             </div>
 
-            <div class="js-add-new-scope gl-responsive-table-row" role="row">
+            <div class="gl-responsive-table-row" role="row" data-testid="add-new-scope">
               <div class="table-section section-30" role="gridcell">
                 <div class="table-mobile-header" role="rowheader">
                   {{ s__('FeatureFlags|Environment Spec') }}
                 </div>
-                <div class="table-mobile-content js-feature-flag-status">
+                <div class="table-mobile-content">
                   <environments-dropdown
                     class="js-new-scope-name col-12"
                     :value="newScope"
@@ -530,9 +531,9 @@ export default {
                 <div class="table-mobile-header" role="rowheader">
                   {{ s__('FeatureFlags|Status') }}
                 </div>
-                <div class="table-mobile-content js-feature-flag-status">
-                  <toggle-button
-                    :disabled-input="!active"
+                <div class="table-mobile-content gl-display-flex gl-justify-content-center">
+                  <gl-toggle
+                    :disabled="!active"
                     :value="false"
                     @change="createNewScope({ active: true })"
                   />

changelogs/unreleased/cngo-migrate-feature-flag-toggles-to-gl-toggle.yml

+---
+title: Migrate feature flags page toggles to GlToggle
+merge_request: 52728
+author:
+type: changed

spec/frontend/feature_flags/components/form_spec.js

 import { uniqueId } from 'lodash';
 import { shallowMount } from '@vue/test-utils';
-import { GlFormTextarea, GlFormCheckbox, GlButton } from '@gitlab/ui';
+import { GlFormTextarea, GlFormCheckbox, GlButton, GlToggle } from '@gitlab/ui';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import Api from '~/api';
 import Form from '~/feature_flags/components/form.vue';
 import EnvironmentsDropdown from '~/feature_flags/components/environments_dropdown.vue';
@@ -14,7 +15,6 @@ import {
   NEW_VERSION_FLAG,
 } from '~/feature_flags/constants';
 import RelatedIssuesRoot from '~/related_issues/components/related_issues_root.vue';
-import ToggleButton from '~/vue_shared/components/toggle_button.vue';
 import { featureFlag, userList, allUsersStrategy } from '../mock_data';
 
 jest.mock('~/api.js');
@@ -35,14 +35,19 @@ describe('feature flag form', () => {
     },
   };
 
+  const findAddNewScopeRow = () => wrapper.findByTestId('add-new-scope');
+  const findGlToggle = () => wrapper.find(GlToggle);
+
   const factory = (props = {}, provide = {}) => {
-    wrapper = shallowMount(Form, {
-      propsData: { ...requiredProps, ...props },
-      provide: {
-        ...requiredInjections,
-        ...provide,
-      },
-    });
+    wrapper = extendedWrapper(
+      shallowMount(Form, {
+        propsData: { ...requiredProps, ...props },
+        provide: {
+          ...requiredInjections,
+          ...provide,
+        },
+      }),
+    );
   };
 
   beforeEach(() => {
@@ -102,13 +107,13 @@ describe('feature flag form', () => {
       });
 
       it('should render scopes table with a new row ', () => {
-        expect(wrapper.find('.js-add-new-scope').exists()).toBe(true);
+        expect(findAddNewScopeRow().exists()).toBe(true);
       });
 
       describe('status toggle', () => {
         describe('without filled text input', () => {
           it('should add a new scope with the text value empty and the status', () => {
-            wrapper.find(ToggleButton).vm.$emit('change', true);
+            findGlToggle().vm.$emit('change', true);
 
             expect(wrapper.vm.formScopes).toHaveLength(1);
             expect(wrapper.vm.formScopes[0].active).toEqual(true);
@@ -121,7 +126,7 @@ describe('feature flag form', () => {
         it('should be disabled if the feature flag is not active', (done) => {
           wrapper.setProps({ active: false });
           wrapper.vm.$nextTick(() => {
-            expect(wrapper.find(ToggleButton).props('disabledInput')).toBe(true);
+            expect(findGlToggle().props('disabled')).toBe(true);
             done();
           });
         });
@@ -166,11 +171,11 @@ describe('feature flag form', () => {
 
     describe('scopes', () => {
       it('should be possible to remove a scope', () => {
-        expect(wrapper.find('.js-feature-flag-delete').exists()).toEqual(true);
+        expect(wrapper.findByTestId('feature-flag-delete').exists()).toEqual(true);
       });
 
       it('renders empty row to add a new scope', () => {
-        expect(wrapper.find('.js-add-new-scope').exists()).toEqual(true);
+        expect(findAddNewScopeRow().exists()).toEqual(true);
       });
 
       it('renders the user id checkbox', () => {
@@ -186,7 +191,7 @@ describe('feature flag form', () => {
       describe('update scope', () => {
         describe('on click on toggle', () => {
           it('should update the scope', () => {
-            wrapper.find(ToggleButton).vm.$emit('change', false);
+            findGlToggle().vm.$emit('change', false);
 
             expect(wrapper.vm.formScopes[0].active).toBe(false);
           });
@@ -195,7 +200,7 @@ describe('feature flag form', () => {
             wrapper.setProps({ active: false });
 
             wrapper.vm.$nextTick(() => {
-              expect(wrapper.find(ToggleButton).props('disabledInput')).toBe(true);
+              expect(findGlToggle().props('disabled')).toBe(true);
               done();
             });
           });
@@ -294,7 +299,7 @@ describe('feature flag form', () => {
           const row = wrapper.findAll('.gl-responsive-table-row').at(2);
 
           expect(row.find(EnvironmentsDropdown).vm.disabled).toBe(true);
-          expect(row.find(ToggleButton).vm.disabledInput).toBe(true);
+          expect(row.find(GlToggle).props('disabled')).toBe(true);
           expect(row.find('.js-delete-scope').exists()).toBe(false);
         });
       });
@@ -347,10 +352,10 @@ describe('feature flag form', () => {
             return wrapper.vm.$nextTick();
           })
           .then(() => {
-            wrapper.find('.js-add-new-scope').find(ToggleButton).vm.$emit('change', true);
+            findAddNewScopeRow().find(GlToggle).vm.$emit('change', true);
           })
           .then(() => {
-            wrapper.find(ToggleButton).vm.$emit('change', true);
+            findGlToggle().vm.$emit('change', true);
             return wrapper.vm.$nextTick();
           })