From 93289d39ed6d30d6a4fe1e8e4878c83b58add796 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Mon, 8 May 2023 09:59:08 +0200
Subject: [PATCH 1/6] settings/tokens/new: Extract `scopeDescription()` utility
 function

---
 app/controllers/settings/tokens/new.js | 11 +++++------
 app/templates/settings/tokens/new.hbs  | 10 +++++-----
 app/utils/token-scopes.js              | 10 ++++++++++
 3 files changed, 20 insertions(+), 11 deletions(-)
 create mode 100644 app/utils/token-scopes.js

diff --git a/app/controllers/settings/tokens/new.js b/app/controllers/settings/tokens/new.js
index fde3af6d7f..0a82e42069 100644
--- a/app/controllers/settings/tokens/new.js
+++ b/app/controllers/settings/tokens/new.js
@@ -7,6 +7,8 @@ import { tracked } from '@glimmer/tracking';
 import { task } from 'ember-concurrency';
 import { TrackedArray } from 'tracked-built-ins';
 
+import { scopeDescription } from '../../../utils/token-scopes';
+
 export default class NewTokenController extends Controller {
   @service notifications;
   @service sentry;
@@ -19,12 +21,9 @@ export default class NewTokenController extends Controller {
   @tracked scopesInvalid;
   @tracked crateScopes;
 
-  ENDPOINT_SCOPES = [
-    { id: 'change-owners', description: 'Invite new crate owners or remove existing ones' },
-    { id: 'publish-new', description: 'Publish new crates' },
-    { id: 'publish-update', description: 'Publish new versions of existing crates' },
-    { id: 'yank', description: 'Yank and unyank crate versions' },
-  ];
+  ENDPOINT_SCOPES = ['change-owners', 'publish-new', 'publish-update', 'yank'];
+
+  scopeDescription = scopeDescription;
 
   constructor() {
     super(...arguments);
diff --git a/app/templates/settings/tokens/new.hbs b/app/templates/settings/tokens/new.hbs
index cf91d7e48f..a2bde9c271 100644
--- a/app/templates/settings/tokens/new.hbs
+++ b/app/templates/settings/tokens/new.hbs
@@ -44,16 +44,16 @@
     <ul role="list" local-class="scopes-list {{if this.scopesInvalid "invalid"}}">
       {{#each this.ENDPOINT_SCOPES as |scope|}}
         <li>
-          <label data-test-scope={{scope.id}}>
+          <label data-test-scope={{scope}}>
             <Input
               @type="checkbox"
-              @checked={{this.isScopeSelected scope.id}}
+              @checked={{this.isScopeSelected scope}}
               disabled={{this.saveTokenTask.isRunning}}
-              {{on "change" (fn this.toggleScope scope.id)}}
+              {{on "change" (fn this.toggleScope scope)}}
             />
 
-            <span local-class="scope-id">{{scope.id}}</span>
-            <span local-class="scope-description">{{scope.description}}</span>
+            <span local-class="scope-id">{{scope}}</span>
+            <span local-class="scope-description">{{this.scopeDescription scope}}</span>
           </label>
         </li>
       {{/each}}
diff --git a/app/utils/token-scopes.js b/app/utils/token-scopes.js
new file mode 100644
index 0000000000..53de57e212
--- /dev/null
+++ b/app/utils/token-scopes.js
@@ -0,0 +1,10 @@
+const DESCRIPTIONS = {
+  'change-owners': 'Invite new crate owners or remove existing ones',
+  'publish-new': 'Publish new crates',
+  'publish-update': 'Publish new versions of existing crates',
+  yank: 'Yank and unyank crate versions',
+};
+
+export function scopeDescription(scope) {
+  return DESCRIPTIONS[scope];
+}

From f9bf48c47dabe1ea4bb5a7f6ff8a553b4574da3e Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Mon, 8 May 2023 10:01:49 +0200
Subject: [PATCH 2/6] settings/tokens/new: Extract `patternDescription()`
 utility function

---
 app/controllers/settings/tokens/new.js | 13 ++++---------
 app/utils/token-scopes.js              | 12 ++++++++++++
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/app/controllers/settings/tokens/new.js b/app/controllers/settings/tokens/new.js
index 0a82e42069..4a9f54046b 100644
--- a/app/controllers/settings/tokens/new.js
+++ b/app/controllers/settings/tokens/new.js
@@ -1,13 +1,12 @@
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
-import { htmlSafe } from '@ember/template';
 import { tracked } from '@glimmer/tracking';
 
 import { task } from 'ember-concurrency';
 import { TrackedArray } from 'tracked-built-ins';
 
-import { scopeDescription } from '../../../utils/token-scopes';
+import { patternDescription, scopeDescription } from '../../../utils/token-scopes';
 
 export default class NewTokenController extends Controller {
   @service notifications;
@@ -119,14 +118,10 @@ class CratePattern {
   get description() {
     if (!this.pattern) {
       return 'Please enter a crate name pattern';
-    } else if (this.pattern === '*') {
-      return 'Matches all crates on crates.io';
-    } else if (!this.isValid) {
-      return 'Invalid crate name pattern';
-    } else if (this.hasWildcard) {
-      return htmlSafe(`Matches all crates starting with <strong>${this.pattern.slice(0, -1)}</strong>`);
+    } else if (this.isValid) {
+      return patternDescription(this.pattern);
     } else {
-      return htmlSafe(`Matches only the <strong>${this.pattern}</strong> crate`);
+      return 'Invalid crate name pattern';
     }
   }
 
diff --git a/app/utils/token-scopes.js b/app/utils/token-scopes.js
index 53de57e212..68c37c3ec6 100644
--- a/app/utils/token-scopes.js
+++ b/app/utils/token-scopes.js
@@ -1,3 +1,5 @@
+import { htmlSafe } from '@ember/template';
+
 const DESCRIPTIONS = {
   'change-owners': 'Invite new crate owners or remove existing ones',
   'publish-new': 'Publish new crates',
@@ -8,3 +10,13 @@ const DESCRIPTIONS = {
 export function scopeDescription(scope) {
   return DESCRIPTIONS[scope];
 }
+
+export function patternDescription(pattern) {
+  if (pattern === '*') {
+    return 'Matches all crates on crates.io';
+  } else if (pattern.endsWith('*')) {
+    return htmlSafe(`Matches all crates starting with <strong>${pattern.slice(0, -1)}</strong>`);
+  } else {
+    return htmlSafe(`Matches only the <strong>${pattern}</strong> crate`);
+  }
+}

From 2de7651ad67e558eb3878c36bd166f885c6dbfb2 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Mon, 8 May 2023 11:11:20 +0200
Subject: [PATCH 3/6] styles: Fix `<strong>` usage inside tooltip inside
 `<small>`

---
 app/styles/shared/typography.module.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/styles/shared/typography.module.css b/app/styles/shared/typography.module.css
index 60abd926a8..dee269ce12 100644
--- a/app/styles/shared/typography.module.css
+++ b/app/styles/shared/typography.module.css
@@ -5,6 +5,10 @@
     strong {
         color: var(--main-color);
     }
+
+    :global(.tooltip) strong {
+        color: inherit;
+    }
 }
 
 .small a, a.small {

From 351c174728bd73f4f9ec71637d8bc5e347d37ae6 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Mon, 8 May 2023 11:16:17 +0200
Subject: [PATCH 4/6] settings/tokens: Move token date metadata into shared
 `.metadata` element

---
 app/components/settings/api-tokens.hbs        | 20 ++++++++++---------
 app/components/settings/api-tokens.module.css | 17 ++++++++++------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/app/components/settings/api-tokens.hbs b/app/components/settings/api-tokens.hbs
index b4153d4f5d..ae70b30b25 100644
--- a/app/components/settings/api-tokens.hbs
+++ b/app/components/settings/api-tokens.hbs
@@ -71,16 +71,18 @@
           {{token.name}}
         </h3>
 
-        <div title={{token.last_used_at}} local-class="last-used-at" data-test-last-used-at>
-          {{#if token.last_used_at}}
-            Last used {{date-format-distance-to-now token.last_used_at addSuffix=true}}
-          {{else}}
-            Never used
-          {{/if}}
-        </div>
+        <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}}
+              Last used {{date-format-distance-to-now token.last_used_at addSuffix=true}}
+            {{else}}
+              Never used
+            {{/if}}
+          </div>
 
-        <div title={{token.created_at}} local-class="created-at" data-test-created-at>
-          Created {{date-format-distance-to-now token.created_at addSuffix=true}}
+          <div title={{token.created_at}} local-class="created-at" data-test-created-at>
+            Created {{date-format-distance-to-now token.created_at addSuffix=true}}
+          </div>
         </div>
 
         {{#if token.token}}
diff --git a/app/components/settings/api-tokens.module.css b/app/components/settings/api-tokens.module.css
index a6e583f29f..0cbb023313 100644
--- a/app/components/settings/api-tokens.module.css
+++ b/app/components/settings/api-tokens.module.css
@@ -35,17 +35,19 @@
 }
 
 .name {
-    margin: 0 0 12px;
+    margin: 0 0 var(--space-s);
     font-weight: 500;
 }
 
 .dates {
 }
 
-.created-at,
-.last-used-at {
+.metadata {
     composes: small from '../../styles/shared/typography.module.css';
-    margin-top: 4px;
+
+    > * + * {
+        margin-top: var(--space-3xs);
+    }
 }
 
 .new-token-form {
@@ -168,11 +170,14 @@
         display: grid;
         grid-template:
             "name actions" auto
-            "last-user actions" auto
-            "created-at actions" auto
+            "metadata actions" auto
             "details details" auto
             / 1fr auto;
 
+        .metadata {
+            grid-area: metadata;
+        }
+
         .actions {
             grid-area: actions;
             align-self: start;

From 8399e562904675df9187a25a73526e19a93ce11b Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Mon, 8 May 2023 11:16:28 +0200
Subject: [PATCH 5/6] settings/tokens: Remove empty CSS class

---
 app/components/settings/api-tokens.module.css | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/app/components/settings/api-tokens.module.css b/app/components/settings/api-tokens.module.css
index 0cbb023313..b9becd83e9 100644
--- a/app/components/settings/api-tokens.module.css
+++ b/app/components/settings/api-tokens.module.css
@@ -39,9 +39,6 @@
     font-weight: 500;
 }
 
-.dates {
-}
-
 .metadata {
     composes: small from '../../styles/shared/typography.module.css';
 

From 422adaed6d1974e5e4bf4f92d6ee2a5717f86525 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Mon, 8 May 2023 11:20:19 +0200
Subject: [PATCH 6/6] settings/tokens: Display endpoint/crate scopes if they
 exist

---
 app/components/settings/api-tokens.hbs        | 32 +++++++++++++++++++
 app/components/settings/api-tokens.js         | 10 ++++++
 app/components/settings/api-tokens.module.css | 10 ++++++
 tests/routes/settings/tokens/new-test.js      |  7 +++-
 4 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/app/components/settings/api-tokens.hbs b/app/components/settings/api-tokens.hbs
index ae70b30b25..095a46533e 100644
--- a/app/components/settings/api-tokens.hbs
+++ b/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}}
diff --git a/app/components/settings/api-tokens.js b/app/components/settings/api-tokens.js
index 0aa28aefdc..fb09965d0c 100644
--- a/app/components/settings/api-tokens.js
+++ b/app/components/settings/api-tokens.js
@@ -5,6 +5,8 @@ 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;
@@ -12,10 +14,18 @@ export default class ApiTokens extends Component {
 
   @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');
diff --git a/app/components/settings/api-tokens.module.css b/app/components/settings/api-tokens.module.css
index b9becd83e9..e81d0f602c 100644
--- a/app/components/settings/api-tokens.module.css
+++ b/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;
         }
diff --git a/tests/routes/settings/tokens/new-test.js b/tests/routes/settings/tokens/new-test.js
index 375c6c5409..6d2a9374f0 100644
--- a/tests/routes/settings/tokens/new-test.js
+++ b/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) {