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,102 +114,108 @@ export default {
 </script>
 
 <template>
-  <ul class="notes notes-form timeline new-note">
-    <li class="timeline-entry">
-      <div class="timeline-icon hidden-xs hidden-sm">
-        <user-avatar-link
-          :linkHref="author.path"
-          :imgSrc="author.avatar_url"
-          :imgAlt="author.name"
-          :imgSize="40" />
-      </div>
-      <div class="timeline-content timeline-content-form common-note-form">
-        <markdown-field
-          :markdown-preview-url="markdownPreviewUrl"
-          :markdown-docs="markdownDocsUrl"
-          :addSpacingClasses="false">
-          <textarea
-            id="note-body"
-            class="note-textarea js-gfm-input js-autosize markdown-area"
-            data-supports-slash-commands="true"
-            data-supports-quick-actions="true"
-            aria-label="Description"
-            v-model="note"
-            ref="textarea"
-            slot="textarea"
-            placeholder="Write a comment or drag your files here..."
-            @keydown.meta.enter="handleSave()">
-          </textarea>
-        </markdown-field>
-        <div class="note-form-actions clearfix">
-          <div class="pull-left btn-group append-right-10 comment-type-dropdown js-comment-type-dropdown">
-            <input
-              @click="handleSave()"
-              :disabled="!note.length"
-              :value="commentButtonTitle"
-              class="btn btn-nr btn-create comment-btn js-comment-button js-comment-submit-button"
-              type="submit" />
-            <button
-              :disabled="!note.length"
-              name="button"
-              type="button"
-              class="btn btn-nr comment-btn note-type-toggle js-note-new-discussion"
-              data-toggle="dropdown"
-              aria-label="Open comment type dropdown">
-              <i
-                aria-hidden="true"
-                class="fa fa-caret-down toggle-icon"></i>
-            </button>
-            <ul
-              class="dropdown-menu note-type-dropdown dropdown-open-top">
-              <li
-                :class="{ 'item-selected': noteType === 'comment' }"
-                @click.prevent="setNoteType('comment')">
-                <a href="#">
-                  <i
-                    aria-hidden="true"
-                    class="fa fa-check"></i>
-                  <div class="description">
-                    <strong>Comment</strong>
-                    <p>
-                      Add a general comment to this issue.
-                    </p>
-                  </div>
-                </a>
-              </li>
-              <li class="divider"></li>
-              <li
-                :class="{ 'item-selected': noteType === 'discussion' }"
-                @click.prevent="setNoteType('discussion')">
-                <a href="#">
-                  <i
-                    aria-hidden="true"
-                    class="fa fa-check"></i>
-                  <div class="description">
-                    <strong>Start discussion</strong>
-                    <p>
-                      Discuss a specific suggestion or question.
-                    </p>
-                  </div>
-                </a>
-              </li>
-            </ul>
+  <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"
+            :imgSize="40" />
+        </div>
+        <div class="timeline-content timeline-content-form common-note-form">
+          <markdown-field
+            :markdown-preview-url="markdownPreviewUrl"
+            :markdown-docs="markdownDocsUrl"
+            :addSpacingClasses="false">
+            <textarea
+              id="note-body"
+              class="note-textarea js-gfm-input js-autosize markdown-area"
+              data-supports-slash-commands="true"
+              data-supports-quick-actions="true"
+              aria-label="Description"
+              v-model="note"
+              ref="textarea"
+              slot="textarea"
+              placeholder="Write a comment or drag your files here..."
+              @keydown.meta.enter="handleSave()">
+            </textarea>
+          </markdown-field>
+          <div class="note-form-actions clearfix">
+            <div class="pull-left btn-group append-right-10 comment-type-dropdown js-comment-type-dropdown">
+              <input
+                @click="handleSave()"
+                :disabled="!note.length"
+                :value="commentButtonTitle"
+                class="btn btn-nr btn-create comment-btn js-comment-button js-comment-submit-button"
+                type="submit" />
+              <button
+                :disabled="!note.length"
+                name="button"
+                type="button"
+                class="btn btn-nr comment-btn note-type-toggle js-note-new-discussion"
+                data-toggle="dropdown"
+                aria-label="Open comment type dropdown">
+                <i
+                  aria-hidden="true"
+                  class="fa fa-caret-down toggle-icon"></i>
+              </button>
+              <ul
+                class="dropdown-menu note-type-dropdown dropdown-open-top">
+                <li
+                  :class="{ 'item-selected': noteType === 'comment' }"
+                  @click.prevent="setNoteType('comment')">
+                  <a href="#">
+                    <i
+                      aria-hidden="true"
+                      class="fa fa-check"></i>
+                    <div class="description">
+                      <strong>Comment</strong>
+                      <p>
+                        Add a general comment to this issue.
+                      </p>
+                    </div>
+                  </a>
+                </li>
+                <li class="divider"></li>
+                <li
+                  :class="{ 'item-selected': noteType === 'discussion' }"
+                  @click.prevent="setNoteType('discussion')">
+                  <a href="#">
+                    <i
+                      aria-hidden="true"
+                      class="fa fa-check"></i>
+                    <div class="description">
+                      <strong>Start discussion</strong>
+                      <p>
+                        Discuss a specific suggestion or question.
+                      </p>
+                    </div>
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <a
+              @click="handleSave(true)"
+              :class="{'btn-reopen': issueState === 'closed', 'btn-close': issueState === 'open'}"
+              class="btn btn-nr btn-comment">
+              {{issueActionButtonTitle}}
+            </a>
+            <a
+              v-if="note.length"
+              @click="discard"
+              class="btn btn-cancel js-note-discard"
+              role="button">
+              Discard draft
+            </a>
           </div>
-          <a
-            @click="handleSave(true)"
-            :class="{'btn-reopen': issueState === 'closed', 'btn-close': issueState === 'open'}"
-            class="btn btn-nr btn-comment">
-            {{issueActionButtonTitle}}
-          </a>
-          <a
-            v-if="note.length"
-            @click="discard"
-            class="btn btn-cancel js-note-discard"
-            role="button">
-            Discard draft
-          </a>
         </div>
-      </div>
-    </li>
-  </ul>
+      </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'