feat: 🎸 create edit storage-bucket view (#137)

* 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

* Update update-test.js

removed unneeded await on assertion

---------

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

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

@@ -60,9 +60,9 @@
       as |F|
     >
       <F.Label>{{t 'resources.storage-bucket.form.scope.label'}}</F.Label>
-      <F.HelperText>{{t
-          'resources.storage-bucket.form.scope.help'
-        }}</F.HelperText>
+      <F.HelperText>
+        {{t 'resources.storage-bucket.form.scope.help'}}
+      </F.HelperText>
       <F.Options>
         {{#each @scopes as |scope|}}
           <option value={{scope.model.id}}>{{scope.model.displayName}}</option>
@@ -187,30 +187,32 @@
     {{/if}}
   </Hds::Form::TextInput::Field>
 
-  <Hds::Form::TextInput::Field
-    @isRequired={{true}}
-    @value={{@model.secret_access_key}}
-    @isInvalid={{@model.errors.secret_access_key}}
-    @type='text'
-    name='secret_access_key'
-    disabled={{form.disabled}}
-    {{on 'input' (set-from-event @model 'secret_access_key')}}
-    as |F|
-  >
-    <F.Label>{{t
-        'resources.storage-bucket.form.secret_access_key.label'
-      }}</F.Label>
-    <F.HelperText>{{t
-        'resources.storage-bucket.form.secret_access_key.help'
-      }}</F.HelperText>
-    {{#if @model.errors.secret_access_key}}
-      <F.Error as |E|>
-        {{#each @model.errors.secret_access_key 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.secret_access_key}}
+      @isInvalid={{@model.errors.secret_access_key}}
+      @type='text'
+      name='secret_access_key'
+      disabled={{form.disabled}}
+      {{on 'input' (set-from-event @model 'secret_access_key')}}
+      as |F|
+    >
+      <F.Label>{{t
+          'resources.storage-bucket.form.secret_access_key.label'
+        }}</F.Label>
+      <F.HelperText>{{t
+          'resources.storage-bucket.form.secret_access_key.help'
+        }}</F.HelperText>
+      {{#if @model.errors.secret_access_key}}
+        <F.Error as |E|>
+          {{#each @model.errors.secret_access_key as |error|}}
+            <E.Message>{{error.message}}</E.Message>
+          {{/each}}
+        </F.Error>
+      {{/if}}
+    </Hds::Form::TextInput::Field>
+  {{/if}}
 
   <Hds::Form::TextInput::Field
     @isRequired={{true}}

ui/admin/app/controllers/scopes/scope/storage-buckets/storage-bucket.js

@@ -0,0 +1,13 @@
+import Controller from '@ember/controller';
+
+export default class ScopesScopeStorageBucketsStorageBucketController extends Controller {
+  // =attributes
+
+  /**
+   * A storage-bucket breadcrumb
+   * @type {string}
+   */
+  get breadCrumb() {
+    return this.model.displayName;
+  }
+}

ui/admin/app/routes/scopes/scope/storage-buckets/new.js

@@ -33,18 +33,13 @@ export default class ScopesScopeStorageBucketsNewRoute extends Route {
 
   async afterModel() {
     let scopes;
-    const currentScope = this.modelFor('scopes.scope');
     const orgScopes = (
       await this.store.query('scope', { scope_id: 'global' })
     ).map((scope) => ({ model: scope }));
-    if (currentScope.id === 'global') {
-      scopes = [{ model: currentScope }, ...orgScopes];
-    } else {
-      scopes = [
-        { model: this.store.peekRecord('scope', 'global') },
-        ...orgScopes,
-      ];
-    }
+    scopes = [
+      { model: this.store.peekRecord('scope', 'global') },
+      ...orgScopes,
+    ];
     this.scopes = scopes;
   }
 

ui/admin/app/routes/scopes/scope/storage-buckets/storage-bucket/index.js

@@ -4,5 +4,33 @@
  */
 
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
 
-export default class ScopesScopeStorageBucketsStorageBucketIndexRoute extends Route {}
+export default class ScopesScopeStorageBucketsStorageBucketIndexRoute extends Route {
+  // =services
+
+  @service store;
+
+  // =methods
+
+  async afterModel() {
+    let scopes;
+    const orgScopes = (
+      await this.store.query('scope', { scope_id: 'global' })
+    ).map((scope) => ({ model: scope }));
+    scopes = [
+      { model: this.store.peekRecord('scope', 'global') },
+      ...orgScopes,
+    ];
+    this.scopes = scopes;
+  }
+
+  /**
+   * Adds available global and org scopes to the context.
+   * @param {Controller} controller
+   */
+  setupController(controller) {
+    super.setupController(...arguments);
+    controller.set('scopes', this.scopes);
+  }
+}

ui/admin/app/templates/scopes/scope/storage-buckets/storage-bucket/index.hbs

@@ -1,4 +1,41 @@
 {{!
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
-}}
+}}
+
+<Rose::Layout::Page as |page|>
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <h2>
+      {{t 'resources.storage-bucket.title'}}
+      <DocLink @doc='storage-bucket' @iconSize='large' />
+    </h2>
+    <Copyable
+      @text={{@model.id}}
+      @buttonText={{t 'actions.copy-to-clipboard'}}
+      @acknowledgeText={{t 'states.copied'}}
+    >
+      <code>{{@model.id}}</code>
+    </Copyable>
+  </page.header>
+
+  <page.navigation>
+    <Rose::Nav::Tabs as |nav|>
+      <nav.link @route='scopes.scope.storage-buckets.storage-bucket.index'>
+        {{t 'titles.details'}}
+      </nav.link>
+    </Rose::Nav::Tabs>
+  </page.navigation>
+
+  <page.body>
+    <Form::StorageBucket
+      @model={{@model}}
+      @submit={{route-action 'save' @model}}
+      @cancel={{route-action 'cancel' @model}}
+      @scopes={{this.scopes}}
+    />
+  </page.body>
+</Rose::Layout::Page>

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

@@ -0,0 +1,98 @@
+import { module, test } from 'qunit';
+import { visit, click, fillIn } from '@ember/test-helpers';
+import { setupApplicationTest } from 'ember-qunit';
+import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
+import { Response } from 'miragejs';
+import {
+  authenticateSession,
+  // These are left here intentionally for future reference.
+  //currentSession,
+  //invalidateSession,
+} from 'ember-simple-auth/test-support';
+
+module('Acceptance | storage-buckets | update', function (hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+
+  let features;
+
+  const instances = {
+    scopes: {
+      global: null,
+    },
+    storageBucket: null,
+  };
+
+  const urls = {
+    globalScope: null,
+    storageBuckets: null,
+    storageBucket: null,
+  };
+
+  hooks.beforeEach(function () {
+    instances.scopes.global = this.server.create('scope', { id: 'global' });
+    instances.storageBucket = this.server.create('storage-bucket', {
+      scope: instances.scopes.global,
+    });
+    urls.globalScope = `/scopes/global`;
+    urls.storageBuckets = `${urls.globalScope}/storage-buckets`;
+    (urls.storageBucket = `${urls.storageBuckets}/${instances.storageBucket.id}`),
+      (features = this.owner.lookup('service:features'));
+    features.enable('session-recording');
+    authenticateSession({});
+  });
+
+  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 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');
+  });
+
+  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 fillIn('[name="name"]', 'Updated storage-bucket name');
+    await click('.rose-form-actions [type="button"]');
+    await assert.dom('input[name="name"]').hasValue(`${name}`);
+  });
+
+  test('saving an existing storage-bucket with invalid fields will display error messages', async function (assert) {
+    assert.expect(2);
+    await visit(urls.storageBuckets);
+    this.server.patch('/storage-buckets/:id', () => {
+      return new Response(
+        400,
+        {},
+        {
+          status: 400,
+          code: 'invalid_argument',
+          message: 'The request was invalid.',
+          details: {
+            request_fields: [
+              {
+                name: 'region',
+                description: 'Region is required.',
+              },
+            ],
+          },
+        }
+      );
+    });
+
+    await click(`[href="${urls.storageBucket}"]`);
+    await click('.rose-form-actions [type="button"]', 'Activate edit mode');
+    await fillIn('[name="region"]', 'random string');
+    await click('[type="submit"]');
+
+    assert.dom('[role="alert"] div').hasText('The request was invalid.');
+    assert.dom('.hds-form-error__message').hasText('Region is required.');
+  });
+});

ui/admin/tests/unit/controllers/scopes/scope/storage-buckets/storage-bucket-test.js

@@ -0,0 +1,16 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'admin/tests/helpers';
+
+module(
+  'Unit | Controller | scopes/scope/storage-buckets/storage-bucket',
+  function (hooks) {
+    setupTest(hooks);
+
+    test('it exists', function (assert) {
+      let controller = this.owner.lookup(
+        'controller:scopes/scope/storage-buckets/storage-bucket'
+      );
+      assert.ok(controller);
+    });
+  }
+);