From f87f17e6104a2b474147d5bf7df1177aaa247ff5 Mon Sep 17 00:00:00 2001 From: Jacques Ikot Date: Fri, 25 Apr 2025 03:10:03 -0700 Subject: [PATCH] fix: parsing of nested parentheses in TableComputeValue expressions (#40326) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Problem The table compute value parser was unable to handle expressions with nested parentheses, causing incorrect extraction of computation expressions when functions with multiple parameters or nested function calls were used. This caused issues when users tried to use more complex expressions like `JSObject1.somefunction(currentRow["id"] || 0)`. ## Solution Implemented a proper nested parentheses tracking algorithm that counts opening and closing parentheses to find the correct end of the computation expression, rather than simply looking for the first closing parenthesis sequence. ## Why This Approach This solution is robust because it: 1. Properly handles any level of nested parentheses in function calls 2. Maintains backward compatibility with existing simple expressions 3. Provides a more accurate way to extract the computation expression ## Testing - Added a new test case with nested parentheses: `JSObject1.somefunction(currentRow["id"] || 0)` - Ensured existing test cases still pass - Manually verified with complex expressions containing multiple nested parentheses This fix enables users to write more complex table computations involving function calls with multiple parameters and conditions. Fixes #40265 ## Automation /ok-to-test tags="@tag.Table, @tag.Widget, @tag.Binding, @tag.Sanity, @tag.PropertyPane" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: abbbaebfe5cf723109bee517e5f6f0cebf96a74a > Cypress dashboard. > Tags: `@tag.Table, @tag.Widget, @tag.Binding, @tag.Sanity, @tag.PropertyPane` > Spec: >
Wed, 23 Apr 2025 07:45:26 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No ## Summary by CodeRabbit - **Bug Fixes** - Improved handling of computed values in table controls to correctly process nested parentheses and avoid errors from malformed expressions. - **Tests** - Added test cases for complex computed expressions with nested parentheses, logical operators, and malformed inputs to ensure robustness. --------- Co-authored-by: Vivekanand Ilango Co-authored-by: Vivekanand Ilango --- .../TableComputeValue.test.tsx | 42 +++++++++++ .../propertyControls/TableComputeValue.tsx | 69 +++++++++++++++++-- 2 files changed, 107 insertions(+), 4 deletions(-) diff --git a/app/client/src/components/propertyControls/TableComputeValue.test.tsx b/app/client/src/components/propertyControls/TableComputeValue.test.tsx index d0ea214611..9f51bda99d 100644 --- a/app/client/src/components/propertyControls/TableComputeValue.test.tsx +++ b/app/client/src/components/propertyControls/TableComputeValue.test.tsx @@ -4,6 +4,7 @@ describe("ComputeTablePropertyControlV2.getInputComputedValue", () => { const tableName = "Table1"; const inputVariations = [ "currentRow.price", + `JSObject1.somefunction(currentRow["id"] || 0)`, ` [ { @@ -58,4 +59,45 @@ describe("ComputeTablePropertyControlV2.getInputComputedValue", () => { ComputeTablePropertyControlV2.getInputComputedValue(computedValue), ).toBe(`{{currentRow.quantity}}{{5}}`); }); + + it("3. should handle nested parentheses correctly", () => { + const input = + "JSObject1.complexFunction(currentRow.id, JSObject2.helperFunction(currentRow.name))"; + const computedValue = ComputeTablePropertyControlV2.getTableComputeBinding( + tableName, + input, + ); + + expect( + ComputeTablePropertyControlV2.getInputComputedValue(computedValue), + ).toBe(`{{${input}}}`); + }); + + it("4. should handle malformed expressions with unbalanced parentheses", () => { + // Create a malformed expression by manually crafting a bad computedValue string + // Removing the proper closing parenthesis structure + const malformedComputedValue = + "{{(() => { const tableData = Table1.processedTableData || []; return tableData.length > 0 ? tableData.map((currentRow, currentIndex) => (currentRow.function(unbalanced)) : fallback })"; + + // The function should gracefully handle this and return the original string + // rather than throwing an error or returning a partial/incorrect result + expect( + ComputeTablePropertyControlV2.getInputComputedValue( + malformedComputedValue, + ), + ).toBe(malformedComputedValue); + }); + + it("5. should correctly parse complex but valid expressions with multiple nested parentheses", () => { + const complexInput = + "JSObject1.process(currentRow.value1, (currentRow.value2 || getDefault()), JSObject2.format(currentRow.value3))"; + const computedValue = ComputeTablePropertyControlV2.getTableComputeBinding( + tableName, + complexInput, + ); + + expect( + ComputeTablePropertyControlV2.getInputComputedValue(computedValue), + ).toBe(`{{${complexInput}}}`); + }); }); diff --git a/app/client/src/components/propertyControls/TableComputeValue.tsx b/app/client/src/components/propertyControls/TableComputeValue.tsx index 197bf2ceb8..90c9957ef1 100644 --- a/app/client/src/components/propertyControls/TableComputeValue.tsx +++ b/app/client/src/components/propertyControls/TableComputeValue.tsx @@ -161,25 +161,86 @@ class ComputeTablePropertyControlV2 extends BaseControl { const tableData = Table1.processedTableData || []; return tableData.length > 0 ? tableData.map((currentRow, currentIndex) => (currentRow.price * 2)) : currentRow.price * 2 })()}}" const mapSignatureIndex = propertyValue.indexOf(MAP_FUNCTION_SIGNATURE); // Find the actual computation expression between the map parentheses const computationStart = mapSignatureIndex + MAP_FUNCTION_SIGNATURE.length; - const computationEnd = propertyValue.indexOf("))", computationStart); + + const { endIndex, isValid } = this.findMatchingClosingParenthesis( + propertyValue, + computationStart, + ); + + // Handle case where no matching closing parenthesis is found + if (!isValid) { + // If we can't find the proper closing parenthesis, fall back to returning the original value + // This prevents errors when the expression is malformed + return propertyValue; + } // Extract the computation expression between the map parentheses - // Note: At this point, we're just extracting the raw expression like "currentRow.price * 2" - // The actual removal of "currentRow." prefix happens later in JSToString() const computationExpression = propertyValue.substring( computationStart, - computationEnd, + endIndex, ); return JSToString(computationExpression); }; + /** + * Check if the computed value string looks structurally valid + * This helps catch obviously malformed expressions early + */ + private static isLikelyValidComputedValue(value: string): boolean { + // Check for basic structural elements that should be present + const hasOpeningStructure = value.includes("(() => {"); + const hasTableDataAssignment = value.includes("const tableData ="); + const hasReturnStatement = value.includes("return tableData.length > 0 ?"); + const hasClosingStructure = value.includes("})()}}"); + + return ( + hasOpeningStructure && + hasTableDataAssignment && + hasReturnStatement && + hasClosingStructure + ); + } + + /** + * Utility function to find the matching closing parenthesis + * @param text - The text to search in + * @param startIndex - The index after the opening parenthesis + * @returns Object containing the index of the matching closing parenthesis and whether it was found + */ + private static findMatchingClosingParenthesis( + text: string, + startIndex: number, + ) { + let openParenCount = 1; // Start with 1 for the opening parenthesis + + for (let i = startIndex; i < text.length; i++) { + if (text[i] === "(") { + openParenCount++; + } else if (text[i] === ")") { + openParenCount--; + + if (openParenCount === 0) { + return { endIndex: i, isValid: true }; + } + } + } + + // No matching closing parenthesis found + return { endIndex: text.length, isValid: false }; + } + getComputedValue = (value: string, tableName: string) => { // Return raw value if: // 1. The value is not a dynamic binding (not wrapped in {{...}})