Migrate allowed-message-origins to host-config endpoint (streamlit#7342)

* Fix python test typing

* Migrate allowed origins to host-config endpoint

* Fixes

* Apply websocket connection changes

* Fix tests

* Remove host config setter

* Make a proper copy

* Rename to libconfig

* Split into app and lib config

* Correctly deconstruct

* Update comment

* Fix test lib

* Fix linting error

frontend/app/src/App.test.tsx

@@ -1394,7 +1394,7 @@ describe("handles HostCommunication messaging", () => {
     instance = wrapper.instance() as App
 
     // @ts-expect-error - hostCommunicationMgr is private
-    instance.hostCommunicationMgr.setAllowedOriginsResp({
+    instance.hostCommunicationMgr.setAllowedOrigins({
       allowedOrigins: ["https://devel.streamlit.test"],
       useExternalAuthToken: false,
     })

frontend/app/src/App.tsx

@@ -104,6 +104,9 @@ import {
   createFormsData,
   FormsData,
   WidgetStateManager,
+  IHostConfigResponse,
+  LibConfig,
+  AppConfig,
 } from "@streamlit/lib"
 import { concat, noop, without } from "lodash"
 
@@ -165,6 +168,8 @@ interface State {
   pageLinkBaseUrl: string
   queryParams: string
   deployedAppMetadata: DeployedAppMetadata
+  libConfig: LibConfig
+  appConfig: AppConfig
 }
 
 const ELEMENT_LIST_BUFFER_TIMEOUT_MS = 10
@@ -274,6 +279,8 @@ export class App extends PureComponent<Props, State> {
       pageLinkBaseUrl: "",
       queryParams: "",
       deployedAppMetadata: {},
+      libConfig: {},
+      appConfig: {},
     }
 
     this.connectionManager = null
@@ -378,7 +385,18 @@ export class App extends PureComponent<Props, State> {
       connectionStateChanged: this.handleConnectionStateChanged,
       claimHostAuthToken: this.hostCommunicationMgr.claimAuthToken,
       resetHostAuthToken: this.hostCommunicationMgr.resetAuthToken,
-      setAllowedOriginsResp: this.hostCommunicationMgr.setAllowedOriginsResp,
+      onHostConfigResp: (response: IHostConfigResponse) => {
+        const { allowedOrigins, useExternalAuthToken } = response
+        const appConfig: AppConfig = { allowedOrigins, useExternalAuthToken }
+        const libConfig: LibConfig = {} // TODO(lukasmasuch): We don't have any libConfig yet:
+
+        // Set the allowed origins configuration for the host communication:
+        this.hostCommunicationMgr.setAllowedOrigins(appConfig)
+        // Set the streamlit-app specific config settings in AppContext:
+        this.setAppConfig(appConfig)
+        // Set the streamlit-lib specific config settings in LibContext:
+        this.setLibConfig(libConfig)
+      },
     })
 
     if (isScrollingHidden()) {
@@ -1467,6 +1485,20 @@ export class App extends PureComponent<Props, State> {
     this.setState({ isFullScreen })
   }
 
+  /**
+   * Set streamlit-lib specific configurations.
+   */
+  setLibConfig = (libConfig: LibConfig): void => {
+    this.setState({ libConfig })
+  }
+
+  /**
+   * Set streamlit-app specific configurations.
+   */
+  setAppConfig = (appConfig: AppConfig): void => {
+    this.setState({ appConfig })
+  }
+
   addScriptFinishedHandler = (func: () => void): void => {
     this.setState((prevState, _) => {
       return {
@@ -1558,6 +1590,8 @@ export class App extends PureComponent<Props, State> {
       sidebarChevronDownshift,
       hostMenuItems,
       hostToolbarItems,
+      libConfig,
+      appConfig,
     } = this.state
     const developmentMode = showDevelopmentOptions(
       this.state.isOwner,
@@ -1600,6 +1634,7 @@ export class App extends PureComponent<Props, State> {
           sidebarChevronDownshift,
           toastAdjustment: hostToolbarItems.length > 0,
           gitInfo: this.state.gitInfo,
+          appConfig,
         }}
       >
         <LibContext.Provider
@@ -1613,6 +1648,7 @@ export class App extends PureComponent<Props, State> {
             availableThemes: this.props.theme.availableThemes,
             addThemes: this.props.theme.addThemes,
             hideFullScreenButtons: false,
+            libConfig,
           }}
         >
           <HotKeys

frontend/app/src/components/AppContext.tsx

@@ -16,7 +16,7 @@
 
 import React from "react"
 
-import { PageConfig, IGitInfo } from "@streamlit/lib"
+import { PageConfig, IGitInfo, AppConfig } from "@streamlit/lib"
 
 export interface Props {
   /**
@@ -95,6 +95,11 @@ export interface Props {
    * The latest state of the git information related to the app.
    */
   gitInfo: IGitInfo | null
+
+  /** The app-specific configuration from the apps host which is requested via the
+   * _stcore/host-config endpoint.
+   */
+  appConfig: AppConfig
 }
 
 export const AppContext = React.createContext<Props>({
@@ -110,4 +115,5 @@ export const AppContext = React.createContext<Props>({
   sidebarChevronDownshift: 0,
   toastAdjustment: false,
   gitInfo: null,
+  appConfig: {},
 })

frontend/app/src/connection/ConnectionManager.ts

@@ -16,7 +16,7 @@
 import { ReactNode } from "react"
 
 import {
-  IAllowedMessageOriginsResponse,
+  IHostConfigResponse,
   BaseUriParts,
   getPossibleBaseUris,
   logError,
@@ -75,10 +75,10 @@ interface Props {
   resetHostAuthToken: () => void
 
   /**
-   * Function to set the list of origins that this app should accept
-   * cross-origin messages from (if in a relevant deployment scenario).
+   * Function to set the host config for this app (if in a relevant deployment
+   * scenario).
    */
-  setAllowedOriginsResp: (resp: IAllowedMessageOriginsResponse) => void
+  onHostConfigResp: (resp: IHostConfigResponse) => void
 }
 
 /**
@@ -192,7 +192,7 @@ export class ConnectionManager {
       onRetry: this.showRetryError,
       claimHostAuthToken: this.props.claimHostAuthToken,
       resetHostAuthToken: this.props.resetHostAuthToken,
-      setAllowedOriginsResp: this.props.setAllowedOriginsResp,
+      onHostConfigResp: this.props.onHostConfigResp,
     })
   }
 }