feat: 🎸 reintroduce host sets

This commit is contained in:
Randall Morey committed 2020-10-29 11:09:04 -04:00
1 parent 709a8e3949
commit d01e0912ad
24 files changed
+705 -4

No files matched your search

@@ -0,0 +1,59 @@
<Rose::Form
@onSubmit={{@submit}}
@cancel={{@cancel}}
@disabled={{@model.isSaving}}
@error={{@model.errors.base}}
@showEditToggle={{if @model.isNew false true}}
as |form|
>
<form.input
@value={{@model.type}}
@label={{t "form.type.label"}}
readonly={{true}}
@disabled={{true}} />
<form.input
@name="name"
@type="name"
@value={{@model.name}}
@label={{t "form.name.label"}}
@helperText={{t "form.name.help"}}
@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.description.label"}}
@helperText={{t "form.description.help"}}
@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}}
@enableEditText={{t "actions.edit-form"}}
@submitText={{t "actions.save"}}
@cancelText={{t "actions.cancel"}} />
</Rose::Form>
+4
View File
@@ -71,6 +71,10 @@ Router.map(function () {
this.route('new');
this.route('host', { path: ':host_id' }, function() {});
});
this.route('host-sets', function() {
this.route('new');
this.route('host-set', { path: ':host_set_id' }, function() {});
});
});
});
});
@@ -0,0 +1,76 @@
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';
import loading from 'ember-loading/decorator';
import { confirm } from '../../../../../decorators/confirm';
import { notifySuccess, notifyError } from '../../../../../decorators/notify';
export default class ScopesScopeHostCatalogsHostCatalogHostSetsRoute extends Route {
// =services
@service intl;
@service notify;
// =methods
/**
* Loads all host-sets under the current host catalog and it's parent scope.
* @return {Promise{[HostSetModel]}}
*/
model() {
const { id: host_catalog_id } = this.modelFor(
'scopes.scope.host-catalogs.host-catalog'
);
return this.store.query('host-set', { host_catalog_id });
}
// =actions
/**
* Rollback changes on a host set.
* @param {HostSetModel} hostSet
*/
@action
cancel(hostSet) {
const { isNew } = hostSet;
hostSet.rollbackAttributes();
if (isNew)
this.transitionTo(
'scopes.scope.host-catalogs.host-catalog.host-sets'
);
}
/**
* Handle save of a host set.
* @param {HostSetModel} hostSet
* @param {Event} e
*/
@action
@loading
@notifyError(({ message }) => message)
@notifySuccess(({ isNew }) => isNew ? 'notifications.create-success' : 'notifications.save-success')
async save(hostSet) {
await hostSet.save();
await this.transitionTo(
'scopes.scope.host-catalogs.host-catalog.host-sets.host-set',
hostSet
);
this.refresh();
}
/**
* Delete host set in current scope and redirect to index.
* @param {HostSetModel} hostSet
*/
@action
@loading
@confirm('questions.delete-confirm')
@notifyError(({ message }) => message, { catch: true })
@notifySuccess('notifications.delete-success')
async deleteHostSet(hostSet) {
await hostSet.destroyRecord();
await this.replaceWith(
'scopes.scope.host-catalogs.host-catalog.host-sets'
);
}
}
@@ -0,0 +1,52 @@
import Route from '@ember/routing/route';
export default class ScopesScopeHostCatalogsHostCatalogHostSetsHostSetRoute extends Route {
// =methods
/**
* Load a host-set using current host-catalog and its parent scope.
* @param {object} params
* @param {string} params.host_set_id
* @return {HostSetModel}
*/
async model({ host_set_id }) {
return this.store.findRecord('host-set', host_set_id, { reload: true });
}
/**
* Renders the host-set specific templates for header, navigation, and action page sections.
* @override
* @param {object} controller
* @param {object} model
*/
renderTemplate(controller, model) {
super.renderTemplate(...arguments);
this.render(
'scopes/scope/host-catalogs/host-catalog/host-sets/host-set/-header',
{
into: 'scopes/scope/host-catalogs/host-catalog',
outlet: 'header',
model: model,
}
);
this.render(
'scopes/scope/host-catalogs/host-catalog/host-sets/host-set/-navigation',
{
into: 'scopes/scope/host-catalogs/host-catalog',
outlet: 'navigation',
model: model,
}
);
this.render(
'scopes/scope/host-catalogs/host-catalog/host-sets/host-set/-actions',
{
into: 'scopes/scope/host-catalogs/host-catalog',
outlet: 'actions',
model: model,
}
);
}
}
@@ -0,0 +1,4 @@
import Route from '@ember/routing/route';
export default class ScopesScopeHostCatalogsHostCatalogHostSetsHostSetIndexRoute extends Route {
}
@@ -0,0 +1,4 @@
import Route from '@ember/routing/route';
export default class ScopesScopeHostCatalogsHostCatalogHostSetsIndexRoute extends Route {
}
@@ -0,0 +1,50 @@
import Route from '@ember/routing/route';
export default class ScopesScopeHostCatalogsHostCatalogHostSetsNewRoute extends Route {
// =methods
/**
* Creates a new unsaved host set in current host catalog scope.
* @return {HostSetModel}
*/
model() {
const { id: host_catalog_id } = this.modelFor(
'scopes.scope.host-catalogs.host-catalog'
);
return this.store.createRecord('host-set', {
type: 'static',
host_catalog_id,
});
}
/**
* Renders new host-set specific templates for header, navigation, and action page sections.
* @override
* @param {object} controller
* @param {object} model
*/
renderTemplate(controller, model) {
super.renderTemplate(...arguments);
this.render(
'scopes/scope/host-catalogs/host-catalog/host-sets/new/-header',
{
into: 'scopes/scope/host-catalogs/host-catalog',
outlet: 'header',
model: model,
}
);
this.render('_empty', {
into: 'scopes/scope/host-catalogs/host-catalog',
outlet: 'navigation',
model: model,
});
this.render('_empty', {
into: 'scopes/scope/host-catalogs/host-catalog',
outlet: 'actions',
model: model,
});
}
}
@@ -5,14 +5,12 @@
>
{{t "resources.host.actions.create"}}
</dropdown.link>
{{!--
<dropdown.link
@route="scopes.scope.host-catalogs.host-catalog.host-sets.new"
@model={{@model}}
>
{{t "resources.host-set.actions.create"}}
</dropdown.link>
--}}
<dropdown.separator />
<dropdown.button
@style="danger"
@@ -5,9 +5,7 @@
<nav.link @route='scopes.scope.host-catalogs.host-catalog.hosts'>
{{t 'resources.host.title_plural'}}
</nav.link>
{{!--
<nav.link @route='scopes.scope.host-catalogs.host-catalog.host-sets'>
{{t 'resources.host-set.title_plural'}}
</nav.link>
--}}
</Rose::Nav::Tabs>
@@ -0,0 +1,3 @@
{{title (t "resources.host-set.title_plural")}}
{{outlet}}
@@ -0,0 +1,3 @@
{{title @model.displayName}}
{{outlet}}
@@ -0,0 +1,18 @@
<Rose::Dropdown @text="{{t 'actions.manage'}}" @dropdownRight={{true}} as |dropdown|>
{{!--
<dropdown.link @route="scopes.scope.host-catalogs.host-catalog.host-sets.host-set.create-host">
{{t 'resources.host-set.actions.create-host'}}
</dropdown.link>
<dropdown.link @route="scopes.scope.host-catalogs.host-catalog.host-sets.host-set.add-hosts">
{{t 'resources.host-set.actions.add-hosts'}}
</dropdown.link>
--}}
<dropdown.separator />
<dropdown.button
@style="danger"
@disabled={{@model.canSave}}
{{on "click" (route-action "deleteHostSet" @model)}}
>
{{t 'resources.host-set.actions.delete'}}
</dropdown.button>
</Rose::Dropdown>
@@ -0,0 +1,12 @@
<h2>
{{t "resources.host-set.title"}}
<DocLink @doc="host-set" @iconSize="large" />
</h2>
<p>{{t "resources.host-set.description"}}</p>
<Copyable
@text={{@model.id}}
@buttonText={{t "actions.copy-to-clipboard"}}
@acknowledgeText={{t "states.copied"}}
>
<code>{{@model.id}}</code>
</Copyable>
@@ -0,0 +1,10 @@
<Rose::Nav::Tabs as |nav|>
<nav.link @route='scopes.scope.host-catalogs.host-catalog.host-sets.host-set.index'>
{{t 'titles.details'}}
</nav.link>
{{!--
<nav.link @route='scopes.scope.host-catalogs.host-catalog.host-sets.host-set.hosts'>
{{t 'resources.host.title_plural'}}
</nav.link>
--}}
</Rose::Nav::Tabs>
@@ -0,0 +1,5 @@
<Form::HostSet
@model={{@model}}
@submit={{route-action "save" @model}}
@cancel={{route-action "cancel" @model}}
/>
@@ -0,0 +1,56 @@
{{#if @model}}
<Rose::Table as |table|>
<table.header as |header|>
<header.row as |row|>
<row.headerCell>{{t "form.name.label"}}</row.headerCell>
<row.headerCell>{{t "form.type.label"}}</row.headerCell>
<row.headerCell>{{t "form.id.label"}}</row.headerCell>
</header.row>
</table.header>
<table.body as |body|>
{{#each @model as |hostSet|}}
<body.row as |row|>
<row.headerCell>
<LinkTo
@route="scopes.scope.host-catalogs.host-catalog.host-sets.host-set"
@model={{hostSet.id}}
>
{{hostSet.displayName}}
</LinkTo>
<p>{{hostSet.description}}</p>
</row.headerCell>
<row.cell>
<Rose::Badge>
{{t (concat 'resources.host-set.types.' hostSet.type)}}
</Rose::Badge>
</row.cell>
<row.cell>
<Copyable
@text={{hostSet.id}}
@buttonText={{t "actions.copy-to-clipboard"}}
@acknowledgeText={{t "states.copied"}}
>
<code>{{hostSet.id}}</code>
</Copyable>
</row.cell>
</body.row>
{{/each}}
</table.body>
</Rose::Table>
{{else}}
<Rose::Layout::Centered>
<Rose::Message @title={{t "resources.host-set.messages.welcome.title"}} as |message|>
<message.description>
{{t "resources.host-set.description"}}
</message.description>
<message.link @route="scopes.scope.host-catalogs.host-catalog.host-sets.new">
<Rose::Icon @name="plus-circle-outline" />
{{t "titles.new"}}
</message.link>
</Rose::Message>
</Rose::Layout::Centered>
{{/if}}
@@ -0,0 +1,7 @@
{{title (t 'titles.new')}}
<Form::HostSet
@model={{@model}}
@submit={{route-action "save" @model}}
@cancel={{route-action "cancel" @model}}
/>
@@ -0,0 +1,4 @@
<h2>
{{t "titles.new"}}
<DocLink @doc="host-set.new" @iconSize="large" />
</h2>
@@ -0,0 +1,283 @@
import { module, test } from 'qunit';
import { visit, currentURL, find, click, fillIn } 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';
import { resolve, reject } from 'rsvp';
import sinon from 'sinon';
import {
authenticateSession,
// These are left here intentionally for future reference.
//currentSession,
//invalidateSession,
} from 'ember-simple-auth/test-support';
module('Acceptance | host-catalogs | host sets', function (hooks) {
setupApplicationTest(hooks);
setupMirage(hooks);
let getHostCount;
const instances = {
scopes: {
global: null,
org: null,
project: null,
hostCatalog: null,
host: null
}
};
const urls = {
globalScope: null,
orgScope: null,
projectScope: null,
hostCatalogs: null,
hostCatalog: null,
hostSets: null,
hostSet: null,
unknownHostSet: null,
newHostSet: null,
};
hooks.beforeEach(function () {
// Generate resources
instances.scopes.global = this.server.create('scope', { id: 'global' });
instances.scopes.org = this.server.create('scope', {
type: 'org',
scope: { id: 'global', type: 'global' },
});
instances.scopes.project = this.server.create('scope', {
type: 'project',
scope: { id: instances.scopes.org.id, type: 'org' },
});
instances.hostCatalog = this.server.create('host-catalog', {
scope: instances.scopes.project,
});
instances.hostSet = this.server.create('host-set', {
scope: instances.scopes.project,
hostCatalog: instances.hostCatalog
});
// Generate route URLs for resources
urls.globalScope = `/scopes/global/scopes`;
urls.orgScope = `/scopes/${instances.scopes.org.id}/scopes`;
urls.projectScope = `/scopes/${instances.scopes.project.id}`;
urls.hostCatalogs = `${urls.projectScope}/host-catalogs`;
urls.hostCatalog = `${urls.hostCatalogs}/${instances.hostCatalog.id}`;
urls.hostSets = `${urls.hostCatalog}/host-sets`;
urls.hostSet = `${urls.hostSets}/${instances.hostSet.id}`;
urls.unknownHostSet = `${urls.hostSets}/foo`;
urls.newHostSet = `${urls.hostSets}/new`;
// Generate resource couner
getHostCount = () => this.server.schema.hostSets.all().models.length;
authenticateSession({});
});
test('visiting host sets', async function (assert) {
assert.expect(2);
await visit(urls.hostSets);
await a11yAudit();
assert.equal(currentURL(), urls.hostSets);
await visit(urls.hostSet);
await a11yAudit();
assert.equal(currentURL(), urls.hostSet);
});
test('visiting an unknown host set displays 404 message', async function (assert) {
assert.expect(1);
await visit(urls.unknownHostSet);
await a11yAudit();
assert.ok(find('.rose-message-subtitle').textContent.trim(), 'Error 404');
});
test('can create new host', async function (assert) {
assert.expect(1);
const count = getHostCount();
await visit(urls.newHostSet);
await fillIn('[name="name"]', 'random string');
await click('[type="submit"]');
assert.equal(getHostCount(), count + 1);
});
test('can cancel create new host', async function (assert) {
assert.expect(2);
const count = getHostCount();
await visit(urls.newHostSet);
await fillIn('[name="name"]', 'random string');
await click('.rose-form-actions [type="button"]');
assert.equal(currentURL(), urls.hostSets);
assert.equal(getHostCount(), count);
});
test('saving a new host set with invalid fields displays error messages', async function (assert) {
assert.expect(2);
this.server.post('/host-sets', () => {
return new Response(
400,
{},
{
status: 400,
code: 'invalid_argument',
message: 'The request was invalid.',
details: {
request_fields: [
{
name: 'name',
description: 'Name is required.',
},
],
},
}
);
});
await visit(urls.newHostSet);
await click('[type="submit"]');
assert.ok(find('[role="alert"]').textContent.trim(), 'The request was invalid.');
assert.ok(
find('.rose-form-error-message').textContent.trim(),
'Name is required.'
);
});
test('can save changes to existing host', async function (assert) {
assert.expect(3);
assert.notEqual(instances.hostSet.name, 'random string');
await visit(urls.hostSet);
await click('form [type="button"]', 'Activate edit mode');
await fillIn('[name="name"]', 'random string');
await click('.rose-form-actions [type="submit"]');
assert.equal(currentURL(), urls.hostSet);
assert.equal(this.server.schema.hostSets.all().models[0].name, 'random string');
});
test('can cancel changes to existing host', async function (assert) {
assert.expect(2);
await visit(urls.hostSet);
await click('form [type="button"]', 'Activate edit mode');
await fillIn('[name="name"]', 'random string');
await click('.rose-form-actions [type="button"]');
assert.notEqual(instances.hostSet.name, 'random string');
assert.equal(find('[name="name"]').value, instances.hostSet.name);
});
test('saving an existing host set with invalid fields displays error messages', async function (assert) {
assert.expect(2);
this.server.patch('/host-sets/:id', () => {
return new Response(
400,
{},
{
status: 400,
code: 'invalid_argument',
message: 'The request was invalid.',
details: {
request_fields: [
{
name: 'name',
description: 'Name is required.',
},
],
},
}
);
});
await visit(urls.hostSet);
await click('form [type="button"]', 'Activate edit mode');
await fillIn('[name="name"]', 'random string');
await click('[type="submit"]');
assert.ok(find('[role="alert"]').textContent.trim(), 'The request was invalid.');
assert.ok(
find('.rose-form-error-message').textContent.trim(),
'Name is required.'
);
});
test('can discard unsaved host set changes via dialog', async function (assert) {
assert.expect(5);
const confirmService = this.owner.lookup('service:confirm');
confirmService.enabled = true;
assert.notEqual(instances.hostSet.name, 'random string');
await visit(urls.hostSet);
await click('form [type="button"]', 'Activate edit mode');
await fillIn('[name="name"]', 'random string');
assert.equal(currentURL(), urls.hostSet);
try {
await visit(urls.hostSets);
} catch (e) {
assert.ok(find('.rose-dialog'));
await click('.rose-dialog-footer button:first-child');
assert.equal(currentURL(), urls.hostSets);
assert.notEqual(this.server.schema.hostSets.all().models[0].name, 'random string');
}
});
test('can cancel discard unsaved host set changes via dialog', async function (assert) {
assert.expect(5);
const confirmService = this.owner.lookup('service:confirm');
confirmService.enabled = true;
assert.notEqual(instances.hostSet.name, 'random string');
await visit(urls.hostSet);
await click('form [type="button"]', 'Activate edit mode');
await fillIn('[name="name"]', 'random string');
assert.equal(currentURL(), urls.hostSet);
try {
await visit(urls.hostSets);
} catch (e) {
assert.ok(find('.rose-dialog'));
await click('.rose-dialog-footer button:last-child');
assert.equal(currentURL(), urls.hostSet);
assert.notEqual(this.server.schema.hostSets.all().models[0].name, 'random string');
}
});
test('can delete host', async function (assert) {
assert.expect(1);
const count = getHostCount();
await visit(urls.hostSet);
await click('.rose-layout-page-actions .rose-dropdown-button-danger');
assert.equal(getHostCount(), count - 1);
});
test('can accept delete host set via dialog', async function (assert) {
assert.expect(2);
const confirmService = this.owner.lookup('service:confirm');
confirmService.enabled = true;
confirmService.confirm = sinon.fake.returns(resolve());
const count = getHostCount();
await visit(urls.hostSet);
await click('.rose-layout-page-actions .rose-dropdown-button-danger');
assert.equal(getHostCount(), count - 1);
assert.ok(confirmService.confirm.calledOnce);
});
test('cannot cancel delete host set via dialog', async function (assert) {
assert.expect(2);
const confirmService = this.owner.lookup('service:confirm');
confirmService.enabled = true;
confirmService.confirm = sinon.fake.returns(reject());
const count = getHostCount();
await visit(urls.hostSet);
await click('.rose-layout-page-actions .rose-dropdown-button-danger');
assert.equal(getHostCount(), count);
assert.ok(confirmService.confirm.calledOnce);
});
test('deleting a host set which errors displays error messages', async function (assert) {
assert.expect(1);
this.server.del('/host-sets/:id', () => {
return new Response(
490,
{},
{
status: 490,
code: 'error',
message: 'Oops.',
}
);
});
await visit(urls.hostSet);
await click('.rose-layout-page-actions .rose-dropdown-button-danger');
assert.ok(find('[role="alert"]').textContent.trim(), 'Oops.');
});
});
@@ -0,0 +1,11 @@
import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';
module('Unit | Route | scopes/scope/host-catalogs/host-catalog/host-sets', function(hooks) {
setupTest(hooks);
test('it exists', function(assert) {
let route = this.owner.lookup('route:scopes/scope/host-catalogs/host-catalog/host-sets');
assert.ok(route);
});
});
@@ -0,0 +1,11 @@
import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';
module('Unit | Route | scopes/scope/host-catalogs/host-catalog/host-sets/host-set', function(hooks) {
setupTest(hooks);
test('it exists', function(assert) {
let route = this.owner.lookup('route:scopes/scope/host-catalogs/host-catalog/host-sets/host-set');
assert.ok(route);
});
});
@@ -0,0 +1,11 @@
import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';
module('Unit | Route | scopes/scope/host-catalogs/host-catalog/host-sets/host-set/index', function(hooks) {
setupTest(hooks);
test('it exists', function(assert) {
let route = this.owner.lookup('route:scopes/scope/host-catalogs/host-catalog/host-sets/host-set/index');
assert.ok(route);
});
});
@@ -0,0 +1,11 @@
import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';
module('Unit | Route | scopes/scope/host-catalogs/host-catalog/host-sets/index', function(hooks) {
setupTest(hooks);
test('it exists', function(assert) {
let route = this.owner.lookup('route:scopes/scope/host-catalogs/host-catalog/host-sets/index');
assert.ok(route);
});
});
@@ -0,0 +1,11 @@
import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';
module('Unit | Route | scopes/scope/host-catalogs/host-catalog/host-sets/new', function(hooks) {
setupTest(hooks);
test('it exists', function(assert) {
let route = this.owner.lookup('route:scopes/scope/host-catalogs/host-catalog/host-sets/new');
assert.ok(route);
});
});