feat: deprecate old SuperChart API that accepts chartProps (apache-superset#202)

BREAKING CHANGE: No longer accept chartProps as a single prop in <SuperChart>. Developers must specify each field in chartProps individually.

Author: kristw

packages/superset-ui-chart/src/components/SuperChartShell.tsx

@@ -5,7 +5,7 @@ export { default as ChartProps } from './models/ChartProps';
 
 export { default as createLoadableRenderer } from './components/createLoadableRenderer';
 export { default as reactify } from './components/reactify';
-export { default as SuperChart } from './components/SuperChartShell';
+export { default as SuperChart } from './components/SuperChart';
 
 export {
   default as getChartBuildQueryRegistry,

packages/superset-ui-chart/src/index.ts

@@ -6,7 +6,7 @@ jest.mock('resize-observer-polyfill');
 // @ts-ignore
 import { triggerResizeObserver } from 'resize-observer-polyfill';
 import ErrorBoundary from 'react-error-boundary';
-import { ChartProps, SuperChart } from '../../src';
+import { SuperChart } from '../../src';
 import RealSuperChart from '../../src/components/SuperChart';
 import { ChartKeys, DiligentChartPlugin, BuggyChartPlugin } from './MockChartPlugins';
 import promiseTimeout from './promiseTimeout';
@@ -97,47 +97,15 @@ describe('SuperChart', () => {
     });
   });
 
-  describe('supports multiple way of specifying chartProps', () => {
-    it('chartProps is instanceof ChartProps', () => {
-      const wrapper = mount(
-        <SuperChart
-          chartType={ChartKeys.DILIGENT}
-          chartProps={new ChartProps({ width: 20, height: 20 })}
-        />,
-      );
-
-      return promiseTimeout(() => {
-        const renderedWrapper = wrapper.render();
-        expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
-        expectDimension(renderedWrapper, 20, 20);
-      });
-    });
-    it('chartProps is ChartPropsConfig', () => {
-      const wrapper = mount(
-        <SuperChart chartType={ChartKeys.DILIGENT} chartProps={{ width: 201, height: 202 }} />,
-      );
+  it('passes the props to renderer correctly', () => {
+    const wrapper = mount(
+      <SuperChart chartType={ChartKeys.DILIGENT} width={101} height={118} formData={{ abc: 1 }} />,
+    );
 
-      return promiseTimeout(() => {
-        const renderedWrapper = wrapper.render();
-        expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
-        expectDimension(renderedWrapper, 201, 202);
-      });
-    });
-    it('fields of chartProps are listed as props of SuperChart', () => {
-      const wrapper = mount(
-        <SuperChart
-          chartType={ChartKeys.DILIGENT}
-          width={101}
-          height={118}
-          formData={{ abc: 1 }}
-        />,
-      );
-
-      return promiseTimeout(() => {
-        const renderedWrapper = wrapper.render();
-        expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
-        expectDimension(renderedWrapper, 101, 118);
-      });
+    return promiseTimeout(() => {
+      const renderedWrapper = wrapper.render();
+      expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
+      expectDimension(renderedWrapper, 101, 118);
     });
   });
 
@@ -191,33 +159,6 @@ describe('SuperChart', () => {
       const wrapper = mount(<SuperChart chartType={ChartKeys.DILIGENT} debounceTime={1} />);
       triggerResizeObserver();
 
-      return promiseTimeout(() => {
-        const renderedWrapper = wrapper.render();
-        expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
-        expectDimension(renderedWrapper, 300, 400);
-      }, 100);
-    });
-    it('works when width and height are inside chartProps', () => {
-      const wrapper = mount(
-        <SuperChart
-          chartType={ChartKeys.DILIGENT}
-          debounceTime={1}
-          chartProps={{ width: 123, height: 456 }}
-        />,
-      );
-
-      return promiseTimeout(() => {
-        const renderedWrapper = wrapper.render();
-        expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
-        expectDimension(renderedWrapper, 123, 456);
-      }, 100);
-    });
-    it('works when there is chartProps but still no width and height', () => {
-      const wrapper = mount(
-        <SuperChart chartType={ChartKeys.DILIGENT} debounceTime={1} chartProps={{}} />,
-      );
-      triggerResizeObserver();
-
       return promiseTimeout(() => {
         const renderedWrapper = wrapper.render();
         expect(renderedWrapper.find('div.test-component')).toHaveLength(1);