6ac99037b0
## Description
Replaces the old boring action selector dropdown with a much more
sophisticated UI that is capable of going above and beyond. Users with
an aversion to code can now build their more complex workflows with a
click of a few buttons.
Consider this code snippet
```javascript
Api1.run(() => {
showAlert("Hello");
navigateTo('Page1', {}, 'SAME_WINDOW');
}, () => {
removeValue("test");
});
```
|**Old action selector** |**New action selector**|
|:-:|:-:|
|<img width="250" alt="Screenshot 2023-03-29 at 16 54 14"
src="https://user-images.githubusercontent.com/32433245/228520661-a639b580-8986-4aec-a0f5-e2786d1a0f56.png">|
<img width="250" alt="Screenshot 2023-03-29 at 16 55 15"
src="https://user-images.githubusercontent.com/32433245/228521043-5025aa42-af95-4574-b586-bc4c721240bc.png">|
**Click on an action block to edit its parameters.**
<img width="500" alt="Screenshot 2023-03-29 at 17 01 18"
src="https://user-images.githubusercontent.com/32433245/228522479-493769d0-9d2c-4b67-b493-a79e3bb9c947.png">
**Switch to JS mode to get the raw code**
<img width="273" alt="Screenshot 2023-03-29 at 17 05 51"
src="https://user-images.githubusercontent.com/32433245/228523458-13bc0302-4c94-4176-b5aa-3ec208122f57.png">
### Code changes
**New UI components**
- ActionCreator component splits the code into block statements.
- Each block statement is represented by ActionTree.tsx UI component.
- ActionTree.tsx represents an action and its chains.
- ActionCard.tsx is the block that represents the individual action on
the UI.
- ActionSelector.tsx component is popover that contains the form for
editing individual action.
- TabView, TextView, SelectorView, ActionSelectorView and KeyValueView
are components that represent configurable fields in ActionSelector
form.
**AST methods**
- Added methods to get/set function names, expressions, arguments.
- Added methods to get/set then/catch blocks to allow chaining of
actions.
- Added methods to check if code is convertible to UI.
Fixes #10160
Fixes #21588
Fixes #21392
Fixes #21393
Fixes #7903
Fixes #15895
Fixes #17765
Fixes #14562
Depends on https://github.com/appsmithorg/design-system/pull/306
## Type of change
- New feature (non-breaking change which adds functionality)
## How Has This Been Tested?
- Manual
- Jest
- Cypress
### Test Plan
https://github.com/appsmithorg/TestSmith/issues/2296
### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
## Checklist:
### Dev activity
- [x] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
### QA activity:
- [x] Test plan has been approved by relevant developers
- [x] Test plan has been peer reviewed by QA
- [x] Cypress test cases have been added and approved by either SDET or
manual QA
- [x] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [x] Added Test Plan Approved label after reveiwing all Cypress test
---------
Co-authored-by: Rimil Dey <rimil@appsmith.com>
Co-authored-by: arunvjn <arun@appsmith.com>
Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>
Co-authored-by: Parthvi Goswami <parthvigoswami@Parthvis-MacBook-Pro.local>
|
||
|---|---|---|
| .. | ||
| ast | ||
| .gitignore | ||
| build-shared-dep.js | ||
| install-dependencies.js | ||
| package.json | ||
| Readme.md | ||
| run-tests.js | ||
| shared-dependencies.json | ||
| verify-shared-dep.js | ||
Shared Dependencies
We wanted to share common logic with different applications within our repo, so we picked yarn symlinks as our approach to tackle this problem. Following are the way in which you can take advantage of the module sharing architecture.
Creation of a Shared Module
- Create a directory inside
shareddirectory with name eg.abc - Inside
package.jsonof module, keep the name like@shared/abc - Add a rollup config to generate
package.jsonafter the module is build
Installation of Shared Modules
- Add an entry for an application inside
shared-dependencies.jsoneg. forclientthere should be an entry"client": [] - Add the name of the shared module in the entry of the application in the above file eg.
"client": ["@shared/abc"] - If the application does not have any postinstall or preinstall scripts for shared modules then add the two commands described below in the application's (eg.
client)package.json:"postinstall": "CURRENT_SCOPE=client node ../shared/install-dependencies.js""preinstall": "CURRENT_SCOPE=client node ../shared/build-shared-dep.js"CURRENT_SCOPE is the environment variable that's being used in the scripts
Verifying the Installed Shared Modules
- Run
yarn run verifyinsideshareddirectory to verify shared dependencies for an application.
Command link-package
yarn install: installs packagesrollup -c: Module bundler bundles the package and creates a buildcd build: Change the present working directorycp -R ../node_modules ./node_modules: copies its own node_modules directory to its build directory to make sure its own version dependencies do not mismatch when its installed in other directories as shared moduleyarn link: Creates a link for the package to make it available for other directories to use.