feat: 🎸 add storage bucket card on ssh target (#163)

* feat: 🎸 storage bucket card on ssh target

✅ Closes: ICU-8631

* Update ui/admin/app/routes/scopes/scope/targets/target/index.js

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

---------

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

addons/core/translations/resources/en-us.yaml

@@ -261,12 +261,10 @@ storage-bucket:
   titles:
     new: New Storage Bucket
     aws: AWS
-    global: Global
-    orgs: Orgs
-  types:
-    aws_s3: AWS S3
   actions:
     delete: Delete Storage Bucket
+  types:
+    aws_s3: AWS S3
   form:
     scope:
       label: Scope

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

@@ -11,7 +11,7 @@
   as |form|
 >
   <Hds::Form::TextInput::Field
-    @isRequired={{true}}
+    @isOptional={{true}}
     @value={{@model.name}}
     @isInvalid={{@model.errors.name}}
     @type='text'

ui/admin/app/routes/scopes/scope/targets/target/index.js

@@ -4,5 +4,30 @@
  */
 
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
 
-export default class ScopesScopeTargetsTargetIndexRoute extends Route {}
+export default class ScopesScopeTargetsTargetIndexRoute extends Route {
+  // =services
+
+  @service store;
+
+  // =methods
+
+  /**
+   * Adds storage bucket name to the context.
+   * @param {Controller} controller
+   * @param {TargetModel} target
+   */
+  async setupController(controller, target) {
+    super.setupController(...arguments);
+    if (target?.storage_bucket_id) {
+      const { storage_bucket_id } = target;
+      const storageBucket = await this.store.findRecord(
+        'storage-bucket',
+        storage_bucket_id
+      );
+      const storage_bucket_name = storageBucket.displayName;
+      controller.set('storage_bucket_name', storage_bucket_name);
+    }
+  }
+}

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

@@ -80,13 +80,10 @@
             </B.Td>
             <B.Td>
               {{#if B.data.scopeModel.isGlobal}}
-                <Hds::Badge
-                  @text={{t 'resources.storage-bucket.titles.global'}}
-                  @icon='globe'
-                />
+                <Hds::Badge @text={{t 'titles.global'}} @icon='globe' />
               {{else}}
                 <Hds::Badge
-                  @text={{t 'resources.storage-bucket.titles.orgs'}}
+                  @text={{t 'resources.org.title_plural'}}
                   @icon='org'
                 />
               {{/if}}

ui/admin/app/templates/scopes/scope/targets/target/index.hbs

@@ -56,7 +56,7 @@
                 <P.Item
                   @icon='cloud-upload'
                   @color='boundary'
-                  @text={{@model.storage_bucket_id}}
+                  @text={{this.storage_bucket_name}}
                   @route='scopes.scope.storage-buckets.storage-bucket'
                   @model={{@model.storage_bucket_id}}
                 >

ui/admin/tests/acceptance/targets/read-test.js

@@ -21,7 +21,7 @@ module('Acceptance | targets | read', function (hooks) {
   setupMirage(hooks);
 
   let featuresService;
-
+  const LINK_LIST_SELECTOR = '.link-list-item';
   const instances = {
     scopes: {
       global: null,
@@ -30,6 +30,7 @@ module('Acceptance | targets | read', function (hooks) {
     },
     sshTarget: null,
     tcpTarget: null,
+    storageBucket: null,
   };
   const urls = {
     globalScope: null,
@@ -39,6 +40,7 @@ module('Acceptance | targets | read', function (hooks) {
     sshTarget: null,
     tcpTarget: null,
     enableSessionRecording: null,
+    storageBucket: null,
   };
 
   hooks.beforeEach(function () {
@@ -61,6 +63,9 @@ module('Acceptance | targets | read', function (hooks) {
       type: TYPE_TARGET_TCP,
       scope: instances.scopes.project,
     });
+    instances.storageBucket = this.server.create('storage-bucket', {
+      scope: instances.scopes.global,
+    });
     // Generate route URLs for resources
     urls.globalScope = `/scopes/global/scopes`;
     urls.orgScope = `/scopes/${instances.scopes.org.id}/scopes`;
@@ -70,6 +75,7 @@ module('Acceptance | targets | read', function (hooks) {
     urls.tcpTarget = `${urls.targets}/${instances.tcpTarget.id}`;
     urls.unknownTarget = `${urls.targets}/foo`;
     urls.enableSessionRecording = `${urls.sshTarget}/enable-session-recording`;
+    urls.storageBucket = `${urls.projectScope}/storage-buckets/${instances.storageBucket.id}`;
 
     authenticateSession({});
   });
@@ -214,6 +220,19 @@ module('Acceptance | targets | read', function (hooks) {
     assert.strictEqual(currentURL(), urls.enableSessionRecording);
   });
 
+  test('users can click on associated storage bucket card on an ssh target', async function (assert) {
+    assert.expect(1);
+    featuresService.enable('ssh-target');
+    featuresService.enable('session-recording');
+    instances.sshTarget.update({ storageBucketId: instances.storageBucket.id });
+    await visit(urls.targets);
+
+    await click(`[href="${urls.sshTarget}"]`);
+    await click(LINK_LIST_SELECTOR);
+
+    assert.strictEqual(currentURL(), urls.storageBucket);
+  });
+
   test('users can click on settings icon in target session-recording sidebar and it takes them to enable session recording', async function (assert) {
     featuresService.enable('session-recording');
     assert.expect(1);