From 79ff96269b6d29d2bba92768be588d2f19ffe1a0 Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Sat, 8 May 2021 16:34:52 -0300
Subject: [PATCH] refactor: Bootstrap to AntD - Form - iteration 3 (#14502)

---
 .../AdhocMetricEditPopover_spec.jsx           |  4 +-
 .../explore/components/BoundsControl_spec.jsx | 12 ++--
 .../javascripts/sqllab/SaveQuery_spec.jsx     |  6 +-
 .../src/SqlLab/components/SaveQuery.tsx       | 41 ++++++------
 .../SqlLab/components/ScheduleQueryButton.tsx | 61 ++++++++++--------
 .../src/common/components/index.tsx           | 12 ++--
 .../src/components/Form/FormItem.tsx          | 33 ++++++----
 .../components/PropertiesModal/index.jsx      |  4 +-
 .../components/DataTableControl/index.tsx     |  6 +-
 .../components/controls/BoundsControl.jsx     | 45 ++++++-------
 .../AdhocMetricEditPopover.test.tsx           |  4 +-
 .../AdhocMetricEditPopover/index.jsx          | 64 ++++++++-----------
 .../TimeSeriesColumnControl/index.jsx         | 63 +++++++++---------
 13 files changed, 176 insertions(+), 179 deletions(-)

diff --git a/superset-frontend/spec/javascripts/explore/components/AdhocMetricEditPopover_spec.jsx b/superset-frontend/spec/javascripts/explore/components/AdhocMetricEditPopover_spec.jsx
index 2c7e276425..3e436dbe2d 100644
--- a/superset-frontend/spec/javascripts/explore/components/AdhocMetricEditPopover_spec.jsx
+++ b/superset-frontend/spec/javascripts/explore/components/AdhocMetricEditPopover_spec.jsx
@@ -20,7 +20,7 @@
 import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
-import { FormGroup } from 'react-bootstrap';
+import { FormItem } from 'src/components/Form';
 import Button from 'src/components/Button';
 
 import { AGGREGATES } from 'src/explore/constants';
@@ -67,7 +67,7 @@ function setup(overrides) {
 describe('AdhocMetricEditPopover', () => {
   it('renders a popover with edit metric form contents', () => {
     const { wrapper } = setup();
-    expect(wrapper.find(FormGroup)).toHaveLength(4);
+    expect(wrapper.find(FormItem)).toHaveLength(3);
     expect(wrapper.find(Button)).toHaveLength(2);
   });
 
diff --git a/superset-frontend/spec/javascripts/explore/components/BoundsControl_spec.jsx b/superset-frontend/spec/javascripts/explore/components/BoundsControl_spec.jsx
index 37fac69b0a..279ec404a8 100644
--- a/superset-frontend/spec/javascripts/explore/components/BoundsControl_spec.jsx
+++ b/superset-frontend/spec/javascripts/explore/components/BoundsControl_spec.jsx
@@ -17,10 +17,10 @@
  * under the License.
  */
 import React from 'react';
-import { FormControl } from 'react-bootstrap';
 import sinon from 'sinon';
 import { styledMount as mount } from 'spec/helpers/theming';
 import BoundsControl from 'src/explore/components/controls/BoundsControl';
+import { Input } from 'src/common/components';
 
 const defaultProps = {
   name: 'y_axis_bounds',
@@ -35,13 +35,13 @@ describe('BoundsControl', () => {
     wrapper = mount(<BoundsControl {...defaultProps} />);
   });
 
-  it('renders two FormControls', () => {
-    expect(wrapper.find(FormControl)).toHaveLength(2);
+  it('renders two Input', () => {
+    expect(wrapper.find(Input)).toHaveLength(2);
   });
 
   it('errors on non-numeric', () => {
     wrapper
-      .find(FormControl)
+      .find(Input)
       .first()
       .simulate('change', { target: { value: 's' } });
     expect(defaultProps.onChange.calledWith([null, null])).toBe(true);
@@ -51,11 +51,11 @@ describe('BoundsControl', () => {
   });
   it('casts to numeric', () => {
     wrapper
-      .find(FormControl)
+      .find(Input)
       .first()
       .simulate('change', { target: { value: '1' } });
     wrapper
-      .find(FormControl)
+      .find(Input)
       .last()
       .simulate('change', { target: { value: '5' } });
     expect(defaultProps.onChange.calledWith([1, 5])).toBe(true);
diff --git a/superset-frontend/spec/javascripts/sqllab/SaveQuery_spec.jsx b/superset-frontend/spec/javascripts/sqllab/SaveQuery_spec.jsx
index 3a5673df3c..76f6ca8260 100644
--- a/superset-frontend/spec/javascripts/sqllab/SaveQuery_spec.jsx
+++ b/superset-frontend/spec/javascripts/sqllab/SaveQuery_spec.jsx
@@ -17,12 +17,12 @@
  * under the License.
  */
 import React from 'react';
-import { FormControl } from 'react-bootstrap';
 import { shallow } from 'enzyme';
 import * as sinon from 'sinon';
 import SaveQuery from 'src/SqlLab/components/SaveQuery';
 import Modal from 'src/components/Modal';
 import Button from 'src/components/Button';
+import { FormItem } from 'src/components/Form';
 
 describe('SavedQuery', () => {
   const mockedProps = {
@@ -52,11 +52,11 @@ describe('SavedQuery', () => {
 
     expect(modal.find('[data-test="cancel-query"]')).toHaveLength(1);
   });
-  it('has 2 FormControls', () => {
+  it('has 2 FormItem', () => {
     const wrapper = shallow(<SaveQuery {...mockedProps} />);
     const modal = wrapper.find(Modal);
 
-    expect(modal.find(FormControl)).toHaveLength(2);
+    expect(modal.find(FormItem)).toHaveLength(2);
   });
   // eslint-disable-next-line jest/no-disabled-tests
   it.skip('has a save button if this is a new query', () => {
diff --git a/superset-frontend/src/SqlLab/components/SaveQuery.tsx b/superset-frontend/src/SqlLab/components/SaveQuery.tsx
index e4e52cf041..6b589b7586 100644
--- a/superset-frontend/src/SqlLab/components/SaveQuery.tsx
+++ b/superset-frontend/src/SqlLab/components/SaveQuery.tsx
@@ -17,12 +17,10 @@
  * under the License.
  */
 import React, { useState } from 'react';
-import { Row, Col } from 'src/common/components';
-import { FormControl, FormGroup } from 'react-bootstrap';
+import { Row, Col, Input, TextArea } from 'src/common/components';
 import { t, supersetTheme, styled } from '@superset-ui/core';
-
 import Button from 'src/components/Button';
-import { FormLabel } from 'src/components/Form';
+import { Form, FormItem } from 'src/components/Form';
 import Modal from 'src/components/Modal';
 import Icon from 'src/components/Icon';
 
@@ -100,12 +98,12 @@ export default function SaveQuery({
     close();
   };
 
-  const onLabelChange = (e: React.FormEvent<FormControl>) => {
-    setLabel((e.target as HTMLInputElement).value);
+  const onLabelChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setLabel(e.target.value);
   };
 
-  const onDescriptionChange = (e: React.FormEvent<FormControl>) => {
-    setDescription((e.target as HTMLInputElement).value);
+  const onDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setDescription(e.target.value);
   };
 
   const toggleSave = () => {
@@ -113,27 +111,24 @@ export default function SaveQuery({
   };
 
   const renderModalBody = () => (
-    <FormGroup bsSize="small">
+    <Form layout="vertical">
       <Row>
         <Col xs={24}>
-          <small>
-            <FormLabel htmlFor="embed-height">{t('Name')}</FormLabel>
-          </small>
-          <FormControl type="text" value={label} onChange={onLabelChange} />
+          <FormItem label={t('Name')}>
+            <Input type="text" value={label} onChange={onLabelChange} />
+          </FormItem>
         </Col>
       </Row>
       <br />
       <Row>
         <Col xs={24}>
-          <small>
-            <FormLabel htmlFor="embed-height">{t('Description')}</FormLabel>
-          </small>
-          <FormControl
-            rows={5}
-            componentClass="textarea"
-            value={description}
-            onChange={onDescriptionChange}
-          />
+          <FormItem label={t('Description')}>
+            <TextArea
+              rows={4}
+              value={description}
+              onChange={onDescriptionChange}
+            />
+          </FormItem>
         </Col>
       </Row>
       {saveQueryWarning && (
@@ -149,7 +144,7 @@ export default function SaveQuery({
           </div>
         </>
       )}
-    </FormGroup>
+    </Form>
   );
 
   return (
diff --git a/superset-frontend/src/SqlLab/components/ScheduleQueryButton.tsx b/superset-frontend/src/SqlLab/components/ScheduleQueryButton.tsx
index fc87885f2b..0e08f7827d 100644
--- a/superset-frontend/src/SqlLab/components/ScheduleQueryButton.tsx
+++ b/superset-frontend/src/SqlLab/components/ScheduleQueryButton.tsx
@@ -17,13 +17,12 @@
  * under the License.
  */
 import React, { FunctionComponent, useState } from 'react';
-import Form, { FormProps, FormValidation } from 'react-jsonschema-form';
-import { Row, Col } from 'src/common/components';
-import { FormControl, FormGroup } from 'react-bootstrap';
+import SchemaForm, { FormProps, FormValidation } from 'react-jsonschema-form';
+import { Row, Col, Input, TextArea } from 'src/common/components';
 import { t, styled } from '@superset-ui/core';
 import * as chrono from 'chrono-node';
 import ModalTrigger from 'src/components/ModalTrigger';
-import { FormLabel } from 'src/components/Form';
+import { Form, FormItem } from 'src/components/Form';
 import './ScheduleQueryButton.less';
 import Button from 'src/components/Button';
 
@@ -139,42 +138,52 @@ const ScheduleQueryButton: FunctionComponent<ScheduleQueryButtonProps> = ({
   };
 
   const renderModalBody = () => (
-    <FormGroup>
+    <Form layout="vertical">
       <StyledRow>
         <Col xs={24}>
-          <FormLabel className="control-label" htmlFor="embed-height">
-            {t('Label')}
-          </FormLabel>
-          <FormControl
-            type="text"
-            placeholder={t('Label for your query')}
-            value={label}
-            onChange={(event: any) => setLabel(event.target?.value)}
-          />
+          <FormItem label={t('Label')}>
+            <Input
+              type="text"
+              placeholder={t('Label for your query')}
+              value={label}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                setLabel(event.target.value)
+              }
+            />
+          </FormItem>
         </Col>
       </StyledRow>
       <StyledRow>
         <Col xs={24}>
-          <FormLabel className="control-label" htmlFor="embed-height">
-            {t('Description')}
-          </FormLabel>
-          <FormControl
-            componentClass="textarea"
-            placeholder={t('Write a description for your query')}
-            value={description}
-            onChange={(event: any) => setDescription(event.target?.value)}
-          />
+          <FormItem label={t('Description')}>
+            <TextArea
+              rows={4}
+              placeholder={t('Write a description for your query')}
+              value={description}
+              onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) =>
+                setDescription(event.target.value)
+              }
+            />
+          </FormItem>
         </Col>
       </StyledRow>
       <Row>
         <Col xs={24}>
           <div className="json-schema">
-            <Form
+            <SchemaForm
               schema={getJSONSchema()}
               uiSchema={getUISchema}
               onSubmit={onScheduleSubmit}
               validate={getValidator()}
-            />
+            >
+              <Button
+                buttonStyle="primary"
+                htmlType="submit"
+                css={{ float: 'right' }}
+              >
+                Submit
+              </Button>
+            </SchemaForm>
           </div>
         </Col>
       </Row>
@@ -185,7 +194,7 @@ const ScheduleQueryButton: FunctionComponent<ScheduleQueryButtonProps> = ({
           </Col>
         </Row>
       )}
-    </FormGroup>
+    </Form>
   );
 
   return (
diff --git a/superset-frontend/src/common/components/index.tsx b/superset-frontend/src/common/components/index.tsx
index 2750951287..c1ce9c2296 100644
--- a/superset-frontend/src/common/components/index.tsx
+++ b/superset-frontend/src/common/components/index.tsx
@@ -89,11 +89,13 @@ export const Menu = Object.assign(AntdMenu, {
 });
 
 export const Input = styled(AntdInput)`
-  &[type='text'],
-  &[type='textarea'] {
-    border: 1px solid ${({ theme }) => theme.colors.secondary.light3};
-    border-radius: ${({ theme }) => theme.borderRadius}px;
-  }
+  border: 1px solid ${({ theme }) => theme.colors.secondary.light3};
+  border-radius: ${({ theme }) => theme.borderRadius}px;
+`;
+
+export const TextArea = styled(AntdInput.TextArea)`
+  border: 1px solid ${({ theme }) => theme.colors.secondary.light3};
+  border-radius: ${({ theme }) => theme.borderRadius}px;
 `;
 
 export const NoAnimationDropdown = (props: DropDownProps) => (
diff --git a/superset-frontend/src/components/Form/FormItem.tsx b/superset-frontend/src/components/Form/FormItem.tsx
index ce02c555f8..380bb13a46 100644
--- a/superset-frontend/src/components/Form/FormItem.tsx
+++ b/superset-frontend/src/components/Form/FormItem.tsx
@@ -21,23 +21,28 @@ import Form, { FormItemProps } from 'antd/lib/form';
 import { styled } from '@superset-ui/core';
 
 const StyledItem = styled(Form.Item)`
-  .ant-form-item-label > label {
-    text-transform: uppercase;
-    font-size: ${({ theme }) => theme.typography.sizes.s}px;
-    color: ${({ theme }) => theme.colors.grayscale.base};
+  ${({ theme }) => `
+    .ant-form-item-label {
+      padding-bottom: ${theme.gridUnit}px;
+      & > label {
+        text-transform: uppercase;
+        font-size: ${theme.typography.sizes.s}px;
+        color: ${theme.colors.grayscale.base};
 
-    &.ant-form-item-required:not(.ant-form-item-required-mark-optional) {
-      &::before {
-        display: none;
-      }
-      &::after {
-        display: inline-block;
-        color: ${({ theme }) => theme.colors.error.base};
-        font-size: ${({ theme }) => theme.typography.sizes.m}px;
-        content: '*';
+        &.ant-form-item-required:not(.ant-form-item-required-mark-optional) {
+          &::before {
+            display: none;
+          }
+          &::after {
+            display: inline-block;
+            color: ${theme.colors.error.base};
+            font-size: ${theme.typography.sizes.m}px;
+            content: '*';
+          }
+        }
       }
     }
-  }
+  `}
 `;
 
 export default function FormItem(props: FormItemProps) {
diff --git a/superset-frontend/src/dashboard/components/PropertiesModal/index.jsx b/superset-frontend/src/dashboard/components/PropertiesModal/index.jsx
index a731158c52..cdc1b95674 100644
--- a/superset-frontend/src/dashboard/components/PropertiesModal/index.jsx
+++ b/superset-frontend/src/dashboard/components/PropertiesModal/index.jsx
@@ -350,7 +350,7 @@ class PropertiesModal extends React.PureComponent {
           <ColorSchemeControlWrapper
             onChange={this.onColorSchemeChange}
             colorScheme={values.colorScheme}
-            labelMargin={8}
+            labelMargin={4}
           />
         </Col>
       </Row>
@@ -413,7 +413,7 @@ class PropertiesModal extends React.PureComponent {
             <ColorSchemeControlWrapper
               onChange={this.onColorSchemeChange}
               colorScheme={values.colorScheme}
-              labelMargin={8}
+              labelMargin={4}
             />
           </Col>
         </Row>
diff --git a/superset-frontend/src/explore/components/DataTableControl/index.tsx b/superset-frontend/src/explore/components/DataTableControl/index.tsx
index 934ebe72ad..43148cad1c 100644
--- a/superset-frontend/src/explore/components/DataTableControl/index.tsx
+++ b/superset-frontend/src/explore/components/DataTableControl/index.tsx
@@ -18,10 +18,9 @@
  */
 import React, { useMemo } from 'react';
 import { styled, t } from '@superset-ui/core';
-import { FormControl } from 'react-bootstrap';
 import { Column } from 'react-table';
 import debounce from 'lodash/debounce';
-
+import { Input } from 'src/common/components';
 import {
   BOOL_FALSE_DISPLAY,
   BOOL_TRUE_DISPLAY,
@@ -73,9 +72,8 @@ export const FilterInput = ({
 }) => {
   const debouncedChangeHandler = debounce(onChangeHandler, SLOW_DEBOUNCE);
   return (
-    <FormControl
+    <Input
       placeholder={t('Search')}
-      bsSize="sm"
       onChange={(event: any) => {
         const filterText = event.target.value;
         debouncedChangeHandler(filterText);
diff --git a/superset-frontend/src/explore/components/controls/BoundsControl.jsx b/superset-frontend/src/explore/components/controls/BoundsControl.jsx
index b3c64402c5..da9eda2590 100644
--- a/superset-frontend/src/explore/components/controls/BoundsControl.jsx
+++ b/superset-frontend/src/explore/components/controls/BoundsControl.jsx
@@ -18,8 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, Col } from 'src/common/components';
-import { FormGroup, FormControl } from 'react-bootstrap';
+import { Row, Col, Input } from 'src/common/components';
 import { t } from '@superset-ui/core';
 import ControlHeader from '../ControlHeader';
 
@@ -87,28 +86,26 @@ export default class BoundsControl extends React.Component {
     return (
       <div>
         <ControlHeader {...this.props} />
-        <FormGroup bsSize="small">
-          <Row gutter={16}>
-            <Col xs={12}>
-              <FormControl
-                data-test="min-bound"
-                type="text"
-                placeholder={t('Min')}
-                onChange={this.onMinChange}
-                value={this.state.minMax[0]}
-              />
-            </Col>
-            <Col xs={12}>
-              <FormControl
-                type="text"
-                data-test="max-bound"
-                placeholder={t('Max')}
-                onChange={this.onMaxChange}
-                value={this.state.minMax[1]}
-              />
-            </Col>
-          </Row>
-        </FormGroup>
+        <Row gutter={16}>
+          <Col xs={12}>
+            <Input
+              data-test="min-bound"
+              type="text"
+              placeholder={t('Min')}
+              onChange={this.onMinChange}
+              value={this.state.minMax[0]}
+            />
+          </Col>
+          <Col xs={12}>
+            <Input
+              type="text"
+              data-test="max-bound"
+              placeholder={t('Max')}
+              onChange={this.onMaxChange}
+              value={this.state.minMax[1]}
+            />
+          </Col>
+        </Row>
       </div>
     );
   }
diff --git a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/AdhocMetricEditPopover.test.tsx b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/AdhocMetricEditPopover.test.tsx
index 04a03646c4..8d4ef8a624 100644
--- a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/AdhocMetricEditPopover.test.tsx
+++ b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/AdhocMetricEditPopover.test.tsx
@@ -170,7 +170,7 @@ test('Should switch to tab:Custom SQL', () => {
   ).toBeInTheDocument();
 });
 
-test('Should render "Custom SQL" tab correctly', () => {
+test('Should render "Custom SQL" tab correctly', async () => {
   const props = createProps();
   props.getCurrentTab.mockImplementation(tab => {
     props.adhocMetric.expressionType = tab;
@@ -180,5 +180,5 @@ test('Should render "Custom SQL" tab correctly', () => {
   const tab = screen.getByRole('tab', { name: 'Custom SQL' }).parentElement!;
   userEvent.click(tab);
 
-  expect(screen.getByTestId('sql-editor')).toBeVisible();
+  expect(await screen.findByRole('textbox')).toBeInTheDocument();
 });
diff --git a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx
index 848ce8283a..915241507f 100644
--- a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx
+++ b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx
@@ -19,13 +19,12 @@
 /* eslint-disable camelcase */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormGroup } from 'react-bootstrap';
 import Tabs from 'src/components/Tabs';
 import Button from 'src/components/Button';
 import { NativeSelect as Select } from 'src/components/Select';
 import { t, styled } from '@superset-ui/core';
 
-import { FormLabel } from 'src/components/Form';
+import { Form, FormItem } from 'src/components/Form';
 import { SQLEditor } from 'src/components/AsyncAceEditor';
 import sqlKeywords from 'src/SqlLab/utils/sqlKeywords';
 import { noOp } from 'src/utils/common';
@@ -337,7 +336,8 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
         savedMetric?.metric_name !== propsSavedMetric?.metric_name);
 
     return (
-      <div
+      <Form
+        layout="vertical"
         id="metrics-edit-popover"
         data-test="metrics-edit-popover"
         {...popoverProps}
@@ -352,10 +352,7 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
           allowOverflow
         >
           <Tabs.TabPane key={SAVED_TAB_KEY} tab={t('Saved')}>
-            <FormGroup>
-              <FormLabel>
-                <strong>{t('Saved metric')}</strong>
-              </FormLabel>
+            <FormItem label={t('Saved metric')}>
               <StyledSelect
                 {...savedSelectProps}
                 name="select-saved"
@@ -374,13 +371,10 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
                     </Select.Option>
                   ))}
               </StyledSelect>
-            </FormGroup>
+            </FormItem>
           </Tabs.TabPane>
           <Tabs.TabPane key={EXPRESSION_TYPES.SIMPLE} tab={t('Simple')}>
-            <FormGroup>
-              <FormLabel>
-                <strong>{t('column')}</strong>
-              </FormLabel>
+            <FormItem label={t('column')}>
               <Select
                 {...columnSelectProps}
                 name="select-column"
@@ -396,11 +390,8 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
                   </Select.Option>
                 ))}
               </Select>
-            </FormGroup>
-            <FormGroup>
-              <FormLabel>
-                <strong>{t('aggregate')}</strong>
-              </FormLabel>
+            </FormItem>
+            <FormItem label={t('aggregate')}>
               <Select
                 {...aggregateSelectProps}
                 name="select-aggregate"
@@ -412,7 +403,7 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
                   </Select.Option>
                 ))}
               </Select>
-            </FormGroup>
+            </FormItem>
           </Tabs.TabPane>
           <Tabs.TabPane
             key={EXPRESSION_TYPES.SQL}
@@ -420,24 +411,23 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
             data-test="adhoc-metric-edit-tab#custom"
           >
             {this.props.datasourceType !== 'druid' ? (
-              <FormGroup data-test="sql-editor">
-                <SQLEditor
-                  showLoadingForImport
-                  ref={this.handleAceEditorRef}
-                  keywords={keywords}
-                  height={`${this.state.height - 80}px`}
-                  onChange={this.onSqlExpressionChange}
-                  width="100%"
-                  showGutter={false}
-                  value={
-                    adhocMetric.sqlExpression || adhocMetric.translateToSql()
-                  }
-                  editorProps={{ $blockScrolling: true }}
-                  enableLiveAutocompletion
-                  className="filter-sql-editor"
-                  wrapEnabled
-                />
-              </FormGroup>
+              <SQLEditor
+                data-test="sql-editor"
+                showLoadingForImport
+                ref={this.handleAceEditorRef}
+                keywords={keywords}
+                height={`${this.state.height - 80}px`}
+                onChange={this.onSqlExpressionChange}
+                width="100%"
+                showGutter={false}
+                value={
+                  adhocMetric.sqlExpression || adhocMetric.translateToSql()
+                }
+                editorProps={{ $blockScrolling: true }}
+                enableLiveAutocompletion
+                className="adhoc-filter-sql-editor"
+                wrapEnabled
+              />
             ) : (
               <div className="custom-sql-disabled-message">
                 Custom SQL Metrics are not available on druid datasources
@@ -474,7 +464,7 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
             className="fa fa-expand edit-popover-resize text-muted"
           />
         </div>
-      </div>
+      </Form>
     );
   }
 }
diff --git a/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx b/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx
index f26f4d2ef6..ab3583a928 100644
--- a/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx
+++ b/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx
@@ -18,11 +18,10 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, Col } from 'src/common/components';
-import { FormControl } from 'react-bootstrap';
+import { Row, Col, Input } from 'src/common/components';
 import Popover from 'src/components/Popover';
 import Select from 'src/components/Select';
-import { t } from '@superset-ui/core';
+import { t, styled } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 
 import BoundsControl from '../BoundsControl';
@@ -75,6 +74,20 @@ const colTypeOptions = [
   { value: 'avg', label: 'Period average' },
 ];
 
+const StyledRow = styled(Row)`
+  margin-top: ${({ theme }) => theme.gridUnit * 2}px;
+`;
+
+const StyledCol = styled(Col)`
+  display: flex;
+  align-items: center;
+`;
+
+const StyledTooltip = styled(InfoTooltipWithTrigger)`
+  margin-left: ${({ theme }) => theme.gridUnit}px;
+  color: ${({ theme }) => theme.colors.grayscale.light1};
+`;
+
 export default class TimeSeriesColumnControl extends React.Component {
   constructor(props) {
     super(props);
@@ -128,19 +141,15 @@ export default class TimeSeriesColumnControl extends React.Component {
 
   formRow(label, tooltip, ttLabel, control) {
     return (
-      <Row style={{ marginTop: '5px' }}>
-        <Col xs={24} md={10}>
-          {`${label} `}
-          <InfoTooltipWithTrigger
-            placement="top"
-            tooltip={tooltip}
-            label={ttLabel}
-          />
-        </Col>
-        <Col xs={24} md={14}>
+      <StyledRow>
+        <StyledCol xs={24} md={10}>
+          {label}
+          <StyledTooltip placement="top" tooltip={tooltip} label={ttLabel} />
+        </StyledCol>
+        <StyledCol xs={24} md={14}>
           {control}
-        </Col>
-      </Row>
+        </StyledCol>
+      </StyledRow>
     );
   }
 
@@ -151,10 +160,9 @@ export default class TimeSeriesColumnControl extends React.Component {
           'Label',
           'The column header label',
           'time-lag',
-          <FormControl
+          <Input
             value={this.state.label}
             onChange={this.onTextInputChange.bind(this, 'label')}
-            bsSize="small"
             placeholder="Label"
           />,
         )}
@@ -162,10 +170,9 @@ export default class TimeSeriesColumnControl extends React.Component {
           'Tooltip',
           'Column header tooltip',
           'col-tooltip',
-          <FormControl
+          <Input
             value={this.state.tooltip}
             onChange={this.onTextInputChange.bind(this, 'tooltip')}
-            bsSize="small"
             placeholder="Tooltip"
           />,
         )}
@@ -186,10 +193,9 @@ export default class TimeSeriesColumnControl extends React.Component {
             'Width',
             'Width of the sparkline',
             'spark-width',
-            <FormControl
+            <Input
               value={this.state.width}
               onChange={this.onTextInputChange.bind(this, 'width')}
-              bsSize="small"
               placeholder="Width"
             />,
           )}
@@ -198,10 +204,9 @@ export default class TimeSeriesColumnControl extends React.Component {
             'Height',
             'Height of the sparkline',
             'spark-width',
-            <FormControl
+            <Input
               value={this.state.height}
               onChange={this.onTextInputChange.bind(this, 'height')}
-              bsSize="small"
               placeholder="Height"
             />,
           )}
@@ -210,10 +215,9 @@ export default class TimeSeriesColumnControl extends React.Component {
             'Time lag',
             'Number of periods to compare against',
             'time-lag',
-            <FormControl
+            <Input
               value={this.state.timeLag}
               onChange={this.onTextInputChange.bind(this, 'timeLag')}
-              bsSize="small"
               placeholder="Time Lag"
             />,
           )}
@@ -222,10 +226,9 @@ export default class TimeSeriesColumnControl extends React.Component {
             'Time ratio',
             'Number of periods to ratio against',
             'time-ratio',
-            <FormControl
+            <Input
               value={this.state.timeRatio}
               onChange={this.onTextInputChange.bind(this, 'timeRatio')}
-              bsSize="small"
               placeholder="Time Ratio"
             />,
           )}
@@ -277,10 +280,9 @@ export default class TimeSeriesColumnControl extends React.Component {
           'Number format',
           'Optional d3 number format string',
           'd3-format',
-          <FormControl
+          <Input
             value={this.state.d3format}
             onChange={this.onTextInputChange.bind(this, 'd3format')}
-            bsSize="small"
             placeholder="Number format string"
           />,
         )}
@@ -289,10 +291,9 @@ export default class TimeSeriesColumnControl extends React.Component {
             'Date format',
             'Optional d3 date format string',
             'date-format',
-            <FormControl
+            <Input
               value={this.state.dateFormat}
               onChange={this.onTextInputChange.bind(this, 'dateFormat')}
-              bsSize="small"
               placeholder="Date format string"
             />,
           )}