Icu 10439 refactor layout sidebar into rose layout body content (#1807)

* feat: 🎸 Add BodyContent component to Rose::Layout

* refactor: 💡 remove Layout Sidebar and use Rose Layout Sidebar

✅ Closes: ICU-10439

* fix: 🐛 add media specific styles to rose body content styles

* refactor: 💡 update media rule max width to xlarge

addons/rose/addon/components/rose/layout/body-content/index.hbs

@@ -0,0 +1,15 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<div ...attributes class='rose-layout-body-content'>
+  {{yield
+    (hash
+      Body=(component 'rose/anonymous' class='rose-layout-body-content-body')
+      Sidebar=(component
+        'rose/anonymous' class='rose-layout-body-content-sidebar'
+      )
+    )
+  }}
+</div>

addons/rose/addon/components/rose/layout/body-content/index.stories.mdx

@@ -0,0 +1,28 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs';
+import { hbs } from 'ember-cli-htmlbars';
+
+<Meta title="Rose/Layout/BodyContent" component="BodyContent" />
+
+# Layout|BodyContent
+
+A page layout/positioning component that allows two distinct sections to be configured: body and sidebar.
+
+```handlebars
+<Rose::Layout::BodyContent as |bc|>
+  <bc.Body />
+  <bc.Sidebar />
+</Rose::Layout::BodyContent>
+```
+
+<Preview>
+  <Story name="BodyContent">
+    {{
+      template: hbs`
+    <Rose::Layout::BodyContent as |bc|>
+      <bc.Body style="background: var(--brand-gray-4);">Body</bc.Body>
+      <bc.Sidebar style="background: var(--brand-gray-5);">Sidebar</bc.Sidebar>
+    </Rose::Layout::BodyContent>
+    `,
+    }}
+  </Story>
+</Preview>

addons/rose/app/components/rose/layout/body-content.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from 'rose/components/rose/layout/body-content';

addons/rose/app/styles/rose/components/layout/_body-content.scss

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+@use '../../variables/media';
+
+.rose-layout-body-content {
+  display: grid;
+  grid-template-areas: 'body body sidebar';
+  grid-template-columns: 1fr 1fr 300px;
+  grid-template-rows: auto 1fr;
+  gap: 2rem;
+
+  &-body {
+    grid-area: body;
+  }
+
+  &-sidebar {
+    grid-area: sidebar;
+  }
+}
+
+@media (max-width: media.width(xlarge)) {
+  .rose-layout-body-content {
+    grid-template-areas:
+      'body'
+      'sidebar';
+    grid-template-columns: auto;
+
+    &-body {
+      min-width: 0;
+    }
+
+    &-sidebar {
+      max-width: 300px;
+    }
+  }
+}

addons/rose/app/styles/rose/components/layout/_index.scss

@@ -9,6 +9,7 @@
 @import 'sidebar';
 @import 'page';
 @import 'centered';
+@import 'body-content';
 
 // TODO:  this is prescriptive and can be removed if it becomes a problem,
 // but used here reflects the fact that the "main" element, of which there

addons/rose/tests/integration/components/rose/layout/body-content-test.js

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | rose/layout/body-content', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Layout::BodyContent />`);
+
+    assert.dom('div').exists();
+    assert.dom('.rose-layout-body-content').isVisible();
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Layout::BodyContent id="body-content"/>`);
+
+    assert.dom('#body-content').isVisible();
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`<Rose::Layout::BodyContent as |bc|>
+      <bc.Body><button id="button" /></bc.Body>
+      <bc.Sidebar><p id="details">Resource Details</p></bc.Sidebar>
+    </Rose::Layout::BodyContent>`);
+
+    assert.dom('.rose-layout-body-content-body #button').isVisible();
+    assert.dom('.rose-layout-body-content-sidebar #details').isVisible();
+    assert
+      .dom('.rose-layout-body-content-sidebar #details')
+      .hasText('Resource Details');
+  });
+});

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

@@ -1,8 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<div class='layout-sidebar-body'>
-  {{yield}}
-</div>

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

@@ -1,13 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<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

@@ -1,8 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<div class='layout-sidebar-sidebar'>
-  {{yield}}
-</div>

ui/admin/app/styles/app.scss

@@ -870,42 +870,9 @@
   }
 }
 
-// Layout - Sidebar
-.layout-sidebar {
-  display: grid;
-  grid-template-areas: 'body body sidebar';
-  grid-template-columns: 1fr 1fr 300px;
-  grid-template-rows: auto 1fr;
-  gap: 2rem;
-
-  .layout-sidebar-body {
-    grid-area: body;
-  }
-
-  .layout-sidebar-sidebar {
-    grid-area: sidebar;
-
-    &-details {
-      margin-bottom: 3rem;
-    }
-  }
-}
-
-@media (max-width: media.width(large)) {
-  .layout-sidebar {
-    grid-template-areas:
-      'body'
-      'sidebar';
-    grid-template-columns: auto;
-
-    .layout-sidebar-body {
-      min-width: 0;
-    }
-
-    .layout-sidebar-sidebar {
-      max-width: 300px;
-    }
-  }
+// Session Recording sidebar details
+.rose-layout-body-content-sidebar .section-details {
+  margin-bottom: 3rem;
 }
 
 .ldap-read-only-fields .hds-form-field--layout-vertical {

ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs

@@ -28,14 +28,14 @@
   </page.header>
 
   <page.body>
-    <Layout::Sidebar as |sb|>
-      <sb.Body>
+    <Rose::Layout::BodyContent as |bc|>
+      <bc.Body>
         {{outlet}}
-      </sb.Body>
+      </bc.Body>
 
-      <sb.Sidebar>
+      <bc.Sidebar>
         {{! Channel details information }}
-        <div class='layout-sidebar-sidebar-details'>
+        <div class='section-details'>
           <h2>{{t 'resources.session-recording.channel.details'}}</h2>
           <MetadataList @orientation='vertical' as |list|>
             {{! Start time }}
@@ -158,7 +158,7 @@
             </list.Item>
           </LinkListPanel>
         </div>
-      </sb.Sidebar>
-    </Layout::Sidebar>
+      </bc.Sidebar>
+    </Rose::Layout::BodyContent>
   </page.body>
 </Rose::Layout::Page>

ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/index.hbs

@@ -14,8 +14,8 @@
 
   <page.body>
     <div class='channels-by-connection'>
-      <Layout::Sidebar as |sb|>
-        <sb.Body>
+      <Rose::Layout::BodyContent as |bc|>
+        <bc.Body>
           {{#if this.isSessionInprogressWithNoConnections}}
             <Hds::ApplicationState as |A|>
               {{! Session recording in progress with no connections }}
@@ -168,9 +168,9 @@
               {{/if}}
             {{/each}}
           {{/if}}
-        </sb.Body>
-        <sb.Sidebar>
-          <div class='layout-sidebar-sidebar-details'>
+        </bc.Body>
+        <bc.Sidebar>
+          <div class='section-details'>
             <h2>{{t 'resources.session-recording.details'}}</h2>
 
             <MetadataList @orientation='vertical' as |list|>
@@ -290,8 +290,8 @@
               </list.Item>
             </LinkListPanel>
           </div>
-        </sb.Sidebar>
-      </Layout::Sidebar>
+        </bc.Sidebar>
+      </Rose::Layout::BodyContent>
     </div>
   </page.body>
 </Rose::Layout::Page>

ui/admin/app/templates/scopes/scope/targets/target/index.hbs

@@ -22,16 +22,16 @@
   </page.actions>
 
   <page.body>
-    <Layout::Sidebar as |sb|>
-      <sb.Body>
+    <Rose::Layout::BodyContent as |bc|>
+      <bc.Body>
         <Form::Target
           @model={{@model}}
           @submit={{route-action 'saveWithAddress' @model}}
           @cancel={{route-action 'cancel' @model}}
         />
-      </sb.Body>
+      </bc.Body>
       {{#if (and @model.isSSH (feature-flag 'ssh-session-recording'))}}
-        <sb.Sidebar>
+        <bc.Sidebar>
           <div class='target-sidebar'>
             <h3>{{t 'resources.target.form.sidebar.label'}}</h3>
             <p class='description'>
@@ -66,9 +66,9 @@
               />
             {{/if}}
           </div>
-        </sb.Sidebar>
+        </bc.Sidebar>
       {{/if}}
-    </Layout::Sidebar>
+    </Rose::Layout::BodyContent>
 
   </page.body>
 

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

@@ -1,28 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-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

@@ -1,23 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-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

@@ -1,23 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-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');
-  });
-});