feat: 🎸 reintroduce target host sets

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

@@ -0,0 +1,60 @@
+{{#if this.hasAvailableHostSets}}
+  <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 "actions.add-host-sets"}}
+      @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.name.label'}}</row.headerCell>
+          <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
+          <row.headerCell>{{t 'resources.host-catalog.title'}}</row.headerCell>
+        </header.row>
+      </table.header>
+      <table.body as |body|>
+        {{#each this.filteredHostSets as |hostSet|}}
+          <body.row as |row|>
+            <row.cell>
+              <form.checkbox
+                @label={{hostSet.id}}
+                @description={{hostSet.description}}
+                onChange={{fn this.toggleHostSet hostSet}} />
+            </row.cell>
+            <row.cell>{{hostSet.name}}</row.cell>
+            <row.cell>
+              <Rose::Badge>{{t (concat 'resources.host-set.types.' hostSet.type)}}</Rose::Badge>
+            </row.cell>
+            <row.cell>
+              <code>{{hostSet.host_catalog_id}}</code>
+            </row.cell>
+          </body.row>
+        {{/each}}
+      </table.body>
+    </Rose::Table>
+
+  </Rose::Form>
+{{/if}}
+
+{{#unless this.hasAvailableHostSets}}
+  <Rose::Layout::Centered>
+    <Rose::Message @title={{t "resources.target.host-set.messages.none.title"}} as |message|>
+      <message.description>
+        {{t "resources.target.host-set.messages.none.description"}}
+      </message.description>
+      <message.link @route="scopes.scope.targets.target.host-sets">
+        <Rose::Icon @name="chevron-left" />
+        {{t "actions.back"}}
+      </message.link>
+    </Rose::Message>
+  </Rose::Layout::Centered>
+{{/unless}}

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

@@ -0,0 +1,55 @@
+import Component from '@glimmer/component';
+import { computed, action } from '@ember/object';
+import { A } from '@ember/array';
+
+export default class FormTargetAddHostSetsComponent extends Component {
+  // =properties
+
+  /**
+   * Array of selected host set IDs.
+   * @type {EmberArray}
+   */
+  selectedHostSetIDs = A();
+
+  /**
+   * Checks for unassigned hostsets.
+   * @param {[HostSetModel]} filteredHostSets
+   * @type {boolean}
+   */
+  @computed('filteredHostSets.length')
+  get hasAvailableHostSets() {
+    return this.filteredHostSets.length > 0;
+  }
+
+  /**
+   * Host sets not already added to the target.
+   * @type {[HostSetModel]}
+   */
+  @computed('args.{hostSets.[],model.host_sets.[]}')
+  get filteredHostSets() {
+    // Get IDs for host sets already added to the current target
+    const alreadyAddedHostSetIDs = this.args.model.host_sets.map(
+      ({ host_set_id }) => host_set_id
+    );
+    const notAddedHostSets = this.args.hostSets.filter(
+      ({ id }) => !alreadyAddedHostSetIDs.includes(id)
+    );
+    return notAddedHostSets;
+  }
+
+  // =actions
+
+  @action
+  toggleHostSet(hostSet) {
+    if (!this.selectedHostSetIDs.includes(hostSet.id)) {
+      this.selectedHostSetIDs.addObject(hostSet.id);
+    } else {
+      this.selectedHostSetIDs.removeObject(hostSet.id);
+    }
+  }
+
+  @action
+  submit(fn) {
+    fn(this.selectedHostSetIDs);
+  }
+}

ui/core/app/router.js

@@ -58,7 +58,10 @@ Router.map(function () {
       this.route('sessions', function() {});
 
       this.route('targets', function() {
-        this.route('target', { path: ':target_id' }, function() {});
+        this.route('target', { path: ':target_id' }, function() {
+          this.route('host-sets', function() {});
+          this.route('add-host-sets');
+        });
         this.route('new');
       });
       

ui/core/app/routes/scopes/scope/targets/target/add-host-sets.js

@@ -0,0 +1,92 @@
+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';
+import { notifySuccess, notifyError } from '../../../../../decorators/notify';
+
+export default class ScopesScopeTargetsTargetAddHostSetsRoute extends Route {
+  // =services
+
+  @service intl;
+  @service notify;
+
+  // =methods
+
+  /**
+   * Empty out any previously loaded host sets.
+   */
+  beforeModel() {
+    this.store.unloadAll('host-set');
+  }
+
+  /**
+   * Returns the current target, all host catalogs, and all host sets.
+   * @return {{target: TargetModel, hostCatalogs: [HostCatalogModel], hostSets: [HostSetModel]}}
+   */
+  async model() {
+    const target = this.modelFor(
+      'scopes.scope.targets.target'
+    );
+    const { id: scope_id } = this.modelFor('scopes.scope');
+    const hostCatalogs = await this.store.query('host-catalog', { scope_id });
+    await all(
+      hostCatalogs.map(({ id: host_catalog_id }) =>
+        this.store.query('host-set', { host_catalog_id })
+      )
+    );
+    const hostSets = this.store.peekAll('host-set');
+    return {
+      target,
+      hostCatalogs,
+      hostSets,
+    };
+  }
+
+  /**
+   * Renders the add-host-sets-specific header template.
+   * @override
+   */
+  renderTemplate() {
+    super.renderTemplate(...arguments);
+
+    this.render(
+      'scopes/scope/targets/target/add-host-sets/-header',
+      {
+        into: 'scopes/scope/targets/target',
+        outlet: 'header',
+      }
+    );
+
+    this.render('-empty', {
+      into: 'scopes/scope/targets/target',
+      outlet: 'navigation',
+    });
+
+    this.render('-empty', {
+      into: 'scopes/scope/targets/target',
+      outlet: 'actions',
+    });
+  }
+
+  // =actions
+
+  @action
+  @loading
+  @notifyError(({ message }) => message, { catch: true })
+  @notifySuccess('notifications.add-success')
+  async save(target, hostSetIDs) {
+    await target.addHostSets(hostSetIDs);
+    this.replaceWith(
+      'scopes.scope.targets.target.host-sets'
+    );
+  }
+
+  /**
+   * Redirect to target host sets as if nothing ever happened.
+   */
+  @action
+  cancel() {
+    this.replaceWith('scopes.scope.targets.target.host-sets');
+  }
+}

ui/core/app/routes/scopes/scope/targets/target/host-sets.js

@@ -0,0 +1,67 @@
+import Route from '@ember/routing/route';
+import { all, hash } from 'rsvp';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import loading from 'ember-loading/decorator';
+import { confirm } from '../../../../../decorators/confirm';
+import { notifySuccess, notifyError } from '../../../../../decorators/notify';
+
+export default class ScopesScopeTargetsTargetHostSetsRoute extends Route {
+  // =services
+
+  @service intl;
+  @service notify;
+
+  // =methods
+
+  /**
+   * Loads all host-sets and associated host-catalogs under the current target
+   * and it's parent scope.
+   * @return {Promise{[HostSetModel, HostCatalogModel]}}
+   */
+  beforeModel() {
+    const { scopeID, host_sets } = this.modelFor(
+      'scopes.scope.targets.target'
+    );
+    const promises = host_sets.map(
+      ({ host_set_id, host_catalog_id: hostCatalogID }) =>
+        hash({
+          // TODO:  multiple host sets may belong to the same catalog,
+          // resulting in the catalog being loaded multiple times.
+          // An improvement would be to find the unique set of catalogs first.
+          hostCatalog: this.store.findRecord('host-catalog', hostCatalogID, {
+            adapterOptions: { scopeID },
+          }),
+          hostSet: this.store.findRecord('host-set', host_set_id, {
+            adapterOptions: { scopeID, hostCatalogID },
+          }),
+        })
+    );
+    return all(promises);
+  }
+
+  /**
+   * Returns the previously loaded target instance.
+   * @return {TargetModel}
+   */
+  model() {
+    return this.modelFor('scopes.scope.targets.target');
+  }
+
+  // =actions
+
+  /**
+   * Removes a host set from the current target and redirects to index.
+   * @param {TargetModel} target
+   * @param {HostSetModel} hostSet
+   */
+  @action
+  @loading
+  @confirm('questions.remove-confirm')
+  @notifyError(({ message }) => message, { catch: true })
+  @notifySuccess('notifications.remove-success')
+  async removeHostSet(target, hostSet) {
+    await target.removeHostSet(hostSet.id);
+    this.refresh();
+  }
+}

ui/core/app/templates/scopes/scope/targets/target/-actions.hbs

@@ -1,9 +1,7 @@
 <Rose::Dropdown @text="{{t 'actions.manage'}}" @dropdownRight={{true}} as |dropdown|>
-  {{!--
   <dropdown.link @route="scopes.scope.targets.target.add-host-sets">
     {{t 'resources.target.actions.add-host-sets'}}
   </dropdown.link>
-  --}}
   <dropdown.separator />
   <dropdown.button
     @style="danger"

ui/core/app/templates/scopes/scope/targets/target/-navigation.hbs

@@ -2,9 +2,7 @@
   <nav.link @route='scopes.scope.targets.target.index'>
     {{t 'titles.details'}}
   </nav.link>
-  {{!--
   <nav.link @route='scopes.scope.targets.target.host-sets'>
     {{t 'resources.host-set.title_plural'}}
   </nav.link>
-  --}}
 </Rose::Nav::Tabs>

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

@@ -0,0 +1,25 @@
+{{title (t 'resources.target.actions.add-host-sets')}}
+
+{{#if @model.hostSets}}
+  <Form::Target::AddHostSets
+    @model={{@model.target}}
+    @hostCatalogs={{@model.hostCatalogs}}
+    @hostSets={{@model.hostSets}}
+    @submit={{route-action "save" @model.target}}
+    @cancel={{route-action "cancel"}}
+  />
+{{/if}}
+
+{{#unless @model.hostSets}}
+  <Rose::Layout::Centered>
+    <Rose::Message @title={{t "resources.target.host-set.messages.none.title"}} as |message|>
+      <message.description>
+        {{t "resources.target.host-set.messages.none.description"}}
+      </message.description>
+      <message.link @route="scopes.scope.targets.target.host-sets">
+        <Rose::Icon @name="chevron-left" />
+        {{t "actions.back"}}
+      </message.link>
+    </Rose::Message>
+  </Rose::Layout::Centered>
+{{/unless}}

ui/core/app/templates/scopes/scope/targets/target/add-host-sets/-header.hbs

@@ -0,0 +1,5 @@
+<h2>
+  {{t "resources.target.host-set.messages.add.title"}}
+  <DocLink @doc="target.add-host-sets" @iconSize="large" />
+</h2>
+<p>{{t "resources.target.host-set.messages.add.description"}}</p>

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

@@ -0,0 +1,68 @@
+{{title (t "resources.host-set.title_plural")}}
+
+{{#if @model.hostSets}}
+
+  <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>
+        <row.headerCell>{{t "titles.actions"}}</row.headerCell>
+      </header.row>
+    </table.header>
+    <table.body as |body|>
+      {{#each @model.hostSets as |hostSet|}}
+        <body.row as |row|>
+          <row.headerCell>
+            {{hostSet.model.displayName}}
+            <p>{{hostSet.model.description}}</p>
+          </row.headerCell>
+          <row.cell>
+            <Rose::Badge>{{t (concat 'resources.host-set.types.' hostSet.model.type)}}</Rose::Badge>
+          </row.cell>
+          <row.cell>
+            <Copyable
+              @text={{hostSet.model.id}}
+              @buttonText={{t "actions.copy-to-clipboard"}}
+              @acknowledgeText={{t "states.copied"}}
+            >
+              <code>{{hostSet.model.id}}</code>
+            </Copyable>
+          </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 "removeHostSet" @model hostSet.model)}}
+              >
+                {{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.target.host-set.messages.welcome.title"}} as |message|>
+      <message.description>
+        {{t "resources.target.host-set.messages.welcome.description"}}
+      </message.description>
+      <message.link @route="scopes.scope.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>
+
+{{/if}}

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

@@ -23,9 +23,7 @@ module('Acceptance | targets', function (hooks) {
     scopes: {
       global: null,
       org: null,
-      org2: null,
       project: null,
-      project2: null,
     }
   };
   const urls = {
@@ -55,10 +53,10 @@ module('Acceptance | targets', function (hooks) {
     urls.globalScope = `/scopes/global/scopes`;
     urls.orgScope = `/scopes/${instances.scopes.org.id}/scopes`;
     urls.projectScope = `/scopes/${instances.scopes.project.id}`;
-    urls.targets = `/scopes/${instances.scopes.project.id}/targets`;
-    urls.target = `/scopes/${instances.scopes.project.id}/targets/${instances.target.id}`;
-    urls.unknownTarget = `/scopes/${instances.scopes.project.id}/targets/foo`;
-    urls.newTarget = `/scopes/${instances.scopes.project.id}/targets/new`;
+    urls.targets = `${urls.projectScope}/targets`;
+    urls.target = `${urls.targets}/${instances.target.id}`;
+    urls.unknownTarget = `${urls.targets}/foo`;
+    urls.newTarget = `${urls.targets}/new`;
     // Generate resource couner
     getTargetCount = () => this.server.schema.targets.all().models.length;
     authenticateSession({});

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

@@ -0,0 +1,160 @@
+import { module, test } from 'qunit';
+import { visit, currentURL, find, findAll, click } 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 | targets | host-sets', function (hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+
+  const instances = {
+    scopes: {
+      global: null,
+      org: null,
+      project: null,
+    }
+  };
+  const urls = {
+    globalScope: null,
+    orgScope: null,
+    projectScope: null,
+    targets: null,
+    target: null,
+    targetHostSets: null,
+    targetAddHostSets: 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
+    }, 'withChildren');
+    instances.target = this.server.create('target', {
+      scope: instances.scopes.project,
+      hostSets: instances.hostCatalog.hostSets
+    });
+    // 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.targets = `/scopes/${instances.scopes.project.id}/targets`;
+    urls.target = `${urls.targets}/${instances.target.id}`;
+    urls.targetHostSets = `${urls.target}/host-sets`;
+    urls.targetAddHostSets = `${urls.target}/add-host-sets`;
+    authenticateSession({});
+  });
+
+  test('visiting target host sets', async function (assert) {
+    assert.expect(3);
+    const targetHostSetCount = instances.target.hostSets.length;
+    await visit(urls.targetHostSets);
+    await a11yAudit();
+    assert.equal(currentURL(), urls.targetHostSets);
+    assert.ok(targetHostSetCount);
+    assert.equal(findAll('tbody tr').length, targetHostSetCount);
+  });
+
+  test('can remove a host sets', async function (assert) {
+    assert.expect(2);
+    const targetHostSetCount = instances.target.hostSets.length;
+    await visit(urls.targetHostSets);
+    assert.equal(findAll('tbody tr').length, targetHostSetCount);
+    await click('tbody tr .rose-dropdown-button-danger');
+    assert.equal(findAll('tbody tr').length, targetHostSetCount - 1);
+  });
+
+  test('removing a target host set which errors displays error messages', async function (assert) {
+    assert.expect(2);
+    this.server.post('/targets/:idMethod', () => {
+      return new Response(
+        400,
+        {},
+        {
+          status: 400,
+          code: 'invalid_argument',
+          message: 'The request was invalid.',
+          details: {},
+        }
+      );
+    });
+    const targetHostSetCount = instances.target.hostSets.length;
+    await visit(urls.targetHostSets);
+    assert.equal(findAll('tbody tr').length, targetHostSetCount);
+    await click('tbody tr .rose-dropdown-button-danger');
+    assert.ok(find('[role="alert"]'));
+  });
+
+  test('select and save host sets to add', async function (assert) {
+    assert.expect(3);
+    instances.target.update({ hostSetIds: [] });
+    await visit(urls.targetHostSets);
+    assert.equal(findAll('tbody tr').length, 0);
+    await click('.rose-layout-page-actions a')
+    assert.equal(currentURL(), urls.targetAddHostSets);
+    // 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.targetHostSets);
+    assert.equal(findAll('tbody tr').length, 1);
+  });
+
+  test('select and cancel host sets to add', async function (assert) {
+    assert.expect(4);
+    const targetHostSetCount = instances.target.hostSets.length;
+    await visit(urls.targetHostSets);
+    assert.equal(findAll('tbody tr').length, targetHostSetCount);
+    // first, remove a target host set (otherwise none would be available to add)
+    await click('tbody tr .rose-dropdown-button-danger');
+    assert.equal(findAll('tbody tr').length, targetHostSetCount - 1);
+    await click('.rose-layout-page-actions a')
+    assert.equal(currentURL(), urls.targetAddHostSets);
+    await click('tbody label');
+    await click('form [type="button"]');
+    await visit(urls.targetHostSets);
+    assert.equal(findAll('tbody tr').length, targetHostSetCount - 1);
+  });
+
+  test('adding a target host set which errors displays error messages', async function (assert) {
+    assert.expect(4);
+    this.server.post('/targets/:idMethod', () => {
+      return new Response(
+        400,
+        {},
+        {
+          status: 400,
+          code: 'invalid_argument',
+          message: 'The request was invalid.',
+          details: {},
+        }
+      );
+    });
+    instances.target.update({ hostSetIds: [] });
+    await visit(urls.targetAddHostSets);
+    assert.equal(instances.target.hostSets.length, 0);
+    assert.equal(currentURL(), urls.targetAddHostSets);
+    await click('tbody label');
+    await click('form [type="submit"]');
+    assert.equal(currentURL(), urls.targetAddHostSets);
+    assert.equal(instances.target.hostSets.length, 0);
+  });
+
+});

ui/core/tests/unit/routes/scopes/scope/targets/target/add-host-sets-test.js

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

ui/core/tests/unit/routes/scopes/scope/targets/target/host-sets-test.js

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