style: new toast design closer to SIP-34 (#10178)

superset-frontend/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx

@@ -22,6 +22,7 @@ import { shallow, mount } from 'enzyme';
 import sinon from 'sinon';
 
 import { ParentSize } from '@vx/responsive';
+import { supersetTheme, ThemeProvider } from '@superset-ui/style';
 import { Sticky, StickyContainer } from 'react-sticky';
 import { TabContainer, TabContent, TabPane } from 'react-bootstrap';
 
@@ -77,6 +78,10 @@ describe('DashboardBuilder', () => {
           <Provider store={store}>
             <WithDragDropContext>{builder}</WithDragDropContext>
           </Provider>,
+          {
+            wrappingComponent: ThemeProvider,
+            wrappingComponentProps: { theme: supersetTheme },
+          },
         )
       : shallow(builder);
   }

superset-frontend/spec/javascripts/messageToasts/components/ToastPresenter_spec.jsx

@@ -34,9 +34,9 @@ describe('ToastPresenter', () => {
     return wrapper;
   }
 
-  it('should render a div with class toast-presenter', () => {
+  it('should render a div with id toast-presenter', () => {
     const wrapper = setup();
-    expect(wrapper.find('.toast-presenter')).toHaveLength(1);
+    expect(wrapper.find('#toast-presenter')).toHaveLength(1);
   });
 
   it('should render a Toast for each toast object', () => {

superset-frontend/spec/javascripts/messageToasts/components/Toast_spec.jsx

@@ -19,21 +19,19 @@
 import { Alert } from 'react-bootstrap';
 import React from 'react';
 import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import Toast from 'src/messageToasts/components/Toast';
 
 import mockMessageToasts from '../mockMessageToasts';
 
-describe('Toast', () => {
-  const props = {
-    toast: mockMessageToasts[0],
-    onCloseToast() {},
-  };
+const props = {
+  toast: mockMessageToasts[0],
+  onCloseToast() {},
+};
 
-  function setup(overrideProps) {
-    const wrapper = mount(<Toast {...props} {...overrideProps} />);
-    return wrapper;
-  }
+const setup = overrideProps => mount(<Toast {...props} {...overrideProps} />);
 
+describe('Toast', () => {
   it('should render an Alert', () => {
     const wrapper = setup();
     expect(wrapper.find(Alert)).toHaveLength(1);
@@ -52,9 +50,13 @@ describe('Toast', () => {
         expect(id).toBe(props.toast.id);
         done();
       };
+
       const wrapper = setup({ onCloseToast });
-      const handleClosePress = wrapper.instance().handleClosePress;
-      expect(wrapper.find(Alert).prop('onDismiss')).toBe(handleClosePress);
+      const handleClosePress = wrapper.find('[label="Close alert"]').props()
+        .onClick;
+
+      const alertProps = wrapper.find(Alert).props();
+      expect(alertProps.onDismiss).toBe(handleClosePress);
       handleClosePress(); // there is a timeout for onCloseToast to be called
     });
   });

superset-frontend/spec/javascripts/sqllab/TabbedSqlEditors_spec.jsx

@@ -23,6 +23,7 @@ import URI from 'urijs';
 import { Tab } from 'react-bootstrap';
 import { shallow, mount } from 'enzyme';
 import sinon from 'sinon';
+import { supersetTheme, ThemeProvider } from '@superset-ui/style';
 import TabbedSqlEditors from 'src/SqlLab/components/TabbedSqlEditors';
 import SqlEditor from 'src/SqlLab/components/SqlEditor';
 
@@ -98,6 +99,8 @@ describe('TabbedSqlEditors', () => {
       uriStub.returns({ id: 1 });
       wrapper = mount(<TabbedSqlEditors {...mockedProps} />, {
         context: { store },
+        wrappingComponent: ThemeProvider,
+        wrappingComponentProps: { theme: supersetTheme },
       });
       expect(TabbedSqlEditors.prototype.componentDidMount.calledOnce).toBe(
         true,
@@ -110,6 +113,8 @@ describe('TabbedSqlEditors', () => {
       uriStub.returns({ savedQueryId: 1 });
       wrapper = mount(<TabbedSqlEditors {...mockedProps} />, {
         context: { store },
+        wrappingComponent: ThemeProvider,
+        wrappingComponentProps: { theme: supersetTheme },
       });
       expect(TabbedSqlEditors.prototype.componentDidMount.calledOnce).toBe(
         true,
@@ -122,6 +127,8 @@ describe('TabbedSqlEditors', () => {
       uriStub.returns({ sql: 1, dbid: 1 });
       wrapper = mount(<TabbedSqlEditors {...mockedProps} />, {
         context: { store },
+        wrappingComponent: ThemeProvider,
+        wrappingComponentProps: { theme: supersetTheme },
       });
       expect(TabbedSqlEditors.prototype.componentDidMount.calledOnce).toBe(
         true,

superset-frontend/src/components/Icon.tsx

@@ -19,12 +19,14 @@
 import React, { SVGProps } from 'react';
 import styled from '@superset-ui/style';
 import { ReactComponent as CancelXIcon } from 'images/icons/cancel-x.svg';
+import { ReactComponent as CheckIcon } from 'images/icons/check.svg';
 import { ReactComponent as CheckboxHalfIcon } from 'images/icons/checkbox-half.svg';
 import { ReactComponent as CheckboxOffIcon } from 'images/icons/checkbox-off.svg';
 import { ReactComponent as CheckboxOnIcon } from 'images/icons/checkbox-on.svg';
 import { ReactComponent as CompassIcon } from 'images/icons/compass.svg';
 import { ReactComponent as DatasetPhysicalIcon } from 'images/icons/dataset_physical.svg';
 import { ReactComponent as DatasetVirtualIcon } from 'images/icons/dataset_virtual.svg';
+import { ReactComponent as ErrorIcon } from 'images/icons/error.svg';
 import { ReactComponent as PencilIcon } from 'images/icons/pencil.svg';
 import { ReactComponent as SearchIcon } from 'images/icons/search.svg';
 import { ReactComponent as SortAscIcon } from 'images/icons/sort-asc.svg';
@@ -35,12 +37,14 @@ import { ReactComponent as WarningIcon } from 'images/icons/warning.svg';
 
 type Icon =
   | 'cancel-x'
+  | 'check'
   | 'checkbox-half'
   | 'checkbox-off'
   | 'checkbox-on'
   | 'compass'
   | 'dataset-physical'
   | 'dataset-virtual'
+  | 'error'
   | 'pencil'
   | 'search'
   | 'sort'
@@ -58,7 +62,9 @@ const iconsRegistry: { [key in Icon]: React.ComponentType } = {
   'dataset-virtual': DatasetVirtualIcon,
   'sort-asc': SortAscIcon,
   'sort-desc': SortDescIcon,
+  check: CheckIcon,
   compass: CompassIcon,
+  error: ErrorIcon,
   pencil: PencilIcon,
   search: SearchIcon,
   sort: SortIcon,