From 152b0d0575bfb3cf7e5fcdcea54eeb9ddc09ad01 Mon Sep 17 00:00:00 2001
From: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com>
Date: Wed, 19 May 2021 14:04:09 -0700
Subject: [PATCH] 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.jsx          | 93 -------------------
 superset-frontend/src/CRUD/Field.tsx          | 91 ++++++++++++++++++
 .../src/components/Form/FormItem.tsx          |  7 +-
 .../src/datasource/DatasourceEditor.jsx       |  1 +
 4 files changed, 94 insertions(+), 98 deletions(-)
 delete mode 100644 superset-frontend/src/CRUD/Field.jsx
 create mode 100644 superset-frontend/src/CRUD/Field.tsx

diff --git a/superset-frontend/src/CRUD/Field.jsx b/superset-frontend/src/CRUD/Field.jsx
deleted file mode 100644
index ca8c3f7082..0000000000
--- a/superset-frontend/src/CRUD/Field.jsx
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * 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 from 'react';
-import PropTypes from 'prop-types';
-import { Tooltip } from 'src/components/Tooltip';
-import { FormItem, FormLabel } from 'src/components/Form';
-import './crud.less';
-
-const propTypes = {
-  value: PropTypes.any,
-  label: PropTypes.string.isRequired,
-  description: PropTypes.node,
-  fieldKey: PropTypes.string.isRequired,
-  control: PropTypes.node.isRequired,
-  onChange: PropTypes.func,
-  compact: PropTypes.bool,
-};
-const defaultProps = {
-  onChange: () => {},
-  compact: false,
-  description: null,
-};
-
-export default class Field extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.onChange = this.onChange.bind(this);
-  }
-
-  onChange(newValue) {
-    this.props.onChange(this.props.fieldKey, newValue);
-  }
-
-  render() {
-    const {
-      compact,
-      value,
-      label,
-      control,
-      description,
-      fieldKey,
-    } = this.props;
-    const hookedControl = React.cloneElement(control, {
-      value,
-      onChange: this.onChange,
-    });
-    return (
-      <FormItem
-        controlId={fieldKey}
-        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>
-        }
-      >
-        {hookedControl}
-        {!compact && description && (
-          <div
-            css={theme => ({
-              color: theme.colors.grayscale.base,
-              marginTop: theme.gridUnit,
-            })}
-          >
-            {description}
-          </div>
-        )}
-      </FormItem>
-    );
-  }
-}
-Field.propTypes = propTypes;
-Field.defaultProps = defaultProps;
diff --git a/superset-frontend/src/CRUD/Field.tsx b/superset-frontend/src/CRUD/Field.tsx
new file mode 100644
index 0000000000..942b870f7d
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/superset-frontend/src/components/Form/FormItem.tsx b/superset-frontend/src/components/Form/FormItem.tsx
index 380bb13a46..ab301a883e 100644
--- a/superset-frontend/src/components/Form/FormItem.tsx
+++ b/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;
diff --git a/superset-frontend/src/datasource/DatasourceEditor.jsx b/superset-frontend/src/datasource/DatasourceEditor.jsx
index 89ee4283d9..8cf17e550a 100644
--- a/superset-frontend/src/datasource/DatasourceEditor.jsx
+++ b/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')}