UI: remove references to comma separation for string array edit types (#20163)

* remove intercepting helpText

* add subtext directly to StringList input component

* update tests and add coverage for new openapi-attrs util

* update test

* add warning validation to input

* lol is this right i dont know go

* literally no idea what im doing

* add Description to display attrs struct

* update struct comment

* add descriptions to remaining go fields

* add missing comma

* remaining commas..."

* add description to display attrs

* update tests

* update tests

* add changelog;

* Update ui/app/utils/openapi-to-attrs.js

* update tests following backend changes

* clearly name variable

* format files

* no longer need to test for modified tooltip since coming from backend now

ui/lib/core/addon/components/form-field.hbs

@@ -209,12 +209,11 @@
     <StringList
       data-test-input={{@attr.name}}
       @label={{this.labelString}}
-      @warning={{@attr.options.warning}}
       @helpText={{if this.showHelpText @attr.options.helpText}}
       @inputValue={{get @model this.valuePath}}
       @onChange={{this.setAndBroadcast}}
       @attrName={{@attr.name}}
-      @subText={{@attr.options.subText}}
+      @subText="{{@attr.options.subText}} Add one item per row."
     />
   {{else if (eq @attr.options.sensitive true)}}
     {{! Masked Input }}

ui/lib/core/addon/components/string-list.hbs

@@ -9,8 +9,8 @@
   {{#if @label}}
     <label class="is-label" data-test-string-list-label="true">
       {{@label}}
-      {{#if this.helpText}}
-        <InfoTooltip>{{this.helpText}}</InfoTooltip>
+      {{#if @helpText}}
+        <InfoTooltip>{{@helpText}}</InfoTooltip>
       {{/if}}
     </label>
     {{#if @subText}}
@@ -19,15 +19,12 @@
       </p>
     {{/if}}
   {{/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"
+          class="input {{if (includes index this.indicesWithComma) 'has-warning-border'}}"
           @value={{data.value}}
           name={{concat this.elementId "-" index}}
           id={{concat this.elementId "-" index}}
@@ -56,6 +53,16 @@
           </button>
         {{/if}}
       </div>
+      {{#if (includes index this.indicesWithComma)}}
+        <Icon class="is-flex-v-centered has-text-highlight" @name="alert-triangle-fill" />
+      {{/if}}
     </div>
   {{/each}}
+  {{#if this.indicesWithComma}}
+    <AlertInline
+      @type="warning"
+      @message="Input contains a comma. Please separate values into individual rows."
+      @isMarginless={{true}}
+    />
+  {{/if}}
 </div>

ui/lib/core/addon/components/string-list.js

@@ -9,6 +9,7 @@ import autosize from 'autosize';
 import { action } from '@ember/object';
 import { set } from '@ember/object';
 import { next } from '@ember/runloop';
+import { tracked } from '@glimmer/tracking';
 
 /**
  * @module StringList
@@ -20,7 +21,6 @@ import { next } from '@ember/runloop';
  * @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 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.
  * @param {string} attrName - We use this to check the type so we can modify the tooltip content.
@@ -28,6 +28,8 @@ import { next } from '@ember/runloop';
  */
 
 export default class StringList extends Component {
+  @tracked indicesWithComma = [];
+
   constructor() {
     super(...arguments);
 
@@ -75,14 +77,6 @@ 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'));
@@ -95,10 +89,14 @@ export default class StringList extends Component {
 
   @action
   inputChanged(idx, event) {
+    if (event.target.value.includes(',') && !this.indicesWithComma.includes(idx)) {
+      this.indicesWithComma.pushObject(idx);
+    }
+    if (!event.target.value.includes(',')) this.indicesWithComma.removeObject(idx);
+
     const inputObj = this.inputList.objectAt(idx);
-    const onChange = this.args.onChange;
     set(inputObj, 'value', event.target.value);
-    onChange(this.toVal());
+    this.args.onChange(this.toVal());
   }
 
   @action
@@ -111,9 +109,8 @@ export default class StringList extends Component {
 
   @action
   removeInput(idx) {
-    const onChange = this.args.onChange;
     const inputs = this.inputList;
     inputs.removeObject(inputs.objectAt(idx));
-    onChange(this.toVal());
+    this.args.onChange(this.toVal());
   }
 }