CyberCoveLLC/threshold-ui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #64 from hashicorp/ICU-348-roles-crud

Browse Source 
Add roles basic CRUD workflows
This commit is contained in:
Randall Morey authored and GitHub committed 2020-06-24 16:09:33 -04:00
2 parents 16b5b4d0f9 51b16935c6
commit f5d40ffe96
47 files changed
+857 -326
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

addons/api/addon/adapters/role.js
+14
View File
@@ -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;
}
addons/api/app/adapters/role.js
+1
View File
@@ -0,0 +1 @@
export { default } from 'api/adapters/role';
addons/api/tests/unit/adapters/role-test.js
+16
View File
@@ -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`);
});
});
addons/rose/addon/components/rose/layout/global.stories.mdx
+2 -3
View File
@@ -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
<Rose::Layout::Global as |layout|>
<layout.header />
<layout.sidebar />
<layout.body />
</Rose::Layout::Global>
```
@@ -22,7 +22,6 @@ A top-level layout/positioning component that allows three distinct sections to
template: hbs`
<Rose::Layout::Global as |layout|>
<layout.header style="background: var(--brand-gray-5);">Header</layout.header>
<layout.sidebar style="background: var(--brand-gray-6);">Sidebar</layout.sidebar>
<layout.body style="background: var(--brand-gray-7);">Body</layout.body>
</Rose::Layout::Global>
`,
addons/rose/addon/components/rose/layout/sidebar.js
+7
View File
@@ -0,0 +1,7 @@
import Component from '@ember/component';
import layout from '../../../templates/components/rose/layout/sidebar';
export default Component.extend({
layout,
tagName: '',
});
addons/rose/addon/components/rose/layout/sidebar.stories.mdx
+33
View File
@@ -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';
<Meta title="Rose|Layout|Sidebar" component="SidebarLayout" />
# Layout|Sidebar
A top-level layout/positioning component that allows two distinct sections to
be configured: sidebar and body.
```htmlbars
<Rose::Layout::Sidebar as |layout|>
<layout.sidebar>
sidebar content
</layout.sidebar>
<layout.body>
body content
</layout.body>
</Rose::Layout::Sidebar>
```
<Preview>
<Story name="SidebarLayout">{{
template: hbs`
<Rose::Layout::Sidebar as |layout|>
<layout.sidebar style="background: var(--brand-gray-7);">Body</layout.sidebar>
<layout.body style="background: var(--brand-gray-5);">Sidebar</layout.body>
</Rose::Layout::Sidebar>
`,
}}</Story>
</Preview>
addons/rose/addon/styles/rose/components/layout/_global.scss
+5 -34
View File
@@ -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;
}
}
addons/rose/addon/styles/rose/components/layout/_index.scss
+10
View File
@@ -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);
}
addons/rose/addon/styles/rose/components/layout/_sidebar.scss
+27
View File
@@ -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;
}
}
}
addons/rose/addon/templates/components/rose/layout/global.hbs
+3 -4
View File
@@ -1,7 +1,6 @@
<div ...attributes class="rose-layout-global">
<section ...attributes class="rose-layout-global">
{{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")
)}}
</div>
</section>
addons/rose/addon/templates/components/rose/layout/sidebar.hbs
+6
View File
@@ -0,0 +1,6 @@
<div ...attributes class="rose-layout-sidebar">
{{yield (hash
body=(component "rose/anonymous" class="rose-layout-sidebar-body")
sidebar=(component "rose/anonymous" tagName="aside" class="rose-layout-sidebar-sidebar")
)}}
</div>
addons/rose/app/components/rose/layout/sidebar.js
+1
View File
@@ -0,0 +1 @@
export { default } from 'rose/components/rose/layout/sidebar';
addons/rose/tests/dummy/app/templates/playground.hbs
+14 -264
View File
@@ -30,274 +30,24 @@
</Rose::Header>
</layout.header>
<layout.sidebar>
<Rose::Nav::Sidebar @title="Title" as |nav|>
<nav.link @route="index">Item Name</nav.link>
<nav.link @route="about">Item Name</nav.link>
<nav.link @route="about">Item Name</nav.link>
<nav.link @route="about">Item Name</nav.link>
</Rose::Nav::Sidebar>
</layout.sidebar>
<layout.body>
<Rose::Layout::Page as |page|>
<page.breadcrumbs>Breadcrumbs</page.breadcrumbs>
<page.header>Header</page.header>
<page.navigation>Navigation</page.navigation>
<page.actions>Actions</page.actions>
<page.body>Body</page.body>
</Rose::Layout::Page>
Dummy app index template
<Rose::Layout::Sidebar as |layout|>
<layout.sidebar>
<Rose::Nav::Sidebar @title="Title" as |nav|>
<nav.link @route="index">Item Name</nav.link>
<nav.link @route="about">Item Name</nav.link>
<nav.link @route="about">Item Name</nav.link>
<nav.link @route="about">Item Name</nav.link>
</Rose::Nav::Sidebar>
</layout.sidebar>
<Rose::Dropdown @text="Choose One&hellip;" as |dropdown|>
<dropdown.link @route="index">Menu item</dropdown.link>
<dropdown.link @route="about">Menu item</dropdown.link>
<dropdown.button>Button menu item</dropdown.button>
</Rose::Dropdown>
<layout.body @tagName="main">
Body content
</layout.body>
<Rose::Notification
@style="error"
@heading="Error"
@dismiss={{this.actionHandler}}
@dismissText="Dismiss"
>
An error occurred.
</Rose::Notification>
</Rose::Layout::Sidebar>
<h2>Icon</h2>
<Rose::Icon @name="alert-circle-fill" />
<Rose::Icon @name="alert-circle-fill" @size="medium" />
<Rose::Icon @name="alert-circle-fill" @size="small" />
<h2>Button</h2>
<Rose::Button @style="primary">Primary</Rose::Button>
<br>
<Rose::Button @style="primary" @disabled={{true}}>Primary</Rose::Button>
<br>
<Rose::Button @style="secondary">Secondary</Rose::Button>
<br>
<Rose::Button @style="secondary" @disabled={{true}}>Secondary</Rose::Button>
<br>
<h2>Form</h2>
<Rose::Form
@onSubmit={{this.actionHandler}}
@cancel={{this.actionHandler}}
@disabled={{false}}
as |form|
>
<h3>Inputs</h3>
<form.input
@label="Label"
@value="Read only"
readonly={{true}}
/>
<form.input
@label="Label"
@helperText="Helper text"
@value="Text"
/>
<form.input
@label="Label"
@helperText="Helper text"
@value="Text"
@error={{true}}
/>
<form.input
@label="Label"
@helperText="Helper text"
@value="Text"
disabled={{true}}
/>
<h3>Textareas</h3>
<form.textarea
@label="Label"
@value="Read only"
readonly={{true}}
/>
<form.textarea
@label="Label"
@helperText="Helper text"
@value="Text"
/>
<form.textarea
@label="Label"
@helperText="Helper text"
@value="Text"
@error={{true}}
/>
<form.textarea
@label="Label"
@helperText="Helper text"
@value="Text"
disabled={{true}}
/>
<h3>Selects</h3>
<form.select
@label="Label"
@helperText="Helper text"
@onChange={{fn this.actionHandler}}
as |field|
>
<field.field as |select|>
<select.option>Choose an option</select.option>
<select.option @value="value-1">Value 1</select.option>
<select.option @value="value-2">Value 2</select.option>
<select.option @value="value-3">Value 3</select.option>
</field.field>
</form.select>
<form.select
@label="Label"
@helperText="Helper text"
@onChange={{fn this.actionHandler}}
as |field|
>
<field.field as |select|>
<select.option>Choose an option</select.option>
</field.field>
</form.select>
<h3>Radio Group</h3>
<form.radioGroup @name="color" @selectedValue={{this.color}} as |radioGroup|>
<radioGroup.radio
@label="Red"
@value="red"
/>
<radioGroup.radio
@label="Green"
@value="green"
/>
<radioGroup.radio
@label="Blue"
@value="blue"
@disabled={{true}}
/>
</form.radioGroup>
<h3>Checkboxes</h3>
<form.checkbox
@label="Label"
/>
<form.checkbox
@error={{true}}
@label="Error"
/>
<form.checkbox
@checked={{true}}
@label="Checked"
/>
<form.checkbox
@label="Disabled"
disabled={{true}}
/>
<form.checkbox
@checked={{true}}
@label="Disabled + Checked"
disabled={{true}}
/>
<form.actions
@submitText="Save"
@cancelText="Cancel" />
</Rose::Form>
<Rose::Card::Link @title="I'm a card" />
<Rose::Card::Link @title="I'm a card" @description="I'm a description" />
<Rose::Card::Link @title="I'm a card" @description="I'm a description" @subtitle="I'm a subtitle"/>
<Rose::Table as |table|>
<table.header as |header|>
<header.row as |row|>
<row.cell>Address</row.cell>
<row.cell>Host Set</row.cell>
<row.cell>Name</row.cell>
<row.cell>Description</row.cell>
</header.row>
</table.header>
<table.body as |body|>
<body.row as |row|>
<row.cell>1.1.1.1</row.cell>
<row.cell>host-set-1, host-set-2</row.cell>
<row.cell>optional name</row.cell>
<row.cell>description</row.cell>
</body.row>
</table.body>
<table.footer as |footer|>
<footer.row as |row|>
<row.cell>Footer</row.cell>
</footer.row>
</table.footer>
</Rose::Table>
<Rose::Nav::Breadcrumbs as |breadcrumbs|>
<breadcrumbs.link @route="about">Level 1</breadcrumbs.link>
<breadcrumbs.link @route="index">Level 2</breadcrumbs.link>
<breadcrumbs.link @route="about">Level 3</breadcrumbs.link>
<breadcrumbs.link @route="about">Level 4</breadcrumbs.link>
<breadcrumbs.link @route="about">Level 5</breadcrumbs.link>
</Rose::Nav::Breadcrumbs>
<Rose::Message @title="You are not authorized" @subtitle="Error 403" @icon="disabled" as |message|>
<message.description>
You must be granted permissions to view this data.
Ask your administrator if you think you should have access.
</message.description>
<message.link @route="index">
<Rose::Icon @name="chevron-left" />
Go back
</message.link>
<message.link @route="index">Need help?</message.link>
</Rose::Message>
<Rose::Message @title="Page Not Found" @subtitle="Error 404" @icon="help-circle-outline" as |message|>
<message.description>
Sorry, we couldn't find the page you were looking for. You can go back or to one of the links below.
</message.description>
<message.link @route="index">
<Rose::Icon @name="chevron-left" />
Go back
</message.link>
<message.link @route="index">Need help?</message.link>
</Rose::Message>
<Rose::Message @title="Something went wrong" @subtitle="Error 500" @icon="alert-circle-outline" as |message|>
<message.description>
We ran into a problem and could not continue. You can ask your administrator or try again later.
</message.description>
<message.link @route="index">
<Rose::Icon @name="refresh-default" />
Try Again
</message.link>
<message.link @route="index">Need help?</message.link>
</Rose::Message>
<Rose::Message @title="No logs received yet" as |message|>
<message.description>
Your logs will appear here when we start receiving them. If your server is currently outputting logs, check your configuration.
</message.description>
</Rose::Message>
<Rose::Message @title="Welcome to Namespaces" as |message|>
<message.description>
Namespaces allow you to create distinct areas with their own separate policies, mounts, tokens, and identity entities.
</message.description>
<message.link @route="index">Add a namespace</message.link>
</Rose::Message>
<Rose::Layout::Centered>
<Rose::Message @title="Welcome to Namespaces" as |message|>
<message.description>
Namespaces allow you to create distinct areas with their own separate policies, mounts, tokens, and identity entities.
</message.description>
<message.link @route="index">Add a namespace</message.link>
</Rose::Message>
</Rose::Layout::Centered>
</layout.body>
</Rose::Layout::Global>
addons/rose/tests/integration/components/rose/layout/global-test.js
+2 -16
View File
@@ -8,7 +8,7 @@ module('Integration | Component | rose/layout/global', function (hooks) {
test('it renders', async function (assert) {
await render(hbs`<Rose::Layout::Global />`);
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`<Rose::Layout::Global as |layout|>
<button id="content" />
</Rose::Layout::Global>`);
assert.ok(find('#content'));
});
test('it renders with header', async function (assert) {
await render(hbs`<Rose::Layout::Global as |layout|>
<layout.header />
@@ -31,17 +24,10 @@ module('Integration | Component | rose/layout/global', function (hooks) {
assert.ok(find('.rose-layout-global-header'));
});
test('it renders with main', async function (assert) {
test('it renders with body', async function (assert) {
await render(hbs`<Rose::Layout::Global as |layout|>
<layout.body />
</Rose::Layout::Global>`);
assert.ok(find('.rose-layout-global-body'));
});
test('it renders with sidebar', async function (assert) {
await render(hbs`<Rose::Layout::Global as |layout|>
<layout.sidebar />
</Rose::Layout::Global>`);
assert.ok(find('.rose-layout-global-sidebar'));
});
});
addons/rose/tests/integration/components/rose/layout/sidebar-test.js
+21
View File
@@ -0,0 +1,21 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, find } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
module('Integration | Component | rose/layout/sidebar', function(hooks) {
setupRenderingTest(hooks);
test('it renders', async function (assert) {
assert.expect(3);
await render(hbs`
<Rose::Layout::Sidebar as |layout|>
<layout.sidebar />
<layout.body />
</Rose::Layout::Sidebar>
`);
assert.ok(find('.rose-layout-sidebar'));
assert.ok(find('.rose-layout-sidebar-body'));
assert.ok(find('aside.rose-layout-sidebar-sidebar'));
});
});
ui/core/app/components/form/role/index.hbs
+49
View File
@@ -0,0 +1,49 @@
<Rose::Form
@onSubmit={{@submit}}
@cancel={{@cancel}}
@disabled={{@model.isSaving}}
@error={{true}}
as |form|
>
<form.input
name="name"
@type="name"
@value={{@model.name}}
@label={{t "form.label.name"}}
@error={{@model.errors.name}}
readonly={{false}}
as |field|>
{{#if @model.errors.name}}
<field.errors as |errors|>
{{#each @model.errors.name as |error|}}
<errors.message>{{error.message}}</errors.message>
{{/each}}
</field.errors>
{{/if}}
</form.input>
<form.textarea
name="description"
@type="description"
@value={{@model.description}}
@label={{t "form.label.description"}}
@error={{@model.errors.description}}
disabled={{@model.isSaving}}
readonly={{false}}
as |field|>
{{#if @model.errors.description}}
<field.errors as |errors|>
{{#each @model.errors.description as |error|}}
<errors.message>{{error.message}}</errors.message>
{{/each}}
</field.errors>
{{/if}}
</form.textarea>
<form.actions
@disabled={{if @model.cannotSave @model.cannotSave}}
@submitText={{t "actions.save"}}
@cancelText={{t "actions.cancel"}} />
</Rose::Form>
ui/core/app/controllers/orgs/org/roles.js
+18
View File
@@ -0,0 +1,18 @@
import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
export default class OrgsOrgRolesController extends Controller {
// =services
@service intl;
// =attributes
/**
* @type {string}
*/
get breadCrumb() {
return this.intl.t('resources.roles');
}
}
ui/core/app/controllers/orgs/org/roles/new.js
+18
View File
@@ -0,0 +1,18 @@
import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
export default class OrgsOrgRolesNewController extends Controller {
// =services
@service intl;
// =attributes
/**
* @type {string}
*/
get breadCrumb() {
return this.intl.t('titles.new');
}
}
ui/core/app/controllers/orgs/org/roles/role.js
+12
View File
@@ -0,0 +1,12 @@
import Controller from '@ember/controller';
import { alias } from '@ember/object/computed';
export default class OrgsOrgRolesRoleController extends Controller {
// =attributes
/**
* @type {string}
*/
@alias('model.name') breadCrumb;
}
ui/core/app/router.js
+4
View File
@@ -18,6 +18,10 @@ Router.map(function () {
});
this.route('new');
});
this.route('roles', function() {
this.route('role', { path: ':role_id' }, function() {});
this.route('new');
});
});
});
});
ui/core/app/routes/orgs/org/projects/project.js
+1 -1
View File
@@ -36,7 +36,7 @@ export default class OrgsOrgProjectsProjectRoute extends Route {
*/
renderTemplate(controller, model) {
this.render('orgs/org/projects/project/_sidebar', {
into: 'application',
into: 'orgs/org',
outlet: 'sidebar',
model: model
});
ui/core/app/routes/orgs/org/roles.js
+14
View File
@@ -0,0 +1,14 @@
import Route from '@ember/routing/route';
export default class OrgsOrgRolesRoute extends Route {
// =methods
/**
* Returns all roles from store.
* @return {Promise[RoleModel]}
*/
model() {
return this.store.findAll('role');
}
}
ui/core/app/routes/orgs/org/roles/index.js
+3
View File
@@ -0,0 +1,3 @@
import Route from '@ember/routing/route';
export default class OrgsOrgRolesIndexRoute extends Route { }
ui/core/app/routes/orgs/org/roles/new.js
+50
View File
@@ -0,0 +1,50 @@
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';
export default class OrgsOrgRolesNewRoute extends Route {
// =services
@service intl;
@service notify;
// =methods
/**
* Returns a new unsaved role.
* @return {Promise{RoleModel}}
*/
model() {
return this.store.createRecord('role');
}
// =actions
/**
* Rollback changes on role by destroying unsaved instance
* and redirect to role index.
* @param {RoleModel} role
*/
@action
cancel(role) {
role.rollbackAttributes();
this.transitionTo('orgs.org.roles');
}
/**
* Handle saving a role.
* @param {RoleModel} role
* @param {Event} e
*/
@action
async save(role) {
try {
await role.save();
this.transitionTo('orgs.org.roles.role', role);
this.notify.success(this.intl.t('notify.role.create-success'));
} catch (error) {
// TODO: replace with translated strings
this.notify.error(error.message, { closeAfter: null });
}
}
}
ui/core/app/routes/orgs/org/roles/role.js
+64
View File
@@ -0,0 +1,64 @@
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';
export default class OrgsOrgRolesRoleRoute extends Route {
// =services
@service intl;
@service notify;
// =methods
/**
* Return a role with id
* @param {object} params
* @return {Promise{RoleModel}}
*/
model({ role_id: id }) {
return this.store.findRecord('role', id);
}
// =actions
/**
* Rollback changes on role.
* @param {RoleModel} role
*/
@action
cancel(role) {
role.rollbackAttributes();
}
/**
* Handle saving a role.
* @param {RoleModel} role
* @param {Event} e
*/
@action
async save(role) {
try {
await role.save();
this.notify.success(this.intl.t('notify.save-success'));
} catch (error) {
// TODO: replace with translated strings
this.notify.error(error.message, { closeAfter: null });
}
}
/**
* Delete role and redirect to roles index.
* @param {RoleModel} role
*/
@action
async delete(role) {
try {
await role.destroyRecord();
this.transitionTo('orgs.org.roles');
this.notify.success(this.intl.t('notify.role.delete-success'));
} catch (error) {
// TODO: replace with translated strings
this.notify.error(error.message, { closeAfter: null });
}
}
}
ui/core/app/styles/app.scss
+5
View File
@@ -5,6 +5,11 @@
.rose-nav-sidebar {
margin-top: sizing.rems(xxl);
margin-bottom: sizing.rems(l);
& + .rose-nav-sidebar {
margin-top: 0;
}
}
.rose-form {
ui/core/app/templates/application.hbs
+3 -3
View File
@@ -25,9 +25,9 @@
</Rose::Header>
</layout.header>
<layout.sidebar>{{outlet "sidebar"}}</layout.sidebar>
<layout.body>{{outlet}}</layout.body>
<layout.body>
{{outlet}}
</layout.body>
</Rose::Layout::Global>
ui/core/app/templates/orgs/org.hbs
+27 -1
View File
@@ -1 +1,27 @@
{{outlet}}
<Rose::Layout::Sidebar as |sidebarLayout|>
<sidebarLayout.sidebar>
<Rose::Nav::Sidebar @title={{t "titles.general"}} as |nav|>
<nav.link @route="orgs.org.projects">
{{t "resources.projects"}}
</nav.link>
</Rose::Nav::Sidebar>
{{outlet "sidebar"}}
<Rose::Nav::Sidebar @title={{t "titles.iam"}} as |nav|>
<nav.link @route="orgs.org.roles">
{{t "resources.roles"}}
</nav.link>
</Rose::Nav::Sidebar>
</sidebarLayout.sidebar>
<sidebarLayout.body>
<main>
{{outlet}}
</main>
</sidebarLayout.body>
</Rose::Layout::Sidebar>
ui/core/app/templates/orgs/org/roles.hbs
+3
View File
@@ -0,0 +1,3 @@
{{title (t "resources.roles")}}
{{outlet}}
ui/core/app/templates/orgs/org/roles/index.hbs
+63
View File
@@ -0,0 +1,63 @@
<Rose::Layout::Page as |page|>
<page.breadcrumbs>
<BreadCrumbs />
</page.breadcrumbs>
<page.header>
<h2>{{t "resources.roles"}}</h2>
</page.header>
<page.actions>
{{#if @model}}
<Rose::LinkButton @route="orgs.org.roles.new" @style="primary">{{t 'titles.new'}}</Rose::LinkButton>
{{/if}}
</page.actions>
<page.body>
{{#if @model}}
<Rose::Table as |table|>
<table.header as |header|>
<header.row as |row|>
<row.cell>{{t 'form.label.name'}}</row.cell>
<row.cell>{{t 'form.label.description'}}</row.cell>
</header.row>
</table.header>
<table.body as |body|>
{{#each @model as |role|}}
<body.row as |row|>
<row.cell>
<LinkTo
@route="orgs.org.roles.role"
@model={{role}}
>
{{role.name}}
</LinkTo>
</row.cell>
<row.cell>{{role.description}}</row.cell>
</body.row>
{{/each}}
</table.body>
</Rose::Table>
{{else}}
<Rose::Layout::Centered>
<Rose::Message @title={{t 'titles.roles-welcome'}} as |message|>
<message.description>
{{t 'descriptions.roles-welcome'}}
</message.description>
<message.link @route="orgs.org.roles.new">
<Rose::Icon @name="plus-circle-outline" />
{{t 'titles.new'}}
</message.link>
</Rose::Message>
</Rose::Layout::Centered>
{{/if}}
</page.body>
</Rose::Layout::Page>
ui/core/app/templates/orgs/org/roles/new.hbs
+17
View File
@@ -0,0 +1,17 @@
<Rose::Layout::Page as |page|>
<page.breadcrumbs>
<BreadCrumbs />
</page.breadcrumbs>
<page.header>
<h2>{{t "titles.new"}}</h2>
</page.header>
<page.body>
<Form::Role
@model={{@model}}
@submit={{route-action "save" @model}}
@cancel={{route-action "cancel" @model}}
/>
</page.body>
</Rose::Layout::Page>
ui/core/app/templates/orgs/org/roles/role.hbs
+3
View File
@@ -0,0 +1,3 @@
{{title @model.name}}
{{outlet}}
ui/core/app/templates/orgs/org/roles/role/index.hbs
+27
View File
@@ -0,0 +1,27 @@
<Rose::Layout::Page as |page|>
<page.breadcrumbs>
<BreadCrumbs />
</page.breadcrumbs>
<page.header>
<h2>{{t "resources.role"}}</h2>
</page.header>
<page.body>
<Form::Role
@model={{@model}}
@submit={{route-action "save" @model}}
@cancel={{route-action "cancel" @model}}
/>
<Rose::Separator />
<Rose::Button
@style="warning"
@disabled={{@model.canSave}}
{{on "click" (route-action "delete" @model)}}
>
{{t 'actions.delete'}}
</Rose::Button>
</page.body>
</Rose::Layout::Page>
ui/core/mirage/config.js
+7
View File
@@ -40,6 +40,13 @@ export default function() {
this.patch('/orgs/:org_id/auth-methods/:id');
this.del('/orgs/:org_id/auth-methods/:id');
// role
this.get('/orgs/:org_id/roles');
this.post('/orgs/:org_id/roles');
this.get('/orgs/:org_id/roles/:id');
this.patch('/orgs/:org_id/roles/:id');
this.del('/orgs/:org_id/roles/:id');
// Other resources
// host-catalog
ui/core/mirage/factories/role.js
+3
View File
@@ -0,0 +1,3 @@
import factory from '../generated/factories/role';
export default factory.extend();
ui/core/mirage/generated/factories/role.js
+16
View File
@@ -0,0 +1,16 @@
import { Factory } from 'ember-cli-mirage';
import { random, date } from 'faker';
/**
* GeneratedRoleModelFactory
* Role contains all field related to a Role resource
*/
export default Factory.extend({
name: () => random.words(),
description: () => random.words(),
created_time: () => date.recent(),
updated_time: () => date.recent(),
disabled: () => random.boolean(),
});
ui/core/mirage/scenarios/default.js
+4
View File
@@ -12,6 +12,10 @@ export default function(server) {
// same items for request at all scopes.
server.createList('auth-method', 3);
// IAM
// Roles
server.createList('role', 5);
// Other resources
server.createList('host-catalog', 6);
ui/core/mirage/serializers/role.js
+5
View File
@@ -0,0 +1,5 @@
import ApplicationSerializer from './application';
export default ApplicationSerializer.extend({
modelName: 'role'
});
ui/core/tests/acceptance/roles-test.js
+191
View File
@@ -0,0 +1,191 @@
import { module, test } from 'qunit';
import { visit, currentURL, click, fillIn, find } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';
import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
import a11yAudit from 'ember-a11y-testing/test-support/audit';
import { Response } from 'miragejs';
module('Acceptance | roles', function (hooks) {
setupApplicationTest(hooks);
setupMirage(hooks);
hooks.beforeEach(function () {
this.server.create('org');
});
test('visiting roles', async function (assert) {
assert.expect(1);
await visit('/orgs/1/roles');
await a11yAudit();
assert.equal(currentURL(), '/orgs/1/roles');
});
test('can create new role', async function (assert) {
assert.expect(4);
assert.equal(this.server.db.roles.length, 0);
await visit('/orgs/1/roles/new');
await fillIn('[name="name"]', 'role name');
await click('[type="submit"]');
assert.equal(currentURL(), '/orgs/1/roles/1');
assert.equal(this.server.db.roles.length, 1);
assert.equal(this.server.db.roles[0].name, 'role name');
});
test('can cancel new role creation', async function (assert) {
assert.expect(3);
assert.equal(this.server.db.roles.length, 0);
await visit('/orgs/1/roles/new');
await fillIn('[name="name"]', 'role name');
await click('.rose-form-actions [type="button"]');
assert.equal(currentURL(), '/orgs/1/roles');
assert.equal(this.server.db.roles.length, 0);
});
test('saving a new role with invalid fields displays error messages', async function (assert) {
assert.expect(2);
this.server.post('/orgs/:org_id/roles', () => {
return new Response(
400,
{},
{
status: 400,
code: 'invalid_argument',
message: 'The request was invalid.',
details: {
fields: [
{
name: 'name',
message: 'Name is required.',
},
],
},
}
);
});
await visit('/orgs/1/roles/new');
await fillIn('[name="name"]', 'role name');
await click('[type="submit"]');
assert.ok(
find('[role="alert"]').textContent.trim(),
'The request was invalid.',
'Displays primary error message.'
);
assert.ok(
find('.rose-form-error-message').textContent.trim(),
'Name is required.',
'Displays field-level errors.'
);
});
test('can save changes to an existing role', async function (assert) {
assert.expect(2);
this.server.createList('role', 1, {name: 'Admin role'});
await visit('/orgs/1/roles/1');
await fillIn('[name="name"]', 'Updated admin role');
await click('.rose-form-actions [type="submit"]');
assert.equal(currentURL(), '/orgs/1/roles/1');
assert.equal(this.server.db.roles[0].name, 'Updated admin role');
});
test('can cancel changes to an existing role', async function (assert) {
assert.expect(1);
this.server.createList('role', 1, {name: 'Admin role'});
await visit('/orgs/1/roles/1');
await fillIn('[name="name"]', 'Updated admin role');
await click('.rose-form-actions [type="button"]');
assert.equal(find('[name="name"]').value, 'Admin role');
});
test('can delete a role', async function(assert) {
assert.expect(2);
this.server.createList('role', 1);
assert.equal(this.server.db.roles.length, 1);
await visit('/orgs/1/roles/1');
await click('.rose-button-warning');
assert.equal(this.server.db.roles.length, 0);
});
test('saving an existing role with invalid fields displays error messages', async function (assert) {
assert.expect(2);
this.server.createList('role', 1);
this.server.patch('/orgs/:org_id/roles/:id', () => {
return new Response(
400,
{},
{
status: 400,
code: 'invalid_argument',
message: 'The request was invalid.',
details: {
fields: [
{
name: 'name',
message: 'Name is required.',
},
],
},
}
);
});
await visit('/orgs/1/roles/1');
await fillIn('[name="name"]', 'random string');
await click('[type="submit"]');
assert.ok(
find('[role="alert"]').textContent.trim(),
'The request was invalid.',
'Displays primary error message.'
);
assert.ok(
find('.rose-form-error-message').textContent.trim(),
'Name is required.',
'Displays field-level errors.'
);
});
test('errors are displayed when save project fails', async function (assert) {
assert.expect(1);
this.server.createList('role', 1);
this.server.patch('/orgs/:org_id/roles/:id', () => {
return new Response(
490,
{},
{
status: 490,
code: 'error',
message: 'Oops.',
}
);
});
await visit('/orgs/1/roles/1');
await fillIn('[name="name"]', 'Role name');
await click('[type="submit"]');
assert.ok(
find('[role="alert"]').textContent.trim(),
'Oops.',
'Displays primary error message.'
);
});
test('errors are displayed when delete project fails', async function (assert) {
assert.expect(1);
this.server.createList('role', 1);
this.server.del('/orgs/:org_id/roles/:id', () => {
return new Response(
490,
{},
{
status: 490,
code: 'error',
message: 'Oops.',
}
);
});
await visit('/orgs/1/roles/1');
await click('.rose-button-warning');
assert.ok(
find('[role="alert"]').textContent.trim(),
'Oops.',
'Displays primary error message.'
);
});
});
ui/core/tests/unit/controllers/orgs/org/roles-test.js
+11
View File
@@ -0,0 +1,11 @@
import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';
module('Unit | Controller | orgs/org/roles', function(hooks) {
setupTest(hooks);
test('it exists', function(assert) {
let controller = this.owner.lookup('controller:orgs/org/roles');
assert.ok(controller);
});
});
ui/core/tests/unit/controllers/orgs/org/roles/new-test.js
+11
View File
@@ -0,0 +1,11 @@
import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';
module('Unit | Controller | orgs/org/roles/new', function(hooks) {
setupTest(hooks);
test('it exists', function(assert) {
let controller = this.owner.lookup('controller:orgs/org/roles/new');
assert.ok(controller);
});
});
ui/core/tests/unit/controllers/orgs/org/roles/role-test.js
+11
View File
@@ -0,0 +1,11 @@
import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';
module('Unit | Controller | orgs/org/roles/role', function(hooks) {
setupTest(hooks);
test('it exists', function(assert) {
let controller = this.owner.lookup('controller:orgs/org/roles/role');
assert.ok(controller);
});
});
ui/core/tests/unit/routes/orgs/org/roles-test.js
+11
View File
@@ -0,0 +1,11 @@
import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';
module('Unit | Route | orgs/org/roles', function(hooks) {
setupTest(hooks);
test('it exists', function(assert) {
let route = this.owner.lookup('route:orgs/org/roles');
assert.ok(route);
});
});
ui/core/tests/unit/routes/orgs/org/roles/index-test.js
+11
View File
@@ -0,0 +1,11 @@
import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';
module('Unit | Route | orgs/org/roles/index', function(hooks) {
setupTest(hooks);
test('it exists', function(assert) {
let route = this.owner.lookup('route:orgs/org/roles/index');
assert.ok(route);
});
});
ui/core/tests/unit/routes/orgs/org/roles/new-test.js
+11
View File
@@ -0,0 +1,11 @@
import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';
module('Unit | Route | orgs/org/roles/new', function(hooks) {
setupTest(hooks);
test('it exists', function(assert) {
let route = this.owner.lookup('route:orgs/org/roles/new');
assert.ok(route);
});
});
ui/core/tests/unit/routes/orgs/org/roles/role-test.js
+11
View File
@@ -0,0 +1,11 @@
import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';
module('Unit | Route | orgs/org/roles/role', function(hooks) {
setupTest(hooks);
test('it exists', function(assert) {
let route = this.owner.lookup('route:orgs/org/roles/role');
assert.ok(route);
});
});
ui/core/translations/en-us.yaml
+11
View File
@@ -5,22 +5,28 @@ actions:
save: Save
help: Need help?
resources:
role: Role
roles: Roles
projects: Projects
project: Project
host-catalog: Host Catalog
host-catalogs: Host Catalogs
titles:
iam: IAM
new: New
general: General
overview: Overview
settings: Settings
empty-set: No Items Yet
projects-welcome: Welcome to Projects
host-catalogs-welcome: Welcome to Host Catalogs
roles-welcome: Welcome to Roles
descriptions:
host-catalogs: Overview of collections of hosts and host sets.
empty-set: There are no items to display yet. You may be able to add items or try back later.
projects-welcome: Projects allow you to create and manage host catalogs. To start, create a project.
host-catalogs-welcome: Host catalogs allow you to configure to collect and create hosts and host sets. To start, create a host catalog.
roles-welcome: Roles are collections of capabilities that can be granted to user and/or groups.
states:
info: Info
success: Success
@@ -44,6 +50,11 @@ errors:
notfound-error: We could not find the requested resource. You can ask your administrator or try again later.
server-error: We ran into a problem and could not continue. You can ask your administrator or try again later.
unknown-error: Please contact your administrator or try again later.
notify:
save-success: Save succeeded.
role:
create-success: Role created succesfully.
delete-success: Deleted role successfully.
dev:
default-org: Default Org
menu-item: Menu item