This is an automated email from the ASF dual-hosted git repository. lyndsi pushed a commit to branch lyndsi/sql-lab-new-explore-button-functionality-and-move-save-dataset-to-split-save-button in repository https://gitbox.apache.org/repos/asf/superset.git
commit 6d51716d5350ef05c4fcaae9eff12964b9486602 Author: lyndsiWilliams <[email protected]> AuthorDate: Mon Jun 27 19:46:22 2022 -0500 Created split save button and added save as dataset functionality --- .../components/RunQueryActionButton/index.tsx | 12 ++-- .../components/SaveDatasetActionButton/index.tsx | 82 ++++++++++++++++++++++ .../src/SqlLab/components/SaveQuery/index.tsx | 59 +++++++++++----- .../src/SqlLab/components/SqlEditor/index.jsx | 1 + superset-frontend/src/SqlLab/types.ts | 4 ++ .../src/components/DropdownButton/index.tsx | 3 +- 6 files changed, 133 insertions(+), 28 deletions(-) diff --git a/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx b/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx index 9da467685b..19bf778756 100644 --- a/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx +++ b/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx @@ -20,13 +20,11 @@ import React, { useMemo } from 'react'; import { t, styled, useTheme } from '@superset-ui/core'; import { Menu } from 'src/components/Menu'; -import Button, { ButtonProps } from 'src/components/Button'; +import Button from 'src/components/Button'; import Icons from 'src/components/Icons'; -import { - DropdownButton, - DropdownButtonProps, -} from 'src/components/DropdownButton'; +import { DropdownButton } from 'src/components/DropdownButton'; import { detectOS } from 'src/utils/common'; +import { QueryButtonProps } from 'src/SqlLab/types'; interface Props { allowAsync: boolean; @@ -38,8 +36,6 @@ interface Props { overlayCreateAsMenu: typeof Menu | null; } -type QueryButtonProps = DropdownButtonProps | ButtonProps; - const buildText = ( shouldShowStopButton: boolean, selectedText: string | undefined, @@ -80,7 +76,7 @@ const StyledButton = styled.span` } span[name='caret-down'] { display: flex; - margin-right: ${({ theme }) => theme.gridUnit * -2}px; + margin-left: ${({ theme }) => theme.gridUnit * 1}px; } } `; diff --git a/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/index.tsx b/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/index.tsx new file mode 100644 index 0000000000..da5a879539 --- /dev/null +++ b/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/index.tsx @@ -0,0 +1,82 @@ +/** + * 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 { t, styled, useTheme } from '@superset-ui/core'; +import Icons from 'src/components/Icons'; +import { DropdownButton } from 'src/components/DropdownButton'; +import Button from 'src/components/Button'; +import { QueryButtonProps } from 'src/SqlLab/types'; + +interface Props { + toggleSave: () => void; + overlayMenu: JSX.Element | null; +} + +export default function SaveDatasetActionButton({ + toggleSave, + overlayMenu, +}: Props) { + const theme = useTheme(); + + const ButtonComponentStyles = styled.div` + .ant-btn-group button.ant-btn { + &:first-of-type { + width: 64px; + } + background-color: ${theme.colors.primary.light4}; + color: ${theme.colors.primary.dark1}; + &:nth-child(2) { + &:before, + &:hover:before { + border-left: 1px solid ${theme.colors.primary.dark2}; + } + } + } + span[name='caret-down'] { + margin-left: ${theme.gridUnit * 1}px; + color: ${theme.colors.primary.dark2}; + } + `; + + const ButtonComponent: React.FC<QueryButtonProps> = overlayMenu + ? (DropdownButton as React.FC) + : Button; + + return ( + <ButtonComponentStyles> + <ButtonComponent + onClick={toggleSave} + {...(overlayMenu + ? { + overlay: overlayMenu, + icon: ( + <Icons.CaretDown + iconColor={theme.colors.grayscale.light5} + name="caret-down" + /> + ), + trigger: 'click', + } + : { buttonStyle: 'primary', css: { width: theme.gridUnit * 25 } })} + > + {t('Save')} + </ButtonComponent> + </ButtonComponentStyles> + ); +} diff --git a/superset-frontend/src/SqlLab/components/SaveQuery/index.tsx b/superset-frontend/src/SqlLab/components/SaveQuery/index.tsx index 77d3b04e88..467eb6a185 100644 --- a/superset-frontend/src/SqlLab/components/SaveQuery/index.tsx +++ b/superset-frontend/src/SqlLab/components/SaveQuery/index.tsx @@ -19,23 +19,13 @@ import React, { useState, useEffect } from 'react'; import { Row, Col } from 'src/components'; import { Input, TextArea } from 'src/components/Input'; -import { t, styled } from '@superset-ui/core'; +import { t, styled, useTheme } from '@superset-ui/core'; import Button from 'src/components/Button'; +import { Menu } from 'src/components/Menu'; import { Form, FormItem } from 'src/components/Form'; import Modal from 'src/components/Modal'; -import Icons from 'src/components/Icons'; - -const Styles = styled.span` - span[role='img'] { - display: flex; - margin: 0; - color: ${({ theme }) => theme.colors.grayscale.base}; - svg { - vertical-align: -${({ theme }) => theme.gridUnit * 1.25}px; - margin: 0; - } - } -`; +import SaveDatasetActionButton from 'src/SqlLab/components/SaveDatasetActionButton'; +import { SaveDatasetModal } from 'src/SqlLab/components/SaveDatasetModal'; interface SaveQueryProps { query: any; @@ -43,6 +33,7 @@ interface SaveQueryProps { onSave: (arg0: QueryPayload) => void; onUpdate: (arg0: QueryPayload) => void; saveQueryWarning: string | null; + database: Record<string, any>; } type QueryPayload = { @@ -77,13 +68,37 @@ export default function SaveQuery({ onSave = () => {}, onUpdate, saveQueryWarning = null, + database, }: SaveQueryProps) { const [description, setDescription] = useState<string>( query.description || '', ); const [label, setLabel] = useState<string>(defaultLabel); const [showSave, setShowSave] = useState<boolean>(false); + const [showSaveDatasetModal, setShowSaveDatasetModal] = useState(false); const isSaved = !!query.remoteId; + const theme = useTheme(); + const canExploreDatabase = !!database?.allows_virtual_table_explore; + + const Styles = styled.span` + span[role='img'] { + display: flex; + margin: 0; + color: ${theme.colors.grayscale.base}; + svg { + vertical-align: -${theme.gridUnit * 1.25}px; + margin: 0; + } + } + `; + + const overlayMenu = ( + <Menu> + <Menu.Item onClick={() => setShowSaveDatasetModal(true)}> + {t('Save dataset')} + </Menu.Item> + </Menu> + ); const queryPayload = () => ({ ...query, @@ -96,6 +111,7 @@ export default function SaveQuery({ setLabel(defaultLabel); } }, [defaultLabel]); + const close = () => { setShowSave(false); }; @@ -161,10 +177,17 @@ export default function SaveQuery({ return ( <Styles className="SaveQuery"> - <Button buttonSize="small" onClick={toggleSave}> - <Icons.Save iconSize="xl" /> - {isSaved ? t('Save') : t('Save as')} - </Button> + <SaveDatasetActionButton + toggleSave={toggleSave} + overlayMenu={canExploreDatabase ? overlayMenu : null} + /> + <SaveDatasetModal + visible={showSaveDatasetModal} + onHide={() => setShowSaveDatasetModal(false)} + buttonTextOnSave={t('Save')} + buttonTextOnOverwrite={t('Overwrite')} + datasource={query} + /> <Modal className="save-query-modal" onHandledPrimaryAction={onSaveWrapper} diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx index d40ca65f2f..b66e13e4bf 100644 --- a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx +++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx @@ -726,6 +726,7 @@ class SqlEditor extends React.PureComponent { onSave={this.saveQuery} onUpdate={this.props.actions.updateSavedQuery} saveQueryWarning={this.props.saveQueryWarning} + database={this.props.database} /> </span> <span> diff --git a/superset-frontend/src/SqlLab/types.ts b/superset-frontend/src/SqlLab/types.ts index 0d54f97476..6203598daa 100644 --- a/superset-frontend/src/SqlLab/types.ts +++ b/superset-frontend/src/SqlLab/types.ts @@ -21,6 +21,10 @@ import { SupersetError } from 'src/components/ErrorMessage/types'; import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes'; import { ToastType } from 'src/components/MessageToasts/types'; import { RootState } from 'src/dashboard/types'; +import { DropdownButtonProps } from 'src/components/DropdownButton'; +import { ButtonProps } from 'src/components/Button'; + +export type QueryButtonProps = DropdownButtonProps | ButtonProps; // Object as Dictionary (associative array) with Query id as the key and type Query as the value export type QueryDictionary = { diff --git a/superset-frontend/src/components/DropdownButton/index.tsx b/superset-frontend/src/components/DropdownButton/index.tsx index f2a223a49f..c6293f66a3 100644 --- a/superset-frontend/src/components/DropdownButton/index.tsx +++ b/superset-frontend/src/components/DropdownButton/index.tsx @@ -52,10 +52,9 @@ const StyledDropdownButton = styled.div` border-left: 1px solid ${({ theme }) => theme.colors.grayscale.light5}; content: ''; display: block; - height: 23px; + height: ${({ theme }) => theme.gridUnit * 8}px; margin: 0; position: absolute; - top: ${({ theme }) => theme.gridUnit * 0.75}px; width: ${({ theme }) => theme.gridUnit * 0.25}px; }
