fix: Selected item in State Inspector

app/client/src/actions/debuggerActions.ts

@@ -7,7 +7,6 @@ import type {
 } from "reducers/uiReducers/debuggerReducer";
 import type { EventName } from "ee/utils/analyticsUtilTypes";
 import type { APP_MODE } from "entities/App";
-import type { GenericEntityItem } from "ee/entities/IDE/constants";
 
 export interface LogDebuggerErrorAnalyticsPayload {
   entityName: string;
@@ -149,9 +148,7 @@ export const showDebuggerLogs = () => {
   };
 };
 
-export const setDebuggerStateInspectorSelectedItem = (
-  payload: GenericEntityItem,
-) => {
+export const setDebuggerStateInspectorSelectedItem = (payload: string) => {
   return {
     type: ReduxActionTypes.SET_DEBUGGER_STATE_INSPECTOR_SELECTED_ITEM,
     payload,

app/client/src/components/editorComponents/Debugger/StateInspector/StateInspector.test.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { render, screen, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { StateInspector } from "./StateInspector";
-import { useStateInspectorItems } from "./hooks";
+import { useStateInspectorItems, useGetDisplayData } from "./hooks";
 import { filterEntityGroupsBySearchTerm } from "IDE/utils";
 import { lightTheme } from "selectors/themeSelectors";
 import { ThemeProvider } from "styled-components";
@@ -14,6 +14,8 @@ const mockedUseStateInspectorItems = useStateInspectorItems as jest.Mock;
 const mockedFilterEntityGroupsBySearchTerm =
   filterEntityGroupsBySearchTerm as jest.Mock;
 
+const mockedUseGetDisplayData = useGetDisplayData as jest.Mock;
+
 describe("StateInspector", () => {
   beforeEach(() => {
     mockedFilterEntityGroupsBySearchTerm.mockImplementation(
@@ -26,13 +28,13 @@ describe("StateInspector", () => {
 
   it("renders search input and filters items based on search term", () => {
     mockedUseStateInspectorItems.mockReturnValue([
-      { title: "Item 1", icon: "icon1", code: { key: "value1" } },
+      { title: "Item 1", icon: "icon1" },
       [
         { group: "Group 1", items: [{ title: "Item 1" }] },
         { group: "Group 2", items: [{ title: "Item 2" }] },
       ],
-      { key: "value1" },
     ]);
+    mockedUseGetDisplayData.mockReturnValue({ key: "value1" });
     render(
       <ThemeProvider theme={lightTheme}>
         <StateInspector />
@@ -49,16 +51,16 @@ describe("StateInspector", () => {
     const mockOnClick = jest.fn();
 
     mockedUseStateInspectorItems.mockReturnValue([
-      { title: "Item 1", icon: "icon1", code: { key: "value1" } },
+      { title: "Item 1", icon: "icon1" },
       [
         { group: "Group 1", items: [{ title: "Item 1" }] },
         {
           group: "Group 2",
           items: [{ title: "Item 2", onClick: mockOnClick }],
         },
       ],
-      { key: "value1" },
     ]);
+    mockedUseGetDisplayData.mockReturnValue({ key: "value1" });
     render(
       <ThemeProvider theme={lightTheme}>
         <StateInspector />
@@ -71,16 +73,16 @@ describe("StateInspector", () => {
 
   it("Renders the selected item details", () => {
     mockedUseStateInspectorItems.mockReturnValue([
-      { title: "Item 1", icon: "icon1", code: { key: "value1" } },
+      { title: "Item 1", icon: "icon1" },
       [
         { group: "Group 1", items: [{ title: "Item 1" }] },
         {
           group: "Group 2",
           items: [{ title: "Item 2" }],
         },
       ],
-      { key: "Value1" },
     ]);
+    mockedUseGetDisplayData.mockReturnValue({ key: "Value1" });
     render(
       <ThemeProvider theme={lightTheme}>
         <StateInspector />
@@ -108,16 +110,16 @@ describe("StateInspector", () => {
 
   it("renders all items when search term is empty", () => {
     mockedUseStateInspectorItems.mockReturnValue([
-      { title: "Item 1", icon: "icon1", code: { key: "value1" } },
+      { title: "Item 1", icon: "icon1" },
       [
         { group: "Group 1", items: [{ title: "Item 1" }] },
         {
           group: "Group 2",
           items: [{ title: "Item 2" }],
         },
       ],
-      { key: "value1" },
     ]);
+    mockedUseGetDisplayData.mockReturnValue({ key: "value1" });
 
     render(
       <ThemeProvider theme={lightTheme}>
@@ -153,13 +155,13 @@ describe("StateInspector", () => {
 
   it("renders correctly when selected item has no code", () => {
     mockedUseStateInspectorItems.mockReturnValue([
-      { title: "Item 1", icon: "icon1", code: null },
+      { title: "Item 1", icon: "icon1" },
       [
         { group: "Group 1", items: [{ title: "Item 1" }] },
         { group: "Group 2", items: [{ title: "Item 2" }] },
       ],
-      {},
     ]);
+    mockedUseGetDisplayData.mockReturnValue({});
     render(
       <ThemeProvider theme={lightTheme}>
         <StateInspector />

app/client/src/components/editorComponents/Debugger/StateInspector/StateInspector.tsx

@@ -9,7 +9,7 @@ import {
 } from "@appsmith/ads";
 import { JSONViewer, Size } from "components/editorComponents/JSONViewer";
 import { filterEntityGroupsBySearchTerm } from "IDE/utils";
-import { useStateInspectorItems } from "./hooks";
+import { useStateInspectorItems, useGetDisplayData } from "./hooks";
 import * as Styled from "./styles";
 
 const GroupListPadding = {
@@ -18,7 +18,8 @@ const GroupListPadding = {
 } as FlexProps;
 
 export const StateInspector = () => {
-  const [selectedItem, items, selectedItemCode] = useStateInspectorItems();
+  const [selectedItem, items] = useStateInspectorItems();
+  const selectedItemCode = useGetDisplayData(selectedItem?.title || "");
   const [searchTerm, setSearchTerm] = useState("");
 
   const filteredItemGroups = filterEntityGroupsBySearchTerm<

app/client/src/components/editorComponents/Debugger/StateInspector/hooks/index.ts

@@ -1 +1,2 @@
 export { useStateInspectorItems } from "./useStateInspectorItems";
+export { useGetDisplayData } from "./useGetDisplayData";

app/client/src/components/editorComponents/Debugger/StateInspector/hooks/useGetDisplayData.ts

@@ -0,0 +1,25 @@
+import { useSelector } from "react-redux";
+import { getConfigTree, getDataTree } from "selectors/dataTreeSelectors";
+import { getJSCollections } from "ee/selectors/entitiesSelector";
+import { useMemo } from "react";
+import { filterInternalProperties } from "utils/FilterInternalProperties";
+
+export function useGetDisplayData(selectedItemName: string) {
+  const dataTree = useSelector(getDataTree);
+  const configTree = useSelector(getConfigTree);
+  const jsActions = useSelector(getJSCollections);
+
+  return useMemo(() => {
+    if (selectedItemName in dataTree && selectedItemName in configTree) {
+      return filterInternalProperties(
+        selectedItemName,
+        dataTree[selectedItemName],
+        jsActions,
+        dataTree,
+        configTree,
+      );
+    }
+
+    return "";
+  }, [configTree, dataTree, jsActions, selectedItemName]);
+}

app/client/src/components/editorComponents/Debugger/StateInspector/hooks/useStateInspectorItems.ts

@@ -7,94 +7,53 @@ import { useGetUIItemsForStateInspector } from "./useGetUIItemsForStateInspector
 import type { GroupedItems } from "../types";
 import { enhanceItemForListItem } from "../utils";
 import type { GenericEntityItem } from "ee/entities/IDE/constants";
-import { filterInternalProperties } from "utils/FilterInternalProperties";
-import { getConfigTree, getDataTree } from "selectors/dataTreeSelectors";
-import { getJSCollections } from "ee/selectors/entitiesSelector";
-import { useSelector } from "react-redux";
 
 export const useStateInspectorItems: () => [
   GenericEntityItem | undefined,
   GroupedItems[],
-  unknown,
 ] = () => {
-  const [selectedItem, setSelectedItem] = useStateInspectorState();
+  const [selectedItemId, setSelectedItem] = useStateInspectorState();
 
   const queries = useGetQueryItemsForStateInspector();
   const jsItems = useGetJSItemsForStateInspector();
   const uiItems = useGetUIItemsForStateInspector();
   const globalItems = useGetGlobalItemsForStateInspector();
 
-  const groups = useMemo(() => {
-    const returnValue: GroupedItems[] = [];
+  const [groups, selectedItem] = useMemo(() => {
+    const allGroups = [queries, jsItems, uiItems, globalItems];
 
-    if (queries.items.length) {
-      returnValue.push({
-        ...queries,
-        items: queries.items.map((query) =>
-          enhanceItemForListItem(query, selectedItem, setSelectedItem),
+    const processedGroups = allGroups
+      .filter((groupedItems) => groupedItems.items.length > 0)
+      .map((groupedItems) => ({
+        group: groupedItems.group,
+        items: groupedItems.items.map((item) =>
+          enhanceItemForListItem(item, selectedItemId, setSelectedItem),
         ),
-      });
-    }
+      }));
 
-    if (jsItems.items.length) {
-      returnValue.push({
-        ...jsItems,
-        items: jsItems.items.map((jsItem) =>
-          enhanceItemForListItem(jsItem, selectedItem, setSelectedItem),
-        ),
-      });
-    }
-
-    if (uiItems.items.length) {
-      returnValue.push({
-        ...uiItems,
-        items: uiItems.items.map((uiItem) =>
-          enhanceItemForListItem(uiItem, selectedItem, setSelectedItem),
-        ),
-      });
-    }
-
-    if (globalItems.items.length) {
-      returnValue.push({
-        ...globalItems,
-        items: globalItems.items.map((globalItem) =>
-          enhanceItemForListItem(globalItem, selectedItem, setSelectedItem),
-        ),
-      });
-    }
-
-    return returnValue;
-  }, [globalItems, jsItems, queries, selectedItem, setSelectedItem, uiItems]);
+    const selectedItemFromGroups = processedGroups
+      .flatMap((group) => group.items)
+      .find((item) => item.id === selectedItemId);
 
-  const dataTree = useSelector(getDataTree);
-  const configTree = useSelector(getConfigTree);
-  const jsActions = useSelector(getJSCollections);
-  let filteredData: unknown = "";
+    const selectedItem: GenericEntityItem | undefined = {
+      key: selectedItemFromGroups?.id || "",
+      title: selectedItemFromGroups?.title || "",
+      icon: selectedItemFromGroups?.startIcon,
+    };
 
-  if (selectedItem && selectedItem.title in dataTree) {
-    filteredData = filterInternalProperties(
-      selectedItem.title,
-      dataTree[selectedItem.title],
-      jsActions,
-      dataTree,
-      configTree,
-    );
-  }
+    return [processedGroups, selectedItem];
+  }, [globalItems, jsItems, queries, selectedItemId, setSelectedItem, uiItems]);
 
   useEffect(
     function handleNoItemSelected() {
-      if (!selectedItem || !(selectedItem.title in dataTree)) {
+      if (!selectedItemId) {
         const firstItem = groups[0].items[0];
 
-        setSelectedItem({
-          key: firstItem.id as string,
-          icon: firstItem.startIcon,
-          title: firstItem.title,
-        });
+        setSelectedItem(firstItem.id as string);
       }
     },
-    [dataTree, groups, selectedItem, setSelectedItem],
+    [groups, selectedItemId, setSelectedItem],
   );
 
-  return [selectedItem, groups, filteredData];
+  return [selectedItem, groups];
 };

app/client/src/components/editorComponents/Debugger/StateInspector/hooks/useStateInspectorState.ts

@@ -1,16 +1,15 @@
 import { useDispatch, useSelector } from "react-redux";
-import type { GenericEntityItem } from "ee/entities/IDE/constants";
 import { setDebuggerStateInspectorSelectedItem } from "actions/debuggerActions";
 import { getDebuggerStateInspectorSelectedItem } from "selectors/debuggerSelectors";
 
 export const useStateInspectorState: () => [
-  GenericEntityItem | undefined,
-  (item: GenericEntityItem) => void,
+  string | undefined,
+  (itemId: string) => void,
 ] = () => {
   const dispatch = useDispatch();
 
-  const setSelectedItem = (item: GenericEntityItem) => {
-    dispatch(setDebuggerStateInspectorSelectedItem(item));
+  const setSelectedItem = (itemId: string) => {
+    dispatch(setDebuggerStateInspectorSelectedItem(itemId));
   };
 
   const selectedItem = useSelector(getDebuggerStateInspectorSelectedItem);

app/client/src/components/editorComponents/Debugger/StateInspector/utils.ts

@@ -1,21 +1,15 @@
 import type { ListItemWithoutOnClick } from "./types";
 import type { ListItemProps } from "@appsmith/ads";
-import type { GenericEntityItem } from "ee/entities/IDE/constants";
 
 export const enhanceItemForListItem = (
   item: ListItemWithoutOnClick,
-  selectedItem: GenericEntityItem | undefined,
-  setSelectedItem: (item: GenericEntityItem) => void,
+  selectedItemId: string | undefined,
+  setSelectedItem: (itemId: string) => void,
 ): ListItemProps => {
   return {
     ...item,
-    isSelected: selectedItem ? selectedItem.key === item.id : false,
-    onClick: () =>
-      setSelectedItem({
-        key: item.id,
-        title: item.title,
-        icon: item.startIcon,
-      }),
+    isSelected: selectedItemId ? selectedItemId === item.id : false,
+    onClick: () => setSelectedItem(item.id as string),
     size: "md",
   };
 };

app/client/src/reducers/uiReducers/debuggerReducer.ts

@@ -6,7 +6,6 @@ import { omit, isUndefined, isEmpty } from "lodash";
 import equal from "fast-deep-equal";
 import { ActionExecutionResizerHeight } from "PluginActionEditor/components/PluginActionResponse/constants";
 import { klona } from "klona";
-import type { GenericEntityItem } from "ee/entities/IDE/constants";
 
 export const DefaultDebuggerContext = {
   scrollPosition: 0,
@@ -189,12 +188,12 @@ const debuggerReducer = createImmerReducer(initialState, {
   },
   [ReduxActionTypes.SET_DEBUGGER_STATE_INSPECTOR_SELECTED_ITEM]: (
     state: DebuggerReduxState,
-    action: ReduxAction<GenericEntityItem>,
+    action: ReduxAction<string>,
   ): DebuggerReduxState => {
     return {
       ...state,
       stateInspector: {
-        selectedItem: action.payload,
+        selectedItemId: action.payload,
       },
     };
   },
@@ -212,7 +211,7 @@ export interface DebuggerReduxState {
   hideErrors: boolean;
   context: DebuggerContext;
   stateInspector: {
-    selectedItem?: GenericEntityItem;
+    selectedItemId?: string;
   };
 }
 

app/client/src/selectors/debuggerSelectors.tsx

@@ -186,4 +186,4 @@ export const getCanvasDebuggerState = createSelector(
 );
 
 export const getDebuggerStateInspectorSelectedItem = (state: AppState) =>
-  state.ui.debugger.stateInspector.selectedItem;
+  state.ui.debugger.stateInspector.selectedItemId;