1 files changed, 136 insertions, 0 deletions
diff --git a/app/assets/javascripts/boards/components/board_new_issue_deprecated.vue b/app/assets/javascripts/boards/components/board_new_issue_deprecated.vue
new file mode 100644
index 00000000000..4fc58742783
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board_new_issue_deprecated.vue
@@ -0,0 +1,136 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import { getMilestone } from 'ee_else_ce/boards/boards_util';
+import ListIssue from 'ee_else_ce/boards/models/issue';
+import eventHub from '../eventhub';
+import ProjectSelect from './project_select_deprecated.vue';
+import boardsStore from '../stores/boards_store';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+
+// This component is being replaced in favor of './board_new_issue.vue' for GraphQL boards
+
+export default {
+  name: 'BoardNewIssue',
+  components: {
+    ProjectSelect,
+    GlButton,
+  },
+  mixins: [glFeatureFlagMixin()],
+  inject: ['groupId'],
+  props: {
+    list: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      title: '',
+      error: false,
+      selectedProject: {},
+    };
+  },
+  computed: {
+    disabled() {
+      if (this.groupId) {
+        return this.title === '' || !this.selectedProject.name;
+      }
+      return this.title === '';
+    },
+  },
+  mounted() {
+    this.$refs.input.focus();
+    eventHub.$on('setSelectedProject', this.setSelectedProject);
+  },
+  methods: {
+    submit(e) {
+      e.preventDefault();
+      if (this.title.trim() === '') return Promise.resolve();
+
+      this.error = false;
+
+      const labels = this.list.label ? [this.list.label] : [];
+      const assignees = this.list.assignee ? [this.list.assignee] : [];
+      const milestone = getMilestone(this.list);
+
+      const { weightFeatureAvailable } = boardsStore;
+      const { weight } = weightFeatureAvailable ? boardsStore.state.currentBoard : {};
+
+      const issue = new ListIssue({
+        title: this.title,
+        labels,
+        subscribed: true,
+        assignees,
+        milestone,
+        project_id: this.selectedProject.id,
+        weight,
+      });
+
+      eventHub.$emit(`scroll-board-list-${this.list.id}`);
+      this.cancel();
+
+      return this.list
+        .newIssue(issue)
+        .then(() => {
+          boardsStore.setIssueDetail(issue);
+          boardsStore.setListDetail(this.list);
+        })
+        .catch(() => {
+          this.list.removeIssue(issue);
+
+          // Show error message
+          this.error = true;
+        });
+    },
+    cancel() {
+      this.title = '';
+      eventHub.$emit(`toggle-issue-form-${this.list.id}`);
+    },
+    setSelectedProject(selectedProject) {
+      this.selectedProject = selectedProject;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="board-new-issue-form">
+    <div class="board-card position-relative p-3 rounded">
+      <form @submit="submit($event)">
+        <div v-if="error" class="flash-container">
+          <div class="flash-alert">{{ __('An error occurred. Please try again.') }}</div>
+        </div>
+        <label :for="list.id + '-title'" class="label-bold">{{ __('Title') }}</label>
+        <input
+          :id="list.id + '-title'"
+          ref="input"
+          v-model="title"
+          class="form-control"
+          type="text"
+          name="issue_title"
+          autocomplete="off"
+        />
+        <project-select v-if="groupId" :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="success"
+            category="primary"
+            type="submit"
+            >{{ __('Submit issue') }}</gl-button
+          >
+          <gl-button
+            ref="cancelButton"
+            class="float-right"
+            type="button"
+            variant="default"
+            @click="cancel"
+            >{{ __('Cancel') }}</gl-button
+          >
+        </div>
+      </form>
+    </div>
+  </div>
+</template>