added specs

long branch names no longer wrap

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

@@ -43,7 +43,7 @@ export default {
       </div>
       <div class="prepend-top-5 ide-review-sub-header">
         <template v-if="!currentMergeRequest || viewer === 'diff'">
-          {{ __('Lastest changes') }}
+          {{ __('Latest changes') }}
         </template>
         <template v-else-if="currentMergeRequest && viewer === 'mrdiff'">
           Merge request

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

@@ -2,6 +2,7 @@
 import { mapState, mapGetters } from 'vuex';
 import ProjectAvatarImage from '~/vue_shared/components/project_avatar/image.vue';
 import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
 import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
 import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
 import Identicon from '../../vue_shared/components/identicon.vue';
@@ -12,6 +13,9 @@ import CommitSection from './repo_commit_section.vue';
 import IdeReview from './ide_review.vue';
 
 export default {
+  directives: {
+    tooltip,
+  },
   components: {
     Icon,
     PanelResizer,
@@ -24,9 +28,24 @@ export default {
     IdeTree,
     IdeReview,
   },
+  data() {
+    return {
+      showTooltip: false,
+    };
+  },
   computed: {
     ...mapState(['loading', 'currentBranchId', 'currentActivityView']),
     ...mapGetters(['currentProject']),
+    branchTooltipTitle() {
+      return this.showTooltip ? this.currentBranchId : undefined;
+    },
+  },
+  watch: {
+    currentBranchId() {
+      this.$nextTick(() => {
+        this.showTooltip = this.$refs.branchId.scrollWidth > this.$refs.branchId.offsetWidth;
+      });
+    },
   },
 };
 </script>
@@ -79,6 +98,9 @@ export default {
               </div>
               <div
                 class="sidebar-context-title ide-sidebar-branch-title"
+                ref="branchId"
+                v-tooltip
+                :title="branchTooltipTitle"
               >
                 <icon
                   name="branch"

app/assets/stylesheets/pages/repo.scss

@@ -995,3 +995,17 @@
   width: 100%;
   align-items: center;
 }
+
+.ide-context-header {
+  .avatar {
+    flex: 0 0 40px;
+  }
+}
+
+.ide-sidebar-project-title {
+  min-width: 0;
+
+  .sidebar-context-title {
+    white-space: nowrap;
+  }
+}

spec/javascripts/ide/components/ide_review_spec.js

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import IdeReview from '~/ide/components/ide_review.vue';
 import store from '~/ide/stores';
 import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
+import { trimText } from '../../helpers/vue_component_helper';
 import { resetStore, file } from '../helpers';
 import { projectData } from '../mock_data';
 
@@ -30,4 +31,39 @@ describe('IDE review mode', () => {
   it('renders list of files', () => {
     expect(vm.$el.textContent).toContain('fileName');
   });
+
+  describe('merge request', () => {
+    beforeEach(done => {
+      store.state.currentMergeRequestId = '1';
+      store.state.projects.abcproject.mergeRequests['1'] = {
+        iid: 123,
+        web_url: 'testing123',
+      };
+
+      vm.$nextTick(done);
+    });
+
+    it('renders edit dropdown', () => {
+      expect(vm.$el.querySelector('.btn')).not.toBe(null);
+    });
+
+    it('renders merge request link & IID', () => {
+      const link = vm.$el.querySelector('.ide-review-sub-header');
+
+      expect(link.querySelector('a').getAttribute('href')).toBe('testing123');
+      expect(trimText(link.textContent)).toBe('Merge request (!123)');
+    });
+
+    it('changes text to latest changes when viewer is not mrdiff', done => {
+      store.state.viewer = 'diff';
+
+      vm.$nextTick(() => {
+        expect(trimText(vm.$el.querySelector('.ide-review-sub-header').textContent)).toBe(
+          'Latest changes',
+        );
+
+        done();
+      });
+    });
+  });
 });