From b30d86ec6e11503993ae1f7a2559e3344135c6ca Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Thu, 19 Sep 2024 18:14:26 +0530 Subject: [PATCH] chore: Calling `changeApi` and `changeQuery` actions based on PluginType when plugin action form component is mounted (#36398) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 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" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: 528977f7e9aed43a6429a2a3c9aa7430e1183b91 > Cypress dashboard. > Tags: `@tag.All` > Spec: >
Thu, 19 Sep 2024 12:26:12 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No ## 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. --- .../PluginActionForm/PluginActionForm.tsx | 3 + .../hooks/useChangeActionCall.test.tsx | 108 ++++++++++++++++++ .../hooks/useChangeActionCall.ts | 33 ++++++ app/client/src/entities/Action/index.ts | 1 + 4 files changed, 145 insertions(+) create mode 100644 app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.test.tsx create mode 100644 app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.ts diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx index 17db33e698..4b3a2dd3a0 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx +++ b/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
; }; diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.test.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.test.tsx new file mode 100644 index 0000000000..c7af1a52bb --- /dev/null +++ b/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(); + }); +}); diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.ts b/app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.ts new file mode 100644 index 0000000000..562bbad867 --- /dev/null +++ b/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]); +}; diff --git a/app/client/src/entities/Action/index.ts b/app/client/src/entities/Action/index.ts index 402420e171..2278643cd8 100644 --- a/app/client/src/entities/Action/index.ts +++ b/app/client/src/entities/Action/index.ts @@ -188,6 +188,7 @@ export interface BaseAction { userPermissions?: string[]; errorReports?: Array; isPublic?: boolean; + packageId?: string; moduleId?: string; moduleInstanceId?: string; workflowId?: string;