feat: 🎸 add user accounts listing and remove

ui/core/app/components/form/account/password/index.hbs

@@ -55,7 +55,6 @@
     @value={{@model.attributes.login_name}}
     @label={{t "form.login_name.label"}}
     @error={{@model.errors.login_name}}
-    @helperText={{t "form.login_name.help"}}
     readonly={{false}}
   as |field|>
     {{#if @model.errors.login_name}}
@@ -74,7 +73,6 @@
       @value={{this.password}}
       @label={{t "form.password.label"}}
       @error={{@model.errors.password}}
-      @helperText={{t "form.password.help"}}
       readonly={{false}}
       autocomplete="new-password"
     as |field|>

ui/core/app/router.js

@@ -58,7 +58,9 @@ Router.map(function () {
       });
 
       this.route('users', function () {
-        this.route('user', { path: ':user_id' }, function () {});
+        this.route('user', { path: ':user_id' }, function () {
+          this.route('accounts');
+        });
         this.route('new');
       });
 

ui/core/app/routes/scopes/scope/users/user.js

@@ -12,4 +12,27 @@ export default class ScopesScopeUsersUserRoute extends Route {
   async model({ user_id }) {
     return this.store.findRecord('user', user_id);
   }
+
+  /**
+   * Renders the route-set specific page sections
+   * @override
+   */
+  renderTemplate() {
+    super.renderTemplate(...arguments);
+
+    this.render('scopes/scope/users/user/-header', {
+      into: 'scopes/scope/users/user',
+      outlet: 'header',
+    });
+
+    this.render('scopes/scope/users/user/-actions', {
+      into: 'scopes/scope/users/user',
+      outlet: 'actions',
+    });
+
+    this.render('scopes/scope/users/user/-navigation', {
+      into: 'scopes/scope/users/user',
+      outlet: 'navigation',
+    });
+  }
 }

ui/core/app/routes/scopes/scope/users/user/accounts.js

@@ -0,0 +1,51 @@
+import Route from '@ember/routing/route';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { hash, all } from 'rsvp';
+import loading from 'ember-loading/decorator';
+
+export default class ScopesScopeUsersUserAccountsRoute extends Route {
+  // =services
+
+  @service intl;
+  @service notify;
+
+  // =methods
+
+  /**
+   * Returns users associated with this user.
+   * @return {Promise{user: UserModel, accounts: Promise{[AccountModel]}}}
+   */
+  model() {
+    const { id: scopeID } = this.modelFor('scopes.scope');
+    const user = this.modelFor('scopes.scope.users.user');
+    return hash({
+      user,
+      accounts: all(
+        user.account_ids.map((id) =>
+          this.store.findRecord('account', id, { adapterOptions: { scopeID } })
+        )
+      ),
+    });
+  }
+
+  // =actions
+
+  /**
+   * Remove a account from the current role and redirect to accounts index.
+   * @param {UserModel} user
+   * @param {AccountModel} account
+   */
+  @action
+  @loading
+  async removeAccount(user, account) {
+    try {
+      await user.removeAccount(account.id);
+      await this.refresh();
+      this.notify.success(this.intl.t('notifications.remove-success'));
+    } catch (error) {
+      // TODO: replace with translated strings
+      this.notify.error(error.message, { closeAfter: null });
+    }
+  }
+}

ui/core/app/templates/scopes/scope/auth-methods/auth-method/accounts/index.hbs

@@ -4,7 +4,7 @@
     <table.header as |header|>
       <header.row as |row|>
         <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
-        <row.headerCell>{{t 'form.login_name.label'}}</row.headerCell>
+        <row.headerCell>{{t 'form.username.label'}}</row.headerCell>
         <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
       </header.row>
     </table.header>

ui/core/app/templates/scopes/scope/users/user.hbs

@@ -1,3 +1,25 @@
 {{title @model.displayName}}
 
-{{outlet}}
+<Rose::Layout::Page as |page|>
+
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    {{outlet "header"}}
+  </page.header>
+
+  <page.navigation>
+    {{outlet "navigation"}}
+  </page.navigation>
+
+  <page.actions>
+    {{outlet "actions"}}
+  </page.actions>
+
+  <page.body>
+    {{outlet}}
+  </page.body>
+
+</Rose::Layout::Page>

ui/core/app/templates/scopes/scope/users/user/-actions.hbs

@@ -0,0 +1,9 @@
+<Rose::Dropdown @text="{{t 'actions.manage'}}" @dropdownRight={{true}} as |dropdown|>
+  <dropdown.button
+    @style="danger"
+    @disabled={{@model.canSave}}
+    {{on "click" (route-action "delete" @model)}}
+  >
+    {{t 'actions.delete-user'}}
+  </dropdown.button>
+</Rose::Dropdown>

ui/core/app/templates/scopes/scope/users/user/-header.hbs

@@ -0,0 +1,3 @@
+<h2>{{t "resources.user.title"}}</h2>
+<p>{{t "resources.user.description"}}</p>
+<p><code>{{@model.id}}</code></p>

ui/core/app/templates/scopes/scope/users/user/-navigation.hbs

@@ -0,0 +1,8 @@
+<Rose::Nav::Tabs as |nav|>
+  <nav.link @route='scopes.scope.users.user.index'>
+    {{t 'titles.details'}}
+  </nav.link>
+  <nav.link @route='scopes.scope.users.user.accounts'>
+    {{t 'resources.user.messages.accounts.title'}}
+  </nav.link>
+</Rose::Nav::Tabs>

ui/core/app/templates/scopes/scope/users/user/accounts.hbs

@@ -0,0 +1,53 @@
+{{title (t 'resources.user.messages.accounts.title')}}
+
+{{#if @model.accounts}}
+
+  <Rose::Table as |table|>
+    <table.header as |header|>
+      <header.row as |row|>
+        <row.headerCell>{{t 'form.username.label'}}</row.headerCell>
+        <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
+        <row.headerCell>{{t "titles.actions"}}</row.headerCell>
+      </header.row>
+    </table.header>
+    <table.body as |body|>
+      {{#each @model.accounts as |account|}}
+        <body.row as |row|>
+          <row.headerCell>
+            {{account.username}}
+          </row.headerCell>
+          <row.cell>
+            <code>{{account.id}}</code>
+          </row.cell>
+            <row.cell>
+            <Rose::Dropdown
+              @icon="more-horizontal"
+              @iconOnly={{true}}
+              @showCaret={{false}}
+              @dropdownRight={{true}}
+              @text="{{t "actions.manage"}}" as |dropdown|
+            >
+              <dropdown.button
+                @style="danger"
+                {{on "click" (route-action "removeAccount" @model.user account)}}
+              >
+                {{t "actions.remove"}}
+              </dropdown.button>
+            </Rose::Dropdown>
+          </row.cell>
+        </body.row>
+      {{/each}}
+    </table.body>
+  </Rose::Table>
+
+{{else}}
+
+  <Rose::Layout::Centered>
+    <Rose::Message @title={{t "resources.user.messages.accounts.title"}} as |message|>
+      <message.description>
+        {{t "resources.user.messages.accounts.description"}}
+      </message.description>
+    </Rose::Message>
+  </Rose::Layout::Centered>
+
+{{/if}}

ui/core/app/templates/scopes/scope/users/user/index.hbs

@@ -1,41 +1,5 @@
-<Rose::Layout::Page as |page|>
-
-  <page.breadcrumbs>
-    <BreadCrumbs />
-  </page.breadcrumbs>
-
-  <page.header>
-    <h2>{{t "resources.user.title"}}</h2>
-    <p>{{t "resources.user.description"}}</p>
-    <p><code>{{@model.id}}</code></p>
-  </page.header>
-
-  <page.actions>
-    <Rose::Dropdown @text="{{t 'actions.manage'}}" @dropdownRight={{true}} as |dropdown|>
-      <dropdown.button
-        @style="danger"
-        @disabled={{@model.canSave}}
-        {{on "click" (route-action "delete" @model)}}
-      >
-        {{t 'actions.delete-user'}}
-      </dropdown.button>
-    </Rose::Dropdown>
-  </page.actions>
-
-  <page.navigation>
-    <Rose::Nav::Tabs as |nav|>
-      <nav.link @route='scopes.scope.users.user'>
-        {{t 'titles.details'}}
-      </nav.link>
-    </Rose::Nav::Tabs>
-  </page.navigation>
-
-  <page.body>
-    <Form::User
-      @model={{@model}}
-      @submit={{route-action "save" @model}}
-      @cancel={{route-action "cancel" @model}}
-    />
-  </page.body>
-
-</Rose::Layout::Page>
+<Form::User
+  @model={{@model}}
+  @submit={{route-action "save" @model}}
+  @cancel={{route-action "cancel" @model}}
+/>

ui/core/mirage/config.js

@@ -90,6 +90,31 @@ export default function() {
   this.get('/users/:id');
   this.patch('/users/:id');
   this.del('/users/:id');
+  this.post('/users/:idMethod', function ({ users }, { params: { idMethod } }) {
+    const attrs = this.normalizedRequestAttrs();
+    const id = idMethod.split(':')[0];
+    const method = idMethod.split(':')[1];
+    const user = users.find(id);
+    const updatedAttrs = {
+      version: attrs.version,
+      accountIds: user.accountIds
+    };
+    // If adding accounts, push them into the array
+    if (method === 'add-accounts') {
+      attrs.accountIds.forEach(id => {
+        if (!updatedAttrs.accountIds.includes(id)) {
+          updatedAttrs.accountIds.push(id);
+        }
+      });
+    }
+    // If deleting accounts, filter them out of the array
+    if (method === 'remove-accounts') {
+      updatedAttrs.accountIds = updatedAttrs.accountIds.filter(id => {
+        return !attrs.accountIds.includes(id);
+      });
+    }
+    return user.update(updatedAttrs);
+  });
 
   // IAM: Groups
   this.get('/groups', ({ groups }, { queryParams: { scope_id: scopeId } }) => {

ui/core/mirage/factories/auth-method.js

@@ -5,12 +5,15 @@ export default factory.extend({
   id: (i) => `auth-method-id-${i}`,
 
   /**
-   * Adds accounts to auth method.
+   * Adds accounts (with associated users) to auth method.
    */
-  withAccounts: trait({
+  withAccountsAndUsers: trait({
     afterCreate(authMethod, server) {
       const { scope } = authMethod;
-      server.createList('account', 5, { scope, authMethod });
+      server.createList('user', 5, { scope }).map(user => {
+        const { id } = server.create('account', { scope, authMethod });
+        user.update({ accountIds: [id] });
+      });
     }
   })
 

ui/core/mirage/models/user.js

@@ -1,7 +1,8 @@
-import { Model, belongsTo } from 'ember-cli-mirage';
+import { Model, belongsTo, hasMany } from 'ember-cli-mirage';
 
 export default Model.extend({
 
-  scope: belongsTo()
+  scope: belongsTo(),
+  accounts: hasMany('account')
 
 });

ui/core/mirage/scenarios/default.js

@@ -15,7 +15,7 @@ export default function(server) {
 
   // Auth
   server.createList('auth-method', 3, { scope: globalScope });
-  server.createList('auth-method', 3, { scope: orgScope }, 'withAccounts');
+  server.createList('auth-method', 3, { scope: orgScope }, 'withAccountsAndUsers');
 
   // Groups and Users
   server.createList('group', 5, { scope: orgScope }, 'withMembers');

ui/core/mirage/serializers/user.js

@@ -1,5 +1,18 @@
 import ApplicationSerializer from './application';
+import { underscore } from '@ember/string';
 
 export default ApplicationSerializer.extend({
-  modelName: 'user'
+  modelName: 'user',
+
+  keyForRelationshipIds(relationshipName) {
+    return `${this._container.inflector.singularize(
+      underscore(relationshipName)
+    )}_ids`;
+  },
+
+  _hashForModel(model) {
+    const json = ApplicationSerializer.prototype._hashForModel.apply(this, arguments);
+    if (model.accountIds.length) json.account_ids = model.accountIds;
+    return json;
+  }
 });

ui/core/tests/acceptance/users/accounts-test.js

@@ -0,0 +1,142 @@
+import { module, test } from 'qunit';
+import { visit, currentURL, click, find, findAll } 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 {
+  authenticateSession,
+  // These are left here intentionally for future reference.
+  //currentSession,
+  //invalidateSession,
+} from 'ember-simple-auth/test-support';
+
+module('Acceptance | users | accounts', function (hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+
+  const instances = {
+    scopes: {
+      global: null,
+      org: null,
+    },
+    user: null,
+  };
+  const urls = {
+    orgScope: null,
+    users: null,
+    user: null,
+    accounts: null,
+    addAccounts: null,
+  };
+  let accountsCount;
+
+  hooks.beforeEach(function () {
+    authenticateSession({});
+    instances.scopes.global = this.server.create('scope', { id: 'global' });
+    instances.scopes.org = this.server.create('scope', {
+      type: 'org',
+      scope: { id: 'global', type: 'global' },
+    });
+    this.server.create('auth-method', {
+      scope: instances.scopes.org
+    }, 'withAccountsAndUsers');
+    instances.user = this.server.db.users[0];
+    accountsCount = instances.user.accountIds.length;
+    urls.users = `/scopes/${instances.scopes.org.id}/users`;
+    urls.user = `${urls.users}/${instances.user.id}`;
+    urls.accounts = `${urls.user}/accounts`;
+    urls.addAccounts = `${urls.user}/add-accounts`;
+  });
+
+  test('visiting user accounts', async function (assert) {
+    assert.expect(2);
+    await visit(urls.accounts);
+    await a11yAudit();
+    assert.equal(currentURL(), urls.accounts);
+    assert.equal(findAll('tbody tr').length, accountsCount);
+  });
+
+  test('can remove a account', async function (assert) {
+    assert.expect(2);
+    await visit(urls.accounts);
+    assert.equal(findAll('tbody tr').length, accountsCount);
+    await click('tbody tr .rose-dropdown-button-danger');
+    assert.equal(findAll('tbody tr').length, accountsCount - 1);
+  });
+
+  test('shows error message on account remove', async function (assert) {
+    assert.expect(2);
+    this.server.post('/users/:idMethod', () => {
+      return new Response(
+        400,
+        {},
+        {
+          status: 400,
+          code: 'invalid_argument',
+          message: 'The request was invalid.',
+          details: {},
+        }
+      );
+    });
+    await visit(urls.accounts);
+    assert.equal(findAll('tbody tr').length, accountsCount);
+    await click('tbody tr .rose-dropdown-button-danger');
+    assert.ok(find('[role="alert"]'));
+  });
+
+  // test('visiting account add accounts', async function(assert) {
+  //   assert.expect(1);
+  //   await visit(urls.addAccounts);
+  //   await a11yAudit();
+  //   assert.equal(currentURL(), urls.addAccounts);
+  // });
+  //
+  // test('select and save accounts to add', async function (assert) {
+  //   assert.expect(3);
+  //   instances.user.update({ accountIds: [] });
+  //   await visit(urls.accounts);
+  //   assert.equal(findAll('tbody tr').length, 0);
+  //   await click('.rose-layout-page-actions a')
+  //   assert.equal(currentURL(), urls.addAccounts);
+  //   await click('tbody label');
+  //   await click('form [type="submit"]');
+  //   await visit(urls.accounts);
+  //   assert.equal(findAll('tbody tr').length, 1);
+  // });
+  //
+  // test('select and cancel accounts to add', async function (assert) {
+  //   assert.expect(4);
+  //   await visit(urls.accounts);
+  //   assert.equal(findAll('tbody tr').length, accountsCount);
+  //   await click('tbody tr .rose-dropdown-button-danger');
+  //   assert.equal(findAll('tbody tr').length, accountsCount - 1);
+  //   await click('.rose-layout-page-actions a')
+  //   assert.equal(currentURL(), urls.addAccounts);
+  //   await click('tbody label');
+  //   await click('form [type="button"]');
+  //   await visit(urls.accounts);
+  //   assert.equal(findAll('tbody tr').length, accountsCount - 1);
+  // });
+  //
+  // test('shows error message on account add', async function (assert) {
+  //   assert.expect(1);
+  //   this.server.post('/users/:idMethod', () => {
+  //     return new Response(
+  //       400,
+  //       {},
+  //       {
+  //         status: 400,
+  //         code: 'invalid_argument',
+  //         message: 'The request was invalid.',
+  //         details: {},
+  //       }
+  //     );
+  //   });
+  //   instances.user.update({ accountIds: [] });
+  //   await visit(urls.addAccounts);
+  //   await click('tbody label');
+  //   await click('form [type="submit"]');
+  //   assert.ok(find('[role="alert"]'));
+  // });
+});

ui/core/tests/unit/routes/scopes/scope/users/user/accounts-test.js

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

ui/core/translations/form/en-us.yaml

@@ -10,14 +10,14 @@ type:
   label: Type
   help: The type of the resource, to help differentiate schemas
 login_name:
+  label: Login Name
+username:
   label: Username
-  help: The username for the account
 set_password:
   label: Password
-  help: Create a new password for the account
+  help: Create a new password
 password:
   label: Password
-  help: The password for the account
 grant:
   label: Grant
   help: A permissions grant string for a role

ui/core/translations/resources/en-us.yaml

@@ -122,6 +122,14 @@ user:
   messages:
     welcome:
       title: Welcome to Users
+    accounts:
+      title: Accounts
+      description: Users may be associated with any number of accounts.
+    add-accounts:
+      title: Add Accounts
+      description: Select accounts to associate with this user.
+  actions:
+    add-accounts: Add Accounts
 role:
   title: Role
   title_plural: Roles
@@ -180,4 +188,4 @@ target:
         description: No hosts sets available to add to target.
       add:
         title: Add Host Sets
-        description: Select host sets to assign to this target.
+        description: Select host sets to assign to this target.