All files / app/assets/javascripts/design_management/components/design_notes design_reply_form.vue

100% Statements 18/18
100% Branches 12/12
100% Functions 10/10
100% Lines 18/18

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153  7x 7x 7x 7x                                                           25x           27x     25x 24x             1x               25x         25x       25x       6x     7x 2x   5x       25x           171x                                                                                                                                
<script>
import { GlButton, GlModal } from '@gitlab/ui';
import { helpPagePath } from '~/helpers/help_page_helper';
import { s__ } from '~/locale';
import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 
export default {
  name: 'DesignReplyForm',
  components: {
    MarkdownField,
    GlButton,
    GlModal,
  },
  props: {
    markdownPreviewPath: {
      type: String,
      required: false,
      default: '',
    },
    value: {
      type: String,
      required: true,
    },
    isSaving: {
      type: Boolean,
      required: true,
    },
    isNewComment: {
      type: Boolean,
      required: false,
      default: true,
    },
  },
  data() {
    return {
      formText: this.value,
    };
  },
  computed: {
    hasValue() {
      return this.value.trim().length > 0;
    },
    modalSettings() {
      if (this.isNewComment) {
        return {
          title: s__('DesignManagement|Cancel comment confirmation'),
          okTitle: s__('DesignManagement|Discard comment'),
          cancelTitle: s__('DesignManagement|Keep comment'),
          content: s__('DesignManagement|Are you sure you want to cancel creating this comment?'),
        };
      }
      return {
        title: s__('DesignManagement|Cancel comment update confirmation'),
        okTitle: s__('DesignManagement|Cancel changes'),
        cancelTitle: s__('DesignManagement|Keep changes'),
        content: s__('DesignManagement|Are you sure you want to cancel changes to this comment?'),
      };
    },
    buttonText() {
      return this.isNewComment
        ? s__('DesignManagement|Comment')
        : s__('DesignManagement|Save comment');
    },
    markdownDocsPath() {
      return helpPagePath('user/markdown');
    },
  },
  mounted() {
    this.focusInput();
  },
  methods: {
    submitForm() {
      if (this.hasValue) this.$emit('submit-form');
    },
    cancelComment() {
      if (this.hasValue && this.formText !== this.value) {
        this.$refs.cancelCommentModal.show();
      } else {
        this.$emit('cancel-form');
      }
    },
    focusInput() {
      this.$refs.textarea.focus();
    },
  },
};
</script>
 
<template>
  <form class="new-note common-note-form" @submit.prevent>
    <markdown-field
      :markdown-preview-path="markdownPreviewPath"
      :can-attach-file="false"
      :enable-autocomplete="true"
      :textarea-value="value"
      :markdown-docs-path="markdownDocsPath"
      class="bordered-box"
    >
      <template #textarea>
        <textarea
          ref="textarea"
          :value="value"
          class="note-textarea js-gfm-input js-autosize markdown-area"
          dir="auto"
          data-supports-quick-actions="false"
          data-qa-selector="note_textarea"
          :aria-label="__('Description')"
          :placeholder="__('Write a comment…')"
          @input="$emit('input', $event.target.value)"
          @keydown.meta.enter="submitForm"
          @keydown.ctrl.enter="submitForm"
          @keyup.esc.stop="cancelComment"
        >
        </textarea>
      </template>
    </markdown-field>
    <slot name="resolve-checkbox"></slot>
    <div class="note-form-actions gl-display-flex">
      <gl-button
        ref="submitButton"
        :disabled="!hasValue || isSaving"
        class="gl-mr-3 gl-w-auto!"
        category="primary"
        variant="confirm"
        type="submit"
        data-track-action="click_button"
        data-qa-selector="save_comment_button"
        @click="$emit('submit-form')"
      >
        {{ buttonText }}
      </gl-button>
      <gl-button
        ref="cancelButton"
        class="gl-w-auto!"
        variant="default"
        category="primary"
        @click="cancelComment"
        >{{ __('Cancel') }}</gl-button
      >
    </div>
    <gl-modal
      ref="cancelCommentModal"
      ok-variant="danger"
      :title="modalSettings.title"
      :ok-title="modalSettings.okTitle"
      :cancel-title="modalSettings.cancelTitle"
      modal-id="cancel-comment-modal"
      @ok="$emit('cancel-form')"
      >{{ modalSettings.content }}
    </gl-modal>
  </form>
</template>