Add latest changes from gitlab-org/gitlab@13-1-stable-ee

8 files changed, 78 insertions, 36 deletions

diff --git a/app/assets/javascripts/snippets/components/edit.vue b/app/assets/javascripts/snippets/components/edit.vue
index e8d6c005435..a6651515e47 100644
--- a/app/assets/javascripts/snippets/components/edit.vue
+++ b/app/assets/javascripts/snippets/components/edit.vue
@@ -11,7 +11,11 @@ import FormFooterActions from '~/vue_shared/components/form/form_footer_actions.
 import UpdateSnippetMutation from '../mutations/updateSnippet.mutation.graphql';
 import CreateSnippetMutation from '../mutations/createSnippet.mutation.graphql';
 import { getSnippetMixin } from '../mixins/snippets';
-import { SNIPPET_VISIBILITY_PRIVATE } from '../constants';
+import {
+  SNIPPET_VISIBILITY_PRIVATE,
+  SNIPPET_CREATE_MUTATION_ERROR,
+  SNIPPET_UPDATE_MUTATION_ERROR,
+} from '../constants';
 import SnippetBlobEdit from './snippet_blob_edit.vue';
 import SnippetVisibilityEdit from './snippet_visibility_edit.vue';
 import SnippetDescriptionEdit from './snippet_description_edit.vue';
@@ -98,7 +102,11 @@ export default {
       this.fileName = newName;
     },
     flashAPIFailure(err) {
-      Flash(sprintf(__("Can't update snippet: %{err}"), { err }));
+      const defaultErrorMsg = this.newSnippet
+        ? SNIPPET_CREATE_MUTATION_ERROR
+        : SNIPPET_UPDATE_MUTATION_ERROR;
+      Flash(sprintf(defaultErrorMsg, { err }));
+      this.isUpdating = false;
     },
     onNewSnippetFetched() {
       this.newSnippet = true;
@@ -129,29 +137,45 @@ export default {
         this.onExistingSnippetFetched();
       }
     },
+    getAttachedFiles() {
+      const fileInputs = Array.from(this.$el.querySelectorAll('[name="files[]"]'));
+      return fileInputs.map(node => node.value);
+    },
+    createMutation() {
+      return {
+        mutation: CreateSnippetMutation,
+        variables: {
+          input: {
+            ...this.apiData,
+            uploadedFiles: this.getAttachedFiles(),
+            projectPath: this.projectPath,
+          },
+        },
+      };
+    },
+    updateMutation() {
+      return {
+        mutation: UpdateSnippetMutation,
+        variables: {
+          input: this.apiData,
+        },
+      };
+    },
     handleFormSubmit() {
       this.isUpdating = true;
       this.$apollo
-        .mutate({
-          mutation: this.newSnippet ? CreateSnippetMutation : UpdateSnippetMutation,
-          variables: {
-            input: {
-              ...this.apiData,
-              projectPath: this.newSnippet ? this.projectPath : undefined,
-            },
-          },
-        })
+        .mutate(this.newSnippet ? this.createMutation() : this.updateMutation())
         .then(({ data }) => {
           const baseObj = this.newSnippet ? data?.createSnippet : data?.updateSnippet;
 
           const errors = baseObj?.errors;
           if (errors.length) {
             this.flashAPIFailure(errors[0]);
+          } else {
+            redirectTo(baseObj.snippet.webUrl);
           }
-          redirectTo(baseObj.snippet.webUrl);
         })
         .catch(e => {
-          this.isUpdating = false;
           this.flashAPIFailure(e);
         });
     },
@@ -168,6 +192,8 @@ export default {
   <form
     class="snippet-form js-requires-input js-quick-submit common-note-form"
     :data-snippet-type="isProjectSnippet ? 'project' : 'personal'"
+    data-testid="snippet-edit-form"
+    @submit.prevent="handleFormSubmit"
   >
     <gl-loading-icon
       v-if="isLoading"
@@ -179,7 +205,7 @@ export default {
       <title-field
         :id="titleFieldId"
         v-model="snippet.title"
-        data-qa-selector="snippet_title"
+        data-qa-selector="snippet_title_field"
         required
         :autofocus="true"
       />
@@ -203,17 +229,17 @@ export default {
       <form-footer-actions>
         <template #prepend>
           <gl-button
-            type="submit"
             category="primary"
+            type="submit"
             variant="success"
             :disabled="updatePrevented"
             data-qa-selector="submit_button"
-            @click="handleFormSubmit"
+            data-testid="snippet-submit-btn"
             >{{ saveButtonLabel }}</gl-button
           >
         </template>
         <template #append>
-          <gl-button data-testid="snippet-cancel-btn" :href="cancelButtonHref">{{
+          <gl-button type="cancel" data-testid="snippet-cancel-btn" :href="cancelButtonHref">{{
             __('Cancel')
           }}</gl-button>
         </template>
diff --git a/app/assets/javascripts/snippets/components/snippet_blob_edit.vue b/app/assets/javascripts/snippets/components/snippet_blob_edit.vue
index dd03902417d..62c29b0c7cd 100644
--- a/app/assets/javascripts/snippets/components/snippet_blob_edit.vue
+++ b/app/assets/javascripts/snippets/components/snippet_blob_edit.vue
@@ -35,7 +35,7 @@ export default {
     <div class="file-holder snippet">
       <blob-header-edit
         :value="fileName"
-        data-qa-selector="snippet_file_name"
+        data-qa-selector="file_name_field"
         @input="$emit('name-change', $event)"
       />
       <gl-loading-icon
diff --git a/app/assets/javascripts/snippets/components/snippet_blob_view.vue b/app/assets/javascripts/snippets/components/snippet_blob_view.vue
index 6b218b21e56..7472aff3318 100644
--- a/app/assets/javascripts/snippets/components/snippet_blob_view.vue
+++ b/app/assets/javascripts/snippets/components/snippet_blob_view.vue
@@ -74,6 +74,9 @@ export default {
     canBeCloned() {
       return this.snippet.sshUrlToRepo || this.snippet.httpUrlToRepo;
     },
+    hasRenderError() {
+      return Boolean(this.viewer.renderError);
+    },
   },
   methods: {
     switchViewer(newViewer) {
@@ -92,7 +95,12 @@ export default {
   <div>
     <blob-embeddable v-if="embeddable" class="mb-3" :url="snippet.webUrl" />
     <article class="file-holder snippet-file-content">
-      <blob-header :blob="blob" :active-viewer-type="viewer.type" @viewer-changed="switchViewer">
+      <blob-header
+        :blob="blob"
+        :active-viewer-type="viewer.type"
+        :has-render-error="hasRenderError"
+        @viewer-changed="switchViewer"
+      >
         <template #actions>
           <clone-dropdown-button
             v-if="canBeCloned"
diff --git a/app/assets/javascripts/snippets/components/snippet_description_edit.vue b/app/assets/javascripts/snippets/components/snippet_description_edit.vue
index 0fe539a5de7..737845d09b8 100644
--- a/app/assets/javascripts/snippets/components/snippet_description_edit.vue
+++ b/app/assets/javascripts/snippets/components/snippet_description_edit.vue
@@ -30,7 +30,7 @@ export default {
 </script>
 <template>
   <div class="form-group js-description-input">
-    <label>{{ s__('Snippets|Description (optional)') }}</label>
+    <label for="snippet-description">{{ s__('Snippets|Description (optional)') }}</label>
     <div class="js-collapsible-input">
       <div class="js-collapsed" :class="{ 'd-none': value }">
         <gl-form-input
@@ -46,22 +46,26 @@ export default {
       <markdown-field
         class="js-expanded"
         :class="{ 'd-none': !value }"
+        :add-spacing-classes="false"
         :markdown-preview-path="markdownPreviewPath"
         :markdown-docs-path="markdownDocsPath"
       >
-        <textarea
-          slot="textarea"
-          class="note-textarea js-gfm-input js-autosize markdown-area"
-          dir="auto"
-          data-qa-selector="snippet_description_field"
-          data-supports-quick-actions="false"
-          :value="value"
-          :aria-label="__('Description')"
-          :placeholder="__('Write a comment or drag your files here…')"
-          v-bind="$attrs"
-          @input="$emit('input', $event.target.value)"
-        >
-        </textarea>
+        <template #textarea>
+          <textarea
+            id="snippet-description"
+            ref="textarea"
+            :value="value"
+            class="note-textarea js-gfm-input js-autosize markdown-area"
+            dir="auto"
+            data-qa-selector="snippet_description_field"
+            data-supports-quick-actions="false"
+            :aria-label="__('Description')"
+            :placeholder="__('Write a comment or drag your files here…')"
+            v-bind="$attrs"
+            @input="$emit('input', $event.target.value)"
+          >
+          </textarea>
+        </template>
       </markdown-field>
     </div>
   </div>
diff --git a/app/assets/javascripts/snippets/components/snippet_description_view.vue b/app/assets/javascripts/snippets/components/snippet_description_view.vue
index 72afcc30be6..a5107f09fc7 100644
--- a/app/assets/javascripts/snippets/components/snippet_description_view.vue
+++ b/app/assets/javascripts/snippets/components/snippet_description_view.vue
@@ -15,7 +15,7 @@ export default {
 };
 </script>
 <template>
-  <markdown-field-view class="snippet-description" data-qa-selector="snippet_description_field">
+  <markdown-field-view class="snippet-description" data-qa-selector="snippet_description_content">
     <div class="md js-snippet-description" v-html="description"></div>
   </markdown-field-view>
 </template>
diff --git a/app/assets/javascripts/snippets/components/snippet_header.vue b/app/assets/javascripts/snippets/components/snippet_header.vue
index c0967e9093c..2a06296cb15 100644
--- a/app/assets/javascripts/snippets/components/snippet_header.vue
+++ b/app/assets/javascripts/snippets/components/snippet_header.vue
@@ -163,7 +163,8 @@ export default {
   <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"
+        class="snippet-box has-tooltip d-flex align-items-center append-right-5 mb-1"
+        data-qa-selector="snippet_container"
         :title="snippetVisibilityLevelDescription"
         data-container="body"
       >
diff --git a/app/assets/javascripts/snippets/components/snippet_title.vue b/app/assets/javascripts/snippets/components/snippet_title.vue
index 5267c3748ca..2cf7a1e267b 100644
--- a/app/assets/javascripts/snippets/components/snippet_title.vue
+++ b/app/assets/javascripts/snippets/components/snippet_title.vue
@@ -20,7 +20,7 @@ export default {
 </script>
 <template>
   <div class="snippet-header limited-header-width">
-    <h2 class="snippet-title prepend-top-0 mb-3" data-qa-selector="snippet_title">
+    <h2 class="snippet-title gl-mt-0 mb-3" data-qa-selector="snippet_title_content">
       {{ snippet.title }}
     </h2>
 
diff --git a/app/assets/javascripts/snippets/constants.js b/app/assets/javascripts/snippets/constants.js
index 7fd5e5b8ee4..b3abc73557c 100644
--- a/app/assets/javascripts/snippets/constants.js
+++ b/app/assets/javascripts/snippets/constants.js
@@ -22,3 +22,6 @@ export const SNIPPET_VISIBILITY = {
     description: __('The snippet can be accessed without any authentication.'),
   },
 };
+
+export const SNIPPET_CREATE_MUTATION_ERROR = __("Can't create snippet: %{err}");
+export const SNIPPET_UPDATE_MUTATION_ERROR = __("Can't update snippet: %{err}");