1 files changed, 49 insertions, 24 deletions

diff --git a/app/assets/javascripts/badges/components/badge_form.vue b/app/assets/javascripts/badges/components/badge_form.vue
index 1a80030c7e6..2be59f00773 100644
--- a/app/assets/javascripts/badges/components/badge_form.vue
+++ b/app/assets/javascripts/badges/components/badge_form.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlLoadingIcon, GlFormInput, GlFormGroup, GlButton } from '@gitlab/ui';
 import { escape, debounce } from 'lodash';
+// eslint-disable-next-line no-restricted-imports
 import { mapActions, mapState } from 'vuex';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import { createAlert, VARIANT_INFO } from '~/alert';
@@ -28,6 +29,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    inModal: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -119,16 +125,28 @@ export default {
         exampleUrl,
       });
     },
+    cancelButtonType() {
+      return this.isEditing ? 'button' : 'reset';
+    },
+    saveText() {
+      return this.isEditing ? s__('Badges|Save changes') : s__('Badges|Add badge');
+    },
+  },
+  mounted() {
+    // declared here to make it cancel-able
+    this.debouncedPreview = debounce(function search() {
+      this.renderBadge();
+    }, badgePreviewDelayInMilliseconds);
   },
   methods: {
     ...mapActions(['addBadge', 'renderBadge', 'saveBadge', 'stopEditing', 'updateBadgeInForm']),
-    debouncedPreview: debounce(function preview() {
-      this.renderBadge();
-    }, badgePreviewDelayInMilliseconds),
-    onCancel() {
-      this.stopEditing();
+    updatePreview() {
+      this.debouncedPreview();
     },
     onSubmit() {
+      this.debouncedPreview.cancel();
+      this.renderBadge();
+
       const form = this.$el;
       if (!form.checkValidity()) {
         this.wasValidated = true;
@@ -161,6 +179,7 @@ export default {
             variant: VARIANT_INFO,
           });
           this.wasValidated = false;
+          this.$emit('close-add-form');
         })
         .catch((error) => {
           createAlert({
@@ -171,6 +190,17 @@ export default {
           throw error;
         });
     },
+    closeForm() {
+      this.$refs.form.reset();
+      this.$emit('close-add-form');
+    },
+    handleCancel() {
+      if (this.isEditing) {
+        this.stopEditing();
+      } else {
+        this.closeForm();
+      }
+    },
   },
   safeHtmlConfig: { ALLOW_TAGS: ['a', 'code'] },
 };
@@ -178,12 +208,13 @@ export default {
 
 <template>
   <form
+    ref="form"
     :class="{ 'was-validated': wasValidated }"
     class="gl-mt-3 gl-mb-3 needs-validation"
     novalidate
     @submit.prevent.stop="onSubmit"
   >
-    <gl-form-group :label="s__('Badges|Name')" label-for="badge-name">
+    <gl-form-group :label="s__('Badges|Name')" label-for="badge-name" class="gl-max-w-48">
       <gl-form-input id="badge-name" v-model="name" data-qa-selector="badge_name_field" />
     </gl-form-group>
 
@@ -195,9 +226,9 @@ export default {
         v-model="linkUrl"
         data-qa-selector="badge_link_url_field"
         type="URL"
-        class="form-control gl-form-input"
+        class="form-control gl-form-input gl-max-w-80"
         required
-        @input="debouncedPreview"
+        @input="updatePreview"
       />
       <div class="invalid-feedback">{{ s__('Badges|Enter a valid URL') }}</div>
       <span class="form-text text-muted">{{ badgeLinkUrlExample }}</span>
@@ -211,9 +242,9 @@ export default {
         v-model="imageUrl"
         data-qa-selector="badge_image_url_field"
         type="URL"
-        class="form-control gl-form-input"
+        class="form-control gl-form-input gl-max-w-80"
         required
-        @input="debouncedPreview"
+        @input="updatePreview"
       />
       <div class="invalid-feedback">{{ s__('Badges|Enter a valid URL') }}</div>
       <span class="form-text text-muted">{{ badgeImageUrlExample }}</span>
@@ -235,29 +266,23 @@ export default {
       </p>
     </div>
 
-    <div v-if="isEditing" class="row-content-block">
-      <gl-button class="btn-cancel gl-mr-4" data-testid="cancelEditing" @click="onCancel">
-        {{ __('Cancel') }}
-      </gl-button>
+    <div v-if="!inModal" class="form-group" data-testid="action-buttons">
       <gl-button
         :loading="isSaving"
         type="submit"
         variant="confirm"
         category="primary"
-        data-testid="saveEditing"
+        data-qa-selector="add_badge_button"
+        class="gl-mr-3"
       >
-        {{ s__('Badges|Save changes') }}
+        {{ saveText }}
       </gl-button>
-    </div>
-    <div v-else class="form-group">
       <gl-button
-        :loading="isSaving"
-        type="submit"
-        variant="confirm"
-        category="primary"
-        data-qa-selector="add_badge_button"
+        :type="cancelButtonType"
+        data-qa-selector="cancel_badge_button"
+        @click="handleCancel"
       >
-        {{ s__('Badges|Add badge') }}
+        {{ __('Cancel') }}
       </gl-button>
     </div>
   </form>