Extract PatternDescription component

app/components/settings/api-tokens.gjs

@@ -14,19 +14,19 @@ import or from 'ember-truth-helpers/helpers/or';
 
 import CopyButton from 'crates-io/components/copy-button';
 import LoadingSpinner from 'crates-io/components/loading-spinner';
+import PatternDescription from 'crates-io/components/token-scopes/pattern-description';
 import Tooltip from 'crates-io/components/tooltip';
 import dateFormatDistanceToNow from 'crates-io/helpers/date-format-distance-to-now';
 import isClipboardSupported from 'crates-io/helpers/is-clipboard-supported';
 
-import { patternDescription, scopeDescription } from '../../utils/token-scopes';
+import { scopeDescription } from '../../utils/token-scopes';
 
 export default class ApiTokens extends Component {
   @service store;
   @service notifications;
   @service router;
 
   scopeDescription = scopeDescription;
-  patternDescription = patternDescription;
 
   get sortedTokens() {
     return this.args.tokens
@@ -136,7 +136,7 @@ export default class ApiTokens extends Component {
 
                     {{#each (this.listToParts token.crate_scopes) as |part|~}}
                       {{#if (eq part.type 'element')}}
-                        <strong>{{part.value}}<Tooltip @text={{this.patternDescription part.value}} /></strong>
+                        <strong>{{part.value}}<Tooltip><PatternDescription @pattern={{part.value}} /></Tooltip></strong>
                       {{~else~}}
                         {{part.value}}
                       {{/if}}

app/components/token-scopes/pattern-description.gjs

@@ -0,0 +1,24 @@
+import Component from '@glimmer/component';
+
+import { eq } from 'ember-truth-helpers';
+
+export default class PatternDescription extends Component {
+  get prefix() {
+    if (this.args.pattern.endsWith('*')) {
+      return this.args.pattern.slice(0, -1);
+    }
+  }
+
+  <template>
+    {{#if (eq @pattern '*')}}
+      Matches all crates on crates.io
+    {{else if this.prefix}}
+      Matches all crates starting with
+      <strong>{{this.prefix}}</strong>
+    {{else}}
+      Matches only the
+      <strong>{{@pattern}}</strong>
+      crate
+    {{/if}}
+  </template>
+}

app/controllers/settings/tokens/new.js

@@ -6,7 +6,7 @@ import { tracked } from '@glimmer/tracking';
 import { task } from 'ember-concurrency';
 import { TrackedArray } from 'tracked-built-ins';
 
-import { patternDescription, scopeDescription } from '../../../utils/token-scopes';
+import { scopeDescription } from '../../../utils/token-scopes';
 
 export default class NewTokenController extends Controller {
   @service notifications;
@@ -157,16 +157,6 @@ class CratePattern {
     return this.pattern.endsWith('*');
   }
 
-  get description() {
-    if (!this.pattern) {
-      return 'Please enter a crate name pattern';
-    } else if (this.isValid) {
-      return patternDescription(this.pattern);
-    } else {
-      return 'Invalid crate name pattern';
-    }
-  }
-
   @action resetValidation() {
     this.showAsInvalid = false;
   }

app/templates/settings/tokens/new.gjs

@@ -7,9 +7,10 @@ import autoFocus from '@zestia/ember-auto-focus/modifiers/auto-focus';
 import perform from 'ember-concurrency/helpers/perform';
 import preventDefault from 'ember-event-helpers/helpers/prevent-default';
 import svgJar from 'ember-svg-jar/helpers/svg-jar';
-import eq from 'ember-truth-helpers/helpers/eq';
+import { eq, not } from 'ember-truth-helpers';
 
 import LoadingSpinner from 'crates-io/components/loading-spinner';
+import PatternDescription from 'crates-io/components/token-scopes/pattern-description';
 
 <template>
   <h2>New API Token</h2>
@@ -152,7 +153,13 @@ import LoadingSpinner from 'crates-io/components/loading-spinner';
               />
 
               <span class='pattern-description' data-test-description>
-                {{pattern.description}}
+                {{#if (not pattern.pattern)}}
+                  Please enter a crate name pattern
+                {{else if pattern.isValid}}
+                  <PatternDescription @pattern={{pattern.pattern}} />
+                {{else}}
+                  Invalid crate name pattern
+                {{/if}}
               </span>
             </div>
 

app/utils/token-scopes.js

@@ -1,5 +1,3 @@
-import { htmlSafe } from '@ember/template';
-
 const DESCRIPTIONS = {
   'change-owners': 'Invite new crate owners or remove existing ones',
   'publish-new': 'Publish new crates',
@@ -10,13 +8,3 @@ 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`);
-  }
-}