Merge branch 'develop' into feature-doc-links

ui/core/app/components/copyable/index.hbs

@@ -1,20 +1,21 @@
-{{#if this.isClipboardLibrarySupported}}
-  <span
-    id={{this.id}}
-    class="copyable"
-    {{did-insert this.register}}
-    {{will-destroy this.destroy}}
-  >
-    {{#if this.copied}}
-      <mark class="copyable-content">
-        {{yield}}
-      </mark>
-    {{else}}
-      <span class="copyable-content">
-        {{yield}}
-      </span>
-    {{/if}}
+<span
+  id={{this.id}}
+  class="copyable"
+  {{did-insert this.register}}
+  {{will-destroy this.destroy}}
+>
 
+  {{#if this.copied}}
+    <mark class="copyable-content">
+      {{yield}}
+    </mark>
+  {{else}}
+    <span class="copyable-content">
+      {{yield}}
+    </span>
+  {{/if}}
+
+  {{#if this.isClipboardLibrarySupported}}
     <Rose::Button
       id={{this.copyableButtonId}}
       aria-describedby={{this.id}}
@@ -22,8 +23,8 @@
       @style="ghost"
       @iconOnly={{if this.copied this.successIcon this.actionIcon}}
       title={{if this.copied this.successText this.actionText}}
-    >{{this.actionText}}</Rose::Button>
-  </span>
-{{else}}
-  {{yield}}
-{{/if}}
+    >
+      {{this.actionText}}
+    </Rose::Button>
+  {{/if}}
+</span>

ui/core/app/components/copyable/index.js

@@ -3,7 +3,6 @@ import ClipboardJS from 'clipboard';
 import { action } from '@ember/object';
 import { generateComponentID } from 'rose/utilities/component-auto-id';
 import { task, timeout } from 'ember-concurrency';
-import { bind } from '@ember/runloop';
 import { tracked } from '@glimmer/tracking';
 
 export default class CopyableComponent extends Component {
@@ -20,6 +19,8 @@ export default class CopyableComponent extends Component {
 
   @tracked copied = false;
 
+  clipboard = null;
+
   /**
    * A Ember Concurrency-based task that updates copy icon to a success state
    * and back after 1 second. This icon flash indicates success on
@@ -30,13 +31,12 @@ export default class CopyableComponent extends Component {
    * is an attribute.
    * @type {Task}
    */
+  /* istanbul ignore next */
   @task(function * () {
     this.copied = true;
     yield timeout(1000);
     this.copied = false;
-  }).drop() successIconTimer;
-
-  // =methods
+  }).drop() confirmCopyTimer;
 
   /**
    * Checks for ClipboardJS support.
@@ -46,14 +46,6 @@ export default class CopyableComponent extends Component {
     return ClipboardJS.isSupported();
   }
 
-  /**
-   * When copy to clipboard is successful, begin timer to show success icon.
-   */
-  onCopySuccess(clipboardEvent) {
-    clipboardEvent.clearSelection();
-    this.successIconTimer.perform();
-  }
-
   // =actions
 
   /**
@@ -61,12 +53,16 @@ export default class CopyableComponent extends Component {
    */
   @action
   register() {
-    if (!this.clipboard) {
-      this.clipboard = new ClipboardJS(`#${this.copyableButtonId}`, {
-        text: () => this.args.text,
-      });
-      this.clipboard.on('success', bind(this, this.onCopySuccess));
-    }
+    this.destroy();
+    /* istanbul ignore next */
+    this.clipboard = new ClipboardJS(`#${this.copyableButtonId}`, {
+      text: () => this.args.text,
+    });
+    /* istanbul ignore next */
+    this.clipboard.on('success', (clipboardEvent) => {
+      clipboardEvent.clearSelection();
+      this.confirmCopyTimer.perform();
+    });
   }
 
   /**
@@ -75,7 +71,8 @@ export default class CopyableComponent extends Component {
   @action
   destroy() {
     this.clipboard?.destroy();
-    this.successIconTimer.cancelAll();
+    this.clipboard = null;
+    this.confirmCopyTimer.cancelAll();
   }
 
 }

ui/core/app/components/form/group/add-members/index.hbs

@@ -39,10 +39,14 @@
 
 {{#unless this.availableUsers}}
   <Rose::Layout::Centered>
-     <Rose::Message @title={{t "titles.no-available-users"}} as |message|>
-       <message.description>
-         {{t "descriptions.no-available-users"}}
-       </message.description>
-     </Rose::Message>
+    <Rose::Message @title={{t "resources.group.messages.no-members.title"}} as |message|>
+      <message.description>
+        {{t "resources.group.messages.no-members.description"}}
+      </message.description>
+      <message.link @route="scopes.scope.groups.group.members">
+        <Rose::Icon @name="chevron-left" />
+        {{t "actions.back"}}
+      </message.link>
+    </Rose::Message>
    </Rose::Layout::Centered>
 {{/unless}}

ui/core/app/components/form/host-set/hosts/index.hbs

@@ -1,50 +0,0 @@
-<Rose::Form
-  class="full-width"
-  @onSubmit={{@submit}}
-  @cancel={{@cancel}}
-  @disabled={{@model.isSaving}}
-  @error={{@model.errors.base}}
-  as |form|
->
-
-  <form.actions
-    @disabled={{if @model.cannotSave @model.cannotSave}}
-    @submitText={{t "actions.save"}}
-    @cancelText={{t "actions.cancel"}} />
-
-  {{!--
-  {{#if @model.errors.host_ids}}
-    <input.errors as |errors|>
-      {{#each @model.errors.host_ids as |error|}}
-        <errors.message>{{error.message}}</errors.message>
-      {{/each}}
-    </input.errors>
-  {{/if}}
-  --}}
-
-  <Rose::Table as |table|>
-    <table.header as |header|>
-      <header.row as |row|>
-        <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
-        <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
-        <row.headerCell>{{t 'form.address.label'}}</row.headerCell>
-      </header.row>
-    </table.header>
-    <table.body as |body|>
-      {{#each this.options as |option|}}
-        <body.row as |row|>
-          <row.cell>
-            <form.checkbox
-              @label={{option.host.id}}
-              @description={{option.host.description}}
-              @checked={{option.selected}}
-              onChange={{fn @toggleHost option.host}} />
-          </row.cell>
-          <row.cell>{{option.host.name}}</row.cell>
-          <row.cell>{{option.host.attributes.address}}</row.cell>
-        </body.row>
-      {{/each}}
-    </table.body>
-  </Rose::Table>
-
-</Rose::Form>

ui/core/app/components/form/host-set/hosts/index.js

@@ -1,21 +0,0 @@
-import Component from '@glimmer/component';
-import { computed } from '@ember/object';
-
-export default class FormHostSetHostsComponent extends Component {
-  // =attributes
-
-  /**
-   * An array of wrapped `HostModel` instances where the wrapper includes
-   * a `selected` boolean field indicating if the host is represented
-   * in `model.host_ids`.
-   * @type {[{host: HostModel, selected: boolean}]}
-   */
-  @computed('args.{hosts.[],model.host_ids.[]}')
-  get options() {
-    const { hosts, model: hostSet } = this.args;
-    return hosts.map((host) => ({
-      host,
-      selected: Boolean(hostSet.host_ids.findBy('value', host.id)),
-    }));
-  }
-}

ui/core/app/controllers/scopes/scope/projects/project/sessions.js

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

ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/add-hosts.js

@@ -64,25 +64,6 @@ export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostSetsHo
 
   // =actions
 
-  /**
-   * Toggles the presence of the passed host ID in the passed host set's
-   * `host_ids` field.
-   * @param {HostSetModel} hostSet
-   * @param {HostModel} host
-   */
-  @action
-  toggleHost(hostSet, host) {
-    const isHostSelected = Boolean(hostSet.host_ids.findBy('value', host.id));
-    const fragment = hostSet.host_ids.findBy('value', host.id);
-    if (isHostSelected) {
-      // if host is already selected, filter it out
-      hostSet.host_ids.removeObject(fragment);
-    } else {
-      // if host is not selected, add it
-      hostSet.host_ids.addObject({ value: host.id });
-    }
-  }
-
   /**
    * Saves host IDs on the host set.
    * @param {HostSetModel} hostSet

ui/core/app/styles/app.scss

@@ -94,6 +94,8 @@
 }
 
 .copyable {
+  white-space: nowrap;
+  
   .copyable-button {
     margin: 0;
     padding: 0 sizing.rems(xxs);

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

@@ -44,6 +44,10 @@
       <message.description>
         {{t "resources.account.messages.welcome.description"}}
       </message.description>
+      <message.link @route="scopes.scope.auth-methods.auth-method.accounts.new">
+        <Rose::Icon @name="plus-circle-outline" />
+        {{t 'resources.account.actions.create'}}
+      </message.link>
     </Rose::Message>
   </Rose::Layout::Centered>
 

ui/core/app/templates/scopes/scope/groups/group/members.hbs

@@ -53,6 +53,10 @@
       <message.description>
         {{t "resources.group.messages.members.description"}}
       </message.description>
+      <message.link @route="scopes.scope.groups.group.add-members">
+        <Rose::Icon @name="plus-circle-outline" />
+        {{t 'resources.group.actions.add-members'}}
+      </message.link>
     </Rose::Message>
   </Rose::Layout::Centered>
 

ui/core/app/templates/scopes/scope/projects/project/targets/target/host-sets.hbs

@@ -58,6 +58,10 @@
       <message.description>
         {{t "resources.target.host-set.messages.welcome.description"}}
       </message.description>
+      <message.link @route="scopes.scope.projects.project.targets.target.add-host-sets">
+        <Rose::Icon @name="plus-circle-outline" />
+        {{t 'resources.target.actions.add-host-sets'}}
+      </message.link>
     </Rose::Message>
   </Rose::Layout::Centered>
 

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

@@ -5,6 +5,7 @@
   <Rose::Table as |table|>
     <table.header as |header|>
       <header.row as |row|>
+        <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
         <row.headerCell>{{t 'form.username.label'}}</row.headerCell>
         <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
         <row.headerCell>{{t "titles.actions"}}</row.headerCell>
@@ -14,8 +15,12 @@
       {{#each @model.accounts as |account|}}
         <body.row as |row|>
           <row.headerCell>
-            {{account.username}}
+            {{account.displayName}}
+            <p>{{account.description}}</p>
           </row.headerCell>
+          <row.cell>
+            {{account.username}}
+          </row.cell>
           <row.cell>
             <Copyable
               @text={{account.id}}
@@ -53,6 +58,10 @@
       <message.description>
         {{t "resources.user.messages.accounts.description"}}
       </message.description>
+      <message.link @route="scopes.scope.users.user.add-accounts">
+        <Rose::Icon @name="plus-circle-outline" />
+        {{t 'resources.user.actions.add-accounts'}}
+      </message.link>
     </Rose::Message>
   </Rose::Layout::Centered>
 

ui/core/tests/acceptance/host-sets/hosts-test.js

@@ -0,0 +1,162 @@
+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 | host-sets | hosts', function (hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+
+  const instances = {
+    scopes: {
+      global: null,
+      org: null,
+      project: null,
+    },
+    hostCatalog: null,
+    hostSet: null,
+  };
+  const urls = {
+    orgScope: null,
+    projects: null,
+    project: null,
+    hostCatalogs: null,
+    hostCatalog: null,
+    hostSets: null,
+    hostSet: null,
+    hostSetHosts: null
+  };
+  let hostSetHostsCount;
+
+  hooks.beforeEach(function () {
+    // Setup Mirage mock resources for this test
+    authenticateSession();
+    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,
+    }, 'withChildren');
+    instances.hostSet = this.server.schema.hostSets.all().models[0];
+    // Generate route URLs for resources
+    urls.orgScope = `/scopes/${instances.scopes.org.id}`;
+    urls.projects = `${urls.orgScope}/projects`;
+    urls.project = `${urls.projects}/${instances.hostCatalog.scope.id}`;
+    urls.hostCatalogs = `${urls.project}/host-catalogs`;
+    urls.hostCatalog = `${urls.hostCatalogs}/${instances.hostCatalog.id}`;
+    urls.hostSets = `${urls.hostCatalog}/host-sets`;
+    urls.hostSet = `${urls.hostSets}/${instances.hostSet.id}`;
+    urls.hostSetHosts = `${urls.hostSet}/hosts`;
+    urls.addHosts = `${urls.hostSet}/add-hosts`;
+    // Counts
+    hostSetHostsCount = instances.hostSet.hosts.length;
+  });
+
+  test('visiting host set hosts', async function (assert) {
+    assert.expect(2);
+    await visit(urls.hostSetHosts);
+    await a11yAudit();
+    assert.equal(currentURL(), urls.hostSetHosts);
+    assert.equal(findAll('tbody tr').length, hostSetHostsCount);
+  });
+
+  test('can remove a host', async function (assert) {
+    assert.expect(2);
+    await visit(urls.hostSetHosts);
+    assert.equal(findAll('tbody tr').length, hostSetHostsCount);
+    await click('tbody tr .rose-dropdown-button-danger');
+    assert.equal(findAll('tbody tr').length, hostSetHostsCount - 1);
+  });
+
+  test('shows error message on host remove error', async function (assert) {
+    assert.expect(2);
+    this.server.post('/host-sets/:idMethod', () => {
+      return new Response(
+        400,
+        {},
+        {
+          status: 400,
+          code: 'invalid_argument',
+          message: 'The request was invalid.',
+          details: {},
+        }
+      );
+    });
+    await visit(urls.hostSetHosts);
+    assert.equal(findAll('tbody tr').length, hostSetHostsCount);
+    await click('tbody tr .rose-dropdown-button-danger');
+    assert.ok(find('[role="alert"]'));
+  });
+
+  test('visiting add hosts', async function(assert) {
+    assert.expect(1);
+    await visit(urls.addHosts);
+    await a11yAudit();
+    assert.equal(currentURL(), urls.addHosts);
+  });
+
+  test('select and save hosts to add', async function (assert) {
+    assert.expect(3);
+    instances.hostSet.update({ hostIds: [] });
+    await visit(urls.hostSetHosts);
+    assert.equal(findAll('tbody tr').length, 0);
+    await click('.rose-layout-page-actions a')
+    assert.equal(currentURL(), urls.addHosts);
+    // Click three times to select, unselect, then reselect (for coverage)
+    await click('tbody label');
+    await click('tbody label');
+    await click('tbody label');
+    await click('form [type="submit"]');
+    await visit(urls.hostSetHosts);
+    assert.equal(findAll('tbody tr').length, 1);
+  });
+
+  test('select and cancel hosts to add', async function (assert) {
+    assert.expect(4);
+    await visit(urls.hostSetHosts);
+    assert.equal(findAll('tbody tr').length, hostSetHostsCount);
+    await click('tbody tr .rose-dropdown-button-danger');
+    assert.equal(findAll('tbody tr').length, hostSetHostsCount - 1);
+    await click('.rose-layout-page-actions a')
+    assert.equal(currentURL(), urls.addHosts);
+    await click('tbody label');
+    await click('form [type="button"]');
+    await visit(urls.hostSetHosts);
+    assert.equal(findAll('tbody tr').length, hostSetHostsCount - 1);
+  });
+
+  test('shows error message on host add error', async function (assert) {
+    assert.expect(1);
+    this.server.post('/host-sets/:idMethod', () => {
+      return new Response(
+        400,
+        {},
+        {
+          status: 400,
+          code: 'invalid_argument',
+          message: 'The request was invalid.',
+          details: {},
+        }
+      );
+    });
+    instances.hostSet.update({ hostIds: [] });
+    await visit(urls.addHosts);
+    await click('tbody label');
+    await click('form [type="submit"]');
+    assert.ok(find('[role="alert"]'));
+  });
+});

ui/core/tests/integration/components/copyable-test.js

@@ -7,7 +7,7 @@ module('Integration | Component | copyable', function(hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function(assert) {
-    await render(hbs`<Copyable @buttonText="Copy me">text</Copyable>`);
+    await render(hbs`<Copyable @buttonText="Copy me" @text="foo">text</Copyable>`);
     assert.ok(find('.copyable'));
     assert.equal(find('.copyable-content').textContent.trim(), 'text');
     assert.equal(find('.copyable-button').textContent.trim(), 'Copy me');

ui/core/tests/integration/components/form/host-set/hosts-test.js

@@ -1,25 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, find } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-module('Integration | Component | form/host-set/hosts', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    this.submit = () => {};
-    this.cancel = () => {};
-    this.model = { host_ids: [] };
-    this.hosts = [];
-
-    await render(hbs`
-      <Form::HostSet::Hosts
-        @model={{this.model}}
-        @hosts={{this.hosts}}
-        @submit={{this.submit}}
-        @cancel={{this.cancel}}
-      />`);
-
-    assert.ok(find('form'));
-  });
-});

ui/core/tests/unit/controllers/scopes/scope/projects/project/sessions-test.js

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

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

@@ -42,6 +42,9 @@ group:
     add-members:
       title: Add Members
       description: Select users to add users to this group.
+    no-members:
+      title: No Members Available
+      description: There are no members available to add to this group.
   actions:
     add-members: Add Members
 host-catalog: