diff options
Diffstat (limited to 'app/assets/javascripts/design_management/pages/design/index.vue')
| -rw-r--r-- | app/assets/javascripts/design_management/pages/design/index.vue | 114 |
1 files changed, 44 insertions, 70 deletions
diff --git a/app/assets/javascripts/design_management/pages/design/index.vue b/app/assets/javascripts/design_management/pages/design/index.vue index 7ff3271394d..fe121b6530a 100644 --- a/app/assets/javascripts/design_management/pages/design/index.vue +++ b/app/assets/javascripts/design_management/pages/design/index.vue @@ -1,17 +1,16 @@ <script> -import { ApolloMutation } from 'vue-apollo'; import Mousetrap from 'mousetrap'; import { GlLoadingIcon, GlAlert } from '@gitlab/ui'; +import { ApolloMutation } from 'vue-apollo'; import createFlash from '~/flash'; import { fetchPolicies } from '~/lib/graphql'; import allVersionsMixin from '../../mixins/all_versions'; import Toolbar from '../../components/toolbar/index.vue'; -import DesignDiscussion from '../../components/design_notes/design_discussion.vue'; -import DesignReplyForm from '../../components/design_notes/design_reply_form.vue'; import DesignDestroyer from '../../components/design_destroyer.vue'; import DesignScaler from '../../components/design_scaler.vue'; -import Participants from '~/sidebar/components/participants/participants.vue'; import DesignPresentation from '../../components/design_presentation.vue'; +import DesignReplyForm from '../../components/design_notes/design_reply_form.vue'; +import DesignSidebar from '../../components/design_sidebar.vue'; import getDesignQuery from '../../graphql/queries/getDesign.query.graphql'; import appDataQuery from '../../graphql/queries/appData.query.graphql'; import createImageDiffNoteMutation from '../../graphql/mutations/createImageDiffNote.mutation.graphql'; @@ -20,7 +19,6 @@ import updateActiveDiscussionMutation from '../../graphql/mutations/update_activ import { extractDiscussions, extractDesign, - extractParticipants, updateImageDiffNoteOptimisticResponse, } from '../../utils/design_management_utils'; import { @@ -43,15 +41,14 @@ import { ACTIVE_DISCUSSION_SOURCE_TYPES } from '../../constants'; export default { components: { ApolloMutation, + DesignReplyForm, DesignPresentation, - DesignDiscussion, DesignScaler, DesignDestroyer, Toolbar, - DesignReplyForm, GlLoadingIcon, GlAlert, - Participants, + DesignSidebar, }, mixins: [allVersionsMixin], props: { @@ -69,6 +66,7 @@ export default { errorMessage: '', issueIid: '', scale: 1, + resolvedDiscussionsExpanded: false, }; }, apollo: { @@ -103,20 +101,17 @@ export default { return this.$apollo.queries.design.loading && !this.design.filename; }, discussions() { + if (!this.design.discussions) { + return []; + } return extractDiscussions(this.design.discussions); }, - discussionParticipants() { - return extractParticipants(this.design.issue.participants); - }, markdownPreviewPath() { return `/${this.projectPath}/preview_markdown?target_type=Issue`; }, isSubmitButtonDisabled() { return this.comment.trim().length === 0; }, - renderDiscussions() { - return this.discussions.length || this.annotationCoordinates; - }, designVariables() { return { fullPath: this.projectPath, @@ -144,18 +139,25 @@ export default { }, }; }, - issue() { - return { - ...this.design.issue, - webPath: this.design.issue.webPath.substr(1), - }; - }, isAnnotating() { return Boolean(this.annotationCoordinates); }, + resolvedDiscussions() { + return this.discussions.filter(discussion => discussion.resolved); + }, + }, + watch: { + resolvedDiscussions(val) { + if (!val.length) { + this.resolvedDiscussionsExpanded = false; + } + }, }, mounted() { Mousetrap.bind('esc', this.closeDesign); + this.trackEvent(); + // We need to reset the active discussion when opening a new design + this.updateActiveDiscussion(); }, beforeDestroy() { Mousetrap.unbind('esc', this.closeDesign); @@ -247,6 +249,9 @@ export default { onDesignDeleteError(e) { this.onError(designDeletionError({ singular: true }), e); }, + onResolveDiscussionError(e) { + this.onError(UPDATE_IMAGE_DIFF_NOTE_ERROR, e); + }, openCommentForm(annotationCoordinates) { this.annotationCoordinates = annotationCoordinates; }, @@ -278,23 +283,9 @@ export default { }, }); }, - }, - beforeRouteEnter(to, from, next) { - next(vm => { - vm.trackEvent(); - }); - }, - beforeRouteUpdate(to, from, next) { - this.trackEvent(); - this.closeCommentForm(); - // We need to reset the active discussion when opening a new design - this.updateActiveDiscussion(); - next(); - }, - beforeRouteLeave(to, from, next) { - // We need to reset the active discussion when moving to design list view - this.updateActiveDiscussion(); - next(); + toggleResolvedComments() { + this.resolvedDiscussionsExpanded = !this.resolvedDiscussionsExpanded; + }, }, createImageDiffNoteMutation, DESIGNS_ROUTE_NAME, @@ -337,6 +328,7 @@ export default { :discussions="discussions" :is-annotating="isAnnotating" :scale="scale" + :resolved-discussions-expanded="resolvedDiscussionsExpanded" @openCommentForm="openCommentForm" @closeCommentForm="closeCommentForm" @moveNote="onMoveNote" @@ -346,33 +338,19 @@ export default { <design-scaler @scale="scale = $event" /> </div> </div> - <div class="image-notes" @click="updateActiveDiscussion()"> - <h2 class="gl-font-size-20-deprecated-no-really-do-not-use-me font-weight-bold mt-0"> - {{ issue.title }} - </h2> - <a class="text-tertiary text-decoration-none mb-3 d-block" :href="issue.webUrl">{{ - issue.webPath - }}</a> - <participants - :participants="discussionParticipants" - :show-participant-label="false" - class="mb-4" - /> - <template v-if="renderDiscussions"> - <design-discussion - v-for="(discussion, index) in discussions" - :key="discussion.id" - :discussion="discussion" - :design-id="id" - :noteable-id="design.id" - :discussion-index="index + 1" - :markdown-preview-path="markdownPreviewPath" - @error="onDesignDiscussionError" - @updateNoteError="onUpdateNoteError" - @click.native.stop="updateActiveDiscussion(discussion.notes[0].id)" - /> + <design-sidebar + :design="design" + :resolved-discussions-expanded="resolvedDiscussionsExpanded" + :markdown-preview-path="markdownPreviewPath" + @onDesignDiscussionError="onDesignDiscussionError" + @onCreateImageDiffNoteError="onCreateImageDiffNoteError" + @updateNoteError="onUpdateNoteError" + @resolveDiscussionError="onResolveDiscussionError" + @toggleResolvedComments="toggleResolvedComments" + > + <template #replyForm> <apollo-mutation - v-if="annotationCoordinates" + v-if="isAnnotating" #default="{ mutate, loading }" :mutation="$options.createImageDiffNoteMutation" :variables="{ @@ -388,13 +366,9 @@ export default { :markdown-preview-path="markdownPreviewPath" @submitForm="mutate" @cancelForm="closeCommentForm" - /> - </apollo-mutation> - </template> - <h2 v-else class="new-discussion-disclaimer gl-font-base m-0"> - {{ __("Click the image where you'd like to start a new discussion") }} - </h2> - </div> + /> </apollo-mutation + ></template> + </design-sidebar> </template> </div> </template> |