From a67093efdd3737cbbb228a849b815f8710cfbf2f Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Mon, 20 Mar 2023 22:48:37 +0530
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20secret=20input=20field?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/api/mirage/config.js                   |  1 -
 addons/core/translations/resources/en-us.yaml |  2 +-
 .../form/field/secret-input/index.hbs         | 36 +++++++++
 .../form/field/secret-input/index.js          | 59 +++++++++++++++
 .../components/form/storage-bucket/index.hbs  | 75 +++++++++++++------
 ui/admin/app/styles/app.scss                  | 21 ++++++
 6 files changed, 169 insertions(+), 25 deletions(-)
 create mode 100644 ui/admin/app/components/form/field/secret-input/index.hbs
 create mode 100644 ui/admin/app/components/form/field/secret-input/index.js

diff --git a/addons/api/mirage/config.js b/addons/api/mirage/config.js
index 29c98b72a..3b6781c0a 100644
--- a/addons/api/mirage/config.js
+++ b/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();
diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index 9f2fb54f8..89a58b976 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/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.
diff --git a/ui/admin/app/components/form/field/secret-input/index.hbs b/ui/admin/app/components/form/field/secret-input/index.hbs
new file mode 100644
index 000000000..1130a2fe4
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/ui/admin/app/components/form/field/secret-input/index.js b/ui/admin/app/components/form/field/secret-input/index.js
new file mode 100644
index 000000000..d07ef164b
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/ui/admin/app/components/form/storage-bucket/index.hbs b/ui/admin/app/components/form/storage-bucket/index.hbs
index 2413fd29f..3746791c9 100644
--- a/ui/admin/app/components/form/storage-bucket/index.hbs
+++ b/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}}
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index c1bc62db0..a6f43fc8f 100644
--- a/ui/admin/app/styles/app.scss
+++ b/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;