diff --git a/ui/app/components/policy-form.hbs b/ui/app/components/policy-form.hbs index 5f0a54dd92..63b4788de6 100644 --- a/ui/app/components/policy-form.hbs +++ b/ui/app/components/policy-form.hbs @@ -69,7 +69,9 @@ {{#if this.showFileUpload}} - +
+ +
{{else}} {{/if}} -
- + {{#unless this.showFileUpload}} + You can use Alt+Tab (Option+Tab on MacOS) in the code editor to skip to the next field. -
+ {{/unless}} {{#each @model.additionalAttrs as |attr|}} diff --git a/ui/tests/integration/components/policy-form-test.js b/ui/tests/integration/components/policy-form-test.js index 5200d1e79d..8df1370fba 100644 --- a/ui/tests/integration/components/policy-form-test.js +++ b/ui/tests/integration/components/policy-form-test.js @@ -16,6 +16,7 @@ const SELECTORS = { uploadFileToggle: '[data-test-policy-edit-toggle]', policyEditor: '[data-test-policy-editor]', policyUpload: '[data-test-text-file-input]', + altTabMessage: '[data-test-alt-tab-message]', saveButton: '[data-test-policy-save]', cancelButton: '[data-test-policy-cancel]', error: '[data-test-message-error]', @@ -158,6 +159,22 @@ module('Integration | Component | policy-form', function (hooks) { assert.propEqual(this.onSave.lastCall.args[0].policy, policy, 'policy content saves in correct format'); }); + test('it shows alt + tab message only when json editor is visible', async function (assert) { + await render(hbs` + + `); + assert.dom(SELECTORS.altTabMessage).exists({ count: 1 }, 'Alt tab message shows'); + assert.dom(SELECTORS.policyEditor).exists({ count: 1 }, 'Policy editor is shown'); + + await click(SELECTORS.uploadFileToggle); + assert.dom(SELECTORS.policyUpload).exists({ count: 1 }, 'Policy upload is shown after toggle'); + assert.dom(SELECTORS.altTabMessage).doesNotExist('Alt tab message is not shown'); + }); + test('it renders the form to edit existing ACL policy', async function (assert) { const model = this.store.createRecord('policy/acl', { name: 'bar',