diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-11-23 18:11:19 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-11-23 18:11:19 +0300 |
commit | 0e6ce73070a9816db513ba360620699232c517d7 (patch) | |
tree | 1821d40de1b43624cde5d09e9874dc38978a65e1 /app/assets/javascripts/work_items | |
parent | ead6ab29b07201cd30488aa21b88d3e9c270046f (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/work_items')
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, }, |