UI: Add example modal to policy form (#21583)

* created new JsonTemplate component * used JsonTemplate in modal PolicyTemplate to replace code there * renamed component and fixed when the editor content shows up * changed PolicyForm to render example modal only conditionally. added desription to policy-example.js * fixed bug in policy-example.js & edited description of that file, removed functionality from policy-template.js (it is already in policy-example.js) * changed margin on text to better match Figma design, added example modal for when editing a policy * added tests for PolicyExample in policy-example-tests * added PolicyForm tests for (1) cancelling the creation/edit of policy and (2) properly rendering the policy example modal * add changelog * clean up code by removing unnecessary comments * changed a conditional in policy-form.hbs for better readability (Kianna's comment) * fixed description in policy-example.js, changed wording for RGP example, changed wording in policy-form-test.js * added 2 more asserts in policy-form-test.js. Changed some naming for selectors in the test file * added EGP policy to PolicyExample component, moved some functionality from .hbs to .js file and vise versa * added tests to policy-exammple-test.js and policy-form-test.js to account for new EGP policy * simplified all PolicyExample tests in policy-exmaple-test.js * removed beforeEach hook in policy-exmaple-test.js
2025-11-01 19:17:58 +00:00 · 2023-07-20 09:59:52 -07:00
parent a71c174e79
commit a4f67a6b2b
13 changed files with 520 additions and 83 deletions
--- a/ui/tests/integration/components/policy-form-test.js
+++ b/ui/tests/integration/components/policy-form-test.js
@@ -18,6 +18,14 @@ const SELECTORS = {
  saveButton: '[data-test-policy-save]',
  cancelButton: '[data-test-policy-cancel]',
  error: '[data-test-message-error]',
+  // For example modal:
+  exampleButton: '[data-test-policy-example-button]',
+  exampleModal: '[data-test-policy-example-modal]',
+  exampleModalTitle: '[data-test-modal-title]',
+  exampleModalClose: '[data-test-modal-close-button]',
+  // For additional fields for EGP policy:
+  fields: (name) => `[data-test-field=${name}]`,
+  pathsInput: (index) => `[data-test-string-list-input="${index}"]`,
 };

 module('Integration | Component | policy-form', function (hooks) {
@@ -42,6 +50,9 @@ module('Integration | Component | policy-form', function (hooks) {
      this.put('/v1/sys/policies/rgp/**', () => {
        return [204, { 'Content-Type': 'application/json' }];
      });
+      this.put('/v1/sys/policies/egp/**', () => {
+        return [204, { 'Content-Type': 'application/json' }];
+      });
    });
  });
  hooks.afterEach(function () {
@@ -102,6 +113,37 @@ module('Integration | Component | policy-form', function (hooks) {
    assert.ok(this.onSave.calledOnceWith(this.model));
  });

+  test('it renders the form for new EGP policy', async function (assert) {
+    const model = this.store.createRecord('policy/egp');
+    const policy = `
+    path "secret/*" {
+      capabilities = [ "create", "read", "update", "list" ]
+    }
+    `;
+    this.set('model', model);
+    await render(hbs`
+    <PolicyForm
+      @model={{this.model}}
+      @onCancel={{this.onCancel}}
+      @onSave={{this.onSave}}
+    />
+    `);
+    assert.dom(SELECTORS.nameInput).exists({ count: 1 }, 'Name input exists');
+    assert.dom(SELECTORS.nameInput).hasNoText('Name field is not filled');
+    assert.dom(SELECTORS.uploadFileToggle).exists({ count: 1 }, 'Upload file toggle exists');
+    await fillIn(SELECTORS.nameInput, 'Foo');
+    assert.strictEqual(this.model.name, 'foo', 'Input sets name on model to lowercase input');
+    await fillIn(`${SELECTORS.policyEditor} textarea`, policy);
+    assert.strictEqual(this.model.policy, policy, 'Policy editor sets policy on model');
+    assert.dom(SELECTORS.fields('paths')).exists('Paths field exists');
+    assert.dom(SELECTORS.pathsInput('0')).exists('0 field exists');
+    await fillIn(SELECTORS.pathsInput('0'), 'my path');
+    assert.ok(this.onSave.notCalled);
+    assert.dom(SELECTORS.saveButton).hasText('Create policy');
+    await click(SELECTORS.saveButton);
+    assert.ok(this.onSave.calledOnceWith(this.model));
+  });
+
  test('it toggles to upload a new policy and uploads file', async function (assert) {
    const policy = `
    path "auth/token/lookup-self" {
@@ -156,6 +198,7 @@ module('Integration | Component | policy-form', function (hooks) {
    await click(SELECTORS.saveButton);
    assert.ok(this.onSave.calledOnceWith(this.model));
  });
+
  test('it renders the form to edit existing RGP policy', async function (assert) {
    const model = this.store.createRecord('policy/rgp', {
      name: 'bar',
@@ -185,6 +228,43 @@ module('Integration | Component | policy-form', function (hooks) {
    await click(SELECTORS.saveButton);
    assert.ok(this.onSave.calledOnceWith(this.model));
  });
+
+  test('it renders the form to edit existing EGP policy', async function (assert) {
+    const model = this.store.createRecord('policy/egp', {
+      name: 'bar',
+      policy: 'some policy content',
+      paths: ['first path'],
+    });
+    model.save();
+
+    this.set('model', model);
+    await render(hbs`
+    <PolicyForm
+      @model={{this.model}}
+      @onCancel={{this.onCancel}}
+      @onSave={{this.onSave}}
+    />
+    `);
+    assert.dom(SELECTORS.nameInput).doesNotExist('Name input is not rendered');
+    assert.dom(SELECTORS.uploadFileToggle).doesNotExist('Upload file toggle does not exist');
+    await fillIn(`${SELECTORS.policyEditor} textarea`, 'updated-');
+    assert.strictEqual(
+      this.model.policy,
+      'updated-some policy content',
+      'Policy editor updates policy value on model'
+    );
+    await fillIn(SELECTORS.pathsInput('1'), 'second path');
+    assert.strictEqual(
+      JSON.stringify(this.model.paths),
+      '["first path","second path"]',
+      'Second path field is updated on model'
+    );
+    assert.ok(this.onSave.notCalled);
+    assert.dom(SELECTORS.saveButton).hasText('Save', 'Save button text is correct');
+    await click(SELECTORS.saveButton);
+    assert.ok(this.onSave.calledOnceWith(this.model));
+  });
+
  test('it shows the error message on form when save fails', async function (assert) {
    const model = this.store.createRecord('policy/acl', {
      name: 'bad-policy',
@@ -203,4 +283,138 @@ module('Integration | Component | policy-form', function (hooks) {
    assert.ok(this.onSave.notCalled);
    assert.dom(SELECTORS.error).includesText('An error occurred');
  });
+
+  test('it does not create a new policy when the cancel button is clicked', async function (assert) {
+    const policy = `
+    path "secret/*" {
+      capabilities = [ "create", "read", "update", "list" ]
+    }
+    `;
+    await render(hbs`
+    <PolicyForm
+      @model={{this.model}}
+      @onCancel={{this.onCancel}}
+      @onSave={{this.onSave}}
+    />
+    `);
+    await fillIn(SELECTORS.nameInput, 'Foo');
+    assert.strictEqual(this.model.name, 'foo', 'Input sets name on model to lowercase input');
+    await fillIn(`${SELECTORS.policyEditor} textarea`, policy);
+    assert.strictEqual(this.model.policy, policy, 'Policy editor sets policy on model');
+
+    await click(SELECTORS.cancelButton);
+    assert.ok(this.onSave.notCalled);
+    assert.ok(this.onCancel.calledOnce, 'Form calls onCancel');
+  });
+
+  test('it does not save edits when the cancel button is clicked', async function (assert) {
+    const model = this.store.createRecord('policy/acl', {
+      name: 'foo',
+      policy: 'some policy content',
+    });
+    model.save();
+
+    this.set('model', model);
+    await render(hbs`
+    <PolicyForm
+      @model={{this.model}}
+      @onCancel={{this.onCancel}}
+      @onSave={{this.onSave}}
+    />
+    `);
+    await fillIn(`${SELECTORS.policyEditor} textarea`, 'updated-');
+    assert.strictEqual(
+      this.model.policy,
+      'updated-some policy content',
+      'Policy editor updates policy value on model'
+    );
+    await click(SELECTORS.cancelButton);
+    assert.ok(this.onSave.notCalled);
+    assert.ok(this.onCancel.calledOnce, 'Form calls onCancel');
+
+    await render(hbs`
+    <PolicyForm
+      @model={{this.model}}
+      @onCancel={{this.onCancel}}
+      @onSave={{this.onSave}}
+    />
+    `);
+    assert.strictEqual(
+      this.model.policy,
+      'some policy content',
+      'Policy editor shows original policy content, meaning that onCancel worked successfully'
+    );
+  });
+
+  test('it does not render the button and modal for the policy example if not specified to', async function (assert) {
+    await render(hbs`
+    <PolicyForm
+      @model={{this.model}}
+      @onCancel={{this.onCancel}}
+      @onSave={{this.onSave}}
+    />
+    `);
+    assert.dom(SELECTORS.exampleModal).doesNotExist('Modal for the policy example does not exist');
+    assert.dom(SELECTORS.exampleButton).doesNotExist('Button for the policy example modal does not exist');
+  });
+
+  test('it renders the button and modal for the policy example when specified to', async function (assert) {
+    await render(hbs`
+    <PolicyForm
+      @model={{this.model}}
+      @onCancel={{this.onCancel}}
+      @onSave={{this.onSave}}
+      @renderPolicyExampleModal={{true}}
+    />
+    <div id="modal-wormhole"></div>
+    `);
+    assert.dom(SELECTORS.exampleButton).exists({ count: 1 }, 'Modal for the policy example exists');
+    assert.dom(SELECTORS.exampleButton).exists({ count: 1 }, 'Button for the policy example modal exists');
+  });
+
+  test('it renders the correct title for ACL example for the policy example modal', async function (assert) {
+    await render(hbs`
+    <PolicyForm
+      @model={{this.model}}
+      @onCancel={{this.onCancel}}
+      @onSave={{this.onSave}}
+      @renderPolicyExampleModal={{true}}
+    />
+    <div id="modal-wormhole"></div>
+    `);
+    await click(SELECTORS.exampleButton);
+    assert.dom(SELECTORS.exampleModalTitle).hasText('Example ACL Policy');
+  });
+
+  test('it renders the correct title for RGP example for the policy example modal', async function (assert) {
+    const model = this.store.createRecord('policy/rgp');
+    this.set('model', model);
+    await render(hbs`
+    <PolicyForm
+      @model={{this.model}}
+      @onCancel={{this.onCancel}}
+      @onSave={{this.onSave}}
+      @renderPolicyExampleModal={{true}}
+    />
+    <div id="modal-wormhole"></div>
+    `);
+    await click(SELECTORS.exampleButton);
+    assert.dom(SELECTORS.exampleModalTitle).hasText('Example RGP Policy');
+  });
+
+  test('it renders the correct title for EGP example for the policy example modal', async function (assert) {
+    const model = this.store.createRecord('policy/egp');
+    this.set('model', model);
+    await render(hbs`
+    <PolicyForm
+      @model={{this.model}}
+      @onCancel={{this.onCancel}}
+      @onSave={{this.onSave}}
+      @renderPolicyExampleModal={{true}}
+    />
+    <div id="modal-wormhole"></div>
+    `);
+    await click(SELECTORS.exampleButton);
+    assert.dom(SELECTORS.exampleModalTitle).hasText('Example EGP Policy');
+  });
 });