From d721b6bb84c40a21a5852eba5d3bf904f55ac723 Mon Sep 17 00:00:00 2001
From: Denys Mishunov <dmishunov@gitlab.com>
Date: Fri, 5 Jun 2020 14:13:25 +0200
Subject: [PATCH 1/9] Updated slot syntax

---
 .../components/snippet_description_edit.vue   | 31 +++----
 .../snippet_description_edit_spec.js.snap     | 82 ++++++++++++++-----
 .../snippet_description_edit_spec.js          |  4 +
 3 files changed, 83 insertions(+), 34 deletions(-)

diff --git a/app/assets/javascripts/snippets/components/snippet_description_edit.vue b/app/assets/javascripts/snippets/components/snippet_description_edit.vue
index 0fe539a5de74ef..c06cb5ca60ad9a 100644
--- a/app/assets/javascripts/snippets/components/snippet_description_edit.vue
+++ b/app/assets/javascripts/snippets/components/snippet_description_edit.vue
@@ -30,7 +30,7 @@ export default {
 </script>
 <template>
   <div class="form-group js-description-input">
-    <label>{{ s__('Snippets|Description (optional)') }}</label>
+    <label for="snippet-description">{{ s__('Snippets|Description (optional)') }}</label>
     <div class="js-collapsible-input">
       <div class="js-collapsed" :class="{ 'd-none': value }">
         <gl-form-input
@@ -49,19 +49,22 @@ export default {
         :markdown-preview-path="markdownPreviewPath"
         :markdown-docs-path="markdownDocsPath"
       >
-        <textarea
-          slot="textarea"
-          class="note-textarea js-gfm-input js-autosize markdown-area"
-          dir="auto"
-          data-qa-selector="snippet_description_field"
-          data-supports-quick-actions="false"
-          :value="value"
-          :aria-label="__('Description')"
-          :placeholder="__('Write a comment or drag your files here…')"
-          v-bind="$attrs"
-          @input="$emit('input', $event.target.value)"
-        >
-        </textarea>
+        <template #textarea>
+          <textarea
+            id="snippet-description"
+            ref="textarea"
+            :value="value"
+            class="note-textarea js-gfm-input js-autosize markdown-area"
+            dir="auto"
+            data-qa-selector="snippet_description_field"
+            data-supports-quick-actions="false"
+            :aria-label="__('Description')"
+            :placeholder="__('Write a comment or drag your files here…')"
+            v-bind="$attrs"
+            @input="$emit('input', $event.target.value)"
+          >
+          </textarea>
+        </template>
       </markdown-field>
     </div>
   </div>
diff --git a/spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap b/spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap
index 9fd4cba5b87240..297ad16b681e3f 100644
--- a/spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap
+++ b/spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap
@@ -4,7 +4,9 @@ exports[`Snippet Description Edit component rendering matches the snapshot 1`] =
 <div
   class="form-group js-description-input"
 >
-  <label>
+  <label
+    for="snippet-description"
+  >
     Description (optional)
   </label>
    
@@ -21,27 +23,67 @@ exports[`Snippet Description Edit component rendering matches the snapshot 1`] =
       />
     </div>
      
-    <markdown-field-stub
-      addspacingclasses="true"
-      canattachfile="true"
-      class="js-expanded"
-      enableautocomplete="true"
-      helppagepath=""
-      markdowndocspath="help/"
-      markdownpreviewpath="foo/"
-      note="[object Object]"
-      quickactionsdocspath=""
-      textareavalue=""
+    <div
+      class="js-vue-markdown-field md-area position-relative js-expanded gfm-form"
     >
-      <textarea
-        aria-label="Description"
-        class="note-textarea js-gfm-input js-autosize markdown-area"
-        data-qa-selector="snippet_description_field"
-        data-supports-quick-actions="false"
-        dir="auto"
-        placeholder="Write a comment or drag your files here…"
+      <markdown-header-stub
+        linecontent=""
       />
-    </markdown-field-stub>
+       
+      <div
+        class="md-write-holder"
+      >
+        <div
+          class="zen-backdrop div-dropzone-wrapper"
+        >
+          <div
+            class="div-dropzone js-invalid-dropzone"
+          >
+            <textarea
+              aria-label="Description"
+              class="note-textarea js-gfm-input js-autosize markdown-area"
+              data-qa-selector="snippet_description_field"
+              data-supports-quick-actions="false"
+              dir="auto"
+              id="snippet-description"
+              placeholder="Write a comment or drag your files here…"
+              style="overflow-x: hidden; word-wrap: break-word; overflow-y: hidden;"
+            />
+            <div
+              class="div-dropzone-hover"
+            >
+              <i
+                class="fa fa-paperclip div-dropzone-icon"
+              />
+            </div>
+          </div>
+           
+          <a
+            aria-label="Leave zen mode"
+            class="zen-control zen-control-leave js-zen-leave gl-text-gray-700"
+            href="#"
+          >
+            <icon-stub
+              name="screen-normal"
+              size="16"
+            />
+          </a>
+           
+          <markdown-toolbar-stub
+            canattachfile="true"
+            markdowndocspath="help/"
+            quickactionsdocspath=""
+          />
+        </div>
+      </div>
+       
+      <div
+        class="js-vue-md-preview md md-preview-holder"
+        style="display: none;"
+      />
+       
+      <!---->
+    </div>
   </div>
 </div>
 `;
diff --git a/spec/frontend/snippets/components/snippet_description_edit_spec.js b/spec/frontend/snippets/components/snippet_description_edit_spec.js
index c5e667747c66bf..816ab4e48dec09 100644
--- a/spec/frontend/snippets/components/snippet_description_edit_spec.js
+++ b/spec/frontend/snippets/components/snippet_description_edit_spec.js
@@ -1,4 +1,5 @@
 import SnippetDescriptionEdit from '~/snippets/components/snippet_description_edit.vue';
+import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 import { shallowMount } from '@vue/test-utils';
 
 describe('Snippet Description Edit component', () => {
@@ -15,6 +16,9 @@ describe('Snippet Description Edit component', () => {
         markdownPreviewPath,
         markdownDocsPath,
       },
+      stubs: {
+        MarkdownField,
+      },
     });
   }
 
-- 
GitLab


From 85a142dd58df6dcef0f187a61a7a95366e0742bd Mon Sep 17 00:00:00 2001
From: Denys Mishunov <dmishunov@gitlab.com>
Date: Fri, 5 Jun 2020 14:16:52 +0200
Subject: [PATCH 2/9] Removed spacing classes from description field

---
 .../javascripts/snippets/components/snippet_description_edit.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/javascripts/snippets/components/snippet_description_edit.vue b/app/assets/javascripts/snippets/components/snippet_description_edit.vue
index c06cb5ca60ad9a..737845d09b88f3 100644
--- a/app/assets/javascripts/snippets/components/snippet_description_edit.vue
+++ b/app/assets/javascripts/snippets/components/snippet_description_edit.vue
@@ -46,6 +46,7 @@ export default {
       <markdown-field
         class="js-expanded"
         :class="{ 'd-none': !value }"
+        :add-spacing-classes="false"
         :markdown-preview-path="markdownPreviewPath"
         :markdown-docs-path="markdownDocsPath"
       >
-- 
GitLab


From a1a399d9cd8686d3e85ddf3668eea67ca3112d25 Mon Sep 17 00:00:00 2001
From: Denys Mishunov <dmishunov@gitlab.com>
Date: Wed, 10 Jun 2020 00:30:29 +0200
Subject: [PATCH 3/9] Send attached paths to mutation

When creating a new snippet, to avoid attaching files to the user
object (isntead of the snippet itself), we should send the paths to
the mutation so that backend could move files to the correct place
when saving the new snippet. This is not an issue for the existing
snippets and update mutation
---
 .../javascripts/snippets/components/edit.vue  |  6 +++
 .../217934-snippet-description-files.yml      |  5 ++
 .../frontend/snippets/components/edit_spec.js | 48 +++++++++++++++++++
 3 files changed, 59 insertions(+)
 create mode 100644 changelogs/unreleased/217934-snippet-description-files.yml

diff --git a/app/assets/javascripts/snippets/components/edit.vue b/app/assets/javascripts/snippets/components/edit.vue
index 0253cc126062bd..3afdb7612fc16f 100644
--- a/app/assets/javascripts/snippets/components/edit.vue
+++ b/app/assets/javascripts/snippets/components/edit.vue
@@ -59,6 +59,7 @@ export default {
       isContentLoading: true,
       isUpdating: false,
       newSnippet: false,
+      uploadedFiles: [],
     };
   },
   computed: {
@@ -137,6 +138,10 @@ export default {
         this.onExistingSnippetFetched();
       }
     },
+    getAttachedFiles() {
+      const fileInputs = Array.prototype.slice.call(this.$el.querySelectorAll('[name="files[]"]'));
+      return fileInputs.map(node => node.value);
+    },
     handleFormSubmit() {
       this.isUpdating = true;
       this.$apollo
@@ -145,6 +150,7 @@ export default {
           variables: {
             input: {
               ...this.apiData,
+              uploadedFiles: this.newSnippet ? this.getAttachedFiles() : undefined,
               projectPath: this.newSnippet ? this.projectPath : undefined,
             },
           },
diff --git a/changelogs/unreleased/217934-snippet-description-files.yml b/changelogs/unreleased/217934-snippet-description-files.yml
new file mode 100644
index 00000000000000..193188beeb89fd
--- /dev/null
+++ b/changelogs/unreleased/217934-snippet-description-files.yml
@@ -0,0 +1,5 @@
+---
+title: Send information about attached files to the GraphQL mutation
+merge_request: 34221
+author:
+type: fixed
diff --git a/spec/frontend/snippets/components/edit_spec.js b/spec/frontend/snippets/components/edit_spec.js
index c21aba5e251243..28b63c46a5f891 100644
--- a/spec/frontend/snippets/components/edit_spec.js
+++ b/spec/frontend/snippets/components/edit_spec.js
@@ -40,6 +40,9 @@ const newlyEditedSnippetUrl = 'http://foo.bar';
 const apiError = { message: 'Ufff' };
 const mutationError = 'Bummer';
 
+const attachedFilePath1 = 'foo/bar';
+const attachedFilePath2 = 'alpha/beta';
+
 const defaultProps = {
   snippetGid: 'gid://gitlab/PersonalSnippet/42',
   markdownPreviewPath: 'http://preview.foo.bar',
@@ -361,5 +364,50 @@ describe('Snippet Edit app', () => {
         },
       );
     });
+
+    describe('correctly includes attached files into the mutation', () => {
+      it.each`
+        newSnippet | paths                                     | mutation                 | pathsLength | expectation
+        ${true}    | ${[attachedFilePath1]}                    | ${CreateSnippetMutation} | ${1}        | ${[attachedFilePath1]}
+        ${true}    | ${[attachedFilePath2]}                    | ${CreateSnippetMutation} | ${1}        | ${[attachedFilePath2]}
+        ${true}    | ${[attachedFilePath1, attachedFilePath2]} | ${CreateSnippetMutation} | ${2}        | ${[attachedFilePath1, attachedFilePath2]}
+        ${true}    | ${[]}                                     | ${CreateSnippetMutation} | ${0}        | ${[]}
+        ${false}   | ${[attachedFilePath1, attachedFilePath2]} | ${UpdateSnippetMutation} | ${null}     | ${undefined}
+      `(
+        `correctly sends paths for $pathsLength files`,
+        ({ newSnippet, paths, mutation, expectation }) => {
+          const fixtures = paths.map(path => {
+            return path ? `<input name="files[]" value="${path}">` : undefined;
+          });
+
+          createComponent({
+            data: {
+              newSnippet,
+            },
+            props: {
+              ...defaultProps,
+            },
+          });
+
+          if (fixtures.length) {
+            wrapper.vm.$el.innerHTML += fixtures.join('');
+          }
+
+          const mutationPayload = {
+            mutation: CreateSnippetMutation,
+            variables: {
+              input: expect.objectContaining({ uploadedFiles: expectation }),
+            },
+          };
+
+          wrapper.vm.handleFormSubmit();
+          if (mutation === CreateSnippetMutation) {
+            expect(resolveMutate).toHaveBeenCalledWith(mutationPayload);
+          } else {
+            expect(resolveMutate).not.toHaveBeenCalledWith(mutationPayload);
+          }
+        },
+      );
+    });
   });
 });
-- 
GitLab


From 18a5e47f9a71b73c3b1616a11411597de3b3752e Mon Sep 17 00:00:00 2001
From: Denys Mishunov <dmishunov@gitlab.com>
Date: Wed, 10 Jun 2020 11:21:47 +0200
Subject: [PATCH 4/9] Updated NodeList-to-Array conversion

Instead of slicing on the prototype, we use .from()
---
 app/assets/javascripts/snippets/components/edit.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/snippets/components/edit.vue b/app/assets/javascripts/snippets/components/edit.vue
index 3afdb7612fc16f..658b1c03adf201 100644
--- a/app/assets/javascripts/snippets/components/edit.vue
+++ b/app/assets/javascripts/snippets/components/edit.vue
@@ -139,7 +139,7 @@ export default {
       }
     },
     getAttachedFiles() {
-      const fileInputs = Array.prototype.slice.call(this.$el.querySelectorAll('[name="files[]"]'));
+      const fileInputs = Array.from(this.$el.querySelectorAll('[name="files[]"]'));
       return fileInputs.map(node => node.value);
     },
     handleFormSubmit() {
-- 
GitLab


From 5072baca0371ff982f0fbfaad866151acea16116 Mon Sep 17 00:00:00 2001
From: Denys Mishunov <dmishunov@gitlab.com>
Date: Wed, 10 Jun 2020 11:44:25 +0200
Subject: [PATCH 5/9] Refactored form submission in the spec

---
 .../javascripts/snippets/components/edit.vue  |  3 ++-
 .../frontend/snippets/components/edit_spec.js | 23 +++++++++++++------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/snippets/components/edit.vue b/app/assets/javascripts/snippets/components/edit.vue
index 658b1c03adf201..7f01dcdb6016c1 100644
--- a/app/assets/javascripts/snippets/components/edit.vue
+++ b/app/assets/javascripts/snippets/components/edit.vue
@@ -222,7 +222,8 @@ export default {
             variant="success"
             :disabled="updatePrevented"
             data-qa-selector="submit_button"
-            @click.prevent="handleFormSubmit"
+            data-testid="snippet-submit-btn"
+            @click="handleFormSubmit"
             >{{ saveButtonLabel }}</gl-button
           >
         </template>
diff --git a/spec/frontend/snippets/components/edit_spec.js b/spec/frontend/snippets/components/edit_spec.js
index 28b63c46a5f891..40a59eb6d74eef 100644
--- a/spec/frontend/snippets/components/edit_spec.js
+++ b/spec/frontend/snippets/components/edit_spec.js
@@ -123,8 +123,9 @@ describe('Snippet Edit app', () => {
     wrapper.destroy();
   });
 
-  const findSubmitButton = () => wrapper.find('[type=submit]');
+  const findSubmitButton = () => wrapper.find('[data-testid="snippet-submit-btn"]');
   const findCancellButton = () => wrapper.find('[data-testid="snippet-cancel-btn"]');
+  const clickSubmitBtn = () => findSubmitButton().vm.$emit('click');
 
   describe('rendering', () => {
     it('renders loader while the query is in flight', () => {
@@ -292,13 +293,15 @@ describe('Snippet Edit app', () => {
           },
         };
 
-        wrapper.vm.handleFormSubmit();
+        clickSubmitBtn();
+
         expect(resolveMutate).toHaveBeenCalledWith(mutationPayload);
       });
 
       it('redirects to snippet view on successful mutation', () => {
         createComponent();
-        wrapper.vm.handleFormSubmit();
+        clickSubmitBtn();
+
         return waitForPromises().then(() => {
           expect(redirectTo).toHaveBeenCalledWith(newlyEditedSnippetUrl);
         });
@@ -325,7 +328,8 @@ describe('Snippet Edit app', () => {
             mutationRes: mutationTypes.RESOLVE_WITH_ERRORS,
           });
 
-          wrapper.vm.handleFormSubmit();
+          clickSubmitBtn();
+
           return waitForPromises().then(() => {
             expect(redirectTo).not.toHaveBeenCalled();
             expect(flashSpy).toHaveBeenCalledWith(mutationError);
@@ -337,7 +341,9 @@ describe('Snippet Edit app', () => {
         createComponent({
           mutationRes: mutationTypes.REJECT,
         });
-        wrapper.vm.handleFormSubmit();
+
+        clickSubmitBtn();
+
         return waitForPromises().then(() => {
           expect(redirectTo).not.toHaveBeenCalled();
           expect(flashSpy).toHaveBeenCalledWith(apiError);
@@ -357,7 +363,9 @@ describe('Snippet Edit app', () => {
             },
             mutationRes: mutationTypes.REJECT,
           });
-          wrapper.vm.handleFormSubmit();
+
+          clickSubmitBtn();
+
           return waitForPromises().then(() => {
             expect(Flash).toHaveBeenCalledWith(expect.stringContaining(expectation));
           });
@@ -400,7 +408,8 @@ describe('Snippet Edit app', () => {
             },
           };
 
-          wrapper.vm.handleFormSubmit();
+          clickSubmitBtn();
+
           if (mutation === CreateSnippetMutation) {
             expect(resolveMutate).toHaveBeenCalledWith(mutationPayload);
           } else {
-- 
GitLab


From 7c841c0af61e82c4e2c10a674742075c269f757e Mon Sep 17 00:00:00 2001
From: Denys Mishunov <dmishunov@gitlab.com>
Date: Wed, 10 Jun 2020 16:34:24 +0200
Subject: [PATCH 6/9] Refactored `uploadFiles` tests as per review

---
 .../frontend/snippets/components/edit_spec.js | 75 ++++++++++---------
 1 file changed, 38 insertions(+), 37 deletions(-)

diff --git a/spec/frontend/snippets/components/edit_spec.js b/spec/frontend/snippets/components/edit_spec.js
index 40a59eb6d74eef..6c91e0dd672525 100644
--- a/spec/frontend/snippets/components/edit_spec.js
+++ b/spec/frontend/snippets/components/edit_spec.js
@@ -374,49 +374,50 @@ describe('Snippet Edit app', () => {
     });
 
     describe('correctly includes attached files into the mutation', () => {
+      const createMutationPayload = expectation => {
+        return expect.objectContaining({
+          variables: {
+            input: expect.objectContaining({ uploadedFiles: expectation }),
+          },
+        });
+      };
+
+      const updateMutationPayload = () => {
+        return expect.objectContaining({
+          variables: {
+            input: expect.not.objectContaining({ uploadedFiles: expect.anything() }),
+          },
+        });
+      };
+
       it.each`
-        newSnippet | paths                                     | mutation                 | pathsLength | expectation
-        ${true}    | ${[attachedFilePath1]}                    | ${CreateSnippetMutation} | ${1}        | ${[attachedFilePath1]}
-        ${true}    | ${[attachedFilePath2]}                    | ${CreateSnippetMutation} | ${1}        | ${[attachedFilePath2]}
-        ${true}    | ${[attachedFilePath1, attachedFilePath2]} | ${CreateSnippetMutation} | ${2}        | ${[attachedFilePath1, attachedFilePath2]}
-        ${true}    | ${[]}                                     | ${CreateSnippetMutation} | ${0}        | ${[]}
-        ${false}   | ${[attachedFilePath1, attachedFilePath2]} | ${UpdateSnippetMutation} | ${null}     | ${undefined}
-      `(
-        `correctly sends paths for $pathsLength files`,
-        ({ newSnippet, paths, mutation, expectation }) => {
-          const fixtures = paths.map(path => {
-            return path ? `<input name="files[]" value="${path}">` : undefined;
-          });
+        paths                                     | expectation
+        ${[attachedFilePath1]}                    | ${[attachedFilePath1]}
+        ${[attachedFilePath1, attachedFilePath2]} | ${[attachedFilePath1, attachedFilePath2]}
+        ${[]}                                     | ${[]}
+      `(`correctly sends paths for $paths.length files`, ({ paths, expectation }) => {
+        createComponent({
+          data: {
+            newSnippet: true,
+          },
+        });
 
-          createComponent({
-            data: {
-              newSnippet,
-            },
-            props: {
-              ...defaultProps,
-            },
-          });
+        const fixtures = paths.map(path => {
+          return path ? `<input name="files[]" value="${path}">` : undefined;
+        });
+        wrapper.vm.$el.innerHTML += fixtures.join('');
 
-          if (fixtures.length) {
-            wrapper.vm.$el.innerHTML += fixtures.join('');
-          }
+        clickSubmitBtn();
 
-          const mutationPayload = {
-            mutation: CreateSnippetMutation,
-            variables: {
-              input: expect.objectContaining({ uploadedFiles: expectation }),
-            },
-          };
+        expect(resolveMutate).toHaveBeenCalledWith(createMutationPayload(expectation));
+      });
 
-          clickSubmitBtn();
+      it(`neither fails nor sends 'uploadedFiles' to update mutation`, () => {
+        createComponent();
 
-          if (mutation === CreateSnippetMutation) {
-            expect(resolveMutate).toHaveBeenCalledWith(mutationPayload);
-          } else {
-            expect(resolveMutate).not.toHaveBeenCalledWith(mutationPayload);
-          }
-        },
-      );
+        clickSubmitBtn();
+        expect(resolveMutate).toHaveBeenCalledWith(updateMutationPayload());
+      });
     });
   });
 });
-- 
GitLab


From 1413d9322283efdb7d195bc27838abe816ec69b3 Mon Sep 17 00:00:00 2001
From: Denys Mishunov <dmishunov@gitlab.com>
Date: Wed, 10 Jun 2020 23:13:15 +0200
Subject: [PATCH 7/9] Split create and update mutations

To not heavily rely on the conditions, it's cleaner to have
separate props for each type of the mutation
---
 .../javascripts/snippets/components/edit.vue  | 33 ++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/snippets/components/edit.vue b/app/assets/javascripts/snippets/components/edit.vue
index 7f01dcdb6016c1..18c2886155323f 100644
--- a/app/assets/javascripts/snippets/components/edit.vue
+++ b/app/assets/javascripts/snippets/components/edit.vue
@@ -59,7 +59,6 @@ export default {
       isContentLoading: true,
       isUpdating: false,
       newSnippet: false,
-      uploadedFiles: [],
     };
   },
   computed: {
@@ -97,6 +96,26 @@ export default {
     descriptionFieldId() {
       return `${this.isProjectSnippet ? 'project' : 'personal'}_snippet_description`;
     },
+    createMutation() {
+      return {
+        mutation: CreateSnippetMutation,
+        variables: {
+          input: {
+            ...this.apiData,
+            uploadedFiles: this.getAttachedFiles(),
+            projectPath: this.projectPath,
+          },
+        },
+      };
+    },
+    updateMutation() {
+      return {
+        mutation: UpdateSnippetMutation,
+        variables: {
+          input: this.apiData,
+        },
+      };
+    },
   },
   methods: {
     updateFileName(newName) {
@@ -145,16 +164,7 @@ export default {
     handleFormSubmit() {
       this.isUpdating = true;
       this.$apollo
-        .mutate({
-          mutation: this.newSnippet ? CreateSnippetMutation : UpdateSnippetMutation,
-          variables: {
-            input: {
-              ...this.apiData,
-              uploadedFiles: this.newSnippet ? this.getAttachedFiles() : undefined,
-              projectPath: this.newSnippet ? this.projectPath : undefined,
-            },
-          },
-        })
+        .mutate(this.newSnippet ? this.createMutation : this.updateMutation)
         .then(({ data }) => {
           const baseObj = this.newSnippet ? data?.createSnippet : data?.updateSnippet;
 
@@ -217,7 +227,6 @@ export default {
       <form-footer-actions>
         <template #prepend>
           <gl-button
-            type="submit"
             category="primary"
             variant="success"
             :disabled="updatePrevented"
-- 
GitLab


From 6a7ea294a4c7091b2fee4f0b58ba41d774efc192 Mon Sep 17 00:00:00 2001
From: Denys Mishunov <dmishunov@gitlab.com>
Date: Thu, 11 Jun 2020 16:51:50 +0200
Subject: [PATCH 8/9] Moved form submission listener to the form

---
 app/assets/javascripts/snippets/components/edit.vue | 6 ++++--
 spec/frontend/snippets/components/edit_spec.js      | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/snippets/components/edit.vue b/app/assets/javascripts/snippets/components/edit.vue
index 18c2886155323f..b5e7da48344264 100644
--- a/app/assets/javascripts/snippets/components/edit.vue
+++ b/app/assets/javascripts/snippets/components/edit.vue
@@ -192,6 +192,8 @@ export default {
   <form
     class="snippet-form js-requires-input js-quick-submit common-note-form"
     :data-snippet-type="isProjectSnippet ? 'project' : 'personal'"
+    data-testid="snippet-edit-form"
+    @submit.prevent="handleFormSubmit"
   >
     <gl-loading-icon
       v-if="isLoading"
@@ -228,16 +230,16 @@ export default {
         <template #prepend>
           <gl-button
             category="primary"
+            type="submit"
             variant="success"
             :disabled="updatePrevented"
             data-qa-selector="submit_button"
             data-testid="snippet-submit-btn"
-            @click="handleFormSubmit"
             >{{ saveButtonLabel }}</gl-button
           >
         </template>
         <template #append>
-          <gl-button data-testid="snippet-cancel-btn" :href="cancelButtonHref">{{
+          <gl-button type="cancel" data-testid="snippet-cancel-btn" :href="cancelButtonHref">{{
             __('Cancel')
           }}</gl-button>
         </template>
diff --git a/spec/frontend/snippets/components/edit_spec.js b/spec/frontend/snippets/components/edit_spec.js
index 6c91e0dd672525..83f46dd347f683 100644
--- a/spec/frontend/snippets/components/edit_spec.js
+++ b/spec/frontend/snippets/components/edit_spec.js
@@ -125,7 +125,7 @@ describe('Snippet Edit app', () => {
 
   const findSubmitButton = () => wrapper.find('[data-testid="snippet-submit-btn"]');
   const findCancellButton = () => wrapper.find('[data-testid="snippet-cancel-btn"]');
-  const clickSubmitBtn = () => findSubmitButton().vm.$emit('click');
+  const clickSubmitBtn = () => wrapper.find('[data-testid="snippet-edit-form"]').trigger('submit');
 
   describe('rendering', () => {
     it('renders loader while the query is in flight', () => {
-- 
GitLab


From f5de75aa827a13ee30aadf181946490bc1643ffc Mon Sep 17 00:00:00 2001
From: Denys Mishunov <dmishunov@gitlab.com>
Date: Thu, 11 Jun 2020 17:41:50 +0200
Subject: [PATCH 9/9] Converting computed into methods

This should allow us to avoid setting up a bunch of unnecessary
listeners in Vue
---
 .../javascripts/snippets/components/edit.vue  | 42 +++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/app/assets/javascripts/snippets/components/edit.vue b/app/assets/javascripts/snippets/components/edit.vue
index b5e7da48344264..a6651515e475d4 100644
--- a/app/assets/javascripts/snippets/components/edit.vue
+++ b/app/assets/javascripts/snippets/components/edit.vue
@@ -96,26 +96,6 @@ export default {
     descriptionFieldId() {
       return `${this.isProjectSnippet ? 'project' : 'personal'}_snippet_description`;
     },
-    createMutation() {
-      return {
-        mutation: CreateSnippetMutation,
-        variables: {
-          input: {
-            ...this.apiData,
-            uploadedFiles: this.getAttachedFiles(),
-            projectPath: this.projectPath,
-          },
-        },
-      };
-    },
-    updateMutation() {
-      return {
-        mutation: UpdateSnippetMutation,
-        variables: {
-          input: this.apiData,
-        },
-      };
-    },
   },
   methods: {
     updateFileName(newName) {
@@ -161,10 +141,30 @@ export default {
       const fileInputs = Array.from(this.$el.querySelectorAll('[name="files[]"]'));
       return fileInputs.map(node => node.value);
     },
+    createMutation() {
+      return {
+        mutation: CreateSnippetMutation,
+        variables: {
+          input: {
+            ...this.apiData,
+            uploadedFiles: this.getAttachedFiles(),
+            projectPath: this.projectPath,
+          },
+        },
+      };
+    },
+    updateMutation() {
+      return {
+        mutation: UpdateSnippetMutation,
+        variables: {
+          input: this.apiData,
+        },
+      };
+    },
     handleFormSubmit() {
       this.isUpdating = true;
       this.$apollo
-        .mutate(this.newSnippet ? this.createMutation : this.updateMutation)
+        .mutate(this.newSnippet ? this.createMutation() : this.updateMutation())
         .then(({ data }) => {
           const baseObj = this.newSnippet ? data?.createSnippet : data?.updateSnippet;
 
-- 
GitLab