Add latest changes from gitlab-org/gitlab@14-2-stable-eev14.2.0-rc42

4 files changed, 40 insertions, 29 deletions

diff --git a/app/assets/javascripts/snippets/components/snippet_blob_view.vue b/app/assets/javascripts/snippets/components/snippet_blob_view.vue
index 27b3a30b40a..8481ac2b9c9 100644
--- a/app/assets/javascripts/snippets/components/snippet_blob_view.vue
+++ b/app/assets/javascripts/snippets/components/snippet_blob_view.vue
@@ -29,15 +29,6 @@ export default {
       update(data) {
         return this.onContentUpdate(data);
       },
-      result() {
-        if (this.activeViewerType === RICH_BLOB_VIEWER) {
-          // eslint-disable-next-line vue/no-mutating-props
-          this.blob.richViewer.renderError = null;
-        } else {
-          // eslint-disable-next-line vue/no-mutating-props
-          this.blob.simpleViewer.renderError = null;
-        }
-      },
       skip() {
         return this.viewer.renderError;
       },
diff --git a/app/assets/javascripts/snippets/components/snippet_header.vue b/app/assets/javascripts/snippets/components/snippet_header.vue
index a8f95748e7e..466b273cae4 100644
--- a/app/assets/javascripts/snippets/components/snippet_header.vue
+++ b/app/assets/javascripts/snippets/components/snippet_header.vue
@@ -54,6 +54,7 @@ export default {
       },
     },
   },
+  inject: ['reportAbusePath'],
   props: {
     snippet: {
       type: Object,
@@ -93,7 +94,6 @@ export default {
           click: this.showDeleteModal,
           variant: 'danger',
           category: 'secondary',
-          cssClass: 'ml-2',
         },
         {
           condition: this.canCreateSnippet,
@@ -103,10 +103,18 @@ export default {
             : joinPaths('/', gon.relative_url_root, '/-/snippets/new'),
           variant: 'success',
           category: 'secondary',
-          cssClass: 'ml-2',
+        },
+        {
+          condition: this.reportAbusePath,
+          text: __('Submit as spam'),
+          href: this.reportAbusePath,
+          title: __('Submit as spam'),
         },
       ];
     },
+    hasPersonalSnippetActions() {
+      return Boolean(this.personalSnippetActions.filter(({ condition }) => condition).length);
+    },
     editLink() {
       return `${this.snippet.webUrl}/edit`;
     },
@@ -212,7 +220,7 @@ export default {
       </div>
     </div>
 
-    <div class="detail-page-header-actions">
+    <div v-if="hasPersonalSnippetActions" class="detail-page-header-actions">
       <div class="d-none d-sm-flex">
         <template v-for="(action, index) in personalSnippetActions">
           <div
@@ -221,6 +229,7 @@ export default {
             v-gl-tooltip
             :title="action.title"
             class="d-inline-block"
+            :class="{ 'gl-ml-3': index > 0 }"
           >
             <gl-button
               :disabled="action.disabled"
@@ -239,15 +248,17 @@ export default {
       </div>
       <div class="d-block d-sm-none dropdown">
         <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-dropdown-item
-          >
+          <template v-for="(action, index) in personalSnippetActions">
+            <gl-dropdown-item
+              v-if="action.condition"
+              :key="index"
+              :disabled="action.disabled"
+              :title="action.title"
+              :href="action.href"
+              @click="action.click ? action.click() : undefined"
+              >{{ action.text }}</gl-dropdown-item
+            >
+          </template>
         </gl-dropdown>
       </div>
     </div>
diff --git a/app/assets/javascripts/snippets/index.js b/app/assets/javascripts/snippets/index.js
index 789332ce5b7..dec8dcec179 100644
--- a/app/assets/javascripts/snippets/index.js
+++ b/app/assets/javascripts/snippets/index.js
@@ -14,13 +14,20 @@ export default function appFactory(el, Component) {
   }
 
   const apolloProvider = new VueApollo({
-    defaultClient: createDefaultClient({}, { batchMax: 1 }),
+    defaultClient: createDefaultClient(
+      {},
+      {
+        batchMax: 1,
+        assumeImmutableResults: true,
+      },
+    ),
   });
 
   const {
     visibilityLevels = '[]',
     selectedLevel,
     multipleLevelsRestricted,
+    reportAbusePath,
     ...restDataset
   } = el.dataset;
 
@@ -31,6 +38,7 @@ export default function appFactory(el, Component) {
       visibilityLevels: JSON.parse(visibilityLevels),
       selectedLevel: SNIPPET_LEVELS_MAP[selectedLevel] ?? SNIPPET_VISIBILITY_PRIVATE,
       multipleLevelsRestricted: 'multipleLevelsRestricted' in el.dataset,
+      reportAbusePath,
     },
     render(createElement) {
       return createElement(Component, {
diff --git a/app/assets/javascripts/snippets/mixins/snippets.js b/app/assets/javascripts/snippets/mixins/snippets.js
index 7552eae97fc..b72befef56b 100644
--- a/app/assets/javascripts/snippets/mixins/snippets.js
+++ b/app/assets/javascripts/snippets/mixins/snippets.js
@@ -1,3 +1,4 @@
+import { isEmpty } from 'lodash';
 import GetSnippetQuery from 'shared_queries/snippet/snippet.query.graphql';
 
 const blobsDefault = [];
@@ -12,20 +13,18 @@ export const getSnippetMixin = {
         };
       },
       update(data) {
-        const res = data.snippets.nodes[0];
+        const res = { ...data.snippets.nodes[0] };
 
         // Set `snippet.blobs` since some child components are coupled to this.
-        if (res) {
+        if (!isEmpty(res)) {
           // It's possible for us to not get any blobs in a response.
           // In this case, we should default to current blobs.
-          res.blobs = res.blobs ? res.blobs.nodes : this.blobs;
+          res.blobs = res.blobs ? res.blobs.nodes : blobsDefault;
+          res.description = res.description || '';
         }
 
         return res;
       },
-      result(res) {
-        this.blobs = res.data.snippets.nodes[0]?.blobs || blobsDefault;
-      },
       skip() {
         return this.newSnippet;
       },
@@ -41,12 +40,14 @@ export const getSnippetMixin = {
     return {
       snippet: {},
       newSnippet: !this.snippetGid,
-      blobs: blobsDefault,
     };
   },
   computed: {
     isLoading() {
       return this.$apollo.queries.snippet.loading;
     },
+    blobs() {
+      return this.snippet?.blobs || [];
+    },
   },
 };