From e7764b586506e080fe63039d49cbc86a41534eff Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Fri, 17 Mar 2023 17:16:42 +0000
Subject: [PATCH] Convert composer controller to service with
 backwards-compatibility shims

---
 .../discourse-common/addon/resolver.js        |   6 +
 .../app/components/composer-container.hbs     | 302 ++++++++++--------
 .../app/components/composer-container.js      |   6 +
 .../discourse/app/controllers/composer.js     |  19 ++
 .../discourse/app/routes/application.js       |   8 -
 .../discourse/app/services/composer.js        |  28 +-
 .../discourse/app/templates/application.hbs   |   2 +-
 7 files changed, 215 insertions(+), 156 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/app/components/composer-container.js
 create mode 100644 app/assets/javascripts/discourse/app/controllers/composer.js

diff --git a/app/assets/javascripts/discourse-common/addon/resolver.js b/app/assets/javascripts/discourse-common/addon/resolver.js
index 45c0655643..026c4fe0be 100644
--- a/app/assets/javascripts/discourse-common/addon/resolver.js
+++ b/app/assets/javascripts/discourse-common/addon/resolver.js
@@ -101,6 +101,12 @@ const DEPRECATED_MODULES = new Map(
       dropFrom: "3.0.0",
       silent: true,
     },
+    "controller:composer": {
+      newName: "service:composer",
+      since: "3.1.0.beta3",
+      dropFrom: "3.2.0",
+      silent: true,
+    },
   })
 );
 
diff --git a/app/assets/javascripts/discourse/app/components/composer-container.hbs b/app/assets/javascripts/discourse/app/components/composer-container.hbs
index 3afebb8cf9..7491163353 100644
--- a/app/assets/javascripts/discourse/app/components/composer-container.hbs
+++ b/app/assets/javascripts/discourse/app/components/composer-container.hbs
@@ -1,75 +1,76 @@
 <ComposerBody
-  @composer={{this.model}}
-  @showPreview={{this.showPreview}}
-  @openIfDraft={{action "openIfDraft"}}
-  @typed={{action "typed"}}
-  @cancelled={{action "cancelled"}}
-  @save={{action "save"}}
+  @composer={{this.composer.model}}
+  @showPreview={{this.composer.showPreview}}
+  @openIfDraft={{this.composer.openIfDraft}}
+  @typed={{this.composer.typed}}
+  @cancelled={{this.composer.cancelled}}
+  @save={{this.composer.save}}
 >
   <div class="grippie"></div>
 
-  {{#if this.visible}}
+  {{#if this.composer.visible}}
     <ComposerMessages
-      @composer={{this.model}}
-      @messageCount={{this.messageCount}}
-      @addLinkLookup={{action "addLinkLookup"}}
+      @composer={{this.composer.model}}
+      @messageCount={{this.composer.messageCount}}
+      @addLinkLookup={{this.composer.addLinkLookup}}
     />
 
-    {{#if this.showFullScreenPrompt}}
+    {{#if this.composer.showFullScreenPrompt}}
       <ComposerFullscreenPrompt
-        @removeFullScreenExitPrompt={{action "removeFullScreenExitPrompt"}}
+        @removeFullScreenExitPrompt={{this.composer.removeFullScreenExitPrompt}}
       />
     {{/if}}
 
-    {{#if this.model.viewOpenOrFullscreen}}
+    {{#if this.composer.model.viewOpenOrFullscreen}}
       <div
         role="form"
-        aria-label={{I18n this.saveLabel}}
-        class="reply-area {{if this.canEditTags 'with-tags' 'without-tags'}}"
+        aria-label={{I18n this.composer.saveLabel}}
+        class="reply-area
+          {{if this.composer.canEditTags 'with-tags' 'without-tags'}}"
       >
         <span>
           <PluginOutlet
             @name="composer-open"
             @connectorTagName="div"
-            @outletArgs={{hash model=this.model}}
+            @outletArgs={{hash model=this.composer.model}}
           />
         </span>
 
         <div class="reply-to">
-          {{#unless this.model.viewFullscreen}}
+          {{#unless this.composer.model.viewFullscreen}}
             <div class="reply-details">
               <ComposerActionTitle
-                @model={{this.model}}
-                @openComposer={{action "openComposer"}}
-                @closeComposer={{action "closeComposer"}}
-                @canWhisper={{this.canWhisper}}
+                @model={{this.composer.model}}
+                @openComposer={{this.composer.openComposer}}
+                @closeComposer={{this.composer.closeComposer}}
+                @canWhisper={{this.composer.canWhisper}}
               />
 
               <PluginOutlet
                 @name="composer-action-after"
-                @outletArgs={{hash model=this.model}}
+                @outletArgs={{hash model=this.composer.model}}
               />
 
-              {{#unless this.site.mobileView}}
-                {{#if this.model.unlistTopic}}
+              {{#unless this.composer.site.mobileView}}
+                {{#if this.composer.model.unlistTopic}}
                   <span class="unlist">({{i18n "composer.unlist"}})</span>
                 {{/if}}
-                {{#if this.isWhispering}}
-                  {{#if this.model.noBump}}
+                {{#if this.composer.isWhispering}}
+                  {{#if this.composer.model.noBump}}
                     <span class="no-bump">{{d-icon "anchor"}}</span>
                   {{/if}}
                 {{/if}}
               {{/unless}}
 
-              {{#if this.canEdit}}
+              {{#if this.composer.canEdit}}
                 <LinkToInput
-                  @onClick={{action "displayEditReason"}}
-                  @showInput={{this.showEditReason}}
+                  @onClick={{this.composer.displayEditReason}}
+                  @showInput={{this.composer.showEditReason}}
                   @icon="info-circle"
                   @class="display-edit-reason"
                 >
                   <TextField
-                    @value={{this.editReason}}
+                    @value={{this.composer.editReason}}
                     @id="edit-reason"
                     @maxlength="255"
                     @placeholderKey="composer.edit_reason_placeholder"
@@ -81,70 +82,70 @@
 
           <PluginOutlet
             @name="before-composer-controls"
-            @outletArgs={{hash model=this.model}}
+            @outletArgs={{hash model=this.composer.model}}
           />
 
           <ComposerToggles
-            @composeState={{this.model.composeState}}
-            @showToolbar={{this.showToolbar}}
-            @toggleComposer={{action "toggle"}}
-            @toggleToolbar={{action "toggleToolbar"}}
-            @toggleFullscreen={{action "fullscreenComposer"}}
-            @disableTextarea={{this.disableTextarea}}
+            @composeState={{this.composer.model.composeState}}
+            @showToolbar={{this.composer.showToolbar}}
+            @toggleComposer={{this.composer.toggle}}
+            @toggleToolbar={{this.composer.toggleToolbar}}
+            @toggleFullscreen={{this.composer.fullscreenComposer}}
+            @disableTextarea={{this.composer.disableTextarea}}
           />
         </div>
 
         <ComposerEditor
-          @topic={{this.topic}}
-          @composer={{this.model}}
-          @lastValidatedAt={{this.lastValidatedAt}}
-          @canWhisper={{this.canWhisper}}
-          @storeToolbarState={{action "storeToolbarState"}}
-          @onPopupMenuAction={{action "onPopupMenuAction"}}
+          @topic={{this.composer.topic}}
+          @composer={{this.composer.model}}
+          @lastValidatedAt={{this.composer.lastValidatedAt}}
+          @canWhisper={{this.composer.canWhisper}}
+          @storeToolbarState={{this.composer.storeToolbarState}}
+          @onPopupMenuAction={{this.composer.onPopupMenuAction}}
           @showUploadModal={{route-action "showUploadSelector"}}
-          @popupMenuOptions={{this.popupMenuOptions}}
-          @draftStatus={{this.model.draftStatus}}
-          @isUploading={{this.isUploading}}
-          @isProcessingUpload={{this.isProcessingUpload}}
-          @allowUpload={{this.allowUpload}}
-          @uploadIcon={{this.uploadIcon}}
-          @isCancellable={{this.isCancellable}}
-          @uploadProgress={{this.uploadProgress}}
-          @groupsMentioned={{action "groupsMentioned"}}
-          @cannotSeeMention={{action "cannotSeeMention"}}
-          @hereMention={{action "hereMention"}}
-          @importQuote={{action "importQuote"}}
-          @togglePreview={{action "togglePreview"}}
-          @processPreview={{this.showPreview}}
-          @showToolbar={{this.showToolbar}}
-          @afterRefresh={{action "afterRefresh"}}
-          @focusTarget={{this.focusTarget}}
-          @disableTextarea={{this.disableTextarea}}
+          @popupMenuOptions={{this.composer.popupMenuOptions}}
+          @draftStatus={{this.composer.model.draftStatus}}
+          @isUploading={{this.composer.isUploading}}
+          @isProcessingUpload={{this.composer.isProcessingUpload}}
+          @allowUpload={{this.composer.allowUpload}}
+          @uploadIcon={{this.composer.uploadIcon}}
+          @isCancellable={{this.composer.isCancellable}}
+          @uploadProgress={{this.composer.uploadProgress}}
+          @groupsMentioned={{this.composer.groupsMentioned}}
+          @cannotSeeMention={{this.composer.cannotSeeMention}}
+          @hereMention={{this.composer.hereMention}}
+          @importQuote={{this.composer.importQuote}}
+          @togglePreview={{this.composer.togglePreview}}
+          @processPreview={{this.composer.showPreview}}
+          @showToolbar={{this.composer.showToolbar}}
+          @afterRefresh={{this.composer.afterRefresh}}
+          @focusTarget={{this.composer.focusTarget}}
+          @disableTextarea={{this.composer.disableTextarea}}
         >
           <div class="composer-fields">
             <PluginOutlet
               @name="before-composer-fields"
-              @outletArgs={{hash model=this.model}}
+              @outletArgs={{hash model=this.composer.model}}
             />
-            {{#unless this.model.viewFullscreen}}
-              {{#if this.model.canEditTitle}}
-                {{#if this.model.creatingPrivateMessage}}
+            {{#unless this.composer.model.viewFullscreen}}
+              {{#if this.composer.model.canEditTitle}}
+                {{#if this.composer.model.creatingPrivateMessage}}
                   <div class="user-selector">
                     <ComposerUserSelector
-                      @topicId={{this.topicModel.id}}
-                      @recipients={{this.model.targetRecipients}}
-                      @hasGroups={{this.model.hasTargetGroups}}
-                      @focusTarget={{this.focusTarget}}
+                      @topicId={{this.composer.topicModel.id}}
+                      @recipients={{this.composer.model.targetRecipients}}
+                      @hasGroups={{this.composer.model.hasTargetGroups}}
+                      @focusTarget={{this.composer.focusTarget}}
                       @class={{concat
                         "users-input"
-                        (if this.showWarning " can-warn")
+                        (if this.composer.showWarning " can-warn")
                       }}
                     />
-                    {{#if this.showWarning}}
+                    {{#if this.composer.showWarning}}
                       <label class="add-warning">
                         <Input
                           @type="checkbox"
-                          @checked={{this.model.isWarning}}
+                          @checked={{this.composer.model.isWarning}}
                         />
                         <span>{{i18n "composer.add_warning"}}</span>
                       </label>
@@ -154,49 +155,55 @@
 
                 <div
                   class="title-and-category
-                    {{if this.showPreview 'with-preview'}}"
+                    {{if this.composer.showPreview 'with-preview'}}"
                 >
                   <ComposerTitle
-                    @composer={{this.model}}
-                    @lastValidatedAt={{this.lastValidatedAt}}
-                    @focusTarget={{this.focusTarget}}
+                    @composer={{this.composer.model}}
+                    @lastValidatedAt={{this.composer.lastValidatedAt}}
+                    @focusTarget={{this.composer.focusTarget}}
                   />
 
-                  {{#if this.model.showCategoryChooser}}
+                  {{#if this.composer.model.showCategoryChooser}}
                     <div class="category-input">
                       <CategoryChooser
-                        @value={{this.model.categoryId}}
-                        @onChange={{action (mut this.model.categoryId)}}
+                        @value={{this.composer.model.categoryId}}
+                        @onChange={{action
+                          (mut this.composer.model.categoryId)
+                        }}
                         @options={{hash
-                          disabled=this.disableCategoryChooser
-                          scopedCategoryId=this.scopedCategoryId
-                          prioritizedCategoryId=this.prioritizedCategoryId
+                          disabled=this.composer.disableCategoryChooser
+                          scopedCategoryId=this.composer.scopedCategoryId
+                          prioritizedCategoryId=this.composer.prioritizedCategoryId
                         }}
                       />
-                      <PopupInputTip @validation={{this.categoryValidation}} />
+                      <PopupInputTip
+                        @validation={{this.composer.categoryValidation}}
+                      />
                     </div>
                   {{/if}}
 
-                  {{#if this.canEditTags}}
+                  {{#if this.composer.canEditTags}}
                     <MiniTagChooser
-                      @value={{this.model.tags}}
-                      @onChange={{action (mut this.model.tags)}}
+                      @value={{this.composer.model.tags}}
+                      @onChange={{action (mut this.composer.model.tags)}}
                       @options={{hash
-                        disabled=this.disableTagsChooser
-                        categoryId=this.model.categoryId
-                        minimum=this.model.minimumRequiredTags
+                        disabled=this.composer.disableTagsChooser
+                        categoryId=this.composer.model.categoryId
+                        minimum=this.composer.model.minimumRequiredTags
                       }}
                     />
-                    <PopupInputTip @validation={{this.tagValidation}} />
+                    <PopupInputTip
+                      @validation={{this.composer.tagValidation}}
+                    />
                   {{/if}}
 
                   <PluginOutlet
                     @name="after-title-and-category"
                     @outletArgs={{hash
-                      model=this.model
-                      tagValidation=this.tagValidation
-                      canEditTags=this.canEditTags
-                      disabled=this.disableTagsChooser
+                      model=this.composer.model
+                      tagValidation=this.composer.tagValidation
+                      canEditTags=this.composer.canEditTags
+                      disabled=this.composer.disableTagsChooser
                     }}
                   />
                 </div>
@@ -207,8 +214,8 @@
                   @name="composer-fields"
                   @connectorTagName="div"
                   @outletArgs={{hash
-                    model=this.model
-                    showPreview=this.showPreview
+                    model=this.composer.model
+                    showPreview=this.composer.showPreview
                   }}
                 />
               </span>
@@ -219,7 +226,7 @@
         <span>
           <PluginOutlet
             @name="composer-after-composer-editor"
-            @outletArgs={{hash model=this.model}}
+            @outletArgs={{hash model=this.composer.model}}
           />
         </span>
 
@@ -228,53 +235,55 @@
             <PluginOutlet
               @name="composer-fields-below"
               @connectorTagName="div"
-              @outletArgs={{hash model=this.model}}
+              @outletArgs={{hash model=this.composer.model}}
             />
           </span>
 
           <div class="save-or-cancel">
             <ComposerSaveButton
-              @action={{action "save"}}
-              @icon={{this.saveIcon}}
-              @label={{this.saveLabel}}
+              @action={{this.composer.save}}
+              @icon={{this.composer.saveIcon}}
+              @label={{this.composer.saveLabel}}
               @forwardEvent={{true}}
-              @disableSubmit={{this.disableSubmit}}
+              @disableSubmit={{this.composer.disableSubmit}}
             />
 
-            {{#if this.site.mobileView}}
+            {{#if this.composer.site.mobileView}}
               <a
                 href
-                {{on "click" this.cancel}}
+                {{on "click" this.composer.cancel}}
                 title={{i18n "cancel"}}
                 class="cancel"
               >
-                {{#if this.canEdit}}
+                {{#if this.composer.canEdit}}
                   {{d-icon "times"}}
                 {{else}}
                   {{d-icon "far-trash-alt"}}
                 {{/if}}
               </a>
             {{else}}
-              <a href {{on "click" this.cancel}} class="cancel">{{i18n
+              <a href {{on "click" this.composer.cancel}} class="cancel">{{i18n
                   "close"
                 }}</a>
             {{/if}}
 
-            {{#if this.site.mobileView}}
-              {{#if this.whisperOrUnlistTopic}}
+            {{#if this.composer.site.mobileView}}
+              {{#if this.composer.whisperOrUnlistTopic}}
                 <span class="whisper">
                   {{d-icon "far-eye-slash"}}
                 </span>
               {{/if}}
 
-              {{#if this.model.noBump}}
+              {{#if this.composer.model.noBump}}
                 <span class="no-bump">{{d-icon "anchor"}}</span>
               {{/if}}
             {{/if}}
 
-            {{#if (or this.isUploading this.isProcessingUpload)}}
+            {{#if
+              (or this.composer.isUploading this.composer.isProcessingUpload)
+            }}
               <div id="file-uploading">
-                {{#if this.isProcessingUpload}}
+                {{#if this.composer.isProcessingUpload}}
                   {{loading-spinner size="small"}}<span>{{i18n
                       "upload_selector.processing"
                     }}</span>
@@ -282,30 +291,39 @@
                   {{loading-spinner size="small"}}<span>{{i18n
                       "upload_selector.uploading"
                     }}
-                    {{this.uploadProgress}}%</span>
+                    {{this.composer.uploadProgress}}%</span>
                 {{/if}}
 
-                {{#if this.isCancellable}}
+                {{#if this.composer.isCancellable}}
                   <a
                     href
                     id="cancel-file-upload"
-                    {{on "click" this.cancelUpload}}
+                    {{on "click" this.composer.cancelUpload}}
                   >{{d-icon "times"}}</a>
                 {{/if}}
               </div>
             {{/if}}
 
-            <div class={{if this.isUploading "hidden"}} id="draft-status">
-              {{#if this.model.draftStatus}}
-                <span class="draft-error" title={{this.model.draftStatus}}>
-                  {{#if this.model.draftConflictUser}}
-                    {{avatar this.model.draftConflictUser imageSize="small"}}
+            <div
+              class={{if this.composer.isUploading "hidden"}}
+              id="draft-status"
+            >
+              {{#if this.composer.model.draftStatus}}
+                <span
+                  class="draft-error"
+                  title={{this.composer.model.draftStatus}}
+                >
+                  {{#if this.composer.model.draftConflictUser}}
+                    {{avatar
+                      this.composer.model.draftConflictUser
+                      imageSize="small"
+                    }}
                     {{d-icon "user-edit"}}
                   {{else}}
                     {{d-icon "exclamation-triangle"}}
                   {{/if}}
-                  {{#unless this.site.mobileView}}
-                    {{this.model.draftStatus}}
+                  {{#unless this.composer.site.mobileView}}
+                    {{this.composer.model.draftStatus}}
                   {{/unless}}
                 </span>
               {{/if}}
@@ -314,27 +332,27 @@
             <span>
               <PluginOutlet
                 @name="composer-after-save-or-cancel"
-                @outletArgs={{hash model=this.model}}
+                @outletArgs={{hash model=this.composer.model}}
               />
             </span>
           </div>
 
-          {{#if this.site.mobileView}}
+          {{#if this.composer.site.mobileView}}
             <span>
               <PluginOutlet
                 @name="composer-mobile-buttons-bottom"
-                @outletArgs={{hash model=this.model}}
+                @outletArgs={{hash model=this.composer.model}}
               />
             </span>
 
-            {{#if this.allowUpload}}
+            {{#if this.composer.allowUpload}}
               <a
                 id="mobile-file-upload"
                 class="btn btn-default no-text mobile-file-upload
-                  {{if this.isUploading 'hidden'}}"
+                  {{if this.composer.isUploading 'hidden'}}"
                 aria-label={{i18n "composer.upload_title"}}
               >
-                {{d-icon this.uploadIcon}}
+                {{d-icon this.composer.uploadIcon}}
               </a>
             {{/if}}
 
@@ -342,15 +360,15 @@
               href
               class="btn btn-default no-text mobile-preview"
               title={{i18n "composer.show_preview"}}
-              {{on "click" this.togglePreview}}
+              {{on "click" this.composer.togglePreview}}
               aria-label={{i18n "preview"}}
             >
               {{d-icon "desktop"}}
             </a>
 
-            {{#if this.showPreview}}
+            {{#if this.composer.showPreview}}
               <DButton
-                @action={{action "togglePreview"}}
+                @action={{this.composer.togglePreview}}
                 @class="hide-preview"
                 @ariaLabel="composer.hide_preview"
                 @icon="pencil-alt"
@@ -358,12 +376,12 @@
             {{/if}}
           {{else}}
             <DButton
-              @action={{action "togglePreview"}}
-              @translatedTitle={{this.toggleText}}
+              @action={{this.composer.togglePreview}}
+              @translatedTitle={{this.composer.toggleText}}
               @icon="angle-double-left"
               @class={{concat
                 "btn-flat btn-mini-toggle toggle-preview "
-                (unless this.showPreview "active")
+                (unless this.composer.showPreview "active")
               }}
             />
           {{/if}}
@@ -371,11 +389,11 @@
       </div>
     {{else}}
       <div class="saving-text">
-        {{#if this.model.createdPost}}
+        {{#if this.composer.model.createdPost}}
           {{i18n "composer.saved"}}
           <a
-            href={{this.createdPost.url}}
-            {{on "click" this.viewNewReply}}
+            href={{this.composer.createdPost.url}}
+            {{on "click" this.composer.viewNewReply}}
             class="permalink"
           >{{i18n "composer.view_new_post"}}</a>
         {{else}}
@@ -385,19 +403,19 @@
       </div>
 
       <div class="draft-text">
-        {{#if this.model.topic}}
+        {{#if this.composer.model.topic}}
           {{d-icon "share"}}
-          {{html-safe this.draftTitle}}
+          {{html-safe this.composer.draftTitle}}
         {{else}}
           {{i18n "composer.saved_draft"}}
         {{/if}}
       </div>
 
       <ComposerToggles
-        @composeState={{this.model.composeState}}
-        @toggleFullscreen={{action "openIfDraft"}}
-        @toggleComposer={{action "toggle"}}
-        @toggleToolbar={{action "toggleToolbar"}}
+        @composeState={{this.composer.model.composeState}}
+        @toggleFullscreen={{this.composer.openIfDraft}}
+        @toggleComposer={{this.composer.toggle}}
+        @toggleToolbar={{this.composer.toggleToolbar}}
       />
     {{/if}}
   {{/if}}
diff --git a/app/assets/javascripts/discourse/app/components/composer-container.js b/app/assets/javascripts/discourse/app/components/composer-container.js
new file mode 100644
index 0000000000..826c81d498
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/composer-container.js
@@ -0,0 +1,6 @@
+import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
+
+export default class ComposerContainer extends Component {
+  @service composer;
+}
diff --git a/app/assets/javascripts/discourse/app/controllers/composer.js b/app/assets/javascripts/discourse/app/controllers/composer.js
new file mode 100644
index 0000000000..73e80522c5
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/controllers/composer.js
@@ -0,0 +1,19 @@
+import Composer, {
+  addComposerSaveErrorCallback,
+  addPopupMenuOptionsCallback,
+  clearComposerSaveErrorCallback,
+  clearPopupMenuOptionsCallback,
+  toggleCheckDraftPopup,
+} from "discourse/services/composer";
+
+// TODO add deprecation
+
+export default Composer;
+
+export {
+  addComposerSaveErrorCallback,
+  addPopupMenuOptionsCallback,
+  clearComposerSaveErrorCallback,
+  clearPopupMenuOptionsCallback,
+  toggleCheckDraftPopup,
+};
diff --git a/app/assets/javascripts/discourse/app/routes/application.js b/app/assets/javascripts/discourse/app/routes/application.js
index e3b54b895a..d4f2dcb236 100644
--- a/app/assets/javascripts/discourse/app/routes/application.js
+++ b/app/assets/javascripts/discourse/app/routes/application.js
@@ -72,13 +72,6 @@ const ApplicationRoute = DiscourseRoute.extend(OpenComposer, {
       this.documentTitle.setTitle(tokens.join(" - "));
     },
 
-    postWasEnqueued(details) {
-      showModal("post-enqueued", {
-        model: details,
-        title: "review.approval.title",
-      });
-    },
-
     composePrivateMessage(user, post) {
       const recipients = user ? user.get("username") : "";
       const reply = post
@@ -258,7 +251,6 @@ const ApplicationRoute = DiscourseRoute.extend(OpenComposer, {
     this.render("application");
     this.render("user-card", { into: "application", outlet: "user-card" });
     this.render("modal", { into: "application", outlet: "modal" });
-    this.render("composer", { into: "application", outlet: "composer" });
   },
 
   handleShowLogin() {
diff --git a/app/assets/javascripts/discourse/app/services/composer.js b/app/assets/javascripts/discourse/app/services/composer.js
index 8a590575da..02fb94d0a3 100644
--- a/app/assets/javascripts/discourse/app/services/composer.js
+++ b/app/assets/javascripts/discourse/app/services/composer.js
@@ -1,5 +1,5 @@
 import Composer, { SAVE_ICONS, SAVE_LABELS } from "discourse/models/composer";
-import Controller, { inject as controller } from "@ember/controller";
+import Controller from "@ember/controller";
 import EmberObject, { action, computed } from "@ember/object";
 import { alias, and, or, reads } from "@ember/object/computed";
 import {
@@ -96,7 +96,9 @@ export function addComposerSaveErrorCallback(callback) {
 export default class ComposerController extends Controller {
   @service router;
   @service dialog;
-  @controller("topic") topicController;
+  @service site;
+  @service store;
+  @service appEvents;
 
   checkedMessages = false;
   messageCount = null;
@@ -121,6 +123,14 @@ export default class ComposerController extends Controller {
   @and("model.creatingTopic", "isStaffUser") canUnlistTopic;
   @or("replyingToWhisper", "model.whisper") isWhispering;
 
+  get topicController() {
+    return getOwner(this).lookup("controller:topic");
+  }
+
+  get capabilities() {
+    return getOwner(this).lookup("capabilities:main");
+  }
+
   @on("init")
   _setupPreview() {
     const val = this.site.mobileView
@@ -574,7 +584,7 @@ export default class ComposerController extends Controller {
 
   @action
   onPopupMenuAction(menuAction) {
-    this.send(menuAction);
+    this[menuAction]();
   }
 
   @action
@@ -590,7 +600,7 @@ export default class ComposerController extends Controller {
 
   @action
   cancelled() {
-    this.send("hitEsc");
+    this.hitEsc();
   }
 
   @action
@@ -1043,7 +1053,7 @@ export default class ComposerController extends Controller {
         this.appEvents.trigger("composer:saved");
 
         if (result.responseJson.action === "enqueued") {
-          this.send("postWasEnqueued", result.responseJson);
+          this.postWasEnqueued(result.responseJson);
           if (result.responseJson.pending_post) {
             let pendingPosts = this.get("topicController.model.pending_posts");
             if (pendingPosts) {
@@ -1145,6 +1155,14 @@ export default class ComposerController extends Controller {
     return promise;
   }
 
+  @action
+  postWasEnqueued(details) {
+    showModal("post-enqueued", {
+      model: details,
+      title: "review.approval.title",
+    });
+  }
+
   // Notify the composer messages controller that a reply has been typed. Some
   // messages only appear after typing.
   checkReplyLength() {
diff --git a/app/assets/javascripts/discourse/app/templates/application.hbs b/app/assets/javascripts/discourse/app/templates/application.hbs
index 8958f774b3..6e12530cbc 100644
--- a/app/assets/javascripts/discourse/app/templates/application.hbs
+++ b/app/assets/javascripts/discourse/app/templates/application.hbs
@@ -86,7 +86,7 @@
   {{outlet "modal"}}
   <DialogHolder />
   <TopicEntrance />
-  {{outlet "composer"}}
+  <ComposerContainer />
 
   {{#if this.showFooterNav}}
     <FooterNav />