Extract TokenScopes::PatternDescription component

Author: Turbo87

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>{{this.patternDescription part.value}}</Tooltip></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;
@@ -25,7 +25,6 @@ export default class NewTokenController extends Controller {
 
   ENDPOINT_SCOPES = ['change-owners', 'publish-new', 'publish-update', 'yank'];
 
-  patternDescription = patternDescription;
   scopeDescription = scopeDescription;
 
   constructor() {

app/templates/settings/tokens/new.gjs

@@ -10,6 +10,7 @@ import svgJar from 'ember-svg-jar/helpers/svg-jar';
 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>
@@ -155,7 +156,7 @@ import LoadingSpinner from 'crates-io/components/loading-spinner';
                 {{#if (not pattern.pattern)}}
                   Please enter a crate name pattern
                 {{else if pattern.isValid}}
-                  {{@controller.patternDescription pattern.pattern}}
+                  <PatternDescription @pattern={{pattern.pattern}} />
                 {{else}}
                   Invalid crate name pattern
                 {{/if}}

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`);
-  }
-}