1 files changed, 45 insertions, 59 deletions

diff --git a/app/assets/javascripts/snippets/components/snippet_blob_edit.vue b/app/assets/javascripts/snippets/components/snippet_blob_edit.vue
index 3c2dbfff6e1..ff03432f942 100644
--- a/app/assets/javascripts/snippets/components/snippet_blob_edit.vue
+++ b/app/assets/javascripts/snippets/components/snippet_blob_edit.vue
@@ -1,19 +1,13 @@
 <script>
+import { GlLoadingIcon } from '@gitlab/ui';
 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 { deprecatedCreateFlash as Flash } from '~/flash';
 import { sprintf } from '~/locale';
 
-function localId() {
-  return Math.floor((1 + Math.random()) * 0x10000)
-    .toString(16)
-    .substring(1);
-}
-
 export default {
   components: {
     BlobHeaderEdit,
@@ -24,49 +18,35 @@ export default {
   props: {
     blob: {
       type: Object,
+      required: true,
+    },
+    canDelete: {
+      type: Boolean,
       required: false,
-      default: null,
-      validator: ({ rawPath }) => Boolean(rawPath),
+      default: true,
     },
-  },
-  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 });
+    showDelete: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-    content() {
-      this.notifyAboutUpdates();
+  },
+  computed: {
+    inputId() {
+      return `${this.blob.id}_file_path`;
     },
   },
   mounted() {
-    if (this.blob) {
+    if (!this.blob.isLoaded) {
       this.fetchBlobContent();
     }
   },
   methods: {
+    onDelete() {
+      this.$emit('delete');
+    },
     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,
-        },
-      });
+      this.$emit('blob-updated', args);
     },
     fetchBlobContent() {
       const baseUrl = getBaseURL();
@@ -75,33 +55,39 @@ export default {
       axios
         .get(url)
         .then(res => {
-          this.originalContent = res.data;
-          this.content = res.data;
+          this.notifyAboutUpdates({ content: res.data });
         })
-        .catch(e => this.flashAPIFailure(e))
-        .finally(() => {
-          this.isContentLoading = false;
-        });
+        .catch(e => this.flashAPIFailure(e));
     },
     flashAPIFailure(err) {
       Flash(sprintf(SNIPPET_BLOB_CONTENT_FETCH_ERROR, { err }));
-      this.isContentLoading = false;
     },
   },
 };
 </script>
 <template>
-  <div class="form-group file-editor">
-    <label>{{ s__('Snippets|File') }}</label>
-    <div class="file-holder snippet">
-      <blob-header-edit v-model="filePath" data-qa-selector="file_name_field" />
-      <gl-loading-icon
-        v-if="isContentLoading"
-        :label="__('Loading snippet')"
-        size="lg"
-        class="loading-animation prepend-top-20 append-bottom-20"
-      />
-      <blob-content-edit v-else v-model="content" :file-name="filePath" />
-    </div>
+  <div class="file-holder snippet">
+    <blob-header-edit
+      :id="inputId"
+      :value="blob.path"
+      data-qa-selector="file_name_field"
+      :can-delete="canDelete"
+      :show-delete="showDelete"
+      @input="notifyAboutUpdates({ path: $event })"
+      @delete="onDelete"
+    />
+    <gl-loading-icon
+      v-if="!blob.isLoaded"
+      :label="__('Loading snippet')"
+      size="lg"
+      class="loading-animation prepend-top-20 append-bottom-20"
+    />
+    <blob-content-edit
+      v-else
+      :value="blob.content"
+      :file-global-id="blob.id"
+      :file-name="blob.path"
+      @input="notifyAboutUpdates({ content: $event })"
+    />
   </div>
 </template>