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 01/10] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20secret=20input=20f?=
 =?UTF-8?q?ield?=
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;

From 78497a87ea0ed114e906bfb641a313d9f1e6b884 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Mon, 20 Mar 2023 23:14:03 +0530
Subject: [PATCH 02/10] =?UTF-8?q?chore:=20=F0=9F=A4=96=20style?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/admin/app/components/form/field/secret-input/index.hbs | 7 ++++++-
 ui/admin/app/components/form/field/secret-input/index.js  | 2 +-
 ui/admin/app/components/form/storage-bucket/index.hbs     | 2 ++
 ui/admin/app/styles/app.scss                              | 1 +
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/ui/admin/app/components/form/field/secret-input/index.hbs b/ui/admin/app/components/form/field/secret-input/index.hbs
index 1130a2fe4..95b7235e8 100644
--- a/ui/admin/app/components/form/field/secret-input/index.hbs
+++ b/ui/admin/app/components/form/field/secret-input/index.hbs
@@ -28,9 +28,14 @@
     <Hds::Button
       @text={{t 'actions.edit'}}
       @icon='edit'
+      @color='secondary'
       {{on 'click' this.enableEdit}}
     />
   {{else}}
-    <Hds::Button @text={{t 'actions.cancel'}} {{on 'click' this.clearEdit}} />
+    <Hds::Button
+      @text={{t 'actions.cancel'}}
+      @color='secondary'
+      {{on 'click' this.cancelEdit}}
+    />
   {{/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
index d07ef164b..a83b5a16b 100644
--- a/ui/admin/app/components/form/field/secret-input/index.js
+++ b/ui/admin/app/components/form/field/secret-input/index.js
@@ -52,7 +52,7 @@ export default class FormFieldSecretInputIndexComponent extends Component {
    * Sets the secret field back to disabled mode
    */
   @action
-  clearEdit() {
+  cancelEdit() {
     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 3746791c9..5c92f882b 100644
--- a/ui/admin/app/components/form/storage-bucket/index.hbs
+++ b/ui/admin/app/components/form/storage-bucket/index.hbs
@@ -189,6 +189,7 @@
         </F.Error>
       {{/if}}
     </Hds::Form::TextInput::Field>
+
   {{else}}
     <Form::Field::SecretInput
       @isRequired={{true}}
@@ -215,6 +216,7 @@
         </F.Error>
       {{/if}}
     </Form::Field::SecretInput>
+
   {{/if}}
   <Hds::Form::TextInput::Field
     @isRequired={{true}}
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index a6f43fc8f..6f32c221a 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -706,6 +706,7 @@
   }
   .hds-button {
     margin-top: 4.25rem;
+    width: 6rem;
   }
 }
 // session recording player

From 2beb7ec4e3093a6053fd54bb0ff05dcd0e2c8728 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Mon, 20 Mar 2023 23:15:16 +0530
Subject: [PATCH 03/10] =?UTF-8?q?chore:=20=F0=9F=A4=96=20undo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/api/mirage/config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/addons/api/mirage/config.js b/addons/api/mirage/config.js
index 3b6781c0a..29c98b72a 100644
--- a/addons/api/mirage/config.js
+++ b/addons/api/mirage/config.js
@@ -677,6 +677,7 @@ function routes() {
           name: plugin_name,
         };
       }
+
       // Remove the secrets and add the hmac in the response
       delete attrs.secrets;
       attrs.secrets_hmac = faker.git.commitSha();

From 5984a60ae1dd528214ace83e0d744a476ff2e652 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Mon, 20 Mar 2023 23:36:27 +0530
Subject: [PATCH 04/10] =?UTF-8?q?chore:=20=F0=9F=A4=96=20scss=20lint?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/admin/app/styles/app.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index 6f32c221a..474afc396 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -695,6 +695,7 @@
 
   .hds-form-text-input {
     width: 99%;
+
     &::placeholder {
       content: '';
       width: 80%;
@@ -704,11 +705,13 @@
       vertical-align: middle;
     }
   }
+
   .hds-button {
     margin-top: 4.25rem;
     width: 6rem;
   }
 }
+
 // session recording player
 .session-recording-player {
   --player-background-color: #252937;

From 96b2bcd6ff143897685161ffbf14c995225c7626 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Tue, 21 Mar 2023 14:42:54 +0530
Subject: [PATCH 05/10] =?UTF-8?q?fix:=20=F0=9F=90=9B=20style,=20remove=20c?=
 =?UTF-8?q?omment?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/components/form/field/secret-input/index.js    |  1 -
 ui/admin/app/styles/app.scss                           | 10 ++++------
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/ui/admin/app/components/form/field/secret-input/index.js b/ui/admin/app/components/form/field/secret-input/index.js
index a83b5a16b..3a1876f7a 100644
--- a/ui/admin/app/components/form/field/secret-input/index.js
+++ b/ui/admin/app/components/form/field/secret-input/index.js
@@ -15,7 +15,6 @@ export default class FormFieldSecretInputIndexComponent extends Component {
    */
   @tracked editing = false;
   @tracked secret;
-  // =actions
 
   /**
    * Returns true if the resource form is in read only mode
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index 474afc396..a93a83090 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -690,24 +690,22 @@
 // secret input field
 .secret-input {
   display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
+  align-items: flex-end;
+  column-gap: 0.5rem;
 
   .hds-form-text-input {
-    width: 99%;
-
     &::placeholder {
       content: '';
       width: 80%;
       height: 0.65rem;
-      background-color: var(--ui-gray-subtler-3);
+      background-color: var(--token-color-palette-neutral-200);
       border-radius: 0.25rem;
       vertical-align: middle;
     }
   }
 
   .hds-button {
-    margin-top: 4.25rem;
+    margin-bottom: 1.5rem;
     width: 6rem;
   }
 }

From b33efbd5c35f189808a892261629a5872b6bf67d Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Wed, 22 Mar 2023 16:34:31 +0530
Subject: [PATCH 06/10] =?UTF-8?q?chore:=20=F0=9F=A4=96=20style=20updates,?=
 =?UTF-8?q?=20incl=20var=20arg=20to=20make=20it=20read-write?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../form/field/secret-input/index.hbs         |  8 ++-
 .../form/field/secret-input/index.js          |  3 +-
 .../components/form/storage-bucket/index.hbs  | 55 ++++++++++++++++++-
 .../components/form/storage-bucket/index.js   |  9 +++
 .../components/form/target/details/index.hbs  | 50 ++++++++---------
 ui/admin/app/styles/app.scss                  | 20 +++----
 6 files changed, 103 insertions(+), 42 deletions(-)

diff --git a/ui/admin/app/components/form/field/secret-input/index.hbs b/ui/admin/app/components/form/field/secret-input/index.hbs
index 95b7235e8..0b7f56a33 100644
--- a/ui/admin/app/components/form/field/secret-input/index.hbs
+++ b/ui/admin/app/components/form/field/secret-input/index.hbs
@@ -4,14 +4,16 @@
 }}
 
 <div class='secret-input'>
+  {{#if (or this.isDisabled this.isActionable)}}
+    <span class='overlay'></span>
+  {{/if}}
   <Hds::Form::TextInput::Field
     @isRequired={{@isRequired}}
     @isInvalid={{@isInvalid}}
-    @value={{this.secret}}
+    @value={{@value}}
     @type={{@type}}
     name={{@name}}
-    disabled={{not this.editing}}
-    placeholder=' '
+    disabled={{or @disabled (not this.editing)}}
     ...attributes
     as |F|
   >
diff --git a/ui/admin/app/components/form/field/secret-input/index.js b/ui/admin/app/components/form/field/secret-input/index.js
index 3a1876f7a..d1d1fdb51 100644
--- a/ui/admin/app/components/form/field/secret-input/index.js
+++ b/ui/admin/app/components/form/field/secret-input/index.js
@@ -14,7 +14,6 @@ export default class FormFieldSecretInputIndexComponent extends Component {
    * @type {boolean}
    */
   @tracked editing = false;
-  @tracked secret;
 
   /**
    * Returns true if the resource form is in read only mode
@@ -52,7 +51,7 @@ export default class FormFieldSecretInputIndexComponent extends Component {
    */
   @action
   cancelEdit() {
-    this.secret = null;
     this.editing = false;
+    this.args.cancel();
   }
 }
diff --git a/ui/admin/app/components/form/storage-bucket/index.hbs b/ui/admin/app/components/form/storage-bucket/index.hbs
index 5c92f882b..47e075b61 100644
--- a/ui/admin/app/components/form/storage-bucket/index.hbs
+++ b/ui/admin/app/components/form/storage-bucket/index.hbs
@@ -5,7 +5,7 @@
 
 <Rose::Form
   @onSubmit={{@submit}}
-  @cancel={{@cancel}}
+  @cancel={{this.cancel}}
   @disabled={{@model.isSaving}}
   @showEditToggle={{if @model.isNew false true}}
   as |form|
@@ -164,6 +164,59 @@
     {{/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}}
+      @value={{@model.access_key_id}}
+      @type='text'
+      @name='access_key_id'
+      @disabled={{form.disabled}}
+      @showEditButton={{true}}
+      @cancel={{this.cancel}}
+      {{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}}
   {{#if @model.isNew}}
     <Hds::Form::TextInput::Field
       @isRequired={{true}}
diff --git a/ui/admin/app/components/form/storage-bucket/index.js b/ui/admin/app/components/form/storage-bucket/index.js
index 108ee5fb9..c416707c4 100644
--- a/ui/admin/app/components/form/storage-bucket/index.js
+++ b/ui/admin/app/components/form/storage-bucket/index.js
@@ -17,4 +17,13 @@ export default class FormStorageBucketComponent extends Component {
     ).model;
     this.args.model.scopeModel = selectedScopeModel;
   }
+
+  /**
+   * Call passed cancel function.
+   * Unset updated secrets
+   */
+  @action
+  cancel() {
+    this.args.cancel();
+  }
 }
diff --git a/ui/admin/app/components/form/target/details/index.hbs b/ui/admin/app/components/form/target/details/index.hbs
index 5b7f672ff..eaabdad4b 100644
--- a/ui/admin/app/components/form/target/details/index.hbs
+++ b/ui/admin/app/components/form/target/details/index.hbs
@@ -50,7 +50,30 @@
       </F.Error>
     {{/if}}
   </Hds::Form::Textarea::Field>
-
+  <Form::Field::SecretInput
+    @isRequired={{true}}
+    @isInvalid={{@model.errors.access_key_id}}
+    @value={{@model.access_key_id}}
+    @type='text'
+    @name='access_key_id'
+    @disabled={{form.disabled}}
+    @showEditButton={{true}}
+    @cancel={{this.cancel}}
+    {{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 (and @model.isNew (feature-flag 'ssh-target'))}}
     <Hds::Form::RadioCard::Group @name='type' @alignment='center' as |G|>
       <G.Legend>{{t 'resources.target.form.type.label'}}</G.Legend>
@@ -84,31 +107,6 @@
     </InfoField>
   {{/if}}
 
-  {{#if (feature-flag 'target-network-address')}}
-    <Hds::Form::TextInput::Field
-      @isOptional={{true}}
-      @value={{@model.address}}
-      @isInvalid={{@model.errors.address}}
-      @type='text'
-      name='address'
-      disabled={{form.disabled}}
-      {{on 'input' (set-from-event @model 'address')}}
-      as |F|
-    >
-      <F.Label>{{t 'resources.target.form.target-address.label'}}</F.Label>
-      <F.HelperText>{{t
-          'resources.target.form.target-address.help'
-        }}</F.HelperText>
-      {{#if @model.errors.address}}
-        <F.Error as |E|>
-          {{#each @model.errors.address as |error|}}
-            <E.Message>{{error.message}}</E.Message>
-          {{/each}}
-        </F.Error>
-      {{/if}}
-    </Hds::Form::TextInput::Field>
-  {{/if}}
-
   <Hds::Form::TextInput::Field
     @isRequired={{@model.isTCP}}
     @isOptional={{not @model.isTCP}}
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index a93a83090..58914dadc 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -692,21 +692,21 @@
   display: flex;
   align-items: flex-end;
   column-gap: 0.5rem;
+  position: relative;
 
-  .hds-form-text-input {
-    &::placeholder {
-      content: '';
-      width: 80%;
-      height: 0.65rem;
-      background-color: var(--token-color-palette-neutral-200);
-      border-radius: 0.25rem;
-      vertical-align: middle;
-    }
+  .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;
-    width: 6rem;
+    flex-basis: 6rem;
   }
 }
 

From 3f86f45869937064c3eb487f5c154f7e6aa97159 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Wed, 22 Mar 2023 16:42:58 +0530
Subject: [PATCH 07/10] =?UTF-8?q?fix:=20=F0=9F=90=9B=20undo=20change?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/form/storage-bucket/index.hbs  | 53 -------------------
 .../components/form/storage-bucket/index.js   |  1 -
 .../components/form/target/details/index.hbs  | 50 ++++++++---------
 3 files changed, 26 insertions(+), 78 deletions(-)

diff --git a/ui/admin/app/components/form/storage-bucket/index.hbs b/ui/admin/app/components/form/storage-bucket/index.hbs
index 47e075b61..7a44ba0c4 100644
--- a/ui/admin/app/components/form/storage-bucket/index.hbs
+++ b/ui/admin/app/components/form/storage-bucket/index.hbs
@@ -217,60 +217,7 @@
       {{/if}}
     </Form::Field::SecretInput>
   {{/if}}
-  {{#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/components/form/storage-bucket/index.js b/ui/admin/app/components/form/storage-bucket/index.js
index c416707c4..8ffada749 100644
--- a/ui/admin/app/components/form/storage-bucket/index.js
+++ b/ui/admin/app/components/form/storage-bucket/index.js
@@ -20,7 +20,6 @@ export default class FormStorageBucketComponent extends Component {
 
   /**
    * Call passed cancel function.
-   * Unset updated secrets
    */
   @action
   cancel() {
diff --git a/ui/admin/app/components/form/target/details/index.hbs b/ui/admin/app/components/form/target/details/index.hbs
index eaabdad4b..5b7f672ff 100644
--- a/ui/admin/app/components/form/target/details/index.hbs
+++ b/ui/admin/app/components/form/target/details/index.hbs
@@ -50,30 +50,7 @@
       </F.Error>
     {{/if}}
   </Hds::Form::Textarea::Field>
-  <Form::Field::SecretInput
-    @isRequired={{true}}
-    @isInvalid={{@model.errors.access_key_id}}
-    @value={{@model.access_key_id}}
-    @type='text'
-    @name='access_key_id'
-    @disabled={{form.disabled}}
-    @showEditButton={{true}}
-    @cancel={{this.cancel}}
-    {{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 (and @model.isNew (feature-flag 'ssh-target'))}}
     <Hds::Form::RadioCard::Group @name='type' @alignment='center' as |G|>
       <G.Legend>{{t 'resources.target.form.type.label'}}</G.Legend>
@@ -107,6 +84,31 @@
     </InfoField>
   {{/if}}
 
+  {{#if (feature-flag 'target-network-address')}}
+    <Hds::Form::TextInput::Field
+      @isOptional={{true}}
+      @value={{@model.address}}
+      @isInvalid={{@model.errors.address}}
+      @type='text'
+      name='address'
+      disabled={{form.disabled}}
+      {{on 'input' (set-from-event @model 'address')}}
+      as |F|
+    >
+      <F.Label>{{t 'resources.target.form.target-address.label'}}</F.Label>
+      <F.HelperText>{{t
+          'resources.target.form.target-address.help'
+        }}</F.HelperText>
+      {{#if @model.errors.address}}
+        <F.Error as |E|>
+          {{#each @model.errors.address as |error|}}
+            <E.Message>{{error.message}}</E.Message>
+          {{/each}}
+        </F.Error>
+      {{/if}}
+    </Hds::Form::TextInput::Field>
+  {{/if}}
+
   <Hds::Form::TextInput::Field
     @isRequired={{@model.isTCP}}
     @isOptional={{not @model.isTCP}}

From fcc156a194d481de28a3481fc7597f0199410451 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Wed, 22 Mar 2023 16:52:58 +0530
Subject: [PATCH 08/10] =?UTF-8?q?chore:=20=F0=9F=A4=96=20move=20component?=
 =?UTF-8?q?=20invocation=20to=20a=20separate=20PR?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/form/storage-bucket/index.hbs  | 77 ++++++-------------
 .../components/form/storage-bucket/index.js   |  8 --
 2 files changed, 23 insertions(+), 62 deletions(-)

diff --git a/ui/admin/app/components/form/storage-bucket/index.hbs b/ui/admin/app/components/form/storage-bucket/index.hbs
index 7a44ba0c4..2413fd29f 100644
--- a/ui/admin/app/components/form/storage-bucket/index.hbs
+++ b/ui/admin/app/components/form/storage-bucket/index.hbs
@@ -5,7 +5,7 @@
 
 <Rose::Form
   @onSubmit={{@submit}}
-  @cancel={{this.cancel}}
+  @cancel={{@cancel}}
   @disabled={{@model.isSaving}}
   @showEditToggle={{if @model.isNew false true}}
   as |form|
@@ -164,59 +164,28 @@
     {{/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}}
-      @value={{@model.access_key_id}}
-      @type='text'
-      @name='access_key_id'
-      @disabled={{form.disabled}}
-      @showEditButton={{true}}
-      @cancel={{this.cancel}}
-      {{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.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>
 
   <Hds::Form::TextInput::Field
     @isRequired={{true}}
diff --git a/ui/admin/app/components/form/storage-bucket/index.js b/ui/admin/app/components/form/storage-bucket/index.js
index 8ffada749..108ee5fb9 100644
--- a/ui/admin/app/components/form/storage-bucket/index.js
+++ b/ui/admin/app/components/form/storage-bucket/index.js
@@ -17,12 +17,4 @@ export default class FormStorageBucketComponent extends Component {
     ).model;
     this.args.model.scopeModel = selectedScopeModel;
   }
-
-  /**
-   * Call passed cancel function.
-   */
-  @action
-  cancel() {
-    this.args.cancel();
-  }
 }

From b8c38dd0b3314672eceea5af813c9f78810f08a3 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Thu, 23 Mar 2023 10:28:16 +0530
Subject: [PATCH 09/10] =?UTF-8?q?chore:=20=F0=9F=A4=96=20var=20names?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/components/form/field/secret-input/index.hbs   |  4 ++--
 .../app/components/form/field/secret-input/index.js    | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/ui/admin/app/components/form/field/secret-input/index.hbs b/ui/admin/app/components/form/field/secret-input/index.hbs
index 0b7f56a33..721ef39dd 100644
--- a/ui/admin/app/components/form/field/secret-input/index.hbs
+++ b/ui/admin/app/components/form/field/secret-input/index.hbs
@@ -13,7 +13,7 @@
     @value={{@value}}
     @type={{@type}}
     name={{@name}}
-    disabled={{or @disabled (not this.editing)}}
+    disabled={{or @isDisabled (not this.isEditing)}}
     ...attributes
     as |F|
   >
@@ -24,7 +24,7 @@
     <Hds::Button
       @text={{t 'actions.edit'}}
       @icon='edit'
-      disabled={{@disabled}}
+      disabled={{@isDisabled}}
     />
   {{else if this.isActionable}}
     <Hds::Button
diff --git a/ui/admin/app/components/form/field/secret-input/index.js b/ui/admin/app/components/form/field/secret-input/index.js
index d1d1fdb51..b3e3c8368 100644
--- a/ui/admin/app/components/form/field/secret-input/index.js
+++ b/ui/admin/app/components/form/field/secret-input/index.js
@@ -13,14 +13,14 @@ export default class FormFieldSecretInputIndexComponent extends Component {
    * Tracks when secret can be updated
    * @type {boolean}
    */
-  @tracked editing = false;
+  @tracked isEditing = false;
 
   /**
    * Returns true if the resource form is in read only mode
    * @type {boolean}
    */
   get isDisabled() {
-    return this.args.disabled;
+    return this.args.isDisabled;
   }
 
   /**
@@ -30,7 +30,7 @@ export default class FormFieldSecretInputIndexComponent extends Component {
    * @type {boolean}
    */
   get isActionable() {
-    return this.args.showEditButton && !this.editing;
+    return this.args.showEditButton && !this.isEditing;
   }
 
   // =actions
@@ -41,7 +41,7 @@ export default class FormFieldSecretInputIndexComponent extends Component {
    */
   @action
   enableEdit() {
-    if (!this.args.disabled) this.editing = true;
+    if (!this.args.isDisabled) this.isEditing = true;
   }
 
   /**
@@ -51,7 +51,7 @@ export default class FormFieldSecretInputIndexComponent extends Component {
    */
   @action
   cancelEdit() {
-    this.editing = false;
+    this.isEditing = false;
     this.args.cancel();
   }
 }

From e5b09c415f8e5d856e6084e2c26dfbc02c35927e Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Thu, 23 Mar 2023 10:45:28 +0530
Subject: [PATCH 10/10] =?UTF-8?q?fix:=20=F0=9F=90=9B=20translation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/core/translations/resources/en-us.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index 89a58b976..beab91ebe 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 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.
+      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.