diff options
Diffstat (limited to 'app/assets/javascripts/boards/components/board_list_header.vue')
-rw-r--r-- | app/assets/javascripts/boards/components/board_list_header.vue | 33 |
1 files changed, 31 insertions, 2 deletions
diff --git a/app/assets/javascripts/boards/components/board_list_header.vue b/app/assets/javascripts/boards/components/board_list_header.vue index a8d71ab7a35..e985a368e64 100644 --- a/app/assets/javascripts/boards/components/board_list_header.vue +++ b/app/assets/javascripts/boards/components/board_list_header.vue @@ -15,6 +15,8 @@ import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants'; import { n__, s__, __ } from '~/locale'; import sidebarEventHub from '~/sidebar/event_hub'; import Tracking from '~/tracking'; +import { formatDate } from '~/lib/utils/datetime_utility'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import AccessorUtilities from '../../lib/utils/accessor'; import { inactiveId, LIST, ListType, toggleFormEventPrefix } from '../constants'; import eventHub from '../eventhub'; @@ -40,7 +42,7 @@ export default { directives: { GlTooltip: GlTooltipDirective, }, - mixins: [Tracking.mixin()], + mixins: [Tracking.mixin(), glFeatureFlagMixin()], inject: { boardId: { default: '', @@ -86,6 +88,13 @@ export default { listTitle() { return this.list?.label?.description || this.list?.assignee?.name || this.list.title || ''; }, + listIterationPeriod() { + const iteration = this.list?.iteration; + return iteration ? this.getIterationPeriod(iteration) : ''; + }, + isIterationList() { + return this.listType === ListType.iteration; + }, showListHeaderButton() { return !this.disabled && this.listType !== ListType.closed; }, @@ -96,7 +105,10 @@ export default { return this.listType === ListType.assignee && this.showListDetails; }, showIterationListDetails() { - return this.listType === ListType.iteration && this.showListDetails; + return this.isIterationList && this.showListDetails; + }, + iterationCadencesAvailable() { + return this.isIterationList && this.glFeatures.iterationCadences; }, showListDetails() { return !this.list.collapsed || !this.isSwimlanesHeader; @@ -208,6 +220,16 @@ export default { updateListFunction() { this.updateList({ listId: this.list.id, collapsed: this.list.collapsed }); }, + /** + * TODO: https://gitlab.com/gitlab-org/gitlab/-/issues/344619 + * This method also exists as a utility function in ee/../iterations/utils.js + * Remove the duplication when the EE code is separated from this compoment. + */ + getIterationPeriod({ startDate, dueDate }) { + const start = formatDate(startDate, 'mmm d, yyyy', true); + const due = formatDate(dueDate, 'mmm d, yyyy', true); + return `${start} - ${due}`; + }, }, }; </script> @@ -307,6 +329,13 @@ export default { class="board-title-main-text gl-text-truncate" > {{ listTitle }} + <span + v-if="iterationCadencesAvailable" + class="gl-display-inline-block gl-text-gray-400" + data-testid="board-list-iteration-period" + > + {{ listIterationPeriod }}</span + > </span> <span v-if="listType === 'assignee'" |