PromucFlow_constructor/app/client/cypress/support/queryCommands.js
Ravi Kumar Prasad 6ac99037b0
feat: Action selector (#21582)
## 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>
2023-04-06 22:19:12 +05:30

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();
});