Merge branch 'psimyn-issue-note-refac' of gitlab.com:gitlab-org/gitlab-ce into...

Merge branch 'psimyn-issue-note-refac' of gitlab.com:gitlab-org/gitlab-ce into ee-psimyn-issue-note-refac

app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue → app/assets/javascripts/notes/components/discussion_locked_widget.vue

 <script>
-  import Icon from '../../vue_shared/components/icon.vue';
+  import Icon from '~/vue_shared/components/icon.vue';
+  import Issuable from '~/vue_shared/mixins/issuable';
 
   export default {
-    component: {
+    mixins: [
+      Issuable,
+    ],
+    components: {
       Icon,
     },
   };
@@ -16,7 +20,7 @@
         :size="16"
         class="icon">
       </icon>
-      <span>This issue is locked. Only <b>project members</b> can comment.</span>
+      <span>This {{ issuableDisplayName }} is locked. Only <b>project members</b> can comment.</span>
      </span>
   </div>
 </template>

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

@@ -8,8 +8,8 @@
   import * as constants from '../constants';
   import eventHub from '../event_hub';
   import issueWarning from '../../vue_shared/components/issue/issue_warning.vue';
-  import issueNoteSignedOutWidget from './issue_note_signed_out_widget.vue';
-  import issueDiscussionLockedWidget from './issue_discussion_locked_widget.vue';
+  import noteSignedOutWidget from './note_signed_out_widget.vue';
+  import discussionLockedWidget from './discussion_locked_widget.vue';
   import markdownField from '../../vue_shared/components/markdown/field.vue';
   import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
   import issuableStateMixin from '../mixins/issuable_state';
@@ -29,8 +29,8 @@
     },
     components: {
       issueWarning,
-      issueNoteSignedOutWidget,
-      issueDiscussionLockedWidget,
+      noteSignedOutWidget,
+      discussionLockedWidget,
       markdownField,
       userAvatarLink,
     },
@@ -240,8 +240,11 @@
 
 <template>
   <div>
-    <issue-note-signed-out-widget v-if="!isLoggedIn" />
-    <issue-discussion-locked-widget v-else-if="!canCreateNote" />
+    <note-signed-out-widget v-if="!isLoggedIn" />
+    <discussion-locked-widget
+      issuable-type="issue"
+      v-else-if="!canCreateNote"
+    />
     <ul
       v-else
       class="notes notes-form timeline">

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

@@ -4,10 +4,9 @@
   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 noteHeader from './note_header.vue';
+  import noteSignedOutWidget from './note_signed_out_widget.vue';
+  import noteEditedText from './note_edited_text.vue';
   import issueNoteForm from './issue_note_form.vue';
   import placeholderNote from '../../vue_shared/components/notes/placeholder_note.vue';
   import placeholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue';
@@ -28,10 +27,9 @@
     components: {
       issueNote,
       userAvatarLink,
-      issueNoteHeader,
-      issueNoteActions,
-      issueNoteSignedOutWidget,
-      issueNoteEditedText,
+      noteHeader,
+      noteSignedOutWidget,
+      noteEditedText,
       issueNoteForm,
       placeholderNote,
       placeholderSystemNote,
@@ -171,7 +169,7 @@
       <div class="timeline-content">
         <div class="discussion">
           <div class="discussion-header">
-            <issue-note-header
+            <note-header
               :author="author"
               :created-at="discussion.created_at"
               :note-id="discussion.id"
@@ -179,8 +177,8 @@
               @toggleHandler="toggleDiscussionHandler"
               action-text="started a discussion"
               class="discussion"
-              />
-            <issue-note-edited-text
+            />
+            <note-edited-text
               v-if="lastUpdatedAt"
               :edited-at="lastUpdatedAt"
               :edited-by="lastUpdatedBy"
@@ -220,7 +218,7 @@
                     @cancelFormEdition="cancelReplyForm"
                     ref="noteForm"
                     />
-                  <issue-note-signed-out-widget v-if="!canReply" />
+                  <note-signed-out-widget v-if="!canReply" />
                 </div>
               </div>
             </div>

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

@@ -2,8 +2,8 @@
   import { mapGetters, mapActions } from 'vuex';
   import Flash from '../../flash';
   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 noteHeader from './note_header.vue';
+  import noteActions from './note_actions.vue';
   import issueNoteBody from './issue_note_body.vue';
   import eventHub from '../event_hub';
 
@@ -23,8 +23,8 @@
     },
     components: {
       userAvatarLink,
-      issueNoteHeader,
-      issueNoteActions,
+      noteHeader,
+      noteActions,
       issueNoteBody,
     },
     computed: {
@@ -155,13 +155,13 @@
       </div>
       <div class="timeline-content">
         <div class="note-header">
-          <issue-note-header
+          <note-header
             :author="author"
             :created-at="note.created_at"
             :note-id="note.id"
             action-text="commented"
             />
-          <issue-note-actions
+          <note-actions
             :author-id="author.id"
             :note-id="note.id"
             :access-level="note.human_access"

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

 <script>
-  import issueNoteEditedText from './issue_note_edited_text.vue';
-  import issueNoteAwardsList from './issue_note_awards_list.vue';
-  import issueNoteAttachment from './issue_note_attachment.vue';
+  import noteEditedText from './note_edited_text.vue';
+  import noteAwardsList from './note_awards_list.vue';
+  import noteAttachment from './note_attachment.vue';
   import issueNoteForm from './issue_note_form.vue';
   import TaskList from '../../task_list';
   import autosave from '../mixins/autosave';
@@ -26,9 +26,9 @@
       autosave,
     ],
     components: {
-      issueNoteEditedText,
-      issueNoteAwardsList,
-      issueNoteAttachment,
+      noteEditedText,
+      noteAwardsList,
+      noteAttachment,
       issueNoteForm,
     },
     computed: {
@@ -101,20 +101,20 @@
       v-model="note.note"
       :data-update-url="note.path"
       class="hidden js-task-list-field"></textarea>
-    <issue-note-edited-text
+    <note-edited-text
       v-if="note.last_edited_at"
       :edited-at="note.last_edited_at"
       :edited-by="note.last_edited_by"
       action-text="Edited"
       />
-    <issue-note-awards-list
+    <note-awards-list
       v-if="note.award_emoji.length"
       :note-id="note.id"
       :note-author-id="note.author.id"
       :awards="note.award_emoji"
       :toggle-award-path="note.toggle_award_path"
       />
-    <issue-note-attachment
+    <note-attachment
       v-if="note.attachment"
       :attachment="note.attachment"
       />

app/assets/javascripts/notes/components/issue_note_actions.vue → app/assets/javascripts/notes/components/note_actions.vue

@@ -5,11 +5,11 @@
   import emojiSmiley from 'icons/_emoji_smiley.svg';
   import editSvg from 'icons/_icon_pencil.svg';
   import ellipsisSvg from 'icons/_ellipsis_v.svg';
-  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
-  import tooltip from '../../vue_shared/directives/tooltip';
+  import loadingIcon from '~/vue_shared/components/loading_icon.vue';
+  import tooltip from '~/vue_shared/directives/tooltip';
 
   export default {
-    name: 'issueNoteActions',
+    name: 'noteActions',
     props: {
       authorId: {
         type: Number,

app/assets/javascripts/notes/components/issue_note_attachment.vue → app/assets/javascripts/notes/components/note_attachment.vue

 <script>
   export default {
-    name: 'issueNoteAttachment',
+    name: 'noteAttachment',
     props: {
       attachment: {
         type: Object,

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

@@ -2,7 +2,6 @@
   import { mapGetters } from 'vuex';
 
   export default {
-    name: 'singInLinksNotes',
     computed: {
       ...mapGetters([
         'getNotesDataByProp',

app/assets/javascripts/sidebar/components/lock/edit_form.vue

@@ -18,11 +18,6 @@ export default {
       required: true,
       type: Function,
     },
-
-    issuableType: {
-      required: true,
-      type: String,
-    },
   },
 
   mixins: [
@@ -39,13 +34,13 @@ export default {
   <div class="dropdown open">
     <div class="dropdown-menu sidebar-item-warning-message">
       <p class="text" v-if="isLocked">
-        Unlock this {{ issuableDisplayName(issuableType) }}?
+        Unlock this {{ issuableDisplayName }}?
         <strong>Everyone</strong>
         will be able to comment.
       </p>
 
       <p class="text" v-else>
-        Lock this {{ issuableDisplayName(issuableType) }}?
+        Lock this {{ issuableDisplayName }}?
         Only
         <strong>project members</strong>
         will be able to comment.

app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue

@@ -23,11 +23,6 @@ export default {
         return mediatorObject.service && mediatorObject.service.update && mediatorObject.store;
       },
     },
-
-    issuableType: {
-      required: true,
-      type: String,
-    },
   },
 
   mixins: [
@@ -59,7 +54,7 @@ export default {
         discussion_locked: locked,
       })
       .then(() => location.reload())
-      .catch(() => Flash(this.__(`Something went wrong trying to change the locked state of this ${this.issuableDisplayName(this.issuableType)}`)));
+      .catch(() => Flash(this.__(`Something went wrong trying to change the locked state of this ${this.issuableDisplayName}`)));
     },
   },
 };
@@ -77,7 +72,7 @@ export default {
     </div>
 
     <div class="title hide-collapsed">
-      Lock {{issuableDisplayName(issuableType) }}
+      Lock {{ issuableDisplayName }}
       <button
         v-if="isEditable"
         class="pull-right lock-edit btn btn-blank"

app/assets/javascripts/vue_shared/components/icon.vue

@@ -22,7 +22,7 @@
       size: {
         type: Number,
         required: false,
-        default: 0,
+        default: 16,
       },
 
       cssClasses: {
@@ -45,7 +45,7 @@
 <template>
   <svg
     :class="[iconSizeClass, cssClasses]">
-    <use 
+    <use
       v-bind="{'xlink:href':spriteHref}"/>
   </svg>
 </template>

app/assets/javascripts/vue_shared/components/notes/system_note.vue

@@ -17,7 +17,7 @@
    *   />
    */
   import { mapGetters } from 'vuex';
-  import issueNoteHeader from '../../../notes/components/issue_note_header.vue';
+  import noteHeader from '~/notes/components/note_header.vue';
   import { spriteIcon } from '../../../lib/utils/common_utils';
 
   export default {
@@ -29,7 +29,7 @@
       },
     },
     components: {
-      issueNoteHeader,
+      noteHeader,
     },
     computed: {
       ...mapGetters([
@@ -60,12 +60,12 @@
       </div>
       <div class="timeline-content">
         <div class="note-header">
-          <issue-note-header
+          <note-header
             :author="note.author"
             :created-at="note.created_at"
             :note-id="note.id"
             :action-text-html="note.note_html"
-            />
+          />
         </div>
       </div>
     </div>

app/assets/javascripts/vue_shared/mixins/issuable.js

 export default {
-  methods: {
-    issuableDisplayName(issuableType) {
-      const displayName = issuableType.replace(/_/, ' ');
+  props: {
+    issuableType: {
+      required: true,
+      type: String,
+    },
+  },
 
-      return this.__ ? this.__(displayName) : displayName;
+  computed: {
+    issuableDisplayName() {
+      return this.issuableType.replace(/_/g, ' ');
     },
   },
 };

spec/javascripts/notes/components/issue_note_actions_spec.js → spec/javascripts/notes/components/note_actions_spec.js

 import Vue from 'vue';
 import store from '~/notes/stores';
-import issueActions from '~/notes/components/issue_note_actions.vue';
+import noteActions from '~/notes/components/note_actions.vue';
 import { userDataMock } from '../mock_data';
 
 describe('issse_note_actions component', () => {
@@ -8,7 +8,7 @@ describe('issse_note_actions component', () => {
   let Component;
 
   beforeEach(() => {
-    Component = Vue.extend(issueActions);
+    Component = Vue.extend(noteActions);
   });
 
   afterEach(() => {

spec/javascripts/notes/components/issue_note_attachment_spec.js → spec/javascripts/notes/components/note_attachment_spec.js

 import Vue from 'vue';
-import issueNoteAttachment from '~/notes/components/issue_note_attachment.vue';
+import noteAttachment from '~/notes/components/note_attachment.vue';
 
 describe('issue note attachment', () => {
   it('should render properly', () => {
@@ -11,7 +11,7 @@ describe('issue note attachment', () => {
       },
     };
 
-    const Component = Vue.extend(issueNoteAttachment);
+    const Component = Vue.extend(noteAttachment);
     const vm = new Component({
       propsData: props,
     }).$mount();

spec/javascripts/notes/components/issue_note_awards_list_spec.js → spec/javascripts/notes/components/note_awards_list_spec.js

 import Vue from 'vue';
 import store from '~/notes/stores';
-import awardsNote from '~/notes/components/issue_note_awards_list.vue';
+import awardsNote from '~/notes/components/note_awards_list.vue';
 import { issueDataMock, notesDataMock } from '../mock_data';
 
-describe('issue_note_awards_list component', () => {
+describe('note_awards_list component', () => {
   let vm;
   let awardsMock;
 

spec/javascripts/notes/components/issue_note_edited_text_spec.js → spec/javascripts/notes/components/note_edited_text_spec.js

 import Vue from 'vue';
-import issueNoteEditedText from '~/notes/components/issue_note_edited_text.vue';
+import noteEditedText from '~/notes/components/note_edited_text.vue';
 
-describe('issue_note_edited_text', () => {
+describe('note_edited_text', () => {
   let vm;
   let props;
 
   beforeEach(() => {
-    const Component = Vue.extend(issueNoteEditedText);
+    const Component = Vue.extend(noteEditedText);
     props = {
       actionText: 'Edited',
       className: 'foo-bar',

spec/javascripts/notes/components/issue_note_header_spec.js → spec/javascripts/notes/components/note_header_spec.js

 import Vue from 'vue';
-import issueNoteHeader from '~/notes/components/issue_note_header.vue';
+import noteHeader from '~/notes/components/note_header.vue';
 import store from '~/notes/stores';
 
-describe('issue_note_header component', () => {
+describe('note_header component', () => {
   let vm;
   let Component;
 
   beforeEach(() => {
-    Component = Vue.extend(issueNoteHeader);
+    Component = Vue.extend(noteHeader);
   });
 
   afterEach(() => {

spec/javascripts/notes/components/issue_note_signed_out_widget_spec.js → spec/javascripts/notes/components/note_signed_out_widget_spec.js

 import Vue from 'vue';
-import issueNoteSignedOut from '~/notes/components/issue_note_signed_out_widget.vue';
+import noteSignedOut from '~/notes/components/note_signed_out_widget.vue';
 import store from '~/notes/stores';
 import { notesDataMock } from '../mock_data';
 
-describe('issue_note_signed_out_widget component', () => {
+describe('note_signed_out_widget component', () => {
   let vm;
 
   beforeEach(() => {
-    const Component = Vue.extend(issueNoteSignedOut);
+    const Component = Vue.extend(noteSignedOut);
     store.dispatch('setNotesData', notesDataMock);
 
     vm = new Component({