From 42ddb76459cbd816cfc41e3da05dd3dbbadb00ca Mon Sep 17 00:00:00 2001 From: Adam Dobrawy Date: Thu, 20 Jan 2022 22:45:39 +0100 Subject: [PATCH 1/2] refactor: Migrate QueryAndSaveBtns to TS and stories --- .../src/components/Button/index.tsx | 22 ++++---- .../components/QueryAndSaveBtns.stories.tsx | 48 +++++++++++++++++ ...ryAndSaveBtns.jsx => QueryAndSaveBtns.tsx} | 52 ++++++++----------- 3 files changed, 82 insertions(+), 40 deletions(-) create mode 100644 superset-frontend/src/explore/components/QueryAndSaveBtns.stories.tsx rename superset-frontend/src/explore/components/{QueryAndSaveBtns.jsx => QueryAndSaveBtns.tsx} (80%) diff --git a/superset-frontend/src/components/Button/index.tsx b/superset-frontend/src/components/Button/index.tsx index 7daf0eb5b5dda..725ac6dd5dfaa 100644 --- a/superset-frontend/src/components/Button/index.tsx +++ b/superset-frontend/src/components/Button/index.tsx @@ -26,6 +26,17 @@ import { Tooltip } from 'src/components/Tooltip'; export type OnClickHandler = React.MouseEventHandler; +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; diff --git a/superset-frontend/src/explore/components/QueryAndSaveBtns.stories.tsx b/superset-frontend/src/explore/components/QueryAndSaveBtns.stories.tsx new file mode 100644 index 0000000000000..1f8d999107c4d --- /dev/null +++ b/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, +) => ; + +InteractiveQueryAndSaveBtnsProps.args = { + canAdd: true, + loading: false, +}; + +InteractiveQueryAndSaveBtnsProps.argTypes = { + onQuery: { action: 'onQuery' }, + onSave: { action: 'onSave' }, + onStop: { action: 'onStop' }, +}; + +InteractiveQueryAndSaveBtnsProps.story = { + parameters: { + knobs: { + disable: true, + }, + }, +}; diff --git a/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx b/superset-frontend/src/explore/components/QueryAndSaveBtns.tsx similarity index 80% rename from superset-frontend/src/explore/components/QueryAndSaveBtns.jsx rename to superset-frontend/src/explore/components/QueryAndSaveBtns.tsx index 1381973219dd1..3e581c7bbc4ba 100644 --- a/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx +++ b/superset-frontend/src/explore/components/QueryAndSaveBtns.tsx @@ -17,42 +17,37 @@ * 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 = 'tertiary' as ButtonStyle; if (errorMessage) { - qryButtonStyle = 'danger'; + qryButtonStyle = 'danger' as ButtonStyle; } else if (chartIsStale) { - qryButtonStyle = 'primary'; + qryButtonStyle = 'primary' as ButtonStyle; } const saveButtonDisabled = errorMessage ? true : loading; @@ -127,6 +122,3 @@ export default function QueryAndSaveBtns({ ); } - -QueryAndSaveBtns.propTypes = propTypes; -QueryAndSaveBtns.defaultProps = defaultProps; From d597980da1d70395dc2be6559852deb26918469c Mon Sep 17 00:00:00 2001 From: Adam Dobrawy Date: Fri, 21 Jan 2022 14:01:13 +0100 Subject: [PATCH 2/2] fix: change typing notation in QueryAndSaveBtns --- .../src/explore/components/QueryAndSaveBtns.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/superset-frontend/src/explore/components/QueryAndSaveBtns.tsx b/superset-frontend/src/explore/components/QueryAndSaveBtns.tsx index 3e581c7bbc4ba..91366580b3735 100644 --- a/superset-frontend/src/explore/components/QueryAndSaveBtns.tsx +++ b/superset-frontend/src/explore/components/QueryAndSaveBtns.tsx @@ -43,11 +43,11 @@ export default function QueryAndSaveBtns(props: QueryAndSaveBtnsProps) { chartIsStale, errorMessage, } = props; - let qryButtonStyle = 'tertiary' as ButtonStyle; + let qryButtonStyle: ButtonStyle = 'tertiary'; if (errorMessage) { - qryButtonStyle = 'danger' as ButtonStyle; + qryButtonStyle = 'danger'; } else if (chartIsStale) { - qryButtonStyle = 'primary' as ButtonStyle; + qryButtonStyle = 'primary'; } const saveButtonDisabled = errorMessage ? true : loading;