diff --git a/addons/api/addon/adapters/role.js b/addons/api/addon/adapters/role.js new file mode 100644 index 000000000..c9b0c13b0 --- /dev/null +++ b/addons/api/addon/adapters/role.js @@ -0,0 +1,14 @@ +import ApplicationAdapter from './application'; +import ScopeAdapterMixin from '../mixins/scope-adapter'; + +export default class RoleAdapter extends ApplicationAdapter.extend( + ScopeAdapterMixin +) { + // =attributes + + /** + * Role is scoped to org only, for now. + * @type {boolean} + */ + includeProject = false; +} diff --git a/addons/api/app/adapters/role.js b/addons/api/app/adapters/role.js new file mode 100644 index 000000000..f12325923 --- /dev/null +++ b/addons/api/app/adapters/role.js @@ -0,0 +1 @@ +export { default } from 'api/adapters/role'; diff --git a/addons/api/tests/unit/adapters/role-test.js b/addons/api/tests/unit/adapters/role-test.js new file mode 100644 index 000000000..adb7b1abd --- /dev/null +++ b/addons/api/tests/unit/adapters/role-test.js @@ -0,0 +1,16 @@ +import { module, test } from 'qunit'; +import { setupTest } from 'ember-qunit'; +import config from 'ember-get-config'; + +module('Unit | Adapter | role', function(hooks) { + setupTest(hooks); + + test('it generates URL prefixes without project scope', function (assert) { + assert.expect(1); + const service = this.owner.lookup('service:scope'); + service.org = { id: 1 }; + service.project = { id: 2 }; + const adapter = this.owner.lookup('adapter:role'); + assert.equal(adapter.urlPrefix(), `${config.api.namespace}/orgs/1`); + }); +}); diff --git a/addons/rose/addon/components/rose/layout/global.stories.mdx b/addons/rose/addon/components/rose/layout/global.stories.mdx index a56e928b9..9b8e34ea4 100644 --- a/addons/rose/addon/components/rose/layout/global.stories.mdx +++ b/addons/rose/addon/components/rose/layout/global.stories.mdx @@ -7,12 +7,12 @@ import { text, boolean, select } from '@storybook/addon-knobs'; # Layout|Global -A top-level layout/positioning component that allows three distinct sections to be configured: header, navigation, and body. +A top-level layout/positioning component that allows two distinct sections to +be configured: header and body. ```htmlbars - ``` @@ -22,7 +22,6 @@ A top-level layout/positioning component that allows three distinct sections to template: hbs` Header - Sidebar Body `, diff --git a/addons/rose/addon/components/rose/layout/sidebar.js b/addons/rose/addon/components/rose/layout/sidebar.js new file mode 100644 index 000000000..b58f2003a --- /dev/null +++ b/addons/rose/addon/components/rose/layout/sidebar.js @@ -0,0 +1,7 @@ +import Component from '@ember/component'; +import layout from '../../../templates/components/rose/layout/sidebar'; + +export default Component.extend({ + layout, + tagName: '', +}); diff --git a/addons/rose/addon/components/rose/layout/sidebar.stories.mdx b/addons/rose/addon/components/rose/layout/sidebar.stories.mdx new file mode 100644 index 000000000..c24f82584 --- /dev/null +++ b/addons/rose/addon/components/rose/layout/sidebar.stories.mdx @@ -0,0 +1,33 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; +import { hbs } from 'ember-cli-htmlbars'; +import { action } from '@storybook/addon-actions'; +import { text, boolean, select } from '@storybook/addon-knobs'; + + + +# Layout|Sidebar + +A top-level layout/positioning component that allows two distinct sections to +be configured: sidebar and body. + +```htmlbars + + + sidebar content + + + body content + + +``` + + + {{ + template: hbs` + + Body + Sidebar + + `, + }} + diff --git a/addons/rose/addon/styles/rose/components/layout/_global.scss b/addons/rose/addon/styles/rose/components/layout/_global.scss index 894f83410..d9b9b771a 100644 --- a/addons/rose/addon/styles/rose/components/layout/_global.scss +++ b/addons/rose/addon/styles/rose/components/layout/_global.scss @@ -1,39 +1,10 @@ -@use '../../variables/sizing'; -@use '../../variables/media'; - .rose-layout-global { - display: grid; - grid-template-areas: - 'header header header header' - 'navigation body body body'; - // Define 16rem static grid column for navigation - grid-template-columns: (sizing.rems(m) * 16) auto 1fr; - grid-template-rows: auto 1fr; - height: 100vh; + min-height: 100vh; + display: flex; + flex-direction: column; .rose-layout-global-body { - grid-area: body; - padding: sizing.rems(l); - } - - .rose-layout-global-header { - grid-area: header; - } - - .rose-layout-global-sidebar { - grid-area: navigation; - border-right: sizing.rems(xxxxs) solid var(--ui-border-subtler-1); - } -} - -@media (max-width: media.width(small)) { - .rose-layout-global { - grid-template-columns: 1fr; - grid-template-rows: 0.1fr auto 1fr; - grid-template-areas: - 'header' - 'navigation' - 'body'; - padding-bottom: 0; + flex: 1; + display: flex; } } diff --git a/addons/rose/addon/styles/rose/components/layout/_index.scss b/addons/rose/addon/styles/rose/components/layout/_index.scss index 1ed6d8338..5afb56808 100644 --- a/addons/rose/addon/styles/rose/components/layout/_index.scss +++ b/addons/rose/addon/styles/rose/components/layout/_index.scss @@ -1,3 +1,13 @@ +@use '../../variables/sizing'; + @import 'global'; +@import 'sidebar'; @import 'page'; @import 'centered'; + +// 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 +// can only be one per page, generally has padding in Structure layouts. +main { + padding: sizing.rems(l); +} diff --git a/addons/rose/addon/styles/rose/components/layout/_sidebar.scss b/addons/rose/addon/styles/rose/components/layout/_sidebar.scss new file mode 100644 index 000000000..e5cc54668 --- /dev/null +++ b/addons/rose/addon/styles/rose/components/layout/_sidebar.scss @@ -0,0 +1,27 @@ +@use '../../variables/sizing'; +@use '../../variables/media'; + +.rose-layout-sidebar { + --sidebar-width: #{sizing.rems(m) * 16}; + display: flex; + flex-grow: 1; + + .rose-layout-sidebar-body { + flex: 1; + } + + .rose-layout-sidebar-sidebar { + width: var(--sidebar-width); + border-right: sizing.rems(xxxxs) solid var(--ui-border-subtler-1); + } +} + +@media (max-width: media.width(small)) { + .rose-layout-sidebar { + flex-direction: column; + + .rose-layout-sidebar-sidebar { + width: auto; + } + } +} diff --git a/addons/rose/addon/templates/components/rose/layout/global.hbs b/addons/rose/addon/templates/components/rose/layout/global.hbs index 5f516ec80..bfa2c8e75 100644 --- a/addons/rose/addon/templates/components/rose/layout/global.hbs +++ b/addons/rose/addon/templates/components/rose/layout/global.hbs @@ -1,7 +1,6 @@ -
+
{{yield (hash header=(component "rose/anonymous" tagName="header" class="rose-layout-global-header") - sidebar=(component "rose/anonymous" tagName="aside" class="rose-layout-global-sidebar") - body=(component "rose/anonymous" tagName="main" class="rose-layout-global-body") + body=(component "rose/anonymous" class="rose-layout-global-body") )}} -
+ diff --git a/addons/rose/addon/templates/components/rose/layout/sidebar.hbs b/addons/rose/addon/templates/components/rose/layout/sidebar.hbs new file mode 100644 index 000000000..6bfb342e4 --- /dev/null +++ b/addons/rose/addon/templates/components/rose/layout/sidebar.hbs @@ -0,0 +1,6 @@ +
+ {{yield (hash + body=(component "rose/anonymous" class="rose-layout-sidebar-body") + sidebar=(component "rose/anonymous" tagName="aside" class="rose-layout-sidebar-sidebar") + )}} +
diff --git a/addons/rose/app/components/rose/layout/sidebar.js b/addons/rose/app/components/rose/layout/sidebar.js new file mode 100644 index 000000000..f078ea1c6 --- /dev/null +++ b/addons/rose/app/components/rose/layout/sidebar.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/layout/sidebar'; \ No newline at end of file diff --git a/addons/rose/tests/dummy/app/templates/playground.hbs b/addons/rose/tests/dummy/app/templates/playground.hbs index 8f7d026b4..cf74a1e48 100644 --- a/addons/rose/tests/dummy/app/templates/playground.hbs +++ b/addons/rose/tests/dummy/app/templates/playground.hbs @@ -30,274 +30,24 @@ - - - Item Name - Item Name - Item Name - Item Name - - - - - Breadcrumbs - Header - Navigation - Actions - Body - - Dummy app index template + + + + + Item Name + Item Name + Item Name + Item Name + + - - Menu item - Menu item - Button menu item - + + Body content + - - An error occurred. - + -

Icon

- - - - -

Button

- Primary -
- Primary -
- - Secondary -
- Secondary -
- -

Form

- - -

Inputs

- - - - - -

Textareas

- - - - - -

Selects

- - - Choose an option - Value 1 - Value 2 - Value 3 - - - - - Choose an option - - - - -

Radio Group

- - - - - - -

Checkboxes

- - - - - - - - - - - - - - - - - Address - Host Set - Name - Description - - - - - 1.1.1.1 - host-set-1, host-set-2 - optional name - description - - - - - Footer - - - - - - Level 1 - Level 2 - Level 3 - Level 4 - Level 5 - - - - - You must be granted permissions to view this data. - Ask your administrator if you think you should have access. - - - - Go back - - Need help? - - - - - Sorry, we couldn't find the page you were looking for. You can go back or to one of the links below. - - - - Go back - - Need help? - - - - - We ran into a problem and could not continue. You can ask your administrator or try again later. - - - - Try Again - - Need help? - - - - - Your logs will appear here when we start receiving them. If your server is currently outputting logs, check your configuration. - - - - - - Namespaces allow you to create distinct areas with their own separate policies, mounts, tokens, and identity entities. - - Add a namespace - - - - - - Namespaces allow you to create distinct areas with their own separate policies, mounts, tokens, and identity entities. - - Add a namespace - - diff --git a/addons/rose/tests/integration/components/rose/layout/global-test.js b/addons/rose/tests/integration/components/rose/layout/global-test.js index 0b262991e..2e6b91039 100644 --- a/addons/rose/tests/integration/components/rose/layout/global-test.js +++ b/addons/rose/tests/integration/components/rose/layout/global-test.js @@ -8,7 +8,7 @@ module('Integration | Component | rose/layout/global', function (hooks) { test('it renders', async function (assert) { await render(hbs``); - assert.ok(find('div')); + assert.ok(find('section')); assert.ok(find('.rose-layout-global')); }); @@ -17,13 +17,6 @@ module('Integration | Component | rose/layout/global', function (hooks) { assert.ok(find('#global')); }); - test('it renders with content', async function (assert) { - await render(hbs` -