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

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

@@ -1,17 +1,17 @@
-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() {
@@ -21,31 +21,41 @@ class CodeEditorControl extends BaseControl<ControlProps> {
       evaluatedValue,
       expected,
       propertyValue,
+      shouldDisableSection,
       useValidationMessage,
     } = this.props;
 
-    const props: Partial<ControlProps> = {};
+    // PropertyPaneControlConfig's disabled is a function (props: any, propertyPath: string) => boolean
+    // while LazyCodeEditor expects a boolean. Convert function to boolean result.
+    const isControlDisabled =
+      typeof shouldDisableSection === "function"
+        ? shouldDisableSection(
+            this.props.widgetProperties,
+            this.props.propertyName,
+          )
+        : !!shouldDisableSection;
 
-    if (dataTreePath) props.dataTreePath = dataTreePath;
-
-    if (evaluatedValue) props.evaluatedValue = evaluatedValue;
-
-    if (expected) props.expected = expected;
+    const maxHeight = controlConfig?.maxHeight
+      ? String(controlConfig.maxHeight)
+      : undefined;
 
     return (
       <LazyCodeEditor
+        AIAssisted
         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={isControlDisabled}
+        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/components/propertyControls/InputTextControl.tsx

@@ -1,9 +1,6 @@
-import React from "react";
-import type { ControlProps } from "./BaseControl";
-import BaseControl from "./BaseControl";
-import { StyledDynamicInput } from "./StyledControls";
 import type { InputType } from "components/constants";
 import type { CodeEditorExpected } from "components/editorComponents/CodeEditor";
+import { slashCommandHintHelper } from "components/editorComponents/CodeEditor/commandsHelper";
 import type { FieldEntityInformation } from "components/editorComponents/CodeEditor/EditorConfig";
 import {
   CodeEditorBorder,
@@ -12,11 +9,14 @@ import {
   EditorTheme,
   TabBehaviour,
 } from "components/editorComponents/CodeEditor/EditorConfig";
-import { CollapseContext } from "pages/Editor/PropertyPane/PropertySection";
-import LazyCodeEditor from "../editorComponents/LazyCodeEditor";
-import type { AdditionalDynamicDataTree } from "utils/autocomplete/customTreeTypeDefCreator";
 import { bindingHintHelper } from "components/editorComponents/CodeEditor/hintHelpers";
-import { slashCommandHintHelper } from "components/editorComponents/CodeEditor/commandsHelper";
+import { CollapseContext } from "pages/Editor/PropertyPane/PropertyPaneContexts";
+import React from "react";
+import type { AdditionalDynamicDataTree } from "utils/autocomplete/customTreeTypeDefCreator";
+import LazyCodeEditor from "../editorComponents/LazyCodeEditor";
+import type { ControlProps } from "./BaseControl";
+import BaseControl from "./BaseControl";
+import { StyledDynamicInput } from "./StyledControls";
 
 export function InputText(props: {
   label: string;

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

@@ -1,28 +1,28 @@
-import React from "react";
-import type { ControlProps } from "./BaseControl";
-import BaseControl from "./BaseControl";
-import { StyledDynamicInput } from "./StyledControls";
 import type {
   CodeEditorExpected,
   EditorProps,
 } from "components/editorComponents/CodeEditor";
+import { slashCommandHintHelper } from "components/editorComponents/CodeEditor/commandsHelper";
 import {
   CodeEditorBorder,
   EditorModes,
   EditorSize,
   EditorTheme,
   TabBehaviour,
 } from "components/editorComponents/CodeEditor/EditorConfig";
-import type { ColumnProperties } from "widgets/TableWidgetV2/component/Constants";
-import { isDynamicValue } from "utils/DynamicBindingUtils";
+import { bindingHintHelper } from "components/editorComponents/CodeEditor/hintHelpers";
+import LazyCodeEditor from "components/editorComponents/LazyCodeEditor";
+import { CollapseContext } from "pages/Editor/PropertyPane/PropertyPaneContexts";
+import React from "react";
 import styled from "styled-components";
+import type { AdditionalDynamicDataTree } from "utils/autocomplete/customTreeTypeDefCreator";
+import { isDynamicValue } from "utils/DynamicBindingUtils";
 import { isString } from "utils/helpers";
+import type { ColumnProperties } from "widgets/TableWidgetV2/component/Constants";
+import type { ControlProps } from "./BaseControl";
+import BaseControl from "./BaseControl";
+import { StyledDynamicInput } from "./StyledControls";
 import { JSToString, stringToJS } from "./utils";
-import type { AdditionalDynamicDataTree } from "utils/autocomplete/customTreeTypeDefCreator";
-import LazyCodeEditor from "components/editorComponents/LazyCodeEditor";
-import { bindingHintHelper } from "components/editorComponents/CodeEditor/hintHelpers";
-import { slashCommandHintHelper } from "components/editorComponents/CodeEditor/commandsHelper";
-import { CollapseContext } from "pages/Editor/PropertyPane/PropertySection";
 
 const PromptMessage = styled.span`
   line-height: 17px;

app/client/src/constants/PropertyControlConstants.tsx

@@ -53,6 +53,19 @@ 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
+   */
+  // TODO: Fix this the next time the file is edited
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  shouldDisableSection?: (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 +218,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
+  shouldDisableSection?: (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,124 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
+import type { IPanelProps } from "@blueprintjs/core";
+import type { WidgetProps } from "widgets/BaseWidget";
+import PropertyControl from "./PropertyControl";
+import type { EnhancementFns } from "selectors/widgetEnhancementSelectors";
+
+interface MockPropertyControlProps {
+  shouldDisableSection?: (
+    widgetProperties: WidgetProps,
+    propertyName: string,
+  ) => boolean;
+  disabledHelpText?: string;
+  label: string;
+  propertyName: string;
+  widgetProperties: WidgetProps;
+}
+
+const MockPropertyControl = (props: MockPropertyControlProps) => {
+  const isDisabled = props.shouldDisableSection
+    ? props.shouldDisableSection(props.widgetProperties, props.propertyName)
+    : false;
+
+  return (
+    <div
+      className={isDisabled ? "cursor-not-allowed opacity-50" : ""}
+      data-testid="t--property-control-wrapper"
+    >
+      <label>{props.label}</label>
+      <input
+        data-testid="t--property-input"
+        disabled={isDisabled}
+        role="textbox"
+        type="text"
+      />
+      {isDisabled && props.disabledHelpText && (
+        <div data-testid="t--disabled-help-text">{props.disabledHelpText}</div>
+      )}
+    </div>
+  );
+};
+
+jest.mock("./PropertyControl", () => (props: MockPropertyControlProps) => (
+  <MockPropertyControl {...props} />
+));
+
+describe("PropertyControl", () => {
+  const mockPanel: IPanelProps = {
+    closePanel: jest.fn(),
+    openPanel: jest.fn(),
+  };
+
+  const defaultProps = {
+    controlType: "INPUT_TEXT",
+    enhancements: undefined as EnhancementFns | undefined,
+    isBindProperty: true,
+    isSearchResult: false,
+    isTriggerProperty: false,
+    label: "Test Label",
+    panel: mockPanel,
+    propertyName: "testProperty",
+    theme: EditorTheme.LIGHT,
+    widgetProperties: {
+      testProperty: "test value",
+      type: "CONTAINER_WIDGET",
+      widgetId: "test-widget",
+      widgetName: "TestWidget",
+    },
+  };
+
+  it("should render property control normally when not disabled", () => {
+    const { getByTestId } = render(<PropertyControl {...defaultProps} />);
+
+    expect(
+      (getByTestId("t--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 disabledProps = {
+      ...defaultProps,
+      shouldDisableSection: () => 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("t--property-input") as HTMLInputElement).disabled,
+    ).toBe(true);
+  });
+
+  it("should show disabled help text when property is disabled", () => {
+    const disabledProps = {
+      ...defaultProps,
+      shouldDisableSection: () => true,
+      disabledHelpText: "This property is disabled because...",
+    };
+
+    const { getByTestId } = render(<PropertyControl {...disabledProps} />);
+
+    expect(getByTestId("t--disabled-help-text")).toBeTruthy();
+    expect(getByTestId("t--disabled-help-text").textContent).toBe(
+      "This property is disabled because...",
+    );
+  });
+
+  it("should not show disabled help text when property is not disabled", () => {
+    const props = {
+      ...defaultProps,
+      shouldDisableSection: () => false,
+      disabledHelpText: "This property is disabled because...",
+    };
+
+    const { queryByTestId } = render(<PropertyControl {...props} />);
+
+    expect(queryByTestId("t--disabled-help-text")).toBeFalsy();
+  });
+});