diff options
Diffstat (limited to 'app/assets/javascripts/design_management/components/design_sidebar.vue')
-rw-r--r-- | app/assets/javascripts/design_management/components/design_sidebar.vue | 59 |
1 files changed, 51 insertions, 8 deletions
diff --git a/app/assets/javascripts/design_management/components/design_sidebar.vue b/app/assets/javascripts/design_management/components/design_sidebar.vue index e5a3590877e..df425e3b96d 100644 --- a/app/assets/javascripts/design_management/components/design_sidebar.vue +++ b/app/assets/javascripts/design_management/components/design_sidebar.vue @@ -8,6 +8,8 @@ import { extractDiscussions, extractParticipants } from '../utils/design_managem import { ACTIVE_DISCUSSION_SOURCE_TYPES } from '../constants'; import DesignDiscussion from './design_notes/design_discussion.vue'; import Participants from '~/sidebar/components/participants/participants.vue'; +import DesignTodoButton from './design_todo_button.vue'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; export default { components: { @@ -16,7 +18,9 @@ export default { GlCollapse, GlButton, GlPopover, + DesignTodoButton, }, + mixins: [glFeatureFlagsMixin()], props: { design: { type: Object, @@ -37,6 +41,14 @@ export default { discussionWithOpenForm: '', }; }, + inject: { + projectPath: { + default: '', + }, + issueIid: { + default: '', + }, + }, computed: { discussions() { return extractDiscussions(this.design.discussions); @@ -59,6 +71,26 @@ export default { resolvedCommentsToggleIcon() { return this.resolvedDiscussionsExpanded ? 'chevron-down' : 'chevron-right'; }, + showTodoButton() { + return this.glFeatures.designManagementTodoButton; + }, + sidebarWrapperClass() { + return { + 'gl-pt-0': this.showTodoButton, + }; + }, + }, + watch: { + isResolvedCommentsPopoverHidden(newVal) { + if (!newVal) { + this.$refs.resolvedComments.scrollIntoView(); + } + }, + }, + mounted() { + if (!this.isResolvedCommentsPopoverHidden && this.$refs.resolvedComments) { + this.$refs.resolvedComments.$el.scrollIntoView(); + } }, methods: { handleSidebarClick() { @@ -89,7 +121,14 @@ export default { </script> <template> - <div class="image-notes" @click="handleSidebarClick"> + <div class="image-notes" :class="sidebarWrapperClass" @click="handleSidebarClick"> + <div + v-if="showTodoButton" + class="gl-py-4 gl-mb-4 gl-display-flex gl-justify-content-space-between gl-align-items-center gl-border-b-1 gl-border-b-solid gl-border-b-gray-100" + > + <span>{{ __('To-Do') }}</span> + <design-todo-button :design="design" @error="$emit('todoError', $event)" /> + </div> <h2 class="gl-font-weight-bold gl-mt-0"> {{ issue.title }} </h2> @@ -120,15 +159,16 @@ export default { :resolved-discussions-expanded="resolvedDiscussionsExpanded" :discussion-with-open-form="discussionWithOpenForm" data-testid="unresolved-discussion" - @createNoteError="$emit('onDesignDiscussionError', $event)" - @updateNoteError="$emit('updateNoteError', $event)" - @resolveDiscussionError="$emit('resolveDiscussionError', $event)" + @create-note-error="$emit('onDesignDiscussionError', $event)" + @update-note-error="$emit('updateNoteError', $event)" + @resolve-discussion-error="$emit('resolveDiscussionError', $event)" @click.native.stop="updateActiveDiscussion(discussion.notes[0].id)" - @openForm="updateDiscussionWithOpenForm" + @open-form="updateDiscussionWithOpenForm" /> <template v-if="resolvedDiscussions.length > 0"> <gl-button id="resolved-comments" + ref="resolvedComments" data-testid="resolved-comments" :icon="resolvedCommentsToggleIcon" variant="link" @@ -151,9 +191,12 @@ export default { ) }} </p> - <a href="#" rel="noopener noreferrer" target="_blank">{{ - s__('DesignManagement|Learn more about resolving comments') - }}</a> + <a + href="https://docs.gitlab.com/ee/user/project/issues/design_management.html#resolve-design-threads" + rel="noopener noreferrer" + target="_blank" + >{{ s__('DesignManagement|Learn more about resolving comments') }}</a + > </gl-popover> <gl-collapse :visible="resolvedDiscussionsExpanded" class="gl-mt-3"> <design-discussion |