Allow setting disableFullscreenMode dynamically (streamlit#8026)

Co-authored-by: Lukas Masuch <[email protected]>

e2e_playwright/host_config.py

@@ -0,0 +1,26 @@
+# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022-2024)
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+import numpy as np
+import pandas as pd
+
+import streamlit as st
+
+# always generate the same data
+np.random.seed(0)
+
+st.image(np.repeat(0, 100).reshape(10, 10))
+st.dataframe(
+    pd.DataFrame(np.random.randint(0, 100, size=(100, 4)), columns=list("ABCD"))
+)

e2e_playwright/host_config_test.py

@@ -0,0 +1,54 @@
+# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022-2024)
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+from playwright.sync_api import Page, Route, expect
+
+from e2e_playwright.conftest import ImageCompareFunction, wait_for_app_loaded
+
+
+def handle_route_hostconfig_disable_fullscreen(route: Route) -> None:
+    response = route.fetch()
+    body = response.json()
+    body["disableFullscreenMode"] = True
+    route.fulfill(
+        # Pass all fields from the response.
+        response=response,
+        # Override response body.
+        json=body,
+    )
+
+
+def test_disable_fullscreen(
+    page: Page, app_port: int, assert_snapshot: ImageCompareFunction
+):
+    """Test that fullscreen mode is disabled for elements when set via host-config"""
+    page.route("**/_stcore/host-config", handle_route_hostconfig_disable_fullscreen)
+    page.goto(f"http://localhost:{app_port}")
+    wait_for_app_loaded(page)
+
+    # check that the image does not have the fullscreen button
+    expect(page.get_by_test_id("StyledFullScreenButton")).to_have_count(0)
+
+    # Test that the toolbar is not shown when hovering over a dataframe
+    dataframe_element = page.get_by_test_id("stDataFrame").nth(0)
+    dataframe_toolbar = dataframe_element.get_by_test_id("stElementToolbar")
+
+    # Hover over dataframe
+    dataframe_element.hover()
+    # Check that it is visible (expect waits)
+    expect(dataframe_toolbar).to_have_css("opacity", "1")
+    # Take a snapshot
+    assert_snapshot(
+        dataframe_toolbar, name="host_config-dataframe_disabled_fullscreen_mode"
+    )

e2e_playwright/st_dataframe_interactions_test.py

@@ -204,7 +204,7 @@ def test_clicking_on_fullscreen_toolbar_button(
 
     fullscreen_toolbar_button = dataframe_toolbar.get_by_test_id(
         "stElementToolbarButton"
-    ).nth(2)
+    ).last
 
     # Activate toolbar:
     dataframe_element.hover()

e2e_playwright/st_image.py

@@ -0,0 +1,19 @@
+# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022-2024)
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+import numpy as np
+
+import streamlit as st
+
+st.image(np.repeat(0, 100).reshape(10, 10))

e2e_playwright/st_image_test.py

@@ -0,0 +1,21 @@
+# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022-2024)
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+from playwright.sync_api import Page, expect
+
+
+def test_fullscreen_button_exists(app: Page):
+    """Test that element has the fullscreen button."""
+    # check that the image has the fullscreen button
+    expect(app.get_by_test_id("StyledFullScreenButton")).to_have_count(1)

frontend/lib/src/components/core/Block/Block.tsx

@@ -16,13 +16,14 @@
 
 import React, {
   ReactElement,
+  useContext,
   useEffect,
   useMemo,
   useRef,
   ReactNode,
 } from "react"
 import { useTheme } from "@emotion/react"
-
+import { LibContext } from "@streamlit/lib/src/components/core/LibContext"
 import { Block as BlockProto } from "@streamlit/lib/src/proto"
 import { BlockNode, AppNode, ElementNode } from "@streamlit/lib/src/AppNode"
 import { getElementWidgetID } from "@streamlit/lib/src/util/utils"
@@ -75,7 +76,16 @@ const BlockNodeRenderer = (props: BlockPropsWithWidth): ReactElement => {
   )
 
   const childProps = { ...props, ...{ node } }
-  const child: ReactElement = <LayoutBlock {...childProps} />
+
+  // TODO: overwrite props.disableFullscreenMode for Dialog in a follow-up PR, e.g.:
+  // const disableFullscreenMode = props.disableFullscreenMode || node.deltaBlock.dialog
+  // and pass to LayoutBlock as props
+  const child: ReactElement = (
+    <LayoutBlock
+      {...childProps}
+      // disableFullscreenMode={disableFullscreenMode}
+    />
+  )
 
   if (node.deltaBlock.expandable) {
     return (
@@ -149,18 +159,28 @@ const BlockNodeRenderer = (props: BlockPropsWithWidth): ReactElement => {
 }
 
 const ChildRenderer = (props: BlockPropsWithWidth): ReactElement => {
+  const { libConfig } = useContext(LibContext)
+
   // Handle cycling of colors for dividers:
   assignDividerColor(props.node, useTheme())
+
   return (
     <>
       {props.node.children &&
         props.node.children.map(
           (node: AppNode, index: number): ReactElement => {
+            const disableFullscreenMode =
+              libConfig.disableFullscreenMode || props.disableFullscreenMode
+
             // Base case: render a leaf node.
             if (node instanceof ElementNode) {
               // Put node in childProps instead of passing as a node={node} prop in React to
               // guarantee it doesn't get overwritten by {...childProps}.
-              const childProps = { ...props, node: node as ElementNode }
+              const childProps = {
+                ...props,
+                disableFullscreenMode,
+                node: node as ElementNode,
+              }
 
               const key = getElementWidgetID(node.element) || index
               return <ElementNodeRenderer key={key} {...childProps} />
@@ -171,7 +191,11 @@ const ChildRenderer = (props: BlockPropsWithWidth): ReactElement => {
             if (node instanceof BlockNode) {
               // Put node in childProps instead of passing as a node={node} prop in React to
               // guarantee it doesn't get overwritten by {...childProps}.
-              const childProps = { ...props, node: node as BlockNode }
+              const childProps = {
+                ...props,
+                disableFullscreenMode,
+                node: node as BlockNode,
+              }
 
               return <BlockNodeRenderer key={index} {...childProps} />
             }