Take relative_url_root into account

When building hardcoded URLs, we have to make sure we do not
leave out the relative_url_root as this breaks URLs on
 instances, served from a subfolder

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

@@ -88,7 +88,9 @@ export default {
     },
     cancelButtonHref() {
       if (this.newSnippet) {
-        return this.projectPath ? `/${this.projectPath}/-/snippets` : `/-/snippets`;
+        return this.projectPath
+          ? `${gon.relative_url_root}${this.projectPath}/-/snippets`
+          : `${gon.relative_url_root}-/snippets`;
       }
       return this.snippet.webUrl;
     },

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

@@ -97,7 +97,7 @@ export default {
           text: __('New snippet'),
           href: this.snippet.project
             ? `${this.snippet.project.webUrl}/-/snippets/new`
-            : '/-/snippets/new',
+            : `${gon.relative_url_root}-/snippets/new`,
           variant: 'success',
           category: 'secondary',
           cssClass: 'ml-2',
@@ -137,7 +137,7 @@ export default {
     redirectToSnippets() {
       window.location.pathname = this.snippet.project
         ? `${this.snippet.project.fullPath}/-/snippets`
-        : 'dashboard/snippets';
+        : `${gon.relative_url_root}dashboard/snippets`;
     },
     closeDeleteModal() {
       this.$refs.deleteModal.hide();

changelogs/unreleased/220509-new-snippet-link.yml

+---
+title: Take relative_url_path into account when building URLs in snippets
+merge_request: 39960
+author:
+type: fixed

spec/frontend/snippets/components/edit_spec.js

@@ -47,6 +47,8 @@ const createTestSnippet = () => ({
 
 describe('Snippet Edit app', () => {
   let wrapper;
+  const relativeUrlRoot = '/foo/';
+  const originalRelativeUrlRoot = gon.relative_url_root;
 
   const mutationTypes = {
     RESOLVE: jest.fn().mockResolvedValue({
@@ -104,12 +106,14 @@ describe('Snippet Edit app', () => {
   }
 
   beforeEach(() => {
+    gon.relative_url_root = relativeUrlRoot;
     jest.spyOn(urlUtils, 'redirectTo').mockImplementation();
   });
 
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
+    gon.relative_url_root = originalRelativeUrlRoot;
   });
 
   const findBlobActions = () => wrapper.find(SnippetBlobActionsEdit);
@@ -196,8 +200,8 @@ describe('Snippet Edit app', () => {
 
     it.each`
       projectPath       | snippetArg               | expectation
-      ${''}             | ${[]}                    | ${'/-/snippets'}
-      ${'project/path'} | ${[]}                    | ${'/project/path/-/snippets'}
+      ${''}             | ${[]}                    | ${`${relativeUrlRoot}-/snippets`}
+      ${'project/path'} | ${[]}                    | ${`${relativeUrlRoot}project/path/-/snippets`}
       ${''}             | ${[createTestSnippet()]} | ${TEST_WEB_URL}
       ${'project/path'} | ${[createTestSnippet()]} | ${TEST_WEB_URL}
     `(

spec/frontend/snippets/components/snippet_header_spec.js

@@ -14,6 +14,7 @@ describe('Snippet header component', () => {
 
   let errorMsg;
   let err;
+  const originalRelativeUrlRoot = gon.relative_url_root;
 
   function createComponent({
     loading = false,
@@ -50,6 +51,7 @@ describe('Snippet header component', () => {
   }
 
   beforeEach(() => {
+    gon.relative_url_root = '/foo/';
     snippet = {
       id: 'gid://gitlab/PersonalSnippet/50',
       title: 'The property of Thor',
@@ -86,6 +88,7 @@ describe('Snippet header component', () => {
 
   afterEach(() => {
     wrapper.destroy();
+    gon.relative_url_root = originalRelativeUrlRoot;
   });
 
   it('renders itself', () => {
@@ -213,7 +216,7 @@ describe('Snippet header component', () => {
       it('redirects to dashboard/snippets for personal snippet', () => {
         return createDeleteSnippet().then(() => {
           expect(wrapper.vm.closeDeleteModal).toHaveBeenCalled();
-          expect(window.location.pathname).toBe('dashboard/snippets');
+          expect(window.location.pathname).toBe(`${gon.relative_url_root}dashboard/snippets`);
         });
       });