feat: 🎸 add user add-accounts flow

ui/core/app/components/form/target/add-host-sets/index.hbs

@@ -18,7 +18,7 @@
           <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
           <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
           <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
-          <row.headerCell>{{t 'resources.host-catalog.title_plural'}}</row.headerCell>
+          <row.headerCell>{{t 'resources.host-catalog.title'}}</row.headerCell>
         </header.row>
       </table.header>
       <table.body as |body|>
@@ -57,4 +57,4 @@
       </message.link>
     </Rose::Message>
   </Rose::Layout::Centered>
-{{/unless}}
+{{/unless}}

ui/core/app/components/form/user/add-accounts/index.hbs

@@ -0,0 +1,56 @@
+{{#if this.hasAvailableAccounts}}
+  <Rose::Form
+    class="full-width"
+    @onSubmit={{fn this.submit @submit}}
+    @cancel={{@cancel}}
+    @disabled={{@model.isSaving}}
+    @error={{@model.errors.base}}
+    as |form|
+  >
+
+    <form.actions
+      @submitText={{t "resources.user.actions.add-accounts"}}
+      @cancelText={{t "actions.cancel"}} />
+
+    <Rose::Table as |table|>
+      <table.header as |header|>
+        <header.row as |row|>
+          <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
+          <row.headerCell>{{t 'form.username.label'}}</row.headerCell>
+          <row.headerCell>{{t 'resources.auth-method.title'}}</row.headerCell>
+        </header.row>
+      </table.header>
+      <table.body as |body|>
+        {{#each this.filteredAccounts as |account|}}
+          <body.row as |row|>
+            <row.cell>
+              <form.checkbox
+                @label={{account.id}}
+                @description={{account.description}}
+                onChange={{fn this.toggleAccount account}} />
+            </row.cell>
+            <row.cell>{{account.username}}</row.cell>
+            <row.cell>
+              <code>{{account.auth_method_id}}</code>
+            </row.cell>
+          </body.row>
+        {{/each}}
+      </table.body>
+    </Rose::Table>
+
+  </Rose::Form>
+{{/if}}
+
+{{#unless this.hasAvailableAccounts}}
+  <Rose::Layout::Centered>
+    <Rose::Message @title={{t "resources.user.messages.no-accounts.title"}} as |message|>
+      <message.description>
+        {{t "resources.user.messages.no-accounts.description"}}
+      </message.description>
+      <message.link @route="scopes.scope.users.user.accounts">
+        <Rose::Icon @name="chevron-left" />
+        {{t "actions.back"}}
+      </message.link>
+    </Rose::Message>
+  </Rose::Layout::Centered>
+{{/unless}}

ui/core/app/components/form/user/add-accounts/index.js

@@ -0,0 +1,53 @@
+import Component from '@glimmer/component';
+import { computed, action } from '@ember/object';
+import { A } from '@ember/array';
+
+export default class FormUserAddAccountsComponent extends Component {
+  // =properties
+
+  /**
+   * Array of selected account IDs.
+   * @type {EmberArray}
+   */
+  selectedAccountIDs = A();
+
+  /**
+   * Checks for unassigned accounts.
+   * @param {[AccountModel]} filteredAccounts
+   * @type {boolean}
+   */
+  @computed('filteredAccounts')
+  get hasAvailableAccounts() {
+    return this.filteredAccounts.length > 0;
+  }
+
+  /**
+   * Accounts not already added to the user.
+   * @type {[AccountModel]}
+   */
+  @computed('args.{accounts.[],model.account_ids.[]}')
+  get filteredAccounts() {
+    // Get IDs for accounts already added to the current user
+    const alreadyAddedAccountIDs = this.args.model.account_ids;
+    const notAddedAccounts = this.args.accounts.filter(
+      ({ id }) => !alreadyAddedAccountIDs.includes(id)
+    );
+    return notAddedAccounts;
+  }
+
+  // =actions
+
+  @action
+  toggleAccount(account) {
+    if (!this.selectedAccountIDs.includes(account.id)) {
+      this.selectedAccountIDs.addObject(account.id);
+    } else {
+      this.selectedAccountIDs.removeObject(account.id);
+    }
+  }
+
+  @action
+  submit(fn) {
+    fn(this.selectedAccountIDs);
+  }
+}

ui/core/app/router.js

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

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

@@ -0,0 +1,90 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { all } from 'rsvp';
+import loading from 'ember-loading/decorator';
+
+export default class ScopesScopeUsersUserAddAccountsRoute extends Route {
+  // =services
+
+  @service intl;
+  @service notify;
+
+  // =methods
+
+  /**
+   * Emtpy out any previously loaded acconuts.
+   */
+  beforeModel() {
+    this.store.unloadAll('account');
+  }
+
+  /**
+   * Returns the current target, all host catalogs, and all host sets.
+   * @return {{target: TargetModel, hostCatalogs: [HostCatalogModel], hostSets: [HostSetModel]}}
+   */
+  async model() {
+    const user = this.modelFor('scopes.scope.users.user');
+    const { id: scope_id } = this.modelFor('scopes.scope');
+    const authMethods = await this.store.query('auth-method', { scope_id });
+    await all(
+      authMethods.map(({ id: auth_method_id }) =>
+        this.store.query('account', { auth_method_id })
+      )
+    );
+    const accounts = this.store.peekAll('account');
+    return { user, authMethods, accounts };
+  }
+
+  /**
+   * Renders the route-set specific page sections
+   * @override
+   */
+  renderTemplate() {
+    super.renderTemplate(...arguments);
+
+    this.render('scopes/scope/users/user/add-accounts/-header', {
+      into: 'scopes/scope/users/user',
+      outlet: 'header',
+    });
+
+    this.render('-empty', {
+      into: 'scopes/scope/users/user',
+      outlet: 'actions',
+    });
+
+    this.render('-empty', {
+      into: 'scopes/scope/users/user',
+      outlet: 'navigation',
+    });
+  }
+
+  // =actions
+
+  /**
+   * Adds accounts to the user and saves, replaces with the accounts index
+   * route, and notifies the user of success or error.
+   * @param {UserModel} user
+   * @param {[string]} accountIDs
+   */
+  @action
+  @loading
+  async addAccounts(user, accountIDs) {
+    try {
+      await user.addAccounts(accountIDs);
+      await this.replaceWith('scopes.scope.users.user.accounts');
+      this.notify.success(this.intl.t('notifications.add-success'));
+    } catch (error) {
+      // TODO: replace with translated strings
+      this.notify.error(error.message, { closeAfter: null });
+    }
+  }
+
+  /**
+   * Redirect to user accounts as if nothing ever happened.
+   */
+  @action
+  cancel() {
+    this.replaceWith('scopes.scope.users.user.accounts');
+  }
+}

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

@@ -1,4 +1,7 @@
 <Rose::Dropdown @text="{{t 'actions.manage'}}" @dropdownRight={{true}} as |dropdown|>
+  <dropdown.link @route="scopes.scope.users.user.add-accounts">
+    {{t "resources.user.actions.add-accounts"}}
+  </dropdown.link>
   <dropdown.button
     @style="danger"
     @disabled={{@model.canSave}}

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

@@ -0,0 +1,25 @@
+{{title (t 'resources.user.actions.add-accounts')}}
+
+{{#if @model.accounts}}
+  <Form::User::AddAccounts
+    @model={{@model.user}}
+    @authMethods={{@model.authMethods}}
+    @accounts={{@model.accounts}}
+    @submit={{route-action "addAccounts" @model.user}}
+    @cancel={{route-action "cancel"}}
+  />
+{{/if}}
+
+{{#unless @model.accounts}}
+  <Rose::Layout::Centered>
+    <Rose::Message @title={{t "resources.user.messages.no-accounts.title"}} as |message|>
+      <message.description>
+        {{t "resources.user.messages.no-accounts.description"}}
+      </message.description>
+      <message.link @route="scopes.scope.users.user.accounts">
+        <Rose::Icon @name="chevron-left" />
+        {{t "actions.back"}}
+      </message.link>
+    </Rose::Message>
+  </Rose::Layout::Centered>
+{{/unless}}

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

@@ -0,0 +1,2 @@
+<h2>{{t "resources.user.messages.add-accounts.title"}}</h2>
+<p>{{t "resources.user.messages.add-accounts.description"}}</p>

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

@@ -41,7 +41,7 @@ module('Acceptance | users | accounts', function (hooks) {
     this.server.create('auth-method', {
       scope: instances.scopes.org
     }, 'withAccountsAndUsers');
-    instances.user = this.server.db.users[0];
+    instances.user = this.server.schema.users.all().models[0];
     accountsCount = instances.user.accountIds.length;
     urls.users = `/scopes/${instances.scopes.org.id}/users`;
     urls.user = `${urls.users}/${instances.user.id}`;
@@ -85,58 +85,58 @@ module('Acceptance | users | accounts', function (hooks) {
     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"]'));
-  // });
+  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/integration/components/form/user/add-accounts-test.js

@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+// import { render } from '@ember/test-helpers';
+// import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | form/user/add-accounts', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    assert.expect(0);
+  });
+});

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

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

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

@@ -128,6 +128,9 @@ user:
     add-accounts:
       title: Add Accounts
       description: Select accounts to associate with this user.
+    no-accounts:
+      title: No Accounts Available
+      description: There are no accounts available to add to this user.
   actions:
     add-accounts: Add Accounts
 role: