Icu 8559 use secret input component for access key (#146)

* feat: 🎸 create edit storage-bucket view

Create edit storage bucket view for single storage bucket

✅ Closes: ICU-8240

* Update ui/admin/tests/acceptance/storage-buckets/update-test.js

Co-authored-by: Zhihe Li <zhihe.li@hashicorp.com>

* Update ui/admin/tests/acceptance/storage-buckets/update-test.js

Co-authored-by: Zhihe Li <zhihe.li@hashicorp.com>

* refactor: 💡 merge upstream

merge upstream

✅ Closes: ICU-8240

* feat: 🎸 implement secret-input component

Implement `secret-input` component for `access_key_id` field in the
`storage-bucket` new and edit forms.

✅ Closes: ICU-8559

* refactor: 💡 refactored storage-bucket form

We will still conditionally render regular `Hds::Form::TextInput::Field`
for new `storage-bucket` and render `Form::Field::SecretInput` for
detail view and edit view.

✅ Closes: ICU-8559

* refactor: 💡 fixed failing test for storage bucket from

Fixed failing test for edit button now that secret-input has been
implemented

✅ Closes: ICU-8559

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

Co-authored-by: Zhihe Li <zhihe.li@hashicorp.com>

* Update index.js

---------

Co-authored-by: Zhihe Li <zhihe.li@hashicorp.com>

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

@@ -164,28 +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'
+      {{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}}
+      @value={{@model.access_key_id}}
+      @isInvalid={{@model.errors.access_key_id}}
+      @type='text'
+      @name='access_key_id'
+      @isDisabled={{form.disabled}}
+      @showEditButton={{true}}
+      @cancel={{@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

ui/admin/tests/acceptance/storage-buckets/update-test.js

@@ -45,20 +45,18 @@ module('Acceptance | storage-buckets | update', function (hooks) {
   test('can save changes to an existing storage-bucket', async function (assert) {
     assert.expect(2);
     await visit(urls.storageBucket);
-    await click('form [type="button"]', 'Click edit mode');
+    await click('.rose-form-actions [type="button"]', 'Click edit mode');
     await fillIn('[name="name"]', 'Updated storage-bucket name');
     await click('.rose-form-actions [type="submit"]');
     assert.dom(`[href="${urls.storageBucket}"]`).isVisible();
-    assert
-      .dom('input[name="name"]')
-      .hasValue('Updated storage-bucket name');
+    assert.dom('input[name="name"]').hasValue('Updated storage-bucket name');
   });
 
   test('can cancel changes to an existing storage-bucket', async function (assert) {
     assert.expect(1);
     const name = instances.storageBucket.name;
     await visit(urls.storageBucket);
-    await click('form [type="button"]', 'Click edit mode');
+    await click('.rose-form-actions [type="button"]', 'Click edit mode');
     await fillIn('[name="name"]', 'Updated storage-bucket name');
     await click('.rose-form-actions [type="button"]');
     await assert.dom('input[name="name"]').hasValue(`${name}`);