chore: wiring ControlLabel to a new FormLabel (apache#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
auxten · Nov 20, 2020 · bb813c4 · bb813c4
1 parent a1604e3
commit bb813c4
Show file tree

Hide file tree

Showing 16 changed files with 113 additions and 70 deletions.
diff --git a/superset-frontend/src/CRUD/Field.jsx b/superset-frontend/src/CRUD/Field.jsx
@@ -20,13 +20,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {
   FormGroup,
-  ControlLabel,
   HelpBlock,
   FormControl,
   OverlayTrigger,
   Tooltip,
 } from 'react-bootstrap';
 
+import FormLabel from 'src/components/FormLabel';
 import './crud.less';
 
 const propTypes = {
@@ -61,7 +61,7 @@ export default class Field extends React.PureComponent {
     });
     return (
       <FormGroup controlId={fieldKey}>
-        <ControlLabel className="m-r-5">
+        <FormLabel className="m-r-5">
           {label || fieldKey}
           {compact && descr && (
             <OverlayTrigger
@@ -75,7 +75,7 @@ export default class Field extends React.PureComponent {
               <i className="fa fa-info-circle m-l-5" />
             </OverlayTrigger>
           )}
-        </ControlLabel>
+        </FormLabel>
         {hookedControl}
         <FormControl.Feedback />
         {!compact && descr && <HelpBlock>{descr}</HelpBlock>}

diff --git a/superset-frontend/src/SqlLab/components/SaveQuery.jsx b/superset-frontend/src/SqlLab/components/SaveQuery.jsx
@@ -21,8 +21,9 @@ import PropTypes from 'prop-types';
 import { FormControl, FormGroup, Row, Col } from 'react-bootstrap';
 import { t } from '@superset-ui/translation';
 
-import Button from '../../components/Button';
-import ModalTrigger from '../../components/ModalTrigger';
+import Button from 'src/components/Button';
+import FormLabel from 'src/components/FormLabel';
+import ModalTrigger from 'src/components/ModalTrigger';
 
 const propTypes = {
   query: PropTypes.object,
@@ -91,9 +92,9 @@ class SaveQuery extends React.PureComponent {
         <Row>
           <Col md={12}>
             <small>
-              <label className="control-label" htmlFor="embed-height">
+              <FormLabel className="control-label" htmlFor="embed-height">
                 {t('Label')}
-              </label>
+              </FormLabel>
             </small>
             <FormControl
               type="text"
@@ -107,9 +108,9 @@ class SaveQuery extends React.PureComponent {
         <Row>
           <Col md={12}>
             <small>
-              <label className="control-label" htmlFor="embed-height">
+              <FormLabel className="control-label" htmlFor="embed-height">
                 {t('Description')}
-              </label>
+              </FormLabel>
             </small>
             <FormControl
               componentClass="textarea"

diff --git a/superset-frontend/src/SqlLab/components/ScheduleQueryButton.jsx b/superset-frontend/src/SqlLab/components/ScheduleQueryButton.jsx
@@ -23,8 +23,9 @@ import chrono from 'chrono-node';
 import { Col, FormControl, FormGroup, Row } from 'react-bootstrap';
 import { t } from '@superset-ui/translation';
 
-import Button from '../../components/Button';
-import ModalTrigger from '../../components/ModalTrigger';
+import Button from 'src/components/Button';
+import ModalTrigger from 'src/components/ModalTrigger';
+import FormLabel from 'src/components/FormLabel';
 import './ScheduleQueryButton.less';
 
 const validators = {
@@ -134,9 +135,9 @@ class ScheduleQueryButton extends React.PureComponent {
       <FormGroup>
         <Row style={{ paddingBottom: '10px' }}>
           <Col md={12}>
-            <label className="control-label" htmlFor="embed-height">
+            <FormLabel className="control-label" htmlFor="embed-height">
               {t('Label')}
-            </label>
+            </FormLabel>
             <FormControl
               type="text"
               placeholder={t('Label for your query')}
@@ -147,9 +148,9 @@ class ScheduleQueryButton extends React.PureComponent {
         </Row>
         <Row style={{ paddingBottom: '10px' }}>
           <Col md={12}>
-            <label className="control-label" htmlFor="embed-height">
+            <FormLabel className="control-label" htmlFor="embed-height">
               {t('Description')}
-            </label>
+            </FormLabel>
             <FormControl
               componentClass="textarea"
               placeholder={t('Write a description for your query')}

diff --git a/superset-frontend/src/components/DeleteModal.tsx b/superset-frontend/src/components/DeleteModal.tsx
@@ -21,6 +21,7 @@ import React, { useState } from 'react';
 import styled from '@superset-ui/style';
 import { FormGroup, FormControl } from 'react-bootstrap';
 import Modal from 'src/components/Modal';
+import FormLabel from 'src/components/FormLabel';
 
 const StyleFormGroup = styled(FormGroup)`
   padding-top: 8px;
@@ -66,14 +67,14 @@ export default function DeleteModal({
     >
       <DescriptionContainer>{description}</DescriptionContainer>
       <StyleFormGroup>
-        <label htmlFor="delete">{t('type delete to confirm')}</label>
+        <FormLabel htmlFor="delete">{t('type "delete" to confirm')}</FormLabel>
         <FormControl
           id="delete"
           type="text"
           bsSize="sm"
           // @ts-ignore
           onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-            setDisableChange(event.target.value !== 'DELETE')
+            setDisableChange(event.target.value.toUpperCase() !== 'DELETE')
           }
         />
       </StyleFormGroup>

diff --git a/superset-frontend/src/components/FormLabel.tsx b/superset-frontend/src/components/FormLabel.tsx
@@ -0,0 +1,46 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+// import styled from '@superset-ui/style';
+import React, { ReactNode } from 'react';
+import { ControlLabel } from 'react-bootstrap';
+
+export type FormLabelProps = {
+  children: ReactNode;
+  htmlFor?: string;
+  required?: boolean;
+};
+
+export default function FormLabel({
+  children,
+  htmlFor,
+  required = false,
+}: FormLabelProps) {
+  return (
+    <>
+      <ControlLabel htmlFor={htmlFor}>
+        {children}
+        {required && (
+          <span className="text-danger m-l-4">
+            <strong>*</strong>
+          </span>
+        )}
+      </ControlLabel>
+    </>
+  );
+}
diff --git a/superset-frontend/src/components/TableSelector.jsx b/superset-frontend/src/components/TableSelector.jsx
@@ -21,10 +21,12 @@ import styled from '@superset-ui/style';
 import PropTypes from 'prop-types';
 import rison from 'rison';
 import { Select, AsyncSelect } from 'src/components/Select';
-import { ControlLabel, Label } from 'react-bootstrap';
+import { Label } from 'react-bootstrap';
 import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/connection';
 
+import FormLabel from 'src/components/FormLabel';
+
 import SupersetAsyncSelect from './AsyncSelect';
 import RefreshLabel from './RefreshLabel';
 import './TableSelector.less';
@@ -393,14 +395,14 @@ export default class TableSelector extends React.PureComponent {
   renderSeeTableLabel() {
     return (
       <div className="section">
-        <ControlLabel>
+        <FormLabel>
           {t('See table schema')}{' '}
           {this.props.schema && (
             <small>
               ({this.state.tableOptions.length} in <i>{this.props.schema}</i>)
             </small>
           )}
-        </ControlLabel>
+        </FormLabel>
       </div>
     );
   }

diff --git a/superset-frontend/src/dashboard/components/FilterIndicatorTooltip.jsx b/superset-frontend/src/dashboard/components/FilterIndicatorTooltip.jsx
@@ -20,6 +20,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { t } from '@superset-ui/translation';
 import { isEmpty } from 'lodash';
+import FormLabel from 'src/components/FormLabel';
 
 const propTypes = {
   label: PropTypes.string.isRequired,
@@ -41,7 +42,7 @@ export default function FilterIndicatorTooltip({
   return (
     <div className="tooltip-item">
       <div className="filter-content">
-        <label htmlFor={`filter-tooltip-${label}`}>{label}:</label>
+        <FormLabel htmlFor={`filter-tooltip-${label}`}>{label}:</FormLabel>
         <span> {displayValue}</span>
       </div>
 

diff --git a/superset-frontend/src/dashboard/components/PropertiesModal.jsx b/superset-frontend/src/dashboard/components/PropertiesModal.jsx
@@ -25,10 +25,11 @@ import AceEditor from 'react-ace';
 import rison from 'rison';
 import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/connection';
-import '../stylesheets/buttons.less';
 
+import FormLabel from 'src/components/FormLabel';
 import getClientErrorObject from '../../utils/getClientErrorObject';
 import withToasts from '../../messageToasts/enhancers/withToasts';
+import '../stylesheets/buttons.less';
 
 const propTypes = {
   dashboardId: PropTypes.number.isRequired,
@@ -202,9 +203,7 @@ class PropertiesModal extends React.PureComponent {
             </Row>
             <Row>
               <Col md={6}>
-                <label className="control-label" htmlFor="embed-height">
-                  {t('Title')}
-                </label>
+                <FormLabel htmlFor="embed-height">{t('Title')}</FormLabel>
                 <FormControl
                   name="dashboard_title"
                   type="text"
@@ -215,9 +214,7 @@ class PropertiesModal extends React.PureComponent {
                 />
               </Col>
               <Col md={6}>
-                <label className="control-label" htmlFor="embed-height">
-                  {t('URL Slug')}
-                </label>
+                <FormLabel htmlFor="embed-height">{t('URL Slug')}</FormLabel>
                 <FormControl
                   name="slug"
                   type="text"
@@ -234,9 +231,7 @@ class PropertiesModal extends React.PureComponent {
             <Row>
               <Col md={6}>
                 <h3 style={{ marginTop: '1em' }}>{t('Access')}</h3>
-                <label className="control-label" htmlFor="owners">
-                  {t('Owners')}
-                </label>
+                <FormLabel htmlFor="owners">{t('Owners')}</FormLabel>
                 <AsyncSelect
                   name="owners"
                   isMulti
@@ -274,9 +269,9 @@ class PropertiesModal extends React.PureComponent {
                 </h3>
                 {isAdvancedOpen && (
                   <>
-                    <label className="control-label" htmlFor="json_metadata">
+                    <FormLabel htmlFor="json_metadata">
                       {t('JSON Metadata')}
-                    </label>
+                    </FormLabel>
                     <AceEditor
                       mode="json"
                       name="json_metadata"

diff --git a/superset-frontend/src/dashboard/components/filterscope/FilterFieldItem.jsx b/superset-frontend/src/dashboard/components/filterscope/FilterFieldItem.jsx
@@ -20,7 +20,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 
-import FilterBadgeIcon from '../../../components/FilterBadgeIcon';
+import FormLabel from 'src/components/FormLabel';
+import FilterBadgeIcon from 'src/components/FilterBadgeIcon';
 
 const propTypes = {
   label: PropTypes.string.isRequired,
@@ -36,7 +37,7 @@ export default function FilterFieldItem({ label, colorCode, isSelected }) {
       })}
     >
       <FilterBadgeIcon colorCode={colorCode} />
-      <label htmlFor={label}>{label}</label>
+      <FormLabel htmlFor={label}>{label}</FormLabel>
     </a>
   );
 }

diff --git a/superset-frontend/src/explore/components/AdhocMetricEditPopover.jsx b/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,19 +246,19 @@ export default class AdhocMetricEditPopover extends React.Component {
             title="Simple"
           >
             <FormGroup>
-              <ControlLabel>
+              <FormLabel>
                 <strong>column</strong>
-              </ControlLabel>
+              </FormLabel>
               <Select
                 name="select-column"
                 {...this.selectProps}
                 {...columnSelectProps}
               />
             </FormGroup>
             <FormGroup>
-              <ControlLabel>
+              <FormLabel>
                 <strong>aggregate</strong>
-              </ControlLabel>
+              </FormLabel>
               <Select
                 name="select-aggregate"
                 {...this.selectProps}

diff --git a/superset-frontend/src/explore/components/ControlHeader.jsx b/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>