feat: add support for sectionStyles in datasource editor form (#31817)
## Description
In this PR, we add support for section styles in the datasource editor
form. This gives the ability to configure input in different layouts
like flex or block as required using CSS.
Fixes https://github.com/appsmithorg/appsmith/issues/31321
### Example
#### DB config
```
const DBConfig = [
{
sectionName: "Connection",
id: 1,
children: [
{
children: [
{
label: "Host address",
configProperty: "datasourceConfiguration.endpoints[*].host",
controlType: "KEYVALUE_ARRAY",
validationMessage: "Please enter a valid host",
validationRegex: "^((?![/:]).)*$",
placeholderText: "myapp.abcde.arango.net",
},
{
label: "Port",
configProperty: "datasourceConfiguration.endpoints[*].port",
dataType: "NUMBER",
controlType: "KEYVALUE_ARRAY",
placeholderText: "8529",
},
],
},
{
label: "Database name",
configProperty: "datasourceConfiguration.authentication.databaseName",
controlType: "INPUT_TEXT",
placeholderText: "Database name",
initialValue: "_system",
},
],
},
{
sectionName: "Authentication",
id: 2,
children: [
{
children: [
{
label: "Username",
configProperty: "datasourceConfiguration.authentication.username",
controlType: "INPUT_TEXT",
placeholderText: "Username",
},
{
label: "Password",
configProperty: "datasourceConfiguration.authentication.password",
dataType: "PASSWORD",
controlType: "INPUT_TEXT",
placeholderText: "Password",
encrypted: true,
},
],
},
],
},
{
id: 3,
sectionName: "SSL (optional)",
children: [
{
label: "SSL mode",
configProperty: "datasourceConfiguration.connection.ssl.authType",
controlType: "DROP_DOWN",
initialValue: "DEFAULT",
options: [
{
label: "Default",
value: "DEFAULT",
},
{
label: "Enabled",
value: "ENABLED",
},
{
label: "Disabled",
value: "DISABLED",
},
],
},
{
sectionStyles: { display: "flex" },
children: [
{
sectionStyles: { flex: 1 },
children: [
{
label: "Use Client CA Certificate",
configProperty:
"datasourceConfiguration.connection.ssl.caCertificateType",
controlType: "DROP_DOWN",
initialValue: "NONE",
options: [
{
label: "Disabled",
value: "NONE",
},
{
label: "Upload File",
value: "FILE",
},
{
label: "Base64 String",
value: "BASE64_STRING",
},
],
hidden: {
path: "datasourceConfiguration.connection.ssl.authType",
comparison: "NOT_EQUALS",
value: "ENABLED",
},
},
{
label: "Client CA Certificate File",
configProperty:
"datasourceConfiguration.connection.ssl.caCertificateFile",
controlType: "FILE_PICKER",
encrypted: true,
hidden: {
path: "datasourceConfiguration.connection.ssl.caCertificateType",
comparison: "NOT_EQUALS",
value: "FILE",
},
},
{
label: "Base64 Encoded Client CA Certificate String",
configProperty:
"datasourceConfiguration.connection.ssl.caCertificateFile.base64Content",
controlType: "INPUT_TEXT",
dataType: "PASSWORD",
encrypted: true,
hidden: {
path: "datasourceConfiguration.connection.ssl.caCertificateType",
comparison: "NOT_EQUALS",
value: "BASE64_STRING",
},
},
],
},
{
sectionStyles: { flex: 1 , marginLeft: "20px"},
children: [
{
label: "Use Server CA Certificate",
configProperty:
"datasourceConfiguration.connection.ssl.caServerCertificateType",
controlType: "DROP_DOWN",
initialValue: "NONE",
options: [
{
label: "Disabled",
value: "NONE",
},
{
label: "Upload File",
value: "FILE",
},
{
label: "Base64 String",
value: "BASE64_STRING",
},
],
hidden: {
path: "datasourceConfiguration.connection.ssl.authType",
comparison: "NOT_EQUALS",
value: "ENABLED",
},
},
{
label: "Client CA Certificate File",
configProperty:
"datasourceConfiguration.connection.ssl.caServerCertificateFile",
controlType: "FILE_PICKER",
encrypted: true,
hidden: {
path: "datasourceConfiguration.connection.ssl.caServerCertificateType",
comparison: "NOT_EQUALS",
value: "FILE",
},
},
{
label: "Base64 Encoded Client CA Certificate String",
configProperty:
"datasourceConfiguration.connection.ssl.caServerCertificateFile.Base64Content",
controlType: "INPUT_TEXT",
dataType: "PASSWORD",
encrypted: true,
hidden: {
path: "datasourceConfiguration.connection.ssl.caServerCertificateType",
comparison: "NOT_EQUALS",
value: "BASE64_STRING",
},
},
],
},
{
sectionStyles: { flex: 1 },
children: [],
},
],
},
],
},
];
```
#### Screenshot
## Automation
/ok-to-test tags="@tag.Datasource"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!IMPORTANT]
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/8287804061>
> Commit: `a501af69f04c4fe995aaa8120315668bef070cc5`
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8287804061&attempt=1"
target="_blank">Click here!</a>
> All cypress tests have passed 🎉🎉🎉
<!-- end of auto-generated comment: Cypress test results -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Enhanced visual presentation of forms generated from JSON data with
customizable section styles.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
e96eac489a