feat: add generate schema button#39751
Conversation
WalkthroughThis pull request introduces schema generation state management for both plugin actions and JavaScript functions. New Redux state properties, actions, reducers, and selectors are added to track the generation process. Additionally, export paths for related components have been updated and new constants (including error messages and a test identifier) defined. These changes prepare the codebase to handle UI interactions for triggering and monitoring schema generation. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI
participant Redux
participant Selector
User->>UI: Click "Generate Schema" button
UI->>Redux: Dispatch GENERATE_*_REQUEST action
Redux->>Redux: Update isSchemaGenerating state to true
Redux-->>UI: Dispatch SUCCESS/ERROR action on completion
UI->>Selector: Query isSchemaGenerating status
Selector-->>UI: Return current generation status
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (3)
✅ Files skipped from review due to trivial changes (3)
⏰ Context from checks skipped due to timeout of 90000ms (5)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
|
/build-deploy-preview skip-tests=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/13900931622. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionGenerateSchema.tsx (1)
1-25: Button text doesn't match component's purposeThe component name and test ID suggest it's for generating a schema, but the button text is "Save". This inconsistency could confuse users. Consider changing the button text to "Generate Schema" or similar to better reflect its purpose.
<Button data-testid={testLocators.generateSchemaJSActionTestID} isDisabled={props.disabled} isLoading={props.isLoading} kind="secondary" onClick={props.onButtonClick} size="sm" > - Save + Generate Schema </Button>app/client/src/api/SchemaAPI.ts (1)
4-7: Consider using a more specific type for schemaThe
schemaproperty is typed asunknown, which provides limited type safety. If the schema follows a specific structure, consider defining a more specific type or interface to improve type checking and developer experience.app/client/src/pages/Editor/JSEditor/Form.tsx (1)
301-305: Schema generation handler implementation.The implementation correctly dispatches the schema generation action only when a valid JS action is selected. Consider adding error handling or user feedback if no action is selected.
const handleGenerateSchemaButtonClick = async () => { if (selectedJSActionOption.data?.id) { dispatch(generateJSFunctionSchema(selectedJSActionOption.data)); + } else { + // Consider adding a toast notification or other feedback + // toast.info("Please select a function to generate schema"); } };
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (16)
app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx(4 hunks)app/client/src/PluginActionEditor/hooks/useHandleGenerateSchemaClick.ts(1 hunks)app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts(1 hunks)app/client/src/PluginActionEditor/store/pluginEditorReducer.ts(3 hunks)app/client/src/actions/generateSchemaActions.ts(1 hunks)app/client/src/api/SchemaAPI.ts(1 hunks)app/client/src/ce/constants/ReduxActionConstants.tsx(2 hunks)app/client/src/ce/constants/messages.ts(1 hunks)app/client/src/ce/sagas/index.tsx(2 hunks)app/client/src/pages/Editor/JSEditor/Form.tsx(6 hunks)app/client/src/pages/Editor/JSEditor/JSEditorToolbar/JSEditorToolbar.tsx(4 hunks)app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionGenerateSchema.tsx(1 hunks)app/client/src/pages/Editor/JSEditor/JSEditorToolbar/constants.ts(1 hunks)app/client/src/reducers/uiReducers/jsPaneReducer.ts(4 hunks)app/client/src/sagas/GenerateSchemaSaga.ts(1 hunks)app/client/src/selectors/jsPaneSelectors.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: client-unit-tests / client-unit-tests
- GitHub Check: client-lint / client-lint
- GitHub Check: client-check-cyclic-deps / check-cyclic-dependencies
- GitHub Check: client-build / client-build
- GitHub Check: client-prettier / prettier-check
🔇 Additional comments (40)
app/client/src/pages/Editor/JSEditor/JSEditorToolbar/constants.ts (1)
11-11: Test ID added for generate schema functionality.This constant will be used to identify the generate schema button in automated tests, following the established pattern for test IDs in this codebase.
app/client/src/ce/constants/messages.ts (1)
652-652: Added error message for schema generation failure.This message will be shown to users when schema generation fails. The message is concise and follows the established pattern of using function expressions to return message strings.
app/client/src/ce/sagas/index.tsx (1)
54-54: Added new saga for plugin action schema generation.The schema generation saga has been properly imported and registered in the sagas array. This enables the application to handle the asynchronous operations involved in schema generation.
Also applies to: 68-68
app/client/src/PluginActionEditor/hooks/useHandleGenerateSchemaClick.ts (1)
1-18: Well-structured custom hook for handling schema generation.This hook follows React best practices:
- Uses
useCallbackto memoize the handler function- Properly depends on the action ID and dispatch
- Provides a clean interface for components that need to trigger schema generation
The null coalescing operator (
??) provides a fallback empty string when the action ID is undefined, preventing potential issues.app/client/src/actions/generateSchemaActions.ts (1)
1-18: Clean implementation of Redux action creatorsThe action creators follow Redux best practices with descriptive names and proper payload structures. No issues found.
app/client/src/api/SchemaAPI.ts (1)
9-17: API implementation follows project patternsThe SchemaAPI class implementation is clean and follows the established API patterns in the application. The method is concise and correctly handles the schema generation request.
app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts (1)
23-31: Well-structured schema generation selectorThe implementation of the schema generation state selector follows the established pattern of other selectors in the file. It properly uses createSelector for memoization and matches the code style of the surrounding selectors.
app/client/src/selectors/jsPaneSelectors.ts (2)
26-27: New selector looks good.The
getIsGeneratingSchemaselector follows the same pattern as other selectors in this file, properly accessing the schema generation state for a specific collection.
29-32: New selector implementation is correct.The
getIsJSCollectionSavingselector properly accesses the saving state for a specific JS collection with appropriate type parameters.app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx (5)
12-16: Import statements are correctly organized.Added selectors for tracking action states: running, saving, and schema generation.
19-19: New hook import looks good.Importing the custom hook for schema generation functionality.
30-35: Schema generation handler is properly integrated.Added hook instantiation and state selectors for the schema generation features.
54-54: Correctly disable run button during schema generation.The Run button is now disabled while schema generation is in progress, preventing concurrent operations that could lead to state inconsistencies.
63-72: New schema generation button looks good.The Save button is properly added with appropriate test ID, disabled states, and loading indicator connected to the schema generation state. Button styling is consistent with existing UI components.
app/client/src/pages/Editor/JSEditor/JSEditorToolbar/JSEditorToolbar.tsx (5)
13-14: New imports for schema generation UI components.The JSFunctionGenerateSchema component and Flex layout component are correctly imported.
25-25: New prop for disabling schema functionality.Added prop to control when schema generation is disabled.
28-28: Schema generation loading state prop added.This prop will be used to show loading state on the schema generation button.
33-35: Event handler prop for schema generation.Added prop for handling schema generation button click events.
65-81: UI structure improved with Flex layout.Replaced div with Flex component for better alignment of action buttons and added the schema generation button. The implementation follows the same pattern as the run button with appropriate props for disabled state and loading indicators.
app/client/src/pages/Editor/JSEditor/Form.tsx (6)
33-37: New selector imports are clean and organized.Added selectors for tracking schema generation and JS collection saving states.
64-64: New action import for schema generation.Properly importing the generateJSFunctionSchema action.
161-166: State selectors for schema generation and saving.Added Redux selectors to track schema generation and JS collection saving states for the current collection.
359-364: Toolbar props for schema generation.Correctly passing the disabled states for both schema generation and run functionality. The run functionality is now disabled during schema generation to prevent concurrent operations.
368-368: Loading state passed to toolbar.The isGeneratingSchema state is correctly passed to the toolbar to show loading indicator on the schema generation button.
377-377: Schema generation click handler passed to toolbar.The handler for schema generation is correctly passed to the toolbar component.
app/client/src/reducers/uiReducers/jsPaneReducer.ts (6)
7-7: Import usage looks good.
You’re correctly importing bothJSActionandJSCollection, which are referenced elsewhere in the reducer.
26-26: New property for tracking schema generation.
IntroducingisSchemaGeneratingaligns well with expectations for asynchronous actions.
36-36: Reasonable initial state.
InitializingisSchemaGeneratingas an empty record is consistent with other properties.
180-195: Smooth handling of the schema generation request.
Good approach: you setisSchemaGeneratingtotrueand safeguard the case when nocollectionIdis found.
196-209: Schema generation success flow.
MarkingisSchemaGeneratingasfalseupon success is consistent.
210-223: Error handling is aligned.
On errors, settingisSchemaGeneratingtofalseprevents stale loading states.app/client/src/sagas/GenerateSchemaSaga.ts (4)
1-15: Imports are properly organized.
All required modules are included, and there are no apparent redundancies.
16-55: Plugin action schema generation is well-structured.
The saga correctly calls the API, updates the Redux state, and handles errors.
56-96: JS function schema generation mirrors plugin logic.
Consistent approach for managing JS function actions and error handling.
98-109: Saga watchers correctly handle both plugin and JS schema requests.
UsingtakeLatestensures only the latest request is processed.app/client/src/PluginActionEditor/store/pluginEditorReducer.ts (3)
25-25: Additional property for schema generation.
isSchemaGeneratingis a clear and suitable name for this state.
38-38: Empty object as an initial value is consistent.
Matches how other fields in the reducer are initialized.
146-165: Comprehensive reducers for schema request lifecycle.
You’re togglingisSchemaGeneratingappropriately for request, success, and error.app/client/src/ce/constants/ReduxActionConstants.tsx (2)
713-722: Nice addition of schema generation action types for both JS functions and plugin actionsThe implementation follows the standard pattern in the codebase with request, cancelled, and success action types. This provides complete state management for the schema generation feature.
735-736: Good work adding corresponding error action typesYou've correctly added error action types that match the success actions, ensuring proper error handling for both JS function and plugin action schema generation.
github-actions
bot
added
AI Agents
znamenskii-ilia
force-pushed
the
feat/39726-generate-schema-button-2
branch
from
939e29c to
75c2a49
Compare
|
/build-deploy-preview skip-tests=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/13901214718. |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (8)
app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionGenerateSchema.tsx (1)
1-25: Clean implementation of the Schema Generation button componentThis is a well-structured React component implementing the schema generation functionality. The component follows React best practices with clear props interface and proper handling of disabled and loading states.
One suggestion though - the button text "Save" might be slightly confusing considering the component and functionality are about schema generation rather than saving in the traditional sense.
Consider renaming the button text to more accurately reflect its function:
- Save + Generate Schemaapp/client/src/PluginActionEditor/components/PluginActionToolbar.tsx (1)
65-76: Proper implementation of the Save button with feature flagThe Save button is correctly implemented with appropriate disabled and loading states, and properly guarded by the feature flag.
Similar to the previous component, the button text "Save" might be slightly confusing since the functionality is generating a schema rather than saving.
Consider renaming the button text to better reflect its actual function:
- Save + Generate Schemaapp/client/src/sagas/GenerateSchemaSaga.ts (6)
1-3: Consider consistent imports.
There is a mix of@appsmith/adsand@appsmith/ads-old. Using a single import source might reduce confusion or version mismatch issues.
16-19: Add input validation checks.
Validatingaction.payload.idbefore callingSchemaAPI.generateSchemaprevents unintentionally passing undefined arguments.
25-39: Handle missing schema or description fields.
Ifresponse.datadoes not containschemaordescription, the current code may set them to undefined. Consider fallbacks.
50-53: Refine error feedback.
Displaying only "Cannot generate schema" might be too generic. Including details in the toast could help with debugging.
67-81: Consolidate repeated code.
This block duplicates the plugin action schema logic. Consider abstracting common logic for both plugin actions and JS functions.
92-95: Improve granularity in error handling.
Consider capturing specific error details from the API response to better assist debugging.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro (Legacy)
📒 Files selected for processing (16)
app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx(4 hunks)app/client/src/PluginActionEditor/hooks/useHandleGenerateSchemaClick.ts(1 hunks)app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts(1 hunks)app/client/src/PluginActionEditor/store/pluginEditorReducer.ts(3 hunks)app/client/src/actions/generateSchemaActions.ts(1 hunks)app/client/src/api/SchemaAPI.ts(1 hunks)app/client/src/ce/constants/ReduxActionConstants.tsx(2 hunks)app/client/src/ce/constants/messages.ts(1 hunks)app/client/src/ce/sagas/index.tsx(2 hunks)app/client/src/pages/Editor/JSEditor/Form.tsx(6 hunks)app/client/src/pages/Editor/JSEditor/JSEditorToolbar/JSEditorToolbar.tsx(6 hunks)app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionGenerateSchema.tsx(1 hunks)app/client/src/pages/Editor/JSEditor/JSEditorToolbar/constants.ts(1 hunks)app/client/src/reducers/uiReducers/jsPaneReducer.ts(4 hunks)app/client/src/sagas/GenerateSchemaSaga.ts(1 hunks)app/client/src/selectors/jsPaneSelectors.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (10)
- app/client/src/pages/Editor/JSEditor/JSEditorToolbar/constants.ts
- app/client/src/ce/constants/messages.ts
- app/client/src/PluginActionEditor/hooks/useHandleGenerateSchemaClick.ts
- app/client/src/api/SchemaAPI.ts
- app/client/src/ce/sagas/index.tsx
- app/client/src/actions/generateSchemaActions.ts
- app/client/src/selectors/jsPaneSelectors.ts
- app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts
- app/client/src/PluginActionEditor/store/pluginEditorReducer.ts
- app/client/src/pages/Editor/JSEditor/JSEditorToolbar/JSEditorToolbar.tsx
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: client-unit-tests / client-unit-tests
- GitHub Check: client-prettier / prettier-check
- GitHub Check: client-build / client-build
- GitHub Check: client-lint / client-lint
- GitHub Check: client-check-cyclic-deps / check-cyclic-dependencies
🔇 Additional comments (15)
app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx (3)
12-20: Appropriate imports for the new functionalityThe added imports correctly support the new schema generation feature with proper selectors and hooks.
31-37: Well integrated schema generation hook and state selectorsGood implementation of the schema generation functionality by adding the necessary hook and state selectors. This provides proper state management for the new feature.
56-56: Good state handling for the Run buttonCorrectly disabling the Run button while schema generation is in progress prevents potential conflicts between operations.
app/client/src/reducers/uiReducers/jsPaneReducer.ts (3)
26-26: Appropriate state modeling for schema generationAdding the
isSchemaGeneratingproperty to track schema generation status per collection ID follows the established pattern in this reducer.
36-36: Proper initialization of the new state propertyThe new state property is correctly initialized as an empty object.
180-223: Well implemented action handlers for schema generation lifecycleThe action handlers for schema generation request, success, and error follow a consistent pattern and include proper safety checks for the collection ID. The schema generation state is correctly set and reset throughout the lifecycle of the operation.
app/client/src/pages/Editor/JSEditor/Form.tsx (6)
33-37: Appropriate import organization for state selectorsGood consolidation of related imports using object destructuring.
64-64: Well-placed action importThe import for the schema generation action is appropriately placed with other action imports.
161-166: Proper use of state selectorsGood implementation of selectors to track schema generation and collection saving state from the Redux store.
301-305: Clean implementation of schema generation handlerThe schema generation handler is well-implemented with proper null checking before dispatching the action.
359-364: Good state handling for feature buttonsThe disabled states for both the schema generation and run functionality buttons are correctly managed to prevent conflicts between operations.
368-378: Proper props integration with JSEditorToolbarThe JSEditorToolbar component is correctly enhanced with new props to support schema generation functionality.
app/client/src/sagas/GenerateSchemaSaga.ts (1)
56-60: Verifyaction.idfield usage.
Ensureaction.idis always set since you rely onaction.idfor schema generation. If missing, the saga call will fail.app/client/src/ce/constants/ReduxActionConstants.tsx (2)
713-722: Keep naming consistent.
The newly added action types for generating schemas are clearly descriptive. Ensure usage across the codebase follows the same naming convention (e.g., “schema” vs “Schema”).
735-736: Validate error flow.
The added error types are good. Confirm that corresponding reducers or sagas handle these cases to avoid silent failures.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
app/client/src/pages/Editor/JSEditor/JSEditorToolbar/JSEditorToolbar.test.tsx (1)
26-28: Props added for schema generation feature, but no tests for this functionality.The code correctly adds the necessary props for the schema generation feature to the
defaultPropsobject. However, there are no tests that verify the behavior of this new functionality.Consider adding a test case that:
- Verifies the schema generation button renders correctly
- Tests that
disableGenerateSchemaFunctionalityproperly enables/disables the button- Confirms the button shows a loading state when
isGeneratingSchemais true- Ensures
onGenerateSchemaButtonClickis called when the button is clickedit("handles generate schema button click correctly", () => { mockUseFeatureFlag.mockReturnValue(true); render(<JSEditorToolbar {...defaultProps} />); // Find and click the generate schema button const generateSchemaButton = screen.getByRole("button", { name: "Generate Schema" }); fireEvent.click(generateSchemaButton); // Verify the click handler was called expect(defaultProps.onGenerateSchemaButtonClick).toHaveBeenCalled(); }); it("disables generate schema button when disableGenerateSchemaFunctionality is true", () => { mockUseFeatureFlag.mockReturnValue(true); render(<JSEditorToolbar {...defaultProps} disableGenerateSchemaFunctionality={true} />); // Verify the button is disabled const generateSchemaButton = screen.getByRole("button", { name: "Generate Schema" }); expect(generateSchemaButton).toHaveAttribute("disabled"); });
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro (Legacy)
📒 Files selected for processing (1)
app/client/src/pages/Editor/JSEditor/JSEditorToolbar/JSEditorToolbar.test.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: client-unit-tests / client-unit-tests
- GitHub Check: client-prettier / prettier-check
- GitHub Check: client-build / client-build
- GitHub Check: client-lint / client-lint
- GitHub Check: client-check-cyclic-deps / check-cyclic-dependencies
|
/build-deploy-preview skip-tests=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/13902142854. |
|
Deploy-Preview-URL: https://ce-39751.dp.appsmith.com |
…smithorg/appsmith into feat/39726-generate-schema-button-2
hetunandu
added
ok-to-test
## Description Update JS and Plugin Action Toolbar to add new Schema generation CTA in them https://www.figma.com/design/mVEbXXryqv2oBxMcNg8yjC/Anvil-AI?node-id=3891-34025&t=AVP3gbWu07WzPfwc-0 Fixes appsmithorg#39726 ## Automation /ok-to-test tags="@tag.JS, @tag.Datasource" ### 🔍 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/13920663021> > Commit: c0b7603 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=13920663021&attempt=2" target="_blank">Cypress dashboard</a>. > Tags: `@tag.JS, @tag.Datasource` > Spec: > <hr>Tue, 18 Mar 2025 11:30:10 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 real-time tracking of schema generation processes with clear UI indicators and error messaging. - Expanded actionable events to support improved feedback during schema creation for plugin actions and JavaScript functions. - **Refactor** - Streamlined component exports and updated import paths for enhanced organization and consistency in the editor toolbars. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Hetu Nandu <hetunandu@gmail.com>
3 participants
Description
Update JS and Plugin Action Toolbar to add new Schema generation CTA in them
https://www.figma.com/design/mVEbXXryqv2oBxMcNg8yjC/Anvil-AI?node-id=3891-34025&t=AVP3gbWu07WzPfwc-0
Fixes #39726
Automation
/ok-to-test tags="@tag.JS, @tag.Datasource"
🔍 Cypress test results
Tip
🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/13920663021
Commit: c0b7603
Cypress dashboard.
Tags:
@tag.JS, @tag.DatasourceSpec:
Tue, 18 Mar 2025 11:30:10 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit
New Features
Refactor