hunk.code_window:     // Disable comment mode toggle for anonymous users
       setShouldHide(
         !shouldShow ||
           !currentUser ||
           currentUser.username === ANONYMOUS_USERNAME,
       );
     }, [location, currentUser]);
     return shouldHide;
   };
   type ToggleCommentModeButtonProps = {
  
hunk.labels: keep replace replace replace replace replace replace keep keep keep keep keep
hunk.after_edit:     setShouldHide(!shouldShow || currentUser?.username === ANONYMOUS_USERNAME);
     }, [location, currentUser, isEditorInitialized, isViewerInitialized]);
  
hunk.file_path: app/client/src/pages/Editor/ToggleModeButton.tsx
hunk.type: replace
file: import React from "react";
  import BaseWidget, { WidgetProps, WidgetState } from "widgets/BaseWidget";
  import { WidgetType } from "constants/WidgetConstants";
  import ButtonComponent, { ButtonType } from "../component";
  import { EventType } from "constants/AppsmithActionConstants/ActionConstants";
  import { ValidationTypes } from "constants/WidgetValidation";
  import { DerivedPropertiesMap } from "utils/WidgetFactory";
  import { Alignment } from "@blueprintjs/core";
  import { IconName } from "@blueprintjs/icons";
  import {
    ButtonVariant,
    ButtonVariantTypes,
    RecaptchaTypes,
    RecaptchaType,
    ButtonPlacementTypes,
    ButtonPlacement,
  } from "components/constants";
  
  class ButtonWidget extends BaseWidget<ButtonWidgetProps, ButtonWidgetState> {
    onButtonClickBound: (event: React.MouseEvent<HTMLElement>) => void;
    clickWithRecaptchaBound: (token: string) => void;
    constructor(props: ButtonWidgetProps) {
      super(props);
      this.onButtonClickBound = this.onButtonClick.bind(this);
      this.clickWithRecaptchaBound = this.clickWithRecaptcha.bind(this);
      this.state = {
        isLoading: false,
      };
    }
  
    static getPropertyPaneConfig() {
      return [
        {
          sectionName: "General",
          children: [
            {
              propertyName: "text",
              label: "Label",
              helpText: "Sets the label of the button",
              controlType: "INPUT_TEXT",
              placeholderText: "Submit",
              isBindProperty: true,
              isTriggerProperty: false,
              validation: { type: ValidationTypes.TEXT },
            },
            {
              helpText: "Show helper text with button on hover",
              propertyName: "tooltip",
              label: "Tooltip",
              controlType: "INPUT_TEXT",
              placeholderText: "Submits Form",
              isBindProperty: true,
              isTriggerProperty: false,
              validation: { type: ValidationTypes.TEXT },
            },
            {
              propertyName: "googleRecaptchaKey",
              label: "Google reCAPTCHA Key",
              helpText: "Sets Google reCAPTCHA site key for the button",
              controlType: "INPUT_TEXT",
              placeholderText: "reCAPTCHA Key",
              isBindProperty: true,
              isTriggerProperty: false,
              validation: { type: ValidationTypes.TEXT },
            },
            {
              propertyName: "recaptchaType",
              label: "Google reCAPTCHA Version",
              controlType: "DROP_DOWN",
              helpText: "Select reCAPTCHA version",
              options: [
                {
                  label: "reCAPTCHA v3",
                  value: RecaptchaTypes.V3,
                },
                {
                  label: "reCAPTCHA v2",
                  value: RecaptchaTypes.V2,
                },
              ],
              isBindProperty: true,
              isTriggerProperty: false,
              validation: {
                type: ValidationTypes.TEXT,
                params: {
                  allowedValues: [RecaptchaTypes.V3, RecaptchaTypes.V2],
                  default: RecaptchaTypes.V3,
                },
              },
            },
            {
              propertyName: "isVisible",
              label: "Visible",
              helpText: "Controls the visibility of the widget",
              controlType: "SWITCH",
              isJSConvertible: true,
              isBindProperty: true,
              isTriggerProperty: false,
              validation: { type: ValidationTypes.BOOLEAN },
            },
            {
              propertyName: "isDisabled",
              label: "Disabled",
              controlType: "SWITCH",
              helpText: "Disables clicks to this widget",
              isJSConvertible: true,
              isBindProperty: true,
              isTriggerProperty: false,
              validation: { type: ValidationTypes.BOOLEAN },
            },
            {
              propertyName: "animateLoading",
              label: "Animate Loading",
              controlType: "SWITCH",
              helpText: "Controls the loading of the widget",
              defaultValue: true,
              isJSConvertible: true,
              isBindProperty: true,
              isTriggerProperty: false,
              validation: { type: ValidationTypes.BOOLEAN },
            },
          ],
        },
        {
          sectionName: "Events",
          children: [
            {
              helpText: "Triggers an action when the button is clicked",
              propertyName: "onClick",
              label: "onClick",
              controlType: "ACTION_SELECTOR",
              isJSConvertible: true,
              isBindProperty: true,
              isTriggerProperty: true,
            },
          ],
        },
        {
          sectionName: "Styles",
          children: [
            {
              propertyName: "buttonColor",
              helpText: "Changes the color of the button",
              label: "Button Color",
              controlType: "COLOR_PICKER",
              isJSConvertible: true,
              isBindProperty: true,
              isTriggerProperty: false,
              validation: { type: ValidationTypes.TEXT },
            },
            {
              propertyName: "buttonVariant",
              label: "Button Variant",
              controlType: "DROP_DOWN",
              helpText: "Sets the variant of the icon button",
              options: [
                {
                  label: "Primary",
                  value: ButtonVariantTypes.PRIMARY,
                },
                {
                  label: "Secondary",
                  value: ButtonVariantTypes.SECONDARY,
                },
                {
                  label: "Tertiary",
                  value: ButtonVariantTypes.TERTIARY,
                },
              ],
              isJSConvertible: true,
              isBindProperty: true,
              isTriggerProperty: false,
              validation: {
                type: ValidationTypes.TEXT,
                params: {
                  allowedValues: [
                    ButtonVariantTypes.PRIMARY,
                    ButtonVariantTypes.SECONDARY,
                    ButtonVariantTypes.TERTIARY,
                  ],
                  default: ButtonVariantTypes.PRIMARY,
                },
              },
            },
            {
              propertyName: "borderRadius",
              label: "Border Radius",
              helpText:
                "Rounds the corners of the icon button's outer border edge",
              controlType: "BORDER_RADIUS_OPTIONS",
              isBindProperty: true,
              isJSConvertible: true,
              isTriggerProperty: false,
              validation: {
                type: ValidationTypes.TEXT,
              },
            },
            {
              propertyName: "boxShadow",
              label: "Box Shadow",
              helpText:
                "Enables you to cast a drop shadow from the frame of the widget",
              controlType: "BOX_SHADOW_OPTIONS",
              isJSConvertible: true,
              isBindProperty: true,
              isTriggerProperty: false,
              validation: { type: ValidationTypes.TEXT },
            },
            {
              propertyName: "iconName",
              label: "Icon",
              helpText: "Sets the icon to be used for the button",
              controlType: "ICON_SELECT",
              isBindProperty: false,
              isTriggerProperty: false,
              updateHook: (
                props: ButtonWidgetProps,
                propertyPath: string,
                propertyValue: string,
              ) => {
                const propertiesToUpdate = [{ propertyPath, propertyValue }];
                if (!props.iconAlign) {
                  propertiesToUpdate.push({
                    propertyPath: "iconAlign",
                    propertyValue: Alignment.LEFT,
                  });
                }
                return propertiesToUpdate;
              },
              dependencies: ["iconAlign"],
              validation: {
                type: ValidationTypes.TEXT,
              },
            },
            {
              propertyName: "placement",
              label: "Placement",
              controlType: "DROP_DOWN",
              helpText: "Sets the space between items",
              options: [
                {
                  label: "Start",
                  value: ButtonPlacementTypes.START,
                },
                {
                  label: "Between",
                  value: ButtonPlacementTypes.BETWEEN,
                },
                {
                  label: "Center",
                  value: ButtonPlacementTypes.CENTER,
                },
              ],
              defaultValue: ButtonPlacementTypes.CENTER,
              isJSConvertible: true,
              isBindProperty: true,
              isTriggerProperty: false,
              validation: {
                type: ValidationTypes.TEXT,
                params: {
                  allowedValues: [
                    ButtonPlacementTypes.START,
                    ButtonPlacementTypes.BETWEEN,
                    ButtonPlacementTypes.CENTER,
                  ],
                  default: ButtonPlacementTypes.CENTER,
                },
              },
            },
            {
              propertyName: "iconAlign",
              label: "Icon Alignment",
              helpText: "Sets the icon alignment of the button",
              controlType: "ICON_TABS",
              options: [
                {
                  icon: "VERTICAL_LEFT",
                  value: "left",
                },
                {
                  icon: "VERTICAL_RIGHT",
                  value: "right",
                },
              ],
              isBindProperty: false,
              isTriggerProperty: false,
              validation: {
                type: ValidationTypes.TEXT,
                params: {
                  allowedValues: ["center", "left", "right"],
                },
              },
            },
          ],
        },
      ];
    }
  
    static getMetaPropertiesMap(): Record<string, any> {
      return {
        recaptchaToken: undefined,
      };
    }
  
    static getDerivedPropertiesMap(): DerivedPropertiesMap {
      return {};
    }
  
    onButtonClick(e: React.MouseEvent<HTMLElement>) {
      e.stopPropagation();
  
      if (this.props.onClick) {
        this.setState({
          isLoading: true,
        });
        super.executeAction({
          triggerPropertyName: "onClick",
          dynamicString: this.props.onClick,
          event: {
            type: EventType.ON_CLICK,
            callback: this.handleActionComplete,
          },
        });
      }
    }
  
    clickWithRecaptcha(token: string) {
      this.props.updateWidgetMetaProperty("recaptchaToken", token, {
        triggerPropertyName: "onClick",
        dynamicString: this.props.onClick,
        event: {
          type: EventType.ON_CLICK,
          callback: this.handleActionComplete,
        },
      });
    }
  
    handleRecaptchaV2Loading = (isLoading: boolean) => {
      if (this.props.onClick) {
        this.setState({ isLoading });
      }
    };
  
    handleActionComplete = () => {
      this.setState({
        isLoading: false,
      });
    };
  
    getPageView() {
      return (
        <ButtonComponent
          borderRadius={this.props.borderRadius}
          boxShadow={this.props.boxShadow}
          buttonColor={this.props.buttonColor}
          buttonVariant={this.props.buttonVariant}
          clickWithRecaptcha={this.clickWithRecaptchaBound}
          googleRecaptchaKey={this.props.googleRecaptchaKey}
          handleRecaptchaV2Loading={this.handleRecaptchaV2Loading}
          iconAlign={this.props.iconAlign}
          iconName={this.props.iconName}
          isDisabled={this.props.isDisabled}
          isLoading={this.props.isLoading || this.state.isLoading}
          key={this.props.widgetId}
          onClick={!this.props.isDisabled ? this.onButtonClickBound : undefined}
          placement={this.props.placement}
          recaptchaType={this.props.recaptchaType}
          text={this.props.text}
          tooltip={this.props.tooltip}
          type={this.props.buttonType || ButtonType.BUTTON}
          widgetId={this.props.widgetId}
          widgetName={this.props.widgetName}
        />
      );
    }
  
    static getWidgetType(): WidgetType {
      return "BUTTON_WIDGET";
    }
  }
  
  export interface ButtonWidgetProps extends WidgetProps {
    text?: string;
    onClick?: string;
    isDisabled?: boolean;
    isVisible?: boolean;
    recaptchaType?: RecaptchaType;
    buttonType?: ButtonType;
    googleRecaptchaKey?: string;
    buttonVariant?: ButtonVariant;
    buttonColor?: string;
    borderRadius?: string;
    boxShadow?: string;
    iconName?: IconName;
    iconAlign?: Alignment;
    placement?: ButtonPlacement;
  }
  
  interface ButtonWidgetState extends WidgetState {
    isLoading: boolean;
  }
  
  export default ButtonWidget;
  