chore: wiring ControlLabel to a new FormLabel (#10388)

* chore: wiring ControlLabel to a new FormLabel

Creating new simple <FormLabel /> component and wiring all <label>
and react-bootstrap.ControlLabel towards it.

FormLabel becomes a pivotal point that can be altered to point to AntD
when we're ready.

* lint

* ViewportControl

* addressing comments

superset-frontend/src/explore/components/AdhocMetricEditPopover.jsx

@@ -18,14 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  Button,
-  ControlLabel,
-  FormGroup,
-  Popover,
-  Tab,
-  Tabs,
-} from 'react-bootstrap';
+import { Button, FormGroup, Popover, Tab, Tabs } from 'react-bootstrap';
 import Select from 'src/components/Select';
 import ace from 'brace';
 import AceEditor from 'react-ace';
@@ -35,6 +28,8 @@ import 'brace/ext/language_tools';
 import { t } from '@superset-ui/translation';
 import { ColumnOption } from '@superset-ui/chart-controls';
 
+import FormLabel from 'src/components/FormLabel';
+
 import { AGGREGATES_OPTIONS } from '../constants';
 import AdhocMetricEditPopoverTitle from './AdhocMetricEditPopoverTitle';
 import columnType from '../propTypes/columnType';
@@ -251,9 +246,9 @@ export default class AdhocMetricEditPopover extends React.Component {
             title="Simple"
           >
             <FormGroup>
-              <ControlLabel>
+              <FormLabel>
                 <strong>column</strong>
-              </ControlLabel>
+              </FormLabel>
               <Select
                 name="select-column"
                 {...this.selectProps}
@@ -261,9 +256,9 @@ export default class AdhocMetricEditPopover extends React.Component {
               />
             </FormGroup>
             <FormGroup>
-              <ControlLabel>
+              <FormLabel>
                 <strong>aggregate</strong>
-              </ControlLabel>
+              </FormLabel>
               <Select
                 name="select-aggregate"
                 {...this.selectProps}

superset-frontend/src/explore/components/ControlHeader.jsx

@@ -19,8 +19,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { t } from '@superset-ui/translation';
-import { ControlLabel, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
+import FormLabel from 'src/components/FormLabel';
 
 const propTypes = {
   name: PropTypes.string,
@@ -83,7 +84,7 @@ export default class ControlHeader extends React.Component {
     return (
       <div className="ControlHeader" data-test={`${this.props.name}-header`}>
         <div className="pull-left">
-          <ControlLabel>
+          <FormLabel>
             {this.props.leftNode && <span>{this.props.leftNode}</span>}
             <span
               role="button"
@@ -133,7 +134,7 @@ export default class ControlHeader extends React.Component {
               </span>
             )}
             {this.renderOptionalIcons()}
-          </ControlLabel>
+          </FormLabel>
         </div>
         {this.props.rightNode && (
           <div className="pull-right">{this.props.rightNode}</div>

superset-frontend/src/explore/components/EmbedCodeButton.jsx

@@ -21,7 +21,8 @@ import PropTypes from 'prop-types';
 import { Popover, OverlayTrigger } from 'react-bootstrap';
 import { t } from '@superset-ui/translation';
 
-import CopyToClipboard from './../../components/CopyToClipboard';
+import FormLabel from 'src/components/FormLabel';
+import CopyToClipboard from 'src/components/CopyToClipboard';
 import { getExploreLongUrl } from '../exploreUtils';
 
 const propTypes = {
@@ -97,9 +98,7 @@ export default class EmbedCodeButton extends React.Component {
             <div className="col-md-6 col-sm-12">
               <div className="form-group">
                 <small>
-                  <label className="control-label" htmlFor="embed-height">
-                    {t('Height')}
-                  </label>
+                  <FormLabel htmlFor="embed-height">{t('Height')}</FormLabel>
                 </small>
                 <input
                   className="form-control input-sm"
@@ -113,9 +112,7 @@ export default class EmbedCodeButton extends React.Component {
             <div className="col-md-6 col-sm-12">
               <div className="form-group">
                 <small>
-                  <label className="control-label" htmlFor="embed-width">
-                    {t('Width')}
-                  </label>
+                  <FormLabel htmlFor="embed-width">{t('Width')}</FormLabel>
                 </small>
                 <input
                   className="form-control input-sm"

superset-frontend/src/explore/components/PropertiesModal.tsx

@@ -34,6 +34,7 @@ import rison from 'rison';
 import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/connection';
 import Chart from 'src/types/Chart';
+import FormLabel from 'src/components/FormLabel';
 import getClientErrorObject from '../../utils/getClientErrorObject';
 
 export type Slice = {
@@ -182,9 +183,9 @@ function PropertiesModal({ slice, onHide, onSave }: InternalProps) {
           <Col md={6}>
             <h3>{t('Basic Information')}</h3>
             <FormGroup>
-              <label className="control-label" htmlFor="name">
+              <FormLabel htmlFor="name" required>
                 {t('Name')}
-              </label>
+              </FormLabel>
               <FormControl
                 name="name"
                 type="text"
@@ -197,9 +198,7 @@ function PropertiesModal({ slice, onHide, onSave }: InternalProps) {
               />
             </FormGroup>
             <FormGroup>
-              <label className="control-label" htmlFor="description">
-                {t('Description')}
-              </label>
+              <FormLabel htmlFor="description">{t('Description')}</FormLabel>
               <FormControl
                 name="description"
                 type="text"
@@ -222,9 +221,7 @@ function PropertiesModal({ slice, onHide, onSave }: InternalProps) {
           <Col md={6}>
             <h3>{t('Configuration')}</h3>
             <FormGroup>
-              <label className="control-label" htmlFor="cacheTimeout">
-                {t('Cache Timeout')}
-              </label>
+              <FormLabel htmlFor="cacheTimeout">{t('Cache Timeout')}</FormLabel>
               <FormControl
                 name="cacheTimeout"
                 type="text"
@@ -243,9 +240,7 @@ function PropertiesModal({ slice, onHide, onSave }: InternalProps) {
             </FormGroup>
             <h3 style={{ marginTop: '1em' }}>{t('Access')}</h3>
             <FormGroup>
-              <label className="control-label" htmlFor="owners">
-                {t('Owners')}
-              </label>
+              <FormLabel htmlFor="owners">{t('Owners')}</FormLabel>
               <AsyncSelect
                 isMulti
                 name="owners"

superset-frontend/src/explore/components/controls/ViewportControl.jsx

@@ -21,6 +21,7 @@ import PropTypes from 'prop-types';
 import { Label, Popover, OverlayTrigger } from 'react-bootstrap';
 import { decimal2sexagesimal } from 'geolib';
 
+import FormLabel from 'src/components/FormLabel';
 import TextControl from './TextControl';
 import ControlHeader from '../ControlHeader';
 
@@ -67,7 +68,7 @@ export default class ViewportControl extends React.Component {
   renderTextControl(ctrl) {
     return (
       <div key={ctrl}>
-        {ctrl}
+        <FormLabel>{ctrl}</FormLabel>
         <TextControl
           value={this.props.value[ctrl]}
           onChange={this.onChange.bind(this, ctrl)}