refactor: 💡 Refactor link list panel (#199)

* refactor: 💡 Refactor link list panel

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

@@ -1,16 +1,29 @@
-<li>
-  <LinkTo @route={{@route}} @model={{@model}} class='link-list-item'>
+<li class='link-list-item'>
+  {{#if @route}}
+    <LinkTo @route={{@route}} @model={{@model}}>
+      <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>
+
+      <FlightIcon @name='arrow-right' />
+    </LinkTo>
+  {{else}}
     <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='arrow-right' />
-    {{/if}}
-  </LinkTo>
+  {{/if}}
 </li>

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 {

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 =

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`
       <LinkListPanel as |P|>
         <P.Item @icon='cloud-upload' @text='Storage Bucket' @route='scopes.scope.storage-buckets'>
@@ -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`
+      <LinkListPanel as |P|>
+        <P.Item @icon='clock' @text='Storage Bucket'>
+          <Hds::Badge
+            @text='AWS S3'
+            @icon='aws-color'
+          />
+        </P.Item>
+      </LinkListPanel>
+    `);
+
+    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();
   });
 });