feat: Inspect State CTA for discovery (#39100)

## Description

Adds various discovery points for State Inspector

Fixes #38934

## Automation

/ok-to-test tags="@tag.All"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/13329714726>
> Commit: e9dc239
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=13329714726&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Fri, 14 Feb 2025 15:47:53 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced an “Inspect State” option across various parts of the
interface, enabling users to directly review state details for widgets,
actions, and collections via context menus, toolbars, and property pane
actions.
- Added a new `InspectStateHeaderButton` and `InspectStateMenuItem` for
enhanced state inspection capabilities.
- **Style**
- Refined layout and typography in popups and menus for a cleaner, more
consistent user experience.
- **Bug Fixes**
- Enhanced type safety in property pane actions by enforcing stricter
type checks.
- **Chores**
- Updated imports and refactored related logic to streamline the
configuration handling for the debugger interface.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/cypress/e2e/Regression/ClientSide/PeekOverlay/PeekOverlay_Spec.ts

@@ -9,141 +9,145 @@ import {
   dataManager,
 } from "../../../../support/Objects/ObjectsCore";
 
-describe("Peek overlay", { tags: ["@tag.JS", "@tag.Binding"] }, () => {
-  it("1. Main test", () => {
-    entityExplorer.DragDropWidgetNVerify("tablewidgetv2", 500, 100);
-    table.AddSampleTableData();
-    apiPage.CreateAndFillApi(
-      dataManager.dsValues[dataManager.defaultEnviorment].mockApiUrl,
-    );
-    agHelper.Sleep(2000);
-    apiPage.RunAPI();
-    apiPage.CreateAndFillApi(
-      dataManager.dsValues[dataManager.defaultEnviorment].mockApiUrl,
-    );
-    agHelper.Sleep(2000);
-
-    jsEditor.CreateJSObject(JsObjectContent, {
-      paste: true,
-      completeReplace: true,
-      toRun: false,
-      shouldCreateNewJSObj: true,
-      lineNumber: 0,
-      prettify: true,
+describe(
+  "Peek overlay",
+  { tags: ["@tag.JS", "@tag.Binding", "@tag.IDE"] },
+  () => {
+    it("1. Main test", () => {
+      entityExplorer.DragDropWidgetNVerify("tablewidgetv2", 500, 100);
+      table.AddSampleTableData();
+      apiPage.CreateAndFillApi(
+        dataManager.dsValues[dataManager.defaultEnviorment].mockApiUrl,
+      );
+      agHelper.Sleep(2000);
+      apiPage.RunAPI();
+      apiPage.CreateAndFillApi(
+        dataManager.dsValues[dataManager.defaultEnviorment].mockApiUrl,
+      );
+      agHelper.Sleep(2000);
+
+      jsEditor.CreateJSObject(JsObjectContent, {
+        paste: true,
+        completeReplace: true,
+        toRun: false,
+        shouldCreateNewJSObj: true,
+        lineNumber: 0,
+        prettify: true,
+      });
+      jsEditor.SelectFunctionDropdown("myFun2");
+      jsEditor.RunJSObj();
+      agHelper.Sleep();
+      debuggerHelper.CloseBottomBar();
+
+      // check number array
+      peekOverlay.HoverCode(8, 3, "numArray");
+      peekOverlay.IsOverlayOpen();
+      peekOverlay.VerifyDataType("array");
+      peekOverlay.CheckPrimitveArrayInOverlay([1, 2, 3]);
+      peekOverlay.ResetHover();
+
+      // check basic object
+      peekOverlay.HoverCode(9, 3, "objectData");
+      peekOverlay.IsOverlayOpen();
+      peekOverlay.VerifyDataType("object");
+      peekOverlay.CheckBasicObjectInOverlay({ x: 123, y: "123" });
+      peekOverlay.ResetHover();
+
+      // check null - with this keyword
+      peekOverlay.HoverCode(10, 3, "nullData");
+      peekOverlay.IsOverlayOpen();
+      peekOverlay.VerifyDataType("null");
+      peekOverlay.CheckPrimitiveValue("null");
+      peekOverlay.ResetHover();
+
+      // check number
+      peekOverlay.HoverCode(11, 3, "numberData");
+      peekOverlay.IsOverlayOpen();
+      peekOverlay.VerifyDataType("number");
+      peekOverlay.CheckPrimitiveValue("1");
+      peekOverlay.ResetHover();
+
+      // check boolean
+      peekOverlay.HoverCode(12, 3, "isLoading");
+      peekOverlay.IsOverlayOpen();
+      peekOverlay.VerifyDataType("boolean");
+      peekOverlay.CheckPrimitiveValue("false");
+      peekOverlay.ResetHover();
+
+      // TODO: handle this function failure on CI tests -> "function(){}"
+      // check function
+      // peekOverlay.HoverCode(13, 3, "run");
+      // peekOverlay.IsOverlayOpen();
+      // peekOverlay.VerifyDataType("function");
+      // peekOverlay.CheckPrimitiveValue("function () {}");
+      // peekOverlay.ResetHover();
+
+      // check undefined
+      peekOverlay.HoverCode(14, 3, "data");
+      peekOverlay.IsOverlayOpen();
+      peekOverlay.VerifyDataType("undefined");
+      peekOverlay.CheckPrimitiveValue("undefined");
+      peekOverlay.ResetHover();
+
+      // check string
+      peekOverlay.HoverCode(15, 3, "mode");
+      peekOverlay.IsOverlayOpen();
+      peekOverlay.VerifyDataType("string");
+      peekOverlay.CheckPrimitiveValue("EDIT");
+      peekOverlay.ResetHover();
+
+      // check if overlay closes
+      peekOverlay.HoverCode(16, 3, "store");
+      peekOverlay.IsOverlayOpen();
+      peekOverlay.ResetHover();
+      peekOverlay.IsOverlayOpen(false);
+
+      // widget object
+      peekOverlay.HoverCode(17, 1, "Table1");
+      peekOverlay.IsOverlayOpen();
+      peekOverlay.VerifyDataType("object");
+      peekOverlay.ResetHover();
+
+      // widget property
+      peekOverlay.HoverCode(18, 3, "pageNo");
+      peekOverlay.IsOverlayOpen();
+      peekOverlay.VerifyDataType("number");
+      peekOverlay.CheckPrimitiveValue("1");
+      peekOverlay.ResetHover();
+
+      // widget property
+      peekOverlay.HoverCode(19, 3, "tableData");
+      peekOverlay.IsOverlayOpen();
+      peekOverlay.VerifyDataType("array");
+      peekOverlay.CheckObjectArrayInOverlay([{}, {}, {}]);
+      peekOverlay.ResetHover();
+
+      // basic nested property
+      peekOverlay.HoverCode(20, 7, "id");
+      peekOverlay.IsOverlayOpen();
+      peekOverlay.VerifyDataType("number");
+      peekOverlay.CheckPrimitiveValue("1");
+      peekOverlay.ResetHover();
+
+      // undefined object
+      peekOverlay.HoverCode(21, 1, "aljshdlja");
+      peekOverlay.IsOverlayOpen(false);
+      peekOverlay.ResetHover();
+
+      // this keyword
+      peekOverlay.HoverCode(22, 3, "numArray");
+      peekOverlay.IsOverlayOpen();
+      peekOverlay.VerifyDataType("array");
+      peekOverlay.CheckPrimitveArrayInOverlay([1, 2, 3]);
+      peekOverlay.ResetHover();
+
+      // pageList is an internal property - peek overlay shouldn't work
+      peekOverlay.HoverCode(23, 1, "pageList");
+      peekOverlay.IsOverlayOpen(false);
+      peekOverlay.ResetHover();
     });
-    jsEditor.SelectFunctionDropdown("myFun2");
-    jsEditor.RunJSObj();
-    agHelper.Sleep();
-    debuggerHelper.CloseBottomBar();
-
-    // check number array
-    peekOverlay.HoverCode(8, 3, "numArray");
-    peekOverlay.IsOverlayOpen();
-    peekOverlay.VerifyDataType("array");
-    peekOverlay.CheckPrimitveArrayInOverlay([1, 2, 3]);
-    peekOverlay.ResetHover();
-
-    // check basic object
-    peekOverlay.HoverCode(9, 3, "objectData");
-    peekOverlay.IsOverlayOpen();
-    peekOverlay.VerifyDataType("object");
-    peekOverlay.CheckBasicObjectInOverlay({ x: 123, y: "123" });
-    peekOverlay.ResetHover();
-
-    // check null - with this keyword
-    peekOverlay.HoverCode(10, 3, "nullData");
-    peekOverlay.IsOverlayOpen();
-    peekOverlay.VerifyDataType("null");
-    peekOverlay.CheckPrimitiveValue("null");
-    peekOverlay.ResetHover();
-
-    // check number
-    peekOverlay.HoverCode(11, 3, "numberData");
-    peekOverlay.IsOverlayOpen();
-    peekOverlay.VerifyDataType("number");
-    peekOverlay.CheckPrimitiveValue("1");
-    peekOverlay.ResetHover();
-
-    // check boolean
-    peekOverlay.HoverCode(12, 3, "isLoading");
-    peekOverlay.IsOverlayOpen();
-    peekOverlay.VerifyDataType("boolean");
-    peekOverlay.CheckPrimitiveValue("false");
-    peekOverlay.ResetHover();
-
-    // TODO: handle this function failure on CI tests -> "function(){}"
-    // check function
-    // peekOverlay.HoverCode(13, 3, "run");
-    // peekOverlay.IsOverlayOpen();
-    // peekOverlay.VerifyDataType("function");
-    // peekOverlay.CheckPrimitiveValue("function () {}");
-    // peekOverlay.ResetHover();
-
-    // check undefined
-    peekOverlay.HoverCode(14, 3, "data");
-    peekOverlay.IsOverlayOpen();
-    peekOverlay.VerifyDataType("undefined");
-    peekOverlay.CheckPrimitiveValue("undefined");
-    peekOverlay.ResetHover();
-
-    // check string
-    peekOverlay.HoverCode(15, 3, "mode");
-    peekOverlay.IsOverlayOpen();
-    peekOverlay.VerifyDataType("string");
-    peekOverlay.CheckPrimitiveValue("EDIT");
-    peekOverlay.ResetHover();
-
-    // check if overlay closes
-    peekOverlay.HoverCode(16, 3, "store");
-    peekOverlay.IsOverlayOpen();
-    peekOverlay.ResetHover();
-    peekOverlay.IsOverlayOpen(false);
-
-    // widget object
-    peekOverlay.HoverCode(17, 1, "Table1");
-    peekOverlay.IsOverlayOpen();
-    peekOverlay.VerifyDataType("object");
-    peekOverlay.ResetHover();
-
-    // widget property
-    peekOverlay.HoverCode(18, 3, "pageNo");
-    peekOverlay.IsOverlayOpen();
-    peekOverlay.VerifyDataType("number");
-    peekOverlay.CheckPrimitiveValue("1");
-    peekOverlay.ResetHover();
-
-    // widget property
-    peekOverlay.HoverCode(19, 3, "tableData");
-    peekOverlay.IsOverlayOpen();
-    peekOverlay.VerifyDataType("array");
-    peekOverlay.CheckObjectArrayInOverlay([{}, {}, {}]);
-    peekOverlay.ResetHover();
-
-    // basic nested property
-    peekOverlay.HoverCode(20, 7, "id");
-    peekOverlay.IsOverlayOpen();
-    peekOverlay.VerifyDataType("number");
-    peekOverlay.CheckPrimitiveValue("1");
-    peekOverlay.ResetHover();
-
-    // undefined object
-    peekOverlay.HoverCode(21, 1, "aljshdlja");
-    peekOverlay.IsOverlayOpen(false);
-    peekOverlay.ResetHover();
-
-    // this keyword
-    peekOverlay.HoverCode(22, 3, "numArray");
-    peekOverlay.IsOverlayOpen();
-    peekOverlay.VerifyDataType("array");
-    peekOverlay.CheckPrimitveArrayInOverlay([1, 2, 3]);
-    peekOverlay.ResetHover();
-
-    // pageList is an internal property - peek overlay shouldn't work
-    peekOverlay.HoverCode(23, 1, "pageList");
-    peekOverlay.IsOverlayOpen(false);
-    peekOverlay.ResetHover();
-  });
-});
+  },
+);
 
 const JsObjectContent = `export default {
   numArray: [1, 2, 3],

app/client/cypress/support/Pages/PeekOverlay.ts

@@ -4,6 +4,7 @@ export class PeekOverlay {
   private readonly locators = {
     _overlayContainer: "#t--peek-overlay-container",
     _dataContainer: "#t--peek-overlay-data",
+    _dataTypeContainer: '[data-testid="t--peek-overlay-data-type"]',
 
     // react json viewer selectors
     _rjv_variableValue: ".variable-value",
@@ -108,8 +109,7 @@ export class PeekOverlay {
 
   VerifyDataType(type: string) {
     this.agHelper
-      .GetElement(this.locators._overlayContainer)
-      .children("div")
+      .GetElement(this.locators._dataTypeContainer)
       .eq(0)
       .should("have.text", type);
   }

app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx

@@ -1123,6 +1123,10 @@ const SalesforceIcon = importSvg(
   async () => import("../__assets__/icons/ads/salesforce.svg"),
 );
 
+const StateInspectorIcon = importSvg(
+  async () => import("../__assets__/icons/ads/state-inspector.svg"),
+);
+
 const MdFileIcon = importSvg(
   async () => import("../__assets__/icons/ads/md-file.svg"),
 );
@@ -1560,6 +1564,7 @@ const ICON_LOOKUP = {
   zendesk: ZendeskIcon,
   "google-drive": GoogleDriveIcon,
   salesforce: SalesforceIcon,
+  "state-inspector": StateInspectorIcon,
 };
 
 export const IconCollection = Object.keys(ICON_LOOKUP);

app/client/src/actions/debuggerActions.ts

@@ -147,10 +147,3 @@ export const showDebuggerLogs = () => {
     type: ReduxActionTypes.SHOW_DEBUGGER_LOGS,
   };
 };
-
-export const setDebuggerStateInspectorSelectedItem = (payload: string) => {
-  return {
-    type: ReduxActionTypes.SET_DEBUGGER_STATE_INSPECTOR_SELECTED_ITEM,
-    payload,
-  };
-};

app/client/src/actions/debuggerStateInspector.ts

@@ -0,0 +1,8 @@
+import { ReduxActionTypes } from "ee/constants/ReduxActionConstants";
+
+export const setDebuggerStateInspectorSelectedItem = (payload: string) => {
+  return {
+    type: ReduxActionTypes.SET_DEBUGGER_STATE_INSPECTOR_SELECTED_ITEM,
+    payload,
+  };
+};

app/client/src/ce/constants/messages.ts

@@ -1775,6 +1775,7 @@ export const CONTEXT_SETTINGS = () => "Settings";
 export const CONTEXT_PARTIAL_EXPORT = () => "Export";
 export const CONTEXT_PARTIAL_IMPORT = () => "Import";
 export const CONTEXT_SET_AS_HOME_PAGE = () => "Set as home page";
+export const CONTEXT_INSPECT_STATE = () => "Inspect state";
 export const PAGE = () => "Page";
 export const PAGES = () => "Pages";