1 files changed, 36 insertions, 0 deletions
diff --git a/app/assets/javascripts/snippets/components/snippet_blob_edit.vue b/app/assets/javascripts/snippets/components/snippet_blob_edit.vue
new file mode 100644
index 00000000000..af1574f98d9
--- /dev/null
+++ b/app/assets/javascripts/snippets/components/snippet_blob_edit.vue
@@ -0,0 +1,36 @@
+<script>
+import BlobHeaderEdit from '~/blob/components/blob_edit_header.vue';
+import BlobContentEdit from '~/blob/components/blob_edit_content.vue';
+
+export default {
+  components: {
+    BlobHeaderEdit,
+    BlobContentEdit,
+  },
+  props: {
+    content: {
+      type: String,
+      required: true,
+    },
+    fileName: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      name: this.fileName,
+      blobContent: this.content,
+    };
+  },
+};
+</script>
+<template>
+  <div class="form-group file-editor">
+    <label>{{ s__('Snippets|File') }}</label>
+    <div class="file-holder snippet">
+      <blob-header-edit v-model="name" />
+      <blob-content-edit v-model="blobContent" :file-name="name" />
+    </div>
+  </div>
+</template>