refactor: 💡 update credential-library form for password type (#3060)

* refactor: 💡 update credential-library form for password type

* style: 💄 fix display issue

* test: 💍 add test cases

ui/admin/app/components/form/credential-library/mapping-overrides/index.hbs

@@ -3,49 +3,36 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<Form::Field::ListWrapper
-  @layout='horizontal'
-  @isOptional={{true}}
-  @disabled={{@disabled}}
->
-  <:fieldset as |F|>
-    <F.Legend>
-      {{t
-        'resources.credential-library.form.credential_mapping_overrides.label'
-      }}
-    </F.Legend>
-    <F.HelperText>
-      {{t
-        'resources.credential-library.form.credential_mapping_overrides.help'
-      }}
-    </F.HelperText>
-
-    {{#if @model.errors.credential_mapping_overrides}}
-      <F.Error as |E|>
-        {{#each @model.errors.credential_mapping_overrides as |error|}}
-          <E.Message>{{error.message}}</E.Message>
-        {{/each}}
-      </F.Error>
-    {{/if}}
-  </:fieldset>
-
-  <:field as |F|>
-    <F.KeyValue
-      @name='credential_mapping_overrides'
-      @model={{@model}}
-      @disabled={{@disabled}}
-      @width='100%'
-      @showNewRow={{this.showNewRow}}
-    >
-      <:newKey as |N|>
-        <N.select @selectOptions={{this.selectOptions}} />
-      </:newKey>
-      <:key as |K|>
-        <K.select @selectOptions={{this.mappingOverrides}} />
-      </:key>
-      <:value as |V|>
-        <V.text />
-      </:value>
-    </F.KeyValue>
-  </:field>
-</Form::Field::ListWrapper>
+<Hds::Form::Fieldset as |F|>
+  <F.Legend>{{t
+      'resources.credential-library.form.credential_mapping_overrides.label'
+    }}</F.Legend>
+  <F.HelperText>{{t
+      'resources.credential-library.form.credential_mapping_overrides.help'
+    }}</F.HelperText>
+  <F.Control>
+    {{#each this.mappingOverrides as |option|}}
+      <Hds::Form::TextInput::Field
+        name={{option}}
+        @value={{get @model.credential_mapping_overrides option}}
+        disabled={{@disabled}}
+        {{on
+          'input'
+          (set-from-event @model.credential_mapping_overrides option)
+        }}
+        as |F|
+      >
+        <F.Label>{{t
+            (concat 'resources.credential-library.titles.' option)
+          }}</F.Label>
+      </Hds::Form::TextInput::Field>
+    {{/each}}
+  </F.Control>
+  {{#if @model.errors.credential_mapping_overrides}}
+    <F.Error as |E|>
+      {{#each @model.errors.credential_mapping_overrides as |error|}}
+        <E.Message>{{error.message}}</E.Message>
+      {{/each}}
+    </F.Error>
+  {{/if}}
+</Hds::Form::Fieldset>

ui/admin/app/components/form/credential-library/mapping-overrides/index.js

@@ -5,43 +5,11 @@
 
 import Component from '@glimmer/component';
 import { options } from 'api/models/credential-library';
-import { action } from '@ember/object';
 
 export default class FormCredentialLibraryMappingOverridesComponent extends Component {
+  // =attributes
+
   get mappingOverrides() {
     return options.mapping_overrides[this.args.model.credential_type];
   }
-
-  get allowedEntries() {
-    return this.mappingOverrides.length;
-  }
-
-  /**
-   * Prevents users from selecting duplicate keys from the select list if the arg is set to true
-   * @type {array}
-   */
-  get selectOptions() {
-    const previouslySelectedKeys =
-      this.args.model.credential_mapping_overrides || [];
-    if (previouslySelectedKeys.length) {
-      return this.mappingOverrides.filter((key) =>
-        previouslySelectedKeys.every((obj) => obj.key !== key),
-      );
-    } else {
-      return this.mappingOverrides;
-    }
-  }
-
-  /**
-   * Determines if we need to show an empty row to the users to enter more key/value pairs based on removeDuplicates arg,
-   * by default it is true
-   * @type {object}
-   */
-  @action
-  showNewRow() {
-    return (
-      this.args.model.credential_mapping_overrides?.length !==
-      this.allowedEntries
-    );
-  }
 }

ui/admin/app/components/form/credential-library/radio/index.hbs

@@ -5,6 +5,7 @@
 
 <Hds::Form::RadioCard::Group
   @name={{t 'form.type.label'}}
+  @isRequired={{true}}
   @alignment='center'
   as |G|
 >

ui/admin/app/components/form/credential-library/vault-generic/index.hbs

@@ -14,7 +14,6 @@
     name='name'
     @value={{@model.name}}
     @isInvalid={{@model.errors.name}}
-    @isOptional={{true}}
     disabled={{form.disabled}}
     {{on 'input' (set-from-event @model 'name')}}
     as |F|
@@ -36,7 +35,6 @@
     name='description'
     @value={{@model.description}}
     @isInvalid={{@model.errors.description}}
-    @isOptional={{true}}
     disabled={{form.disabled}}
     as |F|
   >
@@ -70,7 +68,6 @@
 
   <Hds::Form::TextInput::Field
     @isRequired={{true}}
-    @isOptional={{false}}
     @value={{@model.path}}
     @isInvalid={{@model.errors.path}}
     @type='text'
@@ -98,7 +95,6 @@
 
   {{#if @model.isNew}}
     <Hds::Form::Select::Field
-      @isOptional={{true}}
       @width='100%'
       name='credential_type'
       disabled={{form.disabled}}
@@ -128,7 +124,7 @@
         </F.Error>
       {{/if}}
     </Hds::Form::Select::Field>
-  {{else}}
+  {{else if @model.credential_type}}
     <InfoField
       @value={{t
         (concat 'resources.credential-library.titles.' @model.credential_type)
@@ -179,7 +175,6 @@
   {{#if this.isHttpRequestBodyAllowed}}
     <Hds::Form::Textarea::Field
       @isRequired={{true}}
-      @isOptional={{false}}
       @value={{@model.http_request_body}}
       @isInvalid={{@model.errors.http_request_body}}
       name='http_request_body'

ui/admin/app/components/form/credential-library/vault-generic/index.js

@@ -28,7 +28,7 @@ export default class FormCredentialLibraryVaultGenericComponent extends Componen
    */
   @action
   selectCredentialType({ target: { value } }) {
-    this.args.model.credential_mapping_overrides = [];
+    this.args.model.credential_mapping_overrides = {};
     this.args.model.credential_type = value;
   }
 }