Merge pull request #238 from BSd3v/recursive_Components

Fixing issue #237
plotly · Aug 31, 2023 · ef06128 · ef06128
2 parents 2644b0b + e890b8d
commit ef06128
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 11 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -1,7 +1,7 @@
 version: 2.1
 
 orbs:
-  browser-tools: circleci/browser-tools@1.4.3
+  browser-tools: circleci/browser-tools@1.4.4
 
 jobs:
   test: &test
@@ -12,8 +12,9 @@ jobs:
           password: $DASH_PAT_DOCKERHUB
     steps:
       - checkout
-      - browser-tools/install-chrome
-      - browser-tools/install-chromedriver
+      - browser-tools/install-browser-tools:
+          chrome-version: 116.0.5845.96
+          firefox-version: 116.0.3
       - run:
           name: Install Python deps
           command: |

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,11 @@ All notable changes to `dash-ag-grid` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 Links "DE#nnn" prior to version 2.0 point to the Dash Enterprise closed-source Dash AG Grid repo
 
+## [Unreleased]
+
+### Fixed
+- [#237](https://github.com/plotly/dash-ag-grid/pull/237) Fixed issue with grid components not being passed down to the detail grids
+
 ## [2.3.0] - 2023-07-27
 
 ### Added

diff --git a/src/lib/fragments/AgGrid.react.js b/src/lib/fragments/AgGrid.react.js
@@ -13,6 +13,7 @@ import {
     omit,
     includes,
     assoc,
+    assocPath,
 } from 'ramda';
 import {
     propTypes as _propTypes,
@@ -408,12 +409,23 @@ export default class DashAgGrid extends Component {
                 return this.convertCol(value);
             }
             if (GRID_NESTED_FUNCTIONS[target]) {
+                let adjustedVal = value;
                 if ('suppressCallback' in value) {
-                    value.getDetailRowData = value.suppressCallback
-                        ? this.suppressGetDetail(value.detailColName)
-                        : this.callbackGetDetail;
+                    adjustedVal = {
+                        ...adjustedVal,
+                        getDetailRowData: value.suppressCallback
+                            ? this.suppressGetDetail(value.detailColName)
+                            : this.callbackGetDetail,
+                    };
                 }
-                return this.convertAllProps(value);
+                if ('detailGridOptions' in value) {
+                    adjustedVal = assocPath(
+                        ['detailGridOptions', 'components'],
+                        this.state.components,
+                        adjustedVal
+                    );
+                }
+                return this.convertAllProps(adjustedVal);
             }
             if (GRID_DANGEROUS_FUNCTIONS[target]) {
                 return this.convertMaybeFunctionNoParams(value, {prop: target});

diff --git a/tests/test_recursive_functions.py b/tests/test_recursive_functions.py
@@ -26,8 +26,11 @@ def test_rf001_recursive_functions(dash_duo):
         {
             "headerName": "City",
             "field": "city",
-            "valueFormatter": {"function": "1+2"},
+            "valueGetter": {"function": "`**${1+2}**`"},
             "cellStyle": {"color": "red"},
+            "cellRendererParams": {
+                "innerRenderer": "markdown"
+            }
         },
         {"headerName": "Pop. (City proper)", "field": "population_city"},
         {"headerName": "Pop. (Metro area)", "field": "population_metro"},
@@ -37,7 +40,8 @@ def test_rf001_recursive_functions(dash_duo):
                 {
                     "headerName": "Pop. (Metro area)",
                     "field": "population_metro",
-                    "valueFormatter": {"function": "1+2"},
+                    "valueGetter": {"function": "`**${1+2}**`"},
+                    "cellRenderer": "markdown"
                 },
                 {
                     "headerName": "testing",
@@ -202,9 +206,15 @@ def test_rf001_recursive_functions(dash_duo):
     dash_duo.wait_for_text_to_equal(
         '#grid .ag-details-grid [row-index="0"] [aria-colindex="1"]', "3"
     )
+    dash_duo.wait_for_text_to_equal(
+        '#grid .ag-details-grid [row-index="0"] [aria-colindex="1"] strong', "3"
+    )
     dash_duo.wait_for_text_to_equal(
         '#grid .ag-details-grid [row-index="0"] [aria-colindex="4"]', "3"
     )
+    dash_duo.wait_for_text_to_equal(
+        '#grid .ag-details-grid [row-index="0"] [aria-colindex="4"] strong', "3"
+    )
     dash_duo.wait_for_text_to_equal(
         '#grid .ag-details-grid [row-index="0"] [aria-colindex="5"]', "8"
     )
@@ -228,10 +238,18 @@ def test_rf001_recursive_functions(dash_duo):
         '#grid .ag-details-grid .ag-details-grid [row-index="0"] [aria-colindex="1"]',
         "3",
     )
+    dash_duo.wait_for_text_to_equal(
+        '#grid .ag-details-grid .ag-details-grid [row-index="0"] [aria-colindex="1"] strong',
+        "3",
+    )
     dash_duo.wait_for_text_to_equal(
         '#grid .ag-details-grid .ag-details-grid [row-index="0"] [aria-colindex="4"]',
         "3",
     )
+    dash_duo.wait_for_text_to_equal(
+        '#grid .ag-details-grid .ag-details-grid [row-index="0"] [aria-colindex="4"] strong',
+        "3",
+    )
     dash_duo.wait_for_text_to_equal(
         '#grid .ag-details-grid .ag-details-grid [row-index="0"] [aria-colindex="5"]',
         "8",
@@ -266,7 +284,8 @@ def test_rf002_recursive_functions_server(dash_duo):
         {
             "headerName": "City",
             "field": "city",
-            "valueFormatter": {"function": "1+2"},
+            "valueGetter": {"function": "`**${1+2}**`"},
+            "cellRendererParams": {"innerRenderer": "markdown"},
             "cellStyle": {"color": "red"},
         },
         {"headerName": "Pop. (City proper)", "field": "population_city"},
@@ -277,7 +296,8 @@ def test_rf002_recursive_functions_server(dash_duo):
                 {
                     "headerName": "Pop. (Metro area)",
                     "field": "population_metro",
-                    "valueFormatter": {"function": "1+2"},
+                    "valueGetter": {"function": "`**${1+2}**`"},
+                    "cellRenderer": "markdown"
                 },
                 {
                     "headerName": "testing",
@@ -448,9 +468,15 @@ def handle_request(request):
     dash_duo.wait_for_text_to_equal(
         '#grid .ag-details-grid [row-index="0"] [aria-colindex="1"]', "3"
     )
+    dash_duo.wait_for_text_to_equal(
+        '#grid .ag-details-grid [row-index="0"] [aria-colindex="1"] strong', "3"
+    )
     dash_duo.wait_for_text_to_equal(
         '#grid .ag-details-grid [row-index="0"] [aria-colindex="4"]', "3"
     )
+    dash_duo.wait_for_text_to_equal(
+        '#grid .ag-details-grid [row-index="0"] [aria-colindex="4"] strong', "3"
+    )
     dash_duo.wait_for_text_to_equal(
         '#grid .ag-details-grid [row-index="0"] [aria-colindex="5"]', "8"
     )
@@ -474,10 +500,18 @@ def handle_request(request):
         '#grid .ag-details-grid .ag-details-grid [row-index="0"] [aria-colindex="1"]',
         "3",
     )
+    dash_duo.wait_for_text_to_equal(
+        '#grid .ag-details-grid .ag-details-grid [row-index="0"] [aria-colindex="1"] strong',
+        "3",
+    )
     dash_duo.wait_for_text_to_equal(
         '#grid .ag-details-grid .ag-details-grid [row-index="0"] [aria-colindex="4"]',
         "3",
     )
+    dash_duo.wait_for_text_to_equal(
+        '#grid .ag-details-grid .ag-details-grid [row-index="0"] [aria-colindex="4"] strong',
+        "3",
+    )
     dash_duo.wait_for_text_to_equal(
         '#grid .ag-details-grid .ag-details-grid [row-index="0"] [aria-colindex="5"]',
         "8",