Do not fetch snippet on snippet creation

Cleaned up the component as well to get rid of redundant props

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

@@ -46,7 +46,7 @@ export default {
       query: defaultVisibilityQuery,
       manual: true,
       result({ data: { selectedLevel } }) {
-        this.selectedLevelDefault = selectedLevel;
+        this.snippet.visibilityLevel = selectedLevel;
       },
     },
   },
@@ -73,9 +73,12 @@ export default {
   data() {
     return {
       isUpdating: false,
-      newSnippet: false,
       actions: [],
-      selectedLevelDefault: SNIPPET_VISIBILITY_PRIVATE,
+      snippet: {
+        title: '',
+        description: '',
+        visibilityLevel: SNIPPET_VISIBILITY_PRIVATE,
+      },
     };
   },
   computed: {
@@ -112,13 +115,6 @@ export default {
       }
       return this.snippet.webUrl;
     },
-    newSnippetSchema() {
-      return {
-        title: '',
-        description: '',
-        visibilityLevel: this.selectedLevelDefault,
-      };
-    },
   },
   beforeCreate() {
     performanceMarkAndMeasure({ mark: SNIPPET_MARK_EDIT_APP_START });
@@ -145,20 +141,6 @@ export default {
       Flash(sprintf(defaultErrorMsg, { err }));
       this.isUpdating = false;
     },
-    onNewSnippetFetched() {
-      this.newSnippet = true;
-      this.snippet = this.newSnippetSchema;
-    },
-    onExistingSnippetFetched() {
-      this.newSnippet = false;
-    },
-    onSnippetFetch(snippetRes) {
-      if (snippetRes.data.snippets.nodes.length === 0) {
-        this.onNewSnippetFetched();
-      } else {
-        this.onExistingSnippetFetched();
-      }
-    },
     getAttachedFiles() {
       const fileInputs = Array.from(this.$el.querySelectorAll('[name="files[]"]'));
       return fileInputs.map(node => node.value);
@@ -209,7 +191,7 @@ export default {
 </script>
 <template>
   <form
-    class="snippet-form js-requires-input js-quick-submit common-note-form"
+    class="snippet-form js-quick-submit common-note-form"
     :data-snippet-type="isProjectSnippet ? 'project' : 'personal'"
     data-testid="snippet-edit-form"
     @submit.prevent="handleFormSubmit"

app/assets/javascripts/snippets/mixins/snippets.js

@@ -21,9 +21,9 @@ export const getSnippetMixin = {
       },
       result(res) {
         this.blobs = res.data.snippets.nodes[0]?.blobs || blobsDefault;
-        if (this.onSnippetFetch) {
-          this.onSnippetFetch(res);
-        }
+      },
+      skip() {
+        return this.newSnippet;
       },
     },
   },
@@ -36,7 +36,7 @@ export const getSnippetMixin = {
   data() {
     return {
       snippet: {},
-      newSnippet: false,
+      newSnippet: !this.snippetGid,
       blobs: blobsDefault,
     };
   },

spec/frontend/snippets/components/edit_spec.js

@@ -12,10 +12,13 @@ import SnippetVisibilityEdit from '~/snippets/components/snippet_visibility_edit
 import SnippetBlobActionsEdit from '~/snippets/components/snippet_blob_actions_edit.vue';
 import TitleField from '~/vue_shared/components/form/title.vue';
 import FormFooterActions from '~/vue_shared/components/form/form_footer_actions.vue';
-import { SNIPPET_VISIBILITY_PRIVATE } from '~/snippets/constants';
+import {
+  SNIPPET_VISIBILITY_PRIVATE,
+  SNIPPET_VISIBILITY_INTERNAL,
+  SNIPPET_VISIBILITY_PUBLIC,
+} from '~/snippets/constants';
 import UpdateSnippetMutation from '~/snippets/mutations/updateSnippet.mutation.graphql';
 import CreateSnippetMutation from '~/snippets/mutations/createSnippet.mutation.graphql';
-import defaultVisibilityQuery from '~/snippets/queries/snippet_visibility.query.graphql';
 import { testEntries } from '../test_utils';
 
 jest.mock('~/flash');
@@ -53,7 +56,9 @@ describe('Snippet Edit app', () => {
   let fakeApollo;
   const relativeUrlRoot = '/foo/';
   const originalRelativeUrlRoot = gon.relative_url_root;
-  const GetSnippetQuerySpy = jest.fn().mockResolvedValue(createTestSnippet());
+  const GetSnippetQuerySpy = jest.fn().mockResolvedValue({
+    data: { snippets: { nodes: [createTestSnippet()] } },
+  });
 
   const mutationTypes = {
     RESOLVE: jest.fn().mockResolvedValue({
@@ -84,6 +89,7 @@ describe('Snippet Edit app', () => {
     loading = false,
     mutationRes = mutationTypes.RESOLVE,
     withApollo = false,
+    apolloData = { selectedLevel: SNIPPET_VISIBILITY_PRIVATE },
   } = {}) {
     let componentData = {
       mocks: {
@@ -94,6 +100,13 @@ describe('Snippet Edit app', () => {
           mutate: mutationRes,
         },
       },
+      data() {
+        return {
+          snippet: {
+            visibilityLevel: SNIPPET_VISIBILITY_PRIVATE,
+          },
+        };
+      },
     };
 
     if (wrapper) {
@@ -104,18 +117,13 @@ describe('Snippet Edit app', () => {
       const localVue = createLocalVue();
       localVue.use(VueApollo);
 
-      const requestHandlers = [
-        [GetSnippetQuery, GetSnippetQuerySpy],
-        [
-          defaultVisibilityQuery,
-          jest.fn().mockResolvedValue({
-            visibilityLevels: expect.anything(),
-            selectedLevel: SNIPPET_VISIBILITY_PRIVATE,
-            multipleLevelsRestricted: expect.anything(),
-          }),
-        ],
-      ];
+      const requestHandlers = [[GetSnippetQuery, GetSnippetQuerySpy]];
       fakeApollo = createMockApollo(requestHandlers);
+      fakeApollo.clients.defaultClient.cache.writeData({
+        data: {
+          ...apolloData,
+        },
+      });
       componentData = {
         localVue,
         apolloProvider: fakeApollo,
@@ -134,13 +142,6 @@ describe('Snippet Edit app', () => {
         markdownDocsPath: 'http://docs.foo.bar',
         ...props,
       },
-      data() {
-        return {
-          snippet: {
-            visibilityLevel: SNIPPET_VISIBILITY_PRIVATE,
-          },
-        };
-      },
     });
   }
 
@@ -212,15 +213,6 @@ describe('Snippet Edit app', () => {
       },
     );
 
-    it('does not make the query to fetch snippet on create', async () => {
-      createComponent({ props: { snippetGid: '' }, withApollo: true });
-
-      jest.runOnlyPendingTimers();
-      await wrapper.vm.$nextTick();
-
-      expect(GetSnippetQuerySpy).not.toHaveBeenCalled();
-    });
-
     it.each`
       title    | actions                                          | shouldDisable
       ${''}    | ${[]}                                            | ${true}
@@ -266,6 +258,34 @@ describe('Snippet Edit app', () => {
   });
 
   describe('functionality', () => {
+    it('does not fetch snippet when create a new snippet', async () => {
+      createComponent({ props: { snippetGid: '' }, withApollo: true });
+
+      jest.runOnlyPendingTimers();
+      await wrapper.vm.$nextTick();
+
+      expect(GetSnippetQuerySpy).not.toHaveBeenCalled();
+    });
+
+    describe('default visibility', () => {
+      it.each([SNIPPET_VISIBILITY_PRIVATE, SNIPPET_VISIBILITY_INTERNAL, SNIPPET_VISIBILITY_PUBLIC])(
+        'marks %s visibility by default',
+        async visibility => {
+          createComponent({
+            props: { snippetGid: '' },
+            withApollo: true,
+            apolloData: {
+              selectedLevel: visibility,
+            },
+          });
+          jest.runOnlyPendingTimers();
+          await wrapper.vm.$nextTick();
+
+          expect(wrapper.vm.snippet.visibilityLevel).toEqual(visibility);
+        },
+      );
+    });
+
     describe('form submission handling', () => {
       it.each`
         snippetArg               | projectPath       | uploadedFiles          | input                                                                       | mutation