feat: 🎸 Add component sidebar in Admin UI

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

✅ Closes: ICU-8145

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>

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;
+  }
+}

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>

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');
+  });
+});