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',