refactor: migrate QueryAndSaveBtns to TypeScript and add stories (#18121

)

* refactor: Migrate QueryAndSaveBtns to TS and stories

* fix: change typing notation in QueryAndSaveBtns

superset-frontend/src/components/Button/index.tsx

@@ -26,6 +26,17 @@ import { Tooltip } from 'src/components/Tooltip';
 
 export type OnClickHandler = React.MouseEventHandler<HTMLElement>;
 
+export type ButtonStyle =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'default'
+  | 'link'
+  | 'dashed';
+
 export interface ButtonProps {
   id?: string;
   className?: string;
@@ -46,16 +57,7 @@ export interface ButtonProps {
     | 'rightBottom';
   onClick?: OnClickHandler;
   disabled?: boolean;
-  buttonStyle?:
-    | 'primary'
-    | 'secondary'
-    | 'tertiary'
-    | 'success'
-    | 'warning'
-    | 'danger'
-    | 'default'
-    | 'link'
-    | 'dashed';
+  buttonStyle?: ButtonStyle;
   buttonSize?: 'default' | 'small' | 'xsmall';
   style?: CSSProperties;
   children?: React.ReactNode;

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

@@ -0,0 +1,48 @@
+/**
+ * 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 QueryAndSaveBtns, { QueryAndSaveBtnsProps } from './QueryAndSaveBtns';
+
+export default {
+  title: 'QueryAndSaveBtns',
+  component: QueryAndSaveBtns,
+};
+
+export const InteractiveQueryAndSaveBtnsProps = (
+  args: QueryAndSaveBtnsProps,
+) => <QueryAndSaveBtns {...args} />;
+
+InteractiveQueryAndSaveBtnsProps.args = {
+  canAdd: true,
+  loading: false,
+};
+
+InteractiveQueryAndSaveBtnsProps.argTypes = {
+  onQuery: { action: 'onQuery' },
+  onSave: { action: 'onSave' },
+  onStop: { action: 'onStop' },
+};
+
+InteractiveQueryAndSaveBtnsProps.story = {
+  parameters: {
+    knobs: {
+      disable: true,
+    },
+  },
+};

superset-frontend/src/explore/components/QueryAndSaveBtns.jsx → superset-frontend/src/explore/components/QueryAndSaveBtns.tsx

@@ -17,38 +17,33 @@
  * under the License.
  */
 import React from 'react';
-import PropTypes from 'prop-types';
 import ButtonGroup from 'src/components/ButtonGroup';
 import { t, useTheme } from '@superset-ui/core';
 
 import { Tooltip } from 'src/components/Tooltip';
-import Button from 'src/components/Button';
+import Button, { ButtonStyle, OnClickHandler } from 'src/components/Button';
 
-const propTypes = {
-  canAdd: PropTypes.bool.isRequired,
-  onQuery: PropTypes.func.isRequired,
-  onSave: PropTypes.func,
-  onStop: PropTypes.func,
-  loading: PropTypes.bool,
-  chartIsStale: PropTypes.bool,
-  errorMessage: PropTypes.node,
+export type QueryAndSaveBtnsProps = {
+  canAdd: boolean;
+  onQuery: OnClickHandler;
+  onSave: OnClickHandler;
+  onStop: OnClickHandler;
+  loading?: boolean;
+  chartIsStale?: boolean;
+  errorMessage: React.ReactElement | undefined;
 };
 
-const defaultProps = {
-  onStop: () => {},
-  onSave: () => {},
-};
-
-export default function QueryAndSaveBtns({
-  canAdd,
-  onQuery,
-  onSave,
-  onStop,
-  loading,
-  chartIsStale,
-  errorMessage,
-}) {
-  let qryButtonStyle = 'tertiary';
+export default function QueryAndSaveBtns(props: QueryAndSaveBtnsProps) {
+  const {
+    canAdd,
+    onQuery = () => {},
+    onSave = () => {},
+    onStop = () => {},
+    loading,
+    chartIsStale,
+    errorMessage,
+  } = props;
+  let qryButtonStyle: ButtonStyle = 'tertiary';
   if (errorMessage) {
     qryButtonStyle = 'danger';
   } else if (chartIsStale) {
@@ -127,6 +122,3 @@ export default function QueryAndSaveBtns({
     </div>
   );
 }
-
-QueryAndSaveBtns.propTypes = propTypes;
-QueryAndSaveBtns.defaultProps = defaultProps;