diff options
Diffstat (limited to 'app/assets/javascripts/boards/components/sidebar')
| -rw-r--r-- | app/assets/javascripts/boards/components/sidebar/board_editable_item.vue | 4 | ||||
| -rw-r--r-- | app/assets/javascripts/boards/components/sidebar/board_sidebar_due_date.vue | 7 | ||||
| -rw-r--r-- | app/assets/javascripts/boards/components/sidebar/board_sidebar_labels_select.vue | 12 | ||||
| -rw-r--r-- | app/assets/javascripts/boards/components/sidebar/board_sidebar_milestone_select.vue | 19 | ||||
| -rw-r--r-- | app/assets/javascripts/boards/components/sidebar/board_sidebar_subscription.vue | 18 | ||||
| -rw-r--r-- | app/assets/javascripts/boards/components/sidebar/board_sidebar_time_tracker.vue | 25 | ||||
| -rw-r--r-- | app/assets/javascripts/boards/components/sidebar/board_sidebar_title.vue (renamed from app/assets/javascripts/boards/components/sidebar/board_sidebar_issue_title.vue) | 48 |
7 files changed, 82 insertions, 51 deletions
diff --git a/app/assets/javascripts/boards/components/sidebar/board_editable_item.vue b/app/assets/javascripts/boards/components/sidebar/board_editable_item.vue index 61863bbe2a9..352a25ef6d9 100644 --- a/app/assets/javascripts/boards/components/sidebar/board_editable_item.vue +++ b/app/assets/javascripts/boards/components/sidebar/board_editable_item.vue @@ -98,14 +98,14 @@ export default { <gl-button v-if="canUpdate" variant="link" - class="gl-text-gray-900! gl-ml-5 js-sidebar-dropdown-toggle" + class="gl-text-gray-900! gl-ml-5 js-sidebar-dropdown-toggle edit-link" data-testid="edit-button" @click="toggle" > {{ __('Edit') }} </gl-button> </header> - <div v-show="!edit" class="gl-text-gray-500" data-testid="collapsed-content"> + <div v-show="!edit" class="gl-text-gray-500 value" data-testid="collapsed-content"> <slot name="collapsed">{{ __('None') }}</slot> </div> <div v-show="edit" data-testid="expanded-content"> diff --git a/app/assets/javascripts/boards/components/sidebar/board_sidebar_due_date.vue b/app/assets/javascripts/boards/components/sidebar/board_sidebar_due_date.vue index 6d928337396..13e1e232676 100644 --- a/app/assets/javascripts/boards/components/sidebar/board_sidebar_due_date.vue +++ b/app/assets/javascripts/boards/components/sidebar/board_sidebar_due_date.vue @@ -18,16 +18,16 @@ export default { }; }, computed: { - ...mapGetters(['activeIssue', 'projectPathForActiveIssue']), + ...mapGetters(['activeBoardItem', 'projectPathForActiveIssue']), hasDueDate() { - return this.activeIssue.dueDate != null; + return this.activeBoardItem.dueDate != null; }, parsedDueDate() { if (!this.hasDueDate) { return null; } - return parsePikadayDate(this.activeIssue.dueDate); + return parsePikadayDate(this.activeBoardItem.dueDate); }, formattedDueDate() { if (!this.hasDueDate) { @@ -69,6 +69,7 @@ export default { <board-editable-item ref="sidebarItem" class="board-sidebar-due-date" + data-testid="sidebar-due-date" :title="$options.i18n.dueDate" :loading="loading" @open="openDatePicker" diff --git a/app/assets/javascripts/boards/components/sidebar/board_sidebar_labels_select.vue b/app/assets/javascripts/boards/components/sidebar/board_sidebar_labels_select.vue index 55b1596ee18..f78be83cd82 100644 --- a/app/assets/javascripts/boards/components/sidebar/board_sidebar_labels_select.vue +++ b/app/assets/javascripts/boards/components/sidebar/board_sidebar_labels_select.vue @@ -21,9 +21,9 @@ export default { }; }, computed: { - ...mapGetters(['activeIssue', 'projectPathForActiveIssue']), + ...mapGetters(['activeBoardItem', 'projectPathForActiveIssue']), selectedLabels() { - const { labels = [] } = this.activeIssue; + const { labels = [] } = this.activeBoardItem; return labels.map((label) => ({ ...label, @@ -31,7 +31,7 @@ export default { })); }, issueLabels() { - const { labels = [] } = this.activeIssue; + const { labels = [] } = this.activeBoardItem; return labels.map((label) => ({ ...label, @@ -40,7 +40,7 @@ export default { }, }, methods: { - ...mapActions(['setActiveIssueLabels']), + ...mapActions(['setActiveBoardItemLabels']), async setLabels(payload) { this.loading = true; this.$refs.sidebarItem.collapse(); @@ -52,7 +52,7 @@ export default { .map((label) => label.id); const input = { addLabelIds, removeLabelIds, projectPath: this.projectPathForActiveIssue }; - await this.setActiveIssueLabels(input); + await this.setActiveBoardItemLabels(input); } catch (e) { createFlash({ message: __('An error occurred while updating labels.') }); } finally { @@ -65,7 +65,7 @@ export default { try { const removeLabelIds = [getIdFromGraphQLId(id)]; const input = { removeLabelIds, projectPath: this.projectPathForActiveIssue }; - await this.setActiveIssueLabels(input); + await this.setActiveBoardItemLabels(input); } catch (e) { createFlash({ message: __('An error occurred when removing the label.') }); } finally { diff --git a/app/assets/javascripts/boards/components/sidebar/board_sidebar_milestone_select.vue b/app/assets/javascripts/boards/components/sidebar/board_sidebar_milestone_select.vue index 829f1c72806..ad225c7bf5c 100644 --- a/app/assets/javascripts/boards/components/sidebar/board_sidebar_milestone_select.vue +++ b/app/assets/javascripts/boards/components/sidebar/board_sidebar_milestone_select.vue @@ -56,20 +56,20 @@ export default { }, }, computed: { - ...mapGetters(['activeIssue']), + ...mapGetters(['activeBoardItem']), hasMilestone() { - return this.activeIssue.milestone !== null; + return this.activeBoardItem.milestone !== null; }, groupFullPath() { - const { referencePath = '' } = this.activeIssue; + const { referencePath = '' } = this.activeBoardItem; return referencePath.slice(0, referencePath.indexOf('/')); }, projectPath() { - const { referencePath = '' } = this.activeIssue; + const { referencePath = '' } = this.activeBoardItem; return referencePath.slice(0, referencePath.indexOf('#')); }, dropdownText() { - return this.activeIssue.milestone?.title ?? this.$options.i18n.noMilestone; + return this.activeBoardItem.milestone?.title ?? this.$options.i18n.noMilestone; }, }, methods: { @@ -113,11 +113,12 @@ export default { ref="sidebarItem" :title="$options.i18n.milestone" :loading="loading" - @open="handleOpen()" + data-testid="sidebar-milestones" + @open="handleOpen" @close="handleClose" > <template v-if="hasMilestone" #collapsed> - <strong class="gl-text-gray-900">{{ activeIssue.milestone.title }}</strong> + <strong class="gl-text-gray-900">{{ activeBoardItem.milestone.title }}</strong> </template> <gl-dropdown ref="dropdown" @@ -130,7 +131,7 @@ export default { <gl-dropdown-item data-testid="no-milestone-item" :is-check-item="true" - :is-checked="!activeIssue.milestone" + :is-checked="!activeBoardItem.milestone" @click="setMilestone(null)" > {{ $options.i18n.noMilestone }} @@ -142,7 +143,7 @@ export default { v-for="milestone in milestones" :key="milestone.id" :is-check-item="true" - :is-checked="activeIssue.milestone && milestone.id === activeIssue.milestone.id" + :is-checked="activeBoardItem.milestone && milestone.id === activeBoardItem.milestone.id" data-testid="milestone-item" @click="setMilestone(milestone.id)" > diff --git a/app/assets/javascripts/boards/components/sidebar/board_sidebar_subscription.vue b/app/assets/javascripts/boards/components/sidebar/board_sidebar_subscription.vue index f01c8e8fa20..376985f7cb6 100644 --- a/app/assets/javascripts/boards/components/sidebar/board_sidebar_subscription.vue +++ b/app/assets/javascripts/boards/components/sidebar/board_sidebar_subscription.vue @@ -21,27 +21,31 @@ export default { components: { GlToggle, }, + inject: ['emailsDisabled'], data() { return { loading: false, }; }, computed: { - ...mapGetters(['activeIssue', 'projectPathForActiveIssue']), + ...mapGetters(['activeBoardItem', 'projectPathForActiveIssue', 'isEpicBoard']), + isEmailsDisabled() { + return this.isEpicBoard ? this.emailsDisabled : this.activeBoardItem.emailsDisabled; + }, notificationText() { - return this.activeIssue.emailsDisabled + return this.isEmailsDisabled ? this.$options.i18n.header.subscribeDisabledDescription : this.$options.i18n.header.title; }, }, methods: { - ...mapActions(['setActiveIssueSubscribed']), + ...mapActions(['setActiveItemSubscribed']), async handleToggleSubscription() { this.loading = true; try { - await this.setActiveIssueSubscribed({ - subscribed: !this.activeIssue.subscribed, + await this.setActiveItemSubscribed({ + subscribed: !this.activeBoardItem.subscribed, projectPath: this.projectPathForActiveIssue, }); } catch (error) { @@ -61,8 +65,8 @@ export default { > <span data-testid="notification-header-text"> {{ notificationText }} </span> <gl-toggle - v-if="!activeIssue.emailsDisabled" - :value="activeIssue.subscribed" + v-if="!isEmailsDisabled" + :value="activeBoardItem.subscribed" :is-loading="loading" :label="$options.i18n.header.title" label-position="hidden" diff --git a/app/assets/javascripts/boards/components/sidebar/board_sidebar_time_tracker.vue b/app/assets/javascripts/boards/components/sidebar/board_sidebar_time_tracker.vue new file mode 100644 index 00000000000..96d444980a8 --- /dev/null +++ b/app/assets/javascripts/boards/components/sidebar/board_sidebar_time_tracker.vue @@ -0,0 +1,25 @@ +<script> +import { mapGetters } from 'vuex'; +import IssuableTimeTracker from '~/sidebar/components/time_tracking/time_tracker.vue'; + +export default { + components: { + IssuableTimeTracker, + }, + inject: ['timeTrackingLimitToHours'], + computed: { + ...mapGetters(['activeBoardItem']), + }, +}; +</script> + +<template> + <issuable-time-tracker + :time-estimate="activeBoardItem.timeEstimate" + :time-spent="activeBoardItem.totalTimeSpent" + :human-time-estimate="activeBoardItem.humanTimeEstimate" + :human-time-spent="activeBoardItem.humanTotalTimeSpent" + :limit-to-hours="timeTrackingLimitToHours" + :show-collapsed="false" + /> +</template> diff --git a/app/assets/javascripts/boards/components/sidebar/board_sidebar_issue_title.vue b/app/assets/javascripts/boards/components/sidebar/board_sidebar_title.vue index 95864bd62a7..b8d3107c377 100644 --- a/app/assets/javascripts/boards/components/sidebar/board_sidebar_issue_title.vue +++ b/app/assets/javascripts/boards/components/sidebar/board_sidebar_title.vue @@ -27,12 +27,12 @@ export default { }; }, computed: { - ...mapGetters({ issue: 'activeIssue' }), + ...mapGetters({ item: 'activeBoardItem' }), pendingChangesStorageKey() { - return this.getPendingChangesKey(this.issue); + return this.getPendingChangesKey(this.item); }, projectPath() { - const referencePath = this.issue.referencePath || ''; + const referencePath = this.item.referencePath || ''; return referencePath.slice(0, referencePath.indexOf('#')); }, validationState() { @@ -40,29 +40,29 @@ export default { }, }, watch: { - issue: { - handler(updatedIssue, formerIssue) { - if (formerIssue?.title !== this.title) { - localStorage.setItem(this.getPendingChangesKey(formerIssue), this.title); + item: { + handler(updatedItem, formerItem) { + if (formerItem?.title !== this.title) { + localStorage.setItem(this.getPendingChangesKey(formerItem), this.title); } - this.title = updatedIssue.title; + this.title = updatedItem.title; this.setPendingState(); }, immediate: true, }, }, methods: { - ...mapActions(['setActiveIssueTitle']), - getPendingChangesKey(issue) { - if (!issue) { + ...mapActions(['setActiveItemTitle']), + getPendingChangesKey(item) { + if (!item) { return ''; } return joinPaths( window.location.pathname.slice(1), - String(issue.id), - 'issue-title-pending-changes', + String(item.id), + 'item-title-pending-changes', ); }, async setPendingState() { @@ -78,7 +78,7 @@ export default { } }, cancel() { - this.title = this.issue.title; + this.title = this.item.title; this.$refs.sidebarItem.collapse(); this.showChangesAlert = false; localStorage.removeItem(this.pendingChangesStorageKey); @@ -86,24 +86,24 @@ export default { async setTitle() { this.$refs.sidebarItem.collapse(); - if (!this.title || this.title === this.issue.title) { + if (!this.title || this.title === this.item.title) { return; } try { this.loading = true; - await this.setActiveIssueTitle({ title: this.title, projectPath: this.projectPath }); + await this.setActiveItemTitle({ title: this.title, projectPath: this.projectPath }); localStorage.removeItem(this.pendingChangesStorageKey); this.showChangesAlert = false; } catch (e) { - this.title = this.issue.title; + this.title = this.item.title; createFlash({ message: this.$options.i18n.updateTitleError }); } finally { this.loading = false; } }, handleOffClick() { - if (this.title !== this.issue.title) { + if (this.title !== this.item.title) { this.showChangesAlert = true; localStorage.setItem(this.pendingChangesStorageKey, this.title); } else { @@ -112,11 +112,11 @@ export default { }, }, i18n: { - issueTitlePlaceholder: __('Issue title'), + titlePlaceholder: __('Title'), submitButton: __('Save changes'), cancelButton: __('Cancel'), - updateTitleError: __('An error occurred when updating the issue title'), - invalidFeedback: __('An issue title is required'), + updateTitleError: __('An error occurred when updating the title'), + invalidFeedback: __('A title is required'), reviewYourChanges: __('Changes to the title have not been saved'), }, }; @@ -131,10 +131,10 @@ export default { @off-click="handleOffClick" > <template #title> - <span class="gl-font-weight-bold" data-testid="issue-title">{{ issue.title }}</span> + <span class="gl-font-weight-bold" data-testid="item-title">{{ item.title }}</span> </template> <template #collapsed> - <span class="gl-text-gray-800">{{ issue.referencePath }}</span> + <span class="gl-text-gray-800">{{ item.referencePath }}</span> </template> <gl-alert v-if="showChangesAlert" variant="warning" class="gl-mb-5" :dismissible="false"> {{ $options.i18n.reviewYourChanges }} @@ -144,7 +144,7 @@ export default { <gl-form-input v-model="title" v-autofocusonshow - :placeholder="$options.i18n.issueTitlePlaceholder" + :placeholder="$options.i18n.titlePlaceholder" :state="validationState" /> </gl-form-group> |