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

<script>
import { GlAlert } from '@gitlab/ui';
import { isNull } from 'lodash';
import Mousetrap from 'mousetrap';
import { ApolloMutation } from 'vue-apollo';
import { keysFor, ISSUE_CLOSE_DESIGN } from '~/behaviors/shortcuts/keybindings';
import createFlash from '~/flash';
import { fetchPolicies } from '~/lib/graphql';
import { updateGlobalTodoCount } from '~/vue_shared/components/sidebar/todo_toggle/utils';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import DesignDestroyer from '../../components/design_destroyer.vue';
import DesignReplyForm from '../../components/design_notes/design_reply_form.vue';
import DesignPresentation from '../../components/design_presentation.vue';
import DesignScaler from '../../components/design_scaler.vue';
import DesignSidebar from '../../components/design_sidebar.vue';
import Toolbar from '../../components/toolbar/index.vue';
import { ACTIVE_DISCUSSION_SOURCE_TYPES, DESIGN_DETAIL_LAYOUT_CLASSLIST } from '../../constants';
import createImageDiffNoteMutation from '../../graphql/mutations/create_image_diff_note.mutation.graphql';
import repositionImageDiffNoteMutation from '../../graphql/mutations/reposition_image_diff_note.mutation.graphql';
import updateActiveDiscussionMutation from '../../graphql/mutations/update_active_discussion.mutation.graphql';
import getDesignQuery from '../../graphql/queries/get_design.query.graphql';
import allVersionsMixin from '../../mixins/all_versions';
import { DESIGNS_ROUTE_NAME } from '../../router/constants';
import {
  updateStoreAfterAddImageDiffNote,
  updateStoreAfterRepositionImageDiffNote,
} from '../../utils/cache_update';
import {
  extractDiscussions,
  extractDesign,
  repositionImageDiffNoteOptimisticResponse,
  toDiffNoteGid,
  extractDesignNoteId,
  getPageLayoutElement,
} from '../../utils/design_management_utils';
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,
  TOGGLE_TODO_ERROR,
  designDeletionError,
} from '../../utils/error_messages';
import { trackDesignDetailView, servicePingDesignDetailView } from '../../utils/tracking';

const DEFAULT_SCALE = 1;
const DEFAULT_MAX_SCALE = 2;

export default {
  components: {
    ApolloMutation,
    DesignReplyForm,
    DesignPresentation,
    DesignScaler,
    DesignDestroyer,
    Toolbar,
    GlAlert,
    DesignSidebar,
  },
  mixins: [allVersionsMixin, glFeatureFlagsMixin()],
  beforeRouteUpdate(to, from, next) {
    // reset scale when the active design changes
    this.scale = DEFAULT_SCALE;
    next();
  },
  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();
  },
  props: {
    id: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      design: {},
      comment: '',
      annotationCoordinates: null,
      errorMessage: '',
      scale: DEFAULT_SCALE,
      resolvedDiscussionsExpanded: false,
      prevCurrentUserTodos: null,
      maxScale: DEFAULT_MAX_SCALE,
    };
  },
  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: {
    isLoading() {
      return this.$apollo.queries.design.loading;
    },
    discussions() {
      if (!this.design.discussions) {
        return [];
      }
      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);
    },
    resolvedDiscussions() {
      return this.discussions.filter((discussion) => discussion.resolved);
    },
    currentUserTodos() {
      if (!this.design || !this.design.currentUserTodos) {
        return null;
      }

      return this.design.currentUserTodos?.nodes?.length;
    },
  },
  watch: {
    resolvedDiscussions(val) {
      if (!val.length) {
        this.resolvedDiscussionsExpanded = false;
      }
    },
    currentUserTodos(_, prevCurrentUserTodos) {
      this.prevCurrentUserTodos = prevCurrentUserTodos;
    },
  },
  mounted() {
    Mousetrap.bind(keysFor(ISSUE_CLOSE_DESIGN), this.closeDesign);
    this.trackPageViewEvent();

    // 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();
  },
  beforeDestroy() {
    Mousetrap.unbind(keysFor(ISSUE_CLOSE_DESIGN));
  },
  methods: {
    addImageDiffNoteToStore(store, { data: { createImageDiffNote } }) {
      updateStoreAfterAddImageDiffNote(
        store,
        createImageDiffNote,
        getDesignQuery,
        this.designVariables,
      );
    },
    updateImageDiffNoteInStore(store, { data: { repositionImageDiffNote } }) {
      return updateStoreAfterRepositionImageDiffNote(
        store,
        repositionImageDiffNote,
        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 = {
        optimisticResponse: repositionImageDiffNoteOptimisticResponse(note, {
          position,
        }),
        variables: {
          input: {
            id: noteId,
            position,
          },
        },
        mutation: repositionImageDiffNoteMutation,
        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
      createFlash({ message });
      this.$router.push({ name: this.$options.DESIGNS_ROUTE_NAME });
    },
    onError(message, e) {
      this.errorMessage = message;
      if (e) throw e;
    },
    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(), e);
    },
    onResolveDiscussionError(e) {
      this.onError(UPDATE_IMAGE_DIFF_NOTE_ERROR, e);
    },
    onTodoError(e) {
      this.onError(e?.message || TOGGLE_TODO_ERROR, e);
    },
    openCommentForm(annotationCoordinates) {
      this.annotationCoordinates = annotationCoordinates;
      if (this.$refs.newDiscussionForm) {
        this.$refs.newDiscussionForm.focusInput();
      }
    },
    closeCommentForm(data) {
      this.comment = '';
      this.annotationCoordinates = null;

      if (data?.data && !isNull(this.prevCurrentUserTodos)) {
        updateGlobalTodoCount(this.currentUserTodos - this.prevCurrentUserTodos);
        this.prevCurrentUserTodos = this.currentUserTodos;
      }
    },
    closeDesign() {
      this.$router.push({
        name: this.$options.DESIGNS_ROUTE_NAME,
        query: this.$route.query,
      });
    },
    trackPageViewEvent() {
      // 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,
      );

      servicePingDesignDetailView();
    },
    updateActiveDiscussion(id, source = ACTIVE_DISCUSSION_SOURCE_TYPES.discussion) {
      this.$apollo.mutate({
        mutation: updateActiveDiscussionMutation,
        variables: {
          id,
          source,
        },
      });
    },
    updateActiveDiscussionFromUrl() {
      const noteId = extractDesignNoteId(this.$route.hash);
      const diffNoteGid = noteId ? toDiffNoteGid(noteId) : undefined;
      return this.updateActiveDiscussion(diffNoteGid, ACTIVE_DISCUSSION_SOURCE_TYPES.url);
    },
    toggleResolvedComments() {
      this.resolvedDiscussionsExpanded = !this.resolvedDiscussionsExpanded;
    },
    setMaxScale(event) {
      this.maxScale = 1 / event;
    },
  },
  createImageDiffNoteMutation,
  DESIGNS_ROUTE_NAME,
};
</script>

<template>
  <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"
  >
    <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"
      >
        <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"
        :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"
      >
        <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>