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 | 447 |
1 files changed, 225 insertions, 222 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 1d612018990..d4ee84f0255 100644 --- a/app/assets/javascripts/work_items/components/work_item_detail.vue +++ b/app/assets/javascripts/work_items/components/work_item_detail.vue @@ -320,6 +320,11 @@ export default { ); return widgetHierarchy.children.nodes; }, + workItemBodyClass() { + return { + 'gl-pt-5': !this.updateError && !this.isModal, + }; + }, }, mounted() { if (this.modalWorkItemId || this.modalWorkItemIid) { @@ -486,246 +491,244 @@ export default { </script> <template> - <section class="gl-pt-5"> - <gl-alert - v-if="updateError" - class="gl-mb-3" - variant="danger" - @dismiss="updateError = undefined" - > - {{ updateError }} - </gl-alert> - - <div v-if="workItemLoading" class="gl-max-w-26 gl-py-5"> - <gl-skeleton-loader :height="65" :width="240"> - <rect width="240" height="20" x="5" y="0" rx="4" /> - <rect width="100" height="20" x="5" y="45" rx="4" /> - </gl-skeleton-loader> - </div> - <template v-else> - <div class="gl-display-flex gl-align-items-center" data-testid="work-item-body"> - <ul - v-if="parentWorkItem" - class="list-unstyled gl-display-flex gl-mr-auto gl-max-w-26 gl-md-max-w-50p gl-min-w-0 gl-mb-0 gl-z-index-0" - data-testid="work-item-parent" - > - <li class="gl-ml-n4 gl-display-flex gl-align-items-center gl-overflow-hidden"> - <gl-button - v-gl-tooltip.hover - class="gl-text-truncate gl-max-w-full" - :icon="parentWorkItemIconName" - category="tertiary" - :href="parentUrl" - :title="parentWorkItemReference" - @click="openInModal($event, parentWorkItem)" - >{{ parentWorkItemReference }}</gl-button + <section> + <section v-if="updateError" class="flash-container flash-container-page sticky"> + <gl-alert class="gl-mb-3" variant="danger" @dismiss="updateError = undefined"> + {{ updateError }} + </gl-alert> + </section> + <section :class="workItemBodyClass"> + <div v-if="workItemLoading" class="gl-max-w-26 gl-py-5"> + <gl-skeleton-loader :height="65" :width="240"> + <rect width="240" height="20" x="5" y="0" rx="4" /> + <rect width="100" height="20" x="5" y="45" rx="4" /> + </gl-skeleton-loader> + </div> + <template v-else> + <div class="gl-display-flex gl-align-items-center" data-testid="work-item-body"> + <ul + v-if="parentWorkItem" + class="list-unstyled gl-display-flex gl-mr-auto gl-max-w-26 gl-md-max-w-50p gl-min-w-0 gl-mb-0 gl-z-index-0" + data-testid="work-item-parent" + > + <li class="gl-ml-n4 gl-display-flex gl-align-items-center gl-overflow-hidden"> + <gl-button + v-gl-tooltip.hover + class="gl-text-truncate gl-max-w-full" + :icon="parentWorkItemIconName" + category="tertiary" + :href="parentUrl" + :title="parentWorkItemReference" + @click="openInModal($event, parentWorkItem)" + >{{ parentWorkItemReference }}</gl-button + > + <gl-icon name="chevron-right" :size="16" class="gl-flex-shrink-0" /> + </li> + <li + class="gl-px-4 gl-py-3 gl-line-height-0 gl-display-flex gl-align-items-center gl-overflow-hidden gl-flex-shrink-0" > - <gl-icon name="chevron-right" :size="16" class="gl-flex-shrink-0" /> - </li> - <li - class="gl-px-4 gl-py-3 gl-line-height-0 gl-display-flex gl-align-items-center gl-overflow-hidden gl-flex-shrink-0" + <work-item-type-icon + :work-item-icon-name="workItemIconName" + :work-item-type="workItemType && workItemType.toUpperCase()" + /> + {{ workItemBreadcrumbReference }} + </li> + </ul> + <work-item-type-icon + v-else-if="!error" + :work-item-icon-name="workItemIconName" + :work-item-type="workItemType && workItemType.toUpperCase()" + show-text + class="gl-font-weight-bold gl-text-secondary gl-mr-auto" + data-testid="work-item-type" + /> + <gl-loading-icon v-if="updateInProgress" :inline="true" class="gl-mr-3" /> + <gl-badge + v-if="workItem.confidential" + v-gl-tooltip.bottom + :title="confidentialTooltip" + variant="warning" + icon="eye-slash" + class="gl-mr-3 gl-cursor-help" + >{{ __('Confidential') }}</gl-badge > - <work-item-type-icon - :work-item-icon-name="workItemIconName" - :work-item-type="workItemType && workItemType.toUpperCase()" - /> - {{ workItemBreadcrumbReference }} - </li> - </ul> - <work-item-type-icon - v-else-if="!error" - :work-item-icon-name="workItemIconName" - :work-item-type="workItemType && workItemType.toUpperCase()" - show-text - class="gl-font-weight-bold gl-text-secondary gl-mr-auto" - data-testid="work-item-type" + <work-item-actions + v-if="canUpdate || canDelete" + :work-item-id="workItem.id" + :work-item-type="workItemType" + :can-delete="canDelete" + :can-update="canUpdate" + :is-confidential="workItem.confidential" + :is-parent-confidential="parentWorkItemConfidentiality" + @deleteWorkItem="$emit('deleteWorkItem', { workItemType, workItemId: workItem.id })" + @toggleWorkItemConfidentiality="toggleConfidentiality" + @error="updateError = $event" + /> + <gl-button + v-if="isModal" + category="tertiary" + data-testid="work-item-close" + icon="close" + :aria-label="__('Close')" + @click="$emit('close')" + /> + </div> + <work-item-title + v-if="workItem.title" + :work-item-id="workItem.id" + :work-item-title="workItem.title" + :work-item-type="workItemType" + :work-item-parent-id="workItemParentId" + :can-update="canUpdate" + @error="updateError = $event" /> - <gl-loading-icon v-if="updateInProgress" :inline="true" class="gl-mr-3" /> - <gl-badge - v-if="workItem.confidential" - v-gl-tooltip.bottom - :title="confidentialTooltip" - variant="warning" - icon="eye-slash" - class="gl-mr-3 gl-cursor-help" - >{{ __('Confidential') }}</gl-badge - > - <work-item-actions - v-if="canUpdate || canDelete" + <work-item-created-updated :work-item-id="workItem.id" + :work-item-iid="workItemIid" + :full-path="fullPath" + :fetch-by-iid="fetchByIid" + /> + <work-item-state + :work-item="workItem" + :work-item-parent-id="workItemParentId" + :can-update="canUpdate" + @error="updateError = $event" + /> + <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" - :can-delete="canDelete" + :can-invite-members="workItemAssignees.canInviteMembers" + :full-path="fullPath" + @error="updateError = $event" + /> + <work-item-labels + v-if="workItemLabels" + :work-item-id="workItem.id" :can-update="canUpdate" - :is-confidential="workItem.confidential" - :is-parent-confidential="parentWorkItemConfidentiality" - @deleteWorkItem="$emit('deleteWorkItem', { workItemType, workItemId: workItem.id })" - @toggleWorkItemConfidentiality="toggleConfidentiality" + :full-path="fullPath" + :fetch-by-iid="fetchByIid" + :query-variables="queryVariables" @error="updateError = $event" /> - <gl-button - v-if="isModal" - category="tertiary" - data-testid="work-item-close" - icon="close" - :aria-label="__('Close')" - @click="$emit('close')" + <work-item-due-date + v-if="workItemDueDate" + :can-update="canUpdate" + :due-date="workItemDueDate.dueDate" + :start-date="workItemDueDate.startDate" + :work-item-id="workItem.id" + :work-item-type="workItemType" + @error="updateError = $event" /> - </div> - <work-item-title - v-if="workItem.title" - :work-item-id="workItem.id" - :work-item-title="workItem.title" - :work-item-type="workItemType" - :work-item-parent-id="workItemParentId" - :can-update="canUpdate" - @error="updateError = $event" - /> - <work-item-created-updated - :work-item-id="workItem.id" - :work-item-iid="workItemIid" - :full-path="fullPath" - :fetch-by-iid="fetchByIid" - /> - <work-item-state - :work-item="workItem" - :work-item-parent-id="workItemParentId" - :can-update="canUpdate" - @error="updateError = $event" - /> - <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" - :can-invite-members="workItemAssignees.canInviteMembers" - :full-path="fullPath" - @error="updateError = $event" - /> - <work-item-labels - v-if="workItemLabels" - :work-item-id="workItem.id" - :can-update="canUpdate" - :full-path="fullPath" - :fetch-by-iid="fetchByIid" - :query-variables="queryVariables" - @error="updateError = $event" - /> - <work-item-due-date - v-if="workItemDueDate" - :can-update="canUpdate" - :due-date="workItemDueDate.dueDate" - :start-date="workItemDueDate.startDate" - :work-item-id="workItem.id" - :work-item-type="workItemType" - @error="updateError = $event" - /> - <work-item-milestone - v-if="workItemMilestone" - :work-item-id="workItem.id" - :work-item-milestone="workItemMilestone.milestone" - :work-item-type="workItemType" - :fetch-by-iid="fetchByIid" - :query-variables="queryVariables" - :can-update="canUpdate" - :full-path="fullPath" - @error="updateError = $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" - :fetch-by-iid="fetchByIid" - :query-variables="queryVariables" - @error="updateError = $event" - /> - <work-item-progress - v-if="workItemProgress" - class="gl-mb-5" - :can-update="canUpdate" - :progress="workItemProgress.progress" - :work-item-id="workItem.id" - :work-item-type="workItemType" - :fetch-by-iid="fetchByIid" - :query-variables="queryVariables" - @error="updateError = $event" - /> - <work-item-iteration - v-if="workItemIteration" - class="gl-mb-5" - :iteration="workItemIteration.iteration" - :can-update="canUpdate" - :work-item-id="workItem.id" - :work-item-type="workItemType" - :fetch-by-iid="fetchByIid" - :query-variables="queryVariables" - :full-path="fullPath" - @error="updateError = $event" - /> - <work-item-health-status - v-if="workItemHealthStatus" - class="gl-mb-5" - :health-status="workItemHealthStatus.healthStatus" - :can-update="canUpdate" - :work-item-id="workItem.id" - :work-item-type="workItemType" - :fetch-by-iid="fetchByIid" - :query-variables="queryVariables" - :full-path="fullPath" - @error="updateError = $event" - /> - <work-item-description - v-if="hasDescriptionWidget" - :work-item-id="workItem.id" - :full-path="fullPath" - :fetch-by-iid="fetchByIid" - :query-variables="queryVariables" - class="gl-pt-5" - @error="updateError = $event" - /> - <work-item-tree - v-if="workItemType === $options.WORK_ITEM_TYPE_VALUE_OBJECTIVE" - :work-item-type="workItemType" - :parent-work-item-type="workItem.workItemType.name" - :work-item-id="workItem.id" - :children="children" - :can-update="canUpdate" - :project-path="fullPath" - :confidential="workItem.confidential" - @addWorkItemChild="addChild" - @removeChild="removeChild" - @show-modal="openInModal" - /> - <template v-if="workItemsMvcEnabled"> - <work-item-notes - v-if="workItemNotes" + <work-item-milestone + v-if="workItemMilestone" :work-item-id="workItem.id" + :work-item-milestone="workItemMilestone.milestone" + :work-item-type="workItemType" + :fetch-by-iid="fetchByIid" :query-variables="queryVariables" + :can-update="canUpdate" :full-path="fullPath" + @error="updateError = $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" + :fetch-by-iid="fetchByIid" + :query-variables="queryVariables" + @error="updateError = $event" + /> + <work-item-progress + v-if="workItemProgress" + class="gl-mb-5" + :can-update="canUpdate" + :progress="workItemProgress.progress" + :work-item-id="workItem.id" + :work-item-type="workItemType" + :fetch-by-iid="fetchByIid" + :query-variables="queryVariables" + @error="updateError = $event" + /> + <work-item-iteration + v-if="workItemIteration" + class="gl-mb-5" + :iteration="workItemIteration.iteration" + :can-update="canUpdate" + :work-item-id="workItem.id" + :work-item-type="workItemType" :fetch-by-iid="fetchByIid" + :query-variables="queryVariables" + :full-path="fullPath" + @error="updateError = $event" + /> + <work-item-health-status + v-if="workItemHealthStatus" + class="gl-mb-5" + :health-status="workItemHealthStatus.healthStatus" + :can-update="canUpdate" + :work-item-id="workItem.id" :work-item-type="workItemType" + :fetch-by-iid="fetchByIid" + :query-variables="queryVariables" + :full-path="fullPath" + @error="updateError = $event" + /> + <work-item-description + v-if="hasDescriptionWidget" + :work-item-id="workItem.id" + :full-path="fullPath" + :fetch-by-iid="fetchByIid" + :query-variables="queryVariables" class="gl-pt-5" @error="updateError = $event" /> + <work-item-tree + v-if="workItemType === $options.WORK_ITEM_TYPE_VALUE_OBJECTIVE" + :work-item-type="workItemType" + :parent-work-item-type="workItem.workItemType.name" + :work-item-id="workItem.id" + :children="children" + :can-update="canUpdate" + :project-path="fullPath" + :confidential="workItem.confidential" + @addWorkItemChild="addChild" + @removeChild="removeChild" + @show-modal="openInModal" + /> + <template v-if="workItemsMvcEnabled"> + <work-item-notes + v-if="workItemNotes" + :work-item-id="workItem.id" + :query-variables="queryVariables" + :full-path="fullPath" + :fetch-by-iid="fetchByIid" + :work-item-type="workItemType" + class="gl-pt-5" + @error="updateError = $event" + /> + </template> + <gl-empty-state + v-if="error" + :title="$options.i18n.fetchErrorTitle" + :description="error" + :svg-path="noAccessSvgPath" + /> </template> - <gl-empty-state - v-if="error" - :title="$options.i18n.fetchErrorTitle" - :description="error" - :svg-path="noAccessSvgPath" + <work-item-detail-modal + v-if="!isModal" + ref="modal" + :work-item-id="modalWorkItemId" + :work-item-iid="modalWorkItemIid" + :show="true" + @close="updateUrl" /> - </template> - <work-item-detail-modal - v-if="!isModal" - ref="modal" - :work-item-id="modalWorkItemId" - :work-item-iid="modalWorkItemIid" - :show="true" - @close="updateUrl" - /> + </section> </section> </template> |