Merge branch '25381-add-apply-suggestion-component' into 'master'

Add apply suggestion component

See merge request gitlab-org/gitlab!48324

app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue

+<script>
+import { GlDropdown, GlDropdownForm, GlFormTextarea, GlButton } from '@gitlab/ui';
+import { __, sprintf } from '~/locale';
+
+export default {
+  components: { GlDropdown, GlDropdownForm, GlFormTextarea, GlButton },
+  props: {
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    fileName: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      message: null,
+      buttonText: __('Apply suggestion'),
+      headerText: __('Apply suggestion commit message'),
+    };
+  },
+  computed: {
+    placeholderText() {
+      return sprintf(__('Apply suggestion on %{fileName}'), { fileName: this.fileName });
+    },
+  },
+  methods: {
+    onApply() {
+      this.$emit('apply', this.message || this.placeholderText);
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-dropdown
+    :text="buttonText"
+    :header-text="headerText"
+    :disabled="disabled"
+    boundary="window"
+    right="true"
+    menu-class="gl-w-full! gl-pb-0!"
+  >
+    <gl-dropdown-form class="gl-m-3!">
+      <gl-form-textarea v-model="message" :placeholder="placeholderText" />
+      <gl-button
+        class="gl-w-quarter! gl-mt-3 gl-text-center! float-right"
+        category="secondary"
+        variant="success"
+        @click="onApply"
+      >
+        {{ __('Apply') }}
+      </gl-button>
+    </gl-dropdown-form>
+  </gl-dropdown>
+</template>

locale/gitlab.pot

@@ -3461,6 +3461,12 @@ msgstr ""
 msgid "Apply suggestion"
 msgstr ""
 
+msgid "Apply suggestion commit message"
+msgstr ""
+
+msgid "Apply suggestion on %{fileName}"
+msgstr ""
+
 msgid "Apply suggestions"
 msgstr ""
 

spec/frontend/vue_shared/components/markdown/apply_suggestion_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlDropdown, GlFormTextarea, GlButton } from '@gitlab/ui';
+import ApplySuggestionComponent from '~/vue_shared/components/markdown/apply_suggestion.vue';
+
+describe('Apply Suggestion component', () => {
+  const propsData = { fileName: 'test.js', disabled: false };
+  let wrapper;
+
+  const createWrapper = props => {
+    wrapper = shallowMount(ApplySuggestionComponent, { propsData: { ...propsData, ...props } });
+  };
+
+  const findDropdown = () => wrapper.find(GlDropdown);
+  const findTextArea = () => wrapper.find(GlFormTextarea);
+  const findApplyButton = () => wrapper.find(GlButton);
+
+  beforeEach(() => createWrapper());
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('initial template', () => {
+    it('renders a dropdown with the correct props', () => {
+      const dropdown = findDropdown();
+
+      expect(dropdown.exists()).toBe(true);
+      expect(dropdown.props('text')).toBe('Apply suggestion');
+      expect(dropdown.props('headerText')).toBe('Apply suggestion commit message');
+      expect(dropdown.props('disabled')).toBe(false);
+    });
+
+    it('renders a textarea with the correct props', () => {
+      const textArea = findTextArea();
+
+      expect(textArea.exists()).toBe(true);
+      expect(textArea.attributes('placeholder')).toBe('Apply suggestion on test.js');
+    });
+
+    it('renders an apply button', () => {
+      const applyButton = findApplyButton();
+
+      expect(applyButton.exists()).toBe(true);
+      expect(applyButton.text()).toBe('Apply');
+    });
+  });
+
+  describe('disabled', () => {
+    it('disables the dropdown', () => {
+      createWrapper({ disabled: true });
+
+      expect(findDropdown().props('disabled')).toBe(true);
+    });
+  });
+
+  describe('apply suggestion', () => {
+    it('emits an apply event with a default message if no message was added', () => {
+      findTextArea().vm.$emit('input', null);
+      findApplyButton().vm.$emit('click');
+
+      expect(wrapper.emitted('apply')).toEqual([['Apply suggestion on test.js']]);
+    });
+
+    it('emits an apply event with a user-defined message', () => {
+      findTextArea().vm.$emit('input', 'some text');
+      findApplyButton().vm.$emit('click');
+
+      expect(wrapper.emitted('apply')).toEqual([['some text']]);
+    });
+  });
+});