Fixed cancel action on snippet edit form

Made sure we redirect to the snippet view if the cancel button is
clicked on an existing snippet

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

@@ -81,7 +81,10 @@ export default {
       return this.isUpdating ? __('Saving') : __('Save changes');
     },
     cancelButtonHref() {
-      return this.projectPath ? `/${this.projectPath}/snippets` : `/snippets`;
+      if (this.newSnippet) {
+        return this.projectPath ? `/${this.projectPath}/snippets` : `/snippets`;
+      }
+      return this.snippet.webUrl;
     },
     titleFieldId() {
       return `${this.isProjectSnippet ? 'project' : 'personal'}_snippet_title`;
@@ -203,7 +206,9 @@ export default {
           >
         </template>
         <template #append>
-          <gl-button :href="cancelButtonHref">{{ __('Cancel') }}</gl-button>
+          <gl-button class="js-snippet-cancel-btn" :href="cancelButtonHref">{{
+            __('Cancel')
+          }}</gl-button>
         </template>
       </form-footer-actions>
     </template>

spec/frontend/snippets/components/edit_spec.js

@@ -100,6 +100,7 @@ describe('Snippet Edit app', () => {
   });
 
   const findSubmitButton = () => wrapper.find('[type=submit]');
+  const findCancellButton = () => wrapper.find('.js-snippet-cancel-btn');
 
   describe('rendering', () => {
     it('renders loader while the query is in flight', () => {
@@ -148,6 +149,21 @@ describe('Snippet Edit app', () => {
         expect(isBtnDisabled).toBe(expectation);
       },
     );
+
+    it.each`
+      isNew    | status        | expectation
+      ${true}  | ${`new`}      | ${`/snippets`}
+      ${false} | ${`existing`} | ${newlyEditedSnippetUrl}
+    `('sets correct href for the cancel button on a $status snippet', ({ isNew, expectation }) => {
+      createComponent({
+        data: {
+          snippet: { webUrl: newlyEditedSnippetUrl },
+          newSnippet: isNew,
+        },
+      });
+
+      expect(findCancellButton().attributes('href')).toBe(expectation);
+    });
   });
 
   describe('functionality', () => {