Merge branch 'fix/propertypane-errorhandler' into 'release'

Fix Property pane errors

Fix propertypane invalid control error

See merge request theappsmith/internal-tools-client!332

app/client/src/components/designSystems/blueprint/DropdownComponent.tsx

@@ -62,7 +62,7 @@ const StyledSingleDropDown = styled(SingleDropDown)`
   }
 `;
 
-const StyledControlGroup = styled(ControlGroup)<{ hasLabel: boolean }>`
+const StyledControlGroup = styled(ControlGroup)<{ haslabel: string }>`
   &&& > {
     label {
       ${labelStyle}
@@ -74,7 +74,7 @@ const StyledControlGroup = styled(ControlGroup)<{ hasLabel: boolean }>`
     }
     span {
       max-width: ${props =>
-        props.hasLabel ? `calc(70% - ${WIDGET_PADDING}px)` : "100%"};
+        props.haslabel === "true" ? `calc(70% - ${WIDGET_PADDING}px)` : "100%"};
     }
   }
 `;
@@ -204,7 +204,10 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
       : [];
     return (
       <DropdownContainer>
-        <StyledControlGroup fill hasLabel={!!this.props.label}>
+        <StyledControlGroup
+          fill
+          haslabel={!!this.props.label ? "true" : "false"}
+        >
           {this.props.label && (
             <Label
               className={

app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx

@@ -55,9 +55,14 @@ const PropertyControl = (props: Props) => {
       false,
     );
     const isConvertible = CONVERTIBLE_CONTROLS.indexOf(config.controlType) > -1;
+    const className = propertyConfig.label
+      .split(" ")
+      .join("")
+      .toLowerCase();
     return (
       <ControlWrapper
-        key={config.key}
+        className={`t--property-control-${className}`}
+        key={config.id}
         orientation={
           config.controlType === "SWITCH" && !isDynamic
             ? "HORIZONTAL"

app/client/src/pages/Editor/PropertyPane/index.tsx

@@ -127,6 +127,7 @@ class PropertyPane extends Component<
                 try {
                   return (
                     <PropertyControl
+                      key={propertyControlOrSection.id}
                       propertyConfig={propertyControlOrSection}
                       widgetProperties={widgetProperties}
                       onPropertyChange={this.onPropertyChange}

app/client/src/utils/PropertyControlFactory.tsx

@@ -1,5 +1,5 @@
 import { ControlType } from "constants/PropertyControlConstants";
-import React from "react";
+import React, { Fragment } from "react";
 import {
   ControlBuilder,
   ControlProps,
@@ -32,25 +32,15 @@ class PropertyControlFactory {
         key: controlData.id,
       };
       const control = controlBuilder.buildPropertyControl(controlProps);
-      const className = controlProps.label
-        .split(" ")
-        .join("")
-        .toLowerCase();
-      return (
-        <div
-          key={controlProps.id}
-          className={`t--property-control-${className}`}
-        >
-          {control}
-        </div>
-      );
+      return control;
     } else {
       const ex: ControlCreationException = {
         message:
           "Control Builder not registered for control type " +
           controlData.controlType,
       };
-      throw ex;
+      console.log(ex.message);
+      return <Fragment />;
     }
   }