Auto merge of #1923 - integer32llc:redo-api-row, r=carols10cents

Redo api row

@locks I think this fixes the revoke button -- what I saw was `TypeError: input is null` on page load, when there isn't any input because a row hasn't been inserted yet.

This reverts the reverts and adds a null check.

r? @locks

Author: bors

app/components/api-token-row.js

@@ -7,8 +7,9 @@ export default Component.extend({
   serverError: null,
 
   didInsertElement() {
-    if (this.get('api_token.isNew')) {
-      this.$('input').focus();
+    let input = this.element.querySelector('input');
+    if (input && input.focus) {
+      input.focus();
     }
   },
 

app/templates/components/api-token-row.hbs

@@ -6,8 +6,10 @@
           placeholder="New token name"
           disabled=api_token.isSaving
           value=api_token.name
-          autofocus=true
-          enter="saveToken"}}
+          autofocus="autofocus"
+          enter="saveToken"
+          data-test-focused-input=true
+      }}
     {{else}}
       {{ api_token.name }}
     {{/if}}

tests/integration/components/api-token-row-test.js

@@ -0,0 +1,19 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | api-token-row', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('input is focused if token is new', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+    this.set('api_token', {
+      isNew: true,
+    });
+
+    await render(hbs`{{api-token-row api_token=api_token}}`);
+    assert.dom('[data-test-focused-input]').isFocused();
+  });
+});