feat: 🎸 secret input field

addons/api/mirage/config.js

@@ -677,7 +677,6 @@ function routes() {
           name: plugin_name,
         };
       }
-
       // Remove the secrets and add the hmac in the response
       delete attrs.secrets;
       attrs.secrets_hmac = faker.git.commitSha();

addons/core/translations/resources/en-us.yaml

@@ -255,7 +255,7 @@ storage-bucket:
       help: The AWS region to use
     access_key_id:
       label: Access key ID
-      help: The AWS access key ID to use.
+      help: The Access key ID generated by AWS for the IAM User to use with this host catalog. We will not show this data after it is saved, but you can replace.
     secret_access_key:
       label: Secret access key
       help: The secret access key to use.

ui/admin/app/components/form/field/secret-input/index.hbs

@@ -0,0 +1,36 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<div class='secret-input'>
+  <Hds::Form::TextInput::Field
+    @isRequired={{@isRequired}}
+    @isInvalid={{@isInvalid}}
+    @value={{this.secret}}
+    @type={{@type}}
+    name={{@name}}
+    disabled={{not this.editing}}
+    placeholder=' '
+    ...attributes
+    as |F|
+  >
+    {{yield F}}
+  </Hds::Form::TextInput::Field>
+
+  {{#if this.isDisabled}}
+    <Hds::Button
+      @text={{t 'actions.edit'}}
+      @icon='edit'
+      disabled={{@disabled}}
+    />
+  {{else if this.isActionable}}
+    <Hds::Button
+      @text={{t 'actions.edit'}}
+      @icon='edit'
+      {{on 'click' this.enableEdit}}
+    />
+  {{else}}
+    <Hds::Button @text={{t 'actions.cancel'}} {{on 'click' this.clearEdit}} />
+  {{/if}}
+</div>

ui/admin/app/components/form/field/secret-input/index.js

@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class FormFieldSecretInputIndexComponent extends Component {
+  // =properties
+  /**
+   * Tracks when secret can be updated
+   * @type {boolean}
+   */
+  @tracked editing = false;
+  @tracked secret;
+  // =actions
+
+  /**
+   * Returns true if the resource form is in read only mode
+   * @type {boolean}
+   */
+  get isDisabled() {
+    return this.args.disabled;
+  }
+
+  /**
+   * Returns true if the resource form is in edit mode and
+   * `edit` button is enabled for the secret field.
+   * This state lets the user to update the secret fields if they like
+   * @type {boolean}
+   */
+  get isActionable() {
+    return this.args.showEditButton && !this.editing;
+  }
+
+  // =actions
+
+  /**
+   * Sets the secret field to be updated
+   * when `edit` button is clicked in Actionable view
+   */
+  @action
+  enableEdit() {
+    if (!this.args.disabled) this.editing = true;
+  }
+
+  /**
+   * Clears updated secret when cancel button is
+   * clicked in Actionable view.
+   * Sets the secret field back to disabled mode
+   */
+  @action
+  clearEdit() {
+    this.secret = null;
+    this.editing = false;
+  }
+}

ui/admin/app/components/form/storage-bucket/index.hbs

@@ -164,29 +164,58 @@
     {{/if}}
   </Hds::Form::TextInput::Field>
 
-  <Hds::Form::TextInput::Field
-    @isRequired={{true}}
-    @value={{@model.access_key_id}}
-    @isInvalid={{@model.errors.access_key_id}}
-    @type='text'
-    name='access_key_id'
-    disabled={{form.disabled}}
-    {{on 'input' (set-from-event @model 'access_key_id')}}
-    as |F|
-  >
-    <F.Label>{{t 'resources.storage-bucket.form.access_key_id.label'}}</F.Label>
-    <F.HelperText>{{t
-        'resources.storage-bucket.form.access_key_id.help'
-      }}</F.HelperText>
-    {{#if @model.errors.access_key_id}}
-      <F.Error as |E|>
-        {{#each @model.errors.access_key_id as |error|}}
-          <E.Message>{{error.message}}</E.Message>
-        {{/each}}
-      </F.Error>
-    {{/if}}
-  </Hds::Form::TextInput::Field>
-
+  {{#if @model.isNew}}
+    <Hds::Form::TextInput::Field
+      @isRequired={{true}}
+      @value={{@model.access_key_id}}
+      @isInvalid={{@model.errors.access_key_id}}
+      @type='text'
+      name='access_key_id'
+      disabled={{form.disabled}}
+      {{on 'input' (set-from-event @model 'access_key_id')}}
+      as |F|
+    >
+      <F.Label>{{t
+          'resources.storage-bucket.form.access_key_id.label'
+        }}</F.Label>
+      <F.HelperText>{{t
+          'resources.storage-bucket.form.access_key_id.help'
+        }}</F.HelperText>
+      {{#if @model.errors.access_key_id}}
+        <F.Error as |E|>
+          {{#each @model.errors.access_key_id as |error|}}
+            <E.Message>{{error.message}}</E.Message>
+          {{/each}}
+        </F.Error>
+      {{/if}}
+    </Hds::Form::TextInput::Field>
+  {{else}}
+    <Form::Field::SecretInput
+      @isRequired={{true}}
+      @isInvalid={{@model.errors.access_key_id}}
+      @type='text'
+      @name='access_key_id'
+      @disabled={{form.disabled}}
+      @showEditButton={{true}}
+      @accessKeyId={{@model.access_key_id}}
+      {{on 'input' (set-from-event @model 'access_key_id')}}
+      as |F|
+    >
+      <F.Label>{{t
+          'resources.storage-bucket.form.access_key_id.label'
+        }}</F.Label>
+      <F.HelperText>{{t
+          'resources.storage-bucket.form.access_key_id.help'
+        }}</F.HelperText>
+      {{#if @model.errors.access_key_id}}
+        <F.Error as |E|>
+          {{#each @model.errors.access_key_id as |error|}}
+            <E.Message>{{error.message}}</E.Message>
+          {{/each}}
+        </F.Error>
+      {{/if}}
+    </Form::Field::SecretInput>
+  {{/if}}
   <Hds::Form::TextInput::Field
     @isRequired={{true}}
     @value={{@model.secret_access_key}}

ui/admin/app/styles/app.scss

@@ -687,6 +687,27 @@
   /* stylelint-enable selector-class-pattern */
 }
 
+// secret input field
+.secret-input {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+
+  .hds-form-text-input {
+    width: 99%;
+    &::placeholder {
+      content: '';
+      width: 80%;
+      height: 0.65rem;
+      background-color: var(--ui-gray-subtler-3);
+      border-radius: 0.25rem;
+      vertical-align: middle;
+    }
+  }
+  .hds-button {
+    margin-top: 4.25rem;
+  }
+}
 // session recording player
 .session-recording-player {
   --player-background-color: #252937;