## 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>
289 lines
8.5 KiB
JavaScript
289 lines
8.5 KiB
JavaScript
/* eslint-disable cypress/no-unnecessary-waiting */
|
|
/* eslint-disable cypress/no-assigning-return-values */
|
|
import { ObjectsRegistry } from "../support/Objects/Registry";
|
|
require("cy-verify-downloads").addCustomCommand();
|
|
require("cypress-file-upload");
|
|
const jsEditorLocators = require("../locators/JSEditor.json");
|
|
const datasourceEditor = require("../locators/DatasourcesEditor.json");
|
|
const datasourceFormData = require("../fixtures/datasources.json");
|
|
const commonlocators = require("../locators/commonlocators.json");
|
|
const queryEditor = require("../locators/QueryEditor.json");
|
|
const widgetsPage = require("../locators/Widgets.json");
|
|
const apiwidget = require("../locators/apiWidgetslocator.json");
|
|
const explorer = require("../locators/explorerlocators.json");
|
|
const datasource = require("../locators/DatasourcesEditor.json");
|
|
const formControls = require("../locators/FormControl.json");
|
|
const queryLocators = require("../locators/QueryEditor.json");
|
|
const { AggregateHelper } = ObjectsRegistry;
|
|
const { PropertyPane } = ObjectsRegistry;
|
|
|
|
export const initLocalstorage = () => {
|
|
cy.window().then((window) => {
|
|
window.localStorage.setItem("ShowCommentsButtonToolTip", "");
|
|
window.localStorage.setItem("updateDismissed", "true");
|
|
});
|
|
};
|
|
|
|
Cypress.Commands.add("NavigateToQueryEditor", () => {
|
|
cy.get(explorer.addDBQueryEntity).last().click({ force: true });
|
|
});
|
|
|
|
Cypress.Commands.add("NavigateToQueriesInExplorer", () => {
|
|
cy.get(explorer.entityQuery).click({ force: true });
|
|
});
|
|
|
|
Cypress.Commands.add("NavigateToActiveDSQueryPane", (datasourceName) => {
|
|
cy.NavigateToQueryEditor();
|
|
cy.NavigateToActiveTab();
|
|
|
|
cy.get(datasource.datasourceCard)
|
|
.contains(datasourceName)
|
|
.scrollIntoView()
|
|
.should("be.visible")
|
|
.closest(datasource.datasourceCard)
|
|
.within(() => {
|
|
cy.get(queryLocators.createQuery).click({ force: true });
|
|
})
|
|
.wait(2000); //for the specified page to load
|
|
});
|
|
|
|
Cypress.Commands.add("NavigateToDSGeneratePage", (datasourceName) => {
|
|
cy.NavigateToQueryEditor();
|
|
cy.NavigateToActiveTab();
|
|
|
|
cy.get(datasource.datasourceCard)
|
|
.contains(datasourceName)
|
|
.scrollIntoView()
|
|
.should("be.visible")
|
|
.closest(datasource.datasourceCard)
|
|
.within(() => {
|
|
cy.get(datasource.datasourceCardGeneratePageBtn).click();
|
|
})
|
|
.wait(2000); //for the specified page to load
|
|
});
|
|
|
|
Cypress.Commands.add("ClickGotIt", () => {
|
|
cy.get("span:contains('GOT IT')").click();
|
|
});
|
|
|
|
Cypress.Commands.add("fillGoogleSheetsDatasourceForm", () => {
|
|
cy.get(datasourceEditor["scope"]).click();
|
|
});
|
|
|
|
Cypress.Commands.add("fillAuthenticatedAPIForm", () => {
|
|
const URL = datasourceFormData["authenticatedApiUrl"];
|
|
cy.get(datasourceEditor.url).type(URL);
|
|
});
|
|
|
|
Cypress.Commands.add("runQuery", (expectedRes = true) => {
|
|
cy.onlyQueryRun();
|
|
AggregateHelper.CheckForErrorToast("Failed to initialize pool");
|
|
cy.wait(2000); //for postexecute to go thru
|
|
cy.wait("@postExecute").should(
|
|
"have.nested.property",
|
|
"response.body.data.isExecutionSuccess",
|
|
expectedRes,
|
|
);
|
|
|
|
// cy.wait("@postExecute").should(
|
|
// "have.nested.property",
|
|
// "response.body.responseMeta.status",
|
|
// 200,
|
|
// );
|
|
});
|
|
|
|
Cypress.Commands.add("onlyQueryRun", () => {
|
|
cy.xpath(queryEditor.runQuery).last().click({ force: true }).wait(1000);
|
|
cy.get(".cs-spinner").should("not.exist");
|
|
});
|
|
|
|
Cypress.Commands.add("RunQueryWithoutWaitingForResolution", () => {
|
|
cy.xpath(queryEditor.runQuery).last().click({ force: true });
|
|
});
|
|
|
|
Cypress.Commands.add("hoverAndClick", () => {
|
|
cy.xpath(apiwidget.popover)
|
|
.last()
|
|
.should("be.hidden")
|
|
.invoke("show")
|
|
.click({ force: true });
|
|
cy.xpath(apiwidget.popover).last().click({ force: true });
|
|
});
|
|
|
|
Cypress.Commands.add("hoverAndClickParticularIndex", (index) => {
|
|
cy.xpath(apiwidget.popover)
|
|
.eq(index)
|
|
.should("be.hidden")
|
|
.invoke("show")
|
|
.click({ force: true });
|
|
});
|
|
|
|
Cypress.Commands.add("deleteQuery", () => {
|
|
cy.hoverAndClick();
|
|
cy.get(apiwidget.delete).click({ force: true });
|
|
cy.get(apiwidget.deleteConfirm).click({ force: true });
|
|
cy.wait("@deleteAction").should(
|
|
"have.nested.property",
|
|
"response.body.responseMeta.status",
|
|
200,
|
|
);
|
|
});
|
|
|
|
Cypress.Commands.add("deleteQueryUsingContext", () => {
|
|
cy.get(queryEditor.queryMoreAction).first().click();
|
|
cy.get(queryEditor.deleteUsingContext).click();
|
|
cy.get(queryEditor.deleteUsingContext).contains("Are you sure?").click();
|
|
cy.wait("@deleteAction").should(
|
|
"have.nested.property",
|
|
"response.body.responseMeta.status",
|
|
200,
|
|
);
|
|
});
|
|
|
|
Cypress.Commands.add("runAndDeleteQuery", () => {
|
|
cy.runQuery();
|
|
cy.deleteQueryUsingContext();
|
|
});
|
|
|
|
Cypress.Commands.add("executeDbQuery", (queryName, eventName) => {
|
|
PropertyPane.SelectPlatformFunction(eventName, "Execute a query");
|
|
cy.get(`.single-select:contains(${queryName})`).click({ force: true });
|
|
// cy.get(widgetsPage.buttonOnClick)
|
|
// .get(commonlocators.dropdownSelectButton)
|
|
// .eq(0)
|
|
// .click({ force: true })
|
|
// .get("ul.bp3-menu")
|
|
// .children()
|
|
// .contains("Execute a query")
|
|
// .click({ force: true })
|
|
// .get("ul.bp3-menu")
|
|
// .children()
|
|
// .contains(queryName)
|
|
// .click({ force: true });
|
|
});
|
|
|
|
Cypress.Commands.add("CreateMockQuery", (queryName) => {
|
|
// cy.get(queryEditor.addNewQueryBtn).click({ force: true });
|
|
// cy.get(queryEditor.createQuery)
|
|
// .first()
|
|
// .click({ force: true });
|
|
cy.get(queryEditor.queryNameField).type(queryName + "{enter}", {
|
|
force: true,
|
|
});
|
|
cy.assertPageSave();
|
|
cy.get(queryEditor.templateMenu + " div")
|
|
.contains("Select")
|
|
.click({ force: true });
|
|
cy.runQuery();
|
|
// cy.wait(3000);
|
|
// cy.get(queryEditor.runQuery)
|
|
// .click({force: true});
|
|
});
|
|
|
|
Cypress.Commands.add("ValidateQueryParams", (param) => {
|
|
cy.xpath(apiwidget.paramsTab).should("be.visible").click({ force: true });
|
|
|
|
cy.validateCodeEditorContent(apiwidget.paramKey, param.key);
|
|
cy.validateCodeEditorContent(apiwidget.paramValue, param.value);
|
|
});
|
|
|
|
// from hereeee
|
|
// targeting normal dropdowns, we can simply use the label names
|
|
Cypress.Commands.add(
|
|
"TargetDropdownAndSelectOption",
|
|
(dropdownIdentifier, option, isDynamic = false) => {
|
|
if (isDynamic) {
|
|
cy.wait(5000);
|
|
}
|
|
cy.get(dropdownIdentifier)
|
|
.scrollIntoView()
|
|
.should("be.visible")
|
|
.click({ multiple: true });
|
|
|
|
cy.get(formControls.dropdownWrapper)
|
|
.should("be.visible")
|
|
.contains(option)
|
|
.first()
|
|
.click();
|
|
cy.wait(2000);
|
|
},
|
|
);
|
|
|
|
// targeting multiselect dropdowns, we target the data-cy value of the options
|
|
Cypress.Commands.add(
|
|
"TargetMultiSelectDropdownAndSelectOptions",
|
|
(dropdownIdentifier, options, isDynamic = false) => {
|
|
if (isDynamic) {
|
|
cy.wait(5000);
|
|
}
|
|
cy.get(dropdownIdentifier)
|
|
.scrollIntoView()
|
|
.should("be.visible")
|
|
.click({ multiple: true });
|
|
|
|
options &&
|
|
options.map((option) => {
|
|
cy.get(formControls.dropdownWrapper)
|
|
.should("be.visible")
|
|
.get(option) // we use a get instead of contains.
|
|
.first()
|
|
.click({ force: true });
|
|
});
|
|
},
|
|
);
|
|
|
|
Cypress.Commands.add(
|
|
"TargetFormControlAndSwitchViewType",
|
|
(formControlIdentifier, newViewType) => {
|
|
cy.get(formControlIdentifier).scrollIntoView().should("be.visible").click();
|
|
|
|
if (newViewType === "json") {
|
|
cy.get(formControlIdentifier)
|
|
.should("be.visible")
|
|
.should("have.class", "is-active");
|
|
} else if (newViewType === "component") {
|
|
cy.get(formControlIdentifier)
|
|
.should("be.visible")
|
|
.should("not.have.class", "is-active");
|
|
}
|
|
},
|
|
);
|
|
|
|
Cypress.Commands.add(
|
|
"VerifyCurrentDropdownOption",
|
|
(dropdownIdentifier, option) => {
|
|
cy.get(dropdownIdentifier)
|
|
.scrollIntoView()
|
|
.should("be.visible")
|
|
.contains(option)
|
|
.should("be.visible");
|
|
},
|
|
);
|
|
|
|
Cypress.Commands.add(
|
|
"ValidateAndSelectDropdownOption",
|
|
(dropdownIdentifier, currentOption, newOption, isDynamic = false) => {
|
|
cy.VerifyCurrentDropdownOption(dropdownIdentifier, currentOption);
|
|
if (newOption) {
|
|
cy.TargetDropdownAndSelectOption(
|
|
dropdownIdentifier,
|
|
newOption,
|
|
isDynamic,
|
|
);
|
|
cy.wait(2000);
|
|
}
|
|
},
|
|
);
|
|
|
|
Cypress.Commands.add("NavigateToAction", (actionName) => {
|
|
cy.get(queryEditor.navigateToAction)
|
|
.contains(actionName)
|
|
.should("be.visible")
|
|
.click();
|
|
});
|
|
Cypress.Commands.add("SelecJSFunctionAndRun", (functionName) => {
|
|
cy.xpath("//span[@name='expand-more']").first().click();
|
|
cy.get(`[data-cy='t--dropdown-option-${functionName}']`).click();
|
|
cy.get(jsEditorLocators.runButton).first().click();
|
|
});
|