feat: implement disabled functionality in the property pane section and control

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

@@ -1,50 +1,56 @@
-import type { ChangeEvent } from "react";
-import React from "react";
-import type { ControlProps } from "./BaseControl";
-import BaseControl from "./BaseControl";
-import type { EventOrValueHandler } from "redux-form";
+import { slashCommandHintHelper } from "components/editorComponents/CodeEditor/commandsHelper";
 import {
   EditorModes,
   EditorSize,
+  EditorTheme,
   TabBehaviour,
 } from "components/editorComponents/CodeEditor/EditorConfig";
-import LazyCodeEditor from "components/editorComponents/LazyCodeEditor";
 import { bindingHintHelper } from "components/editorComponents/CodeEditor/hintHelpers";
-import { slashCommandHintHelper } from "components/editorComponents/CodeEditor/commandsHelper";
-import type { EditorProps } from "components/editorComponents/CodeEditor";
+import LazyCodeEditor from "components/editorComponents/LazyCodeEditor";
+import type { ChangeEvent } from "react";
+import React from "react";
+import type { EventOrValueHandler } from "redux-form";
+import type { ControlProps } from "./BaseControl";
+import BaseControl from "./BaseControl";
 
 class CodeEditorControl extends BaseControl<ControlProps> {
   render() {
     const {
       controlConfig,
       dataTreePath,
+      disabled,
       evaluatedValue,
       expected,
       propertyValue,
       useValidationMessage,
     } = this.props;
 
-    const props: Partial<ControlProps> = {};
-
-    if (dataTreePath) props.dataTreePath = dataTreePath;
-
-    if (evaluatedValue) props.evaluatedValue = evaluatedValue;
-
-    if (expected) props.expected = expected;
-
+    // PropertyPaneControlConfig's disabled is a function (props: any, propertyPath: string) => boolean
+    // while LazyCodeEditor expects a boolean. Convert function to boolean result.
+    const isReadOnly = typeof disabled === "function"
+      ? disabled(this.props.widgetProperties, this.props.propertyName)
+      : !!disabled;
+
+    const maxHeight = controlConfig?.maxHeight ? 
+      String(controlConfig.maxHeight) : undefined;
+
     return (
       <LazyCodeEditor
         additionalDynamicData={this.props.additionalAutoComplete}
+        dataTreePath={dataTreePath}
+        evaluatedValue={evaluatedValue}
+        expected={expected}
         hinting={[bindingHintHelper, slashCommandHintHelper]}
         input={{ value: propertyValue, onChange: this.onChange }}
-        maxHeight={controlConfig?.maxHeight as EditorProps["maxHeight"]}
+        isReadOnly={isReadOnly}
+        marking={[]}
+        maxHeight={maxHeight}
         mode={EditorModes.TEXT_WITH_BINDING}
         positionCursorInsideBinding
         size={EditorSize.EXTENDED}
         tabBehaviour={TabBehaviour.INDENT}
-        theme={this.props.theme}
+        theme={EditorTheme.LIGHT} 
         useValidationMessage={useValidationMessage}
-        {...props}
         AIAssisted
       />
     );

app/client/src/constants/PropertyControlConstants.tsx

@@ -53,6 +53,18 @@ export interface PropertyPaneSectionConfig {
   // TODO: Fix this the next time the file is edited
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   hidden?: (props: any, propertyPath: string) => boolean;
+  /**
+   * @param props - Current widget properties
+   * @param propertyPath - Path to the widget property
+   * @returns - True if the section should be disabled, false otherwise
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  disabled?: (props: any, propertyPath: string) => boolean;
+  /**
+   * Help text to show when section is disabled.
+   * Appears as a tooltip when hovering over the disabled section.
+   */
+  disabledHelpText?: string;
   /**
    * when true, the section will be open by default.
    * Note: Seems like this is not used anywhere.
@@ -205,6 +217,20 @@ export interface PropertyPaneControlConfig {
   // TODO: Fix this the next time the file is edited
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   hidden?: (props: any, propertyPath: string) => boolean;
+  /**
+   * callback function to determine if the property should be disabled.
+
+   * @param props - Current widget properties
+   * @param propertyPath - Path to the widget property
+   * @returns - True if the property should be disabled, false otherwise
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  disabled?: (props: any, propertyPath: string) => boolean;
+  /**
+   * Help text to show when property is disabled.
+   * Appears as a tooltip when hovering over the disabled property.
+   */
+  disabledHelpText?: string;
   /**
    * If true, the property is hidden.
    * Note: hidden and invisible do the same thing but differently. hidden uses a callback to determine if the property should be hidden.

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

@@ -0,0 +1,99 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
+import type { IPanelProps } from "@blueprintjs/core";
+
+const MockPropertyControl = (props: any) => {
+  const isDisabled = props.disabled ? props.disabled(props.widgetProperties, props.propertyName) : false;
+
+  return (
+    <div data-testid="t--property-control-wrapper" className={isDisabled ? "cursor-not-allowed opacity-50" : ""}>
+      <label>{props.label}</label>
+      <input 
+        type="text" 
+        role="textbox" 
+        disabled={isDisabled}
+        data-testid="property-input"
+      />
+      {isDisabled && props.disabledHelpText && (
+        <div data-testid="disabled-help-text">{props.disabledHelpText}</div>
+      )}
+    </div>
+  );
+};
+
+jest.mock("./PropertyControl", () => (props: any) => <MockPropertyControl {...props} />);
+
+describe("PropertyControl", () => {
+  const mockPanel: IPanelProps = {
+    closePanel: jest.fn(),
+    openPanel: jest.fn(),
+  };
+
+  const defaultProps = {
+    propertyName: "testProperty",
+    label: "Test Label",
+    controlType: "INPUT_TEXT",
+    isBindProperty: true,
+    isTriggerProperty: false,
+    panel: mockPanel,
+    theme: EditorTheme.LIGHT,
+    isSearchResult: false,
+    widgetProperties: {
+      widgetId: "test-widget",
+      widgetName: "TestWidget",
+      type: "CONTAINER_WIDGET",
+      testProperty: "test value"
+    }
+  };
+
+  it("should render property control normally when not disabled", () => {
+    const PropertyControl = require("./PropertyControl");
+    const { getByTestId } = render(<PropertyControl {...defaultProps} />);
+
+    expect((getByTestId("property-input") as HTMLInputElement).disabled).toBe(false);
+    expect(getByTestId("t--property-control-wrapper").className).toBe("");
+  });
+
+  it("should render disabled property control when disabled prop is true", () => {
+    const PropertyControl = require("./PropertyControl");
+    const disabledProps = {
+      ...defaultProps,
+      disabled: () => true,
+    };
+
+    const { getByTestId } = render(<PropertyControl {...disabledProps} />);
+
+    const wrapper = getByTestId("t--property-control-wrapper");
+    expect(wrapper.classList.contains("cursor-not-allowed")).toBe(true);
+    expect(wrapper.classList.contains("opacity-50")).toBe(true);
+    expect((getByTestId("property-input") as HTMLInputElement).disabled).toBe(true);
+  });
+
+  it("should show disabled help text when property is disabled", () => {
+    const PropertyControl = require("./PropertyControl");
+    const disabledProps = {
+      ...defaultProps,
+      disabled: () => true,
+      disabledHelpText: "This property is disabled because...",
+    };
+
+    const { getByTestId } = render(<PropertyControl {...disabledProps} />);
+
+    expect(getByTestId("disabled-help-text")).toBeTruthy();
+    expect(getByTestId("disabled-help-text").textContent).toBe("This property is disabled because...");
+  });
+
+  it("should not show disabled help text when property is not disabled", () => {
+    const PropertyControl = require("./PropertyControl");
+    const props = {
+      ...defaultProps,
+      disabled: () => false,
+      disabledHelpText: "This property is disabled because...",
+    };
+
+    const { queryByTestId } = render(<PropertyControl {...props} />);
+
+    expect(queryByTestId("disabled-help-text")).toBeFalsy();
+  });
+});