1 files changed, 25 insertions, 11 deletions

diff --git a/app/assets/javascripts/snippets/components/edit.vue b/app/assets/javascripts/snippets/components/edit.vue
index 0978fcc7f93..1a539aa0876 100644
--- a/app/assets/javascripts/snippets/components/edit.vue
+++ b/app/assets/javascripts/snippets/components/edit.vue
@@ -4,21 +4,23 @@ 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 { SNIPPET_MARK_EDIT_APP_START } from '~/performance_constants';
 
 import UpdateSnippetMutation from '../mutations/updateSnippet.mutation.graphql';
 import CreateSnippetMutation from '../mutations/createSnippet.mutation.graphql';
 import { getSnippetMixin } from '../mixins/snippets';
 import {
-  SNIPPET_VISIBILITY_PRIVATE,
   SNIPPET_CREATE_MUTATION_ERROR,
   SNIPPET_UPDATE_MUTATION_ERROR,
+  SNIPPET_VISIBILITY_PRIVATE,
 } from '../constants';
+import defaultVisibilityQuery from '../queries/snippet_visibility.query.graphql';
+
 import SnippetBlobActionsEdit from './snippet_blob_actions_edit.vue';
 import SnippetVisibilityEdit from './snippet_visibility_edit.vue';
 import SnippetDescriptionEdit from './snippet_description_edit.vue';
-import { SNIPPET_MARK_EDIT_APP_START } from '~/performance_constants';
 
 export default {
   components: {
@@ -31,6 +33,15 @@ export default {
     GlLoadingIcon,
   },
   mixins: [getSnippetMixin],
+  apollo: {
+    defaultVisibility: {
+      query: defaultVisibilityQuery,
+      manual: true,
+      result({ data: { selectedLevel } }) {
+        this.selectedLevelDefault = selectedLevel;
+      },
+    },
+  },
   props: {
     markdownPreviewPath: {
       type: String,
@@ -56,6 +67,7 @@ export default {
       isUpdating: false,
       newSnippet: false,
       actions: [],
+      selectedLevelDefault: SNIPPET_VISIBILITY_PRIVATE,
     };
   },
   computed: {
@@ -88,7 +100,7 @@ export default {
     },
     cancelButtonHref() {
       if (this.newSnippet) {
-        return this.projectPath ? `/${this.projectPath}/-/snippets` : `/-/snippets`;
+        return joinPaths('/', gon.relative_url_root, this.projectPath, '-/snippets');
       }
       return this.snippet.webUrl;
     },
@@ -98,6 +110,13 @@ export default {
     descriptionFieldId() {
       return `${this.isProjectSnippet ? 'project' : 'personal'}_snippet_description`;
     },
+    newSnippetSchema() {
+      return {
+        title: '',
+        description: '',
+        visibilityLevel: this.selectedLevelDefault,
+      };
+    },
   },
   beforeCreate() {
     performance.mark(SNIPPET_MARK_EDIT_APP_START);
@@ -126,7 +145,7 @@ export default {
     },
     onNewSnippetFetched() {
       this.newSnippet = true;
-      this.snippet = this.$options.newSnippetSchema;
+      this.snippet = this.newSnippetSchema;
     },
     onExistingSnippetFetched() {
       this.newSnippet = false;
@@ -184,11 +203,6 @@ export default {
       this.actions = actions;
     },
   },
-  newSnippetSchema: {
-    title: '',
-    description: '',
-    visibilityLevel: SNIPPET_VISIBILITY_PRIVATE,
-  },
 };
 </script>
 <template>
@@ -202,7 +216,7 @@ export default {
       v-if="isLoading"
       :label="__('Loading snippet')"
       size="lg"
-      class="loading-animation prepend-top-20 append-bottom-20"
+      class="loading-animation prepend-top-20 gl-mb-6"
     />
     <template v-else>
       <title-field