1 files changed, 75 insertions, 23 deletions

diff --git a/app/assets/javascripts/snippets/components/snippet_blob_edit.vue b/app/assets/javascripts/snippets/components/snippet_blob_edit.vue
index 62c29b0c7cd..3c2dbfff6e1 100644
--- a/app/assets/javascripts/snippets/components/snippet_blob_edit.vue
+++ b/app/assets/javascripts/snippets/components/snippet_blob_edit.vue
@@ -2,6 +2,17 @@
 import BlobHeaderEdit from '~/blob/components/blob_edit_header.vue';
 import BlobContentEdit from '~/blob/components/blob_edit_content.vue';
 import { GlLoadingIcon } from '@gitlab/ui';
+import { getBaseURL, joinPaths } from '~/lib/utils/url_utility';
+import axios from '~/lib/utils/axios_utils';
+import { SNIPPET_BLOB_CONTENT_FETCH_ERROR } from '~/snippets/constants';
+import Flash from '~/flash';
+import { sprintf } from '~/locale';
+
+function localId() {
+  return Math.floor((1 + Math.random()) * 0x10000)
+    .toString(16)
+    .substring(1);
+}
 
 export default {
   components: {
@@ -11,20 +22,70 @@ export default {
   },
   inheritAttrs: false,
   props: {
-    value: {
-      type: String,
+    blob: {
+      type: Object,
       required: false,
-      default: '',
+      default: null,
+      validator: ({ rawPath }) => Boolean(rawPath),
     },
-    fileName: {
-      type: String,
-      required: false,
-      default: '',
+  },
+  data() {
+    return {
+      id: localId(),
+      filePath: this.blob?.path || '',
+      previousPath: '',
+      originalPath: this.blob?.path || '',
+      content: this.blob?.content || '',
+      originalContent: '',
+      isContentLoading: this.blob,
+    };
+  },
+  watch: {
+    filePath(filePath, previousPath) {
+      this.previousPath = previousPath;
+      this.notifyAboutUpdates({ previousPath });
     },
-    isLoading: {
-      type: Boolean,
-      required: false,
-      default: true,
+    content() {
+      this.notifyAboutUpdates();
+    },
+  },
+  mounted() {
+    if (this.blob) {
+      this.fetchBlobContent();
+    }
+  },
+  methods: {
+    notifyAboutUpdates(args = {}) {
+      const { filePath, previousPath } = args;
+      this.$emit('blob-updated', {
+        filePath: filePath || this.filePath,
+        previousPath: previousPath || this.previousPath,
+        content: this.content,
+        _constants: {
+          originalPath: this.originalPath,
+          originalContent: this.originalContent,
+          id: this.id,
+        },
+      });
+    },
+    fetchBlobContent() {
+      const baseUrl = getBaseURL();
+      const url = joinPaths(baseUrl, this.blob.rawPath);
+
+      axios
+        .get(url)
+        .then(res => {
+          this.originalContent = res.data;
+          this.content = res.data;
+        })
+        .catch(e => this.flashAPIFailure(e))
+        .finally(() => {
+          this.isContentLoading = false;
+        });
+    },
+    flashAPIFailure(err) {
+      Flash(sprintf(SNIPPET_BLOB_CONTENT_FETCH_ERROR, { err }));
+      this.isContentLoading = false;
     },
   },
 };
@@ -33,23 +94,14 @@ export default {
   <div class="form-group file-editor">
     <label>{{ s__('Snippets|File') }}</label>
     <div class="file-holder snippet">
-      <blob-header-edit
-        :value="fileName"
-        data-qa-selector="file_name_field"
-        @input="$emit('name-change', $event)"
-      />
+      <blob-header-edit v-model="filePath" data-qa-selector="file_name_field" />
       <gl-loading-icon
-        v-if="isLoading"
+        v-if="isContentLoading"
         :label="__('Loading snippet')"
         size="lg"
         class="loading-animation prepend-top-20 append-bottom-20"
       />
-      <blob-content-edit
-        v-else
-        :value="value"
-        :file-name="fileName"
-        @input="$emit('input', $event)"
-      />
+      <blob-content-edit v-else v-model="content" :file-name="filePath" />
     </div>
   </div>
 </template>