settings/tokens: Display endpoint/crate scopes if they exist

Author: Turbo87

app/components/settings/api-tokens.hbs

@@ -71,6 +71,38 @@
           {{token.name}}
         </h3>
 
+        {{#if (or token.endpoint_scopes token.crate_scopes)}}
+          <div local-class="scopes">
+            {{#if token.endpoint_scopes}}
+              <div local-class="endpoint-scopes" data-test-endpoint-scopes>
+                Scopes:
+
+                {{#each (this.listToParts token.endpoint_scopes) as |part|~}}
+                  {{#if (eq part.type "element")}}
+                    <strong>{{part.value}}<EmberTooltip @text={{this.scopeDescription part.value}} /></strong>
+                    {{~else~}}
+                    {{part.value}}
+                  {{/if}}
+                {{~/each}}
+              </div>
+            {{/if}}
+
+            {{#if token.crate_scopes}}
+              <div local-class="crate-scopes" data-test-crate-scopes>
+                Crates:
+
+                {{#each (this.listToParts token.crate_scopes) as |part|~}}
+                  {{#if (eq part.type "element")}}
+                    <strong>{{part.value}}<EmberTooltip @text={{this.patternDescription part.value}} /></strong>
+                    {{~else~}}
+                    {{part.value}}
+                  {{/if}}
+                {{~/each}}
+              </div>
+            {{/if}}
+          </div>
+        {{/if}}
+
         <div local-class="metadata">
           <div title={{token.last_used_at}} local-class="last-used-at" data-test-last-used-at>
             {{#if token.last_used_at}}

app/components/settings/api-tokens.js

@@ -5,17 +5,27 @@ import { tracked } from '@glimmer/tracking';
 
 import { task } from 'ember-concurrency';
 
+import { patternDescription, scopeDescription } from '../../utils/token-scopes';
+
 export default class ApiTokens extends Component {
   @service store;
   @service notifications;
   @service router;
 
   @tracked newToken;
 
+  scopeDescription = scopeDescription;
+  patternDescription = patternDescription;
+
   get sortedTokens() {
     return this.args.tokens.filter(t => !t.isNew).sort((a, b) => (a.created_at < b.created_at ? 1 : -1));
   }
 
+  listToParts(list) {
+    // We hardcode `en-US` here because the rest of the interface text is also currently displayed only in English.
+    return new Intl.ListFormat('en-US').formatToParts(list);
+  }
+
   @action startNewToken(event) {
     if (event.altKey) {
       this.router.transitionTo('settings.tokens.new');

app/components/settings/api-tokens.module.css

@@ -39,6 +39,7 @@
     font-weight: 500;
 }
 
+.scopes,
 .metadata {
     composes: small from '../../styles/shared/typography.module.css';
 
@@ -47,6 +48,10 @@
     }
 }
 
+.scopes {
+    margin-bottom: var(--space-xs);
+}
+
 .new-token-form {
     padding: var(--space-m);
     border-radius: var(--space-3xs);
@@ -167,10 +172,15 @@
         display: grid;
         grid-template:
             "name actions" auto
+            "scopes actions" auto
             "metadata actions" auto
             "details details" auto
             / 1fr auto;
 
+        .scopes {
+            grid-area: scopes;
+        }
+
         .metadata {
             grid-area: metadata;
         }

tests/routes/settings/tokens/new-test.js

@@ -66,6 +66,8 @@ module('/settings/tokens/new', function (hooks) {
     assert.strictEqual(currentURL(), '/settings/tokens');
     assert.dom('[data-test-api-token="1"] [data-test-name]').hasText('token-name');
     assert.dom('[data-test-api-token="1"] [data-test-token]').hasText(token.token);
+    assert.dom('[data-test-api-token="1"] [data-test-endpoint-scopes]').hasText('Scopes: publish-update');
+    assert.dom('[data-test-api-token="1"] [data-test-crate-scopes]').doesNotExist();
   });
 
   test('crate scopes', async function (assert) {
@@ -76,6 +78,7 @@ module('/settings/tokens/new', function (hooks) {
 
     await fillIn('[data-test-name]', 'token-name');
     await click('[data-test-scope="publish-update"]');
+    await click('[data-test-scope="yank"]');
 
     assert.dom('[data-test-crates-unrestricted]').exists();
     assert.dom('[data-test-crate-pattern]').doesNotExist();
@@ -128,11 +131,13 @@ module('/settings/tokens/new', function (hooks) {
     assert.ok(Boolean(token), 'API token has been created in the backend database');
     assert.strictEqual(token.name, 'token-name');
     assert.deepEqual(token.crateScopes, ['serde-*', 'serde']);
-    assert.deepEqual(token.endpointScopes, ['publish-update']);
+    assert.deepEqual(token.endpointScopes, ['publish-update', 'yank']);
 
     assert.strictEqual(currentURL(), '/settings/tokens');
     assert.dom('[data-test-api-token="1"] [data-test-name]').hasText('token-name');
     assert.dom('[data-test-api-token="1"] [data-test-token]').hasText(token.token);
+    assert.dom('[data-test-api-token="1"] [data-test-endpoint-scopes]').hasText('Scopes: publish-update and yank');
+    assert.dom('[data-test-api-token="1"] [data-test-crate-scopes]').hasText('Crates: serde-* and serde');
   });
 
   test('loading and error state', async function (assert) {