Merge branch 'ss/fix-trim-issue-new-board-card' into 'master'

Add trim on submit of new board card

See merge request gitlab-org/gitlab!78304

app/assets/javascripts/boards/components/board_new_item.vue

@@ -43,6 +43,12 @@ export default {
       // eslint-disable-next-line @gitlab/require-i18n-strings
       return `${this.list.id}-title`;
     },
+    isIssueTitleEmpty() {
+      return this.title.trim() === '';
+    },
+    isCreatingIssueDisabled() {
+      return this.isIssueTitleEmpty || this.disableSubmit;
+    },
   },
   methods: {
     handleFormCancel() {
@@ -54,7 +60,7 @@ export default {
 
       eventHub.$emit(`scroll-board-list-${this.list.id}`);
       this.$emit('form-submit', {
-        title,
+        title: title.trim(),
         list,
       });
     },
@@ -69,7 +75,7 @@ export default {
         <label :for="inputFieldId" class="gl-font-weight-bold">{{ __('Title') }}</label>
         <gl-form-input
           :id="inputFieldId"
-          v-model.trim="title"
+          v-model="title"
           :autofocus="true"
           autocomplete="off"
           type="text"
@@ -78,7 +84,8 @@ export default {
         <slot></slot>
         <div class="gl-clearfix gl-mt-4">
           <gl-button
-            :disabled="!title || disableSubmit"
+            data-testid="create-button"
+            :disabled="isCreatingIssueDisabled"
             class="gl-float-left js-no-auto-disable"
             variant="confirm"
             type="submit"

spec/frontend/boards/components/board_new_item_spec.js

@@ -39,6 +39,27 @@ describe('BoardNewItem', () => {
   });
 
   describe('template', () => {
+    describe('when the user provides a valid input', () => {
+      it('finds an enabled create button', async () => {
+        expect(wrapper.findByTestId('create-button').props('disabled')).toBe(true);
+
+        wrapper.find(GlFormInput).vm.$emit('input', 'hello');
+        await wrapper.vm.$nextTick();
+
+        expect(wrapper.findByTestId('create-button').props('disabled')).toBe(false);
+      });
+    });
+
+    describe('when the user types in a string with only spaces', () => {
+      it('disables the Create Issue button', async () => {
+        wrapper.find(GlFormInput).vm.$emit('input', '    ');
+
+        await wrapper.vm.$nextTick();
+
+        expect(wrapper.findByTestId('create-button').props('disabled')).toBe(true);
+      });
+    });
+
     it('renders gl-form component', () => {
       expect(wrapper.findComponent(GlForm).exists()).toBe(true);
     });
@@ -80,6 +101,19 @@ describe('BoardNewItem', () => {
         ]);
       });
 
+      it('emits `form-submit` event with trimmed title', async () => {
+        titleInput().setValue(' Foo   ');
+
+        await glForm().trigger('submit');
+
+        expect(wrapper.emitted('form-submit')[0]).toEqual([
+          {
+            title: 'Foo',
+            list: mockList,
+          },
+        ]);
+      });
+
       it('emits `scroll-board-list-` event with list.id on eventHub when `submit` is triggered on gl-form', async () => {
         jest.spyOn(eventHub, '$emit').mockImplementation();
         await glForm().trigger('submit');