Do not show sections that are supposed to be hidden (#2746)

app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx

@@ -27,6 +27,8 @@ import BackButton from "./BackButton";
 import { PluginType } from "entities/Action";
 import Boxed from "components/editorComponents/Onboarding/Boxed";
 import { OnboardingStep } from "constants/OnboardingConstants";
+import { isHidden } from "components/formControls/utils";
+import log from "loglevel";
 
 const { cloudHosting } = getAppsmithConfigs();
 
@@ -412,6 +414,7 @@ class DatasourceDBEditor extends React.Component<
   };
 
   renderMainSection = (section: any, index: number) => {
+    if (isHidden(this.props.formData, section.hidden)) return null;
     return (
       <Collapsible title={section.sectionName} defaultIsOpen={index === 0}>
         {this.renderEachConfig(section)}
@@ -419,60 +422,73 @@ class DatasourceDBEditor extends React.Component<
     );
   };
 
-  renderEachConfig(section: any) {
-    const keyValueItems: any = [];
-
-    return (
-      <div key={section.id}>
-        <div>
-          {_.map(section.children, (propertyControlOrSection: ControlProps) => {
-            if ("children" in propertyControlOrSection) {
-              return this.renderEachConfig(propertyControlOrSection);
-            } else {
-              try {
-                const {
-                  controlType,
-                  isRequired,
-                  configProperty,
-                } = propertyControlOrSection;
-                const config = { ...propertyControlOrSection };
-                const multipleConfig = keyValueItems;
-
-                this.configDetails[configProperty] = controlType;
-
-                if (isRequired) {
-                  this.requiredFields[
-                    configProperty
-                  ] = propertyControlOrSection;
-                }
-
-                if (
-                  controlType === "KEYVALUE_ARRAY" &&
-                  keyValueItems.length < 2
-                ) {
-                  keyValueItems.push(config);
-
-                  if (keyValueItems.length < 2) return undefined;
-                }
-
-                return (
-                  <div key={configProperty} style={{ marginTop: "16px" }}>
-                    <FormControl
-                      config={config}
-                      formName={DATASOURCE_DB_FORM}
-                      multipleConfig={multipleConfig}
-                    />
-                  </div>
-                );
-              } catch (e) {
-                console.log(e);
-              }
-            }
-          })}
+  renderSingleConfig = (
+    config: ControlProps,
+    multipleConfig?: ControlProps[],
+  ) => {
+    multipleConfig = multipleConfig || [];
+    try {
+      this.setupConfig(config);
+      return (
+        <div key={config.configProperty} style={{ marginTop: "16px" }}>
+          <FormControl
+            config={config}
+            formName={DATASOURCE_DB_FORM}
+            multipleConfig={multipleConfig}
+          />
         </div>
+      );
+    } catch (e) {
+      log.error(e);
+    }
+  };
+
+  setupConfig = (config: ControlProps) => {
+    const { controlType, isRequired, configProperty } = config;
+    this.configDetails[configProperty] = controlType;
+
+    if (isRequired) {
+      this.requiredFields[configProperty] = config;
+    }
+  };
+
+  isKVArray = (children: Array<ControlProps>) => {
+    if (!Array.isArray(children) || children.length < 2) return false;
+    return (
+      children[0].controlType && children[0].controlType === "KEYVALUE_ARRAY"
+    );
+  };
+
+  renderKVArray = (children: Array<ControlProps>) => {
+    try {
+      // setup config for each child
+      children.forEach((c) => this.setupConfig(c));
+      // We pass last child for legacy reasons, to keep the logic here exactly same as before.
+      return this.renderSingleConfig(children[children.length - 1], children);
+    } catch (e) {
+      log.error(e);
+    }
+  };
+
+  renderEachConfig = (section: any) => {
+    return (
+      <div key={section.sectionName}>
+        {_.map(section.children, (propertyControlOrSection: ControlProps) => {
+          // If the section is hidden, skip rendering
+          if (isHidden(this.props.formData, section.hidden)) return null;
+          if ("children" in propertyControlOrSection) {
+            const { children } = propertyControlOrSection;
+            if (this.isKVArray(children)) {
+              return this.renderKVArray(children);
+            }
+            return this.renderEachConfig(propertyControlOrSection);
+          } else {
+            return this.renderSingleConfig(propertyControlOrSection);
+          }
+        })}
       </div>
     );
-  }
+  };
 }
 
 export default reduxForm<Datasource, DatasourceDBEditorProps>({

app/client/src/pages/Editor/DataSourceEditor/DatasourceSection.tsx

@@ -3,6 +3,8 @@ import React from "react";
 import { map, get } from "lodash";
 import { Colors } from "constants/Colors";
 import styled from "styled-components";
+import { isHidden } from "components/formControls/utils";
+import log from "loglevel";
 
 const Key = styled.div`
   color: ${Colors.DOVE_GRAY};
@@ -14,7 +16,6 @@ const Value = styled.div`
   font-size: 14px;
   font-weight: 500;
   display: inline-block;
-  text-transform: uppercase;
   margin-left: 5px;
 `;
 
@@ -34,6 +35,7 @@ export const renderDatasourceSection = (
   return (
     <React.Fragment key={datasource.id}>
       {map(config.children, (section) => {
+        if (isHidden(datasource, section.hidden)) return null;
         if ("children" in section) {
           return renderDatasourceSection(section, datasource);
         } else {
@@ -85,12 +87,25 @@ export const renderDatasourceSection = (
               );
             }
 
+            if (controlType === "DROP_DOWN") {
+              if (Array.isArray(section.options)) {
+                const option = section.options.find(
+                  (el: any) => el.value === value,
+                );
+                if (option && option.label) {
+                  value = option.label;
+                }
+              }
+            }
+
             return (
               <FieldWrapper key={reactKey}>
                 <Key>{label}: </Key> <Value>{value}</Value>
               </FieldWrapper>
             );
-          } catch (e) {}
+          } catch (e) {
+            log.error(e);
+          }
         }
       })}
     </React.Fragment>