Fix two bugs in environments table

app/assets/javascripts/environments/components/environment_item.vue

@@ -6,6 +6,7 @@ import _ from 'underscore';
 import { GlTooltipDirective } from '@gitlab/ui';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import Icon from '~/vue_shared/components/icon.vue';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 import environmentItemMixin from 'ee_else_ce/environments/mixins/environment_item_mixin';
 import ActionsComponent from './environment_actions.vue';
 import ExternalUrlComponent from './environment_external_url.vue';
@@ -26,7 +27,6 @@ const timeagoInstance = new Timeago();
 
 export default {
   components: {
-    UserAvatarLink,
     CommitComponent,
     Icon,
     ActionsComponent,
@@ -35,6 +35,8 @@ export default {
     RollbackComponent,
     TerminalButtonComponent,
     MonitoringButtonComponent,
+    TooltipOnTruncate,
+    UserAvatarLink,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -508,12 +510,16 @@ export default {
     </div>
 
     <div class="table-section section-15 d-none d-sm-none d-md-block" role="gridcell">
-      <a
-        v-if="shouldRenderBuildName"
-        :href="buildPath"
-        class="build-link cgray flex-truncate-parent"
-      >
-        <span class="flex-truncate-child">{{ buildName }}</span>
+      <a v-if="shouldRenderBuildName" :href="buildPath" class="build-link cgray">
+        <tooltip-on-truncate
+          :title="buildName"
+          truncate-target="child"
+          class="flex-truncate-parent"
+        >
+          <span class="flex-truncate-child">
+            {{ buildName }}
+          </span>
+        </tooltip-on-truncate>
       </a>
     </div>
 

app/assets/javascripts/environments/components/environments_app.vue

@@ -31,10 +31,6 @@ export default {
       type: Boolean,
       required: true,
     },
-    cssContainerClass: {
-      type: String,
-      required: true,
-    },
     newEnvironmentPath: {
       type: String,
       required: true,
@@ -93,7 +89,7 @@ export default {
 };
 </script>
 <template>
-  <div :class="cssContainerClass">
+  <div>
     <stop-environment-modal :environment="environmentInStopModal" />
     <confirm-rollback-modal :environment="environmentInRollbackModal" />
 

app/assets/javascripts/environments/index.js

@@ -21,7 +21,6 @@ export default () =>
         newEnvironmentPath: environmentsData.newEnvironmentPath,
         helpPagePath: environmentsData.helpPagePath,
         deployBoardsHelpPath: environmentsData.deployBoardsHelpPath,
-        cssContainerClass: environmentsData.cssClass,
         canCreateEnvironment: parseBoolean(environmentsData.canCreateEnvironment),
         canReadEnvironment: parseBoolean(environmentsData.canReadEnvironment),
       };
@@ -33,7 +32,6 @@ export default () =>
           newEnvironmentPath: this.newEnvironmentPath,
           helpPagePath: this.helpPagePath,
           deployBoardsHelpPath: this.deployBoardsHelpPath,
-          cssContainerClass: this.cssContainerClass,
           canCreateEnvironment: this.canCreateEnvironment,
           canReadEnvironment: this.canReadEnvironment,
           ...this.canaryCalloutProps,

changelogs/unreleased/env-tooltips.yml

+---
+title: Fix tooltip hovers in environments table
+merge_request: 20737
+author:
+type: fixed

ee/spec/javascripts/environments/environments_app_spec.js

@@ -10,7 +10,6 @@ describe('Environment', () => {
     endpoint: 'environments.json',
     canCreateEnvironment: true,
     canReadEnvironment: true,
-    cssContainerClass: 'container',
     newEnvironmentPath: 'environments/new',
     helpPagePath: 'help',
     canaryDeploymentFeatureId: 'canary_deployment',

spec/javascripts/environments/environments_app_spec.js

@@ -10,7 +10,6 @@ describe('Environment', () => {
     endpoint: 'environments.json',
     canCreateEnvironment: true,
     canReadEnvironment: true,
-    cssContainerClass: 'container',
     newEnvironmentPath: 'environments/new',
     helpPagePath: 'help',
     canaryDeploymentFeatureId: 'canary_deployment',