[ci skip] Remove DOM querying for paths, save them in the store

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

@@ -1,7 +1,7 @@
 <script>
   /* global Flash */
 
-  import { mapActions, mapGetters } from 'vuex';
+  import { mapActions } from 'vuex';
   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';
@@ -10,18 +10,18 @@
 
   export default {
     data() {
-      const { create_note_path, state } = window.gl.issueData;
-      const { currentUserData } = window.gl;
+      const { getUserData, getIssueData } = this.$store.getters;
 
       return {
         note: '',
-        markdownDocsUrl: '',
-        quickActionsDocsUrl: null,
-        markdownPreviewUrl: gl.issueData.preview_note_path,
+        markdownDocsUrl: getIssueData.markdownDocs,
+        quickActionsDocsUrl: getIssueData.quickActionsDocs,
+        markdownPreviewUrl: getIssueData.preview_note_path,
         noteType: constants.COMMENT,
-        issueState: state,
-        endpoint: create_note_path,
-        author: currentUserData,
+        issueState: getIssueData.state,
+        endpoint: getIssueData.create_note_path,
+        author: getUserData,
+        canUpdateIssue: getIssueData.current_user.can_update,
       };
     },
     components: {
@@ -30,10 +30,6 @@
       issueNoteSignedOutWidget,
     },
     computed: {
-      ...mapGetters([
-        'getNotesDataByProp',
-        'getIssueDataByProp',
-      ]),
       isLoggedIn() {
         return window.gon.current_user_id;
       },
@@ -60,9 +56,6 @@
           'js-note-target-reopen': !this.isIssueOpen,
         };
       },
-      canUpdateIssue() {
-        return this.getIssueDataByProp(current_user).can_update;
-      },
     },
     methods: {
       ...mapActions([
@@ -106,12 +99,12 @@
 
         if (withIssueAction) {
           if (this.isIssueOpen) {
-            gl.issueData.state = constants.CLOSED;
             this.issueState = constants.CLOSED;
           } else {
-            gl.issueData.state = constants.REOPENED;
             this.issueState =constants.REOPENED;
           }
+
+          gl.issueData.state = this.issueState;
           this.isIssueOpen = !this.isIssueOpen;
 
           // This is out of scope for the Notes Vue component.
@@ -139,7 +132,7 @@
       editMyLastNote() {
         if (this.note === '') {
           const myLastNoteId = $('.js-my-note').last().attr('id');
-
+          debugger;
           if (myLastNoteId) {
             eventHub.$emit('enterEditMode', {
               noteId: parseInt(myLastNoteId.replace('note_', ''), 10),
@@ -149,9 +142,6 @@
       },
     },
     mounted() {
-      this.markdownDocsUrl = this.getIssueDataByProp(markdownDocs);
-      this.quickActionsDocsUrl = this.getIssueDataByProp(quickActionsDocs);
-
       eventHub.$on('issueStateChanged', (isClosed) => {
         this.issueState = isClosed ? constants.CLOSED : constants.REOPENED;
       });

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

@@ -1,16 +1,12 @@
 <script>
   export default {
     data() {
-      return {
-        signInLink: '#',
-      };
-    },
-    mounted() {
-      const wrapper = document.querySelector('.js-notes-wrapper');
+      const { newSessionPath, registerPath } = this.$store.getters.notesData;
 
-      if (wrapper) {
-        this.signInLink = wrapper.dataset.newSessionPath;
-      }
+      return {
+        signInLink: newSessionPath,
+        registerLink: registerPath,
+      };
     },
   };
 </script>
@@ -20,7 +16,7 @@
     Please
     <a :href="signInLink">register</a>
     or
-    <a :href="signInLink">sign in</a>
+    <a :href="registerLink">sign in</a>
     to reply
   </div>
 </template>

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

@@ -25,6 +25,10 @@
         type: Object,
         required: true,
       },
+      userData: {
+        type: Object,
+        required: true,
+      },
     },
     store,
     data() {
@@ -43,21 +47,21 @@
     },
     computed: {
       ...mapGetters([
-        'notes',
-        'notesById',
-        'getNotesData',
         'getNotesDataByProp',
-        'setLastFetchedAt',
-        'setTargetNoteHash',
       ]),
     },
     methods: {
+      ...mapGetters([
+        'getNotesDataByProp',
+      ]),
       ...mapActions({
         actionFetchNotes: 'fetchNotes',
         poll: 'poll',
         toggleAward: 'toggleAward',
         scrollToNoteIfNeeded: 'scrollToNoteIfNeeded',
-        setNotesData: 'setNotesData'
+        setNotesData: 'setNotesData',
+        setIssueData: 'setIssueData',
+        setUserData: 'setUserData',
       }),
       getComponentName(note) {
         if (note.isPlaceholderNote) {
@@ -75,7 +79,7 @@
         return note.individual_note ? note.notes[0] : note;
       },
       fetchNotes() {
-        this.actionFetchNotes(his.getNotesDataByProp('discussionsPath'))
+        this.actionFetchNotes(this.getNotesDataByProp('discussionsPath'))
           .then(() => {
             this.isLoading = false;
 
@@ -126,6 +130,7 @@
     created() {
       this.setNotesData(this.notesData);
       this.setIssueData(this.issueData);
+      this.setUserData(this.userData)
     },
     mounted() {
       this.fetchNotes();

app/assets/javascripts/notes/index.js

@@ -15,6 +15,9 @@ document.addEventListener('DOMContentLoaded', () => new Vue({
       notesData: {
         lastFetchedAt: notesDataset.lastFetchedAt,
         discussionsPath: notesDataset.discussionsPath,
+        newSessionPath: notesDataset.newSessionPath,
+        registerPath: notesDataset.registerPath,
+        notesPath: notesDataset.notesPath,
       },
     };
   },
@@ -26,6 +29,7 @@ document.addEventListener('DOMContentLoaded', () => new Vue({
       props: {
         issueData: this.issueData,
         notesData: this.notesData,
+        userData: this.currentUserData,
       },
     });
   },

app/assets/javascripts/notes/stores/getters.js

@@ -1,7 +1,13 @@
 export const notes = state => state.notes;
 export const targetNoteHash = state => state.targetNoteHash;
+
+export const getNotesData = state => state.notesData;
 export const getNotesDataByProp = state => prop => state.notesData[prop];
-export const getIssueDataByProp = state => prop => state.notesData[prop];
+
+export const getIssueData = state => state.issueData;
+export const getIssueDataByProp = state => prop => state.issueData[prop];
+
+export const getUserData = state => state.userData;
 export const getUserDataByProp = state => prop => state.notesData[prop];
 
 export const notesById = (state) => {

app/assets/javascripts/notes/stores/index.js

@@ -16,6 +16,7 @@ export default new Vuex.Store({
     notesData: {},
     userData: {},
     issueData: {},
+    paths: {},
   },
   actions,
   getters,

app/assets/javascripts/notes/stores/mutations.js

@@ -69,7 +69,6 @@ export default {
   [types.SET_USER_DATA](state, data) {
     state.userData = data;
   },
-
   [types.SET_INITAL_NOTES](state, notes) {
     state.notes = notes;
   },

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

@@ -5,8 +5,10 @@
 
 %section
   #js-vue-notes{ data: { discussions_path: discussions_namespace_project_issue_path(@project.namespace, @project, @issue, format: :json),
+  register_path: "#{new_session_path(:user, redirect_to_referer: 'yes')}#register-pane",
   new_session_path: new_session_path(:user, redirect_to_referer: 'yes'),
-  notes_path: '#{notes_url}?full_data=1', last_fetched_at: Time.now.to_i,
+  notes_path: '#{notes_url}?full_data=1',
+  last_fetched_at: Time.now.to_i,
   issue_data: serialize_issuable(@issue),
   current_user_data: UserSerializer.new.represent(current_user).to_json }}
   - content_for :page_specific_javascripts do