Merge branch '44846-improve-web-ide-left-panel-and-modes' into ide-sidebar-commit-box

1 files changed, 22 insertions, 0 deletions

diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue
index 8015b245c2f..3f980203911 100644
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/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';
@@ -15,6 +16,9 @@ import SuccessMessage from './commit_sidebar/success_message.vue';
 import { activityBarViews } from '../constants';
 
 export default {
+  directives: {
+    tooltip,
+  },
   components: {
     Icon,
     PanelResizer,
@@ -29,6 +33,11 @@ export default {
     IdeReview,
     SuccessMessage,
   },
+  data() {
+    return {
+      showTooltip: false,
+    };
+  },
   computed: {
     ...mapState([
       'loading',
@@ -45,6 +54,16 @@ export default {
         (this.lastCommitMsg && !this.someUncommitedChanges)
       );
     },
+    branchTooltipTitle() {
+      return this.showTooltip ? this.currentBranchId : undefined;
+    },
+  },
+  watch: {
+    currentBranchId() {
+      this.$nextTick(() => {
+        this.showTooltip = this.$refs.branchId.scrollWidth > this.$refs.branchId.offsetWidth;
+      });
+    },
   },
 };
 </script>
@@ -97,6 +116,9 @@ export default {
               </div>
               <div
                 class="sidebar-context-title ide-sidebar-branch-title"
+                ref="branchId"
+                v-tooltip
+                :title="branchTooltipTitle"
               >
                 <icon
                   name="branch"