Adds tooltip for environment name42922-environment-name

Adds CSS for child envrionments

3 files changed, 29 insertions, 11 deletions

diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index a9d554e549e..79326ca3487 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -1,8 +1,9 @@
 <script>
   import Timeago from 'timeago.js';
   import _ from 'underscore';
-  import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
-  import { humanize } from '../../lib/utils/text_utility';
+  import tooltip from '~/vue_shared/directives/tooltip';
+  import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+  import { humanize } from '~/lib/utils/text_utility';
   import ActionsComponent from './environment_actions.vue';
   import ExternalUrlComponent from './environment_external_url.vue';
   import StopComponent from './environment_stop.vue';
@@ -21,14 +22,18 @@
 
   export default {
     components: {
-      userAvatarLink,
-      'commit-component': CommitComponent,
-      'actions-component': ActionsComponent,
-      'external-url-component': ExternalUrlComponent,
-      'stop-component': StopComponent,
-      'rollback-component': RollbackComponent,
-      'terminal-button-component': TerminalButtonComponent,
-      'monitoring-button-component': MonitoringButtonComponent,
+      UserAvatarLink,
+      CommitComponent,
+      ActionsComponent,
+      ExternalUrlComponent,
+      StopComponent,
+      RollbackComponent,
+      TerminalButtonComponent,
+      MonitoringButtonComponent,
+    },
+
+    directives: {
+      tooltip,
     },
 
     props: {
@@ -443,7 +448,11 @@
         v-if="!model.isFolder"
         class="environment-name flex-truncate-parent table-mobile-content"
         :href="environmentPath">
-        <span class="flex-truncate-child">{{ model.name }}</span>
+        <span
+          class="flex-truncate-child"
+          v-tooltip
+          :title="model.name"
+        >{{ model.name }}</span>
       </a>
       <span
         v-else
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 4eba05a492d..884665d35c7 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -121,6 +121,10 @@
       width: 100%;
       text-align: left;
     }
+
+    .environment-child-row {
+      padding-left: 20px;
+    }
   }
 }
 
diff --git a/changelogs/unreleased/42922-environment-name.yml b/changelogs/unreleased/42922-environment-name.yml
new file mode 100644
index 00000000000..0e9544245f6
--- /dev/null
+++ b/changelogs/unreleased/42922-environment-name.yml
@@ -0,0 +1,5 @@
+---
+title: Adds tooltip in environment names to increase readability
+merge_request:
+author:
+type: fixed