Use joinPaths to build URL

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

@@ -4,7 +4,7 @@ import { GlButton, GlLoadingIcon } from '@gitlab/ui';
 import { deprecatedCreateFlash as Flash } from '~/flash';
 import { __, sprintf } from '~/locale';
 import TitleField from '~/vue_shared/components/form/title.vue';
-import { redirectTo } from '~/lib/utils/url_utility';
+import { redirectTo, joinPaths } from '~/lib/utils/url_utility';
 import FormFooterActions from '~/vue_shared/components/form/form_footer_actions.vue';
 
 import UpdateSnippetMutation from '../mutations/updateSnippet.mutation.graphql';
@@ -88,9 +88,7 @@ export default {
     },
     cancelButtonHref() {
       if (this.newSnippet) {
-        return this.projectPath
-          ? `${gon.relative_url_root}${this.projectPath}/-/snippets`
-          : `${gon.relative_url_root}/-/snippets`;
+        return joinPaths('/', gon.relative_url_root, this.projectPath, '-/snippets');
       }
       return this.snippet.webUrl;
     },

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

@@ -17,6 +17,7 @@ import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import DeleteSnippetMutation from '../mutations/deleteSnippet.mutation.graphql';
 import CanCreatePersonalSnippet from '../queries/userPermissions.query.graphql';
 import CanCreateProjectSnippet from '../queries/projectPermissions.query.graphql';
+import { joinPaths } from '~/lib/utils/url_utility';
 
 export default {
   components: {
@@ -96,8 +97,8 @@ export default {
           condition: this.canCreateSnippet,
           text: __('New snippet'),
           href: this.snippet.project
-            ? `${this.snippet.project.webUrl}/-/snippets/new`
-            : `${gon.relative_url_root}/-/snippets/new`,
+            ? joinPaths(this.snippet.project.webUrl, '-/snippets/new')
+            : joinPaths('/', gon.relative_url_root, '/-/snippets/new'),
           variant: 'success',
           category: 'secondary',
           cssClass: 'ml-2',

spec/frontend/snippets/components/edit_spec.js

@@ -200,8 +200,8 @@ describe('Snippet Edit app', () => {
 
     it.each`
       projectPath       | snippetArg               | expectation
-      ${''}             | ${[]}                    | ${`${relativeUrlRoot}/-/snippets`}
-      ${'project/path'} | ${[]}                    | ${`${relativeUrlRoot}project/path/-/snippets`}
+      ${''}             | ${[]}                    | ${urlUtils.joinPaths('/', relativeUrlRoot, '-', 'snippets')}
+      ${'project/path'} | ${[]}                    | ${urlUtils.joinPaths('/', relativeUrlRoot, 'project/path/-', 'snippets')}
       ${''}             | ${[createTestSnippet()]} | ${TEST_WEB_URL}
       ${'project/path'} | ${[createTestSnippet()]} | ${TEST_WEB_URL}
     `(