feat(explore): Redesign of Run/Save buttons (#19558)

* feat(explore): Move save button to header, run button to bottom of control panel

* Make the tabs sticky

* Add error icon to Data tab

* Show message when creating chart and all controls are filled correctly

* Add tests and storybook

* Fix tests

* Disable save button when control have errors

* Fix types

* Apply code review comments

* Replace styled with css

* Remove unused import

superset-frontend/src/explore/components/RunQueryButton/RunQueryButton.stories.tsx

@@ -0,0 +1,50 @@
+/**
+ * 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 { RunQueryButton, RunQueryButtonProps } from '.';
+
+export default {
+  title: 'RunQueryButton',
+  component: RunQueryButton,
+};
+
+export const InteractiveRunQueryButtonProps = (args: RunQueryButtonProps) => (
+  <RunQueryButton {...args} />
+);
+
+InteractiveRunQueryButtonProps.args = {
+  canStopQuery: true,
+  loading: false,
+  errorMessage: null,
+  isNewChart: false,
+  chartIsStale: true,
+};
+
+InteractiveRunQueryButtonProps.argTypes = {
+  onQuery: { action: 'onQuery' },
+  onStop: { action: 'onStop' },
+};
+
+InteractiveRunQueryButtonProps.story = {
+  parameters: {
+    knobs: {
+      disable: true,
+    },
+  },
+};

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

@@ -0,0 +1,76 @@
+/**
+ * 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 userEvent from '@testing-library/user-event';
+import { render, screen } from 'spec/helpers/testing-library';
+import { RunQueryButton } from './index';
+
+const createProps = (overrides: Record<string, any> = {}) => ({
+  loading: false,
+  onQuery: jest.fn(),
+  onStop: jest.fn(),
+  errorMessage: null,
+  isNewChart: false,
+  canStopQuery: true,
+  chartIsStale: true,
+  ...overrides,
+});
+
+test('renders update chart button', () => {
+  const props = createProps();
+  render(<RunQueryButton {...props} />);
+  expect(screen.getByText('Update chart')).toBeVisible();
+  userEvent.click(screen.getByRole('button'));
+  expect(props.onQuery).toHaveBeenCalled();
+});
+
+test('renders create chart button', () => {
+  const props = createProps({ isNewChart: true });
+  render(<RunQueryButton {...props} />);
+  expect(screen.getByText('Create chart')).toBeVisible();
+  userEvent.click(screen.getByRole('button'));
+  expect(props.onQuery).toHaveBeenCalled();
+});
+
+test('renders disabled button', () => {
+  const props = createProps({ errorMessage: 'error' });
+  render(<RunQueryButton {...props} />);
+  expect(screen.getByText('Update chart')).toBeVisible();
+  expect(screen.getByRole('button')).toBeDisabled();
+  userEvent.click(screen.getByRole('button'));
+  expect(props.onQuery).not.toHaveBeenCalled();
+});
+
+test('renders query running button', () => {
+  const props = createProps({ loading: true });
+  render(<RunQueryButton {...props} />);
+  expect(screen.getByText('Stop')).toBeVisible();
+  userEvent.click(screen.getByRole('button'));
+  expect(props.onStop).toHaveBeenCalled();
+});
+
+test('renders query running button disabled', () => {
+  const props = createProps({ loading: true, canStopQuery: false });
+  render(<RunQueryButton {...props} />);
+  expect(screen.getByText('Stop')).toBeVisible();
+  expect(screen.getByRole('button')).toBeDisabled();
+  userEvent.click(screen.getByRole('button'));
+  expect(props.onStop).not.toHaveBeenCalled();
+});

superset-frontend/src/explore/components/RunQueryButton/index.tsx

@@ -0,0 +1,56 @@
+/**
+ * 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, { ReactNode } from 'react';
+import { t } from '@superset-ui/core';
+import Button from 'src/components/Button';
+
+export type RunQueryButtonProps = {
+  loading: boolean;
+  onQuery: () => void;
+  onStop: () => void;
+  errorMessage: ReactNode;
+  isNewChart: boolean;
+  canStopQuery: boolean;
+  chartIsStale: boolean;
+};
+
+export const RunQueryButton = ({
+  loading,
+  onQuery,
+  onStop,
+  errorMessage,
+  isNewChart,
+  canStopQuery,
+  chartIsStale,
+}: RunQueryButtonProps) =>
+  loading ? (
+    <Button onClick={onStop} buttonStyle="warning" disabled={!canStopQuery}>
+      <i className="fa fa-stop-circle-o" /> {t('Stop')}
+    </Button>
+  ) : (
+    <Button
+      onClick={onQuery}
+      buttonStyle={chartIsStale ? 'primary' : 'secondary'}
+      disabled={!!errorMessage}
+      data-test="run-query-button"
+    >
+      {isNewChart ? t('Create chart') : t('Update chart')}
+    </Button>
+  );