diff --git a/app/assets/javascripts/silent_mode_settings/components/app.vue b/app/assets/javascripts/silent_mode_settings/components/app.vue index a151492c75c549debe2373cc3d92e6170a137caf..2dd0449448cb217e5948a5c44ce5564c7546b558 100644 --- a/app/assets/javascripts/silent_mode_settings/components/app.vue +++ b/app/assets/javascripts/silent_mode_settings/components/app.vue @@ -1,5 +1,5 @@ <script> -import { GlToggle } from '@gitlab/ui'; +import { GlToggle, GlBadge } from '@gitlab/ui'; import { updateApplicationSettings } from '~/rest_api'; import { createAlert } from '~/alert'; import toast from '~/vue_shared/plugins/global_toast'; @@ -13,9 +13,11 @@ export default { saveError: s__('SilentMode|There was an error updating the Silent Mode Settings.'), enabled: __('enabled'), disabled: __('disabled'), + experiment: __('Experiment'), }, components: { GlToggle, + GlBadge, }, props: { isSilentModeEnabled: { @@ -60,5 +62,9 @@ export default { :label="$options.i18n.toggleLabel" :is-loading="isLoading" @change="updateSilentModeSettings" - /> + > + <template #label + >{{ $options.i18n.toggleLabel }} <gl-badge>{{ $options.i18n.experiment }}</gl-badge></template + > + </gl-toggle> </template> diff --git a/spec/frontend/silent_mode_settings/components/app_spec.js b/spec/frontend/silent_mode_settings/components/app_spec.js index dfa2b1bfcbb6ddf8486954091727a24b4548a1f2..5997bfd1b5f312d354953a3b5e70c638894147ee 100644 --- a/spec/frontend/silent_mode_settings/components/app_spec.js +++ b/spec/frontend/silent_mode_settings/components/app_spec.js @@ -1,4 +1,4 @@ -import { GlToggle } from '@gitlab/ui'; +import { GlToggle, GlBadge } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import waitForPromises from 'helpers/wait_for_promises'; import { createAlert } from '~/alert'; @@ -29,8 +29,19 @@ describe('SilentModeSettingsApp', () => { }; const findGlToggle = () => wrapper.findComponent(GlToggle); + const findGlBadge = () => wrapper.findComponent(GlBadge); describe('template', () => { + describe('experiment badge', () => { + beforeEach(() => { + createComponent(); + }); + + it('renders properly', () => { + expect(findGlBadge().exists()).toBe(true); + }); + }); + describe('when silent mode is already enabled', () => { beforeEach(() => { createComponent({ isSilentModeEnabled: true });