Merge branch 'dev' into sha256

Author: T4rk1n

@plotly/dash-test-components/src/components/AddPropsComponent.js

@@ -0,0 +1,23 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const AddPropsComponent = (props) => {
+    const {children, id} = props;
+
+
+    return (
+        <div id={id}>
+            {React.cloneElement(children, {
+                receive: `Element #${id} pass`,
+                id: id,
+            })}
+        </div>
+    );
+};
+
+AddPropsComponent.propTypes = {
+    id: PropTypes.string,
+    children: PropTypes.node,
+};
+
+export default AddPropsComponent;

@plotly/dash-test-components/src/components/ReceivePropsComponent.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ReceivePropsComponent = (props) => {
+    const {id, text, receive} = props;
+
+    return (
+        <div id={id}>
+            {receive || text}
+        </div>
+    );
+}
+ReceivePropsComponent.propTypes = {
+    id: PropTypes.string,
+    text: PropTypes.string,
+    receive: PropTypes.string,
+}
+
+export default ReceivePropsComponent;

@plotly/dash-test-components/src/index.js

@@ -7,6 +7,8 @@ import MyPersistedComponentNested from './components/MyPersistedComponentNested'
 import StyledComponent from './components/StyledComponent';
 import WidthComponent from './components/WidthComponent';
 import ComponentAsProp from './components/ComponentAsProp';
+import AddPropsComponent from "./components/AddPropsComponent";
+import ReceivePropsComponent from "./components/ReceivePropsComponent";
 
 export {
     AsyncComponent,
@@ -18,4 +20,6 @@ export {
     StyledComponent,
     WidthComponent,
     ComponentAsProp,
+    AddPropsComponent,
+    ReceivePropsComponent
 };

CHANGELOG.md

@@ -6,8 +6,10 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ## Added
 
+- [#2819](https://github.com/plotly/dash/pull/2819) Add dash subcomponents receive additional parameters passed by the parent component. Fixes [#2814](https://github.com/plotly/dash/issues/2814).
+- [#2826](https://github.com/plotly/dash/pull/2826) When using Pages, allows for `app.title` and (new) `app.description` to be used as defaults for the page title and description. Fixes [#2811](https://github.com/plotly/dash/issues/2811).
 - [#2795](https://github.com/plotly/dash/pull/2795) Allow list of components to be passed as layout.
-- [2760](https://github.com/plotly/dash/pull/2760) New additions to dcc.Loading resolving multiple issues:
+- [#2760](https://github.com/plotly/dash/pull/2760) New additions to dcc.Loading resolving multiple issues:
   - `delay_show` and `delay_hide` props  to prevent flickering during brief loading periods (similar to Dash Bootstrap Components dbc.Spinner)
   - `overlay_style` for styling the loading overlay,  such as setting  visibility and opacity for children
   - `target_components` specifies components/props triggering the loading spinner

dash/_pages.py

@@ -235,13 +235,14 @@ def register_page(
        order `0`
 
     - `title`:
-       (string or function) The name of the page <title>. That is, what appears in the browser title.
-       If not supplied, will use the supplied `name` or will be inferred by module,
-       e.g. `pages.weekly_analytics` to `Weekly analytics`
+       (string or function) Specifies the page title displayed in the browser tab.
+        If not supplied, the app's title is used if different from the default "Dash".
+        Otherwise, the title is the given `name` or inferred from the module name.
+        For example, `pages.weekly_analytics` is inferred as "Weekly Analytics".
 
     - `description`:
        (string or function) The <meta type="description"></meta>.
-       If not supplied, then nothing is supplied.
+       If not defined, the application description will be used if available.
 
     - `image`:
        The meta description image used by social media platforms.
@@ -319,10 +320,18 @@ def register_page(
     )
     page.update(
         supplied_title=title,
-        title=(title if title is not None else page["name"]),
+        title=title
+        if title is not None
+        else CONFIG.title
+        if CONFIG.title != "Dash"
+        else page["name"],
     )
     page.update(
-        description=description if description else "",
+        description=description
+        if description
+        else CONFIG.description
+        if CONFIG.description
+        else "",
         order=order,
         supplied_order=order,
         supplied_layout=layout,

dash/dash-renderer/src/TreeContainer.js

@@ -16,6 +16,7 @@ import {
     map,
     mapObjIndexed,
     mergeRight,
+    omit,
     pick,
     pickBy,
     propOr,
@@ -237,7 +238,13 @@ class BaseTreeContainer extends Component {
         );
     }
 
-    getComponent(_dashprivate_layout, children, loading_state, setProps) {
+    getComponent(
+        _dashprivate_layout,
+        children,
+        loading_state,
+        setProps,
+        _extraProps
+    ) {
         const {_dashprivate_config, _dashprivate_dispatch, _dashprivate_error} =
             this.props;
 
@@ -262,7 +269,10 @@ class BaseTreeContainer extends Component {
             ],
             _dashprivate_config
         );
-        let props = dissoc('children', _dashprivate_layout.props);
+        let props = mergeRight(
+            _extraProps,
+            dissoc('children', _dashprivate_layout.props)
+        );
 
         for (let i = 0; i < childrenProps.length; i++) {
             const childrenProp = childrenProps[i];
@@ -481,6 +491,21 @@ class BaseTreeContainer extends Component {
             _dashprivate_path
         } = this.props;
 
+        const _extraProps = omit(
+            [
+                '_dashprivate_error',
+                '_dashprivate_layout',
+                '_dashprivate_loadingState',
+                '_dashprivate_loadingStateHash',
+                '_dashprivate_path',
+                '_dashprivate_config',
+                '_dashprivate_dispatch',
+                '_dashprivate_graphs',
+                '_dashprivate_loadingMap'
+            ],
+            this.props
+        );
+
         const layoutProps = this.getLayoutProps();
 
         const children = this.getChildren(
@@ -492,7 +517,8 @@ class BaseTreeContainer extends Component {
             _dashprivate_layout,
             children,
             _dashprivate_loadingState,
-            this.setProps
+            this.setProps,
+            _extraProps
         );
     }
 }

dash/dash.py

@@ -366,6 +366,9 @@ class Dash:
     functions. The syntax for this parameter is a dict of State objects:
     `routing_callback_inputs={"language": Input("language", "value")}`
     NOTE: the keys "pathname_" and "search_" are reserved for internal use.
+
+    :param description:  Sets a default description for meta tags on Dash pages (use_pages=True).
+
     """
 
     _plotlyjs_url: str
@@ -404,6 +407,7 @@ def __init__(  # pylint: disable=too-many-statements
         add_log_handler=True,
         hooks: Union[RendererHooks, None] = None,
         routing_callback_inputs: Optional[Dict[str, Union[Input, State]]] = None,
+        description=None,
         **obsolete,
     ):
         _validate.check_obsolete(obsolete)
@@ -458,6 +462,7 @@ def __init__(  # pylint: disable=too-many-statements
             title=title,
             update_title=update_title,
             include_pages_meta=include_pages_meta,
+            description=description,
         )
         self.config.set_read_only(
             [

tests/integration/multi_page/test_pages_layout.py

@@ -235,3 +235,27 @@ def test_pala005_routing_inputs(dash_duo, clear_pages_state):
     # Changing the language Input re-runs the layout function
     dash_duo.select_dcc_dropdown("#language", "fr")
     dash_duo.wait_for_text_to_equal("#contents", "Le hash dit: #123")
+
+
+def get_app_title_description():
+    app = Dash(
+        __name__, use_pages=True, title="App Title", description="App Description"
+    )
+    dash.register_page("home", layout=html.Div("Home"), path="/")
+    dash.register_page(
+        "page1",
+        layout=html.Div("Page1"),
+        title="Page 1 Title",
+        description="Page 1 Description",
+    )
+    app.layout = html.Div(dash.page_container)
+    return app
+
+
+def test_pala006_app_title_discription(dash_duo, clear_pages_state):
+    dash_duo.start_server(get_app_title_description())
+
+    assert dash.page_registry["home"]["title"] == "App Title"
+    assert dash.page_registry["page1"]["title"] == "Page 1 Title"
+    assert dash.page_registry["home"]["description"] == "App Description"
+    assert dash.page_registry["page1"]["description"] == "Page 1 Description"

tests/integration/renderer/test_add_receive_props.py

@@ -0,0 +1,74 @@
+from dash import Dash, html, Input, Output, no_update
+
+from dash_test_components import AddPropsComponent, ReceivePropsComponent
+
+
+def test_rdarp001_add_receive_props(dash_duo):
+    app = Dash(__name__)
+    app.layout = html.Div(
+        [
+            AddPropsComponent(
+                ReceivePropsComponent(
+                    id="test-receive1",
+                    text="receive component1",
+                ),
+                id="test-add",
+            ),
+            ReceivePropsComponent(
+                id="test-receive2",
+                text="receive component2",
+            ),
+            html.Button(
+                "load no pass props",
+                id="load-no-pass-props",
+            ),
+            html.Pre("load-no-pass-props-output"),
+            html.Div(id="load-no-pass-props-output"),
+            html.Button(
+                "load pass props",
+                id="load-pass-props",
+            ),
+            html.Pre("load-pass-props-output"),
+            html.Div(id="load-pass-props-output"),
+        ]
+    )
+
+    @app.callback(
+        Output("load-no-pass-props-output", "children"),
+        Input("load-no-pass-props", "n_clicks"),
+    )
+    def load_no_pass_props(n_clicks):
+        if n_clicks:
+            return ReceivePropsComponent(
+                id="test-receive-no-pass",
+                text="receive component no pass",
+            )
+        return no_update
+
+    @app.callback(
+        Output("load-pass-props-output", "children"),
+        Input("load-pass-props", "n_clicks"),
+    )
+    def load_pass_props(n_clicks):
+        if n_clicks:
+            return AddPropsComponent(
+                ReceivePropsComponent(
+                    id="test-receive-pass",
+                    text="receive component pass",
+                ),
+                id="test-add-pass",
+            )
+        return no_update
+
+    dash_duo.start_server(app)
+    dash_duo.wait_for_text_to_equal("#test-receive1", "Element #test-add pass")
+    dash_duo.wait_for_text_to_equal("#test-receive2", "receive component2")
+
+    clicker_no_pass = dash_duo.wait_for_element("#load-no-pass-props")
+    clicker_no_pass.click()
+    dash_duo.wait_for_text_to_equal(
+        "#test-receive-no-pass", "receive component no pass"
+    )
+    clicker_pass = dash_duo.wait_for_element("#load-pass-props")
+    clicker_pass.click()
+    dash_duo.wait_for_text_to_equal("#test-receive-pass", "Element #test-add-pass pass")