feat: add generate schema button

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

@@ -9,9 +9,15 @@ import {
   useAnalyticsOnRunClick,
 } from "../hooks";
 import { useSelector } from "react-redux";
-import { isActionRunning } from "../store";
+import {
+  isActionRunning,
+  isActionSaving,
+  isActionSchemaGenerating,
+} from "../store";
 import PluginActionSettings from "./PluginActionSettings";
 import { PluginActionContextMenu } from "./PluginActionContextMenu";
+import { useHandleGenerateSchemaClick } from "../hooks/useHandleGenerateSchemaClick";
+import { getIsAnvilLayoutEnabled } from "../../layoutSystems/anvil/integrations/selectors";
 
 interface PluginActionToolbarProps {
   runOptions?: React.ReactNode;
@@ -22,9 +28,13 @@ interface PluginActionToolbarProps {
 const PluginActionToolbar = (props: PluginActionToolbarProps) => {
   const { action } = usePluginActionContext();
   const { handleRunClick } = useHandleRunClick();
+  const { handleGenerateSchemaClick } = useHandleGenerateSchemaClick();
   const { callRunActionAnalytics } = useAnalyticsOnRunClick();
   const blockExecution = useBlockExecution();
   const isRunning = useSelector(isActionRunning(action.id));
+  const isSaving = useSelector(isActionSaving(action.id));
+  const isSchemaGenerating = useSelector(isActionSchemaGenerating(action.id));
+  const isAnvilEnabled = useSelector(getIsAnvilLayoutEnabled);
 
   const onRunClick = useCallback(() => {
     callRunActionAnalytics();
@@ -43,7 +53,7 @@ const PluginActionToolbar = (props: PluginActionToolbarProps) => {
         >
           <Button
             data-testid="t--run-action"
-            isDisabled={blockExecution}
+            isDisabled={blockExecution || isSchemaGenerating}
             isLoading={isRunning}
             kind="primary"
             onClick={onRunClick}
@@ -52,6 +62,18 @@ const PluginActionToolbar = (props: PluginActionToolbarProps) => {
             Run
           </Button>
         </Tooltip>
+        {isAnvilEnabled && (
+          <Button
+            data-testid="t--schema-action"
+            isDisabled={blockExecution || isSaving}
+            isLoading={isSchemaGenerating}
+            kind="secondary"
+            onClick={handleGenerateSchemaClick}
+            size="sm"
+          >
+            Save
+          </Button>
+        )}
         <PluginActionSettings />
         {props.menuContent ? (
           <PluginActionContextMenu

app/client/src/PluginActionEditor/hooks/useHandleGenerateSchemaClick.ts

@@ -0,0 +1,17 @@
+import { generatePluginActionSchema } from "actions/generateSchemaActions";
+import { usePluginActionContext } from "PluginActionEditor/PluginActionContext";
+import { useCallback } from "react";
+import { useDispatch } from "react-redux";
+
+function useHandleGenerateSchemaClick() {
+  const { action } = usePluginActionContext();
+  const dispatch = useDispatch();
+
+  const handleGenerateSchemaClick = useCallback(() => {
+    dispatch(generatePluginActionSchema(action?.id ?? ""));
+  }, [action?.id, dispatch]);
+
+  return { handleGenerateSchemaClick };
+}
+
+export { useHandleGenerateSchemaClick };

app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts

@@ -20,6 +20,16 @@ export const isActionDirty = (id: string) =>
 const getActionRunningState = (state: AppState) =>
   state.ui.pluginActionEditor.isRunning;
 
+const getActionSchemaGeneratingState = (state: AppState) =>
+  state.ui.pluginActionEditor.isSchemaGenerating;
+
+export const isActionSchemaGenerating = (id: string) =>
+  createSelector(
+    [getActionSchemaGeneratingState],
+    (isSchemaGeneratingMap) =>
+      id in isSchemaGeneratingMap && isSchemaGeneratingMap[id],
+  );
+
 export const isActionRunning = (id: string) =>
   createSelector(
     [getActionRunningState],

app/client/src/PluginActionEditor/store/pluginEditorReducer.ts

@@ -22,6 +22,7 @@ export interface PluginActionEditorState {
   isCreating: boolean;
   isRunning: Record<string, boolean>;
   isSaving: Record<string, boolean>;
+  isSchemaGenerating: Record<string, boolean>;
   isDeleting: Record<string, boolean>;
   isDirty: Record<string, boolean>;
   runErrorMessage: Record<string, string>;
@@ -34,6 +35,7 @@ const initialState: PluginActionEditorState = {
   isCreating: false,
   isRunning: {},
   isSaving: {},
+  isSchemaGenerating: {},
   isDeleting: {},
   isDirty: {},
   runErrorMessage: {},
@@ -141,6 +143,26 @@ export const handlers = {
     set(state, ["isRunning", id], false);
     set(state, ["runErrorMessage", id], error.message);
   },
+  [ReduxActionTypes.GENERATE_PLUGIN_ACTION_SCHEMA_REQUEST]: (
+    state: PluginActionEditorState,
+    action: ReduxAction<{
+      id: string;
+    }>,
+  ) => {
+    set(state, ["isSchemaGenerating", action.payload.id], true);
+  },
+  [ReduxActionTypes.GENERATE_PLUGIN_ACTION_SCHEMA_SUCCESS]: (
+    state: PluginActionEditorState,
+    action: ReduxAction<{ id: string }>,
+  ) => {
+    set(state, ["isSchemaGenerating", action.payload.id], false);
+  },
+  [ReduxActionErrorTypes.GENERATE_PLUGIN_ACTION_SCHEMA_ERROR]: (
+    state: PluginActionEditorState,
+    action: ReduxAction<{ id: string }>,
+  ) => {
+    set(state, ["isSchemaGenerating", action.payload.id], false);
+  },
   [ReduxActionTypes.SET_PLUGIN_ACTION_EDITOR_FORM_SELECTED_TAB]: (
     state: PluginActionEditorState,
     action: ReduxAction<{ selectedTab: string }>,

app/client/src/actions/generateSchemaActions.ts

@@ -0,0 +1,18 @@
+import { ReduxActionTypes } from "ee/constants/ReduxActionConstants";
+import type { JSAction } from "entities/JSCollection";
+
+export const generateJSFunctionSchema = (action: JSAction) => {
+  return {
+    type: ReduxActionTypes.GENERATE_JS_FUNCTION_SCHEMA_REQUEST,
+    payload: {
+      action,
+    },
+  };
+};
+
+export const generatePluginActionSchema = (id: string) => {
+  return {
+    type: ReduxActionTypes.GENERATE_PLUGIN_ACTION_SCHEMA_REQUEST,
+    payload: { id },
+  };
+};

app/client/src/api/SchemaAPI.ts

@@ -0,0 +1,17 @@
+import API from "api/Api";
+import type { AxiosPromise } from "axios";
+
+export interface GenerateSchemaResponse {
+  description: string;
+  schema: unknown;
+}
+
+export class SchemaAPI extends API {
+  static url = "v1/actions";
+
+  static async generateSchema(
+    actionId: string,
+  ): Promise<AxiosPromise<GenerateSchemaResponse>> {
+    return API.patch(`${SchemaAPI.url}/${actionId}/schema`);
+  }
+}

app/client/src/ce/constants/ReduxActionConstants.tsx

@@ -710,6 +710,16 @@ const ActionExecutionTypes = {
   RUN_ACTION_REQUEST: "RUN_ACTION_REQUEST",
   RUN_ACTION_CANCELLED: "RUN_ACTION_CANCELLED",
   RUN_ACTION_SUCCESS: "RUN_ACTION_SUCCESS",
+  GENERATE_JS_FUNCTION_SCHEMA_REQUEST: "GENERATE_JS_FUNCTION_SCHEMA_REQUEST",
+  GENERATE_JS_FUNCTION_SCHEMA_CANCELLED:
+    "GENERATE_JS_FUNCTION_SCHEMA_CANCELLED",
+  GENERATE_JS_FUNCTION_SCHEMA_SUCCESS: "GENERATE_JS_FUNCTION_SCHEMA_SUCCESS",
+  GENERATE_PLUGIN_ACTION_SCHEMA_REQUEST:
+    "GENERATE_PLUGIN_ACTION_SCHEMA_REQUEST",
+  GENERATE_PLUGIN_ACTION_SCHEMA_CANCELLED:
+    "GENERATE_PLUGIN_ACTION_SCHEMA_CANCELLED",
+  GENERATE_PLUGIN_ACTION_SCHEMA_SUCCESS:
+    "GENERATE_PLUGIN_ACTION_SCHEMA_SUCCESS",
   CLEAR_ACTION_RESPONSE: "CLEAR_ACTION_RESPONSE",
   SHOW_ACTION_MODAL: "SHOW_ACTION_MODAL",
   CANCEL_ACTION_MODAL: "CANCEL_ACTION_MODAL",
@@ -722,6 +732,8 @@ const ActionExecutionTypes = {
 
 const ActionExecutionErrorTypes = {
   RUN_ACTION_ERROR: "RUN_ACTION_ERROR",
+  GENERATE_JS_FUNCTION_SCHEMA_ERROR: "GENERATE_JS_FUNCTION_SCHEMA_ERROR",
+  GENERATE_PLUGIN_ACTION_SCHEMA_ERROR: "GENERATE_PLUGIN_ACTION_SCHEMA_ERROR",
   EXECUTE_PLUGIN_ACTION_ERROR: "EXECUTE_PLUGIN_ACTION_ERROR",
 };
 

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

@@ -649,6 +649,7 @@ export const EXPORT_DEFAULT_BEGINNING = () =>
   `Start object with export default`;
 export const ACTION_EXECUTION_FAILED = (actionName: string) =>
   `The action "${actionName}" has failed.`;
+export const CANNOT_GENERATE_SCHEMA = () => "Can't generate schema";
 export const JS_EXECUTION_TRIGGERED = () => "Function triggered";
 export const JS_EXECUTION_SUCCESS = () => "Function executed";
 export const JS_EXECUTION_FAILURE = () => "Function execution failed";

app/client/src/ce/sagas/index.tsx

@@ -51,6 +51,7 @@ import communityTemplateSagas from "sagas/CommunityTemplatesSagas";
 import anvilSagas from "layoutSystems/anvil/integrations/sagas";
 import ideSagas from "sagas/IDESaga";
 import sendSideBySideWidgetHoverAnalyticsEventSaga from "sagas/AnalyticsSaga";
+import { watchGeneratePluginActionSchemaSaga } from "sagas/GenerateSchemaSaga";
 import gitSagas from "git/sagas";
 
 /* Sagas that are registered by a module that is designed to be independent of the core platform */
@@ -64,6 +65,7 @@ export const sagas = [
   watchJSActionSagas,
   watchActionExecutionSagas,
   watchPluginActionExecutionSagas,
+  watchGeneratePluginActionSchemaSaga,
   widgetOperationSagas,
   errorSagas,
   watchDatasourcesSagas,

app/client/src/pages/Editor/JSEditor/Form.tsx

@@ -30,7 +30,11 @@ import {
 } from "./utils";
 import JSObjectHotKeys from "./JSObjectHotKeys";
 import { Form, FormWrapper } from "./styledComponents";
-import { getJSPaneConfigSelectedTab } from "selectors/jsPaneSelectors";
+import {
+  getIsGeneratingSchema,
+  getIsJSCollectionSaving,
+  getJSPaneConfigSelectedTab,
+} from "selectors/jsPaneSelectors";
 import type { EventLocation } from "ee/utils/analyticsUtilTypes";
 import {
   setCodeEditorCursorAction,
@@ -57,6 +61,7 @@ import {
   getJSActionOption,
   type OnUpdateSettingsProps,
 } from "./JSEditorToolbar";
+import { generateJSFunctionSchema } from "../../../actions/generateSchemaActions";
 
 interface JSFormProps {
   jsCollectionData: JSCollectionData;
@@ -153,6 +158,12 @@ function JSEditorForm({
       selectedJSActionOption.data?.id || "",
     ),
   );
+  const isGeneratingSchema = useSelector((state: AppState) =>
+    getIsGeneratingSchema(state, currentJSCollection.id),
+  );
+  const isJSCollectionSaving = useSelector((state: AppState) =>
+    getIsJSCollectionSaving(state, currentJSCollection.id),
+  );
 
   useEffect(() => {
     if (hash) {
@@ -287,6 +298,12 @@ function JSEditorForm({
     }
   };
 
+  const handleGenerateSchemaButtonClick = async () => {
+    if (selectedJSActionOption.data?.id) {
+      dispatch(generateJSFunctionSchema(selectedJSActionOption.data));
+    }
+  };
+
   useEffect(() => {
     if (parseErrors.length || isEmpty(jsActions)) {
       setDisableRunFunctionality(true);
@@ -339,10 +356,16 @@ function JSEditorForm({
           <JSEditorToolbar
             changePermitted={isChangePermitted}
             contextMenu={contextMenu}
-            disableRunFunctionality={disableRunFunctionality}
+            disableGenerateSchemaFunctionality={
+              isExecutingCurrentJSAction || isJSCollectionSaving
+            }
+            disableRunFunctionality={
+              disableRunFunctionality || isGeneratingSchema
+            }
             executePermitted={isExecutePermitted}
             hideContextMenuOnEditor={hideContextMenuOnEditor}
             hideEditIconOnEditor={hideEditIconOnEditor}
+            isGeneratingSchema={isGeneratingSchema}
             jsActions={jsActions}
             jsCollection={currentJSCollection}
             loading={isExecutingCurrentJSAction}
@@ -351,6 +374,7 @@ function JSEditorForm({
             ) => {
               handleRunAction(event, "JS_OBJECT_MAIN_RUN_BUTTON");
             }}
+            onGenerateSchemaButtonClick={handleGenerateSchemaButtonClick}
             onSelect={handleJSActionOptionSelection}
             onUpdateSettings={onUpdateSettings}
             saveJSObjectName={saveJSObjectName}

app/client/src/pages/Editor/JSEditor/JSEditorToolbar/JSEditorToolbar.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { useSelector } from "react-redux";
 import { IDEToolbar, ToolbarSettingsPopover } from "IDE";
 import { JSFunctionRun } from "./components/JSFunctionRun";
 import type { JSActionDropdownOption, OnUpdateSettingsProps } from "./types";
@@ -10,6 +11,9 @@ import { createMessage, JS_EDITOR_SETTINGS } from "ee/constants/messages";
 import { JSFunctionSettings } from "./components/JSFunctionSettings";
 import { convertJSActionsToDropdownOptions } from "./utils";
 import { JSObjectNameEditor } from "./JSObjectNameEditor";
+import { JSFunctionGenerateSchema } from "./components/JSFunctionGenerateSchema";
+import { Flex } from "@appsmith/ads";
+import { getIsAnvilLayoutEnabled } from "../../../../layoutSystems/anvil/integrations/selectors";
 
 interface Props {
   changePermitted: boolean;
@@ -20,12 +24,17 @@ interface Props {
   hideContextMenuOnEditor?: boolean;
   contextMenu: React.ReactNode;
   disableRunFunctionality: boolean;
+  disableGenerateSchemaFunctionality: boolean;
   executePermitted: boolean;
   loading: boolean;
+  isGeneratingSchema: boolean;
   jsCollection: JSCollection;
   onButtonClick: (
     event: React.MouseEvent<HTMLElement, MouseEvent> | KeyboardEvent,
   ) => void;
+  onGenerateSchemaButtonClick: (
+    event: React.MouseEvent<HTMLElement, MouseEvent> | KeyboardEvent,
+  ) => void;
   onSelect: DropdownOnSelect;
   jsActions: JSAction[];
   selected: JSActionDropdownOption;
@@ -42,6 +51,7 @@ interface Props {
  */
 export const JSEditorToolbar = (props: Props) => {
   const [isOpen, setIsOpen] = useState(false);
+  const isAnvilEnabled = useSelector(getIsAnvilLayoutEnabled);
 
   // Render the IDEToolbar with JSFunctionRun and JSFunctionSettings components
   return (
@@ -55,7 +65,7 @@ export const JSEditorToolbar = (props: Props) => {
         )}
       </IDEToolbar.Left>
       <IDEToolbar.Right>
-        <div className="t--formActionButtons">
+        <Flex className="t--formActionButtons" gap="spaces-2">
           <JSFunctionRun
             disabled={props.disableRunFunctionality || !props.executePermitted}
             isLoading={props.loading}
@@ -66,7 +76,16 @@ export const JSEditorToolbar = (props: Props) => {
             selected={props.selected}
             showTooltip={!props.selected.data}
           />
-        </div>
+          {isAnvilEnabled && (
+            <JSFunctionGenerateSchema
+              disabled={
+                props.disableGenerateSchemaFunctionality || props.loading
+              }
+              isLoading={props.isGeneratingSchema}
+              onButtonClick={props.onGenerateSchemaButtonClick}
+            />
+          )}
+        </Flex>
         {props.showSettings ? (
           <ToolbarSettingsPopover
             dataTestId={"t--js-settings-trigger"}

app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionGenerateSchema.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import { Button } from "@appsmith/ads";
+import { testLocators } from "../constants";
+
+interface Props {
+  disabled: boolean;
+  isLoading: boolean;
+  onButtonClick: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}
+
+export const JSFunctionGenerateSchema = (props: Props) => {
+  return (
+    <Button
+      data-testid={testLocators.generateSchemaJSActionTestID}
+      isDisabled={props.disabled}
+      isLoading={props.isLoading}
+      kind="secondary"
+      onClick={props.onButtonClick}
+      size="sm"
+    >
+      Save
+    </Button>
+  );
+};

app/client/src/pages/Editor/JSEditor/JSEditorToolbar/constants.ts

@@ -8,6 +8,7 @@ export const RUN_BUTTON_DEFAULTS = {
 export const testLocators = {
   runJSAction: "run-js-action",
   runJSActionTestID: "t--run-js-action",
+  generateSchemaJSActionTestID: "t--generate-schema-js-action",
 };
 export const NO_FUNCTION_DROPDOWN_OPTION = {
   label: "No function available",