Make executeonload a switch and move it to the right (#221)

- Move all form labels to the their individual components

app/client/src/components/formControls/DropDownControl.tsx

@@ -7,6 +7,7 @@ import DropdownField from "components/editorComponents/form/fields/DropdownField
 import { DropdownOption } from "widgets/DropdownWidget";
 import { ControlType } from "constants/PropertyControlConstants";
 import { theme } from "constants/DefaultTheme";
+import FormLabel from "components/editorComponents/FormLabel";
 
 const DropdownSelect = styled.div`
   font-size: 14px;
@@ -39,18 +40,23 @@ const customSelectStyles = {
 
 class DropDownControl extends BaseControl<DropDownControlProps> {
   render() {
-    const { configProperty, options } = this.props;
+    const { configProperty, options, label, isRequired } = this.props;
 
     return (
-      <DropdownSelect data-cy={configProperty}>
-        <DropdownField
-          placeholder=""
-          name={configProperty}
-          options={options}
-          customSelectStyles={customSelectStyles}
-          width={"50vh"}
-        />
-      </DropdownSelect>
+      <div>
+        <FormLabel>
+          {label} {isRequired && "*"}
+        </FormLabel>
+        <DropdownSelect data-cy={configProperty}>
+          <DropdownField
+            placeholder=""
+            name={configProperty}
+            options={options}
+            customSelectStyles={customSelectStyles}
+            width={"50vh"}
+          />
+        </DropdownSelect>
+      </div>
     );
   }
 

app/client/src/components/formControls/FilePickerControl.tsx

@@ -10,6 +10,7 @@ import Dashboard from "@uppy/dashboard";
 import { BaseButton } from "components/designSystems/blueprint/ButtonComponent";
 import BaseControl, { ControlProps } from "./BaseControl";
 import { ControlType } from "constants/PropertyControlConstants";
+import FormLabel from "components/editorComponents/FormLabel";
 
 const StyledDiv = styled.div`
   flex: 1;
@@ -120,10 +121,13 @@ class FilePickerControl extends BaseControl<FilePickerControlProps> {
   }
 
   render() {
-    const { configProperty } = this.props;
+    const { configProperty, label, isRequired } = this.props;
 
     return (
       <React.Fragment>
+        <FormLabel>
+          {label} {isRequired && "*"}
+        </FormLabel>
         <Field name={configProperty} component={FieldFileInput} />
       </React.Fragment>
     );

app/client/src/components/formControls/InputTextControl.tsx

@@ -3,6 +3,7 @@ import BaseControl, { ControlProps } from "./BaseControl";
 import { InputType } from "widgets/InputWidget";
 import { ControlType } from "constants/PropertyControlConstants";
 import TextField from "components/editorComponents/form/fields/TextField";
+import FormLabel from "components/editorComponents/FormLabel";
 
 export function InputText(props: {
   label: string;
@@ -14,10 +15,13 @@ export function InputText(props: {
   isRequired?: boolean;
   name: string;
 }) {
-  const { name, placeholder, dataType } = props;
+  const { name, placeholder, dataType, label, isRequired } = props;
 
   return (
     <div style={{ width: "50vh" }}>
+      <FormLabel>
+        {label} {isRequired && "*"}
+      </FormLabel>
       <TextField
         name={name}
         placeholder={placeholder}

app/client/src/components/formControls/KeyValueInputControl.tsx

@@ -6,6 +6,7 @@ import { FormIcons } from "icons/FormIcons";
 import BaseControl, { ControlProps, ControlData } from "./BaseControl";
 import TextField from "components/editorComponents/form/fields/TextField";
 import { ControlType } from "constants/PropertyControlConstants";
+import FormLabel from "components/editorComponents/FormLabel";
 
 const FormRowWithLabel = styled.div`
   display: flex;
@@ -30,6 +31,9 @@ const KeyValueRow = (props: Props & WrappedFieldArrayProps) => {
     <div>
       {typeof props.fields.getAll() === "object" && (
         <div>
+          <FormLabel>
+            {props.label} {props.isRequired && "*"}
+          </FormLabel>
           {props.fields.map((field: any, index: number) => (
             <FormRowWithLabel key={index} style={{ marginTop: index ? 13 : 0 }}>
               <div style={{ width: "50vh" }}>

app/client/src/components/formControls/SwitchControl.tsx

@@ -4,29 +4,38 @@ import { StyledSwitch } from "./StyledControls";
 import { ControlType } from "constants/PropertyControlConstants";
 import FormLabel from "components/editorComponents/FormLabel";
 import { Field, WrappedFieldProps } from "redux-form";
+import styled from "styled-components";
 
 type Props = WrappedFieldProps & SwitchControlProps;
 
-class SwitchField extends React.Component<Props> {
+const StyledFormLabel = styled(FormLabel)`
+  margin-bottom: 0px;
+`;
+
+const SwitchWrapped = styled.div`
+  flex-direction: row;
+  display: flex;
+  align-items: center;
+  .bp3-control {
+    margin-bottom: 0px;
+  }
+`;
+
+export class SwitchField extends React.Component<Props> {
   render() {
     const { label, isRequired, input } = this.props;
 
     return (
-      <div
-        style={{
-          flexDirection: "row",
-          display: "flex",
-        }}
-      >
-        <FormLabel>
+      <SwitchWrapped>
+        <StyledFormLabel>
           {label} {isRequired && "*"}
-        </FormLabel>
+        </StyledFormLabel>
         <StyledSwitch
           checked={input.value}
           onChange={value => input.onChange(value)}
           large
         />
-      </div>
+      </SwitchWrapped>
     );
   }
 }

app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx

@@ -6,7 +6,6 @@ import { Spinner } from "@blueprintjs/core";
 import { DATA_SOURCES_EDITOR_URL } from "constants/routes";
 import Collapsible from "./Collapsible";
 import history from "utils/history";
-import FormLabel from "components/editorComponents/FormLabel";
 import { Icon } from "@blueprintjs/core";
 import FormTitle from "./FormTitle";
 import { ControlProps } from "components/formControls/BaseControl";
@@ -54,7 +53,6 @@ const DBForm = styled.div`
   margin-right: 0px;
   max-height: 93vh;
   overflow: auto;
-
   .backBtn {
     padding-bottom: 1px;
     cursor: pointer;
@@ -391,7 +389,6 @@ class DatasourceDBEditor extends React.Component<
             } else {
               try {
                 const {
-                  label,
                   controlType,
                   isRequired,
                   configProperty,
@@ -418,12 +415,6 @@ class DatasourceDBEditor extends React.Component<
 
                 return (
                   <div key={configProperty} style={{ marginTop: "16px" }}>
-                    {controlType !== "KEYVALUE_ARRAY" &&
-                      controlType !== "SWITCH" && (
-                        <FormLabel>
-                          {label} {isRequired && "*"}
-                        </FormLabel>
-                      )}
                     {FormControlFactory.createControl(
                       config,
                       {},

app/client/src/pages/Editor/QueryEditor/Form.tsx

@@ -1,6 +1,10 @@
 import React, { useState } from "react";
-import { formValueSelector, InjectedFormProps, reduxForm } from "redux-form";
-import CheckboxField from "components/editorComponents/form/fields/CheckboxField";
+import {
+  formValueSelector,
+  InjectedFormProps,
+  reduxForm,
+  Field,
+} from "redux-form";
 import styled, { createGlobalStyle } from "styled-components";
 import { Icon, Popover } from "@blueprintjs/core";
 import {
@@ -37,6 +41,7 @@ import {
   getPluginResponseTypes,
   getPluginDocumentationLinks,
 } from "selectors/entitiesSelector";
+import { SwitchField } from "components/formControls/SwitchControl";
 
 const QueryFormContainer = styled.div`
   padding: 20px 32px;
@@ -76,6 +81,12 @@ const QueryFormContainer = styled.div`
   span.bp3-popover-target {
     display: initial !important;
   }
+
+  .executeOnLoad {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 10px;
+  }
 `;
 
 const ActionButtons = styled.div`
@@ -185,13 +196,6 @@ const Container = styled.div`
   }
 `;
 
-const StyledCheckbox = styled(CheckboxField)`
-  &&& {
-    font-size: 14px;
-    margin-top: 10px;
-  }
-`;
-
 const StyledOpenDocsIcon = styled(Icon)`
   svg {
     width: 12px;
@@ -460,12 +464,13 @@ const QueryEditorForm: React.FC<Props> = (props: Props) => {
             />
           </div>
         )}
-        <StyledCheckbox
-          intent="primary"
-          name="executeOnLoad"
-          align="left"
-          label="Run on Page Load"
-        />
+        <div className="executeOnLoad">
+          <Field
+            name="executeOnLoad"
+            component={SwitchField}
+            label={"Run on Page Load"}
+          />
+        </div>
       </form>
 
       {dataSources.length === 0 && (