From 369afd44aabb3907c46b7db02946cbe2ce76ef76 Mon Sep 17 00:00:00 2001
From: Simcha Shats <simcha.shats@nielsen.com>
Date: Wed, 27 Oct 2021 11:36:32 +0300
Subject: [PATCH] fix: pass state to dynamic component

---
 .../components/gridComponents/DynamicComponent.tsx  | 13 ++++++++++++-
 .../TestComponent/TestComponent.tsx                 |  5 ++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/gridComponents/DynamicComponent.tsx b/superset-frontend/src/dashboard/components/gridComponents/DynamicComponent.tsx
index 4734a4520fc3e..b0046a99668a8 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/DynamicComponent.tsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/DynamicComponent.tsx
@@ -20,6 +20,7 @@ import React, { FC, Suspense } from 'react';
 import { JsonObject, t } from '@superset-ui/core';
 import backgroundStyleOptions from 'src/dashboard/util/backgroundStyleOptions';
 import cx from 'classnames';
+import { useSelector } from 'react-redux';
 import DragDroppable from '../dnd/DragDroppable';
 import { COLUMN_TYPE, ROW_TYPE } from '../../util/componentTypes';
 import WithPopoverMenu from '../menu/WithPopoverMenu';
@@ -33,6 +34,7 @@ import HoverMenu from '../menu/HoverMenu';
 import DeleteComponentButton from '../DeleteComponentButton';
 import BackgroundStyleDropdown from '../menu/BackgroundStyleDropdown';
 import dashboardComponents from '../../../visualizations/presets/dashboardComponents';
+import { RootState } from '../../types';
 
 type FilterSummaryType = {
   component: JsonObject;
@@ -97,6 +99,15 @@ const DynamicComponent: FC<FilterSummaryType> = ({
 
   const { Component } = dashboardComponents.get(component.meta.componentKey);
 
+  const dashboardData = useSelector<RootState>(
+    ({ nativeFilters, dataMask, charts, dashboardInfo }) => ({
+      nativeFilters,
+      dataMask,
+      charts,
+      dashboardInfo,
+    }),
+  );
+
   return (
     <DragDroppable
       // @ts-ignore
@@ -155,7 +166,7 @@ const DynamicComponent: FC<FilterSummaryType> = ({
                   </HoverMenu>
                 )}
                 <Suspense fallback={<div>{t('Loading...')}</div>}>
-                  <Component />
+                  <Component dashboardData={dashboardData} />
                 </Suspense>
               </div>
             </ResizableContainer>
diff --git a/superset-frontend/src/visualizations/dashboardComponents/TestComponent/TestComponent.tsx b/superset-frontend/src/visualizations/dashboardComponents/TestComponent/TestComponent.tsx
index 4699070a01d3d..d12ac02c5f004 100644
--- a/superset-frontend/src/visualizations/dashboardComponents/TestComponent/TestComponent.tsx
+++ b/superset-frontend/src/visualizations/dashboardComponents/TestComponent/TestComponent.tsx
@@ -17,8 +17,11 @@
  * under the License.
  */
 import React from 'react';
+import { JsonObject } from '@superset-ui/core';
 
 // TODO: POC only component can be removed after PR approved
-const TestComponent = () => <div>Test</div>;
+const TestComponent = ({ dashboardData }: JsonObject) => (
+  <div>We have next keys: {Object.keys(dashboardData).join(', ')}</div>
+);
 
 export default TestComponent;