wrapping action code issue fixed. tree component is changed.

app/client/src/components/editorComponents/actioncreator/ActionCreator.tsx

@@ -152,9 +152,6 @@ type SelectorViewProps = ViewProps & {
   options: TreeDropdownOption[];
   defaultText: string;
   getDefaults?: Function;
-  level: number;
-  levelSeparator?: string;
-  start: boolean;
   displayValue?: string;
   selectedLabelModifier?: (
     option: TreeDropdownOption,
@@ -166,16 +163,13 @@ type KeyValueViewProps = ViewProps;
 type TextViewProps = ViewProps & {
   isValid: boolean;
   validationMessage?: string;
-  level: number;
-  start: boolean;
-  levelSeparator?: string;
 };
 
 const views = {
   [ViewTypes.SELECTOR_VIEW]: function SelectorView(props: SelectorViewProps) {
     return (
       <FieldWrapper>
-        <ControlWrapper key={props.label} level={props.level}>
+        <ControlWrapper key={props.label} isAction={true}>
           {props.label && <label>{props.label}</label>}
           <TreeDropdown
             optionTree={props.options}
@@ -189,18 +183,12 @@ const views = {
             displayValue={props.displayValue}
           />
         </ControlWrapper>
-        <TreeStructure
-          level={props.level}
-          label={props.label}
-          start={props.start}
-          levelSeparator={props.levelSeparator}
-        />
       </FieldWrapper>
     );
   },
   [ViewTypes.KEY_VALUE_VIEW]: function KeyValueView(props: KeyValueViewProps) {
     return (
-      <ControlWrapper key={props.label}>
+      <ControlWrapper key={props.label} isAction={true}>
         <KeyValueComponent
           pairs={props.get(props.value, false) as DropdownOption[]}
           addLabel={"QueryParam"}
@@ -212,7 +200,7 @@ const views = {
   [ViewTypes.TEXT_VIEW]: function TextView(props: TextViewProps) {
     return (
       <FieldWrapper>
-        <ControlWrapper key={props.label} level={props.level}>
+        <ControlWrapper key={props.label} isAction={true}>
           {props.label && <label>{props.label}</label>}
           <InputText
             label={props.label}
@@ -230,12 +218,6 @@ const views = {
             errorMessage={props.validationMessage}
           />
         </ControlWrapper>
-        <TreeStructure
-          level={props.level}
-          label={props.label}
-          start={props.start}
-          levelSeparator={props.levelSeparator}
-        />
       </FieldWrapper>
     );
   },
@@ -419,9 +401,6 @@ function getOptionsWithChildren(
 
 function getFieldFromValue(
   value: string | undefined,
-  level: number,
-  start: boolean,
-  levelSeparator?: string,
   getParentValue?: Function,
 ): any[] {
   const fields: any[] = [
@@ -429,9 +408,6 @@ function getFieldFromValue(
       field: FieldType.ACTION_SELECTOR_FIELD,
       getParentValue,
       value,
-      level,
-      start,
-      levelSeparator,
     },
   ];
   if (!value) {
@@ -450,9 +426,6 @@ function getFieldFromValue(
       }
       const successFields = getFieldFromValue(
         `{{${sucesssValue}}}`,
-        level + 1,
-        start,
-        "odd",
         (changeValue: string) => {
           const matches = [...value.matchAll(ACTION_TRIGGER_REGEX)];
           const args = [...matches[0][2].matchAll(ACTION_ANONYMOUS_FUNC_REGEX)];
@@ -469,8 +442,6 @@ function getFieldFromValue(
         },
       );
       successFields[0].label = "onSuccess";
-      successFields[0].level = level + 1;
-      successFields[0].start = true;
       fields.push(successFields);
 
       let errorValue;
@@ -479,9 +450,6 @@ function getFieldFromValue(
       }
       const errorFields = getFieldFromValue(
         `{{${errorValue}}}`,
-        level + 1,
-        start,
-        "even",
         (changeValue: string) => {
           const matches = [...value.matchAll(ACTION_TRIGGER_REGEX)];
           const args = [...matches[0][2].matchAll(ACTION_ANONYMOUS_FUNC_REGEX)];
@@ -497,51 +465,33 @@ function getFieldFromValue(
         },
       );
       errorFields[0].label = "onError";
-      errorFields[0].level = level + 1;
-      errorFields[0].start = false;
       fields.push(errorFields);
     }
     return fields;
   }
-
   if (value.indexOf("navigateTo") !== -1) {
     fields.push({
       field: FieldType.URL_FIELD,
-      level: level + 1,
-      levelSeparator,
-      start: true,
     });
   }
 
   if (value.indexOf("showModal") !== -1) {
     fields.push({
       field: FieldType.SHOW_MODAL_FIELD,
-      level: level + 1,
-      levelSeparator,
-      start: true,
     });
   }
   if (value.indexOf("closeModal") !== -1) {
     fields.push({
       field: FieldType.CLOSE_MODAL_FIELD,
-      level: level + 1,
-      levelSeparator,
-      start: true,
     });
   }
   if (value.indexOf("showAlert") !== -1) {
     fields.push(
       {
         field: FieldType.ALERT_TEXT_FIELD,
-        level: level + 1,
-        levelSeparator,
-        start: true,
       },
       {
         field: FieldType.ALERT_TYPE_SELECTOR_FIELD,
-        level: level + 1,
-        levelSeparator,
-        start: false,
       },
     );
   }
@@ -556,10 +506,10 @@ function getPageDropdownOptions(state: AppState) {
   }));
 }
 
-function Fields(props: {
+function renderField(props: {
   onValueChange: Function;
   value: string;
-  fields: any;
+  field: any;
   label?: string;
   isValid: boolean;
   validationMessage?: string;
@@ -570,36 +520,7 @@ function Fields(props: {
   depth: number;
   maxDepth: number;
 }) {
-  const ui = props.fields.map((field: any, index: number) => {
+  const { field } = props;
-    if (Array.isArray(field)) {
-      if (props.depth > props.maxDepth) {
-        return null;
-      }
-      const selectorField = field[0];
-      console.log("selectorField", field[0], index);
-      return (
-        <Fields
-          value={selectorField.value}
-          fields={field}
-          label={selectorField.label}
-          isValid={props.isValid}
-          validationMessage={props.validationMessage}
-          apiOptionTree={props.apiOptionTree}
-          queryOptionTree={props.queryOptionTree}
-          modalDropdownList={props.modalDropdownList}
-          pageDropdownOptions={props.pageDropdownOptions}
-          depth={props.depth + 1}
-          maxDepth={props.maxDepth}
-          onValueChange={(value: any) => {
-            props.onValueChange(
-              selectorField.getParentValue(
-                value.substring(2, value.length - 2),
-              ),
-            );
-          }}
-        />
-      );
-    }
   const fieldType = field.field;
   const fieldConfig = fieldConfigs[fieldType];
   const view = views[fieldConfig.view];
@@ -634,9 +555,7 @@ function Fields(props: {
             option.type === ActionType.api ||
             option.type === ActionType.query
           ) {
-              return (
+            return <HightlightedCode codeText={`{{${option.label}.run()}}`} />;
-                <HightlightedCode codeText={`{{${option.label}.run()}}`} />
-              );
           } else if (displayValue) {
             return <HightlightedCode codeText={displayValue} />;
           }
@@ -683,9 +602,6 @@ function Fields(props: {
         getDefaults: getDefaults,
         selectedLabelModifier: selectedLabelModifier,
         displayValue: displayValue ? displayValue : "",
-          level: field.level,
-          start: field.start,
-          levelSeparator: field.levelSeparator,
       });
       break;
     case FieldType.KEY_VALUE_FIELD:
@@ -699,9 +615,6 @@ function Fields(props: {
         },
         value: props.value,
         defaultText: "Select Action",
-          level: field.level,
-          start: field.start,
-          levelSeparator: field.levelSeparator,
       });
       break;
     case FieldType.ALERT_TEXT_FIELD:
@@ -722,9 +635,6 @@ function Fields(props: {
         value: props.value,
         isValid: props.isValid,
         validationMessage: props.validationMessage,
-          level: field.level,
-          start: field.start,
-          levelSeparator: field.levelSeparator,
       });
       break;
     default:
@@ -732,10 +642,116 @@ function Fields(props: {
   }
 
   return <div key={fieldType}>{viewElement}</div>;
-  });
+}
 
+function Fields(props: {
+  onValueChange: Function;
+  value: string;
+  fields: any;
+  label?: string;
+  isValid: boolean;
+  validationMessage?: string;
+  apiOptionTree: TreeDropdownOption[];
+  queryOptionTree: TreeDropdownOption[];
+  modalDropdownList: TreeDropdownOption[];
+  pageDropdownOptions: TreeDropdownOption[];
+  depth: number;
+  maxDepth: number;
+}) {
+  const { fields, ...otherProps } = props;
+  if (fields[0].field === FieldType.ACTION_SELECTOR_FIELD) {
+    const remainingFields = fields.slice(1);
+    return (
+      <React.Fragment>
+        {renderField({
+          field: fields[0],
+          ...otherProps,
+        })}
+        <ul className={props.depth === 1 ? "tree" : ""}>
+          {remainingFields.map((field: any, index: number) => {
+            if (Array.isArray(field)) {
+              if (props.depth > props.maxDepth) {
+                return null;
+              }
+              const selectorField = field[0];
+              return (
+                <li key={index}>
+                  <Fields
+                    value={selectorField.value}
+                    fields={field}
+                    label={selectorField.label}
+                    isValid={props.isValid}
+                    validationMessage={props.validationMessage}
+                    apiOptionTree={props.apiOptionTree}
+                    queryOptionTree={props.queryOptionTree}
+                    modalDropdownList={props.modalDropdownList}
+                    pageDropdownOptions={props.pageDropdownOptions}
+                    depth={props.depth + 1}
+                    maxDepth={props.maxDepth}
+                    onValueChange={(value: any) => {
+                      props.onValueChange(
+                        selectorField.getParentValue(
+                          value.substring(2, value.length - 2),
+                        ),
+                      );
+                    }}
+                  />
+                </li>
+              );
+            } else {
+              return (
+                <li>
+                  {renderField({
+                    field: field,
+                    ...otherProps,
+                  })}
+                </li>
+              );
+            }
+          })}
+        </ul>
+      </React.Fragment>
+    );
+  } else {
+    const ui = fields.map((field: any, index: number) => {
+      if (Array.isArray(field)) {
+        if (props.depth > props.maxDepth) {
+          return null;
+        }
+        const selectorField = field[0];
+        return (
+          <Fields
+            key={index}
+            value={selectorField.value}
+            fields={field}
+            label={selectorField.label}
+            isValid={props.isValid}
+            validationMessage={props.validationMessage}
+            apiOptionTree={props.apiOptionTree}
+            queryOptionTree={props.queryOptionTree}
+            modalDropdownList={props.modalDropdownList}
+            pageDropdownOptions={props.pageDropdownOptions}
+            depth={props.depth + 1}
+            maxDepth={props.maxDepth}
+            onValueChange={(value: any) => {
+              props.onValueChange(
+                selectorField.getParentValue(
+                  value.substring(2, value.length - 2),
+                ),
+              );
+            }}
+          />
+        );
+      } else {
+        return renderField({
+          field: field,
+          ...otherProps,
+        });
+      }
+    });
     return <>{ui}</>;
   }
+}
 
 function useModalDropdownList() {
   const dispatch = useDispatch();
@@ -843,9 +859,9 @@ export function ActionCreator(props: ActionCreatorProps) {
   const queryOptionTree = useQueryOptionTree();
   const modalDropdownList = useModalDropdownList();
   const pageDropdownOptions = useSelector(getPageDropdownOptions);
-  const fields = getFieldFromValue(props.value, 0, false);
+  const fields = getFieldFromValue(props.value);
-  console.log("fields", fields);
   return (
+    <TreeStructure>
       <Fields
         value={props.value}
         fields={fields}
@@ -859,5 +875,6 @@ export function ActionCreator(props: ActionCreatorProps) {
         depth={1}
         maxDepth={1}
       />
+    </TreeStructure>
   );
 }

app/client/src/components/propertyControls/StyledControls.tsx

@@ -17,7 +17,7 @@ import { Skin } from "constants/DefaultTheme";
 
 type ControlWrapperProps = {
   orientation?: ContainerOrientation;
-  level?: number;
+  isAction?: boolean;
 };
 
 export const ControlWrapper = styled.div<ControlWrapperProps>`
@@ -26,8 +26,7 @@ export const ControlWrapper = styled.div<ControlWrapperProps>`
   align-items: center;
   flex-direction: ${props =>
     props.orientation === "VERTICAL" ? "column" : "row"};
-  padding: ${props => props.theme.spaces[3]}px 0;
+  padding: ${props => (props.isAction ? "0" : "8px 0 ")};
-  padding-left: ${props => (props.level ? 18 * props.level : 0)}px;
   & > label {
     color: ${props => props.theme.colors.paneText};
     margin-bottom: ${props => props.theme.spaces[1]}px;
@@ -81,6 +80,16 @@ export const StyledDropDownContainer = styled.div`
         border: none;
         box-shadow: none;
         background: transparent;
+        white-space: normal;
+        word-break: break-word;
+      }
+      .bp3-button-text {
+        white-space: normal;
+        word-break: break-word;
+        display: block;
+        overflow: auto;
+      }
+      .bp3-icon {
       }
     }
   }

app/client/src/components/utils/TreeStructure.tsx

@@ -1,89 +1,72 @@
 import React from "react";
 import styled from "styled-components";
 
+const TreeStructureWrapper = styled.div`
+  li {
+    list-style: none;
+  }
+
+  .tree,
+  .tree ul {
+    margin-bottom: 0;
+    margin-top: 0;
+    margin-left: 9px;
+    padding: 0;
+    list-style: none;
+    color: ${props => props.theme.colors.paneText};
+    position: relative;
+  }
+
+  .tree ul {
+    margin-left: 9px;
+  }
+
+  .tree:before,
+  .tree ul:before {
+    content: "";
+    display: block;
+    width: 0;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    border-left: 2px solid;
+  }
+
+  .tree li {
+    margin: 0;
+    padding-left: 9px;
+    line-height: 18px;
+    padding-top: 16px;
+    position: relative;
+  }
+
+  .tree li:before {
+    content: "";
+    display: block;
+    width: 9px;
+    height: 0;
+    border-top: 2px solid;
+    margin-top: 36px;
+    position: absolute;
+    top: 18px;
+    left: 0;
+  }
+
+  .tree li:last-child:before {
+    background: ${props => props.theme.colors.paneBG};
+    height: auto;
+    top: 18px;
+    bottom: 0;
+  }
+`;
+
 type TreeStructureProps = {
-  label: string;
+  children: React.ReactNode;
-  level: number;
-  start: boolean;
-  levelSeparator?: string;
 };
 
-const TreeStructureHorizontalWrapper = styled.div<{
-  level: number;
-  label: string;
-}>`
-  position: absolute;
-  width: ${props => (props.level - 1) * 2 + 9}px;
-  height: 2px;
-  background: #a2a6a8;
-  top: ${props => (props.label ? "65%" : "50%")};
-  left: ${props => (props.level - 1) * 18 + 9}px;
-  z-index: 1;
-`;
-
-const TreeStructureVerticalWrapper = styled.div<{
-  level: number;
-  label: string;
-  start: boolean;
-}>`
-  position: absolute;
-  height: ${props => (props.start ? (props.label ? "77%" : "70%") : "100%")};
-  width: 2px;
-  background: #a2a6a8;
-  top: ${props =>
-    props.start
-      ? props.label
-        ? "-12%"
-        : "-16%"
-      : props.label
-      ? "-35%"
-      : "-49%"};
-  left: ${props => (props.level - 1) * 18 + 9}px;
-  z-index: 1;
-`;
-
 const TreeStructure = (props: TreeStructureProps) => {
-  return (
+  return <TreeStructureWrapper>{props.children}</TreeStructureWrapper>;
-    <React.Fragment>
-      {props.level ? (
-        <TreeStructureHorizontalWrapper
-          label={props.label}
-          level={props.level}
-        />
-      ) : null}
-      {(() => {
-        if (
-          props.level &&
-          props.levelSeparator &&
-          props.levelSeparator === "odd"
-        ) {
-          const treeStructureVerticalWrappers = new Array(props.level)
-            .fill("")
-            .map((i, index) => {
-              return (
-                <TreeStructureVerticalWrapper
-                  key={index}
-                  label={props.label}
-                  level={index + 1}
-                  start={index === props.level - 1 ? props.start : false}
-                />
-              );
-            });
-          return treeStructureVerticalWrappers;
-        } else if (props.level) {
-          return (
-            <TreeStructureVerticalWrapper
-              label={props.label}
-              level={props.level}
-              start={props.start}
-            />
-          );
-        } else {
-          return [];
-        }
-      })()}
-    </React.Fragment>
-  );
 };
 
 export default TreeStructure;