fix(explore): checkbox form control formatting (#14701)

* fix(explore): add inline option for the field that only gets used in one place

* typescriptify

* unnecessary component wrapping

superset-frontend/src/CRUD/Field.tsx

@@ -0,0 +1,91 @@
+/**
+ * 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 React, { useCallback } from 'react';
+import { css, SupersetTheme } from '@superset-ui/core';
+import { Tooltip } from 'src/components/Tooltip';
+import { FormItem, FormLabel } from 'src/components/Form';
+import './crud.less';
+
+const formItemInlineCss = css`
+  .ant-form-item-control-input-content {
+    display: flex;
+    flex-direction: row;
+  }
+`;
+
+interface FieldProps<V> {
+  fieldKey: string;
+  value?: V;
+  label: string;
+  description?: React.ReactNode;
+  control: React.ReactElement;
+  onChange: (fieldKey: string, newValue: V) => void;
+  compact: boolean;
+  inline: boolean;
+}
+
+export default function Field<V>({
+  fieldKey,
+  value,
+  label,
+  description,
+  control,
+  onChange,
+  compact,
+  inline,
+}: FieldProps<V>) {
+  const onControlChange = useCallback(
+    newValue => {
+      onChange(fieldKey, newValue);
+    },
+    [onChange, fieldKey],
+  );
+
+  const hookedControl = React.cloneElement(control, {
+    value,
+    onChange: onControlChange,
+  });
+  return (
+    <FormItem
+      label={
+        <FormLabel className="m-r-5">
+          {label || fieldKey}
+          {compact && description && (
+            <Tooltip id="field-descr" placement="right" title={description}>
+              <i className="fa fa-info-circle m-l-5" />
+            </Tooltip>
+          )}
+        </FormLabel>
+      }
+      css={inline && formItemInlineCss}
+    >
+      {hookedControl}
+      {!compact && description && (
+        <div
+          css={(theme: SupersetTheme) => ({
+            color: theme.colors.grayscale.base,
+            [inline ? 'marginLeft' : 'marginTop']: theme.gridUnit,
+          })}
+        >
+          {description}
+        </div>
+      )}
+    </FormItem>
+  );
+}

superset-frontend/src/components/Form/FormItem.tsx

@@ -16,8 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
-import Form, { FormItemProps } from 'antd/lib/form';
+import Form from 'antd/lib/form';
 import { styled } from '@superset-ui/core';
 
 const StyledItem = styled(Form.Item)`
@@ -45,6 +44,4 @@ const StyledItem = styled(Form.Item)`
   `}
 `;
 
-export default function FormItem(props: FormItemProps) {
-  return <StyledItem {...props} />;
-}
+export default StyledItem;

superset-frontend/src/datasource/DatasourceEditor.jsx

@@ -548,6 +548,7 @@ class DatasourceEditor extends React.PureComponent {
           control={<TextControl controlId="default_endpoint" />}
         />
         <Field
+          inline
           fieldKey="filter_select_enabled"
           label={t('Autocomplete filters')}
           description={t('Whether to populate autocomplete filters options')}