diff options
Diffstat (limited to 'app/assets/javascripts/design_management/components')
3 files changed, 58 insertions, 6 deletions
diff --git a/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue b/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue index 78ba586ce37..813f87452d8 100644 --- a/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue +++ b/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue @@ -4,13 +4,16 @@ import { ApolloMutation } from 'vue-apollo'; import createFlash from '~/flash'; import { s__ } from '~/locale'; import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue'; +import { updateGlobalTodoCount } from '~/vue_shared/components/sidebar/todo_toggle/utils'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import { ACTIVE_DISCUSSION_SOURCE_TYPES } from '../../constants'; import createNoteMutation from '../../graphql/mutations/create_note.mutation.graphql'; import toggleResolveDiscussionMutation from '../../graphql/mutations/toggle_resolve_discussion.mutation.graphql'; import activeDiscussionQuery from '../../graphql/queries/active_discussion.query.graphql'; +import getDesignQuery from '../../graphql/queries/get_design.query.graphql'; import allVersionsMixin from '../../mixins/all_versions'; import { hasErrors } from '../../utils/cache_update'; +import { extractDesign } from '../../utils/design_management_utils'; import { ADD_DISCUSSION_COMMENT_ERROR } from '../../utils/error_messages'; import DesignNote from './design_note.vue'; import DesignReplyForm from './design_reply_form.vue'; @@ -161,6 +164,19 @@ export default { }, toggleResolvedStatus() { this.isResolving = true; + + /** + * Get previous todo count + */ + const { defaultClient: client } = this.$apollo.provider.clients; + const sourceData = client.readQuery({ + query: getDesignQuery, + variables: this.designVariables, + }); + + const design = extractDesign(sourceData); + const prevTodoCount = design.currentUserTodos?.nodes?.length || 0; + this.$apollo .mutate({ mutation: toggleResolveDiscussionMutation, @@ -170,6 +186,10 @@ export default { if (data.errors?.length > 0) { this.$emit('resolve-discussion-error', data.errors[0]); } + const newTodoCount = + data?.discussionToggleResolve?.discussion?.noteable?.currentUserTodos?.nodes?.length || + 0; + updateGlobalTodoCount(newTodoCount - prevTodoCount); }) .catch((err) => { this.$emit('resolve-discussion-error', err); diff --git a/app/assets/javascripts/design_management/components/image.vue b/app/assets/javascripts/design_management/components/image.vue index e64ee4a5a34..8ab94cd2c4b 100644 --- a/app/assets/javascripts/design_management/components/image.vue +++ b/app/assets/javascripts/design_management/components/image.vue @@ -1,6 +1,8 @@ <script> import { GlIcon } from '@gitlab/ui'; import { throttle } from 'lodash'; +import { DESIGN_MARK_APP_START, DESIGN_MAIN_IMAGE_OUTPUT } from '~/performance/constants'; +import { performanceMarkAndMeasure } from '~/performance/utils'; export default { components: { @@ -39,7 +41,9 @@ export default { window.removeEventListener('resize', this.resizeThrottled, false); }, mounted() { - this.onImgLoad(); + if (!this.image) { + this.onImgLoad(); + } this.resizeThrottled = throttle(() => { // NOTE: if imageStyle is set, then baseImageSize @@ -53,6 +57,14 @@ export default { methods: { onImgLoad() { requestIdleCallback(this.setBaseImageSize, { timeout: 1000 }); + performanceMarkAndMeasure({ + measures: [ + { + name: DESIGN_MAIN_IMAGE_OUTPUT, + start: DESIGN_MARK_APP_START, + }, + ], + }); }, onImgError() { this.imageError = true; diff --git a/app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue b/app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue index 750f16bbe57..816d7ac7abf 100644 --- a/app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue +++ b/app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue @@ -1,6 +1,8 @@ <script> import { GlDropdown, GlDropdownItem, GlSprintf } from '@gitlab/ui'; +import defaultAvatarUrl from 'images/no_avatar.png'; import { __, sprintf } from '~/locale'; +import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; import allVersionsMixin from '../../mixins/all_versions'; import { findVersionId } from '../../utils/design_management_utils'; @@ -9,6 +11,7 @@ export default { GlDropdown, GlDropdownItem, GlSprintf, + TimeAgo, }, mixins: [allVersionsMixin], computed: { @@ -58,6 +61,9 @@ export default { } return __('Version %{versionNumber}'); }, + getAvatarUrl(version) { + return version?.author?.avatarUrl || defaultAvatarUrl; + }, }, }; </script> @@ -68,14 +74,28 @@ export default { v-for="(version, index) in allVersions" :key="version.id" :is-check-item="true" + :is-check-centered="true" :is-checked="findVersionId(version.id) === currentVersionId" + :avatar-url="getAvatarUrl(version)" @click="routeToVersion(version.id)" > - <gl-sprintf :message="versionText(version.id)"> - <template #versionNumber> - {{ allVersions.length - index }} - </template> - </gl-sprintf> + <strong> + <gl-sprintf :message="versionText(version.id)"> + <template #versionNumber> + {{ allVersions.length - index }} + </template> + </gl-sprintf> + </strong> + + <div v-if="version.author" class="gl-text-gray-600 gl-mt-1"> + <div>{{ version.author.name }}</div> + <time-ago + v-if="version.createdAt" + class="text-1" + :time="version.createdAt" + tooltip-placement="bottom" + /> + </div> </gl-dropdown-item> </gl-dropdown> </template> |