chore: Removes hard-coded colors from the plugins - iteration 1 (apac…

…he#19923) * chore: Removes hard-coded colors from the plugins - iteration 1 * Fixes lint errors * Fixes tests
hve-labs · May 11, 2022 · 1251c68 · 1251c68
1 parent c08b53c
commit 1251c68
Show file tree

Hide file tree

Showing 25 changed files with 406 additions and 321 deletions.
diff --git a/superset-frontend/packages/superset-ui-core/src/chart/components/FallbackComponent.tsx b/superset-frontend/packages/superset-ui-core/src/chart/components/FallbackComponent.tsx
@@ -18,25 +18,27 @@
  */
 
 import React from 'react';
+import { SupersetTheme } from '../../style';
 import { FallbackPropsWithDimension } from './SuperChart';
 
 export type Props = FallbackPropsWithDimension;
 
-const CONTAINER_STYLE = {
-  backgroundColor: '#000',
-  color: '#fff',
-  overflow: 'auto',
-  padding: 32,
-};
-
 export default function FallbackComponent({
   componentStack,
   error,
   height,
   width,
 }: Props) {
   return (
-    <div style={{ ...CONTAINER_STYLE, height, width }}>
+    <div
+      css={(theme: SupersetTheme) => ({
+        backgroundColor: theme.colors.grayscale.dark2,
+        color: theme.colors.grayscale.light5,
+        overflow: 'auto',
+        padding: 32,
+      })}
+      style={{ height, width }}
+    >
       <div>
         <div>
           <b>Oops! An error occured!</b>

diff --git a/superset-frontend/packages/superset-ui-core/test/chart/components/MockChartPlugins.tsx b/superset-frontend/packages/superset-ui-core/test/chart/components/MockChartPlugins.tsx
@@ -19,7 +19,12 @@
 
 /* eslint-disable max-classes-per-file */
 import React from 'react';
-import { QueryFormData, ChartMetadata, ChartPlugin } from '@superset-ui/core';
+import {
+  QueryFormData,
+  ChartMetadata,
+  ChartPlugin,
+  useTheme,
+} from '@superset-ui/core';
 
 const DIMENSION_STYLE = {
   fontSize: 36,
@@ -39,31 +44,36 @@ export const TestComponent = ({
   message?: string;
   width?: number;
   height?: number;
-}) => (
-  <div
-    className="test-component"
-    style={{
-      width,
-      height,
-      backgroundColor: '#00d1c1',
-      color: '#fff',
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      borderRadius: 8,
-    }}
-  >
-    <div className="message" style={{ padding: 10 }}>
-      {message ?? 'custom component'}
+}) => {
+  const theme = useTheme();
+  return (
+    <div
+      className="test-component"
+      style={{
+        width,
+        height,
+        backgroundColor: theme.colors.primary.base,
+        color: theme.colors.grayscale.light5,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        borderRadius: 8,
+      }}
+    >
+      <div className="message" style={{ padding: 10 }}>
+        {message ?? 'custom component'}
+      </div>
+      <div className="dimension" style={DIMENSION_STYLE}>
+        {[width, height].join('x')}
+      </div>
+      <div className="formData" style={{ padding: 10 }}>
+        <code style={{ color: theme.colors.primary.light2 }}>
+          {JSON.stringify(formData)}
+        </code>
+      </div>
     </div>
-    <div className="dimension" style={DIMENSION_STYLE}>
-      {[width, height].join('x')}
-    </div>
-    <div className="formData" style={{ padding: 10 }}>
-      <code style={{ color: '#D3F9F7' }}>{JSON.stringify(formData)}</code>
-    </div>
-  </div>
-);
+  );
+};
 
 export const ChartKeys = {
   DILIGENT: 'diligent-chart',

diff --git a/superset-frontend/packages/superset-ui-core/test/chart/components/SuperChartCore.test.tsx b/superset-frontend/packages/superset-ui-core/test/chart/components/SuperChartCore.test.tsx
@@ -17,11 +17,16 @@
  * under the License.
  */
 
-import React from 'react';
-import { mount, shallow } from 'enzyme';
+import React, { ReactElement, ReactNode } from 'react';
+import { mount } from 'enzyme';
 import mockConsole, { RestoreConsole } from 'jest-mock-console';
-
-import { ChartProps, promiseTimeout, supersetTheme } from '@superset-ui/core';
+import {
+  ChartProps,
+  promiseTimeout,
+  supersetTheme,
+  SupersetTheme,
+  ThemeProvider,
+} from '@superset-ui/core';
 import SuperChartCore from '../../../src/chart/components/SuperChartCore';
 import {
   ChartKeys,
@@ -30,6 +35,22 @@ import {
   SlowChartPlugin,
 } from './MockChartPlugins';
 
+const Wrapper = ({
+  theme,
+  children,
+}: {
+  theme: SupersetTheme;
+  children: ReactNode;
+}) => <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+
+const styledMount = (component: ReactElement) =>
+  mount(component, {
+    wrappingComponent: Wrapper,
+    wrappingComponentProps: {
+      theme: supersetTheme,
+    },
+  });
+
 describe('SuperChartCore', () => {
   const chartProps = new ChartProps();
 
@@ -63,7 +84,7 @@ describe('SuperChartCore', () => {
 
   describe('registered charts', () => {
     it('renders registered chart', () => {
-      const wrapper = shallow(
+      const wrapper = styledMount(
         <SuperChartCore
           chartType={ChartKeys.DILIGENT}
           chartProps={chartProps}
@@ -75,7 +96,9 @@ describe('SuperChartCore', () => {
       });
     });
     it('renders registered chart with lazy loading', () => {
-      const wrapper = shallow(<SuperChartCore chartType={ChartKeys.LAZY} />);
+      const wrapper = styledMount(
+        <SuperChartCore chartType={ChartKeys.LAZY} />,
+      );
 
       return promiseTimeout(() => {
         expect(wrapper.render().find('div.test-component')).toHaveLength(1);
@@ -84,14 +107,14 @@ describe('SuperChartCore', () => {
     it('does not render if chartType is not set', () => {
       // Suppress warning
       // @ts-ignore chartType is required
-      const wrapper = shallow(<SuperChartCore />);
+      const wrapper = styledMount(<SuperChartCore />);
 
       return promiseTimeout(() => {
         expect(wrapper.render().children()).toHaveLength(0);
       }, 5);
     });
     it('adds id to container if specified', () => {
-      const wrapper = shallow(
+      const wrapper = styledMount(
         <SuperChartCore chartType={ChartKeys.DILIGENT} id="the-chart" />,
       );
 
@@ -100,7 +123,7 @@ describe('SuperChartCore', () => {
       });
     });
     it('adds class to container if specified', () => {
-      const wrapper = shallow(
+      const wrapper = styledMount(
         <SuperChartCore chartType={ChartKeys.DILIGENT} className="the-chart" />,
       );
 
@@ -109,7 +132,7 @@ describe('SuperChartCore', () => {
       }, 0);
     });
     it('uses overrideTransformProps when specified', () => {
-      const wrapper = shallow(
+      const wrapper = styledMount(
         <SuperChartCore
           chartType={ChartKeys.DILIGENT}
           overrideTransformProps={() => ({ message: 'hulk' })}
@@ -125,7 +148,7 @@ describe('SuperChartCore', () => {
         queriesData: [{ message: 'hulk' }],
         theme: supersetTheme,
       });
-      const wrapper = shallow(
+      const wrapper = styledMount(
         <SuperChartCore
           chartType={ChartKeys.DILIGENT}
           preTransformProps={() => chartPropsWithPayload}
@@ -138,7 +161,7 @@ describe('SuperChartCore', () => {
       });
     });
     it('uses postTransformProps when specified', () => {
-      const wrapper = shallow(
+      const wrapper = styledMount(
         <SuperChartCore
           chartType={ChartKeys.DILIGENT}
           postTransformProps={() => ({ message: 'hulk' })}
@@ -150,7 +173,7 @@ describe('SuperChartCore', () => {
       });
     });
     it('renders if chartProps is not specified', () => {
-      const wrapper = shallow(
+      const wrapper = styledMount(
         <SuperChartCore chartType={ChartKeys.DILIGENT} />,
       );
 
@@ -159,22 +182,26 @@ describe('SuperChartCore', () => {
       });
     });
     it('does not render anything while waiting for Chart code to load', () => {
-      const wrapper = shallow(<SuperChartCore chartType={ChartKeys.SLOW} />);
+      const wrapper = styledMount(
+        <SuperChartCore chartType={ChartKeys.SLOW} />,
+      );
 
       return promiseTimeout(() => {
         expect(wrapper.render().children()).toHaveLength(0);
       });
     });
     it('eventually renders after Chart is loaded', () => {
       // Suppress warning
-      const wrapper = mount(<SuperChartCore chartType={ChartKeys.SLOW} />);
+      const wrapper = styledMount(
+        <SuperChartCore chartType={ChartKeys.SLOW} />,
+      );
 
       return promiseTimeout(() => {
         expect(wrapper.render().find('div.test-component')).toHaveLength(1);
       }, 1500);
     });
     it('does not render if chartProps is null', () => {
-      const wrapper = shallow(
+      const wrapper = styledMount(
         <SuperChartCore chartType={ChartKeys.DILIGENT} chartProps={null} />,
       );
 
@@ -186,7 +213,7 @@ describe('SuperChartCore', () => {
 
   describe('unregistered charts', () => {
     it('renders error message', () => {
-      const wrapper = mount(
+      const wrapper = styledMount(
         <SuperChartCore chartType="4d-pie-chart" chartProps={chartProps} />,
       );
 

diff --git a/superset-frontend/packages/superset-ui-demo/.storybook/themeDecorator.js b/superset-frontend/packages/superset-ui-demo/.storybook/themeDecorator.js
@@ -2,8 +2,8 @@
 import React from 'react';
 import { supersetTheme, ThemeProvider } from '@superset-ui/core';
 
-const ThemeDecorator = storyFn => (
-  <ThemeProvider theme={supersetTheme}>{storyFn()}</ThemeProvider>
+const ThemeDecorator = Story => (
+  <ThemeProvider theme={supersetTheme}>{<Story />}</ThemeProvider>
 );
 
 export default ThemeDecorator;
diff --git a/...set-frontend/packages/superset-ui-demo/storybook/shared/components/ResizableChartDemo.tsx b/...set-frontend/packages/superset-ui-demo/storybook/shared/components/ResizableChartDemo.tsx
@@ -23,7 +23,7 @@ import { DecoratorFunction } from '@storybook/addons';
 import ResizablePanel, { Size } from './ResizablePanel';
 
 export const SupersetBody = styled.div`
-  background: #f5f5f5;
+  background: ${({ theme }) => theme.colors.grayscale.light4};
   padding: 16px;
   min-height: 100%;
 

diff --git a/...kages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-calendar/Stories.tsx b/...kages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-calendar/Stories.tsx
@@ -40,6 +40,8 @@ export const basic = () => (
       cellSize: 10,
       cellPadding: 2,
       cellRadius: 0,
+      domainGranularity: 'month',
+      subdomainGranularity: 'day',
       linearColorScheme: 'schemeRdYlBu',
       steps: 10,
       yAxisFormat: '.3s',

diff --git a/...t-ui-demo/storybook/stories/plugins/legacy-plugin-chart-country-map/CountryMapStories.tsx b/...t-ui-demo/storybook/stories/plugins/legacy-plugin-chart-country-map/CountryMapStories.tsx
@@ -22,6 +22,7 @@ import {
   seedRandom,
   SuperChart,
   SequentialD3,
+  useTheme,
 } from '@superset-ui/core';
 import CountryMapChartPlugin, {
   countries,
@@ -44,6 +45,7 @@ function generateData(geojson: JsonObject) {
 }
 
 export const basic = function BasicCountryMapStory({ width, height }) {
+  const theme = useTheme();
   const country = select('Country', Object.keys(countries!), 'france');
   const colorSchema = select<any>(
     'Color schema',
@@ -67,7 +69,13 @@ export const basic = function BasicCountryMapStory({ width, height }) {
 
   if (!data) {
     return (
-      <div style={{ color: '#aaa', textAlign: 'center', padding: 20 }}>
+      <div
+        style={{
+          color: theme.colors.grayscale.base,
+          textAlign: 'center',
+          padding: 20,
+        }}
+      >
         Loading...
       </div>
     );