Merge branch 'ide-merge-request-info' into 'master'

Added merge request info to Web IDE sidebar

Closes #45187

See merge request gitlab-org/gitlab-ce!19860

4 files changed, 134 insertions, 1 deletions

diff --git a/spec/javascripts/ide/components/merge_requests/info_spec.js b/spec/javascripts/ide/components/merge_requests/info_spec.js
new file mode 100644
index 00000000000..98a29e5128b
--- /dev/null
+++ b/spec/javascripts/ide/components/merge_requests/info_spec.js
@@ -0,0 +1,51 @@
+import Vue from 'vue';
+import '~/behaviors/markdown/render_gfm';
+import { createStore } from '~/ide/stores';
+import Info from '~/ide/components/merge_requests/info.vue';
+import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
+
+describe('IDE merge request details', () => {
+  let Component;
+  let vm;
+
+  beforeAll(() => {
+    Component = Vue.extend(Info);
+  });
+
+  beforeEach(() => {
+    const store = createStore();
+    store.state.currentProjectId = 'gitlab-ce';
+    store.state.currentMergeRequestId = 1;
+    store.state.projects['gitlab-ce'] = {
+      mergeRequests: {
+        1: {
+          iid: 1,
+          title: 'Testing',
+          title_html: '<span class="title-html">Testing</span>',
+          description: 'Description',
+          description_html: '<p class="description-html">Description HTML</p>',
+        },
+      },
+    };
+
+    vm = createComponentWithStore(Component, store).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders merge request IID', () => {
+    expect(vm.$el.querySelector('.detail-page-header').textContent).toContain('!1');
+  });
+
+  it('renders title as HTML', () => {
+    expect(vm.$el.querySelector('.title-html')).not.toBe(null);
+    expect(vm.$el.querySelector('.title').textContent).toContain('Testing');
+  });
+
+  it('renders description as HTML', () => {
+    expect(vm.$el.querySelector('.description-html')).not.toBe(null);
+    expect(vm.$el.querySelector('.description').textContent).toContain('Description HTML');
+  });
+});
diff --git a/spec/javascripts/ide/components/panes/right_spec.js b/spec/javascripts/ide/components/panes/right_spec.js
new file mode 100644
index 00000000000..99879fb0930
--- /dev/null
+++ b/spec/javascripts/ide/components/panes/right_spec.js
@@ -0,0 +1,72 @@
+import Vue from 'vue';
+import '~/behaviors/markdown/render_gfm';
+import { createStore } from '~/ide/stores';
+import RightPane from '~/ide/components/panes/right.vue';
+import { rightSidebarViews } from '~/ide/constants';
+import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
+
+describe('IDE right pane', () => {
+  let Component;
+  let vm;
+
+  beforeAll(() => {
+    Component = Vue.extend(RightPane);
+  });
+
+  beforeEach(() => {
+    const store = createStore();
+
+    vm = createComponentWithStore(Component, store).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('active', () => {
+    it('renders merge request button as active', done => {
+      vm.$store.state.rightPane = rightSidebarViews.mergeRequestInfo;
+      vm.$store.state.currentMergeRequestId = '123';
+      vm.$store.state.currentProjectId = 'gitlab-ce';
+      vm.$store.state.currentMergeRequestId = 1;
+      vm.$store.state.projects['gitlab-ce'] = {
+        mergeRequests: {
+          1: {
+            iid: 1,
+            title: 'Testing',
+            title_html: '<span class="title-html">Testing</span>',
+            description: 'Description',
+            description_html: '<p class="description-html">Description HTML</p>',
+          },
+        },
+      };
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.ide-sidebar-link.active')).not.toBe(null);
+        expect(
+          vm.$el.querySelector('.ide-sidebar-link.active').getAttribute('data-original-title'),
+        ).toBe('Merge Request');
+
+        done();
+      });
+    });
+  });
+
+  describe('click', () => {
+    beforeEach(() => {
+      spyOn(vm, 'setRightPane');
+    });
+
+    it('sets view to merge request', done => {
+      vm.$store.state.currentMergeRequestId = '123';
+
+      vm.$nextTick(() => {
+        vm.$el.querySelector('.ide-sidebar-link').click();
+
+        expect(vm.setRightPane).toHaveBeenCalledWith(rightSidebarViews.mergeRequestInfo);
+
+        done();
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/ide/stores/actions/merge_request_spec.js b/spec/javascripts/ide/stores/actions/merge_request_spec.js
index c99ccc70c6a..90c28c769f7 100644
--- a/spec/javascripts/ide/stores/actions/merge_request_spec.js
+++ b/spec/javascripts/ide/stores/actions/merge_request_spec.js
@@ -39,7 +39,9 @@ describe('IDE store merge request actions', () => {
         store
           .dispatch('getMergeRequestData', { projectId: 'abcproject', mergeRequestId: 1 })
           .then(() => {
-            expect(service.getProjectMergeRequestData).toHaveBeenCalledWith('abcproject', 1);
+            expect(service.getProjectMergeRequestData).toHaveBeenCalledWith('abcproject', 1, {
+              render_html: true,
+            });
 
             done();
           })
diff --git a/spec/requests/api/merge_requests_spec.rb b/spec/requests/api/merge_requests_spec.rb
index eba39bb6ccc..1716d182782 100644
--- a/spec/requests/api/merge_requests_spec.rb
+++ b/spec/requests/api/merge_requests_spec.rb
@@ -306,6 +306,14 @@ describe API::MergeRequests do
       expect(json_response['changes_count']).to eq(merge_request.merge_request_diff.real_size)
     end
 
+    it 'exposes description and title html when render_html is true' do
+      get api("/projects/#{project.id}/merge_requests/#{merge_request.iid}", user), render_html: true
+
+      expect(response).to have_gitlab_http_status(200)
+
+      expect(json_response).to include('title_html', 'description_html')
+    end
+
     context 'merge_request_metrics' do
       before do
         merge_request.metrics.update!(merged_by: user,