debian-mirror-gitlab/app/assets/javascripts/design_management/pages/design/index.vue

416 lines
13 KiB
Vue
Raw Normal View History

2020-05-24 23:13:21 +05:30
<script>
import Mousetrap from 'mousetrap';
import { GlLoadingIcon, GlAlert } from '@gitlab/ui';
2020-06-23 00:09:42 +05:30
import { ApolloMutation } from 'vue-apollo';
2021-01-29 00:20:46 +05:30
import createFlash from '~/flash';
2020-05-24 23:13:21 +05:30
import { fetchPolicies } from '~/lib/graphql';
2021-02-22 17:27:13 +05:30
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
2020-05-24 23:13:21 +05:30
import allVersionsMixin from '../../mixins/all_versions';
import Toolbar from '../../components/toolbar/index.vue';
import DesignDestroyer from '../../components/design_destroyer.vue';
import DesignScaler from '../../components/design_scaler.vue';
import DesignPresentation from '../../components/design_presentation.vue';
2020-06-23 00:09:42 +05:30
import DesignReplyForm from '../../components/design_notes/design_reply_form.vue';
import DesignSidebar from '../../components/design_sidebar.vue';
2020-07-28 23:09:34 +05:30
import getDesignQuery from '../../graphql/queries/get_design.query.graphql';
import createImageDiffNoteMutation from '../../graphql/mutations/create_image_diff_note.mutation.graphql';
2021-01-29 00:20:46 +05:30
import repositionImageDiffNoteMutation from '../../graphql/mutations/reposition_image_diff_note.mutation.graphql';
2020-05-24 23:13:21 +05:30
import updateActiveDiscussionMutation from '../../graphql/mutations/update_active_discussion.mutation.graphql';
import {
extractDiscussions,
extractDesign,
2021-01-29 00:20:46 +05:30
repositionImageDiffNoteOptimisticResponse,
2020-11-24 15:15:51 +05:30
toDiffNoteGid,
extractDesignNoteId,
2021-01-29 00:20:46 +05:30
getPageLayoutElement,
2020-05-24 23:13:21 +05:30
} from '../../utils/design_management_utils';
import {
updateStoreAfterAddImageDiffNote,
2021-01-29 00:20:46 +05:30
updateStoreAfterRepositionImageDiffNote,
2020-05-24 23:13:21 +05:30
} from '../../utils/cache_update';
import {
ADD_DISCUSSION_COMMENT_ERROR,
ADD_IMAGE_DIFF_NOTE_ERROR,
UPDATE_IMAGE_DIFF_NOTE_ERROR,
DESIGN_NOT_FOUND_ERROR,
DESIGN_VERSION_NOT_EXIST_ERROR,
UPDATE_NOTE_ERROR,
2020-11-24 15:15:51 +05:30
TOGGLE_TODO_ERROR,
2020-05-24 23:13:21 +05:30
designDeletionError,
} from '../../utils/error_messages';
2021-02-22 17:27:13 +05:30
import { trackDesignDetailView, usagePingDesignDetailView } from '../../utils/tracking';
2020-05-24 23:13:21 +05:30
import { DESIGNS_ROUTE_NAME } from '../../router/constants';
2021-01-29 00:20:46 +05:30
import { ACTIVE_DISCUSSION_SOURCE_TYPES, DESIGN_DETAIL_LAYOUT_CLASSLIST } from '../../constants';
2020-05-24 23:13:21 +05:30
2021-01-03 14:25:43 +05:30
const DEFAULT_SCALE = 1;
2020-05-24 23:13:21 +05:30
export default {
components: {
ApolloMutation,
2020-06-23 00:09:42 +05:30
DesignReplyForm,
2020-05-24 23:13:21 +05:30
DesignPresentation,
DesignScaler,
DesignDestroyer,
Toolbar,
GlLoadingIcon,
GlAlert,
2020-06-23 00:09:42 +05:30
DesignSidebar,
2020-05-24 23:13:21 +05:30
},
2021-02-22 17:27:13 +05:30
mixins: [allVersionsMixin, glFeatureFlagsMixin()],
2020-05-24 23:13:21 +05:30
props: {
id: {
type: String,
required: true,
},
},
data() {
return {
design: {},
comment: '',
annotationCoordinates: null,
errorMessage: '',
2021-01-03 14:25:43 +05:30
scale: DEFAULT_SCALE,
2020-06-23 00:09:42 +05:30
resolvedDiscussionsExpanded: false,
2020-05-24 23:13:21 +05:30
};
},
apollo: {
design: {
query: getDesignQuery,
// We want to see cached design version if we have one, and fetch newer version on the background to update discussions
fetchPolicy: fetchPolicies.CACHE_AND_NETWORK,
variables() {
return this.designVariables;
},
update: data => extractDesign(data),
result(res) {
this.onDesignQueryResult(res);
},
error() {
this.onQueryError(DESIGN_NOT_FOUND_ERROR);
},
},
},
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;
},
discussions() {
2020-06-23 00:09:42 +05:30
if (!this.design.discussions) {
return [];
}
2020-05-24 23:13:21 +05:30
return extractDiscussions(this.design.discussions);
},
markdownPreviewPath() {
return `/${this.projectPath}/preview_markdown?target_type=Issue`;
},
isSubmitButtonDisabled() {
return this.comment.trim().length === 0;
},
designVariables() {
return {
fullPath: this.projectPath,
iid: this.issueIid,
filenames: [this.$route.params.id],
atVersion: this.designsVersion,
};
},
mutationPayload() {
const { x, y, width, height } = this.annotationCoordinates;
return {
noteableId: this.design.id,
body: this.comment,
position: {
headSha: this.design.diffRefs.headSha,
baseSha: this.design.diffRefs.baseSha,
startSha: this.design.diffRefs.startSha,
x,
y,
width,
height,
paths: {
newPath: this.design.fullPath,
},
},
};
},
isAnnotating() {
return Boolean(this.annotationCoordinates);
},
2020-06-23 00:09:42 +05:30
resolvedDiscussions() {
return this.discussions.filter(discussion => discussion.resolved);
},
},
watch: {
resolvedDiscussions(val) {
if (!val.length) {
this.resolvedDiscussionsExpanded = false;
}
},
2020-05-24 23:13:21 +05:30
},
mounted() {
Mousetrap.bind('esc', this.closeDesign);
2021-02-22 17:27:13 +05:30
this.trackPageViewEvent();
2020-11-24 15:15:51 +05:30
// Set active discussion immediately.
// This will ensure that, if a note is specified in the URL hash,
// the browser will scroll to, and highlight, the note in the UI
this.updateActiveDiscussionFromUrl();
2020-05-24 23:13:21 +05:30
},
beforeDestroy() {
Mousetrap.unbind('esc', this.closeDesign);
},
2021-01-03 14:25:43 +05:30
beforeRouteUpdate(to, from, next) {
// reset scale when the active design changes
this.scale = DEFAULT_SCALE;
next();
},
2020-05-24 23:13:21 +05:30
methods: {
addImageDiffNoteToStore(
store,
{
data: { createImageDiffNote },
},
) {
updateStoreAfterAddImageDiffNote(
store,
createImageDiffNote,
getDesignQuery,
this.designVariables,
);
},
updateImageDiffNoteInStore(
store,
{
2021-01-29 00:20:46 +05:30
data: { repositionImageDiffNote },
2020-05-24 23:13:21 +05:30
},
) {
2021-01-29 00:20:46 +05:30
return updateStoreAfterRepositionImageDiffNote(
2020-05-24 23:13:21 +05:30
store,
2021-01-29 00:20:46 +05:30
repositionImageDiffNote,
2020-05-24 23:13:21 +05:30
getDesignQuery,
this.designVariables,
);
},
onMoveNote({ noteId, discussionId, position }) {
const discussion = this.discussions.find(({ id }) => id === discussionId);
const note = discussion.notes.find(
({ discussion: noteDiscussion }) => noteDiscussion.id === discussionId,
);
const mutationPayload = {
2021-01-29 00:20:46 +05:30
optimisticResponse: repositionImageDiffNoteOptimisticResponse(note, {
2020-05-24 23:13:21 +05:30
position,
}),
variables: {
input: {
id: noteId,
position,
},
},
2021-01-29 00:20:46 +05:30
mutation: repositionImageDiffNoteMutation,
2020-05-24 23:13:21 +05:30
update: this.updateImageDiffNoteInStore,
};
return this.$apollo.mutate(mutationPayload).catch(e => this.onUpdateImageDiffNoteError(e));
},
onDesignQueryResult({ data, loading }) {
// On the initial load with cache-and-network policy data is undefined while loading is true
// To prevent throwing an error, we don't perform any logic until loading is false
if (loading) {
return;
}
if (!data || !extractDesign(data)) {
this.onQueryError(DESIGN_NOT_FOUND_ERROR);
} else if (this.$route.query.version && !this.hasValidVersion) {
this.onQueryError(DESIGN_VERSION_NOT_EXIST_ERROR);
}
},
onQueryError(message) {
// because we redirect user to /designs (the issue page),
// we want to create these flashes on the issue page
2021-01-29 00:20:46 +05:30
createFlash({ message });
2020-05-24 23:13:21 +05:30
this.$router.push({ name: this.$options.DESIGNS_ROUTE_NAME });
},
onError(message, e) {
this.errorMessage = message;
2020-11-24 15:15:51 +05:30
if (e) throw e;
2020-05-24 23:13:21 +05:30
},
onCreateImageDiffNoteError(e) {
this.onError(ADD_IMAGE_DIFF_NOTE_ERROR, e);
},
onUpdateNoteError(e) {
this.onError(UPDATE_NOTE_ERROR, e);
},
onDesignDiscussionError(e) {
this.onError(ADD_DISCUSSION_COMMENT_ERROR, e);
},
onUpdateImageDiffNoteError(e) {
this.onError(UPDATE_IMAGE_DIFF_NOTE_ERROR, e);
},
onDesignDeleteError(e) {
this.onError(designDeletionError({ singular: true }), e);
},
2020-06-23 00:09:42 +05:30
onResolveDiscussionError(e) {
this.onError(UPDATE_IMAGE_DIFF_NOTE_ERROR, e);
},
2020-11-24 15:15:51 +05:30
onTodoError(e) {
this.onError(e?.message || TOGGLE_TODO_ERROR, e);
},
2020-05-24 23:13:21 +05:30
openCommentForm(annotationCoordinates) {
this.annotationCoordinates = annotationCoordinates;
2020-07-28 23:09:34 +05:30
if (this.$refs.newDiscussionForm) {
this.$refs.newDiscussionForm.focusInput();
}
2020-05-24 23:13:21 +05:30
},
closeCommentForm() {
this.comment = '';
this.annotationCoordinates = null;
},
closeDesign() {
this.$router.push({
name: this.$options.DESIGNS_ROUTE_NAME,
query: this.$route.query,
});
},
2021-02-22 17:27:13 +05:30
trackPageViewEvent() {
2020-05-24 23:13:21 +05:30
// TODO: This needs to be made aware of referers, or if it's rendered in a different context than a Issue
trackDesignDetailView(
'issue-design-collection',
'issue',
this.$route.query.version || this.latestVersionId,
this.isLatestVersion,
);
2021-02-22 17:27:13 +05:30
if (this.glFeatures.usageDataDesignAction) {
usagePingDesignDetailView();
}
2020-05-24 23:13:21 +05:30
},
2020-11-24 15:15:51 +05:30
updateActiveDiscussion(id, source = ACTIVE_DISCUSSION_SOURCE_TYPES.discussion) {
2020-05-24 23:13:21 +05:30
this.$apollo.mutate({
mutation: updateActiveDiscussionMutation,
variables: {
id,
2020-11-24 15:15:51 +05:30
source,
2020-05-24 23:13:21 +05:30
},
});
},
2020-11-24 15:15:51 +05:30
updateActiveDiscussionFromUrl() {
const noteId = extractDesignNoteId(this.$route.hash);
const diffNoteGid = noteId ? toDiffNoteGid(noteId) : undefined;
return this.updateActiveDiscussion(diffNoteGid, ACTIVE_DISCUSSION_SOURCE_TYPES.url);
},
2020-06-23 00:09:42 +05:30
toggleResolvedComments() {
this.resolvedDiscussionsExpanded = !this.resolvedDiscussionsExpanded;
},
2020-05-24 23:13:21 +05:30
},
2021-01-29 00:20:46 +05:30
beforeRouteEnter(to, from, next) {
const pageEl = getPageLayoutElement();
if (pageEl) {
pageEl.classList.add(...DESIGN_DETAIL_LAYOUT_CLASSLIST);
}
next();
},
beforeRouteLeave(to, from, next) {
const pageEl = getPageLayoutElement();
if (pageEl) {
pageEl.classList.remove(...DESIGN_DETAIL_LAYOUT_CLASSLIST);
}
next();
},
2020-05-24 23:13:21 +05:30
createImageDiffNoteMutation,
DESIGNS_ROUTE_NAME,
};
</script>
<template>
<div
2021-01-03 14:25:43 +05:30
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"
2020-05-24 23:13:21 +05:30
>
2021-01-03 14:25:43 +05:30
<gl-loading-icon v-if="isFirstLoading" size="xl" class="gl-align-self-center" />
2020-05-24 23:13:21 +05:30
<template v-else>
2021-01-03 14:25:43 +05:30
<div
class="gl-display-flex gl-overflow-hidden gl-flex-grow-1 gl-flex-direction-column gl-relative"
>
2020-05-24 23:13:21 +05:30
<design-destroyer
:filenames="[design.filename]"
: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>
2021-01-03 14:25:43 +05:30
<div v-if="errorMessage" class="gl-p-5">
2020-05-24 23:13:21 +05:30
<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"
2020-06-23 00:09:42 +05:30
:resolved-discussions-expanded="resolvedDiscussionsExpanded"
2020-05-24 23:13:21 +05:30
@openCommentForm="openCommentForm"
@closeCommentForm="closeCommentForm"
@moveNote="onMoveNote"
/>
2021-01-03 14:25:43 +05:30
<div
class="design-scaler-wrapper gl-absolute gl-mb-6 gl-display-flex gl-justify-content-center gl-align-items-center"
>
2020-05-24 23:13:21 +05:30
<design-scaler @scale="scale = $event" />
</div>
</div>
2020-06-23 00:09:42 +05:30
<design-sidebar
:design="design"
:resolved-discussions-expanded="resolvedDiscussionsExpanded"
:markdown-preview-path="markdownPreviewPath"
@onDesignDiscussionError="onDesignDiscussionError"
@onCreateImageDiffNoteError="onCreateImageDiffNoteError"
@updateNoteError="onUpdateNoteError"
@resolveDiscussionError="onResolveDiscussionError"
@toggleResolvedComments="toggleResolvedComments"
2020-11-24 15:15:51 +05:30
@todoError="onTodoError"
2020-06-23 00:09:42 +05:30
>
2021-01-29 00:20:46 +05:30
<template #reply-form>
2020-05-24 23:13:21 +05:30
<apollo-mutation
2020-06-23 00:09:42 +05:30
v-if="isAnnotating"
2020-05-24 23:13:21 +05:30
#default="{ mutate, loading }"
:mutation="$options.createImageDiffNoteMutation"
:variables="{
input: mutationPayload,
}"
:update="addImageDiffNoteToStore"
@done="closeCommentForm"
@error="onCreateImageDiffNoteError"
>
<design-reply-form
2020-07-28 23:09:34 +05:30
ref="newDiscussionForm"
2020-05-24 23:13:21 +05:30
v-model="comment"
:is-saving="loading"
:markdown-preview-path="markdownPreviewPath"
2020-11-24 15:15:51 +05:30
@submit-form="mutate"
@cancel-form="closeCommentForm"
2020-06-23 00:09:42 +05:30
/> </apollo-mutation
></template>
</design-sidebar>
2020-05-24 23:13:21 +05:30
</template>
</div>
</template>