Settings::ApiTokens: Filter tokens from the list that haven't been saved to the server

Author: Turbo87

app/components/settings/api-tokens.hbs

@@ -56,7 +56,7 @@
 <ul role="list" local-class="token-list">
   {{#each this.sortedTokens as |token|}}
     <li>
-      <div local-class="row" data-test-api-token={{token.id}}>
+      <div local-class="row" data-test-api-token={{or token.id true}}>
         <div local-class="name" data-test-name>
           {{token.name}}
         </div>

app/components/settings/api-tokens.js

@@ -4,15 +4,16 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
 import { task } from 'ember-concurrency';
-import { sortBy } from 'macro-decorators';
+import { filterBy, sortBy } from 'macro-decorators';
 
 export default class ApiTokens extends Component {
   @service store;
   @service notifications;
 
   @tracked newToken;
 
-  @sortBy('args.tokens', 'created_at', false) sortedTokens;
+  @filterBy('args.tokens', 'isNew', false) filteredTokens;
+  @sortBy('filteredTokens', 'created_at', false) sortedTokens;
 
   @action startNewToken() {
     this.newToken = this.store.createRecord('api-token');

tests/acceptance/api-token-test.js

@@ -128,4 +128,19 @@ module('Acceptance | api-tokens', function (hooks) {
     assert.dom('[data-test-api-token="3"] [data-test-error]').doesNotExist();
     assert.dom('[data-test-token]').includesText(`cargo login ${token.token}`);
   });
+
+  test('navigating away while creating a token does not keep it in the list', async function (assert) {
+    prepare(this);
+
+    await visit('/settings/tokens');
+    assert.dom('[data-test-api-token]').exists({ count: 2 });
+
+    await click('[data-test-new-token-button]');
+    await fillIn('[data-test-focused-input]', 'the new token');
+
+    await visit('/settings/profile');
+
+    await visit('/settings/tokens');
+    assert.dom('[data-test-api-token]').exists({ count: 2 });
+  });
 });