IssueNotesRefactor: Create signed out widget.

app/assets/javascripts/notes/components/issue_comment_form.vue

@@ -3,6 +3,7 @@
 
 import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import MarkdownField from '../../vue_shared/components/markdown/field.vue';
+import IssueNoteSignedOutWidget from './issue_note_signed_out_widget.vue';
 
 export default {
   props: {},
@@ -23,8 +24,12 @@ export default {
   components: {
     UserAvatarLink,
     MarkdownField,
+    IssueNoteSignedOutWidget,
   },
   computed: {
+    isLoggedIn() {
+      return window.gon.current_user_id;
+    },
     commentButtonTitle() {
       return this.noteType === 'comment' ? 'Comment' : 'Start discussion';
     },
@@ -109,10 +114,15 @@ export default {
 </script>
 
 <template>
-  <ul class="notes notes-form timeline new-note">
+  <div>
+    <issue-note-signed-out-widget v-if="!isLoggedIn" />
+    <ul
+      v-if="isLoggedIn"
+      class="notes notes-form timeline new-note">
       <li class="timeline-entry">
         <div class="timeline-icon hidden-xs hidden-sm">
           <user-avatar-link
+            v-if="author"
             :linkHref="author.path"
             :imgSrc="author.avatar_url"
             :imgAlt="author.name"
@@ -207,4 +217,5 @@ export default {
         </div>
       </li>
     </ul>
+  </div>
 </template>

app/assets/javascripts/notes/components/issue_discussion.vue

@@ -5,6 +5,7 @@ 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';
 
@@ -17,8 +18,6 @@ export default {
   },
   data() {
     return {
-      registerLink: '#',
-      signInLink: '#',
       newNotePath: window.gl.issueData.create_note_path,
       isReplying: false,
     };
@@ -40,18 +39,9 @@ export default {
     IssueNoteHeader,
     IssueNoteActions,
     IssueNoteEditedText,
+    IssueNoteSignedOutWidget,
     IssueNoteForm,
   },
-  mounted() {
-    // We need to grab the register and sign in links from DOM for the time being.
-    const registerLink = document.querySelector('.js-disabled-comment .js-register-link');
-    const signInLink = document.querySelector('.js-disabled-comment .js-sign-in-link');
-
-    if (registerLink && signInLink) {
-      this.registerLink = registerLink.getAttribute('href');
-      this.signInLink = signInLink.getAttribute('href');
-    }
-  },
   methods: {
     toggleDiscussion() {
       this.$store.commit('toggleDiscussion', {
@@ -149,15 +139,7 @@ export default {
                       :updateHandler="saveReply"
                       :cancelHandler="cancelReplyForm"
                       ref="noteForm" />
-                  <div
-                    v-if="!canReply"
-                    class="disabled-comment text-center">
-                    Please
-                    <a :href="registerLink">register</a>
-                    or
-                    <a :href="signInLink">sign in</a>
-                    to reply
-                  </div>
+                  <issue-note-signed-out-widget v-if="!canReply" />
                 </div>
               </div>
             </div>

app/assets/javascripts/notes/components/issue_note_signed_out_widget.vue

+<script>
+export default {
+  data() {
+    return {
+      signInLink: '#',
+    };
+  },
+  mounted() {
+    const wrapper = document.querySelector('.js-notes-wrapper');
+
+    if (wrapper) {
+      this.signInLink = wrapper.dataset.newSessionPath;
+    }
+  },
+};
+</script>
+
+<template>
+  <div class="disabled-comment text-center">
+    Please
+    <a :href="signInLink">register</a>
+    or
+    <a :href="signInLink">sign in</a>
+    to reply
+  </div>
+</template>

app/views/projects/issues/_discussion.html.haml

@@ -3,7 +3,7 @@
     = link_to 'Reopen issue', issue_path(@issue, issue: {state_event: :reopen}, format: 'json'), data: {original_text: "Reopen issue", alternative_text: "Comment & reopen issue"}, class: "btn btn-nr btn-reopen btn-comment js-note-target-reopen #{issue_button_visibility(@issue, false)}", title: 'Reopen issue'
     = link_to 'Close issue', issue_path(@issue, issue: {state_event: :close}, format: 'json'), data: {original_text: "Close issue", alternative_text: "Comment & close issue"}, class: "btn btn-nr btn-close btn-comment js-note-target-close #{issue_button_visibility(@issue, true)}", title: 'Close issue'
 
-%section{ data: { discussions_path: discussions_namespace_project_issue_path(@project.namespace, @project, @issue, format: :json), new_session_path: new_session_path(:user, redirect_to_referer: 'yes'), notes_path: notes_url, last_fetched_at: Time.now.to_i } }
+%section.js-notes-wrapper{ data: { discussions_path: discussions_namespace_project_issue_path(@project.namespace, @project, @issue, format: :json), new_session_path: new_session_path(:user, redirect_to_referer: 'yes'), notes_path: notes_url, last_fetched_at: Time.now.to_i } }
   #js-notes
   - content_for :page_specific_javascripts do
     = webpack_bundle_tag 'common_vue'