Merge branch 'cngo-delete-unused-toggle-button' into 'master'

Delete unused `toggle_button.vue`

See merge request gitlab-org/gitlab!53903

app/assets/javascripts/vue_shared/components/toggle_button.vue

-<script>
-import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
-import { s__ } from '../../locale';
-
-const ICON_ON = 'status_success_borderless';
-const ICON_OFF = 'status_failed_borderless';
-const LABEL_ON = s__('ToggleButton|Toggle Status: ON');
-const LABEL_OFF = s__('ToggleButton|Toggle Status: OFF');
-
-export default {
-  components: {
-    GlIcon,
-    GlLoadingIcon,
-  },
-
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
-
-  props: {
-    name: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    value: {
-      type: Boolean,
-      required: false,
-      default: null,
-    },
-    disabledInput: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isLoading: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-
-  computed: {
-    toggleIcon() {
-      return this.value ? ICON_ON : ICON_OFF;
-    },
-    ariaLabel() {
-      return this.value ? LABEL_ON : LABEL_OFF;
-    },
-  },
-
-  methods: {
-    toggleFeature() {
-      if (!this.disabledInput) this.$emit('change', !this.value);
-    },
-  },
-};
-</script>
-
-<template>
-  <label class="gl-mt-2">
-    <input v-if="name" :name="name" :value="value" type="hidden" />
-    <button
-      type="button"
-      role="switch"
-      class="project-feature-toggle"
-      :aria-label="ariaLabel"
-      :aria-checked="value"
-      :class="{
-        'is-checked': value,
-        'gl-blue-500': value,
-        'is-disabled': disabledInput,
-        'is-loading': isLoading,
-      }"
-      @click.prevent="toggleFeature"
-    >
-      <gl-loading-icon class="loading-icon" />
-      <span class="toggle-icon">
-        <gl-icon
-          :size="18"
-          :name="toggleIcon"
-          :class="value ? 'gl-text-blue-500' : 'gl-text-gray-400'"
-        />
-      </span>
-    </button>
-  </label>
-</template>

locale/gitlab.pot

@@ -30863,12 +30863,6 @@ msgstr ""
 msgid "Toggle thread"
 msgstr ""
 
-msgid "ToggleButton|Toggle Status: OFF"
-msgstr ""
-
-msgid "ToggleButton|Toggle Status: ON"
-msgstr ""
-
 msgid "Toggled :%{name}: emoji award."
 msgstr ""
 

spec/frontend/vue_shared/components/toggle_button_spec.js

-import { GlIcon } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import ToggleButton from '~/vue_shared/components/toggle_button.vue';
-
-describe('Toggle Button component', () => {
-  let wrapper;
-
-  function createComponent(propsData = {}) {
-    wrapper = shallowMount(ToggleButton, {
-      propsData,
-    });
-  }
-
-  const findInput = () => wrapper.find('input');
-  const findButton = () => wrapper.find('button');
-  const findToggleIcon = () => wrapper.find(GlIcon);
-
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
-  it('renders input with provided name', () => {
-    createComponent({
-      name: 'foo',
-    });
-
-    expect(findInput().attributes('name')).toBe('foo');
-  });
-
-  describe.each`
-    value    | iconName
-    ${true}  | ${'status_success_borderless'}
-    ${false} | ${'status_failed_borderless'}
-  `('when `value` prop is `$value`', ({ value, iconName }) => {
-    beforeEach(() => {
-      createComponent({
-        value,
-        name: 'foo',
-      });
-    });
-
-    it('renders input with correct value attribute', () => {
-      expect(findInput().attributes('value')).toBe(`${value}`);
-    });
-
-    it('renders correct icon', () => {
-      const icon = findToggleIcon();
-      expect(icon.isVisible()).toBe(true);
-      expect(icon.props('name')).toBe(iconName);
-      expect(findButton().classes('is-checked')).toBe(value);
-    });
-
-    describe('when clicked', () => {
-      it('emits `change` event with correct event', async () => {
-        findButton().trigger('click');
-        await wrapper.vm.$nextTick();
-
-        expect(wrapper.emitted('change')).toStrictEqual([[!value]]);
-      });
-    });
-  });
-
-  describe('when `disabledInput` prop is `true`', () => {
-    beforeEach(() => {
-      createComponent({
-        value: true,
-        disabledInput: true,
-      });
-    });
-
-    it('renders disabled button', () => {
-      expect(findButton().classes()).toContain('is-disabled');
-    });
-
-    it('does not emit change event when clicked', async () => {
-      findButton().trigger('click');
-      await wrapper.vm.$nextTick();
-
-      expect(wrapper.emitted('change')).toBeFalsy();
-    });
-  });
-
-  describe('when `isLoading` prop is `true`', () => {
-    beforeEach(() => {
-      createComponent({
-        value: true,
-        isLoading: true,
-      });
-    });
-
-    it('renders loading class', () => {
-      expect(findButton().classes()).toContain('is-loading');
-    });
-  });
-});