Link list panel component (#182)

* chore: 🤖 update parent branch

* chore: 🤖 fix merge conflict

* chore: 🤖 merge conflict

* refactor: 💡 merge conflict

* chore: 🤖 update branch

* fix: 🐛 translation

* refactor: 💡 use <ul> & <li> and make entire row a link

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

@@ -261,6 +261,8 @@ storage-bucket:
     aws: AWS
     global: Global
     orgs: Orgs
+  types:
+    aws_s3: AWS S3
   actions:
     delete: Delete Storage Bucket
   form:

ui/admin/app/components/link-list-panel/index.hbs

@@ -0,0 +1,16 @@
+<Hds::Card::Container @level='mid' @hasBorder={{true}}>
+  <ul>
+    {{yield
+      (hash
+        Item=(component
+          'link-list-panel/item'
+          icon=@icon
+          color=@color
+          text=@text
+          route=@route
+          model=@model
+        )
+      )
+    }}
+  </ul>
+</Hds::Card::Container>

ui/admin/app/components/link-list-panel/item/index.hbs

@@ -0,0 +1,16 @@
+<li>
+  <LinkTo @route={{@route}} @model={{@model}} class='link-list-item'>
+    <div class='link-list-item__info'>
+      {{#if @icon}}
+        <Hds::IconTile @color={{@color}} @icon={{@icon}} @size='small' />
+      {{/if}}
+      <div>
+        <p class='link-list-item__text'>{{@text}}</p>
+        {{yield}}
+      </div>
+    </div>
+    {{#if @route}}
+      <FlightIcon @name='chevron-right' />
+    {{/if}}
+  </LinkTo>
+</li>

ui/admin/app/styles/app.scss

@@ -679,6 +679,36 @@
   }
 }
 
+.link-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  text-decoration: none;
+
+  &__info {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-left: 0.25rem;
+  }
+
+  &__text {
+    color: var(--token-color-foreground-primary);
+    margin-bottom: 0.25rem;
+  }
+
+  .flight-icon-chevron-right {
+    color: var(--token-color-foreground-faint);
+  }
+
+  .hds-button {
+    box-shadow: none;
+    border: none;
+    background-color: transparent;
+  }
+}
+
 .key-value-list {
   border: 0;
 

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

@@ -47,11 +47,28 @@
             <p class='description'>
               {{t 'resources.target.form.sidebar.help'}}
             </p>
-            <Hds::Button
-              @text={{t 'resources.target.actions.enable-recording'}}
-              @color='secondary'
-              @route='scopes.scope.targets.target.enable-session-recording'
-            />
+            {{#if @model.storage_bucket_id}}
+              <LinkListPanel as |P|>
+                <P.Item
+                  @icon='cloud-upload'
+                  @color='boundary'
+                  @text={{@model.storage_bucket_id}}
+                  @route='scopes.scope.storage-buckets.storage-bucket'
+                  @model={{@model.storage_bucket_id}}
+                >
+                  <Hds::Badge
+                    @text={{t 'resources.storage-bucket.types.aws_s3'}}
+                    @icon='aws-color'
+                  />
+                </P.Item>
+              </LinkListPanel>
+            {{else}}
+              <Hds::Button
+                @text={{t 'resources.target.actions.enable-recording'}}
+                @color='secondary'
+                @route='scopes.scope.targets.target.enable-session-recording'
+              />
+            {{/if}}
           </div>
         </sb.Sidebar>
       {{/if}}

ui/admin/tests/integration/components/link-list-panel/index-test.js

@@ -0,0 +1,28 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'admin/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | link-list-panel/index', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders with icons and text', async function (assert) {
+    assert.expect(5);
+    await render(hbs`
+      <LinkListPanel as |P|>
+        <P.Item @icon='cloud-upload' @text='Storage Bucket' @route='scopes.scope.storage-buckets'>
+          <Hds::Badge
+            @text='AWS S3'
+            @icon='aws-color'
+          />
+        </P.Item>
+      </LinkListPanel>
+    `);
+
+    assert.dom('[data-test-icon="cloud-upload"]').isVisible();
+    assert.dom('[data-test-icon="chevron-right"]').isVisible();
+    assert.dom('[data-test-icon="aws-color"]').isVisible();
+    assert.dom('.hds-badge__text').hasText('AWS S3');
+    assert.dom('.link-list-item__text').hasText('Storage Bucket');
+  });
+});