Added Snippet Description Edit component

For now, the component re-uses existing setupCollapsibleInputs, but
eventually should be tuned into using a re-usable mixin for a
granular control of the collapsible inputs

app/assets/javascripts/snippets/components/snippet_description_edit.vue

+<script>
+import { GlFormInput } from '@gitlab/ui';
+import MarkdownField from '~/vue_shared/components/markdown/field.vue';
+import setupCollapsibleInputs from '~/snippet/collapsible_input';
+
+export default {
+  components: {
+    GlFormInput,
+    MarkdownField,
+  },
+  props: {
+    description: {
+      type: String,
+      default: '',
+      required: false,
+    },
+    markdownPreviewPath: {
+      type: String,
+      required: true,
+    },
+    markdownDocsPath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      text: this.description,
+    };
+  },
+  mounted() {
+    setupCollapsibleInputs();
+  },
+};
+</script>
+<template>
+  <div class="form-group js-description-input">
+    <label>{{ s__('Snippets|Description (optional)') }}</label>
+    <div class="js-collapsible-input">
+      <div class="js-collapsed" :class="{ 'd-none': text }">
+        <gl-form-input
+          class="form-control"
+          :placeholder="
+            s__(
+              'Snippets|Optionally add a description about what your snippet does or how to use it…',
+            )
+          "
+          data-qa-selector="description_placeholder"
+        />
+      </div>
+      <markdown-field
+        class="js-expanded"
+        :class="{ 'd-none': !text }"
+        :markdown-preview-path="markdownPreviewPath"
+        :markdown-docs-path="markdownDocsPath"
+      >
+        <textarea
+          id="snippet-description"
+          slot="textarea"
+          v-model="text"
+          class="note-textarea js-gfm-input js-autosize markdown-area
+            qa-description-textarea"
+          dir="auto"
+          data-supports-quick-actions="false"
+          :aria-label="__('Description')"
+          :placeholder="__('Write a comment or drag your files here…')"
+        >
+        </textarea>
+      </markdown-field>
+    </div>
+  </div>
+</template>

changelogs/unreleased/207237-snippet-edit-description-vue.yml

+---
+title: Added Blob Description Edit component in Vue
+merge_request: 26762
+author:
+type: added

locale/gitlab.pot

@@ -18174,6 +18174,9 @@ msgstr ""
 msgid "Snippets|Optionally add a description about what your snippet does or how to use it..."
 msgstr ""
 
+msgid "Snippets|Optionally add a description about what your snippet does or how to use it…"
+msgstr ""
+
 msgid "Snowplow"
 msgstr ""
 

spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Snippet Description Edit component rendering matches the snapshot 1`] = `
+<div
+  class="form-group js-description-input"
+>
+  <label>
+    Description (optional)
+  </label>
+   
+  <div
+    class="js-collapsible-input"
+  >
+    <div
+      class="js-collapsed d-none"
+    >
+      <gl-form-input-stub
+        class="form-control"
+        data-qa-selector="description_placeholder"
+        placeholder="Optionally add a description about what your snippet does or how to use it…"
+      />
+    </div>
+     
+    <markdown-field-stub
+      addspacingclasses="true"
+      canattachfile="true"
+      class="js-expanded"
+      enableautocomplete="true"
+      helppagepath=""
+      markdowndocspath="help/"
+      markdownpreviewpath="foo/"
+      note="[object Object]"
+      quickactionsdocspath=""
+      textareavalue=""
+    >
+      <textarea
+        aria-label="Description"
+        class="note-textarea js-gfm-input js-autosize markdown-area
+          qa-description-textarea"
+        data-supports-quick-actions="false"
+        dir="auto"
+        id="snippet-description"
+        placeholder="Write a comment or drag your files here…"
+      />
+    </markdown-field-stub>
+  </div>
+</div>
+`;

spec/frontend/snippets/components/snippet_description_edit_spec.js

+import SnippetDescriptionEdit from '~/snippets/components/snippet_description_edit.vue';
+import { shallowMount } from '@vue/test-utils';
+
+describe('Snippet Description Edit component', () => {
+  let wrapper;
+  const defaultDescription = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+  const markdownPreviewPath = 'foo/';
+  const markdownDocsPath = 'help/';
+
+  function createComponent(description = defaultDescription) {
+    wrapper = shallowMount(SnippetDescriptionEdit, {
+      propsData: {
+        description,
+        markdownPreviewPath,
+        markdownDocsPath,
+      },
+    });
+  }
+
+  function isHidden(sel) {
+    return wrapper.find(sel).classes('d-none');
+  }
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('rendering', () => {
+    it('matches the snapshot', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it('renders the field expanded when description exists', () => {
+      expect(wrapper.find('.js-collapsed').classes('d-none')).toBe(true);
+      expect(wrapper.find('.js-expanded').classes('d-none')).toBe(false);
+
+      expect(isHidden('.js-collapsed')).toBe(true);
+      expect(isHidden('.js-expanded')).toBe(false);
+    });
+
+    it('renders the field collapsed if there is no description yet', () => {
+      createComponent('');
+
+      expect(isHidden('.js-collapsed')).toBe(false);
+      expect(isHidden('.js-expanded')).toBe(true);
+    });
+  });
+});