Merge branch '196070-move-mr-from-right-sidebar-to-bottom-bar' into 'master'

Resolve "Move Merge Request from right sidebar of Web IDE to bottom bar"

See merge request gitlab-org/gitlab!24746

app/assets/javascripts/ide/components/ide_status_bar.vue

@@ -2,6 +2,7 @@
 /* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import { mapActions, mapState, mapGetters } from 'vuex';
 import IdeStatusList from 'ee_else_ce/ide/components/ide_status_list.vue';
+import IdeStatusMr from './ide_status_mr.vue';
 import icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 import timeAgoMixin from '~/vue_shared/mixins/timeago';
@@ -15,6 +16,7 @@ export default {
     userAvatarImage,
     CiIcon,
     IdeStatusList,
+    IdeStatusMr,
   },
   directives: {
     tooltip,
@@ -27,7 +29,7 @@ export default {
   },
   computed: {
     ...mapState(['currentBranchId', 'currentProjectId']),
-    ...mapGetters(['currentProject', 'lastCommit']),
+    ...mapGetters(['currentProject', 'lastCommit', 'currentMergeRequest']),
     ...mapState('pipelines', ['latestPipeline']),
   },
   watch: {
@@ -121,6 +123,12 @@ export default {
         >{{ lastCommitFormattedAge }}</time
       >
     </div>
+    <ide-status-mr
+      v-if="currentMergeRequest"
+      class="mx-3"
+      :url="currentMergeRequest.web_url"
+      :text="currentMergeRequest.references.short"
+    />
     <ide-status-list class="ml-auto" />
   </footer>
 </template>

app/assets/javascripts/ide/components/ide_status_mr.vue

+<script>
+import { GlIcon, GlLink } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlIcon,
+    GlLink,
+  },
+  props: {
+    text: {
+      type: String,
+      required: true,
+    },
+    url: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="d-flex-center flex-nowrap text-nowrap js-ide-status-mr">
+    <gl-icon name="merge-request" />
+    <span class="ml-1 d-none d-sm-block">{{ s__('WebIDE|Merge request') }}</span>
+    <gl-link class="ml-1" :href="url">{{ text }}</gl-link>
+  </div>
+</template>

app/assets/javascripts/ide/components/merge_requests/info.vue

-<script>
-import { mapGetters } from 'vuex';
-import Icon from '../../../vue_shared/components/icon.vue';
-import TitleComponent from '../../../issue_show/components/title.vue';
-import DescriptionComponent from '../../../issue_show/components/description.vue';
-
-export default {
-  components: {
-    Icon,
-    TitleComponent,
-    DescriptionComponent,
-  },
-  computed: {
-    ...mapGetters(['currentMergeRequest']),
-  },
-};
-</script>
-
-<template>
-  <div class="ide-merge-request-info h-100 d-flex flex-column">
-    <div class="detail-page-header">
-      <icon name="git-merge" class="align-self-center append-right-8" />
-      <strong> !{{ currentMergeRequest.iid }} </strong>
-    </div>
-    <div class="issuable-details">
-      <title-component
-        :issuable-ref="currentMergeRequest.iid"
-        :title-html="currentMergeRequest.title_html"
-        :title-text="currentMergeRequest.title"
-      />
-      <description-component
-        :description-html="currentMergeRequest.description_html"
-        :description-text="currentMergeRequest.description"
-        :can-update="false"
-      />
-    </div>
-  </div>
-</template>

app/assets/javascripts/ide/components/panes/right.vue

@@ -3,7 +3,6 @@ import { mapGetters, mapState } from 'vuex';
 import { __ } from '~/locale';
 import CollapsibleSidebar from './collapsible_sidebar.vue';
 import { rightSidebarViews } from '../../constants';
-import MergeRequestInfo from '../merge_requests/info.vue';
 import PipelinesList from '../pipelines/list.vue';
 import JobsDetail from '../jobs/detail.vue';
 import Clientside from '../preview/clientside.vue';
@@ -28,12 +27,6 @@ export default {
     },
     rightExtensionTabs() {
       return [
-        {
-          show: Boolean(this.currentMergeRequestId),
-          title: __('Merge Request'),
-          views: [{ component: MergeRequestInfo, ...rightSidebarViews.mergeRequestInfo }],
-          icon: 'text-description',
-        },
         {
           show: true,
           title: __('Pipelines'),

app/assets/javascripts/ide/stores/actions/merge_request.js

@@ -44,9 +44,7 @@ export const getMergeRequestData = (
   new Promise((resolve, reject) => {
     if (!state.projects[projectId].mergeRequests[mergeRequestId] || force) {
       service
-        .getProjectMergeRequestData(targetProjectId || projectId, mergeRequestId, {
-          render_html: true,
-        })
+        .getProjectMergeRequestData(targetProjectId || projectId, mergeRequestId)
         .then(({ data }) => {
           commit(types.SET_MERGE_REQUEST, {
             projectPath: projectId,

changelogs/unreleased/196070-move-mr-from-right-sidebar-to-bottom-bar.yml

+---
+title: Move Merge Request from right sidebar of Web IDE to bottom bar
+merge_request: 24746
+author:
+type: changed

locale/gitlab.pot

@@ -21435,6 +21435,9 @@ msgstr ""
 msgid "Web terminal"
 msgstr ""
 
+msgid "WebIDE|Merge request"
+msgstr ""
+
 msgid "Webhooks"
 msgstr ""
 

spec/frontend/ide/components/ide_status_mr_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlIcon, GlLink } from '@gitlab/ui';
+import { TEST_HOST } from 'helpers/test_constants';
+import IdeStatusMr from '~/ide/components/ide_status_mr.vue';
+
+const TEST_TEXT = '!9001';
+const TEST_URL = `${TEST_HOST}merge-requests/9001`;
+
+describe('ide/components/ide_status_mr', () => {
+  let wrapper;
+
+  const createComponent = props => {
+    wrapper = shallowMount(IdeStatusMr, {
+      propsData: props,
+    });
+  };
+  const findIcon = () => wrapper.find(GlIcon);
+  const findLink = () => wrapper.find(GlLink);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when mounted', () => {
+    beforeEach(() => {
+      createComponent({
+        text: TEST_TEXT,
+        url: TEST_URL,
+      });
+    });
+
+    it('renders icon', () => {
+      const icon = findIcon();
+
+      expect(icon.exists()).toBe(true);
+      expect(icon.props()).toEqual(
+        expect.objectContaining({
+          name: 'merge-request',
+        }),
+      );
+    });
+
+    it('renders link', () => {
+      const link = findLink();
+
+      expect(link.exists()).toBe(true);
+      expect(link.attributes()).toEqual(
+        expect.objectContaining({
+          href: TEST_URL,
+        }),
+      );
+      expect(link.text()).toEqual(TEST_TEXT);
+    });
+
+    it('renders text', () => {
+      expect(wrapper.text()).toBe(`Merge request ${TEST_TEXT}`);
+    });
+  });
+});

spec/frontend/ide/components/panes/right_spec.js

@@ -75,28 +75,6 @@ describe('ide/components/panes/right.vue', () => {
     });
   });
 
-  describe('merge request tab', () => {
-    it('is shown if there is a currentMergeRequestId', () => {
-      store.state.currentMergeRequestId = 1;
-
-      createComponent();
-
-      expect(wrapper.find(CollapsibleSidebar).props('extensionTabs')).toEqual(
-        expect.arrayContaining([
-          expect.objectContaining({
-            show: true,
-            title: 'Merge Request',
-            views: expect.arrayContaining([
-              expect.objectContaining({
-                name: rightSidebarViews.mergeRequestInfo.name,
-              }),
-            ]),
-          }),
-        ]),
-      );
-    });
-  });
-
   describe('clientside live preview tab', () => {
     it('is shown if there is a packageJson and clientsidePreviewEnabled', () => {
       Vue.set(store.state.entries, 'package.json', {

spec/javascripts/ide/components/ide_status_bar_spec.js

 import Vue from 'vue';
+import _ from 'lodash';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import store from '~/ide/stores';
-import ideStatusBar from '~/ide/components/ide_status_bar.vue';
+import { TEST_HOST } from 'spec/test_constants';
+import { createStore } from '~/ide/stores';
+import IdeStatusBar from '~/ide/components/ide_status_bar.vue';
 import { rightSidebarViews } from '~/ide/constants';
-import { resetStore } from '../helpers';
 import { projectData } from '../mock_data';
 
+const TEST_PROJECT_ID = 'abcproject';
+const TEST_MERGE_REQUEST_ID = '9001';
+const TEST_MERGE_REQUEST_URL = `${TEST_HOST}merge-requests/${TEST_MERGE_REQUEST_ID}`;
+
 describe('ideStatusBar', () => {
+  let store;
   let vm;
 
-  beforeEach(() => {
-    const Component = Vue.extend(ideStatusBar);
+  const createComponent = () => {
+    vm = createComponentWithStore(Vue.extend(IdeStatusBar), store).$mount();
+  };
+  const findMRStatus = () => vm.$el.querySelector('.js-ide-status-mr');
 
-    store.state.currentProjectId = 'abcproject';
-    store.state.projects.abcproject = projectData;
+  beforeEach(() => {
+    store = createStore();
+    store.state.currentProjectId = TEST_PROJECT_ID;
+    store.state.projects[TEST_PROJECT_ID] = _.clone(projectData);
     store.state.currentBranchId = 'master';
-
-    vm = createComponentWithStore(Component, store).$mount();
   });
 
   afterEach(() => {
     vm.$destroy();
-
-    resetStore(vm.$store);
   });
 
-  it('renders the statusbar', () => {
-    expect(vm.$el.className).toBe('ide-status-bar');
+  describe('default', () => {
+    beforeEach(() => {
+      createComponent();
     });
 
-  describe('mounted', () => {
     it('triggers a setInterval', () => {
       expect(vm.intervalId).not.toBe(null);
     });
+
+    it('renders the statusbar', () => {
+      expect(vm.$el.className).toBe('ide-status-bar');
     });
 
     describe('commitAgeUpdate', () => {
@@ -91,4 +100,30 @@ describe('ideStatusBar', () => {
           .catch(done.fail);
       });
     });
+
+    it('does not show merge request status', () => {
+      expect(findMRStatus()).toBe(null);
+    });
+  });
+
+  describe('with merge request in store', () => {
+    beforeEach(() => {
+      store.state.projects[TEST_PROJECT_ID].mergeRequests = {
+        [TEST_MERGE_REQUEST_ID]: {
+          web_url: TEST_MERGE_REQUEST_URL,
+          references: {
+            short: `!${TEST_MERGE_REQUEST_ID}`,
+          },
+        },
+      };
+      store.state.currentMergeRequestId = TEST_MERGE_REQUEST_ID;
+
+      createComponent();
+    });
+
+    it('shows merge request status', () => {
+      expect(findMRStatus().textContent.trim()).toEqual(`Merge request !${TEST_MERGE_REQUEST_ID}`);
+      expect(findMRStatus().querySelector('a').href).toEqual(TEST_MERGE_REQUEST_URL);
+    });
+  });
 });

spec/javascripts/ide/components/merge_requests/info_spec.js

-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');
-  });
-});

spec/javascripts/ide/stores/actions/merge_request_spec.js

@@ -137,9 +137,7 @@ describe('IDE store merge request actions', () => {
         store
           .dispatch('getMergeRequestData', { projectId: TEST_PROJECT, mergeRequestId: 1 })
           .then(() => {
-            expect(service.getProjectMergeRequestData).toHaveBeenCalledWith(TEST_PROJECT, 1, {
-              render_html: true,
-            });
+            expect(service.getProjectMergeRequestData).toHaveBeenCalledWith(TEST_PROJECT, 1);
 
             done();
           })