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');
     });
   }
 );