Add latest changes from gitlab-org/gitlab@13-6-stable-eev13.6.0-rc42

14 files changed, 55 insertions, 139 deletions

diff --git a/app/assets/javascripts/snippets/components/edit.vue b/app/assets/javascripts/snippets/components/edit.vue
index dd77d49803f..08683f25651 100644
--- a/app/assets/javascripts/snippets/components/edit.vue
+++ b/app/assets/javascripts/snippets/components/edit.vue
@@ -9,19 +9,14 @@ import FormFooterActions from '~/vue_shared/components/form/form_footer_actions.
 import {
   SNIPPET_MARK_EDIT_APP_START,
   SNIPPET_MEASURE_BLOBS_CONTENT,
-} from '~/performance_constants';
+} from '~/performance/constants';
 import eventHub from '~/blob/components/eventhub';
-import { performanceMarkAndMeasure } from '~/performance_utils';
+import { performanceMarkAndMeasure } from '~/performance/utils';
 
 import UpdateSnippetMutation from '../mutations/updateSnippet.mutation.graphql';
 import CreateSnippetMutation from '../mutations/createSnippet.mutation.graphql';
 import { getSnippetMixin } from '../mixins/snippets';
-import {
-  SNIPPET_CREATE_MUTATION_ERROR,
-  SNIPPET_UPDATE_MUTATION_ERROR,
-  SNIPPET_VISIBILITY_PRIVATE,
-} from '../constants';
-import defaultVisibilityQuery from '../queries/snippet_visibility.query.graphql';
+import { SNIPPET_CREATE_MUTATION_ERROR, SNIPPET_UPDATE_MUTATION_ERROR } from '../constants';
 import { markBlobPerformance } from '../utils/blob';
 
 import SnippetBlobActionsEdit from './snippet_blob_actions_edit.vue';
@@ -41,15 +36,7 @@ export default {
     GlLoadingIcon,
   },
   mixins: [getSnippetMixin],
-  apollo: {
-    defaultVisibility: {
-      query: defaultVisibilityQuery,
-      manual: true,
-      result({ data: { selectedLevel } }) {
-        this.selectedLevelDefault = selectedLevel;
-      },
-    },
-  },
+  inject: ['selectedLevel'],
   props: {
     markdownPreviewPath: {
       type: String,
@@ -73,9 +60,12 @@ export default {
   data() {
     return {
       isUpdating: false,
-      newSnippet: false,
       actions: [],
-      selectedLevelDefault: SNIPPET_VISIBILITY_PRIVATE,
+      snippet: {
+        title: '',
+        description: '',
+        visibilityLevel: this.selectedLevel,
+      },
     };
   },
   computed: {
@@ -112,13 +102,6 @@ export default {
       }
       return this.snippet.webUrl;
     },
-    newSnippetSchema() {
-      return {
-        title: '',
-        description: '',
-        visibilityLevel: this.selectedLevelDefault,
-      };
-    },
   },
   beforeCreate() {
     performanceMarkAndMeasure({ mark: SNIPPET_MARK_EDIT_APP_START });
@@ -145,20 +128,6 @@ export default {
       Flash(sprintf(defaultErrorMsg, { err }));
       this.isUpdating = false;
     },
-    onNewSnippetFetched() {
-      this.newSnippet = true;
-      this.snippet = this.newSnippetSchema;
-    },
-    onExistingSnippetFetched() {
-      this.newSnippet = false;
-    },
-    onSnippetFetch(snippetRes) {
-      if (snippetRes.data.snippets.nodes.length === 0) {
-        this.onNewSnippetFetched();
-      } else {
-        this.onExistingSnippetFetched();
-      }
-    },
     getAttachedFiles() {
       const fileInputs = Array.from(this.$el.querySelectorAll('[name="files[]"]'));
       return fileInputs.map(node => node.value);
@@ -209,7 +178,7 @@ export default {
 </script>
 <template>
   <form
-    class="snippet-form js-requires-input js-quick-submit common-note-form"
+    class="snippet-form js-quick-submit common-note-form"
     :data-snippet-type="isProjectSnippet ? 'project' : 'personal'"
     data-testid="snippet-edit-form"
     @submit.prevent="handleFormSubmit"
diff --git a/app/assets/javascripts/snippets/components/show.vue b/app/assets/javascripts/snippets/components/show.vue
index 4a2f060ff7c..a3e5535c5fa 100644
--- a/app/assets/javascripts/snippets/components/show.vue
+++ b/app/assets/javascripts/snippets/components/show.vue
@@ -9,8 +9,8 @@ import { SNIPPET_VISIBILITY_PUBLIC } from '~/snippets/constants';
 import {
   SNIPPET_MARK_VIEW_APP_START,
   SNIPPET_MEASURE_BLOBS_CONTENT,
-} from '~/performance_constants';
-import { performanceMarkAndMeasure } from '~/performance_utils';
+} from '~/performance/constants';
+import { performanceMarkAndMeasure } from '~/performance/utils';
 import eventHub from '~/blob/components/eventhub';
 
 import { getSnippetMixin } from '../mixins/snippets';
diff --git a/app/assets/javascripts/snippets/components/snippet_blob_view.vue b/app/assets/javascripts/snippets/components/snippet_blob_view.vue
index e88126ea56a..b965c15306d 100644
--- a/app/assets/javascripts/snippets/components/snippet_blob_view.vue
+++ b/app/assets/javascripts/snippets/components/snippet_blob_view.vue
@@ -1,9 +1,9 @@
 <script>
+import GetBlobContent from 'shared_queries/snippet/snippet_blob_content.query.graphql';
+
 import BlobHeader from '~/blob/components/blob_header.vue';
 import BlobContent from '~/blob/components/blob_content.vue';
 
-import GetBlobContent from '../queries/snippet.blob.content.query.graphql';
-
 import {
   SIMPLE_BLOB_VIEWER,
   RICH_BLOB_VIEWER,
@@ -21,7 +21,7 @@ export default {
       query: GetBlobContent,
       variables() {
         return {
-          ids: this.snippet.id,
+          ids: [this.snippet.id],
           rich: this.activeViewerType === RICH_BLOB_VIEWER,
           paths: [this.blob.path],
         };
@@ -51,6 +51,13 @@ export default {
       required: true,
     },
   },
+  provide() {
+    return {
+      blobHash: Math.random()
+        .toString()
+        .split('.')[1],
+    };
+  },
   data() {
     return {
       blobContent: '',
diff --git a/app/assets/javascripts/snippets/components/snippet_header.vue b/app/assets/javascripts/snippets/components/snippet_header.vue
index 30de5a9d0e0..32c4c1039f5 100644
--- a/app/assets/javascripts/snippets/components/snippet_header.vue
+++ b/app/assets/javascripts/snippets/components/snippet_header.vue
@@ -6,17 +6,17 @@ import {
   GlModal,
   GlAlert,
   GlLoadingIcon,
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownItem,
+  GlDropdown,
+  GlDropdownItem,
   GlButton,
   GlTooltipDirective,
 } from '@gitlab/ui';
+import CanCreatePersonalSnippet from 'shared_queries/snippet/user_permissions.query.graphql';
+import CanCreateProjectSnippet from 'shared_queries/snippet/project_permissions.query.graphql';
 import { __ } from '~/locale';
 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';
 import { fetchPolicies } from '~/lib/graphql';
 
@@ -28,8 +28,8 @@ export default {
     GlModal,
     GlAlert,
     GlLoadingIcon,
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownItem,
+    GlDropdown,
+    GlDropdownItem,
     TimeAgoTooltip,
     GlButton,
   },
@@ -120,7 +120,7 @@ export default {
             ? __('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.');
+          return __('The snippet is visible to any logged in user except external users.');
         default:
           return __('The snippet can be accessed without any authentication.');
       }
@@ -231,17 +231,17 @@ export default {
         </template>
       </div>
       <div class="d-block d-sm-none dropdown">
-        <gl-deprecated-dropdown :text="__('Options')" class="w-100" toggle-class="text-center">
-          <gl-deprecated-dropdown-item
+        <gl-dropdown :text="__('Options')" block>
+          <gl-dropdown-item
             v-for="(action, index) in personalSnippetActions"
             :key="index"
             :disabled="action.disabled"
             :title="action.title"
             :href="action.href"
             @click="action.click ? action.click() : undefined"
-            >{{ action.text }}</gl-deprecated-dropdown-item
+            >{{ action.text }}</gl-dropdown-item
           >
-        </gl-deprecated-dropdown>
+        </gl-dropdown>
       </div>
     </div>
 
diff --git a/app/assets/javascripts/snippets/components/snippet_visibility_edit.vue b/app/assets/javascripts/snippets/components/snippet_visibility_edit.vue
index 25ad7c214b2..ee5076835ab 100644
--- a/app/assets/javascripts/snippets/components/snippet_visibility_edit.vue
+++ b/app/assets/javascripts/snippets/components/snippet_visibility_edit.vue
@@ -1,6 +1,5 @@
 <script>
 import { GlIcon, GlFormGroup, GlFormRadio, GlFormRadioGroup, GlLink } from '@gitlab/ui';
-import defaultVisibilityQuery from '../queries/snippet_visibility.query.graphql';
 import { defaultSnippetVisibilityLevels } from '../utils/blob';
 import { SNIPPET_LEVELS_RESTRICTED, SNIPPET_LEVELS_DISABLED } from '~/snippets/constants';
 
@@ -12,16 +11,7 @@ export default {
     GlFormRadioGroup,
     GlLink,
   },
-  apollo: {
-    defaultVisibility: {
-      query: defaultVisibilityQuery,
-      manual: true,
-      result({ data: { visibilityLevels, multipleLevelsRestricted } }) {
-        this.visibilityLevels = defaultSnippetVisibilityLevels(visibilityLevels);
-        this.multipleLevelsRestricted = multipleLevelsRestricted;
-      },
-    },
-  },
+  inject: ['visibilityLevels', 'multipleLevelsRestricted'],
   props: {
     helpLink: {
       type: String,
@@ -38,11 +28,10 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      visibilityLevels: [],
-      multipleLevelsRestricted: false,
-    };
+  computed: {
+    defaultVisibilityLevels() {
+      return defaultSnippetVisibilityLevels(this.visibilityLevels);
+    },
   },
   SNIPPET_LEVELS_DISABLED,
   SNIPPET_LEVELS_RESTRICTED,
@@ -59,7 +48,7 @@ export default {
     <gl-form-group id="visibility-level-setting" class="gl-mb-0">
       <gl-form-radio-group :checked="value" stacked v-bind="$attrs" v-on="$listeners">
         <gl-form-radio
-          v-for="option in visibilityLevels"
+          v-for="option in defaultVisibilityLevels"
           :key="option.value"
           :value="option.value"
           class="mb-3"
@@ -78,7 +67,9 @@ export default {
     </gl-form-group>
 
     <div class="text-muted" data-testid="restricted-levels-info">
-      <template v-if="!visibilityLevels.length">{{ $options.SNIPPET_LEVELS_DISABLED }}</template>
+      <template v-if="!defaultVisibilityLevels.length">{{
+        $options.SNIPPET_LEVELS_DISABLED
+      }}</template>
       <template v-else-if="multipleLevelsRestricted">{{
         $options.SNIPPET_LEVELS_RESTRICTED
       }}</template>
diff --git a/app/assets/javascripts/snippets/constants.js b/app/assets/javascripts/snippets/constants.js
index e75922df15f..2a9ecbc27dc 100644
--- a/app/assets/javascripts/snippets/constants.js
+++ b/app/assets/javascripts/snippets/constants.js
@@ -14,7 +14,7 @@ export const SNIPPET_VISIBILITY = {
   [SNIPPET_VISIBILITY_INTERNAL]: {
     label: __('Internal'),
     icon: 'shield',
-    description: __('The snippet is visible to any logged in user.'),
+    description: __('The snippet is visible to any logged in user except external users.'),
   },
   [SNIPPET_VISIBILITY_PUBLIC]: {
     label: __('Public'),
diff --git a/app/assets/javascripts/snippets/index.js b/app/assets/javascripts/snippets/index.js
index b55e1baf41e..853ccb0c2fe 100644
--- a/app/assets/javascripts/snippets/index.js
+++ b/app/assets/javascripts/snippets/index.js
@@ -24,17 +24,14 @@ export default function appFactory(el, Component) {
     ...restDataset
   } = el.dataset;
 
-  apolloProvider.clients.defaultClient.cache.writeData({
-    data: {
+  return new Vue({
+    el,
+    apolloProvider,
+    provide: {
       visibilityLevels: JSON.parse(visibilityLevels),
       selectedLevel: SNIPPET_LEVELS_MAP[selectedLevel] ?? SNIPPET_VISIBILITY_PRIVATE,
       multipleLevelsRestricted: 'multipleLevelsRestricted' in el.dataset,
     },
-  });
-
-  return new Vue({
-    el,
-    apolloProvider,
     render(createElement) {
       return createElement(Component, {
         props: {
diff --git a/app/assets/javascripts/snippets/mixins/snippets.js b/app/assets/javascripts/snippets/mixins/snippets.js
index d5e69e2a889..5844a55e4f5 100644
--- a/app/assets/javascripts/snippets/mixins/snippets.js
+++ b/app/assets/javascripts/snippets/mixins/snippets.js
@@ -1,4 +1,4 @@
-import GetSnippetQuery from '../queries/snippet.query.graphql';
+import GetSnippetQuery from 'shared_queries/snippet/snippet.query.graphql';
 
 const blobsDefault = [];
 
@@ -8,7 +8,7 @@ export const getSnippetMixin = {
       query: GetSnippetQuery,
       variables() {
         return {
-          ids: this.snippetGid,
+          ids: [this.snippetGid],
         };
       },
       update: data => {
@@ -21,9 +21,9 @@ export const getSnippetMixin = {
       },
       result(res) {
         this.blobs = res.data.snippets.nodes[0]?.blobs || blobsDefault;
-        if (this.onSnippetFetch) {
-          this.onSnippetFetch(res);
-        }
+      },
+      skip() {
+        return this.newSnippet;
       },
     },
   },
@@ -36,7 +36,7 @@ export const getSnippetMixin = {
   data() {
     return {
       snippet: {},
-      newSnippet: false,
+      newSnippet: !this.snippetGid,
       blobs: blobsDefault,
     };
   },
diff --git a/app/assets/javascripts/snippets/queries/projectPermissions.query.graphql b/app/assets/javascripts/snippets/queries/projectPermissions.query.graphql
deleted file mode 100644
index 03c81460fb5..00000000000
--- a/app/assets/javascripts/snippets/queries/projectPermissions.query.graphql
+++ /dev/null
@@ -1,7 +0,0 @@
-query CanCreateProjectSnippet($fullPath: ID!) {
-  project(fullPath: $fullPath) {
-    userPermissions {
-      createSnippet
-    }
-  }
-}
diff --git a/app/assets/javascripts/snippets/queries/snippet.blob.content.query.graphql b/app/assets/javascripts/snippets/queries/snippet.blob.content.query.graphql
deleted file mode 100644
index 0e04ee9b7b8..00000000000
--- a/app/assets/javascripts/snippets/queries/snippet.blob.content.query.graphql
+++ /dev/null
@@ -1,14 +0,0 @@
-query SnippetBlobContent($ids: [ID!], $rich: Boolean!, $paths: [String!]) {
-  snippets(ids: $ids) {
-    nodes {
-      id
-      blobs(paths: $paths) {
-        nodes {
-          path
-          richData @include(if: $rich)
-          plainData @skip(if: $rich)
-        }
-      }
-    }
-  }
-}
diff --git a/app/assets/javascripts/snippets/queries/snippet.query.graphql b/app/assets/javascripts/snippets/queries/snippet.query.graphql
deleted file mode 100644
index 2f385050d89..00000000000
--- a/app/assets/javascripts/snippets/queries/snippet.query.graphql
+++ /dev/null
@@ -1,15 +0,0 @@
-#import '../fragments/snippetBase.fragment.graphql'
-#import '../fragments/project.fragment.graphql'
-#import "~/graphql_shared/fragments/author.fragment.graphql"
-
-query GetSnippetQuery($ids: [ID!]) {
-  snippets(ids: $ids) {
-    nodes {
-      ...SnippetBase
-      ...SnippetProject
-      author {
-        ...Author
-      }
-    }
-  }
-}
diff --git a/app/assets/javascripts/snippets/queries/snippet_visibility.query.graphql b/app/assets/javascripts/snippets/queries/snippet_visibility.query.graphql
deleted file mode 100644
index 5bd6c131bab..00000000000
--- a/app/assets/javascripts/snippets/queries/snippet_visibility.query.graphql
+++ /dev/null
@@ -1,5 +0,0 @@
-query defaultSnippetVisibility {
-  visibilityLevels @client
-  selectedLevel @client
-  multipleLevelsRestricted @client
-}
diff --git a/app/assets/javascripts/snippets/queries/userPermissions.query.graphql b/app/assets/javascripts/snippets/queries/userPermissions.query.graphql
deleted file mode 100644
index c3e5519e266..00000000000
--- a/app/assets/javascripts/snippets/queries/userPermissions.query.graphql
+++ /dev/null
@@ -1,7 +0,0 @@
-query CanCreatePersonalSnippet {
-  currentUser {
-    userPermissions {
-      createSnippet
-    }
-  }
-}
diff --git a/app/assets/javascripts/snippets/utils/blob.js b/app/assets/javascripts/snippets/utils/blob.js
index c47559b82b8..5081c648e36 100644
--- a/app/assets/javascripts/snippets/utils/blob.js
+++ b/app/assets/javascripts/snippets/utils/blob.js
@@ -7,8 +7,8 @@ import {
   SNIPPET_LEVELS_MAP,
   SNIPPET_VISIBILITY,
 } from '../constants';
-import { performanceMarkAndMeasure } from '~/performance_utils';
-import { SNIPPET_MARK_BLOBS_CONTENT, SNIPPET_MEASURE_BLOBS_CONTENT } from '~/performance_constants';
+import { performanceMarkAndMeasure } from '~/performance/utils';
+import { SNIPPET_MARK_BLOBS_CONTENT, SNIPPET_MEASURE_BLOBS_CONTENT } from '~/performance/constants';
 
 const createLocalId = () => uniqueId('blob_local_');