Added Blob Edit Header component

The component is responsible for rendering the blob's file name and
react to the name's changes

app/assets/javascripts/blob/components/blob_edit_header.vue

+<script>
+import { GlFormInput } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlFormInput,
+  },
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      name: this.value,
+    };
+  },
+};
+</script>
+<template>
+  <div class="js-file-title file-title-flex-parent">
+    <gl-form-input
+      id="snippet_file_name"
+      v-model="name"
+      :placeholder="
+        s__('Snippets|Give your file a name to add code highlighting, e.g. example.rb for Ruby')
+      "
+      name="snippet_file_name"
+      class="form-control js-snippet-file-name qa-snippet-file-name"
+      type="text"
+      @change="$emit('input', name)"
+    />
+  </div>
+</template>

app/assets/javascripts/snippet/snippet_bundle.js

@@ -17,7 +17,7 @@ const initAce = () => {
 const initMonaco = () => {
   const editorEl = document.getElementById('editor');
   const contentEl = document.querySelector('.snippet-file-content');
-  const fileNameEl = document.querySelector('.snippet-file-name');
+  const fileNameEl = document.querySelector('.js-snippet-file-name');
   const form = document.querySelector('.snippet-form-holder form');
 
   editor = new Editor();

app/views/shared/snippets/_form.html.haml

@@ -26,7 +26,7 @@
       = f.label :file_name, s_('Snippets|File')
       .file-holder.snippet
         .js-file-title.file-title-flex-parent
-          = f.text_field :file_name, placeholder: s_("Snippets|Give your file a name to add code highlighting, e.g. example.rb for Ruby"), class: 'form-control snippet-file-name qa-snippet-file-name'
+          = f.text_field :file_name, placeholder: s_("Snippets|Give your file a name to add code highlighting, e.g. example.rb for Ruby"), class: 'form-control js-snippet-file-name qa-snippet-file-name'
         .file-content.code
           %pre#editor{ data: { 'editor-loading': true } }= @snippet.content
           = f.hidden_field :content, class: 'snippet-file-content'

spec/frontend/blob/components/__snapshots__/blob_edit_header_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Blob Header Editing rendering matches the snapshot 1`] = `
+<div
+  class="js-file-title file-title-flex-parent"
+>
+  <gl-form-input-stub
+    class="form-control js-snippet-file-name qa-snippet-file-name"
+    id="snippet_file_name"
+    name="snippet_file_name"
+    placeholder="Give your file a name to add code highlighting, e.g. example.rb for Ruby"
+    type="text"
+    value="foo.md"
+  />
+</div>
+`;

spec/frontend/blob/components/blob_edit_header_spec.js

+import { shallowMount } from '@vue/test-utils';
+import BlobEditHeader from '~/blob/components/blob_edit_header.vue';
+import { GlFormInput } from '@gitlab/ui';
+
+describe('Blob Header Editing', () => {
+  let wrapper;
+  const value = 'foo.md';
+
+  function createComponent() {
+    wrapper = shallowMount(BlobEditHeader, {
+      propsData: {
+        value,
+      },
+    });
+  }
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('rendering', () => {
+    it('matches the snapshot', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it('contains a form input field', () => {
+      expect(wrapper.contains(GlFormInput)).toBe(true);
+    });
+  });
+
+  describe('functionality', () => {
+    it('emits input event when the blob name is changed', () => {
+      const inputComponent = wrapper.find(GlFormInput);
+      const newValue = 'bar.txt';
+
+      wrapper.setData({
+        name: newValue,
+      });
+      inputComponent.vm.$emit('change');
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.emitted().input[0]).toEqual([newValue]);
+      });
+    });
+  });
+});

spec/frontend/snippet/snippet_bundle_spec.js

@@ -27,7 +27,7 @@ describe('Snippet editor', () => {
       setHTMLFixture(`
         <div class="snippet-form-holder">
           <form>
-            <input class="snippet-file-name" type="text" value="${name}">
+            <input class="js-snippet-file-name" type="text" value="${name}">
             <input class="snippet-file-content" type="hidden" value="${content}">
             <pre id="editor"></pre>
           </form>
@@ -39,7 +39,7 @@ describe('Snippet editor', () => {
       setUpFixture(name, content);
       editorEl = document.getElementById('editor');
       contentEl = document.querySelector('.snippet-file-content');
-      fileNameEl = document.querySelector('.snippet-file-name');
+      fileNameEl = document.querySelector('.js-snippet-file-name');
       form = document.querySelector('.snippet-form-holder form');
 
       initEditor();