From 6dee7cad620c6e58ea0c05a7e550085818760f25 Mon Sep 17 00:00:00 2001
From: Cameron Perera <cameron.perera@hashicorp.com>
Date: Mon, 31 Jul 2023 11:48:38 -0500
Subject: [PATCH] Icu 10439 refactor layout sidebar into rose layout body
 content (#1807)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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
---
 .../rose/layout/body-content/index.hbs        | 15 +++++++
 .../layout/body-content/index.stories.mdx     | 28 +++++++++++++
 .../components/rose/layout/body-content.js    |  6 +++
 .../rose/components/layout/_body-content.scss | 39 +++++++++++++++++++
 .../styles/rose/components/layout/_index.scss |  1 +
 .../rose/layout/body-content-test.js          | 39 +++++++++++++++++++
 .../components/layout/sidebar/body/index.hbs  |  8 ----
 .../app/components/layout/sidebar/index.hbs   | 13 -------
 .../layout/sidebar/sidebar/index.hbs          |  8 ----
 ui/admin/app/styles/app.scss                  | 39 ++-----------------
 .../channels-by-connection/channel.hbs        | 14 +++----
 .../channels-by-connection/index.hbs          | 14 +++----
 .../scopes/scope/targets/target/index.hbs     | 12 +++---
 .../components/layout/sidebar-test.js         | 28 -------------
 .../components/layout/sidebar/body-test.js    | 23 -----------
 .../components/layout/sidebar/sidebar-test.js | 23 -----------
 16 files changed, 151 insertions(+), 159 deletions(-)
 create mode 100644 addons/rose/addon/components/rose/layout/body-content/index.hbs
 create mode 100644 addons/rose/addon/components/rose/layout/body-content/index.stories.mdx
 create mode 100644 addons/rose/app/components/rose/layout/body-content.js
 create mode 100644 addons/rose/app/styles/rose/components/layout/_body-content.scss
 create mode 100644 addons/rose/tests/integration/components/rose/layout/body-content-test.js
 delete mode 100644 ui/admin/app/components/layout/sidebar/body/index.hbs
 delete mode 100644 ui/admin/app/components/layout/sidebar/index.hbs
 delete mode 100644 ui/admin/app/components/layout/sidebar/sidebar/index.hbs
 delete mode 100644 ui/admin/tests/integration/components/layout/sidebar-test.js
 delete mode 100644 ui/admin/tests/integration/components/layout/sidebar/body-test.js
 delete mode 100644 ui/admin/tests/integration/components/layout/sidebar/sidebar-test.js

diff --git a/addons/rose/addon/components/rose/layout/body-content/index.hbs b/addons/rose/addon/components/rose/layout/body-content/index.hbs
new file mode 100644
index 000000000..0e991d4a2
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/addons/rose/addon/components/rose/layout/body-content/index.stories.mdx b/addons/rose/addon/components/rose/layout/body-content/index.stories.mdx
new file mode 100644
index 000000000..61bdb18f0
--- /dev/null
+++ b/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>
diff --git a/addons/rose/app/components/rose/layout/body-content.js b/addons/rose/app/components/rose/layout/body-content.js
new file mode 100644
index 000000000..26e6aa668
--- /dev/null
+++ b/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';
diff --git a/addons/rose/app/styles/rose/components/layout/_body-content.scss b/addons/rose/app/styles/rose/components/layout/_body-content.scss
new file mode 100644
index 000000000..0195535af
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/addons/rose/app/styles/rose/components/layout/_index.scss b/addons/rose/app/styles/rose/components/layout/_index.scss
index 90850feb2..da27bc743 100644
--- a/addons/rose/app/styles/rose/components/layout/_index.scss
+++ b/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
diff --git a/addons/rose/tests/integration/components/rose/layout/body-content-test.js b/addons/rose/tests/integration/components/rose/layout/body-content-test.js
new file mode 100644
index 000000000..5a704bfb0
--- /dev/null
+++ b/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');
+  });
+});
diff --git a/ui/admin/app/components/layout/sidebar/body/index.hbs b/ui/admin/app/components/layout/sidebar/body/index.hbs
deleted file mode 100644
index 552d2f4be..000000000
--- a/ui/admin/app/components/layout/sidebar/body/index.hbs
+++ /dev/null
@@ -1,8 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<div class='layout-sidebar-body'>
-  {{yield}}
-</div>
\ No newline at end of file
diff --git a/ui/admin/app/components/layout/sidebar/index.hbs b/ui/admin/app/components/layout/sidebar/index.hbs
deleted file mode 100644
index c9059058f..000000000
--- a/ui/admin/app/components/layout/sidebar/index.hbs
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/ui/admin/app/components/layout/sidebar/sidebar/index.hbs b/ui/admin/app/components/layout/sidebar/sidebar/index.hbs
deleted file mode 100644
index 3672027f4..000000000
--- a/ui/admin/app/components/layout/sidebar/sidebar/index.hbs
+++ /dev/null
@@ -1,8 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<div class='layout-sidebar-sidebar'>
-  {{yield}}
-</div>
\ No newline at end of file
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index 0ba3769da..35d387618 100644
--- a/ui/admin/app/styles/app.scss
+++ b/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 {
diff --git a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs
index 0832bc903..67c68c889 100644
--- a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs
+++ b/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>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/index.hbs b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/index.hbs
index 34295efaf..de2816197 100644
--- a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/index.hbs
+++ b/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>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/targets/target/index.hbs b/ui/admin/app/templates/scopes/scope/targets/target/index.hbs
index bd19b42d5..e198a88c8 100644
--- a/ui/admin/app/templates/scopes/scope/targets/target/index.hbs
+++ b/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>
 
diff --git a/ui/admin/tests/integration/components/layout/sidebar-test.js b/ui/admin/tests/integration/components/layout/sidebar-test.js
deleted file mode 100644
index 701ec2805..000000000
--- a/ui/admin/tests/integration/components/layout/sidebar-test.js
+++ /dev/null
@@ -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');
-  });
-});
diff --git a/ui/admin/tests/integration/components/layout/sidebar/body-test.js b/ui/admin/tests/integration/components/layout/sidebar/body-test.js
deleted file mode 100644
index 185619175..000000000
--- a/ui/admin/tests/integration/components/layout/sidebar/body-test.js
+++ /dev/null
@@ -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');
-  });
-});
diff --git a/ui/admin/tests/integration/components/layout/sidebar/sidebar-test.js b/ui/admin/tests/integration/components/layout/sidebar/sidebar-test.js
deleted file mode 100644
index 3d5bd47c8..000000000
--- a/ui/admin/tests/integration/components/layout/sidebar/sidebar-test.js
+++ /dev/null
@@ -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');
-  });
-});