diff options
Diffstat (limited to 'app/assets/javascripts/work_items/components/work_item_detail.vue')
| -rw-r--r-- | app/assets/javascripts/work_items/components/work_item_detail.vue | 138 |
1 files changed, 117 insertions, 21 deletions
diff --git a/app/assets/javascripts/work_items/components/work_item_detail.vue b/app/assets/javascripts/work_items/components/work_item_detail.vue index 5272df2d53f..ad90fe88947 100644 --- a/app/assets/javascripts/work_items/components/work_item_detail.vue +++ b/app/assets/javascripts/work_items/components/work_item_detail.vue @@ -1,11 +1,15 @@ <script> -import { GlAlert, GlSkeletonLoader } from '@gitlab/ui'; +import { GlAlert, GlSkeletonLoader, GlIcon, GlButton } from '@gitlab/ui'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; import { i18n, - WIDGET_TYPE_ASSIGNEE, + WIDGET_TYPE_ASSIGNEES, + WIDGET_TYPE_LABELS, WIDGET_TYPE_DESCRIPTION, WIDGET_TYPE_WEIGHT, + WIDGET_TYPE_HIERARCHY, + WORK_ITEM_VIEWED_STORAGE_KEY, } from '../constants'; import workItemQuery from '../graphql/work_item.query.graphql'; import workItemTitleSubscription from '../graphql/work_item_title.subscription.graphql'; @@ -14,22 +18,34 @@ import WorkItemState from './work_item_state.vue'; import WorkItemTitle from './work_item_title.vue'; import WorkItemDescription from './work_item_description.vue'; import WorkItemAssignees from './work_item_assignees.vue'; +import WorkItemLabels from './work_item_labels.vue'; import WorkItemWeight from './work_item_weight.vue'; +import WorkItemInformation from './work_item_information.vue'; export default { i18n, components: { GlAlert, + GlButton, GlSkeletonLoader, + GlIcon, WorkItemAssignees, WorkItemActions, WorkItemDescription, + WorkItemLabels, WorkItemTitle, WorkItemState, WorkItemWeight, + WorkItemInformation, + LocalStorageSync, }, mixins: [glFeatureFlagMixin()], props: { + isModal: { + type: Boolean, + required: false, + default: false, + }, workItemId: { type: String, required: false, @@ -45,6 +61,7 @@ export default { return { error: undefined, workItem: {}, + showInfoBanner: true, }; }, apollo: { @@ -91,17 +108,40 @@ export default { return this.workItem?.widgets?.find((widget) => widget.type === WIDGET_TYPE_DESCRIPTION); }, workItemAssignees() { - return this.workItem?.mockWidgets?.find((widget) => widget.type === WIDGET_TYPE_ASSIGNEE); + return this.workItem?.widgets?.find((widget) => widget.type === WIDGET_TYPE_ASSIGNEES); + }, + workItemLabels() { + return this.workItem?.mockWidgets?.find((widget) => widget.type === WIDGET_TYPE_LABELS); }, workItemWeight() { return this.workItem?.mockWidgets?.find((widget) => widget.type === WIDGET_TYPE_WEIGHT); }, + workItemHierarchy() { + return this.workItem?.widgets?.find((widget) => widget.type === WIDGET_TYPE_HIERARCHY); + }, + parentWorkItem() { + return this.workItemHierarchy?.parent; + }, + parentUrl() { + return `../../issues/${this.parentWorkItem?.iid}`; + }, + }, + beforeDestroy() { + /** make sure that if the user has not even dismissed the alert , + * should no be able to see the information next time and update the local storage * */ + this.dismissBanner(); }, + methods: { + dismissBanner() { + this.showInfoBanner = false; + }, + }, + WORK_ITEM_VIEWED_STORAGE_KEY, }; </script> <template> - <section> + <section class="gl-pt-5"> <gl-alert v-if="error" variant="danger" @dismiss="error = undefined"> {{ error }} </gl-alert> @@ -113,39 +153,95 @@ export default { </gl-skeleton-loader> </div> <template v-else> - <div class="gl-display-flex gl-align-items-start"> - <work-item-title - :work-item-id="workItem.id" - :work-item-title="workItem.title" - :work-item-type="workItemType" - :work-item-parent-id="workItemParentId" - class="gl-mr-5" - @error="error = $event" - /> + <div class="gl-display-flex gl-align-items-center"> + <ul + v-if="parentWorkItem" + class="list-unstyled gl-display-flex gl-mr-auto" + data-testid="work-item-parent" + > + <li class="gl-ml-n4"> + <gl-button icon="issues" category="tertiary" :href="parentUrl">{{ + parentWorkItem.title + }}</gl-button> + <gl-icon name="chevron-right" :size="16" /> + </li> + <li class="gl-px-4 gl-py-3 gl-line-height-0"> + <gl-icon name="task-done" /> + {{ workItemType }} + </li> + </ul> + <span + v-else + class="gl-font-weight-bold gl-text-secondary gl-mr-auto" + data-testid="work-item-type" + >{{ workItemType }}</span + > <work-item-actions :work-item-id="workItem.id" :can-delete="canDelete" - class="gl-ml-auto gl-mt-6" @deleteWorkItem="$emit('deleteWorkItem')" @error="error = $event" /> + <gl-button + v-if="isModal" + category="tertiary" + data-testid="work-item-close" + icon="close" + :aria-label="__('Close')" + @click="$emit('close')" + /> </div> - <template v-if="workItemsMvc2Enabled"> - <work-item-assignees - v-if="workItemAssignees" - :work-item-id="workItem.id" - :assignees="workItemAssignees.nodes" + <local-storage-sync + v-model="showInfoBanner" + :storage-key="$options.WORK_ITEM_VIEWED_STORAGE_KEY" + > + <work-item-information + v-if="showInfoBanner" + :show-info-banner="showInfoBanner" + @work-item-banner-dismissed="dismissBanner" /> - <work-item-weight v-if="workItemWeight" :weight="workItemWeight.weight" /> - </template> + </local-storage-sync> + <work-item-title + :work-item-id="workItem.id" + :work-item-title="workItem.title" + :work-item-type="workItemType" + :work-item-parent-id="workItemParentId" + @error="error = $event" + /> <work-item-state :work-item="workItem" :work-item-parent-id="workItemParentId" @error="error = $event" /> + <template v-if="workItemsMvc2Enabled"> + <work-item-assignees + v-if="workItemAssignees" + :can-update="canUpdate" + :work-item-id="workItem.id" + :assignees="workItemAssignees.assignees.nodes" + :allows-multiple-assignees="workItemAssignees.allowsMultipleAssignees" + :work-item-type="workItemType" + @error="error = $event" + /> + <work-item-labels + v-if="workItemLabels" + :work-item-id="workItem.id" + :can-update="canUpdate" + @error="error = $event" + /> + <work-item-weight + v-if="workItemWeight" + class="gl-mb-5" + :can-update="canUpdate" + :weight="workItemWeight.weight" + :work-item-id="workItem.id" + :work-item-type="workItemType" + /> + </template> <work-item-description v-if="hasDescriptionWidget" :work-item-id="workItem.id" + class="gl-pt-5" @error="error = $event" /> </template> |