Merge pull request #110 from hashicorp/feat-ICU-8145-component-sidebar

feat: 🎸 Add component sidebar in Admin UI

ui/admin/app/components/layout/sidebar/body/index.hbs

@@ -0,0 +1,3 @@
+<div class='layout-sidebar-body'>
+  {{yield}}
+</div>

ui/admin/app/components/layout/sidebar/index.hbs

@@ -0,0 +1,8 @@
+<div ...attributes class='layout-sidebar'>
+  {{yield
+    (hash
+      Body=(component 'layout/sidebar/body')
+      Sidebar=(component 'layout/sidebar/sidebar')
+    )
+  }}
+</div>

ui/admin/app/components/layout/sidebar/sidebar/index.hbs

@@ -0,0 +1,3 @@
+<div class='layout-sidebar-sidebar'>
+  {{yield}}
+</div>

ui/admin/app/styles/app.scss

@@ -686,3 +686,28 @@
   }
   /* stylelint-enable selector-class-pattern */
 }
+
+.layout-sidebar {
+  display: grid;
+  grid-template-areas: 'body body sidebar';
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: auto 1fr;
+  gap: 2rem;
+
+  .layout-sidebar-body {
+    grid-area: body;
+  }
+
+  .layout-sidebar-sidebar {
+    grid-area: sidebar;
+  }
+}
+
+@media (max-width: media.width(large)) {
+  .layout-sidebar {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      'body'
+      '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');
+  });
+});

ui/admin/tests/integration/components/layout/sidebar/body-test.js

@@ -0,0 +1,18 @@
+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/body', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`
+      <Layout::Sidebar::Body>
+        template block text
+      </Layout::Sidebar::Body>
+    `);
+
+    assert.dom(this.element).hasText('template block text');
+  });
+});

ui/admin/tests/integration/components/layout/sidebar/sidebar-test.js

@@ -0,0 +1,18 @@
+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/sidebar', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`
+      <Layout::Sidebar::Sidebar>
+        template block text
+      </Layout::Sidebar::Sidebar>
+    `);
+
+    assert.dom(this.element).hasText('template block text');
+  });
+});