feat: 🎸 add "add host sets" workflow for targets

addons/api/addon/generated/models/host-set.js

@@ -13,6 +13,11 @@ export default class GeneratedHostSetModel extends BaseModel {
     readOnly: true
   }) type;
 
+  @attr('string', {
+    description: 'The owning host catalog ID.',
+    readOnly: true
+  }) host_catalog_id;
+
   @attr('string', {
     description: 'Optional name for identification purposes'
   }) name;

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

@@ -0,0 +1,46 @@
+<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.label.id'}}</row.headerCell>
+        <row.headerCell>{{t 'form.label.name'}}</row.headerCell>
+        <row.headerCell>{{t 'form.label.type'}}</row.headerCell>
+        <row.headerCell>{{t 'resources.host-catalog'}}</row.headerCell>
+      </header.row>
+    </table.header>
+    <table.body as |body|>
+      {{#each this.hostSetGroups as |hostSetGroup|}}
+        {{#each hostSetGroup.hostSets 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 @style="outline">{{hostSet.type}}</Rose::Badge>
+            </row.cell>
+            <row.cell>
+              <code>{{hostSetGroup.hostCatalog.id}}</code>
+            </row.cell>
+          </body.row>
+        {{/each}}
+      {{/each}}
+    </table.body>
+  </Rose::Table>
+
+</Rose::Form>

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

@@ -0,0 +1,54 @@
+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();
+
+  /**
+   * Groups host sets not already added to the target by host catalog.
+   * @type {[{hostCatalog: HostCatalogModel, hostSets: [{HostSetModel}]}]}
+   */
+  @computed('args.{hostCatalogs.[],hostSets.[],model.host_sets.[]}')
+  get hostSetGroups() {
+    // 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));
+    // Group host sets by host catalog
+    const hostSetGroupsObject = notAddedHostSets.reduce((obj, hostSet) => {
+      if (!obj[hostSet.host_catalog_id]) {
+        const hostCatalog = this.args.hostCatalogs.findBy('id', hostSet.host_catalog_id);
+        obj[hostSet.host_catalog_id] = { hostCatalog, hostSets: [] };
+      }
+      obj[hostSet.host_catalog_id].hostSets.push(hostSet);
+      return obj;
+    }, {});
+    const hostSetGroups = Object.values(hostSetGroupsObject);
+    return hostSetGroups;
+  }
+
+  // =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

@@ -40,6 +40,7 @@ Router.map(function () {
               this.route('host-sets', function() {
                 this.route('host-set', { path: ':host_set_id'}, function() {});
               });
+              this.route('add-host-sets');
             });
             this.route('new');
           });

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

@@ -0,0 +1,66 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { all } from 'rsvp';
+
+export default class ScopesScopeProjectsProjectTargetsTargetAddHostSetsRoute extends Route {
+
+  // =services
+
+  @service intl;
+  @service notify;
+
+  // =methods
+
+  /**
+   * Emtpy out any previously loaded host catalogs and host sets.
+   */
+  beforeModel() {
+    this.store.unloadAll('host-catalog');
+    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.projects.project.targets.target');
+    const { scopeID } = target;
+    const hostCatalogs =
+      await this.store.findAll('host-catalog', { adapterOptions: { scopeID } });
+    await all(hostCatalogs.map(({ id: hostCatalogID }) =>
+      this.store
+        .findAll('host-set', { adapterOptions: { scopeID, hostCatalogID } })
+    ));
+    const hostSets = this.store.peekAll('host-set');
+    return {
+      target,
+      hostCatalogs,
+      hostSets
+    };
+  }
+
+  // =actions
+
+  @action
+  async save(target, hostSetIDs) {
+    try {
+      await target.addHostSets(hostSetIDs);
+      this.replaceWith('scopes.scope.projects.project.targets.target.host-sets');
+      this.notify.success(this.intl.t('notify.save-success'));
+    } catch (error) {
+      // TODO: replace with translated strings
+      this.notify.error(error.message, { closeAfter: null });
+    }
+  }
+
+  /**
+   * Redirect to target host sets as if nothing ever happened.
+   */
+  @action
+  cancel() {
+    this.replaceWith('scopes.scope.projects.project.targets.target.host-sets');
+  }
+}

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

@@ -1,3 +1,5 @@
+{{title @model.displayName}}
+
 <Rose::Layout::Page as |page|>
 
   <page.breadcrumbs>
@@ -21,6 +23,9 @@
 
   <page.actions>
     <Rose::Dropdown @text="{{t 'form.label.manage'}}" @dropdownRight={{true}} as |dropdown|>
+      <dropdown.link @route="scopes.scope.projects.project.targets.target.add-host-sets">
+        {{t 'actions.add-host-sets'}}
+      </dropdown.link>
       <dropdown.button
         @style="danger"
         @disabled={{@model.canSave}}

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

@@ -0,0 +1,21 @@
+{{title (t '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 "titles.no-host-sets-for-target"}} as |message|>
+      <message.description>
+        {{t "descriptions.no-host-sets-for-target"}}
+      </message.description>
+    </Rose::Message>
+  </Rose::Layout::Centered>
+{{/unless}}

ui/core/mirage/factories/host-set.js

@@ -1,3 +1,5 @@
 import factory from '../generated/factories/host-set';
 
-export default factory.extend();
+export default factory.extend({
+  id: (i) => `host-set-id-${i}`
+});

ui/core/mirage/serializers/host-set.js

@@ -13,6 +13,7 @@ export default ApplicationSerializer.extend({
   _hashForModel(model) {
     const json = ApplicationSerializer.prototype._hashForModel.apply(this, arguments);
     json.host_ids = model.hostIds;
+    json.host_catalog_id = model.hostCatalogId;
     return json;
   }
 

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

@@ -62,4 +62,12 @@ module('Acceptance | targets', function (hooks) {
   test('viewing target host sets', async function (assert) {
     assert.expect(0);
   });
+
+  test('select and save host sets to add', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('select and cancel host sets to add', async function (assert) {
+    assert.expect(0);
+  });
 });

ui/core/tests/integration/components/form/target/add-host-sets-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/target/add-host-sets', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    assert.expect(0);
+  });
+});

ui/core/tests/unit/routes/scopes/scope/projects/project/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/projects/project/targets/target/add-host-sets', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/projects/project/targets/target/add-host-sets');
+    assert.ok(route);
+  });
+});

ui/core/translations/en-us.yaml

@@ -20,6 +20,7 @@ actions:
   delete-target: Delete target
   add-host-set: Create Host Set
   add-host: Create Host
+  add-host-sets: Add Host Sets
 auth:
   titles:
     no-scopes: No Scopes Available
@@ -88,6 +89,7 @@ titles:
   targets: Targets
   global: Global
   no-host-set-hosts: No Hosts Available
+  no-host-sets-for-target: No Host Sets Available
 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.
@@ -102,6 +104,7 @@ descriptions:
   targets-welcome: Targets provide Users the means to connect to and interact networked services. A Target contains a collection of Hosts and a collection of Credentials.
   target-host-sets-welcome: Add Host Sets to this target to provide access.
   no-host-set-hosts: Before associating hosts with this host set, create hosts within the host catalog.
+  no-host-sets-for-target: No host sets are available to add to this target.
 states:
   info: Info
   success: Success