Refactor key value list component (#1949)

* refactor: 💡 update keyvalue list component to allow only rows
hashicorp · Oct 12, 2023 · 91a6023 · 91a6023 · vercel · Oct 12, 2023
1 parent 7b96dd1
commit 91a6023
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 19 deletions.
diff --git a/ui/admin/app/components/form/field/key-value-list/index.hbs b/ui/admin/app/components/form/field/key-value-list/index.hbs
@@ -18,7 +18,9 @@
         <:head as |H|>
           <H.Tr>
             <H.Th id={{keyHeaderID}}>{{t 'form.key.label'}}</H.Th>
-            <H.Th id={{valueHeaderID}}>{{t 'form.value.label'}}</H.Th>
+            {{#unless @hasNoValue}}
+              <H.Th id={{valueHeaderID}}>{{t 'form.value.label'}}</H.Th>
+            {{/unless}}
             <H.Th>
               {{#if @removeOptionByIndex}}
                 {{t 'titles.actions'}}
@@ -39,15 +41,18 @@
                   {{on 'input' (set-from-event option 'key')}}
                 />
               </B.Td>
-              <B.Td>
-                <Hds::Form::TextInput::Field
-                  @value={{option.value}}
-                  @type='text'
-                  disabled={{@disabled}}
-                  aria-labelledby={{valueHeaderID}}
-                  {{on 'input' (set-from-event option 'value')}}
-                />
-              </B.Td>
+              {{#unless @hasNoValue}}
+                <B.Td>
+                  <Hds::Form::TextInput::Field
+                    @value={{option.value}}
+                    @type='text'
+                    disabled={{@disabled}}
+                    aria-labelledby={{valueHeaderID}}
+                    {{on 'input' (set-from-event option 'value')}}
+                  />
+                </B.Td>
+              {{/unless}}
+
               <B.Td>
                 {{#if @removeOptionByIndex}}
                   <Hds::Button
@@ -73,15 +78,17 @@
                 {{on 'input' (set-from-event this 'newOptionKey')}}
               />
             </B.Td>
-            <B.Td>
-              <Hds::Form::TextInput::Field
-                @value={{this.newOptionValue}}
-                @type='text'
-                disabled={{@disabled}}
-                aria-labelledby={{valueHeaderID}}
-                {{on 'input' (set-from-event this 'newOptionValue')}}
-              />
-            </B.Td>
+            {{#unless @hasNoValue}}
+              <B.Td>
+                <Hds::Form::TextInput::Field
+                  @value={{this.newOptionValue}}
+                  @type='text'
+                  disabled={{@disabled}}
+                  aria-labelledby={{valueHeaderID}}
+                  {{on 'input' (set-from-event this 'newOptionValue')}}
+                />
+              </B.Td>
+            {{/unless}}
             <B.Td>
               <Hds::Button
                 @text={{t 'actions.add'}}

diff --git a/ui/admin/tests/integration/components/form/field/key-value-list-test.js b/ui/admin/tests/integration/components/form/field/key-value-list-test.js
@@ -46,4 +46,19 @@ module('Integration | Component | key-value-list', function (hooks) {
 
     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 });
+  });
 });