chore: 🤖 refactor key value list component, text input support (#1957)

refactor: 💡 refactor list wrapper component and fix test

ui/admin/tests/acceptance/host-catalogs/host-sets/create-test.js

@@ -19,6 +19,18 @@ module('Acceptance | host-catalogs | host sets | create', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
 
+  const PREFERRED_ENDPOINT_TEXT_INPUT_SELECTOR =
+    '[name="preferred_endpoints"] input';
+  const PREFERRED_ENDPOINT_BUTTON_SELECTOR =
+    '[name="preferred_endpoints"] button';
+  const FILTER_TEXT_INPUT_SELECTOR = '[name="filters"] input';
+  const FILTER_BUTTON_SELECTOR = '[name="filters"] button';
+  const AZURE_FILTER_SELECTOR = '[name="filter"]';
+  const SYNC_INTERVAL_SELECTOR = '[name="sync_interval_seconds"]';
+  const SUBMIT_BTN_SELECTOR = '.rose-form-actions [type="submit"]';
+  const CANCEL_BTN_SELECTOR = '.rose-form-actions [type="button"]';
+  const NAME_SELECTOR = '[name="name"]';
+
   let getHostSetCount;
 
   const instances = {
@@ -79,8 +91,8 @@ module('Acceptance | host-catalogs | host sets | create', function (hooks) {
     assert.expect(1);
     const count = getHostSetCount();
     await visit(urls.newHostSet);
-    await fillIn('[name="name"]', 'random string');
-    await click('[type="submit"]');
+    await fillIn(NAME_SELECTOR, 'random string');
+    await click(SUBMIT_BTN_SELECTOR);
     assert.strictEqual(getHostSetCount(), count + 1);
   });
 
@@ -100,18 +112,19 @@ module('Acceptance | host-catalogs | host sets | create', function (hooks) {
       `${urls.hostCatalogs}/${instances.hostCatalog.id}/host-sets/new`
     );
     const name = 'aws host set';
-    await fillIn('[name="name"]', name);
-    await fillIn('[name="preferred_endpoints"]', 'endpoint');
-    await click('form fieldset:nth-of-type(1) [title="Add"]');
-    await fillIn('[name="filters"]', 'filter');
-    await click('form fieldset:nth-of-type(2) [title="Add"]');
-    await fillIn('[name="sync_interval_seconds"]', 10);
-    await click('[type="submit"]');
+    await fillIn(NAME_SELECTOR, name);
+    await fillIn(PREFERRED_ENDPOINT_TEXT_INPUT_SELECTOR, 'endpoint');
+    await click(PREFERRED_ENDPOINT_BUTTON_SELECTOR);
+    await fillIn(FILTER_TEXT_INPUT_SELECTOR, 'filter_test');
+    await click(FILTER_BUTTON_SELECTOR);
+
+    await fillIn(SYNC_INTERVAL_SELECTOR, 10);
+    await click(SUBMIT_BTN_SELECTOR);
 
     assert.strictEqual(getHostSetCount(), count + 1);
     const hostSet = this.server.schema.hostSets.findBy({ name });
     assert.deepEqual(hostSet.preferredEndpoints, ['endpoint']);
-    assert.deepEqual(hostSet.attributes.filters, ['filter']);
+    assert.deepEqual(hostSet.attributes.filters, ['filter_test']);
     assert.deepEqual(hostSet.syncIntervalSeconds, 10);
   });
 
@@ -131,12 +144,12 @@ module('Acceptance | host-catalogs | host sets | create', function (hooks) {
       `${urls.hostCatalogs}/${instances.hostCatalog.id}/host-sets/new`
     );
     const name = 'azure host set';
-    await fillIn('[name="name"]', name);
-    await fillIn('[name="preferred_endpoints"]', 'endpoint');
-    await click('form fieldset:nth-of-type(1) [title="Add"]');
-    await fillIn('[name="filter"]', 'filter');
-    await fillIn('[name="sync_interval_seconds"]', 10);
-    await click('[type="submit"]');
+    await fillIn(NAME_SELECTOR, name);
+    await fillIn(PREFERRED_ENDPOINT_TEXT_INPUT_SELECTOR, 'endpoint');
+    await click(PREFERRED_ENDPOINT_BUTTON_SELECTOR);
+    await fillIn(AZURE_FILTER_SELECTOR, 'filter');
+    await fillIn(SYNC_INTERVAL_SELECTOR, 10);
+    await click(SUBMIT_BTN_SELECTOR);
 
     assert.strictEqual(getHostSetCount(), count + 1);
     const hostSet = this.server.schema.hostSets.findBy({ name });
@@ -173,8 +186,8 @@ module('Acceptance | host-catalogs | host sets | create', function (hooks) {
     assert.expect(2);
     const count = getHostSetCount();
     await visit(urls.newHostSet);
-    await fillIn('[name="name"]', 'random string');
-    await click('.rose-form-actions [type="button"]');
+    await fillIn(NAME_SELECTOR, 'random string');
+    await click(CANCEL_BTN_SELECTOR);
     assert.strictEqual(currentURL(), urls.hostSets);
     assert.strictEqual(getHostSetCount(), count);
   });
@@ -201,7 +214,7 @@ module('Acceptance | host-catalogs | host sets | create', function (hooks) {
       );
     });
     await visit(urls.newHostSet);
-    await click('[type="submit"]');
+    await click(SUBMIT_BTN_SELECTOR);
     assert.ok(
       find('[role="alert"]').textContent.trim(),
       'The request was invalid.'

ui/admin/tests/acceptance/host-catalogs/host-sets/update-test.js

@@ -26,6 +26,20 @@ module('Acceptance | host-catalogs | host sets | update', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
 
+  const PREFERRED_ENDPOINT_TEXT_INPUT_SELECTOR =
+    '[name="preferred_endpoints"] input';
+  const PREFERRED_ENDPOINT_BUTTON_SELECTOR =
+    '[name="preferred_endpoints"] button';
+  const PREFERRED_ENDPOINT_REMOVE_BUTTON_SELECTOR =
+    '[name="preferred_endpoints"] [data-test-remove-button]';
+  const FILTER_TEXT_INPUT_SELECTOR = '[name="filters"] input';
+  const FILTER_BUTTON_SELECTOR = '[name="filters"] button';
+  const FILTER_REMOVE_BUTTON_SELECTOR =
+    '[name="filters"] [data-test-remove-button]';
+  const SYNC_INTERVAL_SELECTOR = '[name="sync_interval_seconds"]';
+  const SUBMIT_BTN_SELECTOR = '.rose-form-actions [type="submit"]';
+  const AZURE_FILTER_SELECTOR = '[name="filter"]';
+  const EDIT_BUTTON_SELECTOR = 'form .rose-form-actions [type="button"]';
   const instances = {
     scopes: {
       global: null,
@@ -33,6 +47,10 @@ module('Acceptance | host-catalogs | host sets | update', function (hooks) {
       project: null,
       hostCatalog: null,
       host: null,
+      awsHostCatalog: null,
+      awsHostSet: null,
+      azureHostCatalog: null,
+      azureHostSet: null,
     },
   };
   const urls = {
@@ -45,6 +63,8 @@ module('Acceptance | host-catalogs | host sets | update', function (hooks) {
     hostSet: null,
     unknownHostSet: null,
     newHostSet: null,
+    awshostSet: null,
+    azureHostSet: null,
   };
 
   hooks.beforeEach(function () {
@@ -61,10 +81,36 @@ module('Acceptance | host-catalogs | host sets | update', function (hooks) {
     instances.hostCatalog = this.server.create('host-catalog', {
       scope: instances.scopes.project,
     });
+
     instances.hostSet = this.server.create('host-set', {
       scope: instances.scopes.project,
       hostCatalog: instances.hostCatalog,
     });
+    instances.awsHostCatalog = this.server.create('host-catalog', {
+      scope: instances.scopes.project,
+      type: 'plugin',
+      plugin: {
+        id: `plugin-id-1`,
+        name: 'aws',
+      },
+    });
+    instances.awsHostSet = this.server.create('host-set', {
+      scope: instances.scopes.project,
+      hostCatalog: instances.awsHostCatalog,
+    });
+
+    instances.azureHostCatalog = this.server.create('host-catalog', {
+      scope: instances.scopes.project,
+      type: 'plugin',
+      plugin: {
+        id: `plugin-id-1`,
+        name: 'azure',
+      },
+    });
+    instances.azureHostSet = this.server.create('host-set', {
+      scope: instances.scopes.project,
+      hostCatalog: instances.azureHostCatalog,
+    });
     // Generate route URLs for resources
     urls.globalScope = `/scopes/global/scopes`;
     urls.orgScope = `/scopes/${instances.scopes.org.id}/scopes`;
@@ -75,6 +121,8 @@ module('Acceptance | host-catalogs | host sets | update', function (hooks) {
     urls.hostSet = `${urls.hostSets}/${instances.hostSet.id}`;
     urls.unknownHostSet = `${urls.hostSets}/foo`;
     urls.newHostSet = `${urls.hostSets}/new`;
+    urls.awshostSet = `${urls.hostCatalogs}/${instances.awsHostCatalog.id}/host-sets/${instances.awsHostSet.id}`;
+    urls.azureHostSet = `${urls.hostCatalogs}/${instances.azureHostCatalog.id}/host-sets/${instances.azureHostSet.id}`;
     // Generate resource couner
     authenticateSession({});
   });
@@ -101,7 +149,7 @@ module('Acceptance | host-catalogs | host sets | update', function (hooks) {
       );
     });
     await visit(urls.newHostSet);
-    await click('[type="submit"]');
+    await click(SUBMIT_BTN_SELECTOR);
     assert.ok(
       find('[role="alert"]').textContent.trim(),
       'The request was invalid.'
@@ -116,9 +164,9 @@ module('Acceptance | host-catalogs | host sets | update', function (hooks) {
     assert.expect(3);
     assert.notEqual(instances.hostSet.name, 'random string');
     await visit(urls.hostSet);
-    await click('form [type="button"]', 'Activate edit mode');
+    await click(EDIT_BUTTON_SELECTOR, 'Activate edit mode');
     await fillIn('[name="name"]', 'random string');
-    await click('.rose-form-actions [type="submit"]');
+    await click(SUBMIT_BTN_SELECTOR);
     assert.strictEqual(currentURL(), urls.hostSet);
     assert.strictEqual(
       this.server.schema.hostSets.first().name,
@@ -127,96 +175,89 @@ module('Acceptance | host-catalogs | host sets | update', function (hooks) {
   });
 
   test('can save changes to an existing aws host-set', async function (assert) {
-    assert.expect(5);
-    instances.hostCatalog = this.server.create('host-catalog', {
-      scope: instances.scopes.project,
-      type: 'plugin',
-      plugin: {
-        id: `plugin-id-1`,
-        name: 'aws',
-      },
-    });
-    instances.hostSet = this.server.create('host-set', {
-      scope: instances.scopes.project,
-      hostCatalog: instances.hostCatalog,
-    });
-    urls.hostSet = `${urls.hostCatalogs}/${instances.hostCatalog.id}/host-sets/${instances.hostSet.id}`;
-    await visit(urls.hostSet);
+    assert.expect(7);
 
-    await click(
-      'form .rose-form-actions [type="button"]',
-      'Activate edit mode'
-    );
+    await visit(urls.awshostSet);
+
+    await click(EDIT_BUTTON_SELECTOR, 'Activate edit mode');
 
     const name = 'aws host set';
     await fillIn('[name="name"]', name);
-    // Remove all the preferred endpoints
-    await Promise.all(
-      findAll('form fieldset:nth-of-type(1) [title="Remove"]').map((element) =>
-        click(element)
-      )
-    );
-    await fillIn('[name="preferred_endpoints"]', 'endpoint');
-    await click('form fieldset:nth-of-type(1) [title="Add"]');
-    // Remove all the filters
-    await Promise.all(
-      findAll('form fieldset:nth-of-type(2) [title="Remove"]').map((element) =>
-        click(element)
-      )
-    );
-    await fillIn('[name="filters"]', 'filter');
-    await click('form fieldset:nth-of-type(2) [title="Add"]');
-    await fillIn('[name="sync_interval_seconds"]', 10);
-    await click('.rose-form-actions [type="submit"]');
 
-    assert.strictEqual(currentURL(), urls.hostSet);
+    const endpointList = await Promise.all(
+      findAll(PREFERRED_ENDPOINT_REMOVE_BUTTON_SELECTOR)
+    );
+
+    for (const element of endpointList) {
+      await click(element);
+    }
+
+    assert.strictEqual(
+      findAll(PREFERRED_ENDPOINT_REMOVE_BUTTON_SELECTOR).length,
+      0
+    );
+
+    await fillIn(PREFERRED_ENDPOINT_TEXT_INPUT_SELECTOR, 'sample endpoint');
+    await click(PREFERRED_ENDPOINT_BUTTON_SELECTOR);
+
+    // Remove all the filters
+    const filterList = await Promise.all(
+      findAll(FILTER_REMOVE_BUTTON_SELECTOR)
+    );
+    for (const element of filterList) {
+      await click(element);
+    }
+
+    assert.strictEqual(findAll(FILTER_REMOVE_BUTTON_SELECTOR).length, 0);
+    await fillIn(FILTER_TEXT_INPUT_SELECTOR, 'sample filters');
+    await click(FILTER_BUTTON_SELECTOR);
+
+    await fillIn(SYNC_INTERVAL_SELECTOR, 10);
+
+    await click(SUBMIT_BTN_SELECTOR);
+
+    assert.strictEqual(currentURL(), urls.awshostSet);
     const hostSet = this.server.schema.hostSets.findBy({ name });
     assert.strictEqual(hostSet.name, name);
-    assert.deepEqual(hostSet.preferredEndpoints, ['endpoint']);
-    assert.deepEqual(hostSet.attributes.filters, ['filter']);
+    assert.deepEqual(hostSet.preferredEndpoints, ['sample endpoint']);
+    assert.deepEqual(hostSet.attributes.filters, ['sample filters']);
     assert.deepEqual(hostSet.syncIntervalSeconds, 10);
   });
 
   test('can save changes to an existing azure host-set', async function (assert) {
-    assert.expect(5);
-    instances.hostCatalog = this.server.create('host-catalog', {
-      scope: instances.scopes.project,
-      type: 'plugin',
-      plugin: {
-        id: `plugin-id-1`,
-        name: 'azure',
-      },
-    });
-    instances.hostSet = this.server.create('host-set', {
-      scope: instances.scopes.project,
-      hostCatalog: instances.hostCatalog,
-    });
-    urls.hostSet = `${urls.hostCatalogs}/${instances.hostCatalog.id}/host-sets/${instances.hostSet.id}`;
-    await visit(urls.hostSet);
+    assert.expect(6);
 
-    await click(
-      'form .rose-form-actions [type="button"]',
-      'Activate edit mode'
-    );
+    await visit(urls.azureHostSet);
+
+    await click(EDIT_BUTTON_SELECTOR, 'Activate edit mode');
 
     const name = 'azure host set';
     await fillIn('[name="name"]', name);
     // Remove all the preferred endpoints
-    await Promise.all(
-      findAll('form fieldset:nth-of-type(1) [title="Remove"]').map((element) =>
-        click(element)
-      )
-    );
-    await fillIn('[name="preferred_endpoints"]', 'endpoint');
-    await click('form fieldset:nth-of-type(1) [title="Add"]');
-    await fillIn('[name="filter"]', 'filter');
-    await fillIn('[name="sync_interval_seconds"]', 10);
-    await click('.rose-form-actions [type="submit"]');
 
-    assert.strictEqual(currentURL(), urls.hostSet);
+    const endpointList = await Promise.all(
+      findAll(PREFERRED_ENDPOINT_REMOVE_BUTTON_SELECTOR)
+    );
+
+    for (const element of endpointList) {
+      await click(element);
+    }
+
+    assert.strictEqual(
+      findAll(PREFERRED_ENDPOINT_REMOVE_BUTTON_SELECTOR).length,
+      0
+    );
+    await fillIn(PREFERRED_ENDPOINT_TEXT_INPUT_SELECTOR, 'sample endpoints');
+    await click(PREFERRED_ENDPOINT_BUTTON_SELECTOR);
+
+    await fillIn(AZURE_FILTER_SELECTOR, 'filter');
+    await fillIn(SYNC_INTERVAL_SELECTOR, 10);
+    await click(SUBMIT_BTN_SELECTOR);
+
+    assert.strictEqual(currentURL(), urls.azureHostSet);
     const hostSet = this.server.schema.hostSets.findBy({ name });
     assert.strictEqual(hostSet.name, name);
-    assert.deepEqual(hostSet.preferredEndpoints, ['endpoint']);
+    assert.deepEqual(hostSet.preferredEndpoints, ['sample endpoints']);
     assert.deepEqual(hostSet.attributes.filter, 'filter');
     assert.deepEqual(hostSet.syncIntervalSeconds, 10);
   });
@@ -232,7 +273,7 @@ module('Acceptance | host-catalogs | host sets | update', function (hooks) {
   test('can cancel changes to existing host-set', async function (assert) {
     assert.expect(2);
     await visit(urls.hostSet);
-    await click('form [type="button"]', 'Activate edit mode');
+    await click(EDIT_BUTTON_SELECTOR, 'Activate edit mode');
     await fillIn('[name="name"]', 'random string');
     await click('.rose-form-actions [type="button"]');
     assert.notEqual(instances.hostSet.name, 'random string');
@@ -261,9 +302,9 @@ module('Acceptance | host-catalogs | host sets | update', function (hooks) {
       );
     });
     await visit(urls.hostSet);
-    await click('form [type="button"]', 'Activate edit mode');
+    await click(EDIT_BUTTON_SELECTOR, 'Activate edit mode');
     await fillIn('[name="name"]', 'random string');
-    await click('[type="submit"]');
+    await click(SUBMIT_BTN_SELECTOR);
     assert.ok(
       find('[role="alert"]').textContent.trim(),
       'The request was invalid.'
@@ -280,7 +321,7 @@ module('Acceptance | host-catalogs | host sets | update', function (hooks) {
     confirmService.enabled = true;
     assert.notEqual(instances.hostSet.name, 'random string');
     await visit(urls.hostSet);
-    await click('form [type="button"]', 'Activate edit mode');
+    await click(EDIT_BUTTON_SELECTOR, 'Activate edit mode');
     await fillIn('[name="name"]', 'random string');
     assert.strictEqual(currentURL(), urls.hostSet);
     try {

ui/admin/tests/integration/components/form/field/key-value-list-test.js

@@ -1,64 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-import { setupIntl } from 'ember-intl/test-support';
-
-module('Integration | Component | key-value-list', function (hooks) {
-  setupRenderingTest(hooks);
-  setupIntl(hooks);
-
-  test('it renders fields', async function (assert) {
-    await render(hbs`
-        <Form::Field::KeyValueList as |M|>
-          <M.Legend>Label</M.Legend>
-          <M.HelperText>Help</M.HelperText>
-          <M.Error as |E|>
-            <E.Message>Error!</E.Message>
-          </M.Error>
-        </Form::Field::KeyValueList>
-    `);
-
-    assert.dom('tbody tr').exists({ count: 1 });
-    assert.dom('legend').exists().hasText('Label');
-    assert.dom('.hds-form-helper-text').exists().hasText('Help');
-    assert.dom('.hds-form-error__message').exists().hasText('Error!');
-    assert.dom('button').exists().hasText('Add');
-  });
-
-  test('it renders multiple options', async function (assert) {
-    this.options = [
-      { key: 'one', value: 'two' },
-      { key: 'three', value: 'four' },
-    ];
-
-    // Template block usage:
-    await render(hbs`
-        <Form::Field::KeyValueList
-            @options={{this.options}}
-        />
-    `);
-
-    assert.dom('tbody tr').exists({ count: 3 });
-  });
-
-  test('it renders multiple options with only keys', async function (assert) {
-    this.options = [{ key: 'one' }, { key: 'three' }];
-
-    // Template block usage:
-    await render(hbs`
-        <Form::Field::KeyValueList
-            @options={{this.options}}
-            @hasNoValue={{true}}
-        />
-    `);
-
-    assert.dom('tbody tr:first-child td').exists({ count: 2 });
-    assert.dom('tbody tr').exists({ count: 3 });
-  });
-});

ui/admin/tests/integration/components/form/field/list-wrapper-test.js

@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { setupIntl } from 'ember-intl/test-support';
+
+module('Integration | Component | list-wrapper', function (hooks) {
+  setupRenderingTest(hooks);
+  setupIntl(hooks);
+
+  test('it renders fields', async function (assert) {
+    this.error = [
+      {
+        message: 'Error!',
+      },
+    ];
+    await render(hbs`
+    <Form::Field::ListWrapper>
+      <:fieldset as |F|>
+        <F.Legend>
+          Label
+        </F.Legend>
+        <F.HelperText>
+          Help
+        </F.HelperText>
+        <F.Error as |E|>
+          <E.Message>Error!</E.Message>  
+        </F.Error>
+      </:fieldset>
+      <:field as |F|>
+        <F.KeyValue>
+        </F.KeyValue>
+        </:field>
+    </Form::Field::ListWrapper>
+    `);
+
+    assert.dom('tbody tr').exists({ count: 1 });
+    assert.dom('legend').exists().hasText('Label');
+    assert.dom('.hds-form-helper-text').exists().hasText('Help');
+
+    assert.dom('.hds-form-error__message').exists().hasText('Error!');
+    assert.dom('button').exists().hasText('Add');
+  });
+
+  test('it renders multiple options with key value pair', async function (assert) {
+    this.options = [
+      { key: 'one', value: 'two' },
+      { key: 'three', value: 'four' },
+    ];
+
+    await render(hbs`
+        <Form::Field::ListWrapper>
+          <:field as |F|>
+            <F.KeyValue  @options={{this.options}}></F.KeyValue>
+          </:field>
+
+           
+        </Form::Field::ListWrapper>
+    `);
+
+    assert.dom('tbody tr').exists({ count: 3 });
+  });
+
+  test('it renders multiple options with a single text field', async function (assert) {
+    this.options = [{ value: 'one' }, { value: 'three' }];
+    this.fn = () => {};
+
+    await render(hbs`
+    
+    <Form::Field::ListWrapper>
+      <:field as |F|>
+        <F.TextInput 
+          @options={{this.options}}  
+          @removeOptionByIndex={{this.fn}}>
+        </F.TextInput>
+        </:field>
+    </Form::Field::ListWrapper>
+    `);
+
+    assert
+      .dom('.list-wrapper-field [data-test-remove-button]')
+      .exists({ count: 2 });
+
+    assert.dom('tbody tr').exists({ count: 3 });
+  });
+});