Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Update CTAS/CVAS button & Cost Estimate #12131

Merged
merged 14 commits into from
Dec 21, 2020
Merged

feat: Update CTAS/CVAS button & Cost Estimate #12131

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
e1f8e97
save quite
hughhhh Dec 18, 2020
1893d8b
working func for ctas and cvas
hughhhh Dec 18, 2020
51855d7
place cost estimate button
hughhhh Dec 18, 2020
c6f3ad0
cleanup some of the code
hughhhh Dec 18, 2020
e19d29b
cleanup
hughhhh Dec 18, 2020
37670e6
fixing errors
hughhhh Dec 18, 2020
b550a86
fix type errors
hughhhh Dec 18, 2020
72e8554
hide modal
hughhhh Dec 18, 2020
fec90b1
fix things
hughhhh Dec 18, 2020
82d0880
clear on modal close
hughhhh Dec 18, 2020
f48f2c1
fix
hughhhh Dec 18, 2020
e9d2c6c
refactor to use enum
hughhhh Dec 21, 2020
27bb3e7
add translation
hughhhh Dec 21, 2020
7d1408d
should be or
hughhhh Dec 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@
import React from 'react';
import { t } from '@superset-ui/core';

import StyledModal from 'src/common/components/Modal';
import { Dropdown, Menu } from 'src/common/components';
import Icon from 'src/components/Icon';

Expand Down
128 changes: 55 additions & 73 deletions superset-frontend/src/SqlLab/components/SqlEditor.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { CSSTransition } from 'react-transition-group';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import PropTypes from 'prop-types';
import { FormGroup, InputGroup, Form, FormControl } from 'react-bootstrap';
import { Form } from 'react-bootstrap';
import Split from 'react-split';
import { t, styled } from '@superset-ui/core';
import debounce from 'lodash/debounce';
Expand Down Expand Up @@ -127,6 +127,7 @@ class SqlEditor extends React.PureComponent {
sql: props.queryEditor.sql,
autocompleteEnabled: true,
showCreateAsModal: false,
createAs: '',
};
this.sqlEditorRef = React.createRef();
this.northPaneRef = React.createRef();
Expand Down Expand Up @@ -384,10 +385,12 @@ class SqlEditor extends React.PureComponent {

createTableAs() {
this.startQuery(true, CtasEnum.TABLE);
this.setState({ showCreateAsModal: false, ctas: '' });
}

createViewAs() {
this.startQuery(true, CtasEnum.VIEW);
this.setState({ showCreateAsModal: false, ctas: '' });
}

ctasChanged(event) {
Expand Down Expand Up @@ -449,12 +452,10 @@ class SqlEditor extends React.PureComponent {

renderDropdown() {
const qe = this.props.queryEditor;
const successful =
this.props.latestQuery && this.props.latestQuery.state === 'success';
const successful = this.props.latestQuery?.state === 'success';
const scheduleToolTip = successful
? t('Schedule the query periodically')
: t('You must run the query successfully first');

return (
<Menu onClick={this.handleMenuClick}>
<Menu.Item>
Expand Down Expand Up @@ -513,50 +514,6 @@ class SqlEditor extends React.PureComponent {
}

renderEditorBottomBar() {
let ctasControls;
if (
this.props.database &&
(this.props.database.allow_ctas || this.props.database.allow_cvas)
) {
const ctasToolTip = t('Create table as with query results');
const cvasToolTip = t('Create view as with query results');

ctasControls = (
<FormGroup>
<InputGroup bsSize="small">
<FormControl
type="text"
bsSize="small"
className="input-sm"
placeholder={t('new table name')}
onChange={this.ctasChanged.bind(this)}
/>
<InputGroup.Button>
{this.props.database.allow_ctas && (
<Button
buttonSize="small"
disabled={this.state.ctas.length === 0}
onClick={this.createTableAs.bind(this)}
tooltip={ctasToolTip}
>
<i className="fa fa-table" /> CTAS
</Button>
)}
{this.props.database.allow_cvas && (
<Button
buttonSize="small"
disabled={this.state.ctas.length === 0}
onClick={this.createViewAs.bind(this)}
tooltip={cvasToolTip}
>
<i className="fa fa-table" /> CVAS
</Button>
)}
</InputGroup.Button>
</InputGroup>
</FormGroup>
);
}
const { queryEditor: qe } = this.props;
let limitWarning = null;
if (this.props.latestQuery?.results?.displayLimitReached) {
Expand All @@ -576,37 +533,38 @@ class SqlEditor extends React.PureComponent {
);
}

const { allow_ctas, allow_cvas } = this.props.database;
const showMenu = allow_ctas && allow_ctas;
// eslint-disable-next-line camelcase
const {
allow_ctas: allowCTAS,
allow_cvas: allowCVAS,
} = this.props.database;

const showMenu = allowCTAS && allowCVAS;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should this be or?

const runMenuBtn = (
<Menu>
{allow_ctas && (
{allowCTAS && (
<Menu.Item
onClick={() => {
this.setState({ showCreateAsModal: true });
this.setState({ showCreateAsModal: true, createAs: 'table' });
}}
key="1"
>
Create As Table
</Menu.Item>
)}
{allow_cvas && (
{allowCVAS && (
<Menu.Item
onClick={() => {
this.setState({ showCreateAsModal: true });
this.setState({ showCreateAsModal: true, createAs: 'view' });
}}
key="2"
>
Create As View
</Menu.Item>
>
Create As View
</Menu.Item>
)}
</Menu>
);

const successful = this.props.latestQuery?.state === 'success';
const scheduleToolTip = successful
? t('Schedule the query periodically')
: t('You must run the query successfully first');
return (
<div className="sql-toolbar" id="js-sql-toolbar">
<div className="leftItems">
Expand All @@ -627,15 +585,6 @@ class SqlEditor extends React.PureComponent {
overlayCreateAsMenu={showMenu ? runMenuBtn : <></>}
/>
</span>
{limitWarning}
{this.props.latestQuery && (
<Timer
startTime={this.props.latestQuery.startDttm}
endTime={this.props.latestQuery.endDttm}
state={STATE_BSSTYLE_MAP[this.props.latestQuery.state]}
isRunning={this.props.latestQuery.state === 'running'}
/>
)}
{isFeatureEnabled(FeatureFlag.ESTIMATE_QUERY_COST) &&
this.props.database &&
this.props.database.allows_cost_estimate && (
Expand All @@ -651,6 +600,15 @@ class SqlEditor extends React.PureComponent {
/>
</span>
)}
{limitWarning}
{this.props.latestQuery && (
<Timer
startTime={this.props.latestQuery.startDttm}
endTime={this.props.latestQuery.endDttm}
state={STATE_BSSTYLE_MAP[this.props.latestQuery.state]}
isRunning={this.props.latestQuery.state === 'running'}
/>
)}
<span>
<LimitSelectStyled>
<Dropdown overlay={this.renderQueryLimit()}>
Expand Down Expand Up @@ -719,18 +677,42 @@ class SqlEditor extends React.PureComponent {
<StyledModal
visible={this.state.showCreateAsModal}
title={t('Create View As')}
footer={<>
onHide={() => {
this.setState({ showCreateAsModal: false });
}}
footer={
<>
<Button
onClick={() => this.setState({ showCreateAsModal: false })}
>
Cancel
</Button>
<Button buttonStyle="primary">Create</Button>
{this.state.createAs === 'table' && (
<Button
buttonStyle="primary"
disabled={this.state.ctas.length === 0}
onClick={this.createTableAs.bind(this)}
>
Create
</Button>
)}
{this.state.createAs === 'view' && (
<Button
buttonStyle="primary"
disabled={this.state.ctas.length === 0}
onClick={this.createViewAs.bind(this)}
>
Create
</Button>
)}
</>
}
>
<span>Name</span>
<Input placeholder="Specify name to Create View AS schema in: public"/>
<Input
placeholder="Specify name to Create View AS schema in: public"
onChange={this.ctasChanged.bind(this)}
/>
</StyledModal>
</div>
);
Expand Down