feat: 🎸 add tooltip to config tags in table (#2375)

* feat: 🎸 add tooltip to config tags in table

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-14331

* Update addons/core/translations/resources/en-us.yaml

Co-authored-by: Lisbet Alvarez <107949262+lisbet-alvarez@users.noreply.github.com>

* test: 💍 fix translation in test

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-14331

---------

Co-authored-by: Lisbet Alvarez <107949262+lisbet-alvarez@users.noreply.github.com>

addons/api/addon/models/worker.js

@@ -6,6 +6,9 @@
 import GeneratedWorkerModel from '../generated/models/worker';
 import { attr } from '@ember-data/model';
 
+export const TAG_TYPE_CONFIG = 'config';
+export const TAG_TYPE_API = 'api';
+
 export default class WorkerModel extends GeneratedWorkerModel {
   // =attributes
 
@@ -50,7 +53,7 @@ export default class WorkerModel extends GeneratedWorkerModel {
     }
 
     return Object.entries(this.config_tags).flatMap(([key, value]) =>
-      value.map((tag) => ({ key, value: tag, type: 'config' })),
+      value.map((tag) => ({ key, value: tag, type: TAG_TYPE_CONFIG })),
     );
   }
 
@@ -64,7 +67,7 @@ export default class WorkerModel extends GeneratedWorkerModel {
     }
 
     return Object.entries(this.api_tags).flatMap(([key, value]) =>
-      value.map((tag) => ({ key, value: tag, type: 'api' })),
+      value.map((tag) => ({ key, value: tag, type: TAG_TYPE_API })),
     );
   }
 

addons/core/translations/resources/en-us.yaml

@@ -978,6 +978,7 @@ worker:
   messages:
     welcome:
       title: Welcome to Workers
+  tooltip: To edit config tags, edit them in your worker config file.
   table:
     session_count: Session Count
     ip_address: IP Address

ui/admin/app/controllers/scopes/scope/workers/worker/tags.js

@@ -4,7 +4,10 @@
  */
 
 import Controller, { inject as controller } from '@ember/controller';
+import { TAG_TYPE_CONFIG } from 'api/models/worker';
 
 export default class ScopesScopeWorkersWorkerTagsController extends Controller {
   @controller('scopes/scope/workers/index') workers;
+
+  tagTypeConfig = TAG_TYPE_CONFIG;
 }

ui/admin/app/templates/scopes/scope/workers/worker/tags.hbs

@@ -50,7 +50,16 @@
               <Hds::Text::Code @tag='pre'>{{B.data.value}}</Hds::Text::Code>
             </B.Td>
             <B.Td>
-              <Hds::Badge @text={{B.data.type}} />
+              {{#if (eq B.data.type this.tagTypeConfig)}}
+                <Hds::TooltipButton
+                  @text={{t 'resources.worker.tooltip'}}
+                  @offset={{array -50 8}}
+                >
+                  <Hds::Badge @text={{B.data.type}} />
+                </Hds::TooltipButton>
+              {{else}}
+                <Hds::Badge @text={{B.data.type}} />
+              {{/if}}
             </B.Td>
           </B.Tr>
         </:body>

ui/admin/tests/acceptance/workers/tags-test.js

@@ -4,16 +4,21 @@
  */
 
 import { module, test } from 'qunit';
-import { visit, currentURL, click, findAll } from '@ember/test-helpers';
+import { visit, currentURL, click, focus } from '@ember/test-helpers';
 import { setupApplicationTest } from 'ember-qunit';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import a11yAudit from 'ember-a11y-testing/test-support/audit';
 import { authenticateSession } from 'ember-simple-auth/test-support';
 
-module('Acceptance | workers | tags', function (hooks) {
+module('Acceptance | workers | worker | tags', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
 
+  const CONFIG_TAG_TOOLTIP_SELECTOR =
+    'tbody tr:first-child td:nth-child(3) button';
+  const CONFIG_TAG_TOOLTIP_TEXT_SELECTOR =
+    'tbody tr:first-child td:nth-child(3) > div';
+
   const instances = {
     scopes: {
       global: null,
@@ -42,6 +47,17 @@ module('Acceptance | workers | tags', function (hooks) {
     await a11yAudit();
 
     assert.strictEqual(currentURL(), urls.tags);
-    assert.strictEqual(findAll('tbody tr').length, 11);
+    assert.dom('tbody tr').exists({ count: 11 });
+  });
+
+  test('config tags display a tooltip', async function (assert) {
+    await visit(urls.tags);
+    await a11yAudit();
+
+    await focus(CONFIG_TAG_TOOLTIP_SELECTOR);
+
+    assert
+      .dom(CONFIG_TAG_TOOLTIP_TEXT_SELECTOR)
+      .hasText('To edit config tags, edit them in your worker config file.');
   });
 });