diff --git a/app/client/src/components/formControls/FixedKeyInputControl.tsx b/app/client/src/components/formControls/FixedKeyInputControl.tsx new file mode 100644 index 0000000000..9de7b313b1 --- /dev/null +++ b/app/client/src/components/formControls/FixedKeyInputControl.tsx @@ -0,0 +1,77 @@ +import React from "react"; +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"; +import styled from "styled-components"; + +const Wrapper = styled.div` + width: 50vh; +`; + +class FixKeyInputControl extends BaseControl { + render() { + const { + label, + placeholderText, + dataType, + configProperty, + isRequired, + fixedKey, + } = this.props; + + return ( + + + {label} {isRequired && "*"} + + { + // Get the value property + if (value) { + return value.value; + } + + return ""; + }} + parse={value => { + // Store the value in this field as {key: fixedKey, value: } + return { + key: fixedKey, + value: value, + }; + }} + /> + + ); + } + + getType(dataType: InputType | undefined) { + switch (dataType) { + case "PASSWORD": + return "password"; + case "NUMBER": + return "number"; + default: + return "text"; + } + } + + getControlType(): ControlType { + return "FIXED_KEY_INPUT"; + } +} + +export interface FixedKeyInputControlProps extends ControlProps { + placeholderText: string; + inputType?: InputType; + dataType?: InputType; + fixedKey: string; +} + +export default FixKeyInputControl; diff --git a/app/client/src/pages/Editor/DataSourceEditor/Connected.tsx b/app/client/src/pages/Editor/DataSourceEditor/Connected.tsx index 7e5dd9be7a..05380fbadf 100644 --- a/app/client/src/pages/Editor/DataSourceEditor/Connected.tsx +++ b/app/client/src/pages/Editor/DataSourceEditor/Connected.tsx @@ -72,6 +72,10 @@ const ValueWrapper = styled.div` margin-left: 10px; `; +const FieldWrapper = styled.div` + margin-top: 9px; +`; + const Connected = () => { const params = useParams<{ datasourceId: string; applicationId: string }>(); const datasource = useSelector((state: AppState) => @@ -217,9 +221,18 @@ const renderSection = ( } } + if (controlType === "FIXED_KEY_INPUT") { + return ( + + {configProperty.key}: {" "} + {configProperty.value} + + ); + } + if (controlType === "KEY_VAL_INPUT") { return ( -
+ {label} {value.map((val: { key: string; value: string }) => { return ( @@ -235,14 +248,14 @@ const renderSection = (
); })} - + ); } return ( -
+ {label}: {value} -
+ ); } catch (e) {} } diff --git a/app/client/src/utils/FormControlRegistry.tsx b/app/client/src/utils/FormControlRegistry.tsx index 9fe057dcb4..2a295ff481 100644 --- a/app/client/src/utils/FormControlRegistry.tsx +++ b/app/client/src/utils/FormControlRegistry.tsx @@ -1,5 +1,8 @@ import React from "react"; import FormControlFactory from "./FormControlFactory"; +import FixedKeyInputControl, { + FixedKeyInputControlProps, +} from "components/formControls/FixedKeyInputControl"; import InputTextControl, { InputControlProps, } from "components/formControls/InputTextControl"; @@ -32,6 +35,13 @@ class FormControlRegistry { return ; }, }); + FormControlFactory.registerControlBuilder("FIXED_KEY_INPUT", { + buildPropertyControl( + controlProps: FixedKeyInputControlProps, + ): JSX.Element { + return ; + }, + }); FormControlFactory.registerControlBuilder("DROP_DOWN", { buildPropertyControl(controlProps: DropDownControlProps): JSX.Element { return ; diff --git a/app/server/appsmith-plugins/mysqlPlugin/src/main/resources/form.json b/app/server/appsmith-plugins/mysqlPlugin/src/main/resources/form.json index 3563262124..5bbe87017f 100644 --- a/app/server/appsmith-plugins/mysqlPlugin/src/main/resources/form.json +++ b/app/server/appsmith-plugins/mysqlPlugin/src/main/resources/form.json @@ -156,8 +156,9 @@ "children": [ { "label": "Server Timezone Override", - "configProperty": "datasourceConfiguration.properties[0].serverTimezone", - "controlType": "INPUT_TEXT", + "configProperty": "datasourceConfiguration.properties[0]", + "fixedKey": "serverTimezone", + "controlType": "FIXED_KEY_INPUT", "placeholderText": "UTC or any valid timezone" } ]