Fully clear App State on page change (#8208)

## Describe your changes

We had a bug where stale elements of the old page remain visible to
users on the new page. We want update our `pendingElementBuffer` based
on new state and not from the original closure.

## Testing Plan

- Unit Test for this specific scenario
- E2E test is difficult to implement due to the ephemeral nature of this
edge case.

---

**Contribution License Agreement**

By submitting this pull request you agree that all contributions to this
project are made under the Apache 2.0 license.

frontend/app/src/App.test.tsx

@@ -75,6 +75,7 @@ jest.mock("@streamlit/app/src/connection/ConnectionManager", () => {
       isConnected: jest.fn(),
       disconnect: jest.fn(),
       sendMessage: jest.fn(),
+      incrementMessageCacheRunCount: jest.fn(),
       getBaseUriParts() {
         return {
           basePath: "",
@@ -423,10 +424,30 @@ describe("App", () => {
         { deltaPath: [0, 0] }
       )
 
+      sendForwardMessage(
+        "delta",
+        {
+          type: "newElement",
+          newElement: {
+            type: "text",
+            text: {
+              body: "Here is some more text",
+              help: "",
+            },
+          },
+        },
+        { deltaPath: [0, 1] }
+      )
+
       // Delta Messages handle on a timer, so we make it async
       await waitFor(() => {
-        expect(screen.getByText("Here is some text")).toBeInTheDocument()
+        expect(screen.getByText("Here is some more text")).toBeInTheDocument()
       })
+
+      sendForwardMessage(
+        "scriptFinished",
+        ForwardMsg.ScriptFinishedStatus.FINISHED_SUCCESSFULLY
+      )
     }
 
     afterEach(() => {
@@ -773,9 +794,7 @@ describe("App", () => {
     })
 
     it("clears app elements if currentPageScriptHash changes", async () => {
-      await waitFor(() => {
-        makeAppWithElements()
-      })
+      await makeAppWithElements()
 
       sendForwardMessage("newSession", {
         ...NEW_SESSION_JSON,
@@ -787,6 +806,51 @@ describe("App", () => {
       )
     })
 
+    it("does not add stale app elements if currentPageScriptHash changes", async () => {
+      await makeAppWithElements()
+
+      sendForwardMessage("newSession", {
+        ...NEW_SESSION_JSON,
+        pageScriptHash: "different_hash",
+        scriptRunId: "different_script_run_id",
+      })
+
+      // elements are cleared
+      expect(
+        screen.queryByText("Here is some more text")
+      ).not.toBeInTheDocument()
+
+      // Run the script with one new element
+      sendForwardMessage("sessionStatusChanged", {
+        runOnSave: false,
+        scriptIsRunning: true,
+      })
+      sendForwardMessage(
+        "delta",
+        {
+          type: "newElement",
+          newElement: {
+            type: "text",
+            text: {
+              body: "Here is some other text",
+              help: "",
+            },
+          },
+        },
+        { deltaPath: [0, 0] }
+      )
+
+      // Wait for the new element to appear on the screen
+      await waitFor(() => {
+        expect(screen.getByText("Here is some other text")).toBeInTheDocument()
+      })
+
+      // Continue to expect the original element removed
+      expect(
+        screen.queryByText("Here is some more text")
+      ).not.toBeInTheDocument()
+    })
+
     it("doesn't clear app elements if currentPageScriptHash doesn't change", async () => {
       await waitFor(() => {
         makeAppWithElements()

frontend/app/src/App.tsx

@@ -1127,7 +1127,7 @@ export class App extends PureComponent<Props, State> {
         elements: AppRoot.empty(false, sidebarElements),
       },
       () => {
-        this.pendingElementsBuffer = elements
+        this.pendingElementsBuffer = this.state.elements
         this.widgetMgr.removeInactive(new Set([]))
       }
     )