diff --git a/ui/admin/app/components/link-list-panel/item/index.hbs b/ui/admin/app/components/link-list-panel/item/index.hbs
index c2eb34a6a..a7d185b5f 100644
--- a/ui/admin/app/components/link-list-panel/item/index.hbs
+++ b/ui/admin/app/components/link-list-panel/item/index.hbs
@@ -1,16 +1,29 @@
-
-
+
+ {{#if @route}}
+
+
+ {{#if @icon}}
+
+ {{/if}}
+
+
+
{{@text}}
+ {{yield}}
+
+
+
+
+
+ {{else}}
- {{#if @route}}
-
- {{/if}}
-
+ {{/if}}
\ No newline at end of file
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index 5a39244d9..5782cc7b9 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -674,15 +674,21 @@
.link-list-item {
display: flex;
align-items: center;
- justify-content: space-between;
padding: 1rem;
- text-decoration: none;
+
+ a {
+ text-decoration: none;
+ align-items: center;
+ display: flex;
+ width: 100%;
+ }
&__info {
display: flex;
+ width: 100%;
align-items: center;
- gap: 0.75rem;
margin-left: 0.25rem;
+ gap: 0.75rem;
}
&__text {
diff --git a/ui/admin/tests/acceptance/targets/enable-session-recording-test.js b/ui/admin/tests/acceptance/targets/enable-session-recording-test.js
index fee1bb1d1..e294c1c3c 100644
--- a/ui/admin/tests/acceptance/targets/enable-session-recording-test.js
+++ b/ui/admin/tests/acceptance/targets/enable-session-recording-test.js
@@ -23,7 +23,7 @@ module('Acceptance | targets | enable session recording', function (hooks) {
const SETTINGS_LINK_SELECTOR = '.target-sidebar .hds-link-standalone';
const ENABLE_BUTTON_SELECTOR = '.target-sidebar .hds-button';
const DROPDOWN_SELECTOR = '[name=storage_bucket_id]';
- const LINK_LIST_SELECTOR = '.link-list-item';
+ const LINK_LIST_SELECTOR = '.link-list-item > a';
const LINK_LIST_SELECTOR_ITEM_TEXT = '.link-list-item__text';
const TOGGLE_SELECTOR = '[name=target-enable-session-recording]';
const LINK_TO_NEW_STORAGE_BUCKET =
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
index c43cadf00..f7133e2f2 100644
--- a/ui/admin/tests/integration/components/link-list-panel/index-test.js
+++ b/ui/admin/tests/integration/components/link-list-panel/index-test.js
@@ -6,8 +6,8 @@ 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);
+ test('it renders with icons, text and yield content wrapped in a link, because @route is present', async function (assert) {
+ assert.expect(6);
await render(hbs`
@@ -24,5 +24,27 @@ module('Integration | Component | link-list-panel/index', function (hooks) {
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');
+ assert.dom('li.link-list-item > a').exists();
+ });
+
+ test('it renders with icons, text and yield content WITHOUT a link, because @route is not present.', async function (assert) {
+ assert.expect(6);
+ await render(hbs`
+
+
+
+
+
+ `);
+
+ assert.dom('[data-test-icon="clock"]').isVisible();
+ assert.dom('[data-test-icon="arrow-right"]').isNotVisible();
+ 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');
+ assert.dom('li.link-list-item > a').doesNotExist();
});
});