From 40cddd829ed1cb1af237fb84b2dbe4670bcaedec Mon Sep 17 00:00:00 2001
From: Carlos Alcaide Corvo <ccorvo@hashicorp.com>
Date: Tue, 18 Apr 2023 10:58:04 -0700
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20Refactor=20link=20li?=
 =?UTF-8?q?st=20panel=20(#199)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 💡 Refactor link list panel
---
 .../components/link-list-panel/item/index.hbs | 25 +++++++++++++-----
 ui/admin/app/styles/app.scss                  | 12 ++++++---
 .../targets/enable-session-recording-test.js  |  2 +-
 .../components/link-list-panel/index-test.js  | 26 +++++++++++++++++--
 4 files changed, 53 insertions(+), 12 deletions(-)

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 @@
-<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>
\ 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`
       <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();
   });
 });