chore: 🤖 yield rows to consumers

DhariniJeeva · DhariniJeeva · commit 5089a092c539 · 2025-12-02T16:46:02.000-08:00
fix: 🐛 remove extra footer and undo file change

chore: 🤖 lock file

fix: 🐛 test

fix: 🐛 remove comment
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/ui/admin/app/components/form/auth-method/oidc/index.hbs b/ui/admin/app/components/form/auth-method/oidc/index.hbs
@@ -256,12 +256,42 @@
     @errors={{@model.errors.account_claim_maps}}
     @disabled={{form.disabled}}
     @isOptional={{true}}
-    @keyFieldType='text'
-    @valueFieldType='select'
-    @valueFieldOptions={{this.toClaims}}
-    @keyLabel={{t 'form.from_claim.label'}}
-    @valueLabel={{t 'form.to_claim.label'}}
-  />
+  >
+    <:row as |R|>
+      <R.Field as |F|>
+        <F.Label>{{t 'form.from_claim.label'}}</F.Label>
+        <F.TextInput
+          data-test-key-input
+          @value={{R.rowData.key}}
+          @isInvalid={{@model.errors.account_claim_maps}}
+          {{on 'input' (fn R.updateAndNotify 'key')}}
+        />
+      </R.Field>
+
+      <R.Field as |F|>
+        <F.Label>{{t 'form.to_claim.label'}}</F.Label>
+        <F.Select
+          data-test-value-input
+          @isInvalid={{@model.errors.account_claim_maps}}
+          {{on 'change' (fn R.updateAndNotify 'value')}}
+        >
+          <option disabled hidden selected value=''>
+            {{t 'titles.choose-an-option'}}
+          </option>
+          {{#each this.toClaims as |claim|}}
+            <option value={{claim}} selected={{eq R.rowData.value claim}}>
+              {{claim}}
+            </option>
+          {{/each}}
+        </F.Select>
+      </R.Field>
+
+      {{#if (R.hasData)}}
+        <R.DeleteRowButton data-test-delete-button @onClick={{R.removeRow}} />
+      {{/if}}
+    </:row>
+
+  </Form::Field::KeyValue>
 
   {{! Certificates }}
   <Form::Field::ListWrapper
diff --git a/ui/admin/app/components/form/credential-library/vault-ssh-certificate/index.hbs b/ui/admin/app/components/form/credential-library/vault-ssh-certificate/index.hbs
@@ -234,9 +234,34 @@
     @errors={{@model.errors.critical_options}}
     @disabled={{form.disabled}}
     @isOptional={{true}}
-    @keyFieldType='text'
-    @valueFieldType='text'
-  />
+  >
+    <:row as |R|>
+      <R.Field as |F|>
+        <F.Label>{{t 'form.key.label'}}</F.Label>
+        <F.TextInput
+          data-test-key-input
+          @value={{R.rowData.key}}
+          @isInvalid={{@model.errors.critical_options}}
+          {{on 'input' (fn R.updateAndNotify 'key')}}
+        />
+      </R.Field>
+
+      <R.Field as |F|>
+        <F.Label>{{t 'form.value.label'}}</F.Label>
+        <F.TextInput
+          data-test-value-input
+          @value={{R.rowData.value}}
+          @isInvalid={{@model.errors.critical_options}}
+          {{on 'input' (fn R.updateAndNotify 'value')}}
+        />
+      </R.Field>
+
+      {{#if (R.hasData)}}
+        <R.DeleteRowButton data-test-delete-button @onClick={{R.removeRow}} />
+      {{/if}}
+    </:row>
+
+  </Form::Field::KeyValue>
 
   <Form::Field::ListWrapper
     @layout='horizontal'
diff --git a/ui/admin/app/components/form/field/key-value/index.hbs b/ui/admin/app/components/form/field/key-value/index.hbs
@@ -3,114 +3,31 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 <Hds::Form::KeyValueInputs
+  name={{@name}}
   @data={{this.data}}
   @isRequired={{@isRequired}}
   @isOptional={{@isOptional}}
   disabled={{@disabled}}
 >
   <:header as |H|>
-    {{#if @legend}}
-      <H.Legend data-test-legend>{{@legend}}</H.Legend>
-    {{/if}}
+    <H.Legend data-test-legend>{{@legend}}</H.Legend>
     {{#if @helperText}}
       <H.HelperText data-test-helper-text>{{@helperText}}</H.HelperText>
     {{/if}}
   </:header>
-  <:row as |R|>
-    <R.Field as |F|>
-      <F.Label>{{or @keyLabel (t 'form.key.label')}}</F.Label>
-      {{#if (eq @keyFieldType 'select')}}
-        <F.Select
-          name={{@name}}
-          disabled={{@disabled}}
-          data-test-key-input
-          @isInvalid={{@errors}}
-          {{on 'change' (fn this.updateKey R.rowData)}}
-        >
-          <option disabled hidden selected value=''>
-            {{t 'titles.choose-an-option'}}
-          </option>
-          {{#each @keyFieldOptions as |selectOption|}}
-            <option
-              value={{selectOption}}
-              selected={{eq R.rowData.key selectOption}}
-            >
-              {{selectOption}}
-            </option>
-          {{/each}}
-        </F.Select>
-      {{else if (eq @keyFieldType 'textarea')}}
-        <F.Textarea
-          name={{@name}}
-          @value={{R.rowData.key}}
-          disabled={{@disabled}}
-          data-test-key-input
-          @isInvalid={{@errors}}
-          {{on 'input' (fn this.updateKey R.rowData)}}
-        />
-      {{else}}
-        {{! Default to text input }}
-        <F.TextInput
-          name={{@name}}
-          @value={{R.rowData.key}}
-          disabled={{@disabled}}
-          data-test-key-input
-          @isInvalid={{@errors}}
-          {{on 'input' (fn this.updateKey R.rowData)}}
-        />
-      {{/if}}
-    </R.Field>
-
-    {{#unless this.hideValueField}}
-      <R.Field as |F|>
-        <F.Label>{{or @valueLabel (t 'form.value.label')}}</F.Label>
-        {{#if (eq @valueFieldType 'select')}}
-          <F.Select
-            name={{@name}}
-            disabled={{@disabled}}
-            data-test-value-input
-            @isInvalid={{@errors}}
-            {{on 'change' (fn this.updateValue R.rowData)}}
-          >
-            <option disabled hidden selected value=''>
-              {{t 'titles.choose-an-option'}}
-            </option>
-            {{#each @valueFieldOptions as |selectOption|}}
-              <option
-                value={{selectOption}}
-                selected={{eq R.rowData.value selectOption}}
-              >
-                {{selectOption}}
-              </option>
-            {{/each}}
-          </F.Select>
-        {{else if (eq @valueFieldType 'textarea')}}
-          <F.Textarea
-            name={{@name}}
-            @value={{R.rowData.value}}
-            disabled={{@disabled}}
-            data-test-value-input
-            @isInvalid={{@errors}}
-            {{on 'input' (fn this.updateValue R.rowData)}}
-          />
-        {{else}}
-          {{! Default to text input }}
-          <F.TextInput
-            name={{@name}}
-            @value={{R.rowData.value}}
-            disabled={{@disabled}}
-            data-test-value-input
-            @isInvalid={{@errors}}
-            {{on 'input' (fn this.updateValue R.rowData)}}
-          />
-        {{/if}}
-      </R.Field>
-    {{/unless}}
 
-    <R.DeleteRowButton
-      data-test-delete-button
-      onclick={{fn this.removeRow R.rowData}}
-    />
+  <:row as |R|>
+    {{yield
+      (hash
+        Field=R.Field
+        DeleteRowButton=R.DeleteRowButton
+        rowData=R.rowData
+        hasData=(fn this.hasData R.rowData)
+        removeRow=(fn this.removeRow R.rowData)
+        updateAndNotify=(fn this.updateAndNotify R.rowData)
+      )
+      to='row'
+    }}
   </:row>
   <:footer as |F|>
 
@@ -124,7 +41,7 @@
     <F.AddRowButton
       @text={{t 'actions.add'}}
       data-test-add-button
-      onclick={{this.addNewRow}}
+      @onClick={{this.addNewRow}}
     />
   </:footer>
 </Hds::Form::KeyValueInputs>
diff --git a/ui/admin/app/components/form/field/key-value/index.js b/ui/admin/app/components/form/field/key-value/index.js
@@ -10,52 +10,13 @@ import { action } from '@ember/object';
 export default class FormFieldKeyValueComponent extends Component {
   // =properties
 
-  @tracked data = this.args.data?.length
-    ? [...this.args.data]
-    : [this.createEmptyRow()];
-
-  /**
-   * Determine if the value field should be shown
-   * Defaults to false (show the value field by default)
-   * @type {boolean}
-   */
-  get hideValueField() {
-    return this.args.hideValueField ?? false;
-  }
-
-  createEmptyRow() {
-    const row = { key: '' };
-    if (!this.hideValueField) {
-      row.value = '';
-    }
-    return row;
-  }
+  @tracked data = this.args.data?.length ? [...this.args.data] : [{}];
 
   // =actions
 
-  /**
-   * Updates the key value for a specific row and triggers change notification
-   * @param {Object} rowData
-   * @param {Event} event
-   */
-  @action
-  updateKey(rowData, { target: { value } }) {
-    this.updateRowProperty(rowData, 'key', value);
-  }
-
-  /**
-   * Updates the value field for a specific row and triggers change notification
-   * @param {Object} rowData
-   * @param {Event} event
-   */
-  @action
-  updateValue(rowData, { target: { value } }) {
-    this.updateRowProperty(rowData, 'value', value);
-  }
-
   @action
   addNewRow() {
-    this.data = [...this.data, this.createEmptyRow()];
+    this.data = [...this.data, {}];
     this.notifyChange();
   }
 
@@ -65,31 +26,48 @@ export default class FormFieldKeyValueComponent extends Component {
 
     // Ensure at least one row exists
     if (this.data.length === 0) {
-      this.data = [this.createEmptyRow()];
+      this.data = [{}];
     }
     this.notifyChange();
   }
 
   /**
-   * Helper method to update a property on a row
+   * Action to update row data from input events and notify consumer
    * @param {Object} rowData - The row object to update
    * @param {string} property - The property name to update
    * @param {string} value - The new value
    */
-  updateRowProperty(rowData, property, value) {
+  @action
+  updateAndNotify(rowData, property, { target: { value } }) {
     rowData[property] = value;
     this.data = [...this.data];
     this.notifyChange();
   }
 
   /**
-   * Notifies parent component of data changes with filtered results
+   * Checks if a row has any non-empty data
+   * @param {Object} rowData - The row object to check
+   * @returns {boolean} - True if the row has any non-empty values
+   */
+  @action
+  hasData(rowData) {
+    if (!this.data.includes(rowData)) return false;
+
+    return Object.values(rowData).some(
+      (value) => value != null && value !== '',
+    );
+  }
+
+  /**
+   * Notifies consumer of data changes with filtered results
    */
   notifyChange() {
-    if (this.args.onChange) {
-      // Filter out entries with empty/whitespace keys
-      const filteredData = this.data.filter((item) => item.key?.trim());
-      this.args.onChange(filteredData);
-    }
+    if (!this.args.onChange) return;
+
+    // Filter out rows where the 'key' property is empty or missing
+    const filteredData = this.data.filter(
+      (item) => item.key != null && item.key !== '',
+    );
+    this.args.onChange(filteredData);
   }
 }
diff --git a/ui/admin/tests/acceptance/auth-methods/selectors.js b/ui/admin/tests/acceptance/auth-methods/selectors.js
@@ -26,10 +26,10 @@ export const FIELD_CLAIMS_SCOPES_ADD_BTN = '[name=claims_scopes] button';
 export const FIELD_CLAIMS_SCOPES_DELETE_BTN =
   '[name=claims_scopes] tbody td:last-child button[aria-label=Remove]';
 export const FIELD_ACCOUNT_CLAIM_MAPS_FROM_CLAIM =
-  '[name=account_claim_maps][data-test-key-input]';
+  '[name=account_claim_maps] [data-test-key-input]';
 export const FIELD_ACCOUNT_CLAIM_MAPS_FROM_CLAIM_VALUE = 'from_claim';
 export const FIELD_ACCOUNT_CLAIM_MAPS_TO_CLAIM =
-  '[name=account_claim_maps][data-test-value-input]';
+  '[name=account_claim_maps] [data-test-value-input]';
 export const FIELD_ACCOUNT_CLAIM_MAPS_TO_CLAIM_VALUE = 'email';
 export const FIELD_ACCOUNT_CLAIM_MAPS_DELETE_BTN = '[data-test-delete-button]';
 export const FIELD_IDP_CERTS = '[name=idp_ca_certs] textarea';
diff --git a/ui/admin/tests/acceptance/credential-library/selectors.js b/ui/admin/tests/acceptance/credential-library/selectors.js
@@ -33,9 +33,9 @@ export const TYPE_VAULT_LDAP = '[value="vault-ldap"]';
 export const TYPE_VAULT_GENERIC = '[value="vault-generic"]';
 
 export const FIELD_CRIT_OPTS_KEY =
-  '[name="critical_options"][data-test-key-input]';
+  '[name="critical_options"] [data-test-key-input]';
 export const FIELD_CRIT_OPTS_VALUE =
-  '[name="critical_options"][data-test-value-input]';
+  '[name="critical_options"] [data-test-value-input]';
 
 export const FIELD_EXT_KEY =
   '[name="extensions"] tbody td:nth-of-type(1) input';
diff --git a/ui/admin/tests/integration/components/form/field/key-value-test.js b/ui/admin/tests/integration/components/form/field/key-value-test.js
