Skip to content

Commit

Permalink
refactor: Bootstrap to AntD - Form - iteration 1 (#14106)
Browse files Browse the repository at this point in the history
  • Loading branch information
@michael-s-molina
michael-s-molina authored Apr 26, 2021
1 parent 8dd0620 commit 4fbb572
Show file tree
Hide file tree
Showing 4 changed files with 78 additions and 92 deletions.
3 changes: 2 additions & 1 deletion superset-frontend/spec/javascripts/explore/components/VizTypeControl_spec.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import { shallow } from 'enzyme';
import { getChartMetadataRegistry, ChartMetadata } from '@superset-ui/core';
import VizTypeControl from 'src/explore/components/controls/VizTypeControl';
import Modal from 'src/components/Modal';
import { Input } from 'src/common/components';

const defaultProps = {
name: 'viz_type',
Expand Down Expand Up @@ -65,7 +66,7 @@ describe('VizTypeControl', () => {
});
it('filters images based on text input', () => {
expect(wrapper.find('img')).toHaveLength(2);
wrapper.find('FormControl').simulate('change', {
wrapper.find(Input).simulate('change', {
target: {
value: 'vis2',
},
Expand Down
128 changes: 62 additions & 66 deletions superset-frontend/src/SqlLab/components/SqlEditor.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import { CSSTransition } from 'react-transition-group';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import PropTypes from 'prop-types';
import { Form } from 'react-bootstrap';
import Split from 'react-split';
import { t, styled, supersetTheme } from '@superset-ui/core';
import debounce from 'lodash/debounce';
Expand Down Expand Up @@ -57,8 +56,14 @@ import {
setActiveSouthPaneTab,
updateSavedQuery,
validateQuery,
} from '../actions/sqlLab';

} from 'src/SqlLab/actions/sqlLab';
import {
STATE_TYPE_MAP,
SQL_EDITOR_GUTTER_HEIGHT,
SQL_EDITOR_GUTTER_MARGIN,
SQL_TOOLBAR_HEIGHT,
} from 'src/SqlLab/constants';
import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
import TemplateParamsEditor from './TemplateParamsEditor';
import ConnectedSouthPane from './SouthPane/state';
import SaveQuery from './SaveQuery';
Expand All @@ -67,14 +72,7 @@ import EstimateQueryCostButton from './EstimateQueryCostButton';
import ShareSqlLabQuery from './ShareSqlLabQuery';
import SqlEditorLeftBar from './SqlEditorLeftBar';
import AceEditorWrapper from './AceEditorWrapper';
import {
STATE_TYPE_MAP,
SQL_EDITOR_GUTTER_HEIGHT,
SQL_EDITOR_GUTTER_MARGIN,
SQL_TOOLBAR_HEIGHT,
} from '../constants';
import RunQueryActionButton from './RunQueryActionButton';
import { FeatureFlag, isFeatureEnabled } from '../../featureFlags';

const LIMIT_DROPDOWN = [10, 100, 1000, 10000, 100000];
const SQL_EDITOR_PADDING = 10;
Expand Down Expand Up @@ -114,7 +112,7 @@ const StyledToolbar = styled.div`
margin-block-end: 0;
}
.leftItems form,
.leftItems,
.rightItems {
display: flex;
align-items: center;
Expand Down Expand Up @@ -599,62 +597,60 @@ class SqlEditor extends React.PureComponent {
return (
<StyledToolbar className="sql-toolbar" id="js-sql-toolbar">
<div className="leftItems">
<Form inline>
<span>
<RunQueryActionButton
allowAsync={
this.props.database
? this.props.database.allow_run_async
: false
}
queryState={this.props.latestQuery?.state}
runQuery={this.runQuery}
selectedText={qe.selectedText}
stopQuery={this.stopQuery}
sql={this.state.sql}
overlayCreateAsMenu={showMenu ? runMenuBtn : null}
/>
</span>
{isFeatureEnabled(FeatureFlag.ESTIMATE_QUERY_COST) &&
this.props.database &&
this.props.database.allows_cost_estimate && (
<span>
<EstimateQueryCostButton
dbId={qe.dbId}
schema={qe.schema}
sql={qe.sql}
getEstimate={this.getQueryCostEstimate}
queryCostEstimate={qe.queryCostEstimate}
selectedText={qe.selectedText}
tooltip={t('Estimate the cost before running a query')}
/>
</span>
)}
<span>
<LimitSelectStyled>
<Dropdown overlay={this.renderQueryLimit()} trigger="click">
<a onClick={e => e.preventDefault()}>
<span>LIMIT:</span>
<span>
{this.convertToNumWithSpaces(
this.props.queryEditor.queryLimit ||
this.props.defaultQueryLimit,
)}
</span>
<Icon name="triangle-down" />
</a>
</Dropdown>
</LimitSelectStyled>
</span>
{this.props.latestQuery && (
<Timer
startTime={this.props.latestQuery.startDttm}
endTime={this.props.latestQuery.endDttm}
state={STATE_TYPE_MAP[this.props.latestQuery.state]}
isRunning={this.props.latestQuery.state === 'running'}
/>
<span>
<RunQueryActionButton
allowAsync={
this.props.database
? this.props.database.allow_run_async
: false
}
queryState={this.props.latestQuery?.state}
runQuery={this.runQuery}
selectedText={qe.selectedText}
stopQuery={this.stopQuery}
sql={this.state.sql}
overlayCreateAsMenu={showMenu ? runMenuBtn : null}
/>
</span>
{isFeatureEnabled(FeatureFlag.ESTIMATE_QUERY_COST) &&
this.props.database &&
this.props.database.allows_cost_estimate && (
<span>
<EstimateQueryCostButton
dbId={qe.dbId}
schema={qe.schema}
sql={qe.sql}
getEstimate={this.getQueryCostEstimate}
queryCostEstimate={qe.queryCostEstimate}
selectedText={qe.selectedText}
tooltip={t('Estimate the cost before running a query')}
/>
</span>
)}
</Form>
<span>
<LimitSelectStyled>
<Dropdown overlay={this.renderQueryLimit()} trigger="click">
<a onClick={e => e.preventDefault()}>
<span>LIMIT:</span>
<span>
{this.convertToNumWithSpaces(
this.props.queryEditor.queryLimit ||
this.props.defaultQueryLimit,
)}
</span>
<Icon name="triangle-down" />
</a>
</Dropdown>
</LimitSelectStyled>
</span>
{this.props.latestQuery && (
<Timer
startTime={this.props.latestQuery.startDttm}
endTime={this.props.latestQuery.endDttm}
state={STATE_TYPE_MAP[this.props.latestQuery.state]}
isRunning={this.props.latestQuery.state === 'running'}
/>
)}
</div>
<div className="rightItems">
<span>
Expand Down
17 changes: 8 additions & 9 deletions superset-frontend/src/dashboard/components/SaveModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,8 @@
*/
/* eslint-env browser */
import React from 'react';
import { FormControl, FormGroup } from 'react-bootstrap';
import { RadioChangeEvent } from 'src/common/components';
import { Radio } from 'src/components/Radio';
import { RadioChangeEvent, Input } from 'src/common/components';
import Button from 'src/components/Button';
import { t, CategoricalColorNamespace, JsonResponse } from '@superset-ui/core';

Expand Down Expand Up @@ -109,9 +108,9 @@ class SaveModal extends React.PureComponent<SaveModalProps, SaveModalState> {
});
}

handleNameChange(event: React.FormEvent<FormControl>) {
handleNameChange(name: string) {
this.setState({
newDashName: (event.target as HTMLInputElement).value,
newDashName: name,
saveType: SAVE_TYPE_NEWDASHBOARD,
});
}
Expand Down Expand Up @@ -182,7 +181,7 @@ class SaveModal extends React.PureComponent<SaveModalProps, SaveModalState> {
triggerNode={this.props.triggerNode}
modalTitle={t('Save dashboard')}
modalBody={
<FormGroup>
<div>
<Radio
value={SAVE_TYPE_OVERWRITE}
onChange={this.handleSaveTypeChange}
Expand All @@ -199,12 +198,12 @@ class SaveModal extends React.PureComponent<SaveModalProps, SaveModalState> {
>
{t('Save as:')}
</Radio>
<FormControl
<Input
type="text"
placeholder={t('[dashboard name]')}
value={this.state.newDashName}
onFocus={this.handleNameChange}
onChange={this.handleNameChange}
onFocus={e => this.handleNameChange(e.target.value)}
onChange={e => this.handleNameChange(e.target.value)}
/>
<div className="m-l-25 m-t-5">
<Checkbox
Expand All @@ -213,7 +212,7 @@ class SaveModal extends React.PureComponent<SaveModalProps, SaveModalState> {
/>
<span className="m-l-5">{t('also copy (duplicate) charts')}</span>
</div>
</FormGroup>
</div>
}
modalFooter={
<div>
Expand Down
22 changes: 6 additions & 16 deletions superset-frontend/src/explore/components/controls/VizTypeControl.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,15 @@
*/
import React, { useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import { Row, Col } from 'src/common/components';
import { FormControl } from 'react-bootstrap';
import { Input, Row, Col } from 'src/common/components';
import { Behavior, t, getChartMetadataRegistry } from '@superset-ui/core';
import { useDynamicPluginContext } from 'src/components/DynamicPlugins';
import Modal from 'src/components/Modal';
import { Tooltip } from 'src/components/Tooltip';
import Label from 'src/components/Label';
import ControlHeader from '../ControlHeader';
import ControlHeader from 'src/explore/components/ControlHeader';
import './VizTypeControl.less';
import { FeatureFlag, isFeatureEnabled } from '../../../featureFlags';
import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';

const propTypes = {
description: PropTypes.string,
Expand Down Expand Up @@ -119,7 +118,7 @@ const VizTypeControl = props => {

useEffect(() => {
if (showModal) {
searchRef?.current?.focus();
setTimeout(() => searchRef?.current?.focus(), 200);
}
}, [showModal]);

Expand All @@ -136,12 +135,6 @@ const VizTypeControl = props => {
setFilter(event.target.value);
};

const focusSearch = () => {
if (searchRef) {
searchRef.focus();
}
};

const renderItem = entry => {
const { value } = props;
const { key, value: type } = entry;
Expand Down Expand Up @@ -212,17 +205,14 @@ const VizTypeControl = props => {
<Modal
show={showModal}
onHide={toggleModal}
onEnter={focusSearch}
title={t('Select a visualization type')}
responsive
hideFooter
forceRender
>
<div className="viztype-control-search-box">
<FormControl
inputRef={ref => {
searchRef.current = ref;
}}
<Input
ref={searchRef}
type="text"
value={filter}
placeholder={t('Search')}
Expand Down

0 comments on commit 4fbb572

Please sign in to comment.