Add latest changes from gitlab-org/gitlab@14-8-stable-eev14.8.0-rc42

5 files changed, 118 insertions, 23 deletions

diff --git a/app/assets/javascripts/work_items/graphql/fragmentTypes.json b/app/assets/javascripts/work_items/graphql/fragmentTypes.json
deleted file mode 100644
index 3b837e84ee9..00000000000
--- a/app/assets/javascripts/work_items/graphql/fragmentTypes.json
+++ /dev/null
@@ -1 +0,0 @@
-{"__schema":{"types":[{"kind":"INTERFACE","name":"LocalWorkItemWidget","possibleTypes":[{"name":"LocalTitleWidget"}]}]}}
diff --git a/app/assets/javascripts/work_items/graphql/project_work_item_types.query.graphql b/app/assets/javascripts/work_items/graphql/project_work_item_types.query.graphql
new file mode 100644
index 00000000000..e7e3ce8c1ae
--- /dev/null
+++ b/app/assets/javascripts/work_items/graphql/project_work_item_types.query.graphql
@@ -0,0 +1,11 @@
+query projectWorkItemTypes($fullPath: ID!) {
+  workspace: project(fullPath: $fullPath) {
+    id
+    workItemTypes {
+      nodes {
+        id
+        name
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/work_items/graphql/provider.js b/app/assets/javascripts/work_items/graphql/provider.js
index fb536a425c0..676fffb12d8 100644
--- a/app/assets/javascripts/work_items/graphql/provider.js
+++ b/app/assets/javascripts/work_items/graphql/provider.js
@@ -1,23 +1,14 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-import { IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
 import createDefaultClient from '~/lib/graphql';
 import workItemQuery from './work_item.query.graphql';
-import introspectionQueryResultData from './fragmentTypes.json';
 import { resolvers } from './resolvers';
 import typeDefs from './typedefs.graphql';
 
-const fragmentMatcher = new IntrospectionFragmentMatcher({
-  introspectionQueryResultData,
-});
-
 export function createApolloProvider() {
   Vue.use(VueApollo);
 
   const defaultClient = createDefaultClient(resolvers, {
-    cacheConfig: {
-      fragmentMatcher,
-    },
     typeDefs,
   });
 
diff --git a/app/assets/javascripts/work_items/index.js b/app/assets/javascripts/work_items/index.js
index 7cc8a23b7b1..10fae9b9cc0 100644
--- a/app/assets/javascripts/work_items/index.js
+++ b/app/assets/javascripts/work_items/index.js
@@ -5,11 +5,15 @@ import { createApolloProvider } from './graphql/provider';
 
 export const initWorkItemsRoot = () => {
   const el = document.querySelector('#js-work-items');
+  const { fullPath } = el.dataset;
 
   return new Vue({
     el,
     router: createRouter(el.dataset.fullPath),
     apolloProvider: createApolloProvider(),
+    provide: {
+      fullPath,
+    },
     render(createElement) {
       return createElement(App);
     },
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>