From 78392ff9b46288ae3f2a036e12e72a62ccdd3cd2 Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Date: Wed, 8 Mar 2023 10:02:42 -0800 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Add=20component=20si?= =?UTF-8?q?debar=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 @@ +
+ {{yield + (hash + body=(component 'rose/anonymous' class='layout-sidebar-body') + sidebar=(component 'rose/anonymous' class='layout-sidebar-sidebar') + ) + }} +
\ 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 @@ -

{{t 'resources.session-recording.title'}} - {{@model.session_recording_id}}

-

{{t 'resources.session-recording.channel.title'}} - {{@model.channel_connection_id}}

+ + +

+ {{t 'resources.session-recording.title'}} + {{@model.session_recording_id}} +

- - {{@model.channel_connection_id}} - +

+ {{t 'resources.session-recording.channel.title'}} + {{@model.channel_connection_id}} +

+ + + {{@model.channel_connection_id}} + + + + +

{{t 'actions.help'}}

+ + \ 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` + + Body content + Sidebar content + + `); + + 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'); + }); +}); From 634ec086f2fdd3a25a747a9097ee10b98d4ee780 Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Date: Wed, 8 Mar 2023 11:05:35 -0800 Subject: [PATCH 2/5] Delete sidebar inner styles --- ui/admin/app/styles/app.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss index fe37bd3ba..9bbe06c90 100644 --- a/ui/admin/app/styles/app.scss +++ b/ui/admin/app/styles/app.scss @@ -696,8 +696,6 @@ } .layout-sidebar-sidebar { - display: flex; - flex-direction: column; grid-area: sidebar; } } From bd3cfab5fdc16b5811f0d134d4e68f826a675c53 Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Date: Wed, 8 Mar 2023 11:39:47 -0800 Subject: [PATCH 3/5] Add media query to layour-sidebar, add grid gap and areas --- ui/admin/app/styles/app.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss index 9bbe06c90..f57df4d86 100644 --- a/ui/admin/app/styles/app.scss +++ b/ui/admin/app/styles/app.scss @@ -690,6 +690,9 @@ .layout-sidebar { display: grid; grid-template-areas: 'body body sidebar'; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: auto 1fr; + gap: 1em; .layout-sidebar-body { grid-area: body; @@ -699,3 +702,12 @@ grid-area: sidebar; } } + +@media (max-width: media.width(large)) { + .layout-sidebar { + grid-template-columns: 1fr; + grid-template-areas: + 'body' + 'sidebar'; + } +} From 6a5a27348b140b011fee4de3784418a1022d7fdf Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Date: Wed, 8 Mar 2023 11:42:38 -0800 Subject: [PATCH 4/5] Change unit of measurement --- ui/admin/app/styles/app.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss index f57df4d86..d7b5449d1 100644 --- a/ui/admin/app/styles/app.scss +++ b/ui/admin/app/styles/app.scss @@ -692,7 +692,7 @@ grid-template-areas: 'body body sidebar'; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr; - gap: 1em; + gap: 2rem; .layout-sidebar-body { grid-area: body; From 9f4e52153427ef599d0f3311632e2fd5de178e4f Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Date: Thu, 9 Mar 2023 09:34:16 -0800 Subject: [PATCH 5/5] Apply changes requested on PR --- .../components/layout/sidebar/body/index.hbs | 3 +++ .../app/components/layout/sidebar/index.hbs | 4 ++-- .../layout/sidebar/sidebar/index.hbs | 3 +++ .../session-recording/index.hbs | 8 ++++---- .../components/layout/sidebar-test.js | 4 ++-- .../components/layout/sidebar/body-test.js | 18 ++++++++++++++++++ .../components/layout/sidebar/sidebar-test.js | 18 ++++++++++++++++++ 7 files changed, 50 insertions(+), 8 deletions(-) create mode 100644 ui/admin/app/components/layout/sidebar/body/index.hbs create mode 100644 ui/admin/app/components/layout/sidebar/sidebar/index.hbs create mode 100644 ui/admin/tests/integration/components/layout/sidebar/body-test.js create mode 100644 ui/admin/tests/integration/components/layout/sidebar/sidebar-test.js diff --git a/ui/admin/app/components/layout/sidebar/body/index.hbs b/ui/admin/app/components/layout/sidebar/body/index.hbs new file mode 100644 index 000000000..d905ec2e1 --- /dev/null +++ b/ui/admin/app/components/layout/sidebar/body/index.hbs @@ -0,0 +1,3 @@ +
+ {{yield}} +
\ 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 index 4c5845023..8e66b15a7 100644 --- a/ui/admin/app/components/layout/sidebar/index.hbs +++ b/ui/admin/app/components/layout/sidebar/index.hbs @@ -1,8 +1,8 @@
{{yield (hash - body=(component 'rose/anonymous' class='layout-sidebar-body') - sidebar=(component 'rose/anonymous' class='layout-sidebar-sidebar') + Body=(component 'layout/sidebar/body') + Sidebar=(component 'layout/sidebar/sidebar') ) }}
\ 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 new file mode 100644 index 000000000..4c986569d --- /dev/null +++ b/ui/admin/app/components/layout/sidebar/sidebar/index.hbs @@ -0,0 +1,3 @@ +
+ {{yield}} +
\ No newline at end of file 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 ad5da6ffd..4bdc99323 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 @@ -5,7 +5,7 @@ - +

{{t 'resources.session-recording.title'}} {{@model.session_recording_id}} @@ -22,11 +22,11 @@ > {{@model.channel_connection_id}} - + - +

{{t 'actions.help'}}

- + \ 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 index c90c9a9c4..95a93d6d5 100644 --- a/ui/admin/tests/integration/components/layout/sidebar-test.js +++ b/ui/admin/tests/integration/components/layout/sidebar-test.js @@ -9,8 +9,8 @@ module('Integration | Component | layout/sidebar', function (hooks) { test('it renders', async function (assert) { await render(hbs` - Body content - Sidebar content + Body content + 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 new file mode 100644 index 000000000..837a29e59 --- /dev/null +++ b/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` + + template block text + + `); + + 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 new file mode 100644 index 000000000..ec42c3488 --- /dev/null +++ b/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` + + template block text + + `); + + assert.dom(this.element).hasText('template block text'); + }); +});