Added base template for design artifacts

https://gitlab.com/gitlab-org/gitlab-ee/issues/9492

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

@@ -90,8 +90,15 @@ export default {
         this.fetchNotes();
       }
     },
+    allDiscussions() {
+      if (this.discussonsCount) {
+        this.discussonsCount.textContent = this.allDiscussions.length;
+      }
+    },
   },
   created() {
+    this.discussonsCount = document.querySelector('.js-discussions-count');
+
     this.setNotesData(this.notesData);
     this.setNoteableData(this.noteableData);
     this.setUserData(this.userData);

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

@@ -5,7 +5,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.js-vue-notes-event
+%section.issuable-discussion.js-vue-notes-event
   #js-vue-notes{ data: { notes_data: notes_data(@issue).to_json,
     noteable_data: serialize_issuable(@issue),
     noteable_type: 'Issue',

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

@@ -98,7 +98,6 @@
         #js-vue-discussion-filter{ data: { default_filter: current_user&.notes_filter_for(@issue), notes_filters: UserPreference.notes_filters.to_json } }
         = render 'new_branch' unless @issue.confidential?
 
-  %section.issuable-discussion
-    = render 'projects/issues/discussion'
+  = render_if_exists 'projects/issues/discussion'
 
 = render 'shared/issuable/sidebar', issuable_sidebar: @issuable_sidebar, assignees: @issue.assignees

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

+- if Feature.enabled?(:versioned_designs)
+  %ul.nav-tabs.nav.nav-links{ role: 'tablist' }
+    %li
+      = link_to '#discussion-tab', class: 'active', id: 'discussion', role: 'tab', 'aria-controls': 'js-discussion', 'aria-selected': 'true', data: { toggle: 'tab', target: '#discussion-tab' } do
+        = _('Discussion')
+        %span.badge.badge-pill.js-discussions-count
+    %li
+      = link_to '#designs-tab', id: 'designs', role: 'tab', 'aria-controls': 'js-designs', 'aria-selected': 'false', data: { toggle: 'tab', target: '#designs-tab' } do
+        = _('Designs')
+        %span.badge.badge-pill.js-designs-count
+  .tab-content
+    #discussion-tab.tab-pane.show.active{ role: 'tabpanel', 'aria-labelledby': 'discussion' }
+      = render_ce 'projects/issues/discussion'
+    #designs-tab.tab-pane{ role: 'tabpanel', 'aria-labelledby': 'designs' }
+      = spinner nil, true
+- else
+  = render_ce 'projects/issues/discussion'

locale/gitlab.pot

@@ -3300,6 +3300,9 @@ msgstr ""
 msgid "Description:"
 msgstr ""
 
+msgid "Designs"
+msgstr ""
+
 msgid "Destroy"
 msgstr ""
 
@@ -3378,6 +3381,9 @@ msgstr ""
 msgid "Discuss a specific suggestion or question that needs to be resolved"
 msgstr ""
 
+msgid "Discussion"
+msgstr ""
+
 msgid "Dismiss"
 msgstr ""
 

spec/javascripts/notes/components/note_app_spec.js

@@ -83,6 +83,8 @@ describe('note_app', () => {
 
   describe('render', () => {
     beforeEach(() => {
+      setFixtures('<div class="js-discussions-count"></div>');
+
       Vue.http.interceptors.push(mockData.individualNoteInterceptor);
       wrapper = mountComponent();
     });
@@ -127,6 +129,14 @@ describe('note_app', () => {
     it('should render form comment button as disabled', () => {
       expect(wrapper.find('.js-note-new-discussion').attributes('disabled')).toEqual('disabled');
     });
+
+    it('updates discussions badge', done => {
+      setTimeout(() => {
+        expect(document.querySelector('.js-discussions-count').textContent).toEqual('2');
+
+        done();
+      });
+    });
   });
 
   describe('while fetching data', () => {