Create a new input field which outputs a key value pair (#1226)

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<FixedKeyInputControlProps> {
+  render() {
+    const {
+      label,
+      placeholderText,
+      dataType,
+      configProperty,
+      isRequired,
+      fixedKey,
+    } = this.props;
+
+    return (
+      <Wrapper>
+        <FormLabel>
+          {label} {isRequired && "*"}
+        </FormLabel>
+        <TextField
+          name={configProperty}
+          placeholder={placeholderText}
+          type={this.getType(dataType)}
+          showError
+          format={value => {
+            // Get the value property
+            if (value) {
+              return value.value;
+            }
+
+            return "";
+          }}
+          parse={value => {
+            // Store the value in this field as {key: fixedKey, value: <user-input>}
+            return {
+              key: fixedKey,
+              value: value,
+            };
+          }}
+        />
+      </Wrapper>
+    );
+  }
+
+  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;

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 (
+                <FieldWrapper>
+                  <Key>{configProperty.key}: </Key>{" "}
+                  <Value>{configProperty.value}</Value>
+                </FieldWrapper>
+              );
+            }
+
             if (controlType === "KEY_VAL_INPUT") {
               return (
-                <div style={{ marginTop: 9 }}>
+                <FieldWrapper>
                   <Key>{label}</Key>
                   {value.map((val: { key: string; value: string }) => {
                     return (
@@ -235,14 +248,14 @@ const renderSection = (
                       </div>
                     );
                   })}
-                </div>
+                </FieldWrapper>
               );
             }
 
             return (
-              <div style={{ marginTop: 9 }}>
+              <FieldWrapper>
                 <Key>{label}: </Key> <Value>{value}</Value>
-              </div>
+              </FieldWrapper>
             );
           } catch (e) {}
         }

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 <InputTextControl {...controlProps} />;
       },
     });
+    FormControlFactory.registerControlBuilder("FIXED_KEY_INPUT", {
+      buildPropertyControl(
+        controlProps: FixedKeyInputControlProps,
+      ): JSX.Element {
+        return <FixedKeyInputControl {...controlProps} />;
+      },
+    });
     FormControlFactory.registerControlBuilder("DROP_DOWN", {
       buildPropertyControl(controlProps: DropDownControlProps): JSX.Element {
         return <DropDownControl {...controlProps} />;

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"
         }
       ]