Add latest changes from gitlab-org/gitlab@master

3 files changed, 124 insertions, 82 deletions

diff --git a/app/assets/javascripts/boards/components/board_new_issue.vue b/app/assets/javascripts/boards/components/board_new_issue.vue
index caeecb25227..84c9191975e 100644
--- a/app/assets/javascripts/boards/components/board_new_issue.vue
+++ b/app/assets/javascripts/boards/components/board_new_issue.vue
@@ -1,21 +1,19 @@
 <script>
-import { GlButton } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { getMilestone } from 'ee_else_ce/boards/boards_util';
 import BoardNewIssueMixin from 'ee_else_ce/boards/mixins/board_new_issue';
-import { __ } from '~/locale';
+
 import { toggleFormEventPrefix } from '../constants';
 import eventHub from '../eventhub';
+
+import BoardNewItem from './board_new_item.vue';
 import ProjectSelect from './project_select.vue';
 
 export default {
   name: 'BoardNewIssue',
-  i18n: {
-    cancel: __('Cancel'),
-  },
   components: {
+    BoardNewItem,
     ProjectSelect,
-    GlButton,
   },
   mixins: [BoardNewIssueMixin],
   inject: ['groupId'],
@@ -25,106 +23,55 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      title: '',
-    };
-  },
   computed: {
-    ...mapState(['selectedProject']),
-    ...mapGetters(['isGroupBoard', 'isEpicBoard']),
-    /**
-     * We've extended this component in EE where
-     * submitButtonTitle returns a different string
-     * hence this is kept as a computed prop.
-     */
-    submitButtonTitle() {
-      return __('Create issue');
+    ...mapState(['selectedProject', 'fullPath']),
+    ...mapGetters(['isGroupBoard']),
+    formEventPrefix() {
+      return toggleFormEventPrefix.issue;
     },
-    disabled() {
-      if (this.isGroupBoard) {
-        return this.title === '' || !this.selectedProject.name;
-      }
-      return this.title === '';
+    disableSubmit() {
+      return this.isGroupBoard ? !this.selectedProject.name : false;
     },
-    inputFieldId() {
-      // eslint-disable-next-line @gitlab/require-i18n-strings
-      return `${this.list.id}-title`;
+    projectPath() {
+      return this.isGroupBoard ? this.selectedProject.fullPath : this.fullPath;
     },
   },
-  mounted() {
-    this.$refs.input.focus();
-    eventHub.$on('setSelectedProject', this.setSelectedProject);
-  },
   methods: {
     ...mapActions(['addListNewIssue']),
-    submit() {
-      const { title } = this;
+    submit({ title }) {
       const labels = this.list.label ? [this.list.label] : [];
       const assignees = this.list.assignee ? [this.list.assignee] : [];
       const milestone = getMilestone(this.list);
 
-      eventHub.$emit(`scroll-board-list-${this.list.id}`);
-
       return this.addListNewIssue({
+        list: this.list,
         issueInput: {
           title,
           labelIds: labels?.map((l) => l.id),
           assigneeIds: assignees?.map((a) => a?.id),
           milestoneId: milestone?.id,
-          projectPath: this.selectedProject.fullPath,
-          ...this.extraIssueInput(),
+          projectPath: this.projectPath,
         },
-        list: this.list,
       }).then(() => {
-        this.reset();
+        this.cancel();
       });
     },
-    reset() {
-      this.title = '';
-      eventHub.$emit(`${toggleFormEventPrefix.issue}${this.list.id}`);
+    cancel() {
+      eventHub.$emit(`${this.formEventPrefix}${this.list.id}`);
     },
   },
 };
 </script>
 
 <template>
-  <div class="board-new-issue-form">
-    <div class="board-card position-relative p-3 rounded">
-      <form ref="submitForm" @submit.prevent="submit">
-        <label :for="inputFieldId" class="label-bold">{{ __('Title') }}</label>
-        <input
-          :id="inputFieldId"
-          ref="input"
-          v-model="title"
-          class="form-control"
-          type="text"
-          name="issue_title"
-          autocomplete="off"
-        />
-        <project-select v-if="isGroupBoard && !isEpicBoard" :group-id="groupId" :list="list" />
-        <div class="clearfix gl-mt-3">
-          <gl-button
-            ref="submitButton"
-            :disabled="disabled"
-            class="float-left js-no-auto-disable"
-            variant="confirm"
-            category="primary"
-            type="submit"
-          >
-            {{ submitButtonTitle }}
-          </gl-button>
-          <gl-button
-            ref="cancelButton"
-            class="float-right"
-            type="button"
-            variant="default"
-            @click="reset"
-          >
-            {{ $options.i18n.cancel }}
-          </gl-button>
-        </div>
-      </form>
-    </div>
-  </div>
+  <board-new-item
+    :list="list"
+    :form-event-prefix="formEventPrefix"
+    :submit-button-title="__('Create issue')"
+    :disable-submit="disableSubmit"
+    @form-submit="submit"
+    @form-cancel="cancel"
+  >
+    <project-select v-if="isGroupBoard" :group-id="groupId" :list="list" />
+  </board-new-item>
 </template>
diff --git a/app/assets/javascripts/boards/components/board_new_issue_deprecated.vue b/app/assets/javascripts/boards/components/board_new_issue_deprecated.vue
index 1218941065f..a25b436b8de 100644
--- a/app/assets/javascripts/boards/components/board_new_issue_deprecated.vue
+++ b/app/assets/javascripts/boards/components/board_new_issue_deprecated.vue
@@ -11,7 +11,7 @@ import ProjectSelect from './project_select_deprecated.vue';
 // This component is being replaced in favor of './board_new_issue.vue' for GraphQL boards
 
 export default {
-  name: 'BoardNewIssue',
+  name: 'BoardNewIssueDeprecated',
   components: {
     ProjectSelect,
     GlButton,
diff --git a/app/assets/javascripts/boards/components/board_new_item.vue b/app/assets/javascripts/boards/components/board_new_item.vue
new file mode 100644
index 00000000000..44574de17d7
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board_new_item.vue
@@ -0,0 +1,95 @@
+<script>
+import { GlForm, GlFormInput, GlButton } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+import eventHub from '../eventhub';
+
+export default {
+  i18n: {
+    cancel: __('Cancel'),
+  },
+  components: {
+    GlForm,
+    GlFormInput,
+    GlButton,
+  },
+  props: {
+    list: {
+      type: Object,
+      required: true,
+    },
+    formEventPrefix: {
+      type: String,
+      required: true,
+    },
+    disableSubmit: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    submitButtonTitle: {
+      type: String,
+      required: false,
+      default: __('Create issue'),
+    },
+  },
+  data() {
+    return {
+      title: '',
+    };
+  },
+  computed: {
+    inputFieldId() {
+      // eslint-disable-next-line @gitlab/require-i18n-strings
+      return `${this.list.id}-title`;
+    },
+  },
+  methods: {
+    handleFormCancel() {
+      this.title = '';
+      this.$emit('form-cancel');
+    },
+    handleFormSubmit() {
+      const { title, list } = this;
+
+      eventHub.$emit(`scroll-board-list-${this.list.id}`);
+      this.$emit('form-submit', {
+        title,
+        list,
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="board-new-issue-form">
+    <div class="board-card position-relative gl-p-5 rounded">
+      <gl-form @submit.prevent="handleFormSubmit" @reset="handleFormCancel">
+        <label :for="inputFieldId" class="gl-font-weight-bold">{{ __('Title') }}</label>
+        <gl-form-input
+          :id="inputFieldId"
+          v-model.trim="title"
+          :autofocus="true"
+          autocomplete="off"
+          type="text"
+          name="issue_title"
+        />
+        <slot></slot>
+        <div class="gl-clearfix gl-mt-4">
+          <gl-button
+            :disabled="!title || disableSubmit"
+            class="gl-float-left js-no-auto-disable"
+            variant="confirm"
+            type="submit"
+          >
+            {{ submitButtonTitle }}
+          </gl-button>
+          <gl-button class="gl-float-right js-no-auto-disable" type="reset">
+            {{ $options.i18n.cancel }}
+          </gl-button>
+        </div>
+      </gl-form>
+    </div>
+  </div>
+</template>