fixup! Add/remove snippet files in the edit view

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

@@ -56,7 +56,6 @@ export default {
       isUpdating: false,
       newSnippet: false,
       actions: [],
-      isLoaded: false,
     };
   },
   computed: {
@@ -133,8 +132,6 @@ export default {
       this.newSnippet = false;
     },
     onSnippetFetch(snippetRes) {
-      this.isLoaded = true;
-
       if (snippetRes.data.snippets.edges.length === 0) {
         this.onNewSnippetFetched();
       } else {
@@ -221,11 +218,7 @@ export default {
         :markdown-preview-path="markdownPreviewPath"
         :markdown-docs-path="markdownDocsPath"
       />
-      <snippet-blob-actions-edit
-        :is-ready="isLoaded"
-        :init-blobs="blobs"
-        @actions="updateActions"
-      />
+      <snippet-blob-actions-edit :init-blobs="blobs" @actions="updateActions" />
 
       <snippet-visibility-edit
         v-model="snippet.visibilityLevel"

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

@@ -14,15 +14,12 @@ export default {
   },
   mixins: [glFeatureFlagsMixin()],
   props: {
+    // TODO: Build reactivity for initBlobs.
+    // What happens if this changes (i.e. blobs are being loaded through pages)?
     initBlobs: {
       type: Array,
       required: true,
     },
-    isReady: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
   },
   data() {
     return {
@@ -74,14 +71,6 @@ export default {
     },
   },
   watch: {
-    isReady: {
-      immediate: true,
-      handler(val) {
-        if (val) {
-          this.setup();
-        }
-      },
-    },
     actions: {
       immediate: true,
       handler(val) {
@@ -89,8 +78,7 @@ export default {
       },
     },
   },
-  methods: {
-    setup() {
+  created() {
     const blobs = this.initBlobs.map(decorateBlob);
     const blobsById = blobs.reduce((acc, x) => Object.assign(acc, { [x.id]: x }), {});
 
@@ -103,6 +91,7 @@ export default {
       this.addBlob();
     }
   },
+  methods: {
     updateBlobContent(id, content) {
       const origBlob = this.blobsOrig[id];
       const blob = this.blobs[id];

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

@@ -18,13 +18,12 @@ export default {
   props: {
     blob: {
       type: Object,
-      required: false,
-      default: null,
+      required: true,
     },
     canDelete: {
       type: Boolean,
       required: false,
-      default: false,
+      default: true,
     },
     showDelete: {
       type: Boolean,

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

@@ -5,6 +5,7 @@ exports[`Snippet Blob Edit component with loaded blob matches snapshot 1`] = `
   class="file-holder snippet"
 >
   <blob-header-edit-stub
+    candelete="true"
     data-qa-selector="file_name_field"
     id="blob_local_7_file_path"
     value="foo/bar/test.md"

spec/frontend/snippets/components/snippet_blob_actions_edit_spec.js

@@ -23,7 +23,6 @@ describe('snippets/components/snippet_blob_actions_edit', () => {
     wrapper = shallowMount(SnippetBlobActionsEdit, {
       propsData: {
         initBlobs: TEST_BLOBS,
-        isReady: false,
         ...props,
       },
       provide: {
@@ -76,7 +75,7 @@ describe('snippets/components/snippet_blob_actions_edit', () => {
     ${false}    | ${'File'}  | ${false}   | ${false}
   `('with feature flag = $featureFlag', ({ featureFlag, label, showDelete, showAdd }) => {
     beforeEach(() => {
-      createComponent({ isReady: true }, featureFlag);
+      createComponent({}, featureFlag);
     });
 
     it('renders label', () => {
@@ -100,17 +99,6 @@ describe('snippets/components/snippet_blob_actions_edit', () => {
       createComponent();
     });
 
-    it('has no blobs yet', () => {
-      expect(findBlobsData()).toEqual([]);
-    });
-
-    describe('when isReady', () => {
-      beforeEach(async () => {
-        wrapper.setProps({ isReady: true });
-
-        await wrapper.vm.$nextTick();
-      });
-
     it('emits no actions', () => {
       expect(getLastActions()).toEqual([]);
     });
@@ -159,9 +147,7 @@ describe('snippets/components/snippet_blob_actions_edit', () => {
       });
 
       it('removes blob', () => {
-          expect(findBlobsData()).toEqual(
-            buildBlobsDataExpectation(TEST_BLOBS_UNLOADED.slice(0, 1)),
-          );
+        expect(findBlobsData()).toEqual(buildBlobsDataExpectation(TEST_BLOBS_UNLOADED.slice(0, 1)));
       });
 
       it('emits action', () => {
@@ -228,7 +214,6 @@ describe('snippets/components/snippet_blob_actions_edit', () => {
       });
     });
   });
-  });
 
   describe('with 1 blob', () => {
     beforeEach(() => {

spec/frontend/snippets/components/snippet_blob_edit_spec.js

@@ -141,7 +141,7 @@ describe('Snippet Blob Edit component', () => {
     });
 
     it('shows blob header', () => {
-      const { canDelete = false, showDelete = false } = props;
+      const { canDelete = true, showDelete = false } = props;
 
       expect(findHeader().props()).toMatchObject({
         canDelete,