chore: Calling changeApi and changeQuery actions based on PluginType when plugin action form component is mounted (#36398)

## Description

Calling `changeApi` and `changeQuery` actions based on PluginType when
plugin action form component is mounted in the new Plugin action
modularisation flow.

Fixes #36344 #36345 

## 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/10939522143>
> Commit: 528977f7e9aed43a6429a2a3c9aa7430e1183b91
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10939522143&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Thu, 19 Sep 2024 12:26:12 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 a new hook, `useChangeActionCall`, to enhance action
management within the IDE.
- Integrated `useChangeActionCall` into the `PluginActionForm` component
for improved interactivity.

- **Tests**
- Added unit tests for the `useChangeActionCall` hook to ensure correct
action dispatching based on plugin context.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx

@@ -1,6 +1,9 @@
 import React from "react";
+import { useChangeActionCall } from "./hooks/useChangeActionCall";
 
 const PluginActionForm = () => {
+  useChangeActionCall();
+
   return <div />;
 };
 

app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.test.tsx

@@ -0,0 +1,108 @@
+import { renderHook } from "@testing-library/react-hooks/dom";
+import { useDispatch } from "react-redux";
+import { PluginType } from "entities/Action";
+import { usePluginActionContext } from "PluginActionEditor";
+import { changeApi } from "actions/apiPaneActions";
+import { changeQuery } from "actions/queryPaneActions";
+import { useChangeActionCall } from "./useChangeActionCall";
+
+jest.mock("react-redux", () => ({
+  useDispatch: jest.fn(),
+}));
+
+jest.mock("actions/apiPaneActions", () => ({
+  changeApi: jest.fn(),
+}));
+
+jest.mock("actions/queryPaneActions", () => ({
+  changeQuery: jest.fn(),
+}));
+
+jest.mock("PluginActionEditor", () => ({
+  usePluginActionContext: jest.fn(),
+}));
+
+describe("useChangeActionCall hook", () => {
+  const dispatchMock = jest.fn();
+
+  beforeEach(() => {
+    (useDispatch as jest.Mock).mockReturnValue(dispatchMock);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should dispatch changeApi when plugin type is API", () => {
+    const actionMock = { id: "actionId" };
+    const pluginMock = { id: "pluginId", type: PluginType.API };
+
+    // Mock the return values of usePluginActionContext
+    (usePluginActionContext as jest.Mock).mockReturnValue({
+      action: actionMock,
+      plugin: pluginMock,
+    });
+
+    // Render the hook
+    renderHook(() => useChangeActionCall());
+
+    // Expect changeApi to be called with the correct parameters
+    expect(changeApi).toHaveBeenCalledWith(actionMock.id, false);
+    expect(dispatchMock).toHaveBeenCalledWith(changeApi(actionMock.id, false));
+  });
+
+  it("should dispatch changeQuery when plugin type is not API", () => {
+    const actionMock = {
+      id: "actionId",
+      pageId: "pageId",
+      applicationId: "applicationId",
+      packageId: "packageId",
+      moduleId: "moduleId",
+      workflowId: "workflowId",
+    };
+    const pluginMock = { id: "pluginId", type: "OTHER_PLUGIN_TYPE" };
+
+    // Mock the return values of usePluginActionContext
+    (usePluginActionContext as jest.Mock).mockReturnValue({
+      action: actionMock,
+      plugin: pluginMock,
+    });
+
+    // Render the hook
+    renderHook(() => useChangeActionCall());
+
+    // Expect changeQuery to be called with the correct parameters
+    expect(changeQuery).toHaveBeenCalledWith({
+      baseQueryId: actionMock.id,
+      basePageId: actionMock.pageId,
+      applicationId: actionMock.applicationId,
+      packageId: actionMock.packageId,
+      moduleId: actionMock.moduleId,
+      workflowId: actionMock.workflowId,
+    });
+    expect(dispatchMock).toHaveBeenCalledWith(
+      changeQuery({
+        baseQueryId: actionMock.id,
+        basePageId: actionMock.pageId,
+        applicationId: actionMock.applicationId,
+        packageId: actionMock.packageId,
+        moduleId: actionMock.moduleId,
+        workflowId: actionMock.workflowId,
+      }),
+    );
+  });
+
+  it("should not dispatch any action if plugin id or action is not available", () => {
+    // Mock the return values of usePluginActionContext without plugin or action
+    (usePluginActionContext as jest.Mock).mockReturnValue({
+      action: null,
+      plugin: { id: null, type: PluginType.API },
+    });
+
+    // Render the hook
+    renderHook(() => useChangeActionCall());
+
+    // Expect no action to be dispatched
+    expect(dispatchMock).not.toHaveBeenCalled();
+  });
+});

app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.ts

@@ -0,0 +1,33 @@
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+import { changeApi } from "actions/apiPaneActions";
+import { changeQuery } from "actions/queryPaneActions";
+import { PluginType } from "entities/Action";
+import { usePluginActionContext } from "PluginActionEditor";
+
+export const useChangeActionCall = () => {
+  const { action, plugin } = usePluginActionContext();
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (!plugin?.id || !action) return;
+
+    switch (plugin?.type) {
+      case PluginType.API:
+        dispatch(changeApi(action?.id, false));
+        break;
+      default:
+        dispatch(
+          changeQuery({
+            baseQueryId: action?.id,
+            basePageId: action.pageId,
+            applicationId: action.applicationId,
+            packageId: action.packageId,
+            moduleId: action.moduleId,
+            workflowId: action.workflowId,
+          }),
+        );
+        break;
+    }
+  }, [action, plugin, dispatch]);
+};

app/client/src/entities/Action/index.ts

@@ -188,6 +188,7 @@ export interface BaseAction {
   userPermissions?: string[];
   errorReports?: Array<LayoutOnLoadActionErrors>;
   isPublic?: boolean;
+  packageId?: string;
   moduleId?: string;
   moduleInstanceId?: string;
   workflowId?: string;