Add latest changes from gitlab-org/gitlab@15-0-stable-eev15.0.0-rc42

3 files changed, 71 insertions, 26 deletions

diff --git a/app/assets/javascripts/snippets/components/edit.vue b/app/assets/javascripts/snippets/components/edit.vue
index e4a97f08c8d..2537ec78850 100644
--- a/app/assets/javascripts/snippets/components/edit.vue
+++ b/app/assets/javascripts/snippets/components/edit.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon, GlFormInput, GlFormGroup } from '@gitlab/ui';
 
 import eventHub from '~/blob/components/eventhub';
 import createFlash from '~/flash';
@@ -11,7 +11,6 @@ import {
 } from '~/performance/constants';
 import { performanceMarkAndMeasure } from '~/performance/utils';
 import FormFooterActions from '~/vue_shared/components/form/form_footer_actions.vue';
-import TitleField from '~/vue_shared/components/form/title.vue';
 
 import { SNIPPET_CREATE_MUTATION_ERROR, SNIPPET_UPDATE_MUTATION_ERROR } from '../constants';
 import { getSnippetMixin } from '../mixins/snippets';
@@ -31,10 +30,11 @@ export default {
     SnippetDescriptionEdit,
     SnippetVisibilityEdit,
     SnippetBlobActionsEdit,
-    TitleField,
     FormFooterActions,
     GlButton,
     GlLoadingIcon,
+    GlFormInput,
+    GlFormGroup,
   },
   mixins: [getSnippetMixin],
   inject: ['selectedLevel'],
@@ -67,6 +67,7 @@ export default {
         description: '',
         visibilityLevel: this.selectedLevel,
       },
+      showValidation: false,
     };
   },
   computed: {
@@ -85,8 +86,11 @@ export default {
     hasValidBlobs() {
       return this.actions.every((x) => x.content);
     },
-    updatePrevented() {
-      return this.snippet.title === '' || !this.hasValidBlobs || this.isUpdating;
+    isTitleValid() {
+      return this.snippet.title !== '';
+    },
+    isFormValid() {
+      return this.isTitleValid && this.hasValidBlobs;
     },
     isProjectSnippet() {
       return Boolean(this.projectPath);
@@ -112,6 +116,12 @@ export default {
       }
       return this.snippet.webUrl;
     },
+    shouldShowBlobsErrors() {
+      return this.showValidation && !this.hasValidBlobs;
+    },
+    shouldShowTitleErrors() {
+      return this.showValidation && !this.isTitleValid;
+    },
   },
   beforeCreate() {
     performanceMarkAndMeasure({ mark: SNIPPET_MARK_EDIT_APP_START });
@@ -165,6 +175,12 @@ export default {
       };
     },
     handleFormSubmit() {
+      this.showValidation = true;
+
+      if (!this.isFormValid) {
+        return;
+      }
+
       this.isUpdating = true;
 
       this.$apollo
@@ -206,19 +222,31 @@ export default {
       class="loading-animation prepend-top-20 gl-mb-6"
     />
     <template v-else>
-      <title-field
-        id="snippet-title"
-        v-model="snippet.title"
-        data-qa-selector="snippet_title_field"
-        required
-        :autofocus="true"
-      />
+      <gl-form-group
+        :label="__('Title')"
+        label-for="snippet-title"
+        :invalid-feedback="__('This field is required.')"
+        :state="!shouldShowTitleErrors"
+      >
+        <gl-form-input
+          id="snippet-title"
+          v-model="snippet.title"
+          data-testid="snippet-title-input"
+          data-qa-selector="snippet_title_field"
+          :autofocus="true"
+        />
+      </gl-form-group>
+
       <snippet-description-edit
         v-model="snippet.description"
         :markdown-preview-path="markdownPreviewPath"
         :markdown-docs-path="markdownDocsPath"
       />
-      <snippet-blob-actions-edit :init-blobs="blobs" @actions="updateActions" />
+      <snippet-blob-actions-edit
+        :init-blobs="blobs"
+        :is-valid="!shouldShowBlobsErrors"
+        @actions="updateActions"
+      />
 
       <snippet-visibility-edit
         v-model="snippet.visibilityLevel"
@@ -228,12 +256,13 @@ export default {
       <form-footer-actions>
         <template #prepend>
           <gl-button
+            class="js-no-auto-disable"
             category="primary"
             type="submit"
             variant="confirm"
-            :disabled="updatePrevented"
             data-qa-selector="submit_button"
             data-testid="snippet-submit-btn"
+            :disabled="isUpdating"
             >{{ saveButtonLabel }}</gl-button
           >
         </template>
diff --git a/app/assets/javascripts/snippets/components/snippet_blob_actions_edit.vue b/app/assets/javascripts/snippets/components/snippet_blob_actions_edit.vue
index d221195ddc7..260ee496df0 100644
--- a/app/assets/javascripts/snippets/components/snippet_blob_actions_edit.vue
+++ b/app/assets/javascripts/snippets/components/snippet_blob_actions_edit.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlFormGroup } from '@gitlab/ui';
 import { cloneDeep } from 'lodash';
 import { s__, sprintf } from '~/locale';
 import { SNIPPET_MAX_BLOBS } from '../constants';
@@ -10,12 +10,18 @@ export default {
   components: {
     SnippetBlobEdit,
     GlButton,
+    GlFormGroup,
   },
   props: {
     initBlobs: {
       type: Array,
       required: true,
     },
+    isValid: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     return {
@@ -124,16 +130,26 @@ export default {
 </script>
 <template>
   <div class="form-group">
-    <label :for="firstInputId">{{ s__('Snippets|Files') }}</label>
-    <snippet-blob-edit
-      v-for="(blobId, index) in blobIds"
-      :key="blobId"
-      :class="{ 'gl-mt-3': index > 0 }"
-      :blob="blobs[blobId]"
-      :can-delete="canDelete"
-      @blob-updated="updateBlob(blobId, $event)"
-      @delete="deleteBlob(blobId)"
-    />
+    <gl-form-group
+      :label="s__('Snippets|Files')"
+      :label-for="firstInputId"
+      :invalid-feedback="
+        s__(
+          'Snippets|Snippets can\'t contain empty files. Ensure all files have content, or delete them.',
+        )
+      "
+      :state="isValid"
+    >
+      <snippet-blob-edit
+        v-for="(blobId, index) in blobIds"
+        :key="blobId"
+        :class="{ 'gl-mt-3': index > 0 }"
+        :blob="blobs[blobId]"
+        :can-delete="canDelete"
+        @blob-updated="updateBlob(blobId, $event)"
+        @delete="deleteBlob(blobId)"
+      />
+    </gl-form-group>
     <gl-button
       :disabled="!canAdd"
       data-testid="add_button"
diff --git a/app/assets/javascripts/snippets/mutations/delete_snippet.mutation.graphql b/app/assets/javascripts/snippets/mutations/delete_snippet.mutation.graphql
index f43d53661f4..a13c143f775 100644
--- a/app/assets/javascripts/snippets/mutations/delete_snippet.mutation.graphql
+++ b/app/assets/javascripts/snippets/mutations/delete_snippet.mutation.graphql
@@ -1,4 +1,4 @@
-mutation DeleteSnippet($id: ID!) {
+mutation DeleteSnippet($id: SnippetID!) {
   destroySnippet(input: { id: $id }) {
     errors
   }