From ac7904c27860929da1e796fdfc301f51b41b6c81 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 7 Jun 2022 10:03:32 -0600
Subject: [PATCH 1/9] wip

---
 ui/lib/core/addon/components/form-field.hbs   |  28 ++-
 ui/lib/core/addon/components/string-list.hbs  |  56 ++++++
 ui/lib/core/addon/components/string-list.js   | 188 +++++++-----------
 .../templates/components/string-list.hbs      |  42 ----
 ui/lib/core/package.json                      |   2 +
 ui/package.json                               |   2 +-
 ui/yarn.lock                                  |  20 +-
 7 files changed, 164 insertions(+), 174 deletions(-)
 create mode 100644 ui/lib/core/addon/components/string-list.hbs
 delete mode 100644 ui/lib/core/addon/templates/components/string-list.hbs

diff --git a/ui/lib/core/addon/components/form-field.hbs b/ui/lib/core/addon/components/form-field.hbs
index 161354cc6018..e5eb8804107e 100644
--- a/ui/lib/core/addon/components/form-field.hbs
+++ b/ui/lib/core/addon/components/form-field.hbs
@@ -195,14 +195,26 @@
       {{/if}}
     </Toggle>
   {{else if (eq @attr.options.editType "stringArray")}}
-    <StringList
-      @data-test-input={{@attr.name}}
-      @label={{this.labelString}}
-      @warning={{@attr.options.warning}}
-      @helpText={{@attr.options.helpText}}
-      @inputValue={{get @model this.valuePath}}
-      @onChange={{this.setAndBroadcast}}
-    />
+    {{#if (eq @attr.name "tokenBoundCidrs")}}
+      {{! customize the tooltip for token_bound_cidrs }}
+      <StringList
+        data-test-input={{@attr.name}}
+        @label={{this.labelString}}
+        @warning={{@attr.options.warning}}
+        @helpText={{"Specifies the blocks of IP addresses which are allowed to use the generated token. One entry per row."}}
+        @inputValue={{get @model this.valuePath}}
+        @onChange={{this.setAndBroadcast}}
+      />
+    {{else}}
+      <StringList
+        data-test-input={{@attr.name}}
+        @label={{this.labelString}}
+        @warning={{@attr.options.warning}}
+        @helpText={{@attr.options.helpText}}
+        @inputValue={{get @model this.valuePath}}
+        @onChange={{this.setAndBroadcast}}
+      />
+    {{/if}}
   {{else if (eq @attr.options.sensitive true)}}
     {{! Masked Input }}
     <MaskedInput
diff --git a/ui/lib/core/addon/components/string-list.hbs b/ui/lib/core/addon/components/string-list.hbs
new file mode 100644
index 000000000000..d5674ffc484b
--- /dev/null
+++ b/ui/lib/core/addon/components/string-list.hbs
@@ -0,0 +1,56 @@
+<div
+  class="field string-list form-section"
+  data-test-component="string-list"
+  data-test-input
+  {{did-insert this.autoSize}}
+  {{did-update this.autoSizeUpdate}}
+  ...attributes
+>
+  {{#if @label}}
+    <label class="title is-label" data-test-string-list-label="true">
+      {{@label}}
+      {{#if @helpText}}
+        <InfoTooltip>{{@helpText}}</InfoTooltip>
+      {{/if}}
+    </label>
+  {{/if}}
+  {{#if @warning}}
+    <AlertBanner @type="warning" @message={{@warning}} />
+  {{/if}}
+  {{#each this.inputList as |data index|}}
+    <div class="field is-grouped" data-test-string-list-row={{index}}>
+      <div class="control is-expanded">
+        <Textarea
+          data-test-string-list-input={{index}}
+          class="input"
+          @value={{data.value}}
+          name={{concat this.elementId "-" index}}
+          id={{concat this.elementId "-" index}}
+          {{on "keyup" (action "inputChanged" index)}}
+          {{on "change" (action "inputChanged" index)}}
+        />
+      </div>
+      <div class="control">
+        {{#if (eq (inc index) this.inputList.length)}}
+          <button
+            type="button"
+            class="button is-outlined is-primary"
+            data-test-string-list-button="add"
+            {{on "click" this.addInput}}
+          >
+            Add
+          </button>
+        {{else}}
+          <button
+            type="button"
+            class="button is-expanded is-icon"
+            data-test-string-list-button="delete"
+            {{on "click" (fn this.removeInput index)}}
+          >
+            <Icon @name="trash" />
+          </button>
+        {{/if}}
+      </div>
+    </div>
+  {{/each}}
+</div>
\ No newline at end of file
diff --git a/ui/lib/core/addon/components/string-list.js b/ui/lib/core/addon/components/string-list.js
index 197411e0aef9..51965612d5ad 100644
--- a/ui/lib/core/addon/components/string-list.js
+++ b/ui/lib/core/addon/components/string-list.js
@@ -1,109 +1,70 @@
 import ArrayProxy from '@ember/array/proxy';
-import Component from '@ember/component';
-import { set, computed } from '@ember/object';
+import Component from '@glimmer/component';
 import autosize from 'autosize';
-import layout from '../templates/components/string-list';
+import { action } from '@ember/object';
+import { set } from '@ember/object';
 
-export default Component.extend({
-  layout,
-  'data-test-component': 'string-list',
-  attributeBindings: ['data-test-component', 'data-test-input'],
-  classNames: ['field', 'string-list', 'form-section'],
+/**
+ * @module StringList
+ * StringList components xx.
+ *
+ * @example
+ * ```js
+ * <StringList @label={label} @onChange={{this.setAndBroadcast}} @inputValue={{this.valuePath}}/>
+ * ```
+ * @param {string} label - Text displayed in the header above all the inputs.
+ * @param {function} onChange - Function called when any of the inputs change.
+ * @param {string} inputValue - A comma-separated string or an array of strings.
+ * @param {string} warning - Text displayed as a warning.
+ * @param {string} helpText - Text displayed as a tooltip.
+ * @param {string} type=array - Optional type for inputValue.
+ */
 
-  /*
-   * @public
-   * @param String
-   *
-   * Optional - Text displayed in the header above all of the inputs
-   *
-   */
-  label: null,
+export default class StringList extends Component {
+  constructor() {
+    super(...arguments);
+    // this.setType();
+    // this.toList();
+    // this.send('addInput');
+  }
 
-  /*
-   * @public
-   * @param Function
-   *
-   * Function called when any of the inputs change
-   * accepts a single param `value` that is the
-   * result of calling `toVal()`.
-   *
-   */
-  onChange: () => {},
-
-  /*
-   * @public
-   * @param String | Array
-   * A comma-separated string or an array of strings.
-   * Defaults to an empty array.
-   *
-   */
-  inputValue: computed(function () {
-    return [];
-  }),
-
-  /*
-   *
-   * @public
-   * @param String - ['array'|'string]
-   *
-   * Optional type for `inputValue` - defaults to `'array'`
-   * Needs to match type of `inputValue` because it is set by the component on init.
-   *
-   */
-  type: 'array',
-
-  /*
-   *
-   * @private
-   * @param Ember.ArrayProxy
-   *
-   * mutable array that contains objects in the form of
-   * {
-   *   value: 'somestring',
-   * }
-   *
-   * used to track the state of values bound to the various inputs
-   *
-   */
   /* eslint-disable ember/no-side-effects */
-  inputList: computed('content', function () {
+  get inputList() {
+    // ARG was content for watching
     return ArrayProxy.create({
-      content: [],
       // trim the `value` when accessing objects
+      content: [],
       objectAtContent: function (idx) {
         const obj = this.content.objectAt(idx);
         if (obj && obj.value) {
           set(obj, 'value', obj.value.trim());
         }
+        console.log('here');
         return obj;
       },
     });
-  }),
-
-  init() {
-    this._super(...arguments);
-    this.setType();
-    this.toList();
-    this.send('addInput');
-  },
+  }
 
-  didInsertElement() {
-    this._super(...arguments);
-    autosize(this.element.querySelector('textarea'));
-  },
-
-  didUpdate() {
-    this._super(...arguments);
-    autosize.update(this.element.querySelector('textarea'));
-  },
+  get type() {
+    return this.args.type || 'array';
+  }
 
   setType() {
     const list = this.inputList;
     if (!list) {
       return;
     }
-    this.set('type', typeof list);
-  },
+    this.type = typeof list;
+  }
+
+  toList() {
+    let input = this.args.inputValue || [];
+    const inputList = this.inputList;
+    if (typeof input === 'string') {
+      input = input.split(',');
+    }
+    inputList.addObjects(input.map((value) => ({ value })));
+  }
 
   toVal() {
     const inputs = this.inputList.filter((x) => x.value).mapBy('value');
@@ -111,37 +72,38 @@ export default Component.extend({
       return inputs.join(',');
     }
     return inputs;
-  },
+  }
 
-  toList() {
-    let input = this.inputValue || [];
-    const inputList = this.inputList;
-    if (typeof input === 'string') {
-      input = input.split(',');
-    }
-    inputList.addObjects(input.map((value) => ({ value })));
-  },
+  @action
+  autoSize() {
+    autosize(document.querySelector('textarea'));
+  }
+  @action
+  autoSizeUpdate() {
+    autosize.update(document.querySelector('textarea'));
+  }
 
-  actions: {
-    inputChanged(idx, event) {
-      const inputObj = this.inputList.objectAt(idx);
-      const onChange = this.onChange;
-      set(inputObj, 'value', event.target.value);
-      onChange(this.toVal());
-    },
+  @action
+  inputChanged(idx, event) {
+    const inputObj = this.inputList.objectAt(idx);
+    const onChange = this.args.onChange;
+    set(inputObj, 'value', event.target.value);
+    onChange(this.toVal());
+  }
 
-    addInput() {
-      const inputList = this.inputList;
-      if (inputList.get('lastObject.value') !== '') {
-        inputList.pushObject({ value: '' });
-      }
-    },
+  @action
+  addInput() {
+    const inputList = this.inputList;
+    if (inputList.get('lastObject.value') !== '') {
+      inputList.pushObject({ value: '' });
+    }
+  }
 
-    removeInput(idx) {
-      const onChange = this.onChange;
-      const inputs = this.inputList;
-      inputs.removeObject(inputs.objectAt(idx));
-      onChange(this.toVal());
-    },
-  },
-});
+  @action
+  removeInput(idx) {
+    const onChange = this.args.onChange;
+    const inputs = this.inputList;
+    inputs.removeObject(inputs.objectAt(idx));
+    onChange(this.toVal());
+  }
+}
diff --git a/ui/lib/core/addon/templates/components/string-list.hbs b/ui/lib/core/addon/templates/components/string-list.hbs
deleted file mode 100644
index f4172221479e..000000000000
--- a/ui/lib/core/addon/templates/components/string-list.hbs
+++ /dev/null
@@ -1,42 +0,0 @@
-{{#if this.label}}
-  <label class="title is-label" data-test-string-list-label="true">
-    {{this.label}}
-    {{#if this.helpText}}
-      <InfoTooltip>{{this.helpText}}</InfoTooltip>
-    {{/if}}
-  </label>
-{{/if}}
-{{#if this.warning}}
-  <AlertBanner @type="warning" @message={{this.warning}} />
-{{/if}}
-{{#each this.inputList as |data index|}}
-  <div class="field is-grouped" data-test-string-list-row={{index}}>
-    <div class="control is-expanded">
-      <Textarea
-        data-test-string-list-input={{index}}
-        class="input"
-        @value={{data.value}}
-        name={{concat this.elementId "-" index}}
-        id={{concat this.elementId "-" index}}
-        {{on "keyup" (action "inputChanged" index)}}
-        {{on "change" (action "inputChanged" index)}}
-      />
-    </div>
-    <div class="control">
-      {{#if (eq (inc index) this.inputList.length)}}
-        <button type="button" class="button is-outlined is-primary" data-test-string-list-button="add" {{action "addInput"}}>
-          Add
-        </button>
-      {{else}}
-        <button
-          type="button"
-          class="button is-expanded is-icon"
-          data-test-string-list-button="delete"
-          {{action "removeInput" index}}
-        >
-          <Icon @name="trash" />
-        </button>
-      {{/if}}
-    </div>
-  </div>
-{{/each}}
\ No newline at end of file
diff --git a/ui/lib/core/package.json b/ui/lib/core/package.json
index 3aa8729d252e..dff41e6b4862 100644
--- a/ui/lib/core/package.json
+++ b/ui/lib/core/package.json
@@ -17,6 +17,8 @@
     "ember-composable-helpers": "*",
     "ember-concurrency": "*",
     "ember-maybe-in-element": "*",
+    "ember-modifier": "*",
+    "ember/render-modifiers": "*",
     "ember-power-select": "*",
     "ember-router-helpers": "*",
     "ember-svg-jar": "*",
diff --git a/ui/package.json b/ui/package.json
index a3f14fe3ca5c..37388205b7c5 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -97,7 +97,7 @@
     "ember-cli-dependency-checker": "^3.2.0",
     "ember-cli-deprecation-workflow": "^2.1.0",
     "ember-cli-element-closest-polyfill": "^0.0.1",
-    "ember-cli-flash": "^1.7.2",
+    "ember-cli-flash": "2.1.2",
     "ember-cli-htmlbars": "^5.7.2",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-mirage": "2.4.0",
diff --git a/ui/yarn.lock b/ui/yarn.lock
index cda6465c1eca..06fdd96b6282 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -7537,21 +7537,21 @@ ember-cli-element-closest-polyfill@^0.0.1:
     ember-cli-babel "^6.16.0"
     fastboot-transform "^0.1.3"
 
-ember-cli-flash@^1.7.2:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/ember-cli-flash/-/ember-cli-flash-1.9.1.tgz#fda9f7b92fdb4bb85688e4df554beb514c1749e7"
-  integrity sha512-9AN0BD27owvnNpFBELy5zSNIbJBUP8xW6mFV98L0qHnfJk2gG7bXbXOzt6VtRqWC+Pm5rCRqUoCz+NiwsPvObw==
+ember-cli-flash@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ember-cli-flash/-/ember-cli-flash-2.1.2.tgz#58043bf4ae96fba8fa2b15684e66bfcd21294d28"
+  integrity sha512-SxlQd1s7rb0drcxt2sgzUIe7Z53LgP8xwwYpBQfUN6ZDHLRLPAEFe05TGZFwRSBIPYdJCspOpKoLQ+ufxkHw/Q==
   dependencies:
-    ember-cli-babel "^7.1.2"
-    ember-cli-htmlbars "^3.0.0"
-    ember-runtime-enumerable-includes-polyfill "^2.0.0"
+    ember-cli-babel "^7.18.0"
+    ember-cli-htmlbars "^4.2.3"
+    ember-runtime-enumerable-includes-polyfill "^2.1.0"
 
 ember-cli-get-component-path-option@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/ember-cli-get-component-path-option/-/ember-cli-get-component-path-option-1.0.0.tgz#0d7b595559e2f9050abed804f1d8eff1b08bc771"
   integrity sha1-DXtZVVni+QUKvtgE8djv8bCLx3E=
 
-ember-cli-htmlbars@^3.0.0, ember-cli-htmlbars@^3.0.1:
+ember-cli-htmlbars@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-3.1.0.tgz#87806c2a0bca2ab52d4fb8af8e2215c1ca718a99"
   integrity sha512-cgvRJM73IT0aePUG7oQ/afB7vSRBV3N0wu9BrWhHX2zkR7A7cUBI7KC9VPk6tbctCXoM7BRGsCC4aIjF7yrfXA==
@@ -7561,7 +7561,7 @@ ember-cli-htmlbars@^3.0.0, ember-cli-htmlbars@^3.0.1:
     json-stable-stringify "^1.0.1"
     strip-bom "^3.0.0"
 
-ember-cli-htmlbars@^4.3.1:
+ember-cli-htmlbars@^4.2.3, ember-cli-htmlbars@^4.3.1:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-4.5.0.tgz#d299e4f7eba6f30dc723ee086906cc550beb252e"
   integrity sha512-bYJpK1pqFu9AadDAGTw05g2LMNzY8xTCIqQm7dMJmKEoUpLRFbPf4SfHXrktzDh7Q5iggl6Skzf1M0bPlIxARw==
@@ -8389,7 +8389,7 @@ ember-router-helpers@^0.4.0:
   dependencies:
     ember-cli-babel "^7.20.0"
 
-ember-runtime-enumerable-includes-polyfill@^2.0.0:
+ember-runtime-enumerable-includes-polyfill@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/ember-runtime-enumerable-includes-polyfill/-/ember-runtime-enumerable-includes-polyfill-2.1.0.tgz#dc6d4a028471e4acc350dfd2a149874fb20913f5"
   integrity sha512-au18iI8VbEDYn3jLFZzETnKN5ciPgCUxMRucEP3jkq7qZ6sE0FVKpWMPY/h9tTND3VOBJt6fgPpEBJoJVCUudg==

From 9c35bbf53d3bd31cd17a3e1d2ae631ce0918ff4f Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 7 Jun 2022 10:39:18 -0600
Subject: [PATCH 2/9] wip

---
 ui/lib/core/addon/components/string-list.hbs | 11 +++-------
 ui/lib/core/addon/components/string-list.js  | 22 +++++++-------------
 2 files changed, 10 insertions(+), 23 deletions(-)

diff --git a/ui/lib/core/addon/components/string-list.hbs b/ui/lib/core/addon/components/string-list.hbs
index d5674ffc484b..ef9e3c2ceaf8 100644
--- a/ui/lib/core/addon/components/string-list.hbs
+++ b/ui/lib/core/addon/components/string-list.hbs
@@ -1,11 +1,4 @@
-<div
-  class="field string-list form-section"
-  data-test-component="string-list"
-  data-test-input
-  {{did-insert this.autoSize}}
-  {{did-update this.autoSizeUpdate}}
-  ...attributes
->
+<div class="field string-list form-section" data-test-component="string-list" data-test-input ...attributes>
   {{#if @label}}
     <label class="title is-label" data-test-string-list-label="true">
       {{@label}}
@@ -28,6 +21,8 @@
           id={{concat this.elementId "-" index}}
           {{on "keyup" (action "inputChanged" index)}}
           {{on "change" (action "inputChanged" index)}}
+          {{did-insert this.autoSize}}
+          {{did-update this.autoSizeUpdate}}
         />
       </div>
       <div class="control">
diff --git a/ui/lib/core/addon/components/string-list.js b/ui/lib/core/addon/components/string-list.js
index 51965612d5ad..52f355c0f404 100644
--- a/ui/lib/core/addon/components/string-list.js
+++ b/ui/lib/core/addon/components/string-list.js
@@ -23,15 +23,8 @@ import { set } from '@ember/object';
 export default class StringList extends Component {
   constructor() {
     super(...arguments);
-    // this.setType();
-    // this.toList();
-    // this.send('addInput');
-  }
 
-  /* eslint-disable ember/no-side-effects */
-  get inputList() {
-    // ARG was content for watching
-    return ArrayProxy.create({
+    this.inputList = ArrayProxy.create({
       // trim the `value` when accessing objects
       content: [],
       objectAtContent: function (idx) {
@@ -39,14 +32,13 @@ export default class StringList extends Component {
         if (obj && obj.value) {
           set(obj, 'value', obj.value.trim());
         }
-        console.log('here');
         return obj;
       },
     });
-  }
-
-  get type() {
-    return this.args.type || 'array';
+    this.type = this.args.type || 'array';
+    this.setType();
+    this.toList();
+    this.addInput();
   }
 
   setType() {
@@ -75,8 +67,8 @@ export default class StringList extends Component {
   }
 
   @action
-  autoSize() {
-    autosize(document.querySelector('textarea'));
+  autoSize(element) {
+    autosize(element.querySelector('textarea'));
   }
   @action
   autoSizeUpdate() {

From e1a73d893bfe78ed3d502a78060cd9fe6b42834c Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 7 Jun 2022 10:45:01 -0600
Subject: [PATCH 3/9] glimmerization done?

---
 ui/lib/core/addon/components/string-list.hbs | 11 ++++++++---
 ui/lib/core/addon/components/string-list.js  |  5 +++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/ui/lib/core/addon/components/string-list.hbs b/ui/lib/core/addon/components/string-list.hbs
index ef9e3c2ceaf8..e5b98f2483ac 100644
--- a/ui/lib/core/addon/components/string-list.hbs
+++ b/ui/lib/core/addon/components/string-list.hbs
@@ -1,4 +1,11 @@
-<div class="field string-list form-section" data-test-component="string-list" data-test-input ...attributes>
+<div
+  class="field string-list form-section"
+  data-test-component="string-list"
+  {{did-insert this.autoSize}}
+  {{did-update this.autoSizeUpdate}}
+  data-test-input
+  ...attributes
+>
   {{#if @label}}
     <label class="title is-label" data-test-string-list-label="true">
       {{@label}}
@@ -21,8 +28,6 @@
           id={{concat this.elementId "-" index}}
           {{on "keyup" (action "inputChanged" index)}}
           {{on "change" (action "inputChanged" index)}}
-          {{did-insert this.autoSize}}
-          {{did-update this.autoSizeUpdate}}
         />
       </div>
       <div class="control">
diff --git a/ui/lib/core/addon/components/string-list.js b/ui/lib/core/addon/components/string-list.js
index 52f355c0f404..b1123b27c853 100644
--- a/ui/lib/core/addon/components/string-list.js
+++ b/ui/lib/core/addon/components/string-list.js
@@ -70,9 +70,10 @@ export default class StringList extends Component {
   autoSize(element) {
     autosize(element.querySelector('textarea'));
   }
+
   @action
-  autoSizeUpdate() {
-    autosize.update(document.querySelector('textarea'));
+  autoSizeUpdate(element) {
+    autosize.update(element.querySelector('textarea'));
   }
 
   @action

From fcc27aaf258ed0b6cdab86f480ea9e442780831e Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 7 Jun 2022 11:23:42 -0600
Subject: [PATCH 4/9] fix tests

---
 .../components/string-list-test.js            | 32 +++++++++++--------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/ui/tests/integration/components/string-list-test.js b/ui/tests/integration/components/string-list-test.js
index 2dfe3a7bfa9d..d97cb02178bc 100644
--- a/ui/tests/integration/components/string-list-test.js
+++ b/ui/tests/integration/components/string-list-test.js
@@ -1,11 +1,16 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render, click, fillIn, triggerKeyEvent } from '@ember/test-helpers';
+import sinon from 'sinon';
 import hbs from 'htmlbars-inline-precompile';
 
 module('Integration | Component | string list', function (hooks) {
   setupRenderingTest(hooks);
 
+  hooks.beforeEach(function () {
+    this.spy = sinon.spy();
+  });
+
   const assertBlank = function (assert) {
     assert.dom('[data-test-string-list-input]').exists({ count: 1 }, 'renders 1 input');
     assert.dom('[data-test-string-list-input]').hasValue('', 'the input is blank');
@@ -26,56 +31,55 @@ module('Integration | Component | string list', function (hooks) {
 
   test('it renders the label', async function (assert) {
     assert.expect(4);
-    await render(hbs`{{string-list label="foo"}}`);
+    await render(hbs`<StringList @label="foo" @onChange={{this.spy}} />`);
     assert.dom('[data-test-string-list-label]').hasText('foo', 'renders the label when provided');
-
-    await render(hbs`{{string-list}}`);
+    await render(hbs`<StringList />`);
     assert.dom('[data-test-string-list-label]').doesNotExist('does not render the label');
     assertBlank(assert);
   });
 
   test('it renders inputValue from empty string', async function (assert) {
     assert.expect(2);
-    await render(hbs`{{string-list inputValue=""}}`);
+    await render(hbs`<StringList @inputValue="" />`);
     assertBlank(assert);
   });
 
   test('it renders inputValue from string with one value', async function (assert) {
     assert.expect(3);
-    await render(hbs`{{string-list inputValue="foo"}}`);
+    await render(hbs`<StringList @inputValue="foo" />`);
     assertFoo(assert);
   });
 
   test('it renders inputValue from comma-separated string', async function (assert) {
     assert.expect(4);
-    await render(hbs`{{string-list inputValue="foo,bar"}}`);
+    await render(hbs`<StringList @inputValue="foo,bar" />`);
     assertFooBar(assert);
   });
 
   test('it renders inputValue from a blank array', async function (assert) {
     assert.expect(2);
     this.set('inputValue', []);
-    await render(hbs`{{string-list inputValue=inputValue}}`);
+    await render(hbs`<StringList @inputValue={{inputValue}} />`);
     assertBlank(assert);
   });
 
   test('it renders inputValue array with a single item', async function (assert) {
     assert.expect(3);
     this.set('inputValue', ['foo']);
-    await render(hbs`{{string-list inputValue=inputValue}}`);
+    await render(hbs`<StringList @inputValue={{inputValue}} />`);
     assertFoo(assert);
   });
 
   test('it renders inputValue array with a multiple items', async function (assert) {
     assert.expect(4);
     this.set('inputValue', ['foo', 'bar']);
-    await render(hbs`{{string-list inputValue=inputValue}}`);
+    await render(hbs`<StringList @inputValue={{inputValue}} />`);
     assertFooBar(assert);
   });
 
   test('it adds a new row only when the last row is not blank', async function (assert) {
     assert.expect(5);
-    await render(hbs`{{string-list inputValue=""}}`);
+    await render(hbs`<StringList @inputValue="" @onChange={{this.spy}}/>`);
     await click('[data-test-string-list-button="add"]');
     assertBlank(assert);
     await fillIn('[data-test-string-list-input="0"]', 'foo');
@@ -85,7 +89,7 @@ module('Integration | Component | string list', function (hooks) {
   });
 
   test('it trims input values', async function (assert) {
-    await render(hbs`{{string-list inputValue=""}}`);
+    await render(hbs`<StringList @inputValue="" @onChange={{this.spy}}/>`);
     await fillIn('[data-test-string-list-input="0"]', 'foo');
     await triggerKeyEvent('[data-test-string-list-input="0"]', 'keyup', 14);
     assert.dom('[data-test-string-list-input="0"]').hasValue('foo');
@@ -97,7 +101,7 @@ module('Integration | Component | string list', function (hooks) {
     this.set('onChange', function (val) {
       assert.deepEqual(val, ['foo', 'bar'], 'calls onChange with expected value');
     });
-    await render(hbs`{{string-list inputValue=inputValue onChange=(action onChange)}}`);
+    await render(hbs`<StringList @inputValue={{inputValue}} @onChange={{onChange}} />`);
     await fillIn('[data-test-string-list-input="1"]', 'bar');
     await triggerKeyEvent('[data-test-string-list-input="1"]', 'keyup', 14);
   });
@@ -108,7 +112,7 @@ module('Integration | Component | string list', function (hooks) {
     this.set('onChange', function (val) {
       assert.equal(val, 'foo,bar', 'calls onChange with expected value');
     });
-    await render(hbs`{{string-list inputValue=inputValue onChange=(action onChange)}}`);
+    await render(hbs`<StringList @inputValue={{inputValue}} @onChange={{onChange}}/>`);
     await fillIn('[data-test-string-list-input="1"]', 'bar');
     await triggerKeyEvent('[data-test-string-list-input="1"]', 'keyup', 14);
   });
@@ -119,7 +123,7 @@ module('Integration | Component | string list', function (hooks) {
     this.set('onChange', function (val) {
       assert.equal(val, 'bar', 'calls onChange with expected value');
     });
-    await render(hbs`{{string-list inputValue=inputValue onChange=(action onChange)}}`);
+    await render(hbs`<StringList @inputValue={{inputValue}} @onChange={{onChange}} />`);
 
     await click('[data-test-string-list-row="0"] [data-test-string-list-button="delete"]');
     assert.dom('[data-test-string-list-input]').exists({ count: 2 }, 'renders 2 inputs');

From 783c85a4cc6545317fdaa4af03f59e394f036917 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 7 Jun 2022 11:43:55 -0600
Subject: [PATCH 5/9] tooltip and test

---
 ui/lib/core/addon/components/form-field.hbs   | 29 ++++++-------------
 ui/lib/core/addon/components/string-list.hbs  |  4 +--
 ui/lib/core/addon/components/string-list.js   |  9 ++++++
 .../components/string-list-test.js            | 14 ++++++++-
 4 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/ui/lib/core/addon/components/form-field.hbs b/ui/lib/core/addon/components/form-field.hbs
index e5eb8804107e..a877a6269d94 100644
--- a/ui/lib/core/addon/components/form-field.hbs
+++ b/ui/lib/core/addon/components/form-field.hbs
@@ -195,26 +195,15 @@
       {{/if}}
     </Toggle>
   {{else if (eq @attr.options.editType "stringArray")}}
-    {{#if (eq @attr.name "tokenBoundCidrs")}}
-      {{! customize the tooltip for token_bound_cidrs }}
-      <StringList
-        data-test-input={{@attr.name}}
-        @label={{this.labelString}}
-        @warning={{@attr.options.warning}}
-        @helpText={{"Specifies the blocks of IP addresses which are allowed to use the generated token. One entry per row."}}
-        @inputValue={{get @model this.valuePath}}
-        @onChange={{this.setAndBroadcast}}
-      />
-    {{else}}
-      <StringList
-        data-test-input={{@attr.name}}
-        @label={{this.labelString}}
-        @warning={{@attr.options.warning}}
-        @helpText={{@attr.options.helpText}}
-        @inputValue={{get @model this.valuePath}}
-        @onChange={{this.setAndBroadcast}}
-      />
-    {{/if}}
+    <StringList
+      data-test-input={{@attr.name}}
+      @label={{this.labelString}}
+      @warning={{@attr.options.warning}}
+      @helpText={{@attr.options.helpText}}
+      @inputValue={{get @model this.valuePath}}
+      @onChange={{this.setAndBroadcast}}
+      @attrName={{@attr.name}}
+    />
   {{else if (eq @attr.options.sensitive true)}}
     {{! Masked Input }}
     <MaskedInput
diff --git a/ui/lib/core/addon/components/string-list.hbs b/ui/lib/core/addon/components/string-list.hbs
index e5b98f2483ac..5ad86eb5cbe3 100644
--- a/ui/lib/core/addon/components/string-list.hbs
+++ b/ui/lib/core/addon/components/string-list.hbs
@@ -9,8 +9,8 @@
   {{#if @label}}
     <label class="title is-label" data-test-string-list-label="true">
       {{@label}}
-      {{#if @helpText}}
-        <InfoTooltip>{{@helpText}}</InfoTooltip>
+      {{#if this.helpText}}
+        <InfoTooltip>{{this.helpText}}</InfoTooltip>
       {{/if}}
     </label>
   {{/if}}
diff --git a/ui/lib/core/addon/components/string-list.js b/ui/lib/core/addon/components/string-list.js
index b1123b27c853..af1fefe616fa 100644
--- a/ui/lib/core/addon/components/string-list.js
+++ b/ui/lib/core/addon/components/string-list.js
@@ -18,6 +18,7 @@ import { set } from '@ember/object';
  * @param {string} warning - Text displayed as a warning.
  * @param {string} helpText - Text displayed as a tooltip.
  * @param {string} type=array - Optional type for inputValue.
+ * @param {string} attrName - We use this to check the type so we can modify the tooltip content.
  */
 
 export default class StringList extends Component {
@@ -66,6 +67,14 @@ export default class StringList extends Component {
     return inputs;
   }
 
+  get helpText() {
+    if (this.args.attrName === 'tokenBoundCidrs') {
+      return 'Specifies the blocks of IP addresses which are allowed to use the generated token. One entry per row.';
+    } else {
+      return this.args.helpText;
+    }
+  }
+
   @action
   autoSize(element) {
     autosize(element.querySelector('textarea'));
diff --git a/ui/tests/integration/components/string-list-test.js b/ui/tests/integration/components/string-list-test.js
index d97cb02178bc..77fb6180a362 100644
--- a/ui/tests/integration/components/string-list-test.js
+++ b/ui/tests/integration/components/string-list-test.js
@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, click, fillIn, triggerKeyEvent } from '@ember/test-helpers';
+import { render, click, fillIn, triggerKeyEvent, triggerEvent } from '@ember/test-helpers';
 import sinon from 'sinon';
 import hbs from 'htmlbars-inline-precompile';
 
@@ -130,4 +130,16 @@ module('Integration | Component | string list', function (hooks) {
     assert.dom('[data-test-string-list-input="0"]').hasValue('bar');
     assert.dom('[data-test-string-list-input="1"]').hasValue('');
   });
+
+  test('it replaces helpText if name is tokenBoundCidrs meep', async function (assert) {
+    assert.expect(1);
+    await render(hbs`<StringList @label={{'blah'}} @helpText={{'blah'}} @attrName={{'tokenBoundCidrs'}} />`);
+    let tooltipTrigger = document.querySelector('[data-test-tool-tip-trigger]');
+    await triggerEvent(tooltipTrigger, 'mouseenter');
+    assert
+      .dom('[data-test-info-tooltip-content]')
+      .hasText(
+        'Specifies the blocks of IP addresses which are allowed to use the generated token. One entry per row.'
+      );
+  });
 });

From 157a7b37a1d7b7d04b96a451bf1d489e9b51f393 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 7 Jun 2022 11:46:10 -0600
Subject: [PATCH 6/9] changelog

---
 changelog/15852.txt                                 | 3 +++
 ui/tests/integration/components/string-list-test.js | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)
 create mode 100644 changelog/15852.txt

diff --git a/changelog/15852.txt b/changelog/15852.txt
new file mode 100644
index 000000000000..8ed97dcc3029
--- /dev/null
+++ b/changelog/15852.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Changed the tokenBoundCidrs tooltip content to clarify that comma separated values are not accepted in this field.
+```
\ No newline at end of file
diff --git a/ui/tests/integration/components/string-list-test.js b/ui/tests/integration/components/string-list-test.js
index 77fb6180a362..827075f01fc3 100644
--- a/ui/tests/integration/components/string-list-test.js
+++ b/ui/tests/integration/components/string-list-test.js
@@ -131,7 +131,7 @@ module('Integration | Component | string list', function (hooks) {
     assert.dom('[data-test-string-list-input="1"]').hasValue('');
   });
 
-  test('it replaces helpText if name is tokenBoundCidrs meep', async function (assert) {
+  test('it replaces helpText if name is tokenBoundCidrs', async function (assert) {
     assert.expect(1);
     await render(hbs`<StringList @label={{'blah'}} @helpText={{'blah'}} @attrName={{'tokenBoundCidrs'}} />`);
     let tooltipTrigger = document.querySelector('[data-test-tool-tip-trigger]');

From 58a6917a84851cf4effed0b2946a51da0bfe7fb7 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 7 Jun 2022 11:57:52 -0600
Subject: [PATCH 7/9] clean up

---
 ui/lib/core/package.json |  1 -
 ui/package.json          |  2 +-
 ui/yarn.lock             | 20 ++++++++++----------
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/ui/lib/core/package.json b/ui/lib/core/package.json
index dff41e6b4862..b7418f2b56d0 100644
--- a/ui/lib/core/package.json
+++ b/ui/lib/core/package.json
@@ -17,7 +17,6 @@
     "ember-composable-helpers": "*",
     "ember-concurrency": "*",
     "ember-maybe-in-element": "*",
-    "ember-modifier": "*",
     "ember/render-modifiers": "*",
     "ember-power-select": "*",
     "ember-router-helpers": "*",
diff --git a/ui/package.json b/ui/package.json
index 37388205b7c5..a3f14fe3ca5c 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -97,7 +97,7 @@
     "ember-cli-dependency-checker": "^3.2.0",
     "ember-cli-deprecation-workflow": "^2.1.0",
     "ember-cli-element-closest-polyfill": "^0.0.1",
-    "ember-cli-flash": "2.1.2",
+    "ember-cli-flash": "^1.7.2",
     "ember-cli-htmlbars": "^5.7.2",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-mirage": "2.4.0",
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 06fdd96b6282..cda6465c1eca 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -7537,21 +7537,21 @@ ember-cli-element-closest-polyfill@^0.0.1:
     ember-cli-babel "^6.16.0"
     fastboot-transform "^0.1.3"
 
-ember-cli-flash@2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/ember-cli-flash/-/ember-cli-flash-2.1.2.tgz#58043bf4ae96fba8fa2b15684e66bfcd21294d28"
-  integrity sha512-SxlQd1s7rb0drcxt2sgzUIe7Z53LgP8xwwYpBQfUN6ZDHLRLPAEFe05TGZFwRSBIPYdJCspOpKoLQ+ufxkHw/Q==
+ember-cli-flash@^1.7.2:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/ember-cli-flash/-/ember-cli-flash-1.9.1.tgz#fda9f7b92fdb4bb85688e4df554beb514c1749e7"
+  integrity sha512-9AN0BD27owvnNpFBELy5zSNIbJBUP8xW6mFV98L0qHnfJk2gG7bXbXOzt6VtRqWC+Pm5rCRqUoCz+NiwsPvObw==
   dependencies:
-    ember-cli-babel "^7.18.0"
-    ember-cli-htmlbars "^4.2.3"
-    ember-runtime-enumerable-includes-polyfill "^2.1.0"
+    ember-cli-babel "^7.1.2"
+    ember-cli-htmlbars "^3.0.0"
+    ember-runtime-enumerable-includes-polyfill "^2.0.0"
 
 ember-cli-get-component-path-option@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/ember-cli-get-component-path-option/-/ember-cli-get-component-path-option-1.0.0.tgz#0d7b595559e2f9050abed804f1d8eff1b08bc771"
   integrity sha1-DXtZVVni+QUKvtgE8djv8bCLx3E=
 
-ember-cli-htmlbars@^3.0.1:
+ember-cli-htmlbars@^3.0.0, ember-cli-htmlbars@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-3.1.0.tgz#87806c2a0bca2ab52d4fb8af8e2215c1ca718a99"
   integrity sha512-cgvRJM73IT0aePUG7oQ/afB7vSRBV3N0wu9BrWhHX2zkR7A7cUBI7KC9VPk6tbctCXoM7BRGsCC4aIjF7yrfXA==
@@ -7561,7 +7561,7 @@ ember-cli-htmlbars@^3.0.1:
     json-stable-stringify "^1.0.1"
     strip-bom "^3.0.0"
 
-ember-cli-htmlbars@^4.2.3, ember-cli-htmlbars@^4.3.1:
+ember-cli-htmlbars@^4.3.1:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-4.5.0.tgz#d299e4f7eba6f30dc723ee086906cc550beb252e"
   integrity sha512-bYJpK1pqFu9AadDAGTw05g2LMNzY8xTCIqQm7dMJmKEoUpLRFbPf4SfHXrktzDh7Q5iggl6Skzf1M0bPlIxARw==
@@ -8389,7 +8389,7 @@ ember-router-helpers@^0.4.0:
   dependencies:
     ember-cli-babel "^7.20.0"
 
-ember-runtime-enumerable-includes-polyfill@^2.1.0:
+ember-runtime-enumerable-includes-polyfill@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/ember-runtime-enumerable-includes-polyfill/-/ember-runtime-enumerable-includes-polyfill-2.1.0.tgz#dc6d4a028471e4acc350dfd2a149874fb20913f5"
   integrity sha512-au18iI8VbEDYn3jLFZzETnKN5ciPgCUxMRucEP3jkq7qZ6sE0FVKpWMPY/h9tTND3VOBJt6fgPpEBJoJVCUudg==

From d8742f25448e10aa002c8f7867a988d14f883886 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 7 Jun 2022 12:03:01 -0600
Subject: [PATCH 8/9] cleanup

---
 ui/lib/core/addon/components/string-list.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/lib/core/addon/components/string-list.js b/ui/lib/core/addon/components/string-list.js
index af1fefe616fa..f7cc6524d6bd 100644
--- a/ui/lib/core/addon/components/string-list.js
+++ b/ui/lib/core/addon/components/string-list.js
@@ -6,7 +6,6 @@ import { set } from '@ember/object';
 
 /**
  * @module StringList
- * StringList components xx.
  *
  * @example
  * ```js

From 8688ae804339f8d42c3d44f652af1bacae323005 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 7 Jun 2022 12:19:09 -0600
Subject: [PATCH 9/9] cleanup

---
 ui/lib/core/addon/components/string-list.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/lib/core/addon/components/string-list.js b/ui/lib/core/addon/components/string-list.js
index f7cc6524d6bd..cacdfed5b6d5 100644
--- a/ui/lib/core/addon/components/string-list.js
+++ b/ui/lib/core/addon/components/string-list.js
@@ -13,7 +13,7 @@ import { set } from '@ember/object';
  * ```
  * @param {string} label - Text displayed in the header above all the inputs.
  * @param {function} onChange - Function called when any of the inputs change.
- * @param {string} inputValue - A comma-separated string or an array of strings.
+ * @param {string} inputValue - A string or an array of strings.
  * @param {string} warning - Text displayed as a warning.
  * @param {string} helpText - Text displayed as a tooltip.
  * @param {string} type=array - Optional type for inputValue.