Add latest changes from gitlab-org/gitlab@master

6 files changed, 149 insertions, 9 deletions

diff --git a/app/assets/javascripts/work_items/graphql/create_work_item.mutation.graphql b/app/assets/javascripts/work_items/graphql/create_work_item.mutation.graphql
new file mode 100644
index 00000000000..eaf07da8594
--- /dev/null
+++ b/app/assets/javascripts/work_items/graphql/create_work_item.mutation.graphql
@@ -0,0 +1,18 @@
+#import './widget.fragment.graphql'
+
+mutation createWorkItem($input: CreateWorkItemInput) {
+  createWorkItem(input: $input) @client {
+    workItem {
+      id
+      type
+      widgets {
+        nodes {
+          ...WidgetBase
+          ... on TitleWidget {
+            contentText
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/work_items/graphql/provider.js b/app/assets/javascripts/work_items/graphql/provider.js
index 083735336ce..0add894dc26 100644
--- a/app/assets/javascripts/work_items/graphql/provider.js
+++ b/app/assets/javascripts/work_items/graphql/provider.js
@@ -4,6 +4,7 @@ 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({
@@ -13,15 +14,12 @@ const fragmentMatcher = new IntrospectionFragmentMatcher({
 export function createApolloProvider() {
   Vue.use(VueApollo);
 
-  const defaultClient = createDefaultClient(
-    {},
-    {
-      cacheConfig: {
-        fragmentMatcher,
-      },
-      typeDefs,
+  const defaultClient = createDefaultClient(resolvers, {
+    cacheConfig: {
+      fragmentMatcher,
     },
-  );
+    typeDefs,
+  });
 
   defaultClient.cache.writeQuery({
     query: workItemQuery,
diff --git a/app/assets/javascripts/work_items/graphql/resolvers.js b/app/assets/javascripts/work_items/graphql/resolvers.js
index e69de29bb2d..bab0147f4b8 100644
--- a/app/assets/javascripts/work_items/graphql/resolvers.js
+++ b/app/assets/javascripts/work_items/graphql/resolvers.js
@@ -0,0 +1,33 @@
+import { uuids } from '~/lib/utils/uuids';
+import workItemQuery from './work_item.query.graphql';
+
+export const resolvers = {
+  Mutation: {
+    createWorkItem(_, { input }, { cache }) {
+      const id = uuids()[0];
+      const workItem = {
+        __typename: 'WorkItem',
+        type: 'FEATURE',
+        id,
+        widgets: {
+          __typename: 'WorkItemWidgetConnection',
+          nodes: [
+            {
+              __typename: 'TitleWidget',
+              type: 'TITLE',
+              enabled: true,
+              contentText: input.title,
+            },
+          ],
+        },
+      };
+
+      cache.writeQuery({ query: workItemQuery, variables: { id }, data: { workItem } });
+
+      return {
+        __typename: 'CreateWorkItemPayload',
+        workItem,
+      };
+    },
+  },
+};
diff --git a/app/assets/javascripts/work_items/graphql/typedefs.graphql b/app/assets/javascripts/work_items/graphql/typedefs.graphql
index 4a6e4aeed60..2a9cd52c18e 100644
--- a/app/assets/javascripts/work_items/graphql/typedefs.graphql
+++ b/app/assets/javascripts/work_items/graphql/typedefs.graphql
@@ -33,6 +33,18 @@ type WorkItem {
   widgets: [WorkItemWidgetConnection]
 }
 
+type CreateWorkItemInput {
+  title: String!
+}
+
+type CreateWorkItemPayload {
+  workItem: WorkItem!
+}
+
 extend type Query {
   workItem(id: ID!): WorkItem!
 }
+
+extend type Mutation {
+  createWorkItem(input: CreateWorkItemInput!): CreateWorkItemPayload!
+}
diff --git a/app/assets/javascripts/work_items/pages/create_work_item.vue b/app/assets/javascripts/work_items/pages/create_work_item.vue
new file mode 100644
index 00000000000..190e50f903c
--- /dev/null
+++ b/app/assets/javascripts/work_items/pages/create_work_item.vue
@@ -0,0 +1,74 @@
+<script>
+import { GlButton, GlAlert } from '@gitlab/ui';
+import createWorkItemMutation from '../graphql/create_work_item.mutation.graphql';
+
+export default {
+  components: {
+    GlButton,
+    GlAlert,
+  },
+  data() {
+    return {
+      title: '',
+      error: false,
+    };
+  },
+  methods: {
+    async createWorkItem() {
+      try {
+        const response = await this.$apollo.mutate({
+          mutation: createWorkItemMutation,
+          variables: {
+            input: {
+              title: this.title,
+            },
+          },
+        });
+
+        const {
+          data: {
+            createWorkItem: {
+              workItem: { id },
+            },
+          },
+        } = response;
+        this.$router.push({ name: 'workItem', params: { id } });
+      } catch {
+        this.error = true;
+      }
+    },
+  },
+};
+</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>
+    <label for="title" class="gl-sr-only">{{ __('Title') }}</label>
+    <input
+      id="title"
+      v-model.trim="title"
+      type="text"
+      class="gl-font-size-h-display gl-font-weight-bold gl-my-5 gl-border-none gl-w-full gl-pl-2"
+      data-testid="title-input"
+      :placeholder="__('Add a title…')"
+    />
+    <div class="gl-bg-gray-10 gl-py-5 gl-px-6">
+      <gl-button
+        variant="confirm"
+        :disabled="title.length === 0"
+        class="gl-mr-3"
+        data-testid="create-button"
+        type="submit"
+        @click="createWorkItem"
+      >
+        {{ __('Create') }}
+      </gl-button>
+      <gl-button data-testid="cancel-button" @click="$router.go(-1)">
+        {{ __('Cancel') }}
+      </gl-button>
+    </div>
+  </form>
+</template>
diff --git a/app/assets/javascripts/work_items/router/routes.js b/app/assets/javascripts/work_items/router/routes.js
index a3cf44ad4ca..95772bbd026 100644
--- a/app/assets/javascripts/work_items/router/routes.js
+++ b/app/assets/javascripts/work_items/router/routes.js
@@ -1,7 +1,12 @@
 export const routes = [
   {
+    path: '/new',
+    name: 'createWorkItem',
+    component: () => import('../pages/create_work_item.vue'),
+  },
+  {
     path: '/:id',
-    name: 'work_item',
+    name: 'workItem',
     component: () => import('../pages/work_item_root.vue'),
     props: true,
   },