diff --git a/superset-frontend/cypress-base/cypress/integration/explore/annotations.test.ts b/superset-frontend/cypress-base/cypress/integration/explore/annotations.test.ts index a771ea5d2d..b895fa5847 100644 --- a/superset-frontend/cypress-base/cypress/integration/explore/annotations.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/explore/annotations.test.ts @@ -32,18 +32,8 @@ describe('Annotations', () => { cy.get('[data-test=annotation_layers]').click(); cy.get('[data-test="popover-content"]').within(() => { - cy.get('[data-test=annotation-layer-name-header]') - .siblings() - .first() - .within(() => { - cy.get('input').type(layerLabel); - }); - cy.get('[data-test=annotation-layer-value-header]') - .siblings() - .first() - .within(() => { - cy.get('input').type('y=1400000'); - }); + cy.get('[aria-label=Name]').type(layerLabel); + cy.get('[aria-label=Formula]').type('y=1400000'); cy.get('button').contains('OK').click(); }); diff --git a/superset-frontend/spec/javascripts/explore/components/TextArea_spec.jsx b/superset-frontend/spec/javascripts/explore/components/TextArea_spec.jsx index 57c34b2455..fe804b5ec4 100644 --- a/superset-frontend/spec/javascripts/explore/components/TextArea_spec.jsx +++ b/superset-frontend/spec/javascripts/explore/components/TextArea_spec.jsx @@ -18,10 +18,10 @@ */ /* eslint-disable no-unused-expressions */ import React from 'react'; -import { FormControl } from 'react-bootstrap'; import sinon from 'sinon'; import { shallow } from 'enzyme'; import { TextAreaEditor } from 'src/components/AsyncAceEditor'; +import { TextArea } from 'src/common/components'; import TextAreaControl from 'src/explore/components/controls/TextAreaControl'; @@ -38,11 +38,11 @@ describe('SelectControl', () => { }); it('renders a FormControl', () => { - expect(wrapper.find(FormControl)).toExist(); + expect(wrapper.find(TextArea)).toExist(); }); it('calls onChange when toggled', () => { - const select = wrapper.find(FormControl); + const select = wrapper.find(TextArea); select.simulate('change', { target: { value: 'x' } }); expect(defaultProps.onChange.calledWith('x')).toBe(true); }); @@ -51,7 +51,7 @@ describe('SelectControl', () => { const props = { ...defaultProps }; props.language = 'markdown'; wrapper = shallow(); - expect(wrapper.find(FormControl)).not.toExist(); + expect(wrapper.find(TextArea)).not.toExist(); expect(wrapper.find(TextAreaEditor)).toExist(); }); }); diff --git a/superset-frontend/src/CRUD/Field.jsx b/superset-frontend/src/CRUD/Field.jsx index 49f377d221..ca8c3f7082 100644 --- a/superset-frontend/src/CRUD/Field.jsx +++ b/superset-frontend/src/CRUD/Field.jsx @@ -18,10 +18,8 @@ */ import React from 'react'; import PropTypes from 'prop-types'; -import { FormGroup, HelpBlock, FormControl } from 'react-bootstrap'; - import { Tooltip } from 'src/components/Tooltip'; -import { FormLabel } from 'src/components/Form'; +import { FormItem, FormLabel } from 'src/components/Form'; import './crud.less'; const propTypes = { @@ -63,19 +61,31 @@ export default class Field extends React.PureComponent { onChange: this.onChange, }); return ( - - - {label || fieldKey} - {compact && description && ( - - - - )} - {' '} + + {label || fieldKey} + {compact && description && ( + + + + )} + + } + > {hookedControl} - - {!compact && description && {description}} - + {!compact && description && ( +
({ + color: theme.colors.grayscale.base, + marginTop: theme.gridUnit, + })} + > + {description} +
+ )} + ); } } diff --git a/superset-frontend/src/CRUD/Fieldset.jsx b/superset-frontend/src/CRUD/Fieldset.jsx index dcbfc51308..3964af5c20 100644 --- a/superset-frontend/src/CRUD/Fieldset.jsx +++ b/superset-frontend/src/CRUD/Fieldset.jsx @@ -18,7 +18,7 @@ */ import React from 'react'; import PropTypes from 'prop-types'; -import { Form } from 'react-bootstrap'; +import { Form } from 'src/components/Form'; import { recurseReactClone } from './utils'; import Field from './Field'; @@ -56,7 +56,7 @@ export default class Fieldset extends React.PureComponent { compact: this.props.compact, }); return ( -
+ {title && {title}} {recurseReactClone(this.props.children, Field, propExtender)}
diff --git a/superset-frontend/src/components/DeleteModal/index.tsx b/superset-frontend/src/components/DeleteModal/index.tsx index e86d025e64..98639cddc0 100644 --- a/superset-frontend/src/components/DeleteModal/index.tsx +++ b/superset-frontend/src/components/DeleteModal/index.tsx @@ -18,11 +18,11 @@ */ import { t, styled } from '@superset-ui/core'; import React, { useState } from 'react'; -import { FormGroup, FormControl, FormControlProps } from 'react-bootstrap'; +import { Input } from 'src/common/components'; import Modal from 'src/components/Modal'; import { FormLabel } from 'src/components/Form'; -const StyleFormGroup = styled(FormGroup)` +const StyledDiv = styled.div` padding-top: 8px; width: 50%; label { @@ -64,24 +64,21 @@ export default function DeleteModal({ title={title} > {description} - + {t('Type "%s" to confirm', t('DELETE'))} - , - ) => { - const targetValue = (event.currentTarget?.value as string) ?? ''; + onChange={(event: React.ChangeEvent) => { + const targetValue = event.target.value ?? ''; setDisableChange(targetValue.toUpperCase() !== t('DELETE')); }} /> - + ); } diff --git a/superset-frontend/src/datasource/ChangeDatasourceModal.tsx b/superset-frontend/src/datasource/ChangeDatasourceModal.tsx index c4a9bf7fa6..e33b8ed2aa 100644 --- a/superset-frontend/src/datasource/ChangeDatasourceModal.tsx +++ b/superset-frontend/src/datasource/ChangeDatasourceModal.tsx @@ -23,7 +23,6 @@ import React, { useEffect, useCallback, } from 'react'; -import { FormControl, FormControlProps } from 'react-bootstrap'; import Alert from 'src/components/Alert'; import { SupersetClient, t, styled } from '@superset-ui/core'; import TableView, { EmptyWrapperType } from 'src/components/TableView'; @@ -32,9 +31,10 @@ import Button from 'src/components/Button'; import { useListViewResource } from 'src/views/CRUD/hooks'; import Dataset from 'src/types/Dataset'; import { useDebouncedEffect } from 'src/explore/exploreUtils'; -import { getClientErrorObject } from '../utils/getClientErrorObject'; -import Loading from '../components/Loading'; -import withToasts from '../messageToasts/enhancers/withToasts'; +import { getClientErrorObject } from 'src/utils/getClientErrorObject'; +import Loading from 'src/components/Loading'; +import withToasts from 'src/messageToasts/enhancers/withToasts'; +import { Input, AntdInput } from 'src/common/components'; const CONFIRM_WARNING_MESSAGE = t( 'Warning! Changing the dataset may break the chart if the metadata does not exist.', @@ -107,7 +107,7 @@ const ChangeDatasourceModal: FunctionComponent = ({ const [filter, setFilter] = useState(undefined); const [confirmChange, setConfirmChange] = useState(false); const [confirmedDataset, setConfirmedDataset] = useState(); - let searchRef = useRef(null); + const searchRef = useRef(null); const { state: { loading, resourceCollection }, @@ -140,9 +140,7 @@ const ChangeDatasourceModal: FunctionComponent = ({ useEffect(() => { const onEnterModal = async () => { - if (searchRef && searchRef.current) { - searchRef.current.focus(); - } + setTimeout(() => searchRef?.current?.focus(), 200); }; if (show) { @@ -158,14 +156,8 @@ const ChangeDatasourceModal: FunctionComponent = ({ show, ]); - const setSearchRef = (ref: any) => { - searchRef = ref; - }; - - const changeSearch = ( - event: React.FormEvent, - ) => { - const searchValue = (event.currentTarget?.value as string) ?? ''; + const changeSearch = (event: React.ChangeEvent) => { + const searchValue = event.target.value ?? ''; setFilter(searchValue); }; @@ -250,24 +242,20 @@ const ChangeDatasourceModal: FunctionComponent = ({ ({ marginBottom: theme.gridUnit * 4 })} message={ <> {t('Warning!')} {CHANGE_WARNING_MSG} } /> -
- { - setSearchRef(ref); - }} - type="text" - bsSize="sm" - value={filter} - placeholder={t('Search / Filter')} - onChange={changeSearch} - /> -
+ {loading && } {!loading && ( )} {this.state.datasourceType === DATASOURCE_TYPES.physical.key && ( - + {this.state.isSqla && ( -
- + + {this.renderSettingsFieldset()} - + {this.renderAdvancedFieldset()} -
+ diff --git a/superset-frontend/src/explore/components/PropertiesModal/index.tsx b/superset-frontend/src/explore/components/PropertiesModal/index.tsx index bab4971b53..0c46f6ba79 100644 --- a/superset-frontend/src/explore/components/PropertiesModal/index.tsx +++ b/superset-frontend/src/explore/components/PropertiesModal/index.tsx @@ -18,15 +18,14 @@ */ import React, { useState, useEffect, useCallback } from 'react'; import Modal from 'src/components/Modal'; -import { Row, Col } from 'src/common/components'; -import { FormControl, FormGroup, FormControlProps } from 'react-bootstrap'; +import { Row, Col, Input, TextArea } from 'src/common/components'; import Button from 'src/components/Button'; import { OptionsType } from 'react-select/src/types'; import { AsyncSelect } from 'src/components/Select'; import rison from 'rison'; import { t, SupersetClient } from '@superset-ui/core'; import Chart, { Slice } from 'src/types/Chart'; -import { FormLabel } from 'src/components/Form'; +import { Form, FormItem } from 'src/components/Form'; import { getClientErrorObject } from 'src/utils/getClientErrorObject'; type PropertiesModalProps = { @@ -186,37 +185,28 @@ export default function PropertiesModal({ responsive wrapProps={{ 'data-test': 'properties-edit-modal' }} > -
+

{t('Basic information')}

- - - {t('Name')} - - + , - ) => setName((event.currentTarget?.value as string) ?? '')} + onChange={(event: React.ChangeEvent) => + setName(event.target.value ?? '') + } /> - - - {t('Description')} - + +