diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-06-10 12:11:12 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-06-10 12:11:12 +0300 |
commit | f42c4be1c0d5247fac0c059ec41c9a1961485aed (patch) | |
tree | b17fdfe021c7690211dd5c21c945113980bde651 /app/assets/javascripts/design_management | |
parent | df9e161ad4881eaef7c948679777bac403b0b7c8 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/design_management')
4 files changed, 195 insertions, 173 deletions
diff --git a/app/assets/javascripts/design_management/components/design_presentation.vue b/app/assets/javascripts/design_management/components/design_presentation.vue index 5116bacefa5..6bdd8568625 100644 --- a/app/assets/javascripts/design_management/components/design_presentation.vue +++ b/app/assets/javascripts/design_management/components/design_presentation.vue @@ -1,4 +1,5 @@ <script> +import { GlLoadingIcon } from '@gitlab/ui'; import { throttle } from 'lodash'; import { isLoggedIn } from '~/lib/utils/common_utils'; import DesignOverlay from './design_overlay.vue'; @@ -10,6 +11,7 @@ export default { components: { DesignImage, DesignOverlay, + GlLoadingIcon, }, props: { image: { @@ -40,6 +42,10 @@ export default { type: Boolean, required: true, }, + isLoading: { + type: Boolean, + required: true, + }, }, data() { return { @@ -299,7 +305,12 @@ export default { @touchend="onPresentationMouseup" @touchcancel="onPresentationMouseup" > - <div class="gl-h-full gl-w-full gl-display-flex gl-align-items-center gl-relative"> + <gl-loading-icon + v-if="isLoading" + size="xl" + class="gl-display-flex gl-h-full gl-align-items-center" + /> + <div v-else class="gl-h-full gl-w-full gl-display-flex gl-align-items-center gl-relative"> <design-image v-if="image" :image="image" diff --git a/app/assets/javascripts/design_management/components/design_sidebar.vue b/app/assets/javascripts/design_management/components/design_sidebar.vue index 81d0b6d0df4..8a6dd17a25b 100644 --- a/app/assets/javascripts/design_management/components/design_sidebar.vue +++ b/app/assets/javascripts/design_management/components/design_sidebar.vue @@ -1,5 +1,5 @@ <script> -import { GlCollapse, GlButton, GlPopover } from '@gitlab/ui'; +import { GlCollapse, GlButton, GlPopover, GlSkeletonLoader } from '@gitlab/ui'; import { getCookie, setCookie, parseBoolean, isLoggedIn } from '~/lib/utils/common_utils'; import { s__ } from '~/locale'; @@ -20,6 +20,7 @@ export default { GlCollapse, GlButton, GlPopover, + GlSkeletonLoader, DesignTodoButton, }, mixins: [glFeatureFlagsMixin()], @@ -50,6 +51,10 @@ export default { type: String, required: true, }, + isLoading: { + type: Boolean, + required: true, + }, }, data() { return { @@ -65,11 +70,11 @@ export default { issue() { return { ...this.design.issue, - webPath: this.design.issue.webPath.substr(1), + webPath: this.design.issue?.webPath.substr(1), }; }, discussionParticipants() { - return extractParticipants(this.issue.participants.nodes); + return extractParticipants(this.issue.participants?.nodes || []); }, resolvedDiscussions() { return this.discussions.filter((discussion) => discussion.resolved); @@ -142,91 +147,94 @@ export default { :show-participant-label="false" class="gl-mb-4" /> - <h2 - v-if="isLoggedIn && unresolvedDiscussions.length === 0" - class="new-discussion-disclaimer gl-font-base gl-m-0 gl-mb-4" - data-testid="new-discussion-disclaimer" - > - {{ s__("DesignManagement|Click the image where you'd like to start a new discussion") }} - </h2> - <design-note-signed-out - v-if="!isLoggedIn" - class="gl-mb-4" - :register-path="registerPath" - :sign-in-path="signInPath" - :is-add-discussion="true" - /> - <design-discussion - v-for="discussion in unresolvedDiscussions" - :key="discussion.id" - :discussion="discussion" - :design-id="$route.params.id" - :noteable-id="design.id" - :markdown-preview-path="markdownPreviewPath" - :register-path="registerPath" - :sign-in-path="signInPath" - :resolved-discussions-expanded="resolvedDiscussionsExpanded" - :discussion-with-open-form="discussionWithOpenForm" - data-testid="unresolved-discussion" - @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)" - @open-form="updateDiscussionWithOpenForm" - /> - <template v-if="resolvedDiscussions.length > 0"> - <gl-button - id="resolved-comments" - ref="resolvedComments" - data-testid="resolved-comments" - :icon="resolvedCommentsToggleIcon" - variant="link" - class="link-inherit-color gl-text-body gl-text-decoration-none gl-font-weight-bold gl-mb-4" - @click="$emit('toggleResolvedComments')" - >{{ $options.resolveCommentsToggleText }} ({{ resolvedDiscussions.length }}) - </gl-button> - <gl-popover - v-if="!isResolvedCommentsPopoverHidden" - :show="!isResolvedCommentsPopoverHidden" - target="resolved-comments" - container="popovercontainer" - placement="top" - :title="s__('DesignManagement|Resolved Comments')" + <gl-skeleton-loader v-if="isLoading" /> + <template v-else> + <h2 + v-if="isLoggedIn && unresolvedDiscussions.length === 0" + class="new-discussion-disclaimer gl-font-base gl-m-0 gl-mb-4" + data-testid="new-discussion-disclaimer" > - <p> - {{ - s__( - 'DesignManagement|Comments you resolve can be viewed and unresolved by going to the "Resolved Comments" section below', - ) - }} - </p> - <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 + {{ s__("DesignManagement|Click the image where you'd like to start a new discussion") }} + </h2> + <design-note-signed-out + v-if="!isLoggedIn" + class="gl-mb-4" + :register-path="registerPath" + :sign-in-path="signInPath" + :is-add-discussion="true" + /> + <design-discussion + v-for="discussion in unresolvedDiscussions" + :key="discussion.id" + :discussion="discussion" + :design-id="$route.params.id" + :noteable-id="design.id" + :markdown-preview-path="markdownPreviewPath" + :register-path="registerPath" + :sign-in-path="signInPath" + :resolved-discussions-expanded="resolvedDiscussionsExpanded" + :discussion-with-open-form="discussionWithOpenForm" + data-testid="unresolved-discussion" + @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)" + @open-form="updateDiscussionWithOpenForm" + /> + <template v-if="resolvedDiscussions.length > 0"> + <gl-button + id="resolved-comments" + ref="resolvedComments" + data-testid="resolved-comments" + :icon="resolvedCommentsToggleIcon" + variant="link" + class="link-inherit-color gl-text-body gl-text-decoration-none gl-font-weight-bold gl-mb-4" + @click="$emit('toggleResolvedComments')" + >{{ $options.resolveCommentsToggleText }} ({{ resolvedDiscussions.length }}) + </gl-button> + <gl-popover + v-if="!isResolvedCommentsPopoverHidden" + :show="!isResolvedCommentsPopoverHidden" + target="resolved-comments" + container="popovercontainer" + placement="top" + :title="s__('DesignManagement|Resolved Comments')" > - </gl-popover> - <gl-collapse :visible="resolvedDiscussionsExpanded" class="gl-mt-3"> - <design-discussion - v-for="discussion in resolvedDiscussions" - :key="discussion.id" - :discussion="discussion" - :design-id="$route.params.id" - :noteable-id="design.id" - :markdown-preview-path="markdownPreviewPath" - :register-path="registerPath" - :sign-in-path="signInPath" - :resolved-discussions-expanded="resolvedDiscussionsExpanded" - :discussion-with-open-form="discussionWithOpenForm" - data-testid="resolved-discussion" - @error="$emit('onDesignDiscussionError', $event)" - @updateNoteError="$emit('updateNoteError', $event)" - @open-form="updateDiscussionWithOpenForm" - @click.native.stop="updateActiveDiscussion(discussion.notes[0].id)" - /> - </gl-collapse> + <p> + {{ + s__( + 'DesignManagement|Comments you resolve can be viewed and unresolved by going to the "Resolved Comments" section below', + ) + }} + </p> + <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 + v-for="discussion in resolvedDiscussions" + :key="discussion.id" + :discussion="discussion" + :design-id="$route.params.id" + :noteable-id="design.id" + :markdown-preview-path="markdownPreviewPath" + :register-path="registerPath" + :sign-in-path="signInPath" + :resolved-discussions-expanded="resolvedDiscussionsExpanded" + :discussion-with-open-form="discussionWithOpenForm" + data-testid="resolved-discussion" + @error="$emit('onDesignDiscussionError', $event)" + @updateNoteError="$emit('updateNoteError', $event)" + @open-form="updateDiscussionWithOpenForm" + @click.native.stop="updateActiveDiscussion(discussion.notes[0].id)" + /> + </gl-collapse> + </template> + <slot name="reply-form"></slot> </template> - <slot name="reply-form"></slot> </div> </template> diff --git a/app/assets/javascripts/design_management/components/toolbar/index.vue b/app/assets/javascripts/design_management/components/toolbar/index.vue index 7b2e52276bf..6d571365306 100644 --- a/app/assets/javascripts/design_management/components/toolbar/index.vue +++ b/app/assets/javascripts/design_management/components/toolbar/index.vue @@ -1,5 +1,5 @@ <script> -import { GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui'; +import { GlButton, GlIcon, GlTooltipDirective, GlSkeletonLoader } from '@gitlab/ui'; import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql'; import { __, s__, sprintf } from '~/locale'; import timeagoMixin from '~/vue_shared/mixins/timeago'; @@ -14,6 +14,7 @@ export default { components: { GlButton, GlIcon, + GlSkeletonLoader, DesignNavigation, DeleteButton, }, @@ -61,6 +62,10 @@ export default { type: String, required: true, }, + isLoading: { + type: Boolean, + required: true, + }, }, data() { return { @@ -113,7 +118,8 @@ export default { <gl-icon name="close" /> </router-link> <div class="gl-overflow-hidden gl-display-flex gl-align-items-center"> - <h2 class="gl-m-0 str-truncated-100 gl-font-base">{{ filename }}</h2> + <gl-skeleton-loader v-if="isLoading" :lines="1" /> + <h2 v-else class="gl-m-0 str-truncated-100 gl-font-base">{{ filename }}</h2> <small v-if="updatedAt" class="gl-text-gray-500">{{ updatedText }}</small> </div> </div> diff --git a/app/assets/javascripts/design_management/pages/design/index.vue b/app/assets/javascripts/design_management/pages/design/index.vue index 2b395921ee1..1825ce7f092 100644 --- a/app/assets/javascripts/design_management/pages/design/index.vue +++ b/app/assets/javascripts/design_management/pages/design/index.vue @@ -1,5 +1,5 @@ <script> -import { GlLoadingIcon, GlAlert } from '@gitlab/ui'; +import { GlAlert } from '@gitlab/ui'; import { isNull } from 'lodash'; import Mousetrap from 'mousetrap'; import { ApolloMutation } from 'vue-apollo'; @@ -56,7 +56,6 @@ export default { DesignScaler, DesignDestroyer, Toolbar, - GlLoadingIcon, GlAlert, DesignSidebar, }, @@ -118,10 +117,8 @@ export default { }, }, computed: { - isFirstLoading() { - // We only want to show spinner on initial design load (when opened from a deep link to design) - // If we already have cached a design, loading shouldn't be indicated to user - return this.$apollo.queries.design.loading && !this.design.filename; + isLoading() { + return this.$apollo.queries.design.loading; }, discussions() { if (!this.design.discussions) { @@ -343,88 +340,88 @@ export default { <div class="design-detail js-design-detail fixed-top gl-w-full gl-bottom-0 gl-display-flex gl-justify-content-center gl-flex-direction-column gl-lg-flex-direction-row" > - <gl-loading-icon v-if="isFirstLoading" size="xl" class="gl-align-self-center" /> - <template v-else> - <div - class="gl-display-flex gl-overflow-hidden gl-flex-grow-1 gl-flex-direction-column gl-relative" + <div + class="gl-display-flex gl-overflow-hidden gl-flex-grow-1 gl-flex-direction-column gl-relative" + > + <design-destroyer + :filenames="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ [ + design.filename, + ] /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */" + :project-path="projectPath" + :iid="issueIid" + @done="$router.push({ name: $options.DESIGNS_ROUTE_NAME })" + @error="onDesignDeleteError" > - <design-destroyer - :filenames="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ [ - design.filename, - ] /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */" - :project-path="projectPath" - :iid="issueIid" - @done="$router.push({ name: $options.DESIGNS_ROUTE_NAME })" - @error="onDesignDeleteError" - > - <template #default="{ mutate, loading }"> - <toolbar - :id="id" - :is-deleting="loading" - :is-latest-version="isLatestVersion" - v-bind="design" - @delete="mutate" - /> - </template> - </design-destroyer> + <template #default="{ mutate, loading }"> + <toolbar + :id="id" + :is-deleting="loading" + :is-latest-version="isLatestVersion" + :is-loading="isLoading" + v-bind="design" + @delete="mutate" + /> + </template> + </design-destroyer> - <div v-if="errorMessage" class="gl-p-5"> - <gl-alert variant="danger" @dismiss="errorMessage = null"> - {{ errorMessage }} - </gl-alert> - </div> - <design-presentation - :image="design.image" - :image-name="design.filename" - :discussions="discussions" - :is-annotating="isAnnotating" - :scale="scale" - :resolved-discussions-expanded="resolvedDiscussionsExpanded" - @openCommentForm="openCommentForm" - @closeCommentForm="closeCommentForm" - @moveNote="onMoveNote" - @setMaxScale="setMaxScale" - /> - - <div - class="design-scaler-wrapper gl-absolute gl-mb-6 gl-display-flex gl-justify-content-center gl-align-items-center" - > - <design-scaler :max-scale="maxScale" @scale="scale = $event" /> - </div> + <div v-if="errorMessage" class="gl-p-5"> + <gl-alert variant="danger" @dismiss="errorMessage = null"> + {{ errorMessage }} + </gl-alert> </div> - <design-sidebar - :design="design" + <design-presentation + :image="design.image" + :image-name="design.filename" + :discussions="discussions" + :is-annotating="isAnnotating" + :scale="scale" :resolved-discussions-expanded="resolvedDiscussionsExpanded" - :markdown-preview-path="markdownPreviewPath" - @onDesignDiscussionError="onDesignDiscussionError" - @onCreateImageDiffNoteError="onCreateImageDiffNoteError" - @updateNoteError="onUpdateNoteError" - @resolveDiscussionError="onResolveDiscussionError" - @toggleResolvedComments="toggleResolvedComments" - @todoError="onTodoError" + :is-loading="isLoading" + @openCommentForm="openCommentForm" + @closeCommentForm="closeCommentForm" + @moveNote="onMoveNote" + @setMaxScale="setMaxScale" + /> + + <div + class="design-scaler-wrapper gl-absolute gl-mb-6 gl-display-flex gl-justify-content-center gl-align-items-center" > - <template #reply-form> - <apollo-mutation - v-if="isAnnotating" - #default="{ mutate, loading }" - :mutation="$options.createImageDiffNoteMutation" - :variables="{ - input: mutationPayload, - }" - :update="addImageDiffNoteToStore" - @done="closeCommentForm" - @error="onCreateImageDiffNoteError" - > - <design-reply-form - ref="newDiscussionForm" - v-model="comment" - :is-saving="loading" - :markdown-preview-path="markdownPreviewPath" - @submit-form="mutate" - @cancel-form="closeCommentForm" - /> </apollo-mutation - ></template> - </design-sidebar> - </template> + <design-scaler :max-scale="maxScale" @scale="scale = $event" /> + </div> + </div> + <design-sidebar + :design="design" + :resolved-discussions-expanded="resolvedDiscussionsExpanded" + :markdown-preview-path="markdownPreviewPath" + :is-loading="isLoading" + @onDesignDiscussionError="onDesignDiscussionError" + @onCreateImageDiffNoteError="onCreateImageDiffNoteError" + @updateNoteError="onUpdateNoteError" + @resolveDiscussionError="onResolveDiscussionError" + @toggleResolvedComments="toggleResolvedComments" + @todoError="onTodoError" + > + <template #reply-form> + <apollo-mutation + v-if="isAnnotating" + #default="{ mutate, loading }" + :mutation="$options.createImageDiffNoteMutation" + :variables="{ + input: mutationPayload, + }" + :update="addImageDiffNoteToStore" + @done="closeCommentForm" + @error="onCreateImageDiffNoteError" + > + <design-reply-form + ref="newDiscussionForm" + v-model="comment" + :is-saving="loading" + :markdown-preview-path="markdownPreviewPath" + @submit-form="mutate" + @cancel-form="closeCommentForm" + /> </apollo-mutation + ></template> + </design-sidebar> </div> </template> |