diff options
Diffstat (limited to 'app/assets/javascripts/work_items')
9 files changed, 154 insertions, 92 deletions
diff --git a/app/assets/javascripts/work_items/components/work_item_detail_modal.vue b/app/assets/javascripts/work_items/components/work_item_detail_modal.vue new file mode 100644 index 00000000000..942677bb937 --- /dev/null +++ b/app/assets/javascripts/work_items/components/work_item_detail_modal.vue @@ -0,0 +1,62 @@ +<script> +import { GlModal } from '@gitlab/ui'; +import { s__ } from '~/locale'; +import workItemQuery from '../graphql/work_item.query.graphql'; +import ItemTitle from './item_title.vue'; + +export default { + components: { + GlModal, + ItemTitle, + }, + props: { + visible: { + type: Boolean, + required: true, + }, + workItemId: { + type: String, + required: false, + default: null, + }, + }, + data() { + return { + workItem: {}, + }; + }, + apollo: { + workItem: { + query: workItemQuery, + variables() { + return { + id: this.workItemId, + }; + }, + update(data) { + return data.workItem; + }, + skip() { + return !this.workItemId; + }, + error() { + this.$emit( + 'error', + s__('WorkItem|Something went wrong when fetching the work item. Please try again.'), + ); + }, + }, + }, + computed: { + workItemTitle() { + return this.workItem?.title; + }, + }, +}; +</script> + +<template> + <gl-modal hide-footer modal-id="work-item-detail-modal" :visible="visible" @hide="$emit('close')"> + <item-title class="gl-m-0!" :initial-title="workItemTitle" /> + </gl-modal> +</template> 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 index 2f302dae7d7..9312d1c582b 100644 --- a/app/assets/javascripts/work_items/graphql/create_work_item.mutation.graphql +++ b/app/assets/javascripts/work_items/graphql/create_work_item.mutation.graphql @@ -1,16 +1,16 @@ #import './widget.fragment.graphql' -mutation createWorkItem($input: LocalCreateWorkItemInput) { - localCreateWorkItem(input: $input) @client { +mutation createWorkItem($input: WorkItemCreateInput!) { + workItemCreate(input: $input) { workItem { id - type - widgets { + title + workItemType { + id + } + widgets @client { nodes { ...WidgetBase - ... on LocalTitleWidget { - contentText - } } } } diff --git a/app/assets/javascripts/work_items/graphql/provider.js b/app/assets/javascripts/work_items/graphql/provider.js index 676fffb12d8..28328a840cf 100644 --- a/app/assets/javascripts/work_items/graphql/provider.js +++ b/app/assets/javascripts/work_items/graphql/provider.js @@ -10,29 +10,28 @@ export function createApolloProvider() { const defaultClient = createDefaultClient(resolvers, { typeDefs, + cacheConfig: { + possibleTypes: { + LocalWorkItemWidget: ['LocalTitleWidget'], + }, + }, }); defaultClient.cache.writeQuery({ query: workItemQuery, variables: { - id: '1', + id: 'gid://gitlab/WorkItem/1', }, data: { - workItem: { + localWorkItem: { __typename: 'LocalWorkItem', - id: '1', + id: 'gid://gitlab/WorkItem/1', type: 'FEATURE', + // eslint-disable-next-line @gitlab/require-i18n-strings + title: 'Test Work Item', widgets: { __typename: 'LocalWorkItemWidgetConnection', - nodes: [ - { - __typename: 'LocalTitleWidget', - type: 'TITLE', - enabled: true, - // eslint-disable-next-line @gitlab/require-i18n-strings - contentText: 'Test Work Item Title', - }, - ], + nodes: [], }, }, }, diff --git a/app/assets/javascripts/work_items/graphql/resolvers.js b/app/assets/javascripts/work_items/graphql/resolvers.js index 63d5234d083..fb74e27f840 100644 --- a/app/assets/javascripts/work_items/graphql/resolvers.js +++ b/app/assets/javascripts/work_items/graphql/resolvers.js @@ -1,53 +1,24 @@ -import { uuids } from '~/lib/utils/uuids'; import workItemQuery from './work_item.query.graphql'; export const resolvers = { Mutation: { - localCreateWorkItem(_, { input }, { cache }) { - const id = uuids()[0]; - const workItem = { - __typename: 'LocalWorkItem', - type: 'FEATURE', - id, - widgets: { - __typename: 'LocalWorkItemWidgetConnection', - nodes: [ - { - __typename: 'LocalTitleWidget', - type: 'TITLE', - enabled: true, - contentText: input.title, - }, - ], - }, - }; - - cache.writeQuery({ query: workItemQuery, variables: { id }, data: { workItem } }); - - return { - __typename: 'LocalCreateWorkItemPayload', - workItem, - }; - }, - localUpdateWorkItem(_, { input }, { cache }) { - const workItemTitle = { - __typename: 'LocalTitleWidget', - type: 'TITLE', - enabled: true, - contentText: input.title, - }; const workItem = { __typename: 'LocalWorkItem', type: 'FEATURE', id: input.id, + title: input.title, widgets: { __typename: 'LocalWorkItemWidgetConnection', - nodes: [workItemTitle], + nodes: [], }, }; - cache.writeQuery({ query: workItemQuery, variables: { id: input.id }, data: { workItem } }); + cache.writeQuery({ + query: workItemQuery, + variables: { id: input.id }, + data: { localWorkItem: workItem }, + }); return { __typename: 'LocalUpdateWorkItemPayload', diff --git a/app/assets/javascripts/work_items/graphql/typedefs.graphql b/app/assets/javascripts/work_items/graphql/typedefs.graphql index 177eea00322..9b4811203f5 100644 --- a/app/assets/javascripts/work_items/graphql/typedefs.graphql +++ b/app/assets/javascripts/work_items/graphql/typedefs.graphql @@ -22,14 +22,10 @@ type LocalWorkItemWidgetConnection { pageInfo: PageInfo! } -type LocalTitleWidget implements LocalWorkItemWidget { - type: LocalWidgetType! - contentText: String! -} - type LocalWorkItem { id: ID! type: LocalWorkItemType! + title: String! widgets: [LocalWorkItemWidgetConnection] } @@ -51,7 +47,7 @@ type LocalUpdateWorkItemPayload { } extend type Query { - workItem(id: ID!): LocalWorkItem! + localWorkItem(id: ID!): LocalWorkItem! } extend type Mutation { diff --git a/app/assets/javascripts/work_items/graphql/update_work_item.mutation.graphql b/app/assets/javascripts/work_items/graphql/update_work_item.mutation.graphql index f0563f099b2..efb1ed8d6df 100644 --- a/app/assets/javascripts/work_items/graphql/update_work_item.mutation.graphql +++ b/app/assets/javascripts/work_items/graphql/update_work_item.mutation.graphql @@ -1,16 +1,16 @@ #import './widget.fragment.graphql' -mutation updateWorkItem($input: LocalUpdateWorkItemInput) { - localUpdateWorkItem(input: $input) @client { +mutation workItemUpdate($input: WorkItemUpdateInput!) { + workItemUpdate(input: $input) { workItem { id - type - widgets { + title + workItemType { + id + } + widgets @client { nodes { ...WidgetBase - ... on LocalTitleWidget { - contentText - } } } } diff --git a/app/assets/javascripts/work_items/graphql/work_item.query.graphql b/app/assets/javascripts/work_items/graphql/work_item.query.graphql index 9f173f7c302..b32cb4f28fb 100644 --- a/app/assets/javascripts/work_items/graphql/work_item.query.graphql +++ b/app/assets/javascripts/work_items/graphql/work_item.query.graphql @@ -1,15 +1,15 @@ #import './widget.fragment.graphql' query WorkItem($id: ID!) { - workItem(id: $id) @client { + workItem(id: $id) { id - type - widgets { + title + workItemType { + id + } + widgets @client { nodes { ...WidgetBase - ... on LocalTitleWidget { - contentText - } } } } 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 6c3bcf8f6a8..cc90cedb110 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, GlLoadingIcon, GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { s__ } from '~/locale'; +import { getIdFromGraphQLId } from '~/graphql_shared/utils'; +import workItemQuery from '../graphql/work_item.query.graphql'; import createWorkItemMutation from '../graphql/create_work_item.mutation.graphql'; import projectWorkItemTypesQuery from '../graphql/project_work_item_types.query.graphql'; @@ -67,21 +69,45 @@ export default { variables: { input: { title: this.title, + projectPath: this.fullPath, + workItemTypeId: this.selectedWorkItemType?.id, }, }, + update(store, { data: { workItemCreate } }) { + const { id, title, workItemType } = workItemCreate.workItem; + + store.writeQuery({ + query: workItemQuery, + variables: { + id, + }, + data: { + workItem: { + __typename: 'WorkItem', + id, + title, + workItemType, + widgets: { + __typename: 'LocalWorkItemWidgetConnection', + nodes: [], + }, + }, + }, + }); + }, }); const { data: { - localCreateWorkItem: { - workItem: { id }, + workItemCreate: { + workItem: { id, type }, }, }, } = response; if (!this.isModal) { - this.$router.push({ name: 'workItem', params: { id } }); + this.$router.push({ name: 'workItem', params: { id: `${getIdFromGraphQLId(id)}` } }); } else { - this.$emit('onCreate', this.title); + this.$emit('onCreate', { id, title: this.title, type }); } } catch { this.error = s__( diff --git a/app/assets/javascripts/work_items/pages/work_item_root.vue b/app/assets/javascripts/work_items/pages/work_item_root.vue index 4262e169655..32b6fc231a8 100644 --- a/app/assets/javascripts/work_items/pages/work_item_root.vue +++ b/app/assets/javascripts/work_items/pages/work_item_root.vue @@ -1,9 +1,10 @@ <script> -import { GlAlert } from '@gitlab/ui'; +import { GlAlert, GlLoadingIcon } from '@gitlab/ui'; +import { convertToGraphQLId } from '~/graphql_shared/utils'; import Tracking from '~/tracking'; import workItemQuery from '../graphql/work_item.query.graphql'; import updateWorkItemMutation from '../graphql/update_work_item.mutation.graphql'; -import { widgetTypes, WI_TITLE_TRACK_LABEL } from '../constants'; +import { WI_TITLE_TRACK_LABEL } from '../constants'; import ItemTitle from '../components/item_title.vue'; @@ -14,6 +15,7 @@ export default { components: { ItemTitle, GlAlert, + GlLoadingIcon, }, mixins: [trackingMixin], props: { @@ -24,7 +26,7 @@ export default { }, data() { return { - workItem: null, + workItem: {}, error: false, }; }, @@ -33,7 +35,7 @@ export default { query: workItemQuery, variables() { return { - id: this.id, + id: this.gid, }; }, }, @@ -47,19 +49,19 @@ export default { property: '[type_work_item]', }; }, - titleWidgetData() { - return this.workItem?.widgets?.nodes?.find((widget) => widget.type === widgetTypes.title); + gid() { + return convertToGraphQLId('WorkItem', this.id); }, }, methods: { - async updateWorkItem(title) { + async updateWorkItem(updatedTitle) { try { await this.$apollo.mutate({ mutation: updateWorkItemMutation, variables: { input: { - id: this.id, - title, + id: this.gid, + title: updatedTitle, }, }, }); @@ -79,12 +81,18 @@ export default { }}</gl-alert> <!-- Title widget placeholder --> <div> - <item-title - v-if="titleWidgetData" - :initial-title="titleWidgetData.contentText" - data-testid="title" - @title-changed="updateWorkItem" + <gl-loading-icon + v-if="$apollo.queries.workItem.loading" + size="md" + data-testid="loading-types" /> + <template v-else> + <item-title + :initial-title="workItem.title" + data-testid="title" + @title-changed="updateWorkItem" + /> + </template> </div> </section> </template> |