DEV: Convert `api-key-urls` modal to component-based API (#22913)

<img width="474" alt="Screenshot 2023-08-01 at 1 29 26 PM" src="https://github.com/discourse/discourse/assets/50783505/1a46901f-8231-46fb-8c36-cb441b7fd883">

app/assets/javascripts/admin/addon/components/modal/api-key-urls.hbs

@@ -0,0 +1,16 @@
+<DModal
+  @title={{i18n "admin.api.scopes.allowed_urls"}}
+  @closeModal={{@closeModal}}
+>
+  <:body>
+    <div>
+      <ul>
+        {{#each @model.urls as |url|}}
+          <li>
+            <code>{{url}}</code>
+          </li>
+        {{/each}}
+      </ul>
+    </div>
+  </:body>
+</DModal>

app/assets/javascripts/admin/addon/controllers/admin-api-keys-new.js

@@ -5,12 +5,13 @@ import discourseComputed from "discourse-common/utils/decorators";
 import { isBlank } from "@ember/utils";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { action, get } from "@ember/object";
-import showModal from "discourse/lib/show-modal";
 import { ajax } from "discourse/lib/ajax";
 import { inject as service } from "@ember/service";
+import ApiKeyUrlsModal from "../components/modal/api-key-urls";
 
 export default class AdminApiKeysNewController extends Controller {
   @service router;
+  @service modal;
 
   userModes = [
     { id: "all", name: I18n.t("admin.api.all_users") },
@@ -84,8 +85,7 @@ export default class AdminApiKeysNewController extends Controller {
 
   @action
   showURLs(urls) {
-    return showModal("admin-api-key-urls", {
-      admin: true,
+    this.modal.show(ApiKeyUrlsModal, {
       model: { urls },
     });
   }

app/assets/javascripts/admin/addon/controllers/admin-api-keys-show.js

@@ -4,13 +4,14 @@ import Controller from "@ember/controller";
 import { bufferedProperty } from "discourse/mixins/buffered-content";
 import { isEmpty } from "@ember/utils";
 import { popupAjaxError } from "discourse/lib/ajax-error";
-import showModal from "discourse/lib/show-modal";
 import { inject as service } from "@ember/service";
+import ApiKeyUrlsModal from "../components/modal/api-key-urls";
 
 export default class AdminApiKeysShowController extends Controller.extend(
   bufferedProperty("model")
 ) {
   @service router;
+  @service modal;
 
   @empty("model.id") isNew;
 
@@ -67,8 +68,7 @@ export default class AdminApiKeysShowController extends Controller.extend(
 
   @action
   showURLs(urls) {
-    return showModal("admin-api-key-urls", {
-      admin: true,
+    this.modal.show(ApiKeyUrlsModal, {
       model: {
         urls,
       },

app/assets/javascripts/admin/addon/templates/modal/admin-api-key-urls.hbs

@@ -1,11 +0,0 @@
-<DModalBody @title="admin.api.scopes.allowed_urls">
-  <div>
-    <ul>
-      {{#each this.model.urls as |url|}}
-        <li>
-          <code>{{url}}</code>
-        </li>
-      {{/each}}
-    </ul>
-  </div>
-</DModalBody>

app/assets/javascripts/discourse/app/services/modal.js

@@ -49,7 +49,6 @@ const KNOWN_LEGACY_MODALS = [
   "topic-summary",
   "user-status",
   "admin-watched-word-test",
-  "admin-api-key-urls",
   "admin-delete-user-posts-progress",
   "admin-install-theme",
   "admin-penalize-user",