feat(explore): Keep or reset chart config after datasource change (ap…

…ache#18215)

* feat(explore): Keep or reset chart config after datasource change

* Update copy

* Remove useDispatch

* fix test

* Fix bugs

* Remove ts ignore

* Scroll top when datasource changes

* Fix crashing when switching viz type

superset-frontend/src/explore/components/ControlPanelAlert.tsx

@@ -0,0 +1,98 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { styled } from '@superset-ui/core';
+import Button from 'src/components/Button';
+
+interface ControlPanelAlertProps {
+  title: string;
+  bodyText: string;
+  primaryButtonAction: (e: React.MouseEvent) => void;
+  secondaryButtonAction?: (e: React.MouseEvent) => void;
+  primaryButtonText: string;
+  secondaryButtonText?: string;
+  type: 'info' | 'warning';
+}
+
+const AlertContainer = styled.div`
+  margin: ${({ theme }) => theme.gridUnit * 4}px;
+  padding: ${({ theme }) => theme.gridUnit * 4}px;
+
+  border: ${({ theme }) => `1px solid ${theme.colors.info.base}`};
+  background-color: ${({ theme }) => theme.colors.info.light2};
+  border-radius: 2px;
+
+  color: ${({ theme }) => theme.colors.info.dark2};
+  font-size: ${({ theme }) => theme.typography.sizes.s};
+
+  &.alert-type-warning {
+    border-color: ${({ theme }) => theme.colors.alert.base};
+    background-color: ${({ theme }) => theme.colors.alert.light2};
+
+    p {
+      color: ${({ theme }) => theme.colors.alert.dark2};
+    }
+  }
+`;
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  button {
+    line-height: 1;
+  }
+`;
+
+const Title = styled.p`
+  font-weight: ${({ theme }) => theme.typography.weights.bold};
+`;
+
+export const ControlPanelAlert = ({
+  title,
+  bodyText,
+  primaryButtonAction,
+  secondaryButtonAction,
+  primaryButtonText,
+  secondaryButtonText,
+  type = 'info',
+}: ControlPanelAlertProps) => (
+  <AlertContainer className={`alert-type-${type}`}>
+    <Title>{title}</Title>
+    <p>{bodyText}</p>
+    <ButtonContainer>
+      {secondaryButtonAction && secondaryButtonText && (
+        <Button
+          buttonStyle="link"
+          buttonSize="small"
+          onClick={secondaryButtonAction}
+        >
+          {secondaryButtonText}
+        </Button>
+      )}
+      <Button
+        buttonStyle={type === 'warning' ? 'warning' : 'primary'}
+        buttonSize="small"
+        onClick={primaryButtonAction}
+      >
+        {primaryButtonText}
+      </Button>
+    </ButtonContainer>
+  </AlertContainer>
+);

superset-frontend/src/explore/components/ControlPanelsContainer.test.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { styledShallow as shallow } from 'spec/helpers/theming';
+import { render, screen } from 'spec/helpers/testing-library';
 import {
   DatasourceType,
   getChartControlPanelRegistry,
@@ -30,9 +30,7 @@ import {
   ControlPanelsContainerProps,
 } from 'src/explore/components/ControlPanelsContainer';
 
-describe('ControlPanelsContainer', () => {
-  let wrapper;
-
+describe('ControlPanelsContainer2', () => {
   beforeAll(() => {
     getChartControlPanelRegistry().registerValue('table', {
       controlPanelSections: [
@@ -96,9 +94,9 @@ describe('ControlPanelsContainer', () => {
   }
 
   it('renders ControlPanelSections', () => {
-    wrapper = shallow(<ControlPanelsContainer {...getDefaultProps()} />);
+    render(<ControlPanelsContainer {...getDefaultProps()} />);
     expect(
-      wrapper.find('[data-test="collapsible-control-panel"]'),
-    ).toHaveLength(5);
+      screen.getAllByTestId('collapsible-control-panel-header'),
+    ).toHaveLength(4);
   });
 });