Add latest changes from gitlab-org/gitlab@master

31 files changed, 398 insertions, 57 deletions

diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index 8fc8a8d0495..8ea443814e9 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -220,9 +220,6 @@ export default {
       this.assignedDiscussions = false;
       this.fetchData(false);
     },
-    isLatestVersion() {
-      return window.location.search.indexOf('diff_id') === -1;
-    },
     startDiffRendering() {
       requestIdleCallback(
         () => {
@@ -232,7 +229,7 @@ export default {
       );
     },
     fetchData(toggleTree = true) {
-      if (this.isLatestVersion() && this.glFeatures.diffsBatchLoad) {
+      if (this.glFeatures.diffsBatchLoad) {
         this.fetchDiffFilesMeta()
           .then(() => {
             if (toggleTree) this.hideTreeListIfJustOneFile();
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index 44672659f56..992b45c97ac 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -90,14 +90,13 @@ export const fetchDiffFiles = ({ state, commit }) => {
 };
 
 export const fetchDiffFilesBatch = ({ commit, state }) => {
-  const baseUrl = `${state.endpointBatch}?per_page=${DIFFS_PER_PAGE}`;
-  const url = page => (page ? `${baseUrl}&page=${page}` : baseUrl);
-
   commit(types.SET_BATCH_LOADING, true);
 
   const getBatch = page =>
     axios
-      .get(url(page))
+      .get(state.endpointBatch, {
+        params: { page, per_page: DIFFS_PER_PAGE, w: state.showWhitespace ? '0' : '1' },
+      })
       .then(({ data: { pagination, diff_files } }) => {
         commit(types.SET_DIFF_DATA_BATCH, { diff_files });
         commit(types.SET_BATCH_LOADING, false);
diff --git a/app/assets/javascripts/ide/stores/getters.js b/app/assets/javascripts/ide/stores/getters.js
index a176fd0aca8..bb8374b4e78 100644
--- a/app/assets/javascripts/ide/stores/getters.js
+++ b/app/assets/javascripts/ide/stores/getters.js
@@ -115,5 +115,30 @@ export const isOnDefaultBranch = (_state, getters) =>
 export const canPushToBranch = (_state, getters) =>
   getters.currentBranch && getters.currentBranch.can_push;
 
+export const isFileDeletedAndReadded = (state, getters) => path => {
+  const stagedFile = getters.getStagedFile(path);
+  const file = state.entries[path];
+  return Boolean(stagedFile && stagedFile.deleted && file.tempFile);
+};
+
+// checks if any diff exists in the staged or unstaged changes for this path
+export const getDiffInfo = (state, getters) => path => {
+  const stagedFile = getters.getStagedFile(path);
+  const file = state.entries[path];
+  const renamed = file.prevPath ? file.path !== file.prevPath : false;
+  const deletedAndReadded = getters.isFileDeletedAndReadded(path);
+  const deleted = deletedAndReadded ? false : file.deleted;
+  const tempFile = deletedAndReadded ? false : file.tempFile;
+  const changed = file.content !== (deletedAndReadded ? stagedFile.raw : file.raw);
+
+  return {
+    exists: changed || renamed || deleted || tempFile,
+    changed,
+    renamed,
+    deleted,
+    tempFile,
+  };
+};
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};
diff --git a/app/assets/javascripts/pages/projects/snippets/show/index.js b/app/assets/javascripts/pages/projects/snippets/show/index.js
index c35b9c30058..738bf08f1bf 100644
--- a/app/assets/javascripts/pages/projects/snippets/show/index.js
+++ b/app/assets/javascripts/pages/projects/snippets/show/index.js
@@ -3,11 +3,16 @@ import ZenMode from '~/zen_mode';
 import LineHighlighter from '~/line_highlighter';
 import BlobViewer from '~/blob/viewer';
 import snippetEmbed from '~/snippet/snippet_embed';
+import initSnippetsApp from '~/snippets';
 
 document.addEventListener('DOMContentLoaded', () => {
-  new LineHighlighter(); // eslint-disable-line no-new
-  new BlobViewer(); // eslint-disable-line no-new
-  initNotes();
-  new ZenMode(); // eslint-disable-line no-new
-  snippetEmbed();
+  if (!gon.features.snippetsVue) {
+    new LineHighlighter(); // eslint-disable-line no-new
+    new BlobViewer(); // eslint-disable-line no-new
+    initNotes();
+    new ZenMode(); // eslint-disable-line no-new
+    snippetEmbed();
+  } else {
+    initSnippetsApp();
+  }
 });
diff --git a/app/assets/javascripts/repository/components/breadcrumbs.vue b/app/assets/javascripts/repository/components/breadcrumbs.vue
index f6b9ea5d30d..e1382aa86d9 100644
--- a/app/assets/javascripts/repository/components/breadcrumbs.vue
+++ b/app/assets/javascripts/repository/components/breadcrumbs.vue
@@ -104,10 +104,10 @@ export default {
             return acc.concat({
               name,
               path,
-              to: `/tree/${this.ref}${path}`,
+              to: `/-/tree/${this.ref}${path}`,
             });
           },
-          [{ name: this.projectShortPath, path: '/', to: `/tree/${this.ref}/` }],
+          [{ name: this.projectShortPath, path: '/', to: `/-/tree/${this.ref}/` }],
         );
     },
     canCreateMrFromFork() {
diff --git a/app/assets/javascripts/repository/components/table/parent_row.vue b/app/assets/javascripts/repository/components/table/parent_row.vue
index 3c39f404226..38aa672bc1c 100644
--- a/app/assets/javascripts/repository/components/table/parent_row.vue
+++ b/app/assets/javascripts/repository/components/table/parent_row.vue
@@ -15,7 +15,7 @@ export default {
       const splitArray = this.path.split('/');
       splitArray.pop();
 
-      return { path: `/tree/${this.commitRef}/${splitArray.join('/')}` };
+      return { path: `/-/tree/${this.commitRef}/${splitArray.join('/')}` };
     },
   },
   methods: {
diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue
index cf0457a2abf..57dd08c2142 100644
--- a/app/assets/javascripts/repository/components/table/row.vue
+++ b/app/assets/javascripts/repository/components/table/row.vue
@@ -84,7 +84,7 @@ export default {
   },
   computed: {
     routerLinkTo() {
-      return this.isFolder ? { path: `/tree/${this.ref}/${this.path}` } : null;
+      return this.isFolder ? { path: `/-/tree/${this.ref}/${this.path}` } : null;
     },
     iconName() {
       return `fa-${getIconName(this.type, this.path)}`;
diff --git a/app/assets/javascripts/repository/router.js b/app/assets/javascripts/repository/router.js
index ebf0a7091ea..fa544444be8 100644
--- a/app/assets/javascripts/repository/router.js
+++ b/app/assets/javascripts/repository/router.js
@@ -12,7 +12,7 @@ export default function createRouter(base, baseRef) {
     base: joinPaths(gon.relative_url_root || '', base),
     routes: [
       {
-        path: `/tree/${baseRef}(/.*)?`,
+        path: `/-/tree/${baseRef}(/.*)?`,
         name: 'treePath',
         component: TreePage,
         props: route => ({
diff --git a/app/assets/javascripts/snippets/components/app.vue b/app/assets/javascripts/snippets/components/app.vue
index e3d6cdd4606..bd2cb8e4595 100644
--- a/app/assets/javascripts/snippets/components/app.vue
+++ b/app/assets/javascripts/snippets/components/app.vue
@@ -1,10 +1,16 @@
 <script>
-import getSnippet from '../queries/getSnippet.query.graphql';
+import GetSnippetQuery from '../queries/snippet.query.graphql';
+import SnippetHeader from './snippet_header.vue';
+import { GlLoadingIcon } from '@gitlab/ui';
 
 export default {
+  components: {
+    SnippetHeader,
+    GlLoadingIcon,
+  },
   apollo: {
-    snippetData: {
-      query: getSnippet,
+    snippet: {
+      query: GetSnippetQuery,
       variables() {
         return {
           ids: this.snippetGid,
@@ -21,11 +27,24 @@ export default {
   },
   data() {
     return {
-      snippetData: {},
+      snippet: {},
     };
   },
+  computed: {
+    isLoading() {
+      return this.$apollo.queries.snippet.loading;
+    },
+  },
 };
 </script>
 <template>
-  <div class="js-snippet-view"></div>
+  <div class="js-snippet-view">
+    <gl-loading-icon
+      v-if="isLoading"
+      :label="__('Loading snippet')"
+      :size="2"
+      class="loading-animation prepend-top-20 append-bottom-20"
+    />
+    <snippet-header v-else :snippet="snippet" />
+  </div>
 </template>
diff --git a/app/assets/javascripts/snippets/components/snippet_header.vue b/app/assets/javascripts/snippets/components/snippet_header.vue
new file mode 100644
index 00000000000..e8f1bfeaf43
--- /dev/null
+++ b/app/assets/javascripts/snippets/components/snippet_header.vue
@@ -0,0 +1,241 @@
+<script>
+import { __ } from '~/locale';
+import {
+  GlAvatar,
+  GlIcon,
+  GlSprintf,
+  GlButton,
+  GlModal,
+  GlAlert,
+  GlLoadingIcon,
+  GlDropdown,
+  GlDropdownItem,
+} from '@gitlab/ui';
+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';
+
+export default {
+  components: {
+    GlAvatar,
+    GlIcon,
+    GlSprintf,
+    GlButton,
+    GlModal,
+    GlAlert,
+    GlLoadingIcon,
+    GlDropdown,
+    GlDropdownItem,
+    TimeAgoTooltip,
+  },
+  apollo: {
+    canCreateSnippet: {
+      query() {
+        return this.snippet.project ? CanCreateProjectSnippet : CanCreatePersonalSnippet;
+      },
+      variables() {
+        return {
+          fullPath: this.snippet.project ? this.snippet.project.fullPath : undefined,
+        };
+      },
+      update(data) {
+        return this.snippet.project
+          ? data.project.userPermissions.createSnippet
+          : data.currentUser.userPermissions.createSnippet;
+      },
+    },
+  },
+  props: {
+    snippet: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isDeleting: false,
+      errorMessage: '',
+      canCreateSnippet: false,
+    };
+  },
+  computed: {
+    personalSnippetActions() {
+      return [
+        {
+          condition: this.snippet.userPermissions.updateSnippet,
+          text: __('Edit'),
+          href: this.editLink,
+          click: undefined,
+          variant: 'outline-info',
+          cssClass: undefined,
+        },
+        {
+          condition: this.snippet.userPermissions.adminSnippet,
+          text: __('Delete'),
+          href: undefined,
+          click: this.showDeleteModal,
+          variant: 'outline-danger',
+          cssClass: 'btn-inverted btn-danger ml-2',
+        },
+        {
+          condition: this.canCreateSnippet,
+          text: __('New snippet'),
+          href: this.snippet.project
+            ? `${this.snippet.project.webUrl}/snippets/new`
+            : '/snippets/new',
+          click: undefined,
+          variant: 'outline-success',
+          cssClass: 'btn-inverted btn-success ml-2',
+        },
+      ];
+    },
+    editLink() {
+      return `${this.snippet.webUrl}/edit`;
+    },
+    visibility() {
+      return this.snippet.visibilityLevel;
+    },
+    snippetVisibilityLevelDescription() {
+      switch (this.visibility) {
+        case 'private':
+          return this.snippet.project !== null
+            ? __('The snippet is visible only to project members.')
+            : __('The snippet is visible only to me.');
+        case 'internal':
+          return __('The snippet is visible to any logged in user.');
+        default:
+          return __('The snippet can be accessed without any authentication.');
+      }
+    },
+    visibilityLevelIcon() {
+      switch (this.visibility) {
+        case 'private':
+          return 'lock';
+        case 'internal':
+          return 'shield';
+        default:
+          return 'earth';
+      }
+    },
+  },
+  methods: {
+    redirectToSnippets() {
+      window.location.pathname = 'dashboard/snippets';
+    },
+    closeDeleteModal() {
+      this.$refs.deleteModal.hide();
+    },
+    showDeleteModal() {
+      this.$refs.deleteModal.show();
+    },
+    deleteSnippet() {
+      this.isDeleting = true;
+      this.$apollo
+        .mutate({
+          mutation: DeleteSnippetMutation,
+          variables: { id: this.snippet.id },
+        })
+        .then(() => {
+          this.isDeleting = false;
+          this.errorMessage = undefined;
+          this.closeDeleteModal();
+          this.redirectToSnippets();
+        })
+        .catch(err => {
+          this.isDeleting = false;
+          this.errorMessage = err.message;
+        });
+    },
+  },
+};
+</script>
+<template>
+  <div class="detail-page-header">
+    <div class="detail-page-header-body">
+      <div
+        class="snippet-box qa-snippet-box has-tooltip d-flex align-items-center append-right-5 mb-1"
+        :title="snippetVisibilityLevelDescription"
+        data-container="body"
+      >
+        <span class="sr-only">
+          {{ s__(`VisibilityLevel|${visibility}`) }}
+        </span>
+        <gl-icon :name="visibilityLevelIcon" :size="14" />
+      </div>
+      <div class="creator">
+        <gl-sprintf message="Authored %{timeago} by %{author}">
+          <template #timeago>
+            <time-ago-tooltip
+              :time="snippet.createdAt"
+              tooltip-placement="bottom"
+              css-class="snippet_updated_ago"
+            />
+          </template>
+          <template #author>
+            <a :href="snippet.author.webUrl" class="d-inline">
+              <gl-avatar :size="24" :src="snippet.author.avatarUrl" />
+              <span class="bold">{{ snippet.author.name }}</span>
+            </a>
+          </template>
+        </gl-sprintf>
+      </div>
+    </div>
+
+    <div class="detail-page-header-actions">
+      <div class="d-none d-sm-block">
+        <template v-for="(action, index) in personalSnippetActions">
+          <gl-button
+            v-if="action.condition"
+            :key="index"
+            :variant="action.variant"
+            :class="action.cssClass"
+            :href="action.href || undefined"
+            @click="action.click ? action.click() : undefined"
+          >
+            {{ action.text }}
+          </gl-button>
+        </template>
+      </div>
+      <div class="d-block d-sm-none dropdown">
+        <gl-dropdown :text="__('Options')" class="w-100" toggle-class="text-center">
+          <gl-dropdown-item
+            v-for="(action, index) in personalSnippetActions"
+            :key="index"
+            :href="action.href || undefined"
+            @click="action.click ? action.click() : undefined"
+            >{{ action.text }}</gl-dropdown-item
+          >
+        </gl-dropdown>
+      </div>
+    </div>
+
+    <gl-modal ref="deleteModal" modal-id="delete-modal" title="Example title">
+      <template #modal-title>{{ __('Delete snippet?') }}</template>
+
+      <gl-alert v-if="errorMessage" variant="danger" class="mb-2" @dismiss="errorMessage = ''">{{
+        errorMessage
+      }}</gl-alert>
+
+      <gl-sprintf message="Are you sure you want to delete %{name}?">
+        <template #name
+          ><strong>{{ snippet.title }}</strong></template
+        >
+      </gl-sprintf>
+
+      <template #modal-footer>
+        <gl-button @click="closeDeleteModal">{{ __('Cancel') }}</gl-button>
+        <gl-button
+          variant="danger"
+          :disabled="isDeleting"
+          data-qa-selector="delete_snippet_button"
+          @click="deleteSnippet"
+        >
+          <gl-loading-icon v-if="isDeleting" inline />
+          {{ __('Delete snippet') }}
+        </gl-button>
+      </template>
+    </gl-modal>
+  </div>
+</template>
diff --git a/app/assets/javascripts/snippets/fragments/author.fragment.graphql b/app/assets/javascripts/snippets/fragments/author.fragment.graphql
new file mode 100644
index 00000000000..2684bd0fa37
--- /dev/null
+++ b/app/assets/javascripts/snippets/fragments/author.fragment.graphql
@@ -0,0 +1,8 @@
+fragment Author on Snippet {
+  author {
+    name,
+    avatarUrl,
+    username,
+    webUrl
+  }
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/snippets/fragments/project.fragment.graphql b/app/assets/javascripts/snippets/fragments/project.fragment.graphql
new file mode 100644
index 00000000000..7d65789c67b
--- /dev/null
+++ b/app/assets/javascripts/snippets/fragments/project.fragment.graphql
@@ -0,0 +1,6 @@
+fragment Project on Snippet {
+  project {
+    fullPath
+    webUrl
+  }
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/snippets/fragments/snippetBase.fragment.graphql b/app/assets/javascripts/snippets/fragments/snippetBase.fragment.graphql
new file mode 100644
index 00000000000..57348a422ec
--- /dev/null
+++ b/app/assets/javascripts/snippets/fragments/snippetBase.fragment.graphql
@@ -0,0 +1,13 @@
+fragment SnippetBase on Snippet {
+  id
+  title
+  description
+  createdAt
+  updatedAt
+  visibilityLevel
+  webUrl
+  userPermissions {
+    adminSnippet
+    updateSnippet
+  }
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/snippets/mutations/deleteSnippet.mutation.graphql b/app/assets/javascripts/snippets/mutations/deleteSnippet.mutation.graphql
new file mode 100644
index 00000000000..0c829cbdee6
--- /dev/null
+++ b/app/assets/javascripts/snippets/mutations/deleteSnippet.mutation.graphql
@@ -0,0 +1,5 @@
+mutation DeleteSnippet($id: ID!) {
+  destroySnippet(input: {id: $id}) {
+    errors
+  }
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/snippets/queries/getSnippet.query.graphql b/app/assets/javascripts/snippets/queries/getSnippet.query.graphql
deleted file mode 100644
index 5a5f0d05c5b..00000000000
--- a/app/assets/javascripts/snippets/queries/getSnippet.query.graphql
+++ /dev/null
@@ -1,13 +0,0 @@
-query getSnippet($ids: [ID!]) {
-  snippets(ids: $ids) {
-    edges {
-      node {
-        title
-        description
-        createdAt
-        updatedAt
-        visibility
-      }
-    }
-  }
-}
diff --git a/app/assets/javascripts/snippets/queries/projectPermissions.query.graphql b/app/assets/javascripts/snippets/queries/projectPermissions.query.graphql
new file mode 100644
index 00000000000..288bd0889bf
--- /dev/null
+++ b/app/assets/javascripts/snippets/queries/projectPermissions.query.graphql
@@ -0,0 +1,7 @@
+query CanCreateProjectSnippet($fullPath: ID!) {
+  project(fullPath: $fullPath) {
+    userPermissions {
+      createSnippet
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/snippets/queries/snippet.query.graphql b/app/assets/javascripts/snippets/queries/snippet.query.graphql
new file mode 100644
index 00000000000..1cb2c86c4d8
--- /dev/null
+++ b/app/assets/javascripts/snippets/queries/snippet.query.graphql
@@ -0,0 +1,15 @@
+#import '../fragments/snippetBase.fragment.graphql'
+#import '../fragments/project.fragment.graphql'
+#import '../fragments/author.fragment.graphql'
+
+query GetSnippetQuery($ids: [ID!]) {
+  snippets(ids: $ids) {
+    edges {
+      node {
+        ...SnippetBase
+        ...Project
+        ...Author
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/snippets/queries/userPermissions.query.graphql b/app/assets/javascripts/snippets/queries/userPermissions.query.graphql
new file mode 100644
index 00000000000..f5b97b3d0f0
--- /dev/null
+++ b/app/assets/javascripts/snippets/queries/userPermissions.query.graphql
@@ -0,0 +1,7 @@
+query CanCreatePersonalSnippet {
+  currentUser {
+    userPermissions {
+      createSnippet
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue
index b874bedab36..bf3c3666300 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue
@@ -79,10 +79,10 @@ export default {
       return this.projectPath.indexOf('/') === 0 ? '' : `${gon.relative_url_root}/`;
     },
     fullOldPath() {
-      return `${this.basePath}${this.projectPath}/raw/${this.oldSha}/${this.oldPath}`;
+      return `${this.basePath}${this.projectPath}/-/raw/${this.oldSha}/${this.oldPath}`;
     },
     fullNewPath() {
-      return `${this.basePath}${this.projectPath}/raw/${this.newSha}/${this.newPath}`;
+      return `${this.basePath}${this.projectPath}/-/raw/${this.newSha}/${this.newPath}`;
     },
   },
 };
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index 7d25b6927f9..1f4bba5fc33 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -40,12 +40,12 @@
 
 // Classes using mixins coming from @gitlab-ui
 // can be removed once https://gitlab.com/gitlab-org/gitlab/merge_requests/19021 has been merged
-.gl-bg-blue-500 { @include gl-bg-blue-500; }
 .gl-bg-red-100 { @include gl-bg-red-100; }
 .gl-bg-orange-100 { @include gl-bg-orange-100; }
 .gl-bg-gray-100 { @include gl-bg-gray-100; }
 .gl-bg-green-100 { @include gl-bg-green-100;}
 
+.gl-text-blue-500 { @include gl-text-blue-500; }
 .gl-text-gray-900 { @include gl-text-gray-900; }
 .gl-text-red-700 { @include gl-text-red-700; }
 .gl-text-orange-700 { @include gl-text-orange-700; }
diff --git a/app/helpers/submodule_helper.rb b/app/helpers/submodule_helper.rb
index 4b83988e8bb..e5400652458 100644
--- a/app/helpers/submodule_helper.rb
+++ b/app/helpers/submodule_helper.rb
@@ -43,6 +43,8 @@ module SubmoduleHelper
       elsif github_dot_com_url?(url)
         standard_links('github.com', namespace, project, submodule_item_id)
       elsif gitlab_dot_com_url?(url)
+        # This need to be replaced with /-/tree routing once one is landed on
+        # GitLab.com. Issue https://gitlab.com/gitlab-org/gitlab/issues/42764
         standard_links('gitlab.com', namespace, project, submodule_item_id)
       else
         [sanitize_submodule_url(url), nil]
diff --git a/app/helpers/tree_helper.rb b/app/helpers/tree_helper.rb
index af1919eeb40..0b50b8b1130 100644
--- a/app/helpers/tree_helper.rb
+++ b/app/helpers/tree_helper.rb
@@ -38,13 +38,13 @@ module TreeHelper
   # many paths, as with a repository tree that has thousands of items.
   def fast_project_blob_path(project, blob_path)
     ActionDispatch::Journey::Router::Utils.escape_path(
-      File.join(relative_url_root, project.path_with_namespace, 'blob', blob_path)
+      File.join(relative_url_root, project.path_with_namespace, '-', 'blob', blob_path)
     )
   end
 
   def fast_project_tree_path(project, tree_path)
     ActionDispatch::Journey::Router::Utils.escape_path(
-      File.join(relative_url_root, project.path_with_namespace, 'tree', tree_path)
+      File.join(relative_url_root, project.path_with_namespace, '-', 'tree', tree_path)
     )
   end
 
diff --git a/app/models/clusters/applications/knative.rb b/app/models/clusters/applications/knative.rb
index 89ffb72a22f..387503bee54 100644
--- a/app/models/clusters/applications/knative.rb
+++ b/app/models/clusters/applications/knative.rb
@@ -3,7 +3,7 @@
 module Clusters
   module Applications
     class Knative < ApplicationRecord
-      VERSION = '0.7.0'
+      VERSION = '0.9.0'
       REPOSITORY = 'https://storage.googleapis.com/triggermesh-charts'
       METRICS_CONFIG = 'https://storage.googleapis.com/triggermesh-charts/istio-metrics.yaml'
       FETCH_IP_ADDRESS_DELAY = 30.seconds
diff --git a/app/views/admin/users/_access_levels.html.haml b/app/views/admin/users/_access_levels.html.haml
index bb1e22cc610..e3ab2e4f9bd 100644
--- a/app/views/admin/users/_access_levels.html.haml
+++ b/app/views/admin/users/_access_levels.html.haml
@@ -43,7 +43,7 @@
       = f.check_box :external do
         External
       %p.light
-        External users cannot see internal or private projects unless access is explicitly granted. Also, external users cannot create projects or groups.
+        External users cannot see internal or private projects unless access is explicitly granted. Also, external users cannot create projects, groups, or personal snippets.
       %row.hidden#warning_external_automatically_set.hidden
         .badge.badge-warning.text-white
           = _('Automatically marked as default internal user')
diff --git a/app/views/dashboard/_snippets_head.html.haml b/app/views/dashboard/_snippets_head.html.haml
index 34aca40d0d1..4958cdc3745 100644
--- a/app/views/dashboard/_snippets_head.html.haml
+++ b/app/views/dashboard/_snippets_head.html.haml
@@ -3,7 +3,8 @@
 
   - if current_user && current_user.snippets.any? || @snippets.any?
     .page-title-controls
-      = link_to _("New snippet"), new_snippet_path, class: "btn btn-success", title: _("New snippet")
+      - if can?(current_user, :create_personal_snippet)
+        = link_to _("New snippet"), new_snippet_path, class: "btn btn-success", title: _("New snippet")
 
 .top-area
   %ul.nav-links.nav.nav-tabs
diff --git a/app/views/dashboard/snippets/index.html.haml b/app/views/dashboard/snippets/index.html.haml
index 2caa8e0cac4..44a9270971a 100644
--- a/app/views/dashboard/snippets/index.html.haml
+++ b/app/views/dashboard/snippets/index.html.haml
@@ -1,6 +1,7 @@
 - @hide_top_links = true
 - page_title    "Snippets"
 - header_title  "Snippets", dashboard_snippets_path
+- button_path = new_snippet_path if can?(current_user, :create_personal_snippet)
 
 = render 'dashboard/snippets_head'
 - if current_user.snippets.exists?
@@ -9,4 +10,4 @@
 - if current_user.snippets.exists?
   = render partial: 'shared/snippets/list', locals: { link_project: true }
 - else
-  = render 'shared/empty_states/snippets', button_path: new_snippet_path
+  = render 'shared/empty_states/snippets', button_path: button_path
diff --git a/app/views/profiles/accounts/_providers.html.haml b/app/views/profiles/accounts/_providers.html.haml
index dc17de1b220..a87191d0fa4 100644
--- a/app/views/profiles/accounts/_providers.html.haml
+++ b/app/views/profiles/accounts/_providers.html.haml
@@ -16,6 +16,6 @@
             %a.provider-btn
               = s_('Profiles|Active')
         - elsif link_allowed
-          = link_to omniauth_authorize_path(:user, provider), method: :post, class: 'provider-btn gl-bg-blue-500' do
+          = link_to omniauth_authorize_path(:user, provider), method: :post, class: 'provider-btn gl-text-blue-500' do
             = s_('Profiles|Connect')
   = render_if_exists 'profiles/accounts/group_saml_unlink_buttons', group_saml_identities: group_saml_identities
diff --git a/app/views/projects/snippets/index.html.haml b/app/views/projects/snippets/index.html.haml
index 7682d01a5a1..0ce18d83d57 100644
--- a/app/views/projects/snippets/index.html.haml
+++ b/app/views/projects/snippets/index.html.haml
@@ -8,8 +8,7 @@
 
       - if can?(current_user, :create_project_snippet, @project)
         .nav-controls
-          - if can?(current_user, :create_project_snippet, @project)
-            = link_to _("New snippet"), new_project_snippet_path(@project), class: "btn btn-success", title: _("New snippet")
+          = link_to _("New snippet"), new_project_snippet_path(@project), class: "btn btn-success", title: _("New snippet")
 
   = render 'shared/snippets/list'
 - else
diff --git a/app/views/projects/snippets/show.html.haml b/app/views/projects/snippets/show.html.haml
index f495b4eaf30..768e4422206 100644
--- a/app/views/projects/snippets/show.html.haml
+++ b/app/views/projects/snippets/show.html.haml
@@ -3,13 +3,16 @@
 - breadcrumb_title @snippet.to_reference
 - page_title "#{@snippet.title} (#{@snippet.to_reference})", _("Snippets")
 
-= render 'shared/snippets/header'
+- if Feature.enabled?(:snippets_vue)
+  #js-snippet-view{ data: {'qa-selector': 'snippet_view', 'snippet-gid': @snippet.to_global_id} }
+- else
+  = render 'shared/snippets/header'
 
-.project-snippets
-  %article.file-holder.snippet-file-content
-    = render 'shared/snippets/blob'
+  .project-snippets
+    %article.file-holder.snippet-file-content
+      = render 'shared/snippets/blob'
 
-  .row-content-block.top-block.content-component-block
-    = render 'award_emoji/awards_block', awardable: @snippet, inline: true
+    .row-content-block.top-block.content-component-block
+      = render 'award_emoji/awards_block', awardable: @snippet, inline: true
 
-  #notes.limited-width-notes= render "shared/notes/notes_with_form", :autocomplete => true
+    #notes.limited-width-notes= render "shared/notes/notes_with_form", :autocomplete => true
diff --git a/app/views/shared/empty_states/_snippets.html.haml b/app/views/shared/empty_states/_snippets.html.haml
index a1a16b9d067..889a470d6ec 100644
--- a/app/views/shared/empty_states/_snippets.html.haml
+++ b/app/views/shared/empty_states/_snippets.html.haml
@@ -11,7 +11,8 @@
         %p
           = s_('SnippetsEmptyState|They can be either public or private.')
         .text-center
-          = link_to s_('SnippetsEmptyState|New snippet'), button_path, class: 'btn btn-success', title: s_('SnippetsEmptyState|New snippet'), id: 'new_snippet_link'
+          - if button_path
+            = link_to s_('SnippetsEmptyState|New snippet'), button_path, class: 'btn btn-success', title: s_('SnippetsEmptyState|New snippet'), id: 'new_snippet_link'
           - unless current_page?(dashboard_snippets_path)
             = link_to s_('SnippetsEmptyState|Explore public snippets'), explore_snippets_path, class: 'btn btn-default', title: s_('SnippetsEmptyState|Explore public snippets')
       - else
diff --git a/app/views/snippets/_snippets.html.haml b/app/views/snippets/_snippets.html.haml
index dab247da251..69b19c0def9 100644
--- a/app/views/snippets/_snippets.html.haml
+++ b/app/views/snippets/_snippets.html.haml
@@ -3,7 +3,7 @@
 - current_user_empty_message_header = s_('UserProfile|You haven\'t created any snippets.')
 - current_user_empty_message_description = s_('UserProfile|Snippets in GitLab can either be private, internal, or public.')
 - primary_button_label = _('New snippet')
-- primary_button_link = new_snippet_path
+- primary_button_link = new_snippet_path if can?(current_user, :create_personal_snippet)
 - visitor_empty_message = s_('UserProfile|No snippets found.')
 
 .snippets-list-holder