DEV: Update custom array implementations for Ember 5 compatibility (#24435)

In the long term we should aim to modernize these places, but for now this change will make them compatible with Ember 5.x (while maintaining compatibility with Ember 3.28)

app/assets/javascripts/admin/addon/components/simple-list.js

@@ -1,3 +1,4 @@
+import { arrayContentDidChange } from "@ember/-internals/metal";
 import Component from "@ember/component";
 import { action } from "@ember/object";
 import { empty } from "@ember/object/computed";
@@ -33,7 +34,7 @@ export default class SimpleList extends Component {
   @action
   changeValue(index, event) {
     this.collection.replace(index, 1, [event.target.value]);
-    this.collection.arrayContentDidChange(index);
+    arrayContentDidChange(this.collection, index);
     this._onChange();
   }
 

app/assets/javascripts/discourse/app/lib/posts-with-placeholders.js

@@ -1,3 +1,7 @@
+import {
+  arrayContentDidChange,
+  arrayContentWillChange,
+} from "@ember/-internals/metal";
 import EmberArray from "@ember/array";
 import EmberObject from "@ember/object";
 import discourseComputed from "discourse-common/utils/decorators";
@@ -26,9 +30,9 @@ export default EmberObject.extend(EmberArray, {
   },
 
   _changeArray(cb, offset, removed, inserted) {
-    this.arrayContentWillChange(offset, removed, inserted);
+    arrayContentWillChange(this, offset, removed, inserted);
     cb();
-    this.arrayContentDidChange(offset, removed, inserted);
+    arrayContentDidChange(this, offset, removed, inserted);
     this.notifyPropertyChange("length");
   },
 
@@ -44,6 +48,10 @@ export default EmberObject.extend(EmberArray, {
     this._changeArray(cb, this.get("posts.length") - 1, 1, 0);
   },
 
+  insertPost(insertAtIndex, cb) {
+    this._changeArray(cb, insertAtIndex, 0, 1);
+  },
+
   refreshAll(cb) {
     const length = this.get("posts.length");
     this._changeArray(cb, 0, length, length);

app/assets/javascripts/discourse/app/models/post-stream.js

@@ -391,7 +391,6 @@ export default RestModel.extend({
       // Insert the gap at the appropriate place
 
       let postIdx = currentPosts.indexOf(post);
-      const origIdx = postIdx;
 
       let headGap = gap.slice(0, this.topic.chunk_size);
       let tailGap = gap.slice(this.topic.chunk_size);
@@ -402,7 +401,10 @@ export default RestModel.extend({
             this._initUserModels(p);
             const stored = this.storePost(p);
             if (!currentPosts.includes(stored)) {
-              currentPosts.insertAt(postIdx++, stored);
+              const insertAtIndex = postIdx++;
+              this.postsWithPlaceholders.insertPost(insertAtIndex, () => {
+                currentPosts.insertAt(insertAtIndex, stored);
+              });
             }
           });
 
@@ -411,11 +413,7 @@ export default RestModel.extend({
           } else {
             delete this.get("gaps.before")[postId];
           }
-          this.postsWithPlaceholders.arrayContentDidChange(
-            origIdx,
-            0,
-            posts.length
-          );
+
           post.set("hasGap", false);
           this.gapExpanded();
         });

spec/system/topic_page_spec.rb

@@ -48,4 +48,25 @@ describe "Topic page", type: :system do
       expect(".codeblock-button-wrapper").to be_present
     end
   end
+
+  context "with a gap" do
+    before do
+      post2 = Fabricate(:post, topic: topic, cooked: "post2")
+      post3 = Fabricate(:post, topic: topic, cooked: "post3")
+      post4 = Fabricate(:post, topic: topic, cooked: "post4")
+
+      PostDestroyer.new(Discourse.system_user, post2).destroy
+      PostDestroyer.new(Discourse.system_user, post3).destroy
+
+      sign_in Fabricate(:admin)
+    end
+
+    it "displays the gap to admins, and alows them to expand it" do
+      visit "/t/#{topic.slug}/#{topic.id}"
+
+      expect(page).to have_css(".topic-post", count: 2)
+      find(".post-stream .gap").click()
+      expect(page).to have_css(".topic-post", count: 4)
+    end
+  end
 end