Merge pull request #137 from hashicorp/ICU-562-remove-host-set-within-a-target

Delete host set association within a target

addons/api/addon/models/target.js

@@ -55,16 +55,16 @@ export default class TargetModel extends GeneratedTargetModel {
   }
 
   /**
-   * Delete host sets via the `delete-host-sets` method.
+   * Delete host sets via the `remove-host-sets` method.
    * See serializer and adapter for more information.
    * @param {[string]} hostSetIDs
    * @param {object} options
    * @param {object} options.adapterOptions
    * @return {Promise}
    */
-  deleteHostSets(hostSetIDs, options={ adapterOptions: {} }) {
+  removeHostSets(hostSetIDs, options={ adapterOptions: {} }) {
     const defaultAdapterOptions = {
-      method: 'delete-host-sets',
+      method: 'remove-host-sets',
       hostSetIDs
     };
     // There is no "deep merge" in ES.
@@ -79,4 +79,14 @@ export default class TargetModel extends GeneratedTargetModel {
     });
   }
 
+  /**
+   * Delete a single host set via the `remove-host-sets` method.
+   * @param {number} hostSetID
+   * @param {object} options
+   * @return {Promise}
+   */
+  removeHostSet(hostSetID, options) {
+    return this.removeHostSets([hostSetID], options);
+  }
+
 }

addons/api/tests/unit/models/target-test.js

@@ -90,9 +90,9 @@ module('Unit | Model | target', function (hooks) {
     await model.addHostSets(['123_abc', 'foobar']);
   });
 
-  test('it has a `deleteHostSets` method that targets a specific POST API endpoint and serialization', async function (assert) {
+  test('it has a `removeHostSets` method that targets a specific POST API endpoint and serialization', async function (assert) {
     assert.expect(1);
-    this.server.post('/v1/scopes/o_1/targets/123abc:delete-host-sets', (schema, request) => {
+    this.server.post('/v1/scopes/o_1/targets/123abc:remove-host-sets', (schema, request) => {
       const body = JSON.parse(request.requestBody);
       assert.deepEqual(body, {
         host_set_ids: ['1', '3'],
@@ -120,6 +120,39 @@ module('Unit | Model | target', function (hooks) {
       }
     });
     const model = store.peekRecord('target', '123abc');
-    await model.deleteHostSets(['1', '3']);
+    await model.removeHostSets(['1', '3']);
+  });
+
+  test('it has a `removeHostSet` method that deletes a single host set using `removeHostSets` method', async function (assert) {
+    assert.expect(1);
+    this.server.post('/v1/scopes/o_1/targets/123abc:remove-host-sets', (schema, request) => {
+      const body = JSON.parse(request.requestBody);
+      assert.deepEqual(body, {
+        host_set_ids: ['3'],
+        version: 1
+      });
+    });
+    const store = this.owner.lookup('service:store');
+    store.push({
+      data: {
+        id: '123abc',
+        type: 'target',
+        attributes: {
+          name: 'Target',
+          description: 'Description',
+          host_sets: [
+            { host_set_id: '1', host_catalog_id: '2' },
+            { host_set_id: '3', host_catalog_id: '4' }
+          ],
+          version: 1,
+          scope: {
+            scope_id: 'o_1',
+            type: 'scope'
+          }
+        }
+      }
+    });
+    const model = store.peekRecord('target', '123abc');
+    await model.removeHostSet('3');
   });
 });

addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss

@@ -34,7 +34,7 @@ $chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xm
     background-size: sizing.rems(m);
 
     &:hover {
-      background-color: var(--ui-gray-subtler-4);
+      background-color: var(--ui-gray-subtler-5);
     }
 
     &:not(.has-icon-only) .rose-icon:first-child {
@@ -59,7 +59,9 @@ $chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xm
 
     &.show-caret {
       padding-right: sizing.rems(xl);
-      background: url($chevron) no-repeat right sizing.rems(m) center ;
+      background-image: url($chevron);
+      background-repeat: no-repeat;
+      background-position: right sizing.rems(m) center;
       background-size: sizing.rems(m);
     }
 

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

@@ -1,7 +1,15 @@
 import Route from '@ember/routing/route';
 import { all, hash } from 'rsvp';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+
 
 export default class ScopesScopeProjectsProjectTargetsTargetHostSetsRoute extends Route {
+  // =services
+
+  @service intl;
+  @service notify;
+
   // =methods
 
   /**
@@ -40,4 +48,24 @@ export default class ScopesScopeProjectsProjectTargetsTargetHostSetsRoute extend
   model() {
     return this.modelFor('scopes.scope.projects.project.targets.target');
   }
+
+  // =actions
+
+  /**
+   * Removes a host set from the current target and redirects to index.
+   * @param {TargetModel} target
+   * @param {HostSetModel} hostSet
+   */
+  @action
+  async removeHostSet(target, hostSet) {
+    try {
+      await target.removeHostSet(hostSet.id);
+      this.refresh();
+      this.notify.success(this.intl.t('notify.delete-success'));
+      this.transitionTo('scopes.scope.projects.project.targets.target.host-sets');
+    } catch (error) {
+      // TODO: replace with translated strings
+      this.notify.error(error.message, { closeAfter: null });
+    }
+  }
 }

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

@@ -19,7 +19,7 @@
   </page.navigation>
 
   <page.actions>
-    <Rose::Dropdown @text="{{t 'form.label.manage'}}" @dropdownRight={{true}} as |dropdown|>
+    <Rose::Dropdown @text="{{t 'actions.manage'}}" @dropdownRight={{true}} as |dropdown|>
       <dropdown.button
         @style="danger"
         @disabled={{@model.canSave}}

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

@@ -17,7 +17,7 @@
   </page.navigation>
 
   <page.actions>
-    <Rose::Dropdown @text="{{t 'form.label.manage'}}" @dropdownRight={{true}} as |dropdown|>
+    <Rose::Dropdown @text="{{t 'actions.manage'}}" @dropdownRight={{true}} as |dropdown|>
       <dropdown.button
         @style="danger"
         @disabled={{@model.canSave}}

ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/-actions.hbs

@@ -1,4 +1,4 @@
-<Rose::Dropdown @text="{{t 'form.label.manage'}}" @dropdownRight={{true}} as |dropdown|>
+<Rose::Dropdown @text="{{t 'actions.manage'}}" @dropdownRight={{true}} as |dropdown|>
   <dropdown.link
     @route="scopes.scope.projects.project.host-catalogs.host-catalog.hosts.new"
     @model={{@model}}

ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/-actions.hbs

@@ -1,4 +1,4 @@
-<Rose::Dropdown @text="{{t 'form.label.manage'}}" @dropdownRight={{true}} as |dropdown|>
+<Rose::Dropdown @text="{{t 'actions.manage'}}" @dropdownRight={{true}} as |dropdown|>
   <dropdown.button
     @style="danger"
     @disabled={{@model.canSave}}

ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-actions.hbs

@@ -1,4 +1,4 @@
-<Rose::Dropdown @text="{{t 'form.label.manage'}}" @dropdownRight={{true}} as |dropdown|>
+<Rose::Dropdown @text="{{t 'actions.manage'}}" @dropdownRight={{true}} as |dropdown|>
   <dropdown.button
     @style="danger"
     @disabled={{@model.canSave}}

ui/core/app/templates/scopes/scope/projects/project/index.hbs

@@ -17,7 +17,7 @@
   </page.navigation>
 
   <page.actions>
-    <Rose::Dropdown @text="{{t 'form.label.manage'}}" @dropdownRight={{true}} as |dropdown|>
+    <Rose::Dropdown @text="{{t 'actions.manage'}}" @dropdownRight={{true}} as |dropdown|>
       <dropdown.button
         @style="danger"
         @disabled={{@model.canSave}}

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

@@ -1,4 +1,4 @@
-<Rose::Dropdown @text="{{t 'form.label.manage'}}" @dropdownRight={{true}} as |dropdown|>
+<Rose::Dropdown @text="{{t 'actions.manage'}}" @dropdownRight={{true}} as |dropdown|>
   <dropdown.link @route="scopes.scope.projects.project.targets.target.add-host-sets">
     {{t 'actions.add-host-sets'}}
   </dropdown.link>

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

@@ -8,6 +8,7 @@
         <row.headerCell>{{t "form.label.name"}}</row.headerCell>
         <row.headerCell>{{t "form.label.type"}}</row.headerCell>
         <row.headerCell>{{t "form.label.id"}}</row.headerCell>
+        <row.headerCell>{{t "form.label.actions"}}</row.headerCell>
       </header.row>
     </table.header>
     <table.body as |body|>
@@ -23,6 +24,16 @@
           <row.cell>
             <code>{{hostSet.model.id}}</code>
           </row.cell>
+          <row.cell>
+            <Rose::Dropdown @icon="more-horizontal" @iconOnly={{true}} @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>

ui/core/app/templates/scopes/scope/roles/role.hbs

@@ -11,7 +11,7 @@
   </page.header>
 
   <page.actions>
-    <Rose::Dropdown @text="{{t 'form.label.manage'}}" @dropdownRight={{true}} as |dropdown|>
+    <Rose::Dropdown @text="{{t 'actions.manage'}}" @dropdownRight={{true}} as |dropdown|>
       <dropdown.button
         @style="danger"
         @disabled={{@model.canSave}}

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

@@ -9,7 +9,7 @@
   </page.header>
 
   <page.actions>
-    <Rose::Dropdown @text="{{t 'form.label.manage'}}" @dropdownRight={{true}} as |dropdown|>
+    <Rose::Dropdown @text="{{t 'actions.manage'}}" @dropdownRight={{true}} as |dropdown|>
       <dropdown.button
         @style="danger"
         @disabled={{@model.canSave}}

ui/core/mirage/config.js

@@ -148,7 +148,7 @@ export default function() {
       });
     }
     // If deleting host sets, filter them out of the array
-    if (method === 'delete-host-sets') {
+    if (method === 'remove-host-sets') {
       updatedAttrs.hostSetIds = updatedAttrs.hostSetIds.filter(id => {
         return !attrs.hostSetIds.includes(id);
       });

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

@@ -63,6 +63,10 @@ module('Acceptance | targets', function (hooks) {
     assert.expect(0);
   });
 
+  test('can delete a host sets', async function(assert) {
+    assert.expect(0);
+  });
+  
   test('select and save host sets to add', async function (assert) {
     assert.expect(0);
   });

ui/core/translations/en-us.yaml

@@ -2,8 +2,10 @@ actions:
   add: Add
   cancel: Cancel
   delete: Delete
+  remove: Remove
   dismiss: Dismiss
   save: Save
+  manage: Manage
   help: Need help?
   authenticate: Authenticate
   deauthenticate: Deauthenticate
@@ -118,11 +120,11 @@ form:
     type: Type
     identification: Username
     password: Password
-    manage: Manage
     grant: Grant
     principal: Principal
     address: Address
     protocol: Protocol
+    actions: Actions
 errors:
   titles:
     unauthenticated-error: You are not signed in