diff --git a/app/client/src/components/formControls/DropDownControl.tsx b/app/client/src/components/formControls/DropDownControl.tsx index fde31f183b..3020ecfb03 100644 --- a/app/client/src/components/formControls/DropDownControl.tsx +++ b/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 { render() { - const { configProperty, options } = this.props; + const { configProperty, options, label, isRequired } = this.props; return ( - - - +
+ + {label} {isRequired && "*"} + + + + +
); } diff --git a/app/client/src/components/formControls/FilePickerControl.tsx b/app/client/src/components/formControls/FilePickerControl.tsx index 3050bcf8c3..19537e3983 100644 --- a/app/client/src/components/formControls/FilePickerControl.tsx +++ b/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 { } render() { - const { configProperty } = this.props; + const { configProperty, label, isRequired } = this.props; return ( + + {label} {isRequired && "*"} + ); diff --git a/app/client/src/components/formControls/InputTextControl.tsx b/app/client/src/components/formControls/InputTextControl.tsx index 47cf7e3833..e9ef0600b6 100644 --- a/app/client/src/components/formControls/InputTextControl.tsx +++ b/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 (
+ + {label} {isRequired && "*"} + {
{typeof props.fields.getAll() === "object" && (
+ + {props.label} {props.isRequired && "*"} + {props.fields.map((field: any, index: number) => (
diff --git a/app/client/src/components/formControls/SwitchControl.tsx b/app/client/src/components/formControls/SwitchControl.tsx index 201ca683d0..4697011339 100644 --- a/app/client/src/components/formControls/SwitchControl.tsx +++ b/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 { +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 { render() { const { label, isRequired, input } = this.props; return ( -
- + + {label} {isRequired && "*"} - + input.onChange(value)} large /> -
+ ); } } diff --git a/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx b/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx index abc38c6606..8d991f3a9a 100644 --- a/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx +++ b/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 (
- {controlType !== "KEYVALUE_ARRAY" && - controlType !== "SWITCH" && ( - - {label} {isRequired && "*"} - - )} {FormControlFactory.createControl( config, {}, diff --git a/app/client/src/pages/Editor/QueryEditor/Form.tsx b/app/client/src/pages/Editor/QueryEditor/Form.tsx index 419868ff84..f05186bd8c 100644 --- a/app/client/src/pages/Editor/QueryEditor/Form.tsx +++ b/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) => { />
)} - +
+ +
{dataSources.length === 0 && (