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] =?UTF-8?q?chore:=20=F0=9F=A4=96=20style=20updates,=20incl?=
 =?UTF-8?q?=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;
   }
 }