diff --git a/app/client/src/components/editorComponents/CodeEditor/BindingPromptHelper.test.ts b/app/client/src/components/editorComponents/CodeEditor/BindingPromptHelper.test.ts new file mode 100644 index 0000000000..d5d24a073b --- /dev/null +++ b/app/client/src/components/editorComponents/CodeEditor/BindingPromptHelper.test.ts @@ -0,0 +1,40 @@ +import { showBindingPrompt } from "./BindingPromptHelper"; + +describe("Test to check conditons for showing binding prompt", () => { + it("Show binding prompt", () => { + const testCases = [ + { showEvaluatedValue: true, inputValue: "{" }, + { showEvaluatedValue: true, inputValue: "Some value" }, + { showEvaluatedValue: true, inputValue: "1" }, + { showEvaluatedValue: true, inputValue: "[1, 2, 3]" }, + { showEvaluatedValue: true, inputValue: "" }, + { showEvaluatedValue: true, inputValue: [1, 2, 3] }, + { showEvaluatedValue: true, inputValue: 1 }, + { showEvaluatedValue: true, inputValue: null }, + { showEvaluatedValue: true, inputValue: undefined }, + ]; + + testCases.forEach(testCase => { + expect( + showBindingPrompt(testCase.showEvaluatedValue, testCase.inputValue), + ).toBeTruthy(); + }); + }); + + it("Hide binding prompt", () => { + const testCases = [ + { showEvaluatedValue: false, inputValue: "" }, + { showEvaluatedValue: false, inputValue: 1 }, + { showEvaluatedValue: false, inputValue: null }, + { showEvaluatedValue: false, inputValue: undefined }, + { showEvaluatedValue: true, inputValue: "Name: {{Widget.name}}" }, + { showEvaluatedValue: true, inputValue: "{{}}" }, + ]; + + testCases.forEach(testCase => { + expect( + showBindingPrompt(testCase.showEvaluatedValue, testCase.inputValue), + ).toBeFalsy(); + }); + }); +}); diff --git a/app/client/src/components/editorComponents/CodeEditor/BindingPromptHelper.ts b/app/client/src/components/editorComponents/CodeEditor/BindingPromptHelper.ts new file mode 100644 index 0000000000..52bc0b6111 --- /dev/null +++ b/app/client/src/components/editorComponents/CodeEditor/BindingPromptHelper.ts @@ -0,0 +1,11 @@ +import { isString } from "lodash"; + +export const showBindingPrompt = ( + showEvaluatedValue: boolean, + inputValue: any, +): boolean => { + return ( + showEvaluatedValue && + (!isString(inputValue) || !inputValue?.includes("{{") || !inputValue) + ); +}; diff --git a/app/client/src/components/editorComponents/CodeEditor/index.tsx b/app/client/src/components/editorComponents/CodeEditor/index.tsx index 2df0dae1eb..5c3351d58a 100644 --- a/app/client/src/components/editorComponents/CodeEditor/index.tsx +++ b/app/client/src/components/editorComponents/CodeEditor/index.tsx @@ -37,6 +37,7 @@ import { bindingMarker } from "components/editorComponents/CodeEditor/markHelper import { bindingHint } from "components/editorComponents/CodeEditor/hintHelpers"; import { retryPromise } from "utils/AppsmithUtils"; import BindingPrompt from "./BindingPrompt"; +import { showBindingPrompt } from "./BindingPromptHelper"; const LightningMenu = lazy(() => retryPromise(() => import("components/editorComponents/LightningMenu")), @@ -291,12 +292,6 @@ class CodeEditor extends Component { ("evaluatedValue" in this.props || ("dataTreePath" in this.props && !!this.props.dataTreePath)); - const showBindingPrompt = - showEvaluatedValue && - (!_.isString(this.props.input.value) || - !this.props.input.value?.includes("{{") || - !this.props.input.value); - return ( { {this.props.rightIcon && ( {this.props.rightIcon} )} - +