>;
+ get: (state: AppState) => CanvasDebuggerState;
+}
+
+const canvasDebuggerConfig: Config = {
+ set: setCanvasDebuggerState,
+ get: getCanvasDebuggerState,
+};
+const pluginActionEditorDebuggerConfig: Config = {
+ set: setPluginActionEditorDebuggerState,
+ get: getPluginActionDebuggerState,
+};
+
+export const getDebuggerPaneConfig = (
+ focusInfo: FocusEntityInfo,
+ ideViewMode: EditorViewMode,
+): Config => {
+ if (ideViewMode === EditorViewMode.SplitScreen) {
+ return canvasDebuggerConfig;
+ }
+
+ switch (focusInfo.entity) {
+ case FocusEntity.QUERY:
+ return pluginActionEditorDebuggerConfig;
+ case FocusEntity.JS_OBJECT:
+ return {
+ set: setJsPaneDebuggerState,
+ get: getJsPaneDebuggerState,
+ };
+ default:
+ return canvasDebuggerConfig;
+ }
+};
diff --git a/app/client/src/pages/Editor/AppPluginActionEditor/components/ToolbarMenu/ToolbarMenu.tsx b/app/client/src/pages/Editor/AppPluginActionEditor/components/ToolbarMenu/ToolbarMenu.tsx
index 306e445dd7ee..bb6b56294709 100644
--- a/app/client/src/pages/Editor/AppPluginActionEditor/components/ToolbarMenu/ToolbarMenu.tsx
+++ b/app/client/src/pages/Editor/AppPluginActionEditor/components/ToolbarMenu/ToolbarMenu.tsx
@@ -12,6 +12,7 @@ import {
} from "PluginActionEditor";
import { ConvertToModule, Copy, Delete, Move } from "../ContextMenuItems";
import { RenameMenuItem } from "IDE";
+import { InspectStateMenuItem } from "components/editorComponents/Debugger/StateInspector/CTAs";
export const ToolbarMenu = () => {
const { action } = usePluginActionContext();
@@ -29,9 +30,12 @@ export const ToolbarMenu = () => {
return (
<>
+
+
+
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/EntityItem/AppJSContextMenuItems.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/EntityItem/AppJSContextMenuItems.tsx
index 849144058dee..bac234dc46f5 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/JS/EntityItem/AppJSContextMenuItems.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/EntityItem/AppJSContextMenuItems.tsx
@@ -14,6 +14,7 @@ import {
ShowBindings,
} from "pages/Editor/JSEditor/ContextMenuItems";
import { MenuSeparator } from "@appsmith/ads";
+import { InspectStateMenuItem } from "components/editorComponents/Debugger/StateInspector/CTAs";
export interface Props {
jsAction: JSCollection;
@@ -38,10 +39,13 @@ export function AppJSContextMenuItems(props: Props) {
return (
<>
-
+
+
+
+
);
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/EntityItem/AppQueryContextMenuItems.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/EntityItem/AppQueryContextMenuItems.tsx
index be190c1ff585..b7253b6a9602 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/Query/EntityItem/AppQueryContextMenuItems.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Query/EntityItem/AppQueryContextMenuItems.tsx
@@ -15,6 +15,7 @@ import {
ShowBindings,
} from "pages/Editor/AppPluginActionEditor/components/ContextMenuItems";
import { MenuSeparator } from "@appsmith/ads";
+import { InspectStateMenuItem } from "components/editorComponents/Debugger/StateInspector/CTAs";
export interface Props {
action: Action;
@@ -39,11 +40,14 @@ export function AppQueryContextMenuItems(props: Props) {
return (
<>
-
+
+
+
+
);
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/UI/UIEntityListTree/WidgetContextMenu.tsx b/app/client/src/pages/Editor/IDE/EditorPane/UI/UIEntityListTree/WidgetContextMenu.tsx
index d96a524ed0d5..d31f1f373b9e 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/UI/UIEntityListTree/WidgetContextMenu.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/UI/UIEntityListTree/WidgetContextMenu.tsx
@@ -10,6 +10,7 @@ import {
Menu,
MenuContent,
MenuItem,
+ MenuSeparator,
MenuTrigger,
} from "@appsmith/ads";
import { useBoolean } from "usehooks-ts";
@@ -20,6 +21,7 @@ import {
createMessage,
} from "ee/constants/messages";
import { useDeleteWidget } from "./hooks/useDeleteWidget";
+import { InspectStateMenuItem } from "components/editorComponents/Debugger/StateInspector/CTAs";
export const WidgetContextMenu = (props: {
widgetId: string;
@@ -62,9 +64,12 @@ export const WidgetContextMenu = (props: {
>
{createMessage(CONTEXT_RENAME)}
+
+
+
+
+
+
);
diff --git a/app/client/src/pages/Editor/PropertyPane/PropertyPaneTitle.tsx b/app/client/src/pages/Editor/PropertyPane/PropertyPaneTitle.tsx
index 07bcd446361a..a41029ac3d2f 100644
--- a/app/client/src/pages/Editor/PropertyPane/PropertyPaneTitle.tsx
+++ b/app/client/src/pages/Editor/PropertyPane/PropertyPaneTitle.tsx
@@ -32,16 +32,14 @@ interface PropertyPaneTitleProps {
onBackClick?: () => void;
isPanelTitle?: boolean;
actions: Array<{
- // TODO: Fix this the next time the file is edited
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- tooltipContent: any;
+ tooltipContent: string;
icon: ReactElement;
tooltipPosition?: TooltipPlacement;
}>;
}
const StyledEditableContainer = styled.div`
- max-width: calc(100% - 52px);
+ max-width: calc(100% - 78px);
flex-grow: 1;
border-radius: var(--ads-v2-border-radius);
border: 1px solid transparent;
@@ -207,10 +205,10 @@ const PropertyPaneTitle = memo(function PropertyPaneTitle(
{/* ACTIONS */}
- {props.actions.map((value, index) => (
+ {props.actions.map((value) => (
{value.icon}
diff --git a/app/client/src/pages/Editor/PropertyPane/PropertyPaneView.tsx b/app/client/src/pages/Editor/PropertyPane/PropertyPaneView.tsx
index ed530dbb7956..7ea1bac2181b 100644
--- a/app/client/src/pages/Editor/PropertyPane/PropertyPaneView.tsx
+++ b/app/client/src/pages/Editor/PropertyPane/PropertyPaneView.tsx
@@ -14,6 +14,7 @@ import { getWidgetPropsForPropertyPane } from "selectors/propertyPaneSelectors";
import {
BINDING_WIDGET_WALKTHROUGH_DESC,
BINDING_WIDGET_WALKTHROUGH_TITLE,
+ CONTEXT_INSPECT_STATE,
createMessage,
} from "ee/constants/messages";
import { AB_TESTING_EVENT_KEYS } from "ee/entities/FeatureFlag";
@@ -46,6 +47,7 @@ import { PropertyPaneTab } from "./PropertyPaneTab";
import PropertyPaneTitle from "./PropertyPaneTitle";
import { renderWidgetCallouts, useSearchText } from "./helpers";
import { sendPropertyPaneSearchAnalytics } from "./propertyPaneSearch";
+import { InspectStateToolbarButton } from "components/editorComponents/Debugger/StateInspector/CTAs";
// TODO(abhinav): The widget should add a flag in their configuration if they donot subscribe to data
// Widgets where we do not want to show the CTA
@@ -211,12 +213,18 @@ function PropertyPaneView(
* actions shown on the right of title
*/
const actions = useMemo((): Array<{
- // TODO: Fix this the next time the file is edited
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- tooltipContent: any;
+ tooltipContent: string;
icon: ReactElement;
}> => {
return [
+ {
+ tooltipContent: createMessage(CONTEXT_INSPECT_STATE),
+ icon: (
+
+ ),
+ },
{
tooltipContent: "Copy widget",
icon: (
@@ -242,7 +250,7 @@ function PropertyPaneView(
),
},
];
- }, [onCopy, onDelete]);
+ }, [onCopy, onDelete, widgetProperties?.widgetId]);
useEffect(() => {
setSearchText("");
diff --git a/app/client/src/sagas/DebuggerSagas.ts b/app/client/src/sagas/DebuggerSagas.ts
index d91842067bd9..41441ba5895b 100644
--- a/app/client/src/sagas/DebuggerSagas.ts
+++ b/app/client/src/sagas/DebuggerSagas.ts
@@ -58,7 +58,7 @@ import {
import { identifyEntityFromPath } from "../navigation/FocusEntity";
import { getIDEViewMode } from "../selectors/ideSelectors";
import type { EditorViewMode } from "IDE/Interfaces/EditorTypes";
-import { getDebuggerPaneConfig } from "../components/editorComponents/Debugger/hooks/useDebuggerTriggerClick";
+import { getDebuggerPaneConfig } from "../components/editorComponents/Debugger/utils/getDebuggerPaneConfig";
import { DEBUGGER_TAB_KEYS } from "../components/editorComponents/Debugger/constants";
let blockedSource: string | null = null;
diff --git a/app/client/src/selectors/debuggerSelectors.tsx b/app/client/src/selectors/debuggerSelectors.tsx
index 67df0c28bcc2..3d208435202e 100644
--- a/app/client/src/selectors/debuggerSelectors.tsx
+++ b/app/client/src/selectors/debuggerSelectors.tsx
@@ -7,8 +7,8 @@ import type { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidg
import { createSelector } from "reselect";
import { getWidgets } from "sagas/selectors";
import {
- shouldSuppressDebuggerError,
isWidget,
+ shouldSuppressDebuggerError,
} from "ee/workers/Evaluation/evaluationUtils";
import { getDataTree } from "./dataTreeSelectors";
import type { CanvasDebuggerState } from "reducers/uiReducers/debuggerReducer";
@@ -184,6 +184,3 @@ export const getCanvasDebuggerState = createSelector(
};
},
);
-
-export const getDebuggerStateInspectorSelectedItem = (state: AppState) =>
- state.ui.debugger.stateInspector.selectedItemId;
diff --git a/app/client/src/selectors/debuggerStateInspector.ts b/app/client/src/selectors/debuggerStateInspector.ts
new file mode 100644
index 000000000000..0f18d3df8eef
--- /dev/null
+++ b/app/client/src/selectors/debuggerStateInspector.ts
@@ -0,0 +1,4 @@
+import type { AppState } from "ee/reducers";
+
+export const getDebuggerStateInspectorSelectedItem = (state: AppState) =>
+ state.ui.debugger.stateInspector.selectedItemId;