feat: 🎸 create form for json credentials (#1498)

* feat: 🎸 create form for json credentials

✅ Closes: ICU-6682

* refactor: 💡 add new info field

* refactor: 💡 add feature flag

* refactor: 💡 add hds radio cards to json cred

* Update ui/admin/tests/acceptance/credential-store/credentials/create-test.js

* test: 💍 add test for json cred

* chore: 🤖 Remove ember-data-model-fragments package

* fix: 🐛 Update how json is added as a known credential type

* refactor: 💡 update credentialTypes if statement to ternary

* chore: 🤖 add ember-data back to addon/api project

* chore: 🤖 remove ember-feature-flag from addon/api

* refactor: 💡 remove if statement in cred form

* refactor: 💡 update selectors for json cred. tests

* refactor: 💡 Update Credential Form to use form.disabled

* test: 💍 Fix test selectors for radio card credential tests

* refactor: 💡 update credential types declaration to const

* style: 💄 Fix style issue with SecretEditor in edit mode

* refactor: 💡 remove disabled and readonly attributes in form

* refactor: 💡 Create credential ability canRead override

* test: 💍 add credential ability override tests

* test: 💍 Fix brokered credential test with json support added

* refactor: 💡 add attributes comment back to credential model

Co-authored-by: Cameron Perera <cameron.perera@hashicorp.com>

ui/admin/tests/acceptance/credential-store/credentials/create-test.js

@@ -1,5 +1,5 @@
 import { module, test } from 'qunit';
-import { visit, currentURL, find, click, fillIn } from '@ember/test-helpers';
+import { visit, currentURL, click, fillIn } from '@ember/test-helpers';
 import { setupApplicationTest } from 'ember-qunit';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import { authenticateSession } from 'ember-simple-auth/test-support';
@@ -14,6 +14,8 @@ module(
     let getCredentialsCount;
     let getUsernamePasswordCredentialCount;
     let getUsernameKeyPairCredentialCount;
+    let getJsonCredentialCount;
+    let featuresService;
 
     const instances = {
       scopes: {
@@ -33,6 +35,7 @@ module(
 
     hooks.beforeEach(function () {
       // Generate resources
+      featuresService = this.owner.lookup('service:features');
       instances.scopes.org = this.server.create('scope', {
         type: 'org',
         scope: { id: 'global', type: 'global' },
@@ -50,7 +53,7 @@ module(
       urls.credentialStores = `${urls.projectScope}/credential-stores`;
       urls.staticCredentialStore = `${urls.credentialStores}/${instances.staticCredentialStore.id}`;
       urls.credentials = `${urls.staticCredentialStore}/credentials`;
-      urls.newCredential = `${urls.staticCredentialStore}/credentials/new`;
+      urls.newCredential = `${urls.credentials}/new`;
       // Generate resource counter
       getCredentialsCount = () => {
         return this.server.schema.credentials.all().models.length;
@@ -64,17 +67,23 @@ module(
         return this.server.schema.credentials.where({ type: 'ssh_private_key' })
           .length;
       };
+      getJsonCredentialCount = () => {
+        return this.server.schema.credentials.where({ type: 'json' }).length;
+      };
       authenticateSession({});
     });
 
-    test('Users can create a new username & password credential', async function (assert) {
+    test('users can create a new username & password credential', async function (assert) {
       assert.expect(2);
       const credentialsCount = getCredentialsCount();
       const usernamePasswordCredentialCount =
         getUsernamePasswordCredentialCount();
-      await visit(urls.newCredential);
+      await visit(urls.credentials);
+
+      await click(`[href="${urls.newCredential}"]`);
       await fillIn('[name="name"]', 'random string');
       await click('[type="submit"]');
+
       assert.strictEqual(getCredentialsCount(), credentialsCount + 1);
       assert.strictEqual(
         getUsernamePasswordCredentialCount(),
@@ -82,15 +91,18 @@ module(
       );
     });
 
-    test('Users can create a new username & key pair credential', async function (assert) {
+    test('users can create a new username & key pair credential', async function (assert) {
       assert.expect(2);
       const credentialsCount = getCredentialsCount();
       const usernameKeyPairCredentialCount =
         getUsernameKeyPairCredentialCount();
-      await visit(urls.newCredential);
+      await visit(urls.credentials);
+
+      await click(`[href="${urls.newCredential}"]`);
       await fillIn('[name="name"]', 'random string');
       await click('[value="ssh_private_key"]');
       await click('[type="submit"]');
+
       assert.strictEqual(getCredentialsCount(), credentialsCount + 1);
       assert.strictEqual(
         getUsernameKeyPairCredentialCount(),
@@ -98,42 +110,85 @@ module(
       );
     });
 
-    test('Users can cancel create new username & password credential', async function (assert) {
+    test('users can create a new json credential', async function (assert) {
       assert.expect(2);
       const credentialsCount = getCredentialsCount();
-      await visit(urls.newCredential);
+      const jsonCredentialCount = getJsonCredentialCount();
+      await visit(urls.credentials);
+
+      await click(`[href="${urls.newCredential}"]`);
+      await fillIn('[name="name"]', 'random string');
+      await click('[value="json"]');
+      await click('[type="submit"]');
+
+      assert.strictEqual(getCredentialsCount(), credentialsCount + 1);
+      assert.strictEqual(getJsonCredentialCount(), jsonCredentialCount + 1);
+    });
+
+    test('users can cancel create new username & password credential', async function (assert) {
+      assert.expect(2);
+      const credentialsCount = getCredentialsCount();
+      await visit(urls.credentials);
+
+      await click(`[href="${urls.newCredential}"]`);
       await fillIn('[name="name"]', 'random string');
       await click('.rose-form-actions [type="button"]');
+
       assert.strictEqual(currentURL(), urls.credentials);
       assert.strictEqual(getCredentialsCount(), credentialsCount);
     });
 
-    test('Users can cancel create new username & key pair credential', async function (assert) {
+    test('users can cancel create new username & key pair credential', async function (assert) {
       assert.expect(2);
       const credentialsCount = getCredentialsCount();
-      await visit(urls.newCredential);
+      await visit(urls.credentials);
+
+      await click(`[href="${urls.newCredential}"]`);
       await fillIn('[name="name"]', 'random string');
       await click('[value="ssh_private_key"]');
       await click('.rose-form-actions [type="button"]');
+
       assert.strictEqual(currentURL(), urls.credentials);
       assert.strictEqual(getCredentialsCount(), credentialsCount);
     });
 
-    test('Users cannot navigate to new credential route without proper authorization', async function (assert) {
+    test('users can cancel create new json credential', async function (assert) {
+      assert.expect(2);
+      const credentialsCount = getCredentialsCount();
+      await visit(urls.credentials);
+
+      await click(`[href="${urls.newCredential}"]`);
+      await fillIn('[name="name"]', 'random string');
+      await click('[value="json"]');
+      await click('.rose-form-actions [type="button"]');
+
+      assert.strictEqual(currentURL(), urls.credentials);
+      assert.strictEqual(getCredentialsCount(), credentialsCount);
+    });
+
+    test('users cannot navigate to new credential route without proper authorization', async function (assert) {
       assert.expect(2);
       instances.staticCredentialStore.authorized_collection_actions.credentials =
-        [];
-      await visit(urls.staticCredentialStore);
-      assert.notOk(
+        instances.staticCredentialStore.authorized_collection_actions.credentials.filter(
+          (item) => {
+            item !== 'create';
+          }
+        );
+      await visit(urls.credentialStores);
+
+      await click(`[href="${urls.staticCredentialStore}"]`);
+
+      assert.false(
         instances.staticCredentialStore.authorized_collection_actions.credentials.includes(
           'create'
         )
       );
-      assert.notOk(find(`[href="${urls.newCredential}"]`));
+      assert.dom('.rose-layout-page-actions a').doesNotExist();
     });
 
     test('saving a new username & password credential with invalid fields displays error messages', async function (assert) {
       assert.expect(2);
+      await visit(urls.credentials);
       this.server.post('/credentials', () => {
         return new Response(
           400,
@@ -154,20 +209,21 @@ module(
           }
         );
       });
-      await visit(urls.newCredential);
+
+      await click(`[href="${urls.newCredential}"]`);
       await click('[type="submit"]');
-      assert.ok(
-        find('[role="alert"]').textContent.trim(),
-        'Error in provided request.'
-      );
-      assert.ok(
-        find('.rose-form-error-message').textContent.trim(),
-        'Field required for creating a username-password credential.'
-      );
+
+      assert
+        .dom('.rose-notification-body')
+        .hasText('Error in provided request.');
+      assert
+        .dom('.rose-form-error-message')
+        .hasText('Field required for creating a username-password credential.');
     });
 
     test('saving a new username & key pair credential with invalid fields displays error messages', async function (assert) {
       assert.expect(2);
+      await visit(urls.credentials);
       this.server.post('/credentials', () => {
         return new Response(
           400,
@@ -188,17 +244,70 @@ module(
           }
         );
       });
-      await visit(urls.newCredential);
+
+      await click(`[href="${urls.newCredential}"]`);
       await click('[value="ssh_private_key"]');
       await click('[type="submit"]');
-      assert.ok(
-        find('[role="alert"]').textContent.trim(),
-        'Error in provided request.'
-      );
-      assert.ok(
-        find('.rose-form-error-message').textContent.trim(),
-        'Field required for creating a username-key-pair credential.'
+
+      assert
+        .dom('.rose-notification-body')
+        .hasText('Error in provided request.');
+      assert
+        .dom('.rose-form-error-message')
+        .hasText('Field required for creating a username-key-pair credential.');
+    });
+
+    test('saving a new json credential with invalid fields displays error messages', async function (assert) {
+      assert.expect(1);
+      await visit(urls.credentials);
+      this.server.post('/credentials', () => {
+        return new Response(
+          400,
+          {},
+          {
+            status: 400,
+            code: 'invalid_argument',
+            message: 'Error in provided request.',
+            details: {
+              request_fields: [
+                {
+                  name: 'attributes.json_object',
+                  description: 'Field required for creating a json credential.',
+                },
+              ],
+            },
+          }
+        );
+      });
+
+      await click(`[href="${urls.newCredential}"]`);
+      await click('[value="json"]');
+      await click('[type="submit"]');
+
+      assert
+        .dom('.rose-notification-body')
+        .hasText('Error in provided request.');
+    });
+
+    test('cannot navigate to json credential when feature is disabled', async function (assert) {
+      featuresService.disable('json-credentials');
+      assert.expect(4);
+      await visit(urls.credentials);
+
+      await click(`[href="${urls.newCredential}"]`);
+
+      assert.true(
+        instances.staticCredentialStore.authorized_collection_actions.credentials.includes(
+          'create'
+        )
       );
+      assert.dom('.hds-form-radio-card').exists({ count: 2 });
+      assert
+        .dom('.hds-form-radio-card:first-child input')
+        .hasAttribute('value', 'username_password');
+      assert
+        .dom('.hds-form-radio-card:nth-child(2) input')
+        .hasAttribute('value', 'ssh_private_key');
     });
   }
 );

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

@@ -15,6 +15,7 @@ module('Acceptance | targets | brokered credential sources', function (hooks) {
   let credentialSourceCount;
   let randomlySelectedCredentialLibraries;
   let randomlySelectedCredentials;
+  let featuresService;
 
   const instances = {
     scopes: {
@@ -37,11 +38,14 @@ module('Acceptance | targets | brokered credential sources', function (hooks) {
     target: null,
     credentialLibraries: null,
     credentialLibrary: null,
+    credential: null,
+    jsonCredential: null,
     addBrokeredCredentialSources: null,
     brokeredCredentialSources: null,
   };
 
   hooks.beforeEach(function () {
+    featuresService = this.owner.lookup('service:features');
     // Generate resources
     instances.scopes.global = this.server.create('scope', { id: 'global' });
     instances.scopes.org = this.server.create('scope', {
@@ -60,7 +64,7 @@ module('Acceptance | targets | brokered credential sources', function (hooks) {
       type: 'static',
       scope: instances.scopes.project,
     });
-    instances.credentials = this.server.createList('credential', 2, {
+    instances.credentials = this.server.createList('credential', 3, {
       scope: instances.scopes.project,
       credentialStore: instances.staticCredentialStore,
     });
@@ -100,6 +104,7 @@ module('Acceptance | targets | brokered credential sources', function (hooks) {
     urls.brokeredCredentialSources = `${urls.target}/brokered-credential-sources`;
     urls.credentialLibrary = `${urls.projectScope}/credential-stores/${instances.credentialLibrary.credentialStoreId}/credential-libraries/${instances.credentialLibrary.id}`;
     urls.credential = `${urls.projectScope}/credential-stores/${instances.credential.credentialStoreId}/credentials/${instances.credential.id}`;
+    urls.jsonCredential = `${urls.projectScope}/credential-stores/${instances.credentials[2].credentialStoreId}/credentials/${instances.credentials[2].id}`;
     urls.addBrokeredCredentialSources = `${urls.target}/add-brokered-credential-sources`;
     getCredentialLibraryCount = () =>
       this.server.schema.credentialLibraries.all().models.length;
@@ -137,6 +142,19 @@ module('Acceptance | targets | brokered credential sources', function (hooks) {
     assert.strictEqual(currentURL(), urls.credential);
   });
 
+  test('cannot navigate to a json type credential when feature is disabled', async function (assert) {
+    featuresService.disable('json-credentials');
+    assert.expect(2);
+    const jsonCredential = instances.credentials[2];
+    instances.target.update({
+      brokeredCredentialSourceIds: [...randomlySelectedCredentials],
+    });
+    await visit(urls.brokeredCredentialSources);
+
+    assert.dom('.rose-table-row:nth-child(3)').includesText(jsonCredential.name);
+    assert.dom(`[href="${urls.jsonCredential}"]`).doesNotExist();
+  });
+
   test('visiting add brokered credential sources', async function (assert) {
     assert.expect(1);
     await visit(urls.addBrokeredCredentialSources);
@@ -157,7 +175,7 @@ module('Acceptance | targets | brokered credential sources', function (hooks) {
   test('displays list of brokered credential sources with only credential libraries available', async function (assert) {
     assert.expect(2);
     instances.target.update({
-      brokeredCredentialSourceIds: [...randomlySelectedCredentialLibraries],
+      brokeredCredentialSourceIds: [...randomlySelectedCredentials],
     });
     await visit(urls.addBrokeredCredentialSources);
     assert.strictEqual(findAll('tbody tr').length, getCredentialLibraryCount());
@@ -300,12 +318,13 @@ module('Acceptance | targets | brokered credential sources', function (hooks) {
       brokeredCredentialSourceIds: [...randomlySelectedCredentialLibraries],
     });
     const credentialLibraryCount = getCredentialLibraryCount();
+    const availableCredentialsCount = getCredentialCount();
     await visit(urls.brokeredCredentialSources);
     assert.strictEqual(findAll('tbody tr').length, credentialLibraryCount);
     await click('tbody tr .rose-dropdown-button-danger');
     assert.strictEqual(findAll('tbody tr').length, credentialLibraryCount - 1);
     await visit(urls.addBrokeredCredentialSources);
-    assert.strictEqual(findAll('tbody tr').length, credentialLibraryCount + 1);
+    assert.strictEqual(findAll('tbody tr').length, availableCredentialsCount + 1);
   });
 
   test('can remove a username & password type credential', async function (assert) {
@@ -314,12 +333,13 @@ module('Acceptance | targets | brokered credential sources', function (hooks) {
       brokeredCredentialSourceIds: [...randomlySelectedCredentials],
     });
     const credentialCount = getCredentialCount();
+    const availableCredentialsCount = getCredentialLibraryCount();
     await visit(urls.brokeredCredentialSources);
     assert.strictEqual(findAll('tbody tr').length, credentialCount);
     await click('tbody tr .rose-dropdown-button-danger');
     assert.strictEqual(findAll('tbody tr').length, credentialCount - 1);
     await visit(urls.addBrokeredCredentialSources);
-    assert.strictEqual(findAll('tbody tr').length, credentialCount + 1);
+    assert.strictEqual(findAll('tbody tr').length, availableCredentialsCount + 1);
   });
 
   test('cannot remove credential libraries without proper authorization', async function (assert) {

ui/admin/tests/unit/abilities/credential-test.js

@@ -0,0 +1,90 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Abilities | credential', function (hooks) {
+  setupTest(hooks);
+
+  test('canRead', function (assert) {
+    assert.expect(3);
+    const service = this.owner.lookup('service:can');
+    const credential = {
+      authorized_actions: ['read'],
+      type: 'json'
+    };
+    assert.ok(
+      service.can('read credential', credential)
+    );
+    credential.type = 'username_password'
+    assert.ok(
+      service.can('read credential', credential)
+    );
+    credential.type = 'ssh_private_key'
+    assert.ok(
+      service.can('read credential', credential)
+    );
+  });
+
+  test('cannot read without proper authorized actions', function (assert) {
+    assert.expect(3);
+    const service = this.owner.lookup('service:can');
+    const credential = {
+      authorized_actions: [],
+      type: 'json'
+    };
+    assert.notOk(
+      service.can('read credential', credential)
+    );
+    credential.type = 'username_password'
+    assert.notOk(
+      service.can('read credential', credential)
+    );
+    credential.type = 'ssh_private_key'
+    assert.notOk(
+      service.can('read credential', credential)
+    );
+  });
+
+  test('cannot read without proper authorized actions and json-credentials disabled', function (assert) {
+    assert.expect(3);
+    const service = this.owner.lookup('service:can');
+    const featuresService = this.owner.lookup('service:features');
+    featuresService.disable('json-credentials');
+    const credential = {
+      authorized_actions: [],
+      type: 'json'
+    };
+    assert.notOk(
+      service.can('read credential', credential)
+    );
+    credential.type = 'username_password'
+    assert.notOk(
+      service.can('read credential', credential)
+    );
+    credential.type = 'ssh_private_key'
+    assert.notOk(
+      service.can('read credential', credential)
+    );
+  });
+
+  test('cannot read when json-credentials is disabled', function (assert) {
+    assert.expect(3);
+    const service = this.owner.lookup('service:can');
+    const featuresService = this.owner.lookup('service:features');
+    featuresService.disable('json-credentials');
+    const credential = {
+      authorized_actions: ['read'],
+      type: 'json'
+    };
+    assert.notOk(
+      service.can('read credential', credential)
+    );
+    credential.type = 'username_password'
+    assert.ok(
+      service.can('read credential', credential)
+    );
+    credential.type = 'ssh_private_key'
+    assert.ok(
+      service.can('read credential', credential)
+    );
+  });
+});