From d599c63c9cc2833e0c0a358a91d16b21e3e84d2a Mon Sep 17 00:00:00 2001
From: Luiz Aoqui <luiz@hashicorp.com>
Date: Thu, 21 Oct 2021 13:12:33 -0400
Subject: [PATCH] ui: create tooltip component (#11363)

---
 ui/app/components/tooltip.js                       | 14 ++++++++++++++
 ui/app/templates/components/allocation-row.hbs     |  8 ++++----
 .../templates/components/plugin-allocation-row.hbs |  4 ++--
 ui/app/templates/components/tooltip.hbs            |  3 +++
 ui/tests/acceptance/plugin-detail-test.js          |  5 +++++
 ui/tests/acceptance/volume-detail-test.js          |  5 +++++
 ui/tests/pages/components/allocations.js           |  1 +
 ui/tests/unit/components/tooltip-test.js           | 13 +++++++++++++
 8 files changed, 47 insertions(+), 6 deletions(-)
 create mode 100644 ui/app/components/tooltip.js
 create mode 100644 ui/app/templates/components/tooltip.hbs
 create mode 100644 ui/tests/unit/components/tooltip-test.js

diff --git a/ui/app/components/tooltip.js b/ui/app/components/tooltip.js
new file mode 100644
index 00000000000..fa1420c6217
--- /dev/null
+++ b/ui/app/components/tooltip.js
@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+
+export default class Tooltip extends Component {
+  get text() {
+    const inputText = this.args.text;
+    if (!inputText || inputText.length < 30) {
+      return inputText;
+    }
+
+    const prefix = inputText.substr(0, 15).trim();
+    const suffix = inputText.substr(inputText.length - 10, inputText.length).trim();
+    return `${prefix}...${suffix}`;
+  }
+}
diff --git a/ui/app/templates/components/allocation-row.hbs b/ui/app/templates/components/allocation-row.hbs
index 5c2a317b5d4..efa1915524c 100644
--- a/ui/app/templates/components/allocation-row.hbs
+++ b/ui/app/templates/components/allocation-row.hbs
@@ -38,21 +38,21 @@
 </td>
 {{#if (eq this.context "volume")}}
   <td data-test-client>
-    <span class="tooltip multiline" aria-label="{{this.allocation.node.name}}">
+    <Tooltip @text={{this.allocation.node.name}}>
       <LinkTo @route="clients.client" @model={{this.allocation.node}}>
         {{this.allocation.node.shortId}}
       </LinkTo>
-    </span>
+    </Tooltip>
   </td>
 {{/if}}
 {{#if (or (eq this.context "taskGroup") (eq this.context "job"))}}
   <td data-test-job-version>{{this.allocation.jobVersion}}</td>
   <td data-test-client>
-    <span class="tooltip multiline" aria-label="{{this.allocation.node.name}}">
+    <Tooltip @text={{this.allocation.node.name}}>
       <LinkTo @route="clients.client" @model={{this.allocation.node}}>
         {{this.allocation.node.shortId}}
       </LinkTo>
-    </span>
+    </Tooltip>
   </td>
 {{else if (or (eq this.context "node") (eq this.context "volume"))}}
   <td>
diff --git a/ui/app/templates/components/plugin-allocation-row.hbs b/ui/app/templates/components/plugin-allocation-row.hbs
index e0c5352a10c..40303462b8f 100644
--- a/ui/app/templates/components/plugin-allocation-row.hbs
+++ b/ui/app/templates/components/plugin-allocation-row.hbs
@@ -45,11 +45,11 @@
   </td>
 
   <td data-test-client>
-    <span class="tooltip multiline" aria-label="{{this.allocation.node.name}}">
+    <Tooltip @text={{this.allocation.node.name}}>
       <LinkTo @route="clients.client" @model={{this.allocation.node}}>
         {{this.allocation.node.shortId}}
       </LinkTo>
-    </span>
+    </Tooltip>
   </td>
   <td>
     {{#if (or this.allocation.job.isPending this.allocation.job.isReloading)}}
diff --git a/ui/app/templates/components/tooltip.hbs b/ui/app/templates/components/tooltip.hbs
new file mode 100644
index 00000000000..b4a7e27f671
--- /dev/null
+++ b/ui/app/templates/components/tooltip.hbs
@@ -0,0 +1,3 @@
+<span class="tooltip" aria-label="{{this.text}}">
+  {{yield}}
+</span>
\ No newline at end of file
diff --git a/ui/tests/acceptance/plugin-detail-test.js b/ui/tests/acceptance/plugin-detail-test.js
index 75824bf8a53..4f7a82200ca 100644
--- a/ui/tests/acceptance/plugin-detail-test.js
+++ b/ui/tests/acceptance/plugin-detail-test.js
@@ -117,6 +117,11 @@ module('Acceptance | plugin detail', function(hooks) {
         server.db.nodes.find(allocation.nodeId).id.split('-')[0],
         'Node ID'
       );
+      assert.equal(
+        allocationRow.clientTooltip.substr(0, 15),
+        server.db.nodes.find(allocation.nodeId).name.substr(0, 15),
+        'Node Name'
+      );
       assert.equal(allocationRow.job, server.db.jobs.find(allocation.jobId).name, 'Job name');
       assert.ok(allocationRow.taskGroup, 'Task group name');
       assert.ok(allocationRow.jobVersion, 'Job Version');
diff --git a/ui/tests/acceptance/volume-detail-test.js b/ui/tests/acceptance/volume-detail-test.js
index 2f937356e71..d43d2bb317a 100644
--- a/ui/tests/acceptance/volume-detail-test.js
+++ b/ui/tests/acceptance/volume-detail-test.js
@@ -135,6 +135,11 @@ module('Acceptance | volume detail', function(hooks) {
         server.db.nodes.find(allocation.nodeId).id.split('-')[0],
         'Node ID'
       );
+      assert.equal(
+        allocationRow.clientTooltip.substr(0, 15),
+        server.db.nodes.find(allocation.nodeId).name.substr(0, 15),
+        'Node Name'
+      );
       assert.equal(
         allocationRow.cpu,
         Math.floor(allocStats.resourceUsage.CpuStats.TotalTicks) / cpuUsed,
diff --git a/ui/tests/pages/components/allocations.js b/ui/tests/pages/components/allocations.js
index 020603cd75d..748a0ab168d 100644
--- a/ui/tests/pages/components/allocations.js
+++ b/ui/tests/pages/components/allocations.js
@@ -18,6 +18,7 @@ export default function(selector = '[data-test-allocation]', propKey = 'allocati
       job: text('[data-test-job]'),
       taskGroup: text('[data-test-task-group]'),
       client: text('[data-test-client]'),
+      clientTooltip: attribute('aria-label', '[data-test-client] .tooltip'),
       jobVersion: text('[data-test-job-version]'),
       volume: text('[data-test-volume]'),
       cpu: text('[data-test-cpu]'),
diff --git a/ui/tests/unit/components/tooltip-test.js b/ui/tests/unit/components/tooltip-test.js
new file mode 100644
index 00000000000..e66f5a4e0f0
--- /dev/null
+++ b/ui/tests/unit/components/tooltip-test.js
@@ -0,0 +1,13 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+import setupGlimmerComponentFactory from 'nomad-ui/tests/helpers/glimmer-factory';
+
+module('Unit | Component | tooltip', function(hooks) {
+  setupTest(hooks);
+  setupGlimmerComponentFactory(hooks, 'tooltip');
+
+  test('long texts are ellipsised in the middle', function(assert) {
+    const tooltip = this.createComponent({ text: 'reeeeeeeeeeeeeeeeeally long text' });
+    assert.equal(tooltip.text, 'reeeeeeeeeeeeee...long text');
+  });
+});