render modal without a service

Author: SamSaffron

assets/javascripts/discourse/components/ai-llm-editor-form.gjs

@@ -23,7 +23,6 @@ export default class AiLlmEditorForm extends Component {
   @service toasts;
   @service router;
   @service dialog;
-  @service modal;
 
   @tracked isSaving = false;
 
@@ -33,6 +32,8 @@ export default class AiLlmEditorForm extends Component {
   @tracked apiKeySecret = true;
   @tracked quotaCount = 0;
 
+  @tracked modalIsVisible = false;
+
   constructor() {
     super(...arguments);
     this.updateQuotaCount();
@@ -108,9 +109,7 @@ export default class AiLlmEditorForm extends Component {
 
   @action
   openAddQuotaModal() {
-    this.modal.show(AiLlmQuotaModal, {
-      model: { llm: this.args.model, onSave: this.updateQuotaCount },
-    });
+    this.modalIsVisible = true;
   }
 
   @computed("args.model.provider")
@@ -197,6 +196,12 @@ export default class AiLlmEditorForm extends Component {
     });
   }
 
+  @action
+  closeAddQuotaModal() {
+    this.modalIsVisible = false;
+    this.updateQuotaCount();
+  }
+
   <template>
     {{#if this.seeded}}
       <div class="alert alert-info">
@@ -369,6 +374,12 @@ export default class AiLlmEditorForm extends Component {
               @label="discourse_ai.llms.quotas.add"
               class="btn"
             />
+            {{#if this.modalIsVisible}}
+              <AiLlmQuotaModal
+                @model={{(hash llm=@model)}}
+                @closeModal={{this.closeAddQuotaModal}}
+              />
+            {{/if}}
           {{/if}}
           <DButton
             class="btn-primary ai-llm-editor__save"

assets/javascripts/discourse/components/ai-llm-quota-editor.gjs

@@ -1,6 +1,6 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
-import { fn } from "@ember/helper";
+import { fn, hash } from "@ember/helper";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
@@ -13,12 +13,12 @@ export default class AiLlmQuotaEditor extends Component {
   @service store;
   @service dialog;
   @service site;
-  @service modal;
 
   @tracked newQuotaGroupIds = null;
   @tracked newQuotaTokens = null;
   @tracked newQuotaUsages = null;
   @tracked newQuotaDuration = 86400; // 1 day default
+  @tracked modalIsVisible = false;
 
   @action
   updateExistingQuotaTokens(quota, event) {
@@ -37,9 +37,7 @@ export default class AiLlmQuotaEditor extends Component {
 
   @action
   openAddQuotaModal() {
-    this.modal.show(AiLlmQuotaModal, {
-      model: { llm: this.args.model },
-    });
+    this.modalIsVisible = true;
   }
 
   get canAddQuota() {
@@ -94,6 +92,11 @@ export default class AiLlmQuotaEditor extends Component {
     }
   }
 
+  @action
+  closeAddQuotaModal() {
+    this.modalIsVisible = false;
+  }
+
   <template>
     <div class="ai-llm-quotas">
       <table class="ai-llm-quotas__table">
@@ -162,6 +165,13 @@ export default class AiLlmQuotaEditor extends Component {
           @label="discourse_ai.llms.quotas.add"
           class="btn"
         />
+
+        {{#if this.modalIsVisible}}
+          <AiLlmQuotaModal
+            @model={{(hash llm=@model)}}
+            @closeModal={{this.closeAddQuotaModal}}
+          />
+        {{/if}}
       </div>
     </div>
   </template>