- {FormControlFactory.createControl(
- props.config,
- props.formName,
- props?.multipleConfig,
- )}
+
+ {FormControlFactory.createControl(
+ props.config,
+ props.formName,
+ props?.multipleConfig,
+ )}
+
+
+ );
+}
+
+interface FormConfigProps extends FormControlProps {
+ children: JSX.Element;
+}
+// top contains label, subtitle, urltext, tooltip, dispaly type
+// bottom contains the info and error text
+// props.children will render the form element
+function FormConfig(props: FormConfigProps) {
+ let top, bottom;
+
+ if (props.multipleConfig?.length) {
+ top = (
+
+ {props.multipleConfig?.map((config) => {
+ return renderFormConfigTop({ config });
+ })}
+
+ );
+ bottom = props.multipleConfig?.map((config) => {
+ return renderFormConfigBottom({ config });
+ });
+ return (
+ <>
+ {top}
+ {props.children}
+ {bottom}
+
+ );
+ }
+
+ return (
+
+
+ {props.config.controlType === "CHECKBOX" ? (
+ <>
+ {props.children}
+ {renderFormConfigTop({ config: props.config })}
+
+ ) : (
+ <>
+ {renderFormConfigTop({ config: props.config })}
+ {props.children}
+
+ )}
+
+ {renderFormConfigBottom({ config: props.config })}
);
}
export default FormControl;
+
+function renderFormConfigTop(props: { config: ControlProps }) {
+ const {
+ displayType,
+ encrypted,
+ isRequired,
+ label,
+ subtitle,
+ tooltipText = "",
+ url,
+ urlText,
+ } = { ...props.config };
+ return (
+
+
+
+ {label} {isRequired && "*"}{" "}
+ {encrypted && (
+ <>
+
+
+ Encrypted
+
+
+ )}
+ {tooltipText && (
+
+
+
+ )}
+
+ {subtitle && (
+ {subtitle}
+ )}
+
+ {urlText && (
+
+ {urlText}
+
+ )}
+ {displayType && (
+
+ {displayType === "JSON" ? "SWITCH TO GUI" : "SWITCH TO JSON EDITOR"}
+
+ )}
+
+ );
+}
+
+function renderFormConfigBottom(props: { config: ControlProps }) {
+ const { errorText, info, showError } = { ...props.config };
+ return (
+ <>
+ {info &&
{info}}
+ {showError &&
{errorText}}
+
+ );
+}
diff --git a/app/client/src/pages/Editor/GeneratePage/components/DataSourceOption.tsx b/app/client/src/pages/Editor/GeneratePage/components/DataSourceOption.tsx
index d836b4fd41..b910b195d0 100644
--- a/app/client/src/pages/Editor/GeneratePage/components/DataSourceOption.tsx
+++ b/app/client/src/pages/Editor/GeneratePage/components/DataSourceOption.tsx
@@ -1,7 +1,10 @@
import React from "react";
import styled from "styled-components";
import { Colors } from "constants/Colors";
-import { RenderDropdownOptionType } from "components/ads/Dropdown";
+import {
+ DropdownOption,
+ RenderDropdownOptionType,
+} from "components/ads/Dropdown";
import { useSelector } from "react-redux";
import { getPluginImages } from "../../../../selectors/entitiesSelector";
import { Classes } from "../../../../components/ads/common";
@@ -101,13 +104,14 @@ function DataSourceOption({
optionClickHandler,
optionWidth,
}: DataSourceOptionType) {
- const { label } = dropdownOption;
+ const { label } = dropdownOption as DropdownOption;
const { routeToCreateNewDatasource = () => null } = extraProps;
const pluginImages = useSelector(getPluginImages);
const isConnectNewDataSourceBtn =
- CONNECT_NEW_DATASOURCE_OPTION_ID === dropdownOption.id;
+ CONNECT_NEW_DATASOURCE_OPTION_ID === (dropdownOption as DropdownOption).id;
- const isSupportedForTemplate = dropdownOption.data.isSupportedForTemplate;
+ const isSupportedForTemplate = (dropdownOption as DropdownOption).data
+ .isSupportedForTemplate;
const isNotSupportedDatasource =
!isSupportedForTemplate && !isSelectedNode && !isConnectNewDataSourceBtn;
@@ -127,7 +131,7 @@ function DataSourceOption({
className="t--dropdown-option"
data-cy={optionCypressSelector}
disabled={isNotSupportedDatasource}
- key={dropdownOption.id}
+ key={(dropdownOption as DropdownOption).id}
onClick={() => {
if (isNotSupportedDatasource) {
return;
@@ -135,7 +139,7 @@ function DataSourceOption({
if (isConnectNewDataSourceBtn) {
routeToCreateNewDatasource(dropdownOption);
} else if (optionClickHandler) {
- optionClickHandler(dropdownOption);
+ optionClickHandler(dropdownOption as DropdownOption);
}
}}
selected={isSelectedNode}
@@ -149,12 +153,14 @@ function DataSourceOption({
width={20}
/>
- ) : pluginImages[dropdownOption.data.pluginId] ? (
+ ) : pluginImages[(dropdownOption as DropdownOption).data.pluginId] ? (
) : null}
diff --git a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx
index d9785886ae..bc2a8e44ca 100644
--- a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx
+++ b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx
@@ -629,7 +629,7 @@ function GeneratePageForm() {
cypressSelector="t--datasource-dropdown-option"
extraProps={{ routeToCreateNewDatasource }}
isSelectedNode={isSelectedNode}
- key={option.id}
+ key={(option as DropdownOption).id}
option={option}
optionClickHandler={optionClickHandler}
optionWidth={DROPDOWN_DIMENSION.WIDTH}
diff --git a/app/client/src/pages/Editor/gitSync/components/OptionSelector.tsx b/app/client/src/pages/Editor/gitSync/components/OptionSelector.tsx
index 26a75a76e6..c4facc2590 100644
--- a/app/client/src/pages/Editor/gitSync/components/OptionSelector.tsx
+++ b/app/client/src/pages/Editor/gitSync/components/OptionSelector.tsx
@@ -23,7 +23,7 @@ function SelectedValueNode(props: DefaultDropDownValueNodeProps) {
const { selected } = props;
return (
- {selected.label}
+ {(selected as DropdownOption).label}
);
diff --git a/app/client/src/utils/FormControlRegistry.tsx b/app/client/src/utils/FormControlRegistry.tsx
index d9180d3f82..43fd543fc4 100644
--- a/app/client/src/utils/FormControlRegistry.tsx
+++ b/app/client/src/utils/FormControlRegistry.tsx
@@ -13,10 +13,10 @@ import SwitchControl, {
SwitchControlProps,
} from "components/formControls/SwitchControl";
import KeyValueArrayControl, {
- KeyValueArrayProps,
+ KeyValueArrayControlProps,
} from "components/formControls/KeyValueArrayControl";
import KeyValueInputControl, {
- KeyValueInputProps,
+ KeyValueInputControlProps,
} from "components/formControls/KeyValueInputControl";
import FilePickerControl, {
FilePickerControlProps,
@@ -30,7 +30,6 @@ import CheckboxControl, {
import DynamicInputTextControl, {
DynamicInputControlProps,
} from "components/formControls/DynamicInputTextControl";
-import InputNumberControl from "components/formControls/InputNumberControl";
import FieldArrayControl, {
FieldArrayControlProps,
} from "components/formControls/FieldArrayControl";
@@ -52,6 +51,7 @@ class FormControlRegistry {
buildPropertyControl(
controlProps: FixedKeyInputControlProps,
): JSX.Element {
+ //TODO: may not be in use
return
;
},
});
@@ -66,17 +66,23 @@ class FormControlRegistry {
},
});
FormControlFactory.registerControlBuilder("KEYVALUE_ARRAY", {
- buildPropertyControl(controlProps: KeyValueArrayProps): JSX.Element {
+ buildPropertyControl(
+ controlProps: KeyValueArrayControlProps,
+ ): JSX.Element {
return
;
},
});
FormControlFactory.registerControlBuilder("FILE_PICKER", {
buildPropertyControl(controlProps: FilePickerControlProps): JSX.Element {
+ //used by redshift datasource
return
;
},
});
FormControlFactory.registerControlBuilder("KEY_VAL_INPUT", {
- buildPropertyControl(controlProps: KeyValueInputProps): JSX.Element {
+ //TODO: may not be in use, replace it with KeyValueArrayControl
+ buildPropertyControl(
+ controlProps: KeyValueInputControlProps,
+ ): JSX.Element {
return
;
},
});
@@ -94,12 +100,13 @@ class FormControlRegistry {
});
FormControlFactory.registerControlBuilder("CHECKBOX", {
buildPropertyControl(controlProps: CheckboxControlProps): JSX.Element {
+ //used in API datasource form only
return
;
},
});
FormControlFactory.registerControlBuilder("NUMBER_INPUT", {
buildPropertyControl(controlProps: InputControlProps): JSX.Element {
- return
;
+ return
;
},
});
FormControlFactory.registerControlBuilder("ARRAY_FIELD", {