diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index 680e5c0fa..a96c0e70f 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/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:
diff --git a/ui/admin/app/components/link-list-panel/index.hbs b/ui/admin/app/components/link-list-panel/index.hbs
new file mode 100644
index 000000000..4ac7f4064
--- /dev/null
+++ b/ui/admin/app/components/link-list-panel/index.hbs
@@ -0,0 +1,16 @@
+
+
+ {{yield
+ (hash
+ Item=(component
+ 'link-list-panel/item'
+ icon=@icon
+ color=@color
+ text=@text
+ route=@route
+ model=@model
+ )
+ )
+ }}
+
+
\ No newline at end of file
diff --git a/ui/admin/app/components/link-list-panel/item/index.hbs b/ui/admin/app/components/link-list-panel/item/index.hbs
new file mode 100644
index 000000000..898cf91e3
--- /dev/null
+++ b/ui/admin/app/components/link-list-panel/item/index.hbs
@@ -0,0 +1,16 @@
+
+
+
+ {{#if @icon}}
+
+ {{/if}}
+
+
{{@text}}
+ {{yield}}
+
+
+ {{#if @route}}
+
+ {{/if}}
+
+
\ No newline at end of file
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index 99cf43f94..f2dba4b71 100644
--- a/ui/admin/app/styles/app.scss
+++ b/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;
diff --git a/ui/admin/app/templates/scopes/scope/targets/target/index.hbs b/ui/admin/app/templates/scopes/scope/targets/target/index.hbs
index f0ce80553..212d49bbc 100644
--- a/ui/admin/app/templates/scopes/scope/targets/target/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/targets/target/index.hbs
@@ -47,11 +47,28 @@
{{t 'resources.target.form.sidebar.help'}}
-
+ {{#if @model.storage_bucket_id}}
+
+
+
+
+
+ {{else}}
+
+ {{/if}}
{{/if}}
diff --git a/ui/admin/tests/integration/components/link-list-panel/index-test.js b/ui/admin/tests/integration/components/link-list-panel/index-test.js
new file mode 100644
index 000000000..dfaf42d10
--- /dev/null
+++ b/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`
+
+
+
+
+
+ `);
+
+ 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');
+ });
+});