🧹 on policy upload file view (#29669)

* add margin and conditional

* add test coverage

ui/app/components/policy-form.hbs

@@ -69,7 +69,9 @@
         </ToolbarActions>
       </Toolbar>
       {{#if this.showFileUpload}}
-        <TextFile @uploadOnly={{true}} @onChange={{this.setPolicyFromFile}} />
+        <div class="has-top-margin-xs">
+          <TextFile @uploadOnly={{true}} @onChange={{this.setPolicyFromFile}} />
+        </div>
       {{else}}
         <JsonEditor
           @title="Policy"
@@ -81,11 +83,11 @@
           data-test-policy-editor
         />
       {{/if}}
-      <div class="has-top-margin-xs">
+      {{#unless this.showFileUpload}}
-        <span class="is-size-9 has-text-grey has-bottom-margin-l">
+        <span class="is-size-9 has-text-grey has-bottom-margin-l has-top-margin-xs" data-test-alt-tab-message>
           You can use Alt+Tab (Option+Tab on MacOS) in the code editor to skip to the next field.
         </span>
-      </div>
+      {{/unless}}
     </div>
     {{#each @model.additionalAttrs as |attr|}}
       <FormField data-test-field={{true}} @attr={{attr}} @model={{@model}} />

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`
+    <PolicyForm
+      @model={{this.model}}
+      @onCancel={{this.onCancel}}
+      @onSave={{this.onSave}}
+    />
+    `);
+    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',