From eb53284e69587d5c58a58fbcd54d66b38c971c34 Mon Sep 17 00:00:00 2001 From: claire bontempo <68122737+hellobontempo@users.noreply.github.com> Date: Thu, 25 May 2023 09:39:48 -0700 Subject: [PATCH] UI: Transit Key TTL not initializing to toggled off (#20731) * add test * bug fix and tests * add changelog --- changelog/20731.txt | 3 + .../components/transit-form-create.hbs | 2 +- .../components/transit-form-edit.hbs | 4 +- .../components/transit-form-show.hbs | 2 +- .../components/transit-edit-test.js | 105 ++++++++++++++++++ 5 files changed, 112 insertions(+), 4 deletions(-) create mode 100644 changelog/20731.txt create mode 100644 ui/tests/integration/components/transit-edit-test.js diff --git a/changelog/20731.txt b/changelog/20731.txt new file mode 100644 index 000000000..1896c199a --- /dev/null +++ b/changelog/20731.txt @@ -0,0 +1,3 @@ +```release-note:bug +ui: fixes auto_rotate_period ttl input for transit keys +``` diff --git a/ui/app/templates/components/transit-form-create.hbs b/ui/app/templates/components/transit-form-create.hbs index 31e8ba5dd..3f96a62c7 100644 --- a/ui/app/templates/components/transit-form-create.hbs +++ b/ui/app/templates/components/transit-form-create.hbs @@ -1,4 +1,4 @@ -
+
diff --git a/ui/app/templates/components/transit-form-edit.hbs b/ui/app/templates/components/transit-form-edit.hbs index e6ea07e08..220145c87 100644 --- a/ui/app/templates/components/transit-form-edit.hbs +++ b/ui/app/templates/components/transit-form-edit.hbs @@ -1,4 +1,4 @@ - +
@@ -19,7 +19,7 @@
diff --git a/ui/tests/integration/components/transit-edit-test.js b/ui/tests/integration/components/transit-edit-test.js new file mode 100644 index 000000000..7f54c53ea --- /dev/null +++ b/ui/tests/integration/components/transit-edit-test.js @@ -0,0 +1,105 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'vault/tests/helpers'; +import { click, fillIn, render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +const SELECTORS = { + createForm: '[data-test-transit-create-form]', + editForm: '[data-test-transit-edit-form]', + ttlToggle: '[data-test-ttl-toggle="Auto-rotation period"]', + ttlValue: '[data-test-ttl-value="Auto-rotation period"]', +}; +module('Integration | Component | transit-edit', function (hooks) { + setupRenderingTest(hooks); + + hooks.beforeEach(function () { + this.store = this.owner.lookup('service:store'); + this.model = this.store.createRecord('transit-key'); + this.backendCrumb = { + label: 'transit', + text: 'transit', + path: 'vault.cluster.secrets.backend.list-root', + model: 'transit', + }; + }); + + test('it renders in create mode and updates model', async function (assert) { + await render(hbs` + `); + + assert.dom(SELECTORS.createForm).exists(); + assert.dom(SELECTORS.ttlToggle).isNotChecked(); + + // confirm model params update when ttl changes + assert.strictEqual(this.model.autoRotatePeriod, '0'); + await click(SELECTORS.ttlToggle); + + assert.dom(SELECTORS.ttlValue).hasValue('30'); // 30 days + assert.strictEqual(this.model.autoRotatePeriod, '720h'); + + await fillIn(SELECTORS.ttlValue, '10'); // 10 days + assert.strictEqual(this.model.autoRotatePeriod, '240h'); + }); + + test('it renders edit form correctly when key has autoRotatePeriod=0', async function (assert) { + this.model.autoRotatePeriod = 0; + this.model.keys = { + 1: 1684882652000, + }; + await render(hbs` + `); + + assert.dom(SELECTORS.editForm).exists(); + assert.dom(SELECTORS.ttlToggle).isNotChecked(); + + assert.strictEqual(this.model.autoRotatePeriod, 0); + + await click(SELECTORS.ttlToggle); + assert.dom(SELECTORS.ttlToggle).isChecked(); + assert.dom(SELECTORS.ttlValue).hasValue('30'); + assert.strictEqual(this.model.autoRotatePeriod, '720h', 'model value changes with toggle'); + + await click(SELECTORS.ttlToggle); + assert.strictEqual(this.model.autoRotatePeriod, 0); // reverts to original value when toggled back on + }); + + test('it renders edit form correctly when key has non-zero rotation period', async function (assert) { + this.model.autoRotatePeriod = '5h'; + this.model.keys = { + 1: 1684882652000, + }; + await render(hbs` + `); + + assert.dom(SELECTORS.editForm).exists(); + assert.dom(SELECTORS.ttlToggle).isChecked(); + + await click(SELECTORS.ttlToggle); + assert.dom(SELECTORS.ttlToggle).isNotChecked(); + assert.strictEqual(this.model.autoRotatePeriod, 0, 'model value changes back to 0 when toggled off'); + + await click(SELECTORS.ttlToggle); + assert.strictEqual(this.model.autoRotatePeriod, '5h'); // reverts to original value when toggled back on + + await fillIn(SELECTORS.ttlValue, '10'); + assert.strictEqual(this.model.autoRotatePeriod, '10h'); + }); +});