From 78392ff9b46288ae3f2a036e12e72a62ccdd3cd2 Mon Sep 17 00:00:00 2001
From: Carlos Alcaide <ccorvo@hashicorp.com>
Date: Wed, 8 Mar 2023 10:02:42 -0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Add=20component=20sideba?=
 =?UTF-8?q?r=20in=20Admin=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add layout component sidebar in Admin UI and a view (Session recordings)
already using it

✅ Closes: ICU-8145
---
 .../app/components/layout/sidebar/index.hbs   |  8 +++++
 ui/admin/app/styles/app.scss                  | 15 +++++++++
 .../session-recording/index.hbs               | 33 +++++++++++++------
 .../components/layout/sidebar-test.js         | 23 +++++++++++++
 4 files changed, 69 insertions(+), 10 deletions(-)
 create mode 100644 ui/admin/app/components/layout/sidebar/index.hbs
 create mode 100644 ui/admin/tests/integration/components/layout/sidebar-test.js

diff --git a/ui/admin/app/components/layout/sidebar/index.hbs b/ui/admin/app/components/layout/sidebar/index.hbs
new file mode 100644
index 000000000..4c5845023
--- /dev/null
+++ b/ui/admin/app/components/layout/sidebar/index.hbs
@@ -0,0 +1,8 @@
+<div ...attributes class='layout-sidebar'>
+  {{yield
+    (hash
+      body=(component 'rose/anonymous' class='layout-sidebar-body')
+      sidebar=(component 'rose/anonymous' class='layout-sidebar-sidebar')
+    )
+  }}
+</div>
\ No newline at end of file
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index 1f305e001..fe37bd3ba 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -686,3 +686,18 @@
   }
   /* stylelint-enable selector-class-pattern */
 }
+
+.layout-sidebar {
+  display: grid;
+  grid-template-areas: 'body body sidebar';
+
+  .layout-sidebar-body {
+    grid-area: body;
+  }
+
+  .layout-sidebar-sidebar {
+    display: flex;
+    flex-direction: column;
+    grid-area: sidebar;
+  }
+}
diff --git a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/index.hbs b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/index.hbs
index 981e709ba..ad5da6ffd 100644
--- a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/index.hbs
@@ -4,16 +4,29 @@
   </page.header>
 
   <page.body>
-    <p>{{t 'resources.session-recording.title'}}
-      {{@model.session_recording_id}}</p>
-    <p>{{t 'resources.session-recording.channel.title'}}
-      {{@model.channel_connection_id}}</p>
+    <Layout::Sidebar as |sb|>
+      <sb.body>
+        <p>
+          {{t 'resources.session-recording.title'}}
+          {{@model.session_recording_id}}
+        </p>
 
-    <LinkTo
-      @route='scopes.scope.session-recordings.session-recording.channels-by-connection.channel'
-      @model={{@model.channel_connection_id}}
-    >
-      {{@model.channel_connection_id}}
-    </LinkTo>
+        <p>
+          {{t 'resources.session-recording.channel.title'}}
+          {{@model.channel_connection_id}}
+        </p>
+
+        <LinkTo
+          @route='scopes.scope.session-recordings.session-recording.channels-by-connection.channel'
+          @model={{@model.channel_connection_id}}
+        >
+          {{@model.channel_connection_id}}
+        </LinkTo>
+      </sb.body>
+
+      <sb.sidebar>
+        <p>{{t 'actions.help'}}</p>
+      </sb.sidebar>
+    </Layout::Sidebar>
   </page.body>
 </Rose::Layout::Page>
\ No newline at end of file
diff --git a/ui/admin/tests/integration/components/layout/sidebar-test.js b/ui/admin/tests/integration/components/layout/sidebar-test.js
new file mode 100644
index 000000000..c90c9a9c4
--- /dev/null
+++ b/ui/admin/tests/integration/components/layout/sidebar-test.js
@@ -0,0 +1,23 @@
+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 | layout/sidebar', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`
+      <Layout::Sidebar as |sb|>
+        <sb.body>Body content</sb.body>
+        <sb.sidebar>Sidebar content</sb.sidebar>
+      </Layout::Sidebar>
+    `);
+
+    assert.dom('.layout-sidebar').isVisible();
+    assert.dom('.layout-sidebar-body').isVisible();
+    assert.dom('.layout-sidebar-body').hasText('Body content');
+    assert.dom('.layout-sidebar-sidebar').isVisible();
+    assert.dom('.layout-sidebar-sidebar').hasText('Sidebar content');
+  });
+});