1 files changed, 103 insertions, 13 deletions

diff --git a/app/assets/javascripts/work_items/pages/create_work_item.vue b/app/assets/javascripts/work_items/pages/create_work_item.vue
index 12bad5606d4..6c3bcf8f6a8 100644
--- a/app/assets/javascripts/work_items/pages/create_work_item.vue
+++ b/app/assets/javascripts/work_items/pages/create_work_item.vue
@@ -1,6 +1,8 @@
 <script>
-import { GlButton, GlAlert } from '@gitlab/ui';
+import { GlButton, GlAlert, GlLoadingIcon, GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { s__ } from '~/locale';
 import createWorkItemMutation from '../graphql/create_work_item.mutation.graphql';
+import projectWorkItemTypesQuery from '../graphql/project_work_item_types.query.graphql';
 
 import ItemTitle from '../components/item_title.vue';
 
@@ -8,14 +10,55 @@ export default {
   components: {
     GlButton,
     GlAlert,
+    GlLoadingIcon,
+    GlDropdown,
+    GlDropdownItem,
     ItemTitle,
   },
+  inject: ['fullPath'],
+  props: {
+    isModal: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    initialTitle: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
   data() {
     return {
-      title: '',
-      error: false,
+      title: this.initialTitle,
+      error: null,
+      workItemTypes: [],
+      selectedWorkItemType: null,
     };
   },
+  apollo: {
+    workItemTypes: {
+      query: projectWorkItemTypesQuery,
+      variables() {
+        return {
+          fullPath: this.fullPath,
+        };
+      },
+      update(data) {
+        return data.workspace?.workItemTypes?.nodes;
+      },
+      error() {
+        this.error = s__(
+          'WorkItem|Something went wrong when fetching work item types. Please try again',
+        );
+      },
+    },
+  },
+  computed: {
+    dropdownButtonText() {
+      return this.selectedWorkItemType?.name || s__('WorkItem|Type');
+    },
+  },
   methods: {
     async createWorkItem() {
       try {
@@ -35,35 +78,82 @@ export default {
             },
           },
         } = response;
-        this.$router.push({ name: 'workItem', params: { id } });
+        if (!this.isModal) {
+          this.$router.push({ name: 'workItem', params: { id } });
+        } else {
+          this.$emit('onCreate', this.title);
+        }
       } catch {
-        this.error = true;
+        this.error = s__(
+          'WorkItem|Something went wrong when creating a work item. Please try again',
+        );
       }
     },
     handleTitleInput(title) {
       this.title = title;
     },
+    handleCancelClick() {
+      if (!this.isModal) {
+        this.$router.go(-1);
+        return;
+      }
+      this.$emit('closeModal');
+    },
+    selectWorkItemType(type) {
+      this.selectedWorkItemType = type;
+    },
   },
 };
 </script>
 
 <template>
   <form @submit.prevent="createWorkItem">
-    <gl-alert v-if="error" variant="danger" @dismiss="error = false">{{
-      __('Something went wrong when creating a work item. Please try again')
-    }}</gl-alert>
-    <item-title data-testid="title-input" @title-input="handleTitleInput" />
-    <div class="gl-bg-gray-10 gl-py-5 gl-px-6">
+    <gl-alert v-if="error" variant="danger" @dismiss="error = null">{{ error }}</gl-alert>
+    <div :class="{ 'gl-px-5': isModal }" data-testid="content">
+      <item-title
+        :initial-title="title"
+        data-testid="title-input"
+        @title-input="handleTitleInput"
+      />
+      <div>
+        <gl-dropdown :text="dropdownButtonText">
+          <gl-loading-icon
+            v-if="$apollo.queries.workItemTypes.loading"
+            size="md"
+            data-testid="loading-types"
+          />
+          <template v-else>
+            <gl-dropdown-item
+              v-for="type in workItemTypes"
+              :key="type.id"
+              @click="selectWorkItemType(type)"
+            >
+              {{ type.name }}
+            </gl-dropdown-item>
+          </template>
+        </gl-dropdown>
+      </div>
+    </div>
+    <div
+      class="gl-bg-gray-10 gl-py-5 gl-px-6 gl-mt-4"
+      :class="{ 'gl-display-flex gl-justify-content-end': isModal }"
+    >
       <gl-button
         variant="confirm"
         :disabled="title.length === 0"
-        class="gl-mr-3"
+        :class="{ 'gl-mr-3': !isModal }"
         data-testid="create-button"
         type="submit"
       >
-        {{ __('Create') }}
+        {{ s__('WorkItem|Create work item') }}
       </gl-button>
-      <gl-button type="button" data-testid="cancel-button" @click="$router.go(-1)">
+      <gl-button
+        type="button"
+        data-testid="cancel-button"
+        class="gl-order-n1"
+        :class="{ 'gl-mr-3': isModal }"
+        @click="handleCancelClick"
+      >
         {{ __('Cancel') }}
       </gl-button>
     </div>