Merge pull request #69 from hashicorp/ICU-349-groups-basic-views

Add basic groups view

addons/api/addon/adapters/group.js

@@ -0,0 +1,14 @@
+import ApplicationAdapter from './application';
+import ScopeAdapterMixin from '../mixins/scope-adapter';
+
+export default class GroupAdapter extends ApplicationAdapter.extend(
+  ScopeAdapterMixin
+) {
+  // =attributes
+
+  /**
+   * Group is scoped to org only, for now.
+   * @type {boolean}
+   */
+  includeProject = false;
+}

addons/api/app/adapters/group.js

@@ -0,0 +1 @@
+export { default } from 'api/adapters/group';

addons/api/tests/unit/adapters/group-test.js

@@ -0,0 +1,21 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+import config from 'ember-get-config';
+
+module('Unit | Adapter | group', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let adapter = this.owner.lookup('adapter:group');
+    assert.ok(adapter);
+  });
+
+  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:group');
+    assert.equal(adapter.urlPrefix(), `${config.api.namespace}/orgs/1`);
+  });
+});

ui/core/app/components/form/group/index.hbs

@@ -0,0 +1,49 @@
+<Rose::Form
+  @onSubmit={{@submit}}
+  @cancel={{@cancel}}
+  @disabled={{@model.isSaving}}
+  @error={{@model.errors.base}}
+  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/components/form/host-catalog/index.hbs

@@ -2,7 +2,7 @@
   @onSubmit={{@submit}}
   @cancel={{@cancel}}
   @disabled={{@model.isSaving}}
-  @error={{true}}
+  @error={{@model.errors.base}}
   as |form|
 >
 

ui/core/app/components/form/project/index.hbs

@@ -2,7 +2,7 @@
   @onSubmit={{@submit}}
   @cancel={{@cancel}}
   @disabled={{@model.isSaving}}
-  @error={{true}}
+  @error={{@model.errors.base}}
   as |form|
 >
 

ui/core/app/components/form/role/index.hbs

@@ -2,7 +2,7 @@
   @onSubmit={{@submit}}
   @cancel={{@cancel}}
   @disabled={{@model.isSaving}}
-  @error={{true}}
+  @error={{@model.errors.base}}
   as |form|
 >
 

ui/core/app/controllers/orgs/org/groups.js

@@ -0,0 +1,17 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class OrgsOrgGroupsController extends Controller {
+  // =services
+
+  @service intl;
+
+  // =attributes
+
+  /**
+   * @type {string}
+   */
+  get breadCrumb() {
+    return this.intl.t('resources.groups');
+  }
+}

ui/core/app/controllers/orgs/org/groups/group.js

@@ -0,0 +1,12 @@
+import Controller from '@ember/controller';
+import { alias } from '@ember/object/computed';
+
+export default class OrgsOrgGroupsGroupController extends Controller {
+  // =attributes
+
+  /**
+   * @type {string}
+   */
+  @alias('model.displayName') breadCrumb;
+
+}

ui/core/app/controllers/orgs/org/groups/new.js

@@ -0,0 +1,18 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class OrgsOrgGroupsNewController extends Controller {
+  // =services
+
+  @service intl;
+
+  // =attributes
+
+  /**
+   * @type {string}
+   */
+  get breadCrumb() {
+    return this.intl.t('titles.new');
+  }
+
+}

ui/core/app/router.js

@@ -28,6 +28,11 @@ Router.map(function () {
         this.route('role', { path: ':role_id' }, function() {});
         this.route('new');
       });
+
+      this.route('groups', function() {
+        this.route('group', { path: ':group_id' }, function() {});
+        this.route('new');
+      });
     });
   });
 });

ui/core/app/routes/orgs/org/groups.js

@@ -0,0 +1,13 @@
+import Route from '@ember/routing/route';
+
+export default class OrgsOrgGroupsRoute extends Route {
+  // =methods
+
+  /**
+   * Returns all groups from store.
+   * @return {Promise[GroupModel]}
+   */
+  model() {
+    return this.store.findAll('group');
+  }
+}

ui/core/app/routes/orgs/org/groups/group.js

@@ -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 OrgsOrgGroupsGroupRoute extends Route {
+  // =services
+
+  @service intl;
+  @service notify;
+
+  // =methods
+
+  /**
+   * Return a group with id
+   * @param {object} params
+   * @return {Promise{GroupModel}}
+   */
+  model({ group_id: id }) {
+    return this.store.findRecord('group', id);
+  }
+
+  // =actions
+
+  /**
+   * Rollback changes on group.
+   * @param {GroupModel} group
+   */
+  @action
+  cancel(group) {
+    group.rollbackAttributes();
+  }
+
+  /**
+   * Handle saving a group.
+   * @param {GroupModel} group
+   * @param {Event} e
+   */
+  @action
+  async save(group) {
+    try {
+      await group.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 group and redirect to groups index.
+   * @param {GroupModel} group
+   */
+  @action
+  async delete(group) {
+    try {
+      await group.destroyRecord();
+      this.transitionTo('orgs.org.groups');
+      this.notify.success(this.intl.t('notify.group.delete-success'));
+    } catch (error) {
+      // TODO: replace with translated strings
+      this.notify.error(error.message, { closeAfter: null });
+    }
+  }
+}

ui/core/app/routes/orgs/org/groups/group/index.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default class OrgsOrgGroupsGroupIndexRoute extends Route {
+}

ui/core/app/routes/orgs/org/groups/index.js

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class OrgsOrgGroupsIndexRoute extends Route {}

ui/core/app/routes/orgs/org/groups/new.js

@@ -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 OrgsOrgGroupsNewRoute extends Route {
+  // =services
+
+  @service intl;
+  @service notify;
+
+  // =methods
+
+  /**
+   * Returns a new unsaved group.
+   * @return {Promise{GroupModel}}
+   */
+  model() {
+    return this.store.createRecord('group');
+  }
+
+  // =actions
+
+  /**
+   * Rollback changes on group by destroying unsaved instance
+   * and redirect to group index.
+   * @param {GroupModel} group
+   */
+  @action
+  cancel(group) {
+    group.rollbackAttributes();
+    this.transitionTo('orgs.org.groups');
+  }
+
+  /**
+   * Handle saving a group.
+   * @param {GroupModel} group
+   * @param {Event} e
+   */
+  @action
+  async save(group) {
+    try {
+      await group.save();
+      this.transitionTo('orgs.org.groups.group', group);
+      this.notify.success(this.intl.t('notify.group.create-success'));
+    } catch (error) {
+      // TODO: replace with translated strings
+      this.notify.error(error.message, { closeAfter: null });
+    }
+  }
+}

ui/core/app/routes/orgs/org/roles/index.js

@@ -1,3 +1,3 @@
 import Route from '@ember/routing/route';
 
-export default class OrgsOrgRolesIndexRoute extends Route { }
+export default class OrgsOrgRolesIndexRoute extends Route {}

ui/core/app/templates/orgs/org.hbs

@@ -11,6 +11,10 @@
     {{outlet "sidebar"}}
 
     <Rose::Nav::Sidebar @title={{t "titles.iam"}} as |nav|>
+      <nav.link @route="orgs.org.groups">
+        {{t "resources.groups"}}
+      </nav.link>
+
       <nav.link @route="orgs.org.roles">
         {{t "resources.roles"}}
       </nav.link>

ui/core/app/templates/orgs/org/groups.hbs

@@ -0,0 +1,3 @@
+{{title (t "resources.groups")}}
+
+{{outlet}}

ui/core/app/templates/orgs/org/groups/group.hbs

@@ -0,0 +1,3 @@
+{{title @model.name}}
+
+{{outlet}}

ui/core/app/templates/orgs/org/groups/group/index.hbs

@@ -0,0 +1,27 @@
+<Rose::Layout::Page as |page|>
+
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <h2>{{t "resources.group"}}</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/app/templates/orgs/org/groups/index.hbs

@@ -0,0 +1,63 @@
+<Rose::Layout::Page as |page|>
+
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <h2>{{t "resources.groups"}}</h2>
+  </page.header>
+
+  <page.actions>
+    {{#if @model}}
+      <Rose::LinkButton @route="orgs.org.groups.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 |group|}}
+            <body.row as |row|>
+              <row.cell>
+                <LinkTo
+                  @route="orgs.org.groups.group"
+                  @model={{group}}
+                >
+                  {{group.name}}
+                </LinkTo>
+              </row.cell>
+              <row.cell>{{group.description}}</row.cell>
+            </body.row>
+          {{/each}}
+        </table.body>
+      </Rose::Table>
+
+    {{else}}
+
+      <Rose::Layout::Centered>
+        <Rose::Message @title={{t 'titles.groups-welcome'}} as |message|>
+          <message.description>
+            {{t 'descriptions.groups-welcome'}}
+          </message.description>
+          <message.link @route="orgs.org.groups.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/groups/new.hbs

@@ -0,0 +1,18 @@
+<Rose::Layout::Page as |page|>
+
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <h2>{{t "titles.new"}}</h2>
+  </page.header>
+
+  <page.body>
+    <Form::Group
+      @model={{@model}}
+      @submit={{route-action "save" @model}}
+      @cancel={{route-action "cancel" @model}}
+    />
+  </page.body>
+</Rose::Layout::Page>

ui/core/mirage/config.js

@@ -54,6 +54,13 @@ export default function() {
   this.patch('/orgs/:org_id/roles/:id');
   this.del('/orgs/:org_id/roles/:id');
 
+  // group
+  this.get('/orgs/:org_id/groups');
+  this.post('/orgs/:org_id/groups');
+  this.get('/orgs/:org_id/groups/:id');
+  this.patch('/orgs/:org_id/groups/:id');
+  this.del('/orgs/:org_id/groups/:id');
+
   // Other resources
   // host-catalog
 

ui/core/mirage/factories/group.js

@@ -0,0 +1,3 @@
+import factory from '../generated/factories/group';
+
+export default factory.extend();

ui/core/mirage/generated/factories/group.js

@@ -0,0 +1,16 @@
+import { Factory } from 'ember-cli-mirage';
+import { random, date } from 'faker';
+
+/**
+ * GeneratedGroupModelFactory
+ * Group contains all fields related to a Group 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

@@ -17,6 +17,8 @@ export default function(server) {
 
   // Role
   server.createList('role', 5);
+  // Groups
+  server.createList('group', 5);
 
   // Other resources
 

ui/core/mirage/serializers/group.js

@@ -0,0 +1,5 @@
+import ApplicationSerializer from './application';
+
+export default ApplicationSerializer.extend({
+  modelName: 'group'
+});

ui/core/tests/acceptance/bread-crumbs-test.js

@@ -9,17 +9,15 @@ module('Acceptance | breadcrumbs', function (hooks) {
 
   let org;
   let project;
-  let user;
   let hostCatalog;
-  let projectsURL;
-  let newProjectURL;
-  let projectURL;
-  let hostCatalogsURL;
-  let newHostCatalogURL;
-  let hostCatalogURL;
-  let usersURL;
-  let newUserURL;
-  let userURL;
+  let user;
+  let role;
+  let group;
+  let projectsURL, projectURL, newProjectURL;
+  let hostCatalogsURL, hostCatalogURL, newHostCatalogURL;
+  let usersURL, userURL, newUserURL;
+  let rolesURL, roleURL, newRoleURL;
+  let groupsURL, groupURL, newGroupURL;
 
   let crumbPath;
 
@@ -29,14 +27,25 @@ module('Acceptance | breadcrumbs', function (hooks) {
     user = this.server.create('user');
 
     hostCatalog = this.server.create('host-catalog');
+    role = this.server.create('role');
+    group = this.server.create('group');
+
     projectsURL = `/orgs/${org.id}/projects`;
     newProjectURL = `${projectsURL}/new`;
     projectURL = `${projectsURL}/${project.id}`;
+
     hostCatalogsURL = `${projectURL}/host-catalogs`;
     newHostCatalogURL = `${hostCatalogsURL}/new`;
     hostCatalogURL = `${hostCatalogsURL}/${hostCatalog.id}`;
 
-    // Users
+    rolesURL = `/orgs/${org.id}/roles`;
+    newRoleURL = `${rolesURL}/new`;
+    roleURL = `${rolesURL}/${role.id}`;
+
+    groupsURL = `/orgs/${org.id}/groups`;
+    newGroupURL = `${groupsURL}/new`;
+    groupURL = `${groupsURL}/${group.id}`;
+
     usersURL = `/orgs/${org.id}/users`;
     newUserURL = `${usersURL}/${user.id}`;
     userURL = `${usersURL}/new`;
@@ -45,7 +54,7 @@ module('Acceptance | breadcrumbs', function (hooks) {
   test('can navigate via breadcrumbs to projects from project', async function (assert) {
     assert.expect(3);
     await visit(projectURL);
-    assert.equal(currentURL(), projectURL, 'We begin on th expected page.');
+    assert.equal(currentURL(), projectURL, 'We begin on the expected page.');
     crumbPath = new URL(find('.rose-nav-breadcrumbs-link:last-child').href).pathname;
     assert.equal(crumbPath, projectURL, 'Last crumb has expected URL.');
     await click(find('.rose-nav-breadcrumbs-link:first-child'));
@@ -55,7 +64,7 @@ module('Acceptance | breadcrumbs', function (hooks) {
   test('can navigate via breadcrumbs to projects from new project', async function (assert) {
     assert.expect(3);
     await visit(newProjectURL);
-    assert.equal(currentURL(), newProjectURL, 'We begin on th expected page.');
+    assert.equal(currentURL(), newProjectURL, 'We begin on the expected page.');
     crumbPath = new URL(find('.rose-nav-breadcrumbs-link:last-child').href).pathname;
     assert.equal(crumbPath, newProjectURL, 'Last crumb has expected URL.');
     await click(find('.rose-nav-breadcrumbs-link:first-child'));
@@ -65,7 +74,7 @@ module('Acceptance | breadcrumbs', function (hooks) {
   test('can navigate via breadcrumbs to project from host catalogs', async function (assert) {
     assert.expect(3);
     await visit(hostCatalogsURL);
-    assert.equal(currentURL(), hostCatalogsURL, 'We begin on th expected page.');
+    assert.equal(currentURL(), hostCatalogsURL, 'We begin on the expected page.');
     crumbPath = new URL(find('.rose-nav-breadcrumbs-link:last-child').href).pathname;
     assert.equal(crumbPath, hostCatalogsURL, 'Last crumb has expected URL.');
     await click(findAll('.rose-nav-breadcrumbs-link')[1]);
@@ -75,7 +84,7 @@ module('Acceptance | breadcrumbs', function (hooks) {
   test('can navigate via breadcrumbs to host catalogs from host catalog', async function (assert) {
     assert.expect(3);
     await visit(hostCatalogURL);
-    assert.equal(currentURL(), hostCatalogURL, 'We begin on th expected page.');
+    assert.equal(currentURL(), hostCatalogURL, 'We begin on the expected page.');
     crumbPath = new URL(find('.rose-nav-breadcrumbs-link:last-child').href).pathname;
     assert.equal(crumbPath, hostCatalogURL, 'Last crumb has expected URL.');
     await click(findAll('.rose-nav-breadcrumbs-link')[2]);
@@ -85,13 +94,53 @@ module('Acceptance | breadcrumbs', function (hooks) {
   test('can navigate via breadcrumbs to host catalogs from new host catalog', async function (assert) {
     assert.expect(3);
     await visit(newHostCatalogURL);
-    assert.equal(currentURL(), newHostCatalogURL, 'We begin on th expected page.');
+    assert.equal(currentURL(), newHostCatalogURL, 'We begin on the expected page.');
     crumbPath = new URL(find('.rose-nav-breadcrumbs-link:last-child').href).pathname;
     assert.equal(crumbPath, newHostCatalogURL, 'Last crumb has expected URL.');
     await click(findAll('.rose-nav-breadcrumbs-link')[2]);
     assert.equal(currentURL(), hostCatalogsURL, 'After navigating via breadcrumbs, we are one level up.');
   });
 
+  test('can navigate via breadcrumbs to roles from role', async function (assert) {
+    assert.expect(3);
+    await visit(roleURL);
+    assert.equal(currentURL(), roleURL, 'We begin on the expected page.');
+    crumbPath = new URL(find('.rose-nav-breadcrumbs-link:last-child').href).pathname;
+    assert.equal(crumbPath, roleURL, 'Last crumb has expected URL.');
+    await click(find('.rose-nav-breadcrumbs-link:first-child'));
+    assert.equal(currentURL(), rolesURL, 'After navigating via breadcrumbs, we are one level up.');
+  });
+
+  test('can navigate via breadcrumbs to roles from new role', async function (assert) {
+    assert.expect(3);
+    await visit(newRoleURL);
+    assert.equal(currentURL(), newRoleURL, 'We begin on the expected page.');
+    crumbPath = new URL(find('.rose-nav-breadcrumbs-link:last-child').href).pathname;
+    assert.equal(crumbPath, newRoleURL, 'Last crumb has expected URL.');
+    await click(find('.rose-nav-breadcrumbs-link:first-child'));
+    assert.equal(currentURL(), rolesURL, 'After navigating via breadcrumbs, we are one level up.');
+  });
+
+  test('can navigate via breadcrumbs to groups from group', async function (assert) {
+    assert.expect(3);
+    await visit(groupURL);
+    assert.equal(currentURL(), groupURL, 'We begin on the expected page.');
+    crumbPath = new URL(find('.rose-nav-breadcrumbs-link:last-child').href).pathname;
+    assert.equal(crumbPath, groupURL, 'Last crumb has expected URL.');
+    await click(find('.rose-nav-breadcrumbs-link:first-child'));
+    assert.equal(currentURL(), groupsURL, 'After navigating via breadcrumbs, we are one level up.');
+  });
+
+  test('can navigate via breadcrumbs to groups from new group', async function (assert) {
+    assert.expect(3);
+    await visit(newGroupURL);
+    assert.equal(currentURL(), newGroupURL, 'We begin on the expected page.');
+    crumbPath = new URL(find('.rose-nav-breadcrumbs-link:last-child').href).pathname;
+    assert.equal(crumbPath, newGroupURL, 'Last crumb has expected URL.');
+    await click(find('.rose-nav-breadcrumbs-link:first-child'));
+    assert.equal(currentURL(), groupsURL, 'After navigating via breadcrumbs, we are one level up.');
+  });
+
   test('can navigate via breadcrumbs to users from user', async function (assert) {
     assert.expect(3);
     await visit(userURL);

ui/core/tests/acceptance/groups-test.js

@@ -0,0 +1,192 @@
+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 | groups', function(hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+
+  hooks.beforeEach(function () {
+    this.server.create('org');
+  });
+
+  test('visiting groups', async function (assert) {
+    assert.expect(1);
+    await visit('/orgs/1/groups');
+    await a11yAudit();
+    assert.equal(currentURL(), '/orgs/1/groups');
+  });
+
+  test('can create new group', async function (assert) {
+    assert.expect(4);
+    assert.equal(this.server.db.groups.length, 0);
+    await visit('/orgs/1/groups/new');
+    await fillIn('[name="name"]', 'group name');
+    await click('[type="submit"]');
+    assert.equal(currentURL(), '/orgs/1/groups/1');
+    assert.equal(this.server.db.groups.length, 1);
+    assert.equal(this.server.db.groups[0].name, 'group name');
+  });
+
+  test('can cancel new group creation', async function (assert) {
+    assert.expect(3);
+    assert.equal(this.server.db.groups.length, 0);
+    await visit('/orgs/1/groups/new');
+    await fillIn('[name="name"]', 'group name');
+    await click('.rose-form-actions [type="button"]');
+    assert.equal(currentURL(), '/orgs/1/groups');
+    assert.equal(this.server.db.groups.length, 0);
+  });
+
+  test('saving a new group with invalid fields displays error messages', async function (assert) {
+    assert.expect(2);
+    this.server.post('/orgs/:org_id/groups', () => {
+      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/groups/new');
+    await fillIn('[name="name"]', 'group 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 group', async function (assert) {
+    assert.expect(2);
+    this.server.createList('group', 1, {name: 'Admin group'});
+    await visit('/orgs/1/groups/1');
+    await fillIn('[name="name"]', 'Updated admin group');
+    await click('.rose-form-actions [type="submit"]');
+    assert.equal(currentURL(), '/orgs/1/groups/1');
+    assert.equal(this.server.db.groups[0].name, 'Updated admin group');
+  });
+
+  test('can cancel changes to an existing group', async function (assert) {
+    assert.expect(1);
+    this.server.createList('group', 1, {name: 'Admin group'});
+    await visit('/orgs/1/groups/1');
+    await fillIn('[name="name"]', 'Updated admin group');
+    await click('.rose-form-actions [type="button"]');
+    assert.equal(find('[name="name"]').value, 'Admin group');
+  });
+
+  test('can delete a group', async function(assert) {
+    assert.expect(2);
+    this.server.createList('group', 1);
+    assert.equal(this.server.db.groups.length, 1);
+    await visit('/orgs/1/groups/1');
+    await click('.rose-button-warning');
+    assert.equal(this.server.db.groups.length, 0);
+  });
+
+  test('saving an existing group with invalid fields displays error messages', async function (assert) {
+    assert.expect(2);
+    this.server.createList('group', 1);
+    this.server.patch('/orgs/:org_id/groups/: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/groups/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('group', 1);
+    this.server.patch('/orgs/:org_id/groups/:id', () => {
+      return new Response(
+        490,
+        {},
+        {
+          status: 490,
+          code: 'error',
+          message: 'Oops.',
+        }
+      );
+    });
+    await visit('/orgs/1/groups/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('group', 1);
+    this.server.del('/orgs/:org_id/groups/:id', () => {
+      return new Response(
+        490,
+        {},
+        {
+          status: 490,
+          code: 'error',
+          message: 'Oops.',
+        }
+      );
+    });
+    await visit('/orgs/1/groups/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/groups-test.js

@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Controller | orgs/org/groups', function(hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function(assert) {
+    let controller = this.owner.lookup('controller:orgs/org/groups');
+    assert.ok(controller);
+  });
+});

ui/core/tests/unit/controllers/orgs/org/groups/group-test.js

@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Controller | orgs/org/groups/group', function(hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function(assert) {
+    let controller = this.owner.lookup('controller:orgs/org/groups/group');
+    assert.ok(controller);
+  });
+});

ui/core/tests/unit/controllers/orgs/org/groups/new-test.js

@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Controller | orgs/org/groups/new', function(hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function(assert) {
+    let controller = this.owner.lookup('controller:orgs/org/groups/new');
+    assert.ok(controller);
+  });
+});

ui/core/tests/unit/routes/orgs/org/groups-test.js

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | orgs/org/groups', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:orgs/org/groups');
+    assert.ok(route);
+  });
+});

ui/core/tests/unit/routes/orgs/org/groups/group-test.js

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | orgs/org/groups/group', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:orgs/org/groups/group');
+    assert.ok(route);
+  });
+});

ui/core/tests/unit/routes/orgs/org/groups/group/index-test.js

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | orgs/org/groups/group/index', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:orgs/org/groups/group/index');
+    assert.ok(route);
+  });
+});

ui/core/tests/unit/routes/orgs/org/groups/index-test.js

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | orgs/org/groups/index', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:orgs/org/groups/index');
+    assert.ok(route);
+  });
+});

ui/core/tests/unit/routes/orgs/org/groups/new-test.js

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | orgs/org/groups/new', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:orgs/org/groups/new');
+    assert.ok(route);
+  });
+});

ui/core/translations/en-us.yaml

@@ -9,6 +9,8 @@ resources:
   users: Users 
   role: Role
   roles: Roles
+  group: Group
+  groups: Groups
   projects: Projects
   project: Project
   host-catalog: Host Catalog
@@ -24,6 +26,7 @@ titles:
   host-catalogs-welcome: Welcome to Host Catalogs
   users-welcome: Welcome to Users
   roles-welcome: Welcome to Roles
+  groups-welcome: Welcome to Groups
 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.
@@ -31,6 +34,7 @@ descriptions:
   host-catalogs-welcome: Host catalogs allow you to configure to collect and create hosts and host sets. To start, create a host catalog.
   users-welcome: Users are authorized to access Watchtower.
   roles-welcome: Roles are collections of capabilities that can be granted to user and/or groups.
+  groups-welcome: Groups are collections of users.
 states:
   info: Info
   success: Success
@@ -62,6 +66,9 @@ notify:
   role:
     create-success: Role created succesfully.
     delete-success: Deleted role successfully.
+  group:
+    create-success: Group created succesfully.
+    delete-success: Deleted group successfully.
 dev:
   default-org: Default Org
   menu-item: Menu item