Icu 13897 create remove tag modal (#2377)

* feat: 🎸 add action dropdown in tags table

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

* feat: 🎸 add removeApiTags method to worker

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

* feat: 🎸 add tag removal workflow

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

* test: 💍 add tests for removing a worker tag

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

* test: 💍 add tests for removing a tag

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

* refactor: 💡 fix spelling issue

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

* refactor: 💡 use mirage worker serializer to remove empty tag

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

* refactor: 💡 update modal id to class

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

* refactor: 💡 add autofocus to remove tag modal

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

* feat: 🎸 update tags controller attributes

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

* refactor: 💡 create normalizer to add empty object for api_tags

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

* refactor: 💡 update getter signature

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

* refactor: 💡 remove unneeded parens

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

* refactor: 💡 remove type from Hds::Button

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

* refactor: 💡 update confirmation modal class name

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

* feat: 🎸 add emptyObjectIfMissing model attribute

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

* refactor: 💡 PR feedback

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

* refactor: 💡 remove default to null in toggleModal

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

ui/admin/tests/unit/controllers/scopes/scope/workers/worker/tags-test.js

@@ -4,18 +4,94 @@
  */
 
 import { module, test } from 'qunit';
-import { setupTest } from 'admin/tests/helpers';
+import { visit } from '@ember/test-helpers';
+import { setupTest } from 'ember-qunit';
+import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
+import { authenticateSession } from 'ember-simple-auth/test-support';
 
 module(
   'Unit | Controller | scopes/scope/workers/worker/tags',
   function (hooks) {
     setupTest(hooks);
+    setupMirage(hooks);
 
-    test('it exists', function (assert) {
-      let controller = this.owner.lookup(
+    let store;
+    let controller;
+
+    const instances = {
+      scopes: {
+        global: null,
+      },
+      worker: null,
+    };
+
+    const urls = {
+      workers: null,
+      tags: null,
+    };
+
+    hooks.beforeEach(function () {
+      authenticateSession({});
+      store = this.owner.lookup('service:store');
+      controller = this.owner.lookup(
         'controller:scopes/scope/workers/worker/tags',
       );
+
+      instances.scopes.global = this.server.create('scope', { id: 'global' });
+      instances.worker = this.server.create('worker', {
+        scope: instances.scopes.global,
+        api_tags: { test: ['test'], key: ['value'] },
+      });
+      urls.workers = `/scopes/global/workers`;
+      urls.tags = `${urls.workers}/${instances.worker.id}/tags`;
+    });
+
+    test('it exists', function (assert) {
       assert.ok(controller);
     });
+
+    test('tagDisplayName returns the display name of the tag', function (assert) {
+      controller.modalTag = { key: 'test', value: 'test' };
+
+      assert.strictEqual(controller.tagDisplayName, '"test = test"');
+    });
+
+    test('isRemovalConfirmed returns true if the user has entered REMOVE', function (assert) {
+      controller.removalConfirmation = 'REMOVE';
+
+      assert.true(controller.isRemovalConfirmed);
+    });
+
+    test('isRemovalConfirmed returns false if the user has entered anything but REMOVE', function (assert) {
+      controller.removalConfirmation = 'remove';
+
+      assert.false(controller.isRemovalConfirmed);
+    });
+
+    test('removeApiTag calls removeApiTags on the model and closes modal', async function (assert) {
+      await visit(urls.tags);
+      const worker = await store.findRecord('worker', instances.worker.id);
+      const apiTagCount = worker.apiTagList.length;
+      controller.modalTag = { key: 'test', value: 'test' };
+
+      await controller.removeApiTag();
+
+      assert.strictEqual(worker.apiTagList.length, apiTagCount - 1);
+      assert.false(controller.removeModal);
+      assert.strictEqual(controller.modalTag, null);
+    });
+
+    test('toggleRemoveModal toggles the modal and sets the modalTag', function (assert) {
+      assert.false(controller.removeModal);
+      assert.strictEqual(controller.modalTag, null);
+
+      controller.toggleRemoveModal({ key: 'test', value: 'test' });
+
+      assert.true(controller.removeModal);
+      assert.deepEqual(controller.modalTag, {
+        key: 'test',
+        value: 'test',
+      });
+    });
   },
 );