diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-23 15:07:27 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-23 15:07:27 +0300 |
commit | 3e68d3848770b492d314f8e2967c37f7fdd5d143 (patch) | |
tree | 01bd69a759c55ddf4ea1e5549a253cb0fd564854 /app/assets/javascripts/work_items | |
parent | 52192e0f19ca790dc9f44bc45730434100f83d90 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/work_items')
10 files changed, 147 insertions, 117 deletions
diff --git a/app/assets/javascripts/work_items/components/item_title.vue b/app/assets/javascripts/work_items/components/item_title.vue index 79840cc4f0f..92025c363e5 100644 --- a/app/assets/javascripts/work_items/components/item_title.vue +++ b/app/assets/javascripts/work_items/components/item_title.vue @@ -2,10 +2,7 @@ import { escape } from 'lodash'; import { __ } from '~/locale'; -import { WI_TITLE_TRACK_LABEL } from '../constants'; - export default { - WI_TITLE_TRACK_LABEL, props: { initialTitle: { type: String, @@ -50,7 +47,6 @@ export default { <h2 class="gl-font-weight-normal gl-sm-font-weight-bold gl-my-5 gl-display-inline-block" :class="{ 'gl-cursor-not-allowed': disabled }" - data-testid="title" aria-labelledby="item-title" > <span @@ -59,7 +55,6 @@ export default { role="textbox" :aria-label="__('Title')" :data-placeholder="placeholder" - :data-track-label="$options.WI_TITLE_TRACK_LABEL" :contenteditable="!disabled" class="gl-pseudo-placeholder" @blur="handleBlur" 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 index d5687d26499..4d804ad3918 100644 --- a/app/assets/javascripts/work_items/components/work_item_detail_modal.vue +++ b/app/assets/javascripts/work_items/components/work_item_detail_modal.vue @@ -1,14 +1,15 @@ <script> -import { GlModal, GlLoadingIcon } from '@gitlab/ui'; -import { s__ } from '~/locale'; +import { GlAlert, GlModal } from '@gitlab/ui'; +import { i18n } from '../constants'; import workItemQuery from '../graphql/work_item.query.graphql'; -import ItemTitle from './item_title.vue'; +import WorkItemTitle from './work_item_title.vue'; export default { + i18n, components: { + GlAlert, GlModal, - GlLoadingIcon, - ItemTitle, + WorkItemTitle, }, props: { visible: { @@ -23,6 +24,7 @@ export default { }, data() { return { + error: undefined, workItem: {}, }; }, @@ -34,23 +36,17 @@ export default { 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.'), - ); + this.error = this.$options.i18n.fetchError; }, }, }, computed: { - workItemTitle() { - return this.workItem?.title; + workItemType() { + return this.workItem.workItemType?.name; }, }, }; @@ -58,7 +54,16 @@ export default { <template> <gl-modal hide-footer modal-id="work-item-detail-modal" :visible="visible" @hide="$emit('close')"> - <gl-loading-icon v-if="$apollo.queries.workItem.loading" size="md" /> - <item-title v-else class="gl-m-0!" :initial-title="workItemTitle" /> + <gl-alert v-if="error" variant="danger" @dismiss="error = false"> + {{ error }} + </gl-alert> + + <work-item-title + :loading="$apollo.queries.workItem.loading" + :work-item-id="workItem.id" + :work-item-title="workItem.title" + :work-item-type="workItemType" + @error="error = $event" + /> </gl-modal> </template> diff --git a/app/assets/javascripts/work_items/components/work_item_title.vue b/app/assets/javascripts/work_items/components/work_item_title.vue new file mode 100644 index 00000000000..47927d46672 --- /dev/null +++ b/app/assets/javascripts/work_items/components/work_item_title.vue @@ -0,0 +1,73 @@ +<script> +import { GlLoadingIcon } from '@gitlab/ui'; +import Tracking from '~/tracking'; +import { i18n } from '../constants'; +import updateWorkItemMutation from '../graphql/update_work_item.mutation.graphql'; +import ItemTitle from './item_title.vue'; + +export default { + components: { + GlLoadingIcon, + ItemTitle, + }, + mixins: [Tracking.mixin()], + props: { + loading: { + type: Boolean, + required: false, + default: false, + }, + workItemId: { + type: String, + required: false, + default: '', + }, + workItemTitle: { + type: String, + required: false, + default: '', + }, + workItemType: { + type: String, + required: false, + default: '', + }, + }, + computed: { + tracking() { + return { + category: 'workItems:show', + label: 'item_title', + property: `type_${this.workItemType}`, + }; + }, + }, + methods: { + async updateWorkItem(updatedTitle) { + if (updatedTitle === this.workItemTitle) { + return; + } + + try { + await this.$apollo.mutate({ + mutation: updateWorkItemMutation, + variables: { + input: { + id: this.workItemId, + title: updatedTitle, + }, + }, + }); + this.track('updated_title'); + } catch { + this.$emit('error', i18n.updateError); + } + }, + }, +}; +</script> + +<template> + <gl-loading-icon v-if="loading" class="gl-mt-3" size="md" /> + <item-title v-else :initial-title="workItemTitle" @title-changed="updateWorkItem" /> +</template> diff --git a/app/assets/javascripts/work_items/constants.js b/app/assets/javascripts/work_items/constants.js index 995c02a2c5b..22f24ad8af6 100644 --- a/app/assets/javascripts/work_items/constants.js +++ b/app/assets/javascripts/work_items/constants.js @@ -1,5 +1,10 @@ +import { s__ } from '~/locale'; + +export const i18n = { + fetchError: s__('WorkItem|Something went wrong when fetching the work item. Please try again.'), + updateError: s__('WorkItem|Something went wrong while updating the work item. Please try again.'), +}; + export const widgetTypes = { title: 'TITLE', }; - -export const WI_TITLE_TRACK_LABEL = 'item_title'; 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 9312d1c582b..7f9aaf43068 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,18 +1,9 @@ -#import './widget.fragment.graphql' +#import "./work_item.fragment.graphql" mutation createWorkItem($input: WorkItemCreateInput!) { workItemCreate(input: $input) { workItem { - id - title - workItemType { - id - } - widgets @client { - nodes { - ...WidgetBase - } - } + ...WorkItem } } } diff --git a/app/assets/javascripts/work_items/graphql/provider.js b/app/assets/javascripts/work_items/graphql/provider.js index 28328a840cf..c15382874d8 100644 --- a/app/assets/javascripts/work_items/graphql/provider.js +++ b/app/assets/javascripts/work_items/graphql/provider.js @@ -23,12 +23,16 @@ export function createApolloProvider() { id: 'gid://gitlab/WorkItem/1', }, data: { - localWorkItem: { - __typename: 'LocalWorkItem', + workItem: { + __typename: 'WorkItem', id: 'gid://gitlab/WorkItem/1', - type: 'FEATURE', // eslint-disable-next-line @gitlab/require-i18n-strings title: 'Test Work Item', + workItemType: { + __typename: 'WorkItemType', + id: 'work-item-type-1', + name: 'Type', // eslint-disable-line @gitlab/require-i18n-strings + }, widgets: { __typename: 'LocalWorkItemWidgetConnection', nodes: [], 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 efb1ed8d6df..c0b6e856411 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,18 +1,9 @@ -#import './widget.fragment.graphql' +#import "./work_item.fragment.graphql" mutation workItemUpdate($input: WorkItemUpdateInput!) { workItemUpdate(input: $input) { workItem { - id - title - workItemType { - id - } - widgets @client { - nodes { - ...WidgetBase - } - } + ...WorkItem } } } diff --git a/app/assets/javascripts/work_items/graphql/work_item.fragment.graphql b/app/assets/javascripts/work_items/graphql/work_item.fragment.graphql new file mode 100644 index 00000000000..2707d6bb790 --- /dev/null +++ b/app/assets/javascripts/work_items/graphql/work_item.fragment.graphql @@ -0,0 +1,8 @@ +fragment WorkItem on WorkItem { + id + title + workItemType { + id + name + } +} 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 b32cb4f28fb..1d3dae0649d 100644 --- a/app/assets/javascripts/work_items/graphql/work_item.query.graphql +++ b/app/assets/javascripts/work_items/graphql/work_item.query.graphql @@ -1,16 +1,7 @@ -#import './widget.fragment.graphql' +#import "./work_item.fragment.graphql" -query WorkItem($id: ID!) { +query workItem($id: ID!) { workItem(id: $id) { - id - title - workItemType { - id - } - widgets @client { - nodes { - ...WidgetBase - } - } + ...WorkItem } } 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 32b6fc231a8..f29d2d8e59a 100644 --- a/app/assets/javascripts/work_items/pages/work_item_root.vue +++ b/app/assets/javascripts/work_items/pages/work_item_root.vue @@ -1,23 +1,17 @@ <script> -import { GlAlert, GlLoadingIcon } from '@gitlab/ui'; +import { GlAlert } from '@gitlab/ui'; +import { TYPE_WORK_ITEM } from '~/graphql_shared/constants'; import { convertToGraphQLId } from '~/graphql_shared/utils'; -import Tracking from '~/tracking'; +import { i18n } from '../constants'; import workItemQuery from '../graphql/work_item.query.graphql'; -import updateWorkItemMutation from '../graphql/update_work_item.mutation.graphql'; -import { WI_TITLE_TRACK_LABEL } from '../constants'; - -import ItemTitle from '../components/item_title.vue'; - -const trackingMixin = Tracking.mixin(); +import WorkItemTitle from '../components/work_item_title.vue'; export default { - titleUpdatedEvent: 'updated_title', + i18n, components: { - ItemTitle, GlAlert, - GlLoadingIcon, + WorkItemTitle, }, - mixins: [trackingMixin], props: { id: { type: String, @@ -27,7 +21,7 @@ export default { data() { return { workItem: {}, - error: false, + error: undefined, }; }, apollo: { @@ -38,37 +32,17 @@ export default { id: this.gid, }; }, + error() { + this.error = this.$options.i18n.fetchError; + }, }, }, computed: { - tracking() { - return { - category: 'workItems:show', - action: 'updated_title', - label: WI_TITLE_TRACK_LABEL, - property: '[type_work_item]', - }; - }, gid() { - return convertToGraphQLId('WorkItem', this.id); + return convertToGraphQLId(TYPE_WORK_ITEM, this.id); }, - }, - methods: { - async updateWorkItem(updatedTitle) { - try { - await this.$apollo.mutate({ - mutation: updateWorkItemMutation, - variables: { - input: { - id: this.gid, - title: updatedTitle, - }, - }, - }); - this.track(); - } catch { - this.error = true; - } + workItemType() { + return this.workItem.workItemType?.name; }, }, }; @@ -76,23 +50,16 @@ export default { <template> <section> - <gl-alert v-if="error" variant="danger" @dismiss="error = false">{{ - __('Something went wrong while updating work item. Please try again') - }}</gl-alert> - <!-- Title widget placeholder --> - <div> - <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> + <gl-alert v-if="error" variant="danger" @dismiss="error = false"> + {{ error }} + </gl-alert> + + <work-item-title + :loading="$apollo.queries.workItem.loading" + :work-item-id="workItem.id" + :work-item-title="workItem.title" + :work-item-type="workItemType" + @error="error = $event" + /> </section> </template> |