Merge pull request #132 from hashicorp/ICU-8523-create-secret-input-form-field

Icu 8523 create secret input form field

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

@@ -266,7 +266,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 storage bucket. 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,43 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<div class='secret-input'>
+  {{#if (or this.isDisabled this.isActionable)}}
+    <span class='overlay'></span>
+  {{/if}}
+  <Hds::Form::TextInput::Field
+    @isRequired={{@isRequired}}
+    @isInvalid={{@isInvalid}}
+    @value={{@value}}
+    @type={{@type}}
+    name={{@name}}
+    disabled={{or @isDisabled (not this.isEditing)}}
+    ...attributes
+    as |F|
+  >
+    {{yield F}}
+  </Hds::Form::TextInput::Field>
+
+  {{#if this.isDisabled}}
+    <Hds::Button
+      @text={{t 'actions.edit'}}
+      @icon='edit'
+      disabled={{@isDisabled}}
+    />
+  {{else if this.isActionable}}
+    <Hds::Button
+      @text={{t 'actions.edit'}}
+      @icon='edit'
+      @color='secondary'
+      {{on 'click' this.enableEdit}}
+    />
+  {{else}}
+    <Hds::Button
+      @text={{t 'actions.cancel'}}
+      @color='secondary'
+      {{on 'click' this.cancelEdit}}
+    />
+  {{/if}}
+</div>

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

@@ -0,0 +1,57 @@
+/**
+ * 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 isEditing = false;
+
+  /**
+   * Returns true if the resource form is in read only mode
+   * @type {boolean}
+   */
+  get isDisabled() {
+    return this.args.isDisabled;
+  }
+
+  /**
+   * 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.isEditing;
+  }
+
+  // =actions
+
+  /**
+   * Sets the secret field to be updated
+   * when `edit` button is clicked in Actionable view
+   */
+  @action
+  enableEdit() {
+    if (!this.args.isDisabled) this.isEditing = true;
+  }
+
+  /**
+   * Clears updated secret when cancel button is
+   * clicked in Actionable view.
+   * Sets the secret field back to disabled mode
+   */
+  @action
+  cancelEdit() {
+    this.isEditing = false;
+    this.args.cancel();
+  }
+}

ui/admin/app/styles/app.scss

@@ -687,6 +687,29 @@
   /* stylelint-enable selector-class-pattern */
 }
 
+// secret input field
+.secret-input {
+  display: flex;
+  align-items: flex-end;
+  column-gap: 0.5rem;
+  position: relative;
+
+  .overlay {
+    width: 60%;
+    height: 1rem;
+    position: absolute;
+    bottom: 2.15rem;
+    left: 0.25rem;
+    border-radius: 0.25rem;
+    background-color: var(--token-color-palette-neutral-200);
+  }
+
+  .hds-button {
+    margin-bottom: 1.5rem;
+    flex-basis: 6rem;
+  }
+}
+
 // session recording player
 .session-recording-player {
   --player-background-color: #252937;