Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity
e96eac489a
PromucFlow_constructor/app/client
History
Rishabh Rathod e96eac489a
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 


![image](https://github.com/appsmithorg/appsmith/assets/23132741/efd1c5d6-a9ed-4343-a6d4-c6358eed8369)


## 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 -->
2024-03-18 16:02:02 +05:30
..
.husky
.yarn
cypress chore: added tag module for module related tests (#31790) 2024-03-18 12:48:54 +05:30
docker/templates chore: Remove unused services (#30292) 2024-01-23 05:43:16 +05:30
generators chore: custom widget (#28926) 2023-12-28 12:16:28 +05:30
packages chore: WDS TextInput style (#31659) 2024-03-18 13:06:30 +03:00
perf
public chore: [Map chart widget] Replace fusion charts with Echarts as chart provider (#31482) 2024-03-08 13:38:55 +05:30
src feat: add support for sectionStyles in datasource editor form (#31817) 2024-03-18 16:02:02 +05:30
test chore: Remove unused services (#30292) 2024-01-23 05:43:16 +05:30
typings
.babelrc
.dockerignore
.editorconfig
.eslintrc.base.json fix: add testing library eslint rules (#31028) 2024-02-12 18:59:10 +03:00
.eslintrc.js fix: add testing library eslint rules (#31028) 2024-02-12 18:59:10 +03:00
.gitignore
.lintstagedrc.json
.nvmrc
.prettierignore
.prettierrc
.sentryclirc
.yarnrc.yml
build.sh chore: include client build source map (#30664) 2024-02-26 15:30:36 +05:30
craco.build.config.js
craco.common.config.js fix: Client development build performance (#31390) 2024-03-04 10:52:06 +03:00
craco.dev.config.js fix: Client development build performance (#31390) 2024-03-04 10:52:06 +03:00
cypress_ci_custom.config.ts
cypress_ci_hosted.config.ts
cypress_ci.config.ts
cypress-add-tags.js
cypress.config.ts
download-assets.js
jest.config.js chore: Show commit SHA instead of SNAPSHOT version (#30850) 2024-02-02 09:52:34 +05:30
package.json chore: workflow ds icon update and beta card updates (#31681) 2024-03-12 14:00:42 +05:30
README.md
README.old.md
start-https.sh chore: Remove unused services (#30292) 2024-01-23 05:43:16 +05:30
tailwind.config.js
tsconfig.json fix: Client development build performance (#31390) 2024-03-04 10:52:06 +03:00
tsconfig.path.json
vercel.json
yarn.lock chore: workflow ds icon update and beta card updates (#31681) 2024-03-12 14:00:42 +05:30

README.md

Appsmith Client

This project was bootstrapped with Create React App.

For details on setting up your development machine, please refer to the Setup Guide