Icu 5253 add query to include credentials (#1227)

* refactor: 💡 add-credential-sources to include credentials

* refactor: 💡 update add-credential-sources template

Update to how AddCredentialSources form is rendered in the template

✅ Closes: ICU-5253

* refactor: 💡 Update add-credential-sources method signatures

* refactor: 💡 change how add-credential-source form is rendered

* refactor: 💡 Remove duplicate add-credential-sources message

Remove the duplicate No Credential Credential Sources message from
add-credential-sources form

* refactor: 💡 Move filter logic to controller

Move credential source filter logic from route to controller for
add-credential-sources

* test: 💍 Verify all available credential sources are listed

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

@@ -297,6 +297,9 @@ target:
   credential-source:
     title: Credential Source
     title_plural: Credential Sources
+    types:
+      vault: Vault
+      username_password: Username & Password
     messages:
       welcome:
         title: Welcome to Credential Sources

ui/admin/app/components/form/target/add-credential-libraries/index.hbs

@@ -1,63 +0,0 @@
-{{#if this.hasAvailableCredentialLibraries}}
-  <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.target.actions.add-credential-sources'}}
-      @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>
-        </header.row>
-      </table.header>
-      <table.body as |body|>
-        {{#each this.filteredCredentialLibraries as |credentialLibrary|}}
-          <body.row as |row|>
-            <row.headerCell>
-              <form.checkbox
-                @label={{credentialLibrary.id}}
-                @description={{credentialLibrary.description}}
-                @onChange={{fn this.toggleCredentialLibrary credentialLibrary}}
-              />
-            </row.headerCell>
-            <row.cell>{{credentialLibrary.name}}</row.cell>
-            <row.cell>
-              <Rose::Badge>{{t
-                  (concat
-                    'resources.credential-library.types.' credentialLibrary.type
-                  )
-                }}</Rose::Badge>
-            </row.cell>
-          </body.row>
-        {{/each}}
-      </table.body>
-    </Rose::Table>
-  </Rose::Form>
-{{/if}}
-
-{{#unless this.hasAvailableCredentialLibraries}}
-  <Rose::Layout::Centered>
-    <Rose::Message
-      @title={{t 'resources.target.credential-source.messages.none.title'}}
-      as |message|
-    >
-      <message.description>
-        {{t 'resources.target.credential-source.messages.none.description'}}
-      </message.description>
-      <message.link @route='scopes.scope.targets.target.credential-sources'>
-        <Rose::Icon @name='flight-icons/svg/chevron-left-16' />
-        {{t 'actions.back'}}
-      </message.link>
-    </Rose::Message>
-  </Rose::Layout::Centered>
-{{/unless}}

ui/admin/app/components/form/target/add-credential-libraries/index.js

@@ -1,65 +0,0 @@
-import Component from '@glimmer/component';
-import { computed, action } from '@ember/object';
-import { A } from '@ember/array';
-
-export default class FormTargetAddCredentialLibrariesIndexComponent extends Component {
-  // =properties
-
-  /**
-   * Array of selected credential library IDs.
-   * @type {EmberArray}
-   */
-  selectedCredentialLibraryIDs = A();
-
-  /**
-   * Checks for unassigned credential libraries.
-   * @param {[CredentialLibraryModel]} filteredCredentialLibraries
-   * @type {boolean}
-   */
-  @computed('filteredCredentialLibraries.length')
-  get hasAvailableCredentialLibraries() {
-    return this.filteredCredentialLibraries.length > 0;
-  }
-
-  /**
-   * Filter out credential libraries not already added to the target.
-   * @type {[CredentialLibraryModel]}
-   */
-  @computed(
-    'args.{credentialLibraries.[],model.application_credential_source_ids.[]}'
-  )
-  get filteredCredentialLibraries() {
-    // Get IDs for credential libraries already added to the current target
-    const currentCredentialLibraryIDs =
-      this.args.model.application_credential_source_ids.map(
-        (source) => source.value
-      );
-    const notAddedCredentialLibraries = this.args.credentialLibraries.filter(
-      ({ id }) => !currentCredentialLibraryIDs.includes(id)
-    );
-    return notAddedCredentialLibraries;
-  }
-
-  // =actions
-
-  /**
-   * Add/Remove credential library to current selection
-   * @param CredentialLibraryModel
-   */
-  @action
-  toggleCredentialLibrary(credentialLibrary) {
-    if (!this.selectedCredentialLibraryIDs.includes(credentialLibrary.id)) {
-      this.selectedCredentialLibraryIDs.addObject(credentialLibrary.id);
-    } else {
-      this.selectedCredentialLibraryIDs.removeObject(credentialLibrary.id);
-    }
-  }
-
-  /**
-   * Submit selected credential library ids
-   */
-  @action
-  submit(fn) {
-    fn(this.selectedCredentialLibraryIDs);
-  }
-}

ui/admin/app/components/form/target/add-credential-sources/index.hbs

@@ -0,0 +1,45 @@
+<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.target.actions.add-credential-sources'}}
+    @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>
+      </header.row>
+    </table.header>
+    <table.body as |body|>
+      {{#each @filteredCredentialSources as |credentialSource|}}
+        <body.row as |row|>
+          <row.headerCell>
+            <form.checkbox
+              @label={{credentialSource.id}}
+              @description={{credentialSource.description}}
+              @onChange={{fn this.toggleCredentialSource credentialSource}}
+            />
+          </row.headerCell>
+          <row.cell>{{credentialSource.name}}</row.cell>
+          <row.cell>
+            <Rose::Badge>{{t
+                (concat
+                  'resources.target.credential-source.types.'
+                  credentialSource.type
+                )
+              }}</Rose::Badge>
+          </row.cell>
+        </body.row>
+      {{/each}}
+    </table.body>
+  </Rose::Table>
+</Rose::Form>

ui/admin/app/components/form/target/add-credential-sources/index.js

@@ -0,0 +1,36 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { A } from '@ember/array';
+
+export default class FormTargetAddCredentialSourcesIndexComponent extends Component {
+  // =properties
+
+  /**
+   * Array of selected credential source IDs.
+   * @type {EmberArray}
+   */
+  selectedCredentialSourceIDs = A();
+
+  // =actions
+
+  /**
+   * Add/Remove credential source to current selection
+   * @param {CredentialLibraryModel, CredentialModel} credentialSource
+   */
+  @action
+  toggleCredentialSource(credentialSource) {
+    if (!this.selectedCredentialSourceIDs.includes(credentialSource.id)) {
+      this.selectedCredentialSourceIDs.addObject(credentialSource.id);
+    } else {
+      this.selectedCredentialSourceIDs.removeObject(credentialSource.id);
+    }
+  }
+
+  /**
+   * Submit selected credential source ids
+   */
+  @action
+  submit(fn) {
+    fn(this.selectedCredentialSourceIDs);
+  }
+}

ui/admin/app/controllers/scopes/scope/targets/target/add-credential-sources.js

@@ -1,5 +1,6 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
+import { computed } from '@ember/object';
 
 export default class ScopesScopeTargetsTargetAddCredentialSourcesController extends Controller {
   // =services
@@ -8,6 +9,36 @@ export default class ScopesScopeTargetsTargetAddCredentialSourcesController exte
 
   // =attributes
 
+  /**
+   * Checks for unassigned credential sources.
+   * @type {boolean}
+   */
+  get hasAvailableCredentialSources() {
+    return this.filteredCredentialSources.length > 0;
+  }
+
+  /**
+   * Filter out credential sources not already added to the target.
+   * @type {[CredentialLibraryModel, CredentialModel]}
+   */
+  @computed(
+    'model.{target.application_credential_source_ids.[],credentialLibraries.[],credentials.[]}'
+  )
+  get filteredCredentialSources() {
+    // Get IDs for credential sources already added to the current target
+    const currentCredentialSourceIDs =
+      this.model.target.application_credential_source_ids.map(
+        (source) => source.value
+      );
+    const notAddedCredentialLibraries = this.model.credentialLibraries.filter(
+      ({ id }) => !currentCredentialSourceIDs.includes(id)
+    );
+    const notAddedCredentials = this.model.credentials.filter(
+      ({ id }) => !currentCredentialSourceIDs.includes(id)
+    );
+    return [...notAddedCredentialLibraries, ...notAddedCredentials];
+  }
+
   /**
    * Translated roles breadcrumb
    * @type {string}

ui/admin/app/routes/scopes/scope/targets/target/add-credential-sources.js

@@ -15,15 +15,16 @@ export default class ScopesScopeTargetsTargetAddCredentialSourcesRoute extends R
   // =methods
 
   /**
-   * Empty out any previously loaded credential libraries.
+   * Empty out any previously loaded credential sources.
    */
   beforeModel() {
     this.store.unloadAll('credential-library');
+    this.store.unloadAll('credential');
   }
 
   /**
-   * Returns the current target and all credential libraries.
-   * @return {{target: TargetModel, credentialLibraries: [CredentialLibraryModel]}}
+   * Returns the current target and credential sources.
+   * @return {{target: TargetModel, credentialLibraries: [CredentialLibraryModel], credentials: [CredentialModel]}}
    */
   async model() {
     const target = this.modelFor('scopes.scope.targets.target');
@@ -33,17 +34,24 @@ export default class ScopesScopeTargetsTargetAddCredentialSourcesRoute extends R
     });
     await all(
       credentialStores.map(({ id: credential_store_id, isStatic }) => {
-        //credential libraries don't have a type static so exclude them
-        if (!isStatic)
+        if (isStatic) {
+          return this.store.query('credential', {
+            credential_store_id,
+          });
+        } else {
           return this.store.query('credential-library', {
             credential_store_id,
           });
+        }
       })
     );
     const credentialLibraries = this.store.peekAll('credential-library');
+    const credentials = this.store.peekAll('credential');
+
     return {
       target,
       credentialLibraries,
+      credentials,
     };
   }
 

ui/admin/app/templates/scopes/scope/targets/target/add-credential-sources.hbs

@@ -14,16 +14,16 @@
   </page.header>
 
   <page.body>
-    {{#if @model.credentialLibraries}}
-      <Form::Target::AddCredentialLibraries
+    {{#if this.hasAvailableCredentialSources}}
+      <Form::Target::AddCredentialSources
         @model={{@model.target}}
-        @credentialLibraries={{@model.credentialLibraries}}
+        @filteredCredentialSources={{this.filteredCredentialSources}}
         @submit={{route-action 'save' @model.target}}
         @cancel={{route-action 'cancel'}}
       />
     {{/if}}
 
-    {{#unless @model.credentialLibraries}}
+    {{#unless this.hasAvailableCredentialSources}}
       <Rose::Layout::Centered>
         <Rose::Message
           @title={{t 'resources.target.credential-source.messages.none.title'}}

ui/admin/tests/acceptance/targets/credential-sources-test.js

@@ -11,11 +11,13 @@ import {
   //invalidateSession,
 } from 'ember-simple-auth/test-support';
 
-module('Acceptance | targets | credential-libraries', function (hooks) {
+module('Acceptance | targets | credential sources', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
 
   let getCredentialLibraryCount;
+  let getCredentialCount;
+  let credentialSourceCount;
 
   const instances = {
     scopes: {
@@ -23,9 +25,11 @@ module('Acceptance | targets | credential-libraries', function (hooks) {
       org: null,
       project: null,
     },
-    credentialStore: null,
+    vaultCredentialStore: null,
+    staticCredentialStore: null,
     credentialLibraries: null,
     credentialLibrary: null,
+    credentials: null,
   };
   const urls = {
     globalScope: null,
@@ -49,16 +53,24 @@ module('Acceptance | targets | credential-libraries', function (hooks) {
       type: 'project',
       scope: { id: instances.scopes.org.id, type: 'org' },
     });
-    instances.credentialStore = this.server.create('credential-store', {
+    instances.vaultCredentialStore = this.server.create('credential-store', {
       type: 'vault',
       scope: instances.scopes.project,
     });
+    instances.staticCredentialStore = this.server.create('credential-store', {
+      type: 'static',
+      scope: instances.scopes.project,
+    });
+    instances.credentials = this.server.createList('credential', 2, {
+      scope: instances.scopes.project,
+      credentialStore: instances.staticCredentialStore,
+    });
     instances.credentialLibraries = this.server.createList(
       'credential-library',
       2,
       {
         scope: instances.scopes.project,
-        credentialStore: instances.credentialStore,
+        credentialStore: instances.vaultCredentialStore,
       }
     );
     instances.credentialLibrary = instances.credentialLibraries[0];
@@ -78,6 +90,9 @@ module('Acceptance | targets | credential-libraries', function (hooks) {
     // Generate resource counter
     getCredentialLibraryCount = () =>
       this.server.schema.credentialLibraries.all().models.length;
+    getCredentialCount = () =>
+      this.server.schema.credentials.all().models.length;
+    credentialSourceCount = getCredentialLibraryCount() + getCredentialCount();
     authenticateSession({});
   });
 
@@ -104,13 +119,59 @@ module('Acceptance | targets | credential-libraries', function (hooks) {
     assert.strictEqual(currentURL(), urls.addCredentialSources);
   });
 
+  test('displays list of all credential source types available', async function (assert) {
+    assert.expect(2);
+    instances.target.update({ credentialLibraries: [] });
+    await visit(urls.addCredentialSources);
+    assert.strictEqual(findAll('tbody tr').length, credentialSourceCount);
+    assert.notOk(find('.rose-message-title'));
+  });
+
+  test('displays list of credential sources with only credential libraries available', async function (assert) {
+    assert.expect(2);
+    instances.target.update({ credentialLibraries: [] });
+    this.server.db.credentials.remove();
+    await visit(urls.addCredentialSources);
+    assert.strictEqual(findAll('tbody tr').length, getCredentialLibraryCount());
+    assert.notOk(find('.rose-message-title'));
+  });
+
+  test('displays list of credential sources with only credentials available', async function (assert) {
+    assert.expect(2);
+    await visit(urls.addCredentialSources);
+    assert.strictEqual(findAll('tbody tr').length, getCredentialCount());
+    assert.notOk(find('.rose-message-title'));
+  });
+
+  test('displays no credential sources message when none available', async function (assert) {
+    assert.expect(1);
+    instances.target.update({ credentialLibraries: [] });
+    this.server.db.credentialLibraries.remove();
+    this.server.db.credentials.remove();
+    await visit(urls.addCredentialSources);
+    assert.strictEqual(
+      find('.rose-message-title').textContent.trim(),
+      'No Credential Sources Available'
+    );
+  });
+
+  test('when no credential sources available, button routes to credential sources', async function (assert) {
+    assert.expect(1);
+    instances.target.update({ credentialLibraries: [] });
+    this.server.db.credentialLibraries.remove();
+    this.server.db.credentials.remove();
+    await visit(urls.addCredentialSources);
+    await click(find('.rose-message-link'));
+    assert.strictEqual(currentURL(), urls.credentialSources);
+  });
+
   test('can select and save credential sources to add', async function (assert) {
     assert.expect(4);
     instances.target.update({ credentialLibraries: [] });
     await visit(urls.credentialSources);
     assert.strictEqual(findAll('tbody tr').length, 0);
     await visit(urls.addCredentialSources);
-    assert.strictEqual(findAll('tbody tr').length, getCredentialLibraryCount());
+    assert.strictEqual(findAll('tbody tr').length, credentialSourceCount);
     await click('tbody label');
     await click('form [type="submit"]');
     assert.strictEqual(currentURL(), urls.credentialSources);
@@ -133,7 +194,7 @@ module('Acceptance | targets | credential-libraries', function (hooks) {
     await visit(urls.credentialSources);
     assert.strictEqual(findAll('tbody tr').length, 0);
     await visit(urls.addCredentialSources);
-    assert.strictEqual(findAll('tbody tr').length, getCredentialLibraryCount());
+    assert.strictEqual(findAll('tbody tr').length, credentialSourceCount);
     await click('tbody label');
     await click('form [type="button"]');
     assert.strictEqual(currentURL(), urls.credentialSources);