<commit_before><script>
  /* global Flash */
  import { mapActions, mapGetters } from 'vuex';
  import { SYSTEM_NOTE } from '../constants';
  import issueNote from './issue_note.vue';
  import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
  import issueNoteHeader from './issue_note_header.vue';
  import issueNoteActions from './issue_note_actions.vue';
  import issueNoteSignedOutWidget from './issue_note_signed_out_widget.vue';
  import issueNoteEditedText from './issue_note_edited_text.vue';
  import issueNoteForm from './issue_note_form.vue';
  import placeholderNote from './issue_placeholder_note.vue';
  import placeholderSystemNote from './issue_placeholder_system_note.vue';
  import autosave from '../mixins/autosave';

  export default {
    props: {
      note: {
        type: Object,
        required: true,
      },
    },
    data() {
      return {
        isReplying: false,
      };
    },
    components: {
      issueNote,
      userAvatarLink,
      issueNoteHeader,
      issueNoteActions,
      issueNoteSignedOutWidget,
      issueNoteEditedText,
      issueNoteForm,
      placeholderNote,
      placeholderSystemNote,
    },
    mixins: [
      autosave,
    ],
    computed: {
      ...mapGetters([
        'getIssueData',
      ]),
      discussion() {
        return this.note.notes[0];
      },
      author() {
        return this.discussion.author;
      },
      canReply() {
        return this.getIssueData.current_user.can_create_note;
      },
      newNotePath() {
        return this.getIssueData.create_note_path;
      },
    },
    methods: {
      ...mapActions([
        'saveNote',
        'toggleDiscussion',
      ]),
      componentName(note) {
        if (note.isPlaceholderNote) {
          if (note.placeholderType === SYSTEM_NOTE) {
            return placeholderSystemNote;
          }
          return placeholderNote;
        }

        return issueNote;
      },
      componentData(note) {
        return note.isPlaceholderNote ? note.notes[0] : note;
      },
      toggleDiscussionHandler() {
        this.toggleDiscussion({ discussionId: this.note.id });
      },
      showReplyForm() {
        this.isReplying = true;
      },
      cancelReplyForm(shouldConfirm) {
        if (shouldConfirm && this.$refs.noteForm.isDirty) {
          // eslint-disable-next-line no-alert
          if (!confirm('Are you sure you want to cancel creating this comment?')) {
            return;
          }
        }

        this.resetAutoSave();
        this.isReplying = false;
      },
      saveReply(noteText) {
        const replyData = {
          endpoint: this.newNotePath,
          flashContainer: this.$el,
          data: {
            in_reply_to_discussion_id: this.note.reply_id,
            target_type: 'issue',
            target_id: this.discussion.noteable_id,
            note: { note: noteText },
          },
        };

        this.saveNote(replyData)
          .then(() => {
            this.isReplying = false;
            this.resetAutoSave();
          })
          .catch(() => Flash('Something went wrong while adding your reply. Please try again.'));
      },
    },
    mounted() {
      if (this.isReplying) {
        this.initAutoSave();
      }
    },
    updated() {
      if (this.isReplying) {
        if (!this.autosave) {
          this.initAutoSave();
        } else {
          this.setAutoSave();
        }
      }
    },
  };
</script>

<template>
  <li class="note note-discussion timeline-entry">
    <div class="timeline-entry-inner">
      <div class="timeline-icon">
        <user-avatar-link
          :link-href="author.path"
          :img-src="author.avatar_url"
          :img-alt="author.name"
          :img-size="40"
          />
      </div>
      <div class="timeline-content">
        <div class="discussion">
          <div class="discussion-header">
            <issue-note-header
              :author="author"
              :created-at="discussion.created_at"
              :note-id="discussion.id"
              :include-toggle="true"
              @toggleHandler="toggleDiscussionHandler"
              action-text="started a discussion"
              class="discussion"
              />
            <issue-note-edited-text
              v-if="note.last_updated_by"
              :edited-at="note.last_updated_at"
              :edited-by="note.last_updated_by"
              action-text="Last updated"
              class-name="discussion-headline-light js-discussion-headline"
              />
            </div>
          </div>
          <div
            v-if="note.expanded"
            class="discussion-body">
            <div class="panel panel-default">
              <div class="discussion-notes">
                <ul class="notes">
                  <component
                    v-for="note in note.notes"
                    :is="componentName(note)"
                    :note="componentData(note)"
                    :key="note.id"
                    />
                </ul>
                <div class="flash-container"></div>
                <div
                  :class="{ 'is-replying': isReplying }"
                  class="discussion-reply-holder"><commit_msg>IssueNotesRefactor: Fix discussion last updated text.<commit_after><script>
  /* global Flash */
  import { mapActions, mapGetters } from 'vuex';
  import { SYSTEM_NOTE } from '../constants';
  import issueNote from './issue_note.vue';
  import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
  import issueNoteHeader from './issue_note_header.vue';
  import issueNoteActions from './issue_note_actions.vue';
  import issueNoteSignedOutWidget from './issue_note_signed_out_widget.vue';
  import issueNoteEditedText from './issue_note_edited_text.vue';
  import issueNoteForm from './issue_note_form.vue';
  import placeholderNote from './issue_placeholder_note.vue';
  import placeholderSystemNote from './issue_placeholder_system_note.vue';
  import autosave from '../mixins/autosave';

  export default {
    props: {
      note: {
        type: Object,
        required: true,
      },
    },
    data() {
      return {
        isReplying: false,
      };
    },
    components: {
      issueNote,
      userAvatarLink,
      issueNoteHeader,
      issueNoteActions,
      issueNoteSignedOutWidget,
      issueNoteEditedText,
      issueNoteForm,
      placeholderNote,
      placeholderSystemNote,
    },
    mixins: [
      autosave,
    ],
    computed: {
      ...mapGetters([
        'getIssueData',
      ]),
      discussion() {
        return this.note.notes[0];
      },
      author() {
        return this.discussion.author;
      },
      canReply() {
        return this.getIssueData.current_user.can_create_note;
      },
      newNotePath() {
        return this.getIssueData.create_note_path;
      },
      lastUpdatedBy() {
        const { notes } = this.note;

        if (notes.length > 1) {
          return notes[notes.length - 1].author;
        }

        return null;
      },
      lastUpdatedAt() {
        const { notes } = this.note;

        if (notes.length > 1) {
          return notes[notes.length - 1].created_at;
        }

        return null;
      }
    },
    methods: {
      ...mapActions([
        'saveNote',
        'toggleDiscussion',
      ]),
      componentName(note) {
        if (note.isPlaceholderNote) {
          if (note.placeholderType === SYSTEM_NOTE) {
            return placeholderSystemNote;
          }
          return placeholderNote;
        }

        return issueNote;
      },
      componentData(note) {
        return note.isPlaceholderNote ? note.notes[0] : note;
      },
      toggleDiscussionHandler() {
        this.toggleDiscussion({ discussionId: this.note.id });
      },
      showReplyForm() {
        this.isReplying = true;
      },
      cancelReplyForm(shouldConfirm) {
        if (shouldConfirm && this.$refs.noteForm.isDirty) {
          // eslint-disable-next-line no-alert
          if (!confirm('Are you sure you want to cancel creating this comment?')) {
            return;
          }
        }

        this.resetAutoSave();
        this.isReplying = false;
      },
      saveReply(noteText) {
        const replyData = {
          endpoint: this.newNotePath,
          flashContainer: this.$el,
          data: {
            in_reply_to_discussion_id: this.note.reply_id,
            target_type: 'issue',
            target_id: this.discussion.noteable_id,
            note: { note: noteText },
          },
        };

        this.saveNote(replyData)
          .then(() => {
            this.isReplying = false;
            this.resetAutoSave();
          })
          .catch(() => Flash('Something went wrong while adding your reply. Please try again.'));
      },
    },
    mounted() {
      if (this.isReplying) {
        this.initAutoSave();
      }
    },
    updated() {
      if (this.isReplying) {
        if (!this.autosave) {
          this.initAutoSave();
        } else {
          this.setAutoSave();
        }
      }
    },
  };
</script>

<template>
  <li class="note note-discussion timeline-entry">
    <div class="timeline-entry-inner">
      <div class="timeline-icon">
        <user-avatar-link
          :link-href="author.path"
          :img-src="author.avatar_url"
          :img-alt="author.name"
          :img-size="40"
          />
      </div>
      <div class="timeline-content">
        <div class="discussion">
          <div class="discussion-header">
            <issue-note-header
              :author="author"
              :created-at="discussion.created_at"
              :note-id="discussion.id"
              :include-toggle="true"
              @toggleHandler="toggleDiscussionHandler"
              action-text="started a discussion"
              class="discussion"
              />
            <issue-note-edited-text
              v-if="lastUpdatedBy"
              :edited-at="lastUpdatedAt"
              :edited-by="lastUpdatedBy"
              action-text="Last updated"
              class-name="discussion-headline-light js-discussion-headline"
              />
            </div>
          </div>
          <div
            v-if="note.expanded"
            class="discussion-body">
            <div class="panel panel-default">
              <div class="discussion-notes">
                <ul class="notes">
                  <component
                    v-for="note in note.notes"
                    :is="componentName(note)"
                    :note="componentData(note)"
                    :key="note.id"
                    />
                </ul>
                <div class="flash-container"></div>
                <div
                  :class="{ 'is-replying': isReplying }"
                  class="discussion-reply-holder">
{'fraction_non_alphanumeric': 0.12159676232523915, 'fraction_numerical': 0.0011037527593818985, 'mean_word_length': 1.6966765873015872, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 57, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4938067', 'n_tokens_mistral': 3109, 'n_tokens_neox': 3000, 'n_words': 532}