Merge branch '229307-remove-droplab-dropdown' into 'master'

Remove the droplab dropdown vue file and the spec js file

Closes #229307

See merge request gitlab-org/gitlab!43850

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

-<script>
-import { GlDeprecatedButton, GlIcon } from '@gitlab/ui';
-
-export default {
-  components: {
-    GlIcon,
-    GlDeprecatedButton,
-  },
-  props: {
-    size: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    primaryButtonClass: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    dropdownClass: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    actions: {
-      type: Array,
-      required: true,
-    },
-    defaultAction: {
-      type: Number,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      selectedAction: this.defaultAction,
-    };
-  },
-  computed: {
-    selectedActionTitle() {
-      return this.actions[this.selectedAction].title;
-    },
-    buttonSizeClass() {
-      return `btn-${this.size}`;
-    },
-  },
-  methods: {
-    handlePrimaryActionClick() {
-      this.$emit('onActionClick', this.actions[this.selectedAction]);
-    },
-    handleActionClick(selectedAction) {
-      this.selectedAction = selectedAction;
-      this.$emit('onActionSelect', selectedAction);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="btn-group droplab-dropdown comment-type-dropdown">
-    <gl-deprecated-button
-      :class="primaryButtonClass"
-      :size="size"
-      @click.prevent="handlePrimaryActionClick"
-    >
-      {{ selectedActionTitle }}
-    </gl-deprecated-button>
-    <button
-      :class="buttonSizeClass"
-      type="button"
-      class="btn dropdown-toggle pl-2 pr-2"
-      data-display="static"
-      data-toggle="dropdown"
-    >
-      <gl-icon name="chevron-down" :aria-label="__('toggle dropdown')" />
-    </button>
-    <ul :class="dropdownClass" class="dropdown-menu dropdown-open-top">
-      <template v-for="(action, index) in actions">
-        <li :key="index" :class="{ 'droplab-item-selected': selectedAction === index }">
-          <gl-deprecated-button class="btn-transparent" @click.prevent="handleActionClick(index)">
-            <i aria-hidden="true" class="fa fa-check icon"> </i>
-            <div class="description">
-              <strong>{{ action.title }}</strong>
-              <p>{{ action.description }}</p>
-            </div>
-          </gl-deprecated-button>
-        </li>
-        <li v-if="index === 0" :key="`${index}-separator`" class="divider droplab-item-ignore"></li>
-      </template>
-    </ul>
-  </div>
-</template>

locale/gitlab.pot

@@ -31241,9 +31241,6 @@ msgstr ""
 msgid "toggle collapse"
 msgstr ""
 
-msgid "toggle dropdown"
-msgstr ""
-
 msgid "triggered"
 msgstr ""
 

spec/frontend/vue_shared/droplab_dropdown_button_spec.js

-import { mount } from '@vue/test-utils';
-
-import DroplabDropdownButton from '~/vue_shared/components/droplab_dropdown_button.vue';
-
-const mockActions = [
-  {
-    title: 'Foo',
-    description: 'Some foo action',
-  },
-  {
-    title: 'Bar',
-    description: 'Some bar action',
-  },
-];
-
-const createComponent = ({
-  size = '',
-  dropdownClass = '',
-  actions = mockActions,
-  defaultAction = 0,
-}) =>
-  mount(DroplabDropdownButton, {
-    propsData: {
-      size,
-      dropdownClass,
-      actions,
-      defaultAction,
-    },
-  });
-
-describe('DroplabDropdownButton', () => {
-  let wrapper;
-
-  beforeEach(() => {
-    wrapper = createComponent({});
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  describe('data', () => {
-    it('contains `selectedAction` representing value of `defaultAction` prop', () => {
-      expect(wrapper.vm.selectedAction).toBe(0);
-    });
-  });
-
-  describe('computed', () => {
-    describe('selectedActionTitle', () => {
-      it('returns string containing title of selected action', () => {
-        wrapper.setData({ selectedAction: 0 });
-
-        expect(wrapper.vm.selectedActionTitle).toBe(mockActions[0].title);
-
-        wrapper.setData({ selectedAction: 1 });
-
-        expect(wrapper.vm.selectedActionTitle).toBe(mockActions[1].title);
-      });
-    });
-
-    describe('buttonSizeClass', () => {
-      it('returns string containing button sizing class based on `size` prop', done => {
-        const wrapperWithSize = createComponent({
-          size: 'sm',
-        });
-
-        wrapperWithSize.vm.$nextTick(() => {
-          expect(wrapperWithSize.vm.buttonSizeClass).toBe('btn-sm');
-
-          done();
-          wrapperWithSize.destroy();
-        });
-      });
-    });
-  });
-
-  describe('methods', () => {
-    describe('handlePrimaryActionClick', () => {
-      it('emits `onActionClick` event on component with selectedAction object as param', () => {
-        jest.spyOn(wrapper.vm, '$emit');
-
-        wrapper.setData({ selectedAction: 0 });
-        wrapper.vm.handlePrimaryActionClick();
-
-        expect(wrapper.vm.$emit).toHaveBeenCalledWith('onActionClick', mockActions[0]);
-      });
-    });
-
-    describe('handleActionClick', () => {
-      it('emits `onActionSelect` event on component with selectedAction index as param', () => {
-        jest.spyOn(wrapper.vm, '$emit');
-
-        wrapper.vm.handleActionClick(1);
-
-        expect(wrapper.vm.$emit).toHaveBeenCalledWith('onActionSelect', 1);
-      });
-    });
-  });
-
-  describe('template', () => {
-    it('renders default action button', () => {
-      const defaultButton = wrapper.findAll('.btn').at(0);
-
-      expect(defaultButton.text()).toBe(mockActions[0].title);
-    });
-
-    it('renders dropdown button', () => {
-      const dropdownButton = wrapper.findAll('.dropdown-toggle').at(0);
-
-      expect(dropdownButton.isVisible()).toBe(true);
-    });
-
-    it('renders dropdown actions', () => {
-      const dropdownActions = wrapper.findAll('.dropdown-menu li button');
-
-      Array(dropdownActions.length)
-        .fill()
-        .forEach((_, index) => {
-          const actionContent = dropdownActions.at(index).find('.description');
-
-          expect(actionContent.find('strong').text()).toBe(mockActions[index].title);
-          expect(actionContent.find('p').text()).toBe(mockActions[index].description);
-        });
-    });
-
-    it('renders divider between dropdown actions', () => {
-      const dropdownDivider = wrapper.find('.dropdown-menu .divider');
-
-      expect(dropdownDivider.isVisible()).toBe(true);
-    });
-  });
-});