PromucFlow_constructor/app/client/cypress/support/Pages/DataSources.ts
Nidhi 906a7298dc
feat: Simplified Google Sheets queries (#14869)
* Client changes 1

* add DSL functionality

* Temp commit for refactoring changes

* Do I even know what I'm doing here?

* chore: Second GS layout

* Update: Visibility conditional outputs for schemas

- Added the output from conditional outputs for schema children too

* Update: Entity selector visibility control

- Added logic for controlling visibility of sub components via the JS expressions system

* Update: Passing disabled prop to toggle button

* Update: Passing disabled prop to toggle btn

* Update: Styled component for toggle button

- Added disabled styles based on the disabled prop sent to the toggle form view JSON button

* Update: configProperty role in Entity Selector

- Removed dependance of the configProperty of the entity selector children to it's parent component

* Update: type of placeholder key

- Made placeholder key from form config JSON to accept either string or an object
- Earlier only string was accepted
- This is for pagination component

* Update: Added placeholder control for pagination

* Client changes 1

* add DSL functionality

* Do I even know what I'm doing here?

* fix: updated uqi forms ui, clubbed JS switch button to ads, updated tooltip design

* fix: updated tooltip component for wrong ui on entity explore

* temp triggers

* fix: updated uqi forms ui, clubbed JS switch button to ads, updated tooltip design (#12395)

* fix: updated uqi forms ui, clubbed JS switch button to ads, updated tooltip design

* fix: updated tooltip component for wrong ui on entity explore

* fix: updated tooltip ui, where condition placement, sort by ui

* temp form data access logic

* fix: updated sorting type width ui

* fix: updated ui for spacing, width and text issues

* Update: Type for tooltip of UQI forms

- Added option to send an object to the tooltipText object.
- This allows for composite components like pagination to have tooltips for each sub component

* Update: tooltip for pagination component

- Added handling to parse the tooltip for multiple components.
- This allows for composite components like pagination to have tooltips for each sub component

* Update: Type cast for tooltip component

- Made the content passed to tooltip component as a string only

* Update: Fixed tooltip component CSS

* Update: Dropdown option component

- Added a tooltip wrapper to each option
- This is to show on hover text like disabled state

* fix: updated ẇhere clause broken ui for condition

* Add: functions to check and extract expressions

- Loop through the formConfig and find any keys that have a value that is bindable
- Used pre defined regex to check if value is a moustache binding

* Add: Types for evaluated form configs

- Added types for the form configs to be evaluated and their output post eval

* Add: Flow to run the form config

- Run the form config and update the result to the redux state

* Update: Name of the type for formconfigs

- Updated since it was clashing with a component of the same name

* Add: Function to enforce config type checks

- This is done so that the improper configs can be weeded out and the rest of the form can be shown

* Add: Function to update evaluated config

- Added option to update the config if it's values needed evaluation

* Add: Type check for schema sections

* Update: Error handling for invalid control type

- We were throwing an exception till now, changed it to a warning text

* Add: Exposed tooltip for dropdown option disabled state

* Update: switch to json mode functionality

- Added logic to convert data to a string rather than an object when the first switch to JSON mode happens

* Update: Added key to tooltip for dropdown options

* Trigger API modification

* Add: function to fetch default trigger URL

* Update: Made URL optional in dynamic trigger config

* Update: Dynamic trigger API call

- Made the API call for dynamic triggers have URL as optional field
- Added type check to the response of the API call

* Update: resp type for trigger APIs

* Update: Moved code to utils folder

- Moved functions for UQI form eval processing to utils file

* Update: passing original controltype to JS switch

* Update: config for JSON editor mode

- Updated the config to have different options for JSON mode depending on the original control type

* Update: Connected line numbers flag to config

* Revert: CSS changes for tooltip

* Refactor: Removed consle

* Add: type for the config of dynamic values

* Add: Feature to evaluate config for triggers

* Refactor: fix type check errors

* fix: dropdown ui width with text alignment

* Update: fixed selector for dynamic values

* Update: selector call for fetchDynamicValues

* Add table header index prop for columns selector

* migration partial commit

* migration partial commit

* Refactor: removed unused import

* Update: reused function for checking dynamic value

* Update: removed unused import

* Fix format JSON issues

* Retrieve binding paths from entity selector components

* Fixes 6 remaining issues with UQI implementation

* Fix dropdown issues

* Fix dropdown height issues and fixes triggering of APIs when option is deselected

* Migration changes

* Fix QA generated UQI issues

* Fix projection component height and route change logic

* Fix multi select dropdown placeholder text issue and json stringify issue with switching view types

* Reset entity type value when command value changes

* Test changes

* Review comments

* Moved migrations around

* Corrected import statement

* Added JSON schema migration

* Updated schema version

* perf improvements and filter dropdown options feature

* Fix Code mirror component config for toggleComponentToJson input fields.

* Fix prettier issues

* fix prettier issues

* Fix style issues as a result of the merged conflicts

* Fix failing test case

* Fixed a few other flows (#14225)

* Fixed a few other flows

* Review comments

* Fix generate CRUD, fix evaluation of dynamic bindings and fix various styling issues.

* More fixes (#14367)

* Factor in the root formconfig parent key.

* Fix flickering issues, and evaluatedFormConfig issues

* fix: Teeny bugs (#14455)

* Teeny bugs

* Added previous functionality as is

* Improvements in the way we fetch dynamic values

* Fix stringiification issue and cyclic dependency issues

* Resolve projection component values deletion

* Resolve merge conflicts and fix prettier issues

* fix: Tsc issues

* Fix property pane connection navigation

* updating ee locator

* updating inputfield locator

* dropdown locator update

* Merge conflict not properly resolved.

* Fix s3 spec

* Fix Mongo Spec

* Fix some more tests

* fix: prevent cyclic dependency when switching to js mode (#14668)

* add delete events for change from array to string in diff

* add test to assert absence of cyclic dependency error when switching to js in switchgroup widget

* Assert that evaluation is not disabled when no cyclic dependency happens

* Cypress test preparations for google sheets and form controls

* Fixed a few test errors (#14874)

* Add: unit tests for uqi UI updates

- view type tests
- conditional output extraction
- processing conditional output to handle view/enabled state of the component

* Add: completed isValidFormConfig test

* Update: improved tests for update config

- These tests cover the functionality to update a section config after it's components are done evaluating

* Fix failing cypress tests and cyclic dependency issue

* Fixes some more tests

* Fixed migration of row objects (#14896)

* Bumped the version of design system package

* Update: reverted change to EE selector

* Fix deletion pointer

* Update: selector for js on load spec

- Synced with changes related to ADS dropdown

* Fix mongoDBShoppingCart spec

* Remove comments

* Fix: mongo shopping cart test failures

* fix: mongo shopping cart spec

* Dummy push to retrigger vercel

* fix: mongo shopping cart spec

* Update MongoDBShoppingCart_spec.js

* fix: removed unused click away

* dummy commit

* Update: moved helper functions to separate file

* Add: added tests for saga functions

- Worked on testing for
   - extractFetchDynamicValueFormConfigs
   - extractQueueOfValuesToBeFetched

* Add if check for queueOfValuesToBeFetched

* Resolve review comments

* Empty-Commit

Co-authored-by: Irongade <adeoluayangade@yahoo.com>
Co-authored-by: Ayush Pahwa <ayush@appsmith.com>
Co-authored-by: Aman Agarwal <aman@appsmith.com>
Co-authored-by: Ayangade Adeoluwa <37867493+Irongade@users.noreply.github.com>
Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>
Co-authored-by: Favour Ohanekwu <fohanekwu@gmail.com>
Co-authored-by: Albin <albin@appsmith.com>
2022-07-04 11:13:27 +05:30

386 lines
14 KiB
TypeScript

import datasourceFormData from "../../fixtures/datasources.json";
import { ObjectsRegistry } from "../Objects/Registry";
export class DataSources {
private agHelper = ObjectsRegistry.AggregateHelper;
private table = ObjectsRegistry.Table;
private ee = ObjectsRegistry.EntityExplorer;
private locator = ObjectsRegistry.CommonLocators;
private _dsCreateNewTab = "[data-cy=t--tab-CREATE_NEW]";
private _addNewDataSource = ".datasources .t--entity-add-btn";
private _createNewPlgin = (pluginName: string) =>
".t--plugin-name:contains('" + pluginName + "')";
private _host = "input[name='datasourceConfiguration.endpoints[0].host']";
private _port = "input[name='datasourceConfiguration.endpoints[0].port']";
private _databaseName =
"input[name='datasourceConfiguration.authentication.databaseName']";
private _username =
"input[name='datasourceConfiguration.authentication.username']";
private _sectionAuthentication = "[data-cy=section-Authentication]";
private _password =
"input[name = 'datasourceConfiguration.authentication.password']";
private _testDs = ".t--test-datasource";
private _saveDs = ".t--save-datasource";
private _datasourceCard = ".t--datasource";
_templateMenu = ".t--template-menu";
private _createQuery = ".t--create-query";
private _importSuccessModal = ".t--import-app-success-modal";
private _importSuccessModalClose = ".t--import-success-modal-got-it";
_visibleTextSpan = (spanText: string) =>
"//span[contains(text(),'" + spanText + "')]";
_dropdownTitle = (ddTitle: string) =>
"//p[contains(text(),'" +
ddTitle +
"')]/ancestor::label/parent::div/following-sibling::div/div/div";
_reconnectModal = "div.reconnect-datasource-modal";
_activeDSListReconnectModal = (dbName: string) =>
"//div[contains(@class, 't--ds-list')]//span[text()='" + dbName + "']";
_runQueryBtn = ".t--run-query";
_newDatabases = "#new-datasources";
_selectDatasourceDropdown = "[data-cy=t--datasource-dropdown]";
_selectTableDropdown = "[data-cy=t--table-dropdown]";
_selectSheetNameDropdown = "[data-cy=t--sheetName-dropdown]";
_selectTableHeaderIndexInput = "[data-cy=t--tableHeaderIndex]";
_dropdownOption = ".bp3-popover-content .t--dropdown-option";
_generatePageBtn = "[data-cy=t--generate-page-form-submit]";
_selectedRow = ".tr.selected-row";
_activeTab = "span:contains('Active')";
_contextMenuDatasource = "span[name='comment-context-menu']";
_contextMenuDelete = ".t--datasource-option-delete";
_datasourceCardGeneratePageBtn = ".t--generate-template";
_queryTableResponse =
"//div[@data-guided-tour-id='query-table-response']//div[@class='tbody']//div[@class ='td']";
_queryResponseHeader = (header: string) =>
"//div[@data-guided-tour-id='query-table-response']//div[@class='table']//div[@role ='columnheader']//span[text()='" +
header +
"']";
_refreshIcon = "button .bp3-icon-refresh";
_addIcon = "button .bp3-icon-add";
_queryError = "span.t--query-error";
_queryResponse = (responseType: string) =>
"li[data-cy='t--tab-" + responseType + "']";
_queryRecordResult = (recordCount: number) =>
"//div/span[text()='Result:']/span[contains(text(),'" +
recordCount +
" Record')]";
_noRecordFound = "span[data-testid='no-data-table-message']";
_usePreparedStatement =
"input[name='actionConfiguration.pluginSpecifiedTemplates[0].value'][type='checkbox']";
public StartDataSourceRoutes() {
cy.intercept("PUT", "/api/v1/datasources/*").as("saveDatasource");
cy.intercept("POST", "/api/v1/datasources/test").as("testDatasource");
}
private ReplaceApplicationIdForInterceptPages(fixtureFile: any) {
let currentAppId, currentURL;
cy.readFile(
fixtureFile,
// (err: string) => {
// if (err) {
// return console.error(err);
// }}
).then((data) => {
cy.url().then((url) => {
currentURL = url;
const myRegexp = /applications(.*)/;
const match = myRegexp.exec(currentURL);
cy.log(currentURL + "currentURL from intercept is");
currentAppId = match ? match[1].split("/")[1] : null;
data.data.page.applicationId = currentAppId;
cy.writeFile(fixtureFile, JSON.stringify(data));
});
});
}
public StartInterceptRoutesForMySQL() {
//All stubbing - updating app id to current app id for Delete app by api call to be successfull:
this.ReplaceApplicationIdForInterceptPages(
"cypress/fixtures/mySQL_PUT_replaceLayoutWithCRUD.json",
);
cy.intercept("POST", "/api/v1/datasources/test", {
fixture: "testAction.json",
}).as("testDatasource");
cy.intercept("GET", "/api/v1/datasources/*/structure?ignoreCache=*", {
fixture: "mySQL_GET_selectTableDropdown.json",
}).as("getDatasourceStructure");
cy.intercept("PUT", "/api/v1/pages/crud-page/*", {
fixture: "mySQL_PUT_replaceLayoutWithCRUD.json",
}).as("replaceLayoutWithCRUDPage");
cy.intercept("GET", "/api/v1/actions*", {
fixture: "mySQL_GET_Actions.json",
}).as("getActions");
cy.intercept("POST", "/api/v1/actions/execute", {
fixture: "mySQL_POST_Execute.json",
}).as("postExecute");
cy.intercept("POST", "/api/v1/pages/crud-page", {
fixture: "mySQL_PUT_replaceLayoutWithCRUD.json",
}).as("replaceLayoutWithCRUDPage");
}
public StartInterceptRoutesForMongo() {
//All stubbing
this.ReplaceApplicationIdForInterceptPages(
"cypress/fixtures/mongo_PUT_replaceLayoutWithCRUD.json",
);
cy.intercept("POST", "/api/v1/datasources/test", {
fixture: "testAction.json",
}).as("testDatasource");
cy.intercept("GET", "/api/v1/datasources/*/structure?ignoreCache=*", {
fixture: "mongo_GET_selectTableDropdown.json",
}).as("getDatasourceStructure");
cy.intercept("PUT", "/api/v1/pages/crud-page/*", {
fixture: "mongo_PUT_replaceLayoutWithCRUD.json",
}).as("replaceLayoutWithCRUDPage");
cy.intercept("GET", "/api/v1/actions*", {
fixture: "mongo_GET_Actions.json",
}).as("getActions");
cy.intercept("POST", "/api/v1/actions/execute", {
fixture: "mongo_POST_Actions.json",
}).as("postExecute");
cy.intercept("POST", "/api/v1/pages/crud-page", {
fixture: "mongo_PUT_replaceLayoutWithCRUD.json",
}).as("post_replaceLayoutCRUDStub");
}
public CreatePlugIn(pluginName: string) {
cy.get(this._createNewPlgin(pluginName))
.parent("div")
.trigger("click", { force: true });
this.agHelper.WaitUntilToastDisappear("datasource created");
}
public NavigateToDSCreateNew() {
cy.get(this._addNewDataSource)
.last()
.scrollIntoView()
.should("be.visible")
.click({ force: true });
// cy.get(this._dsCreateNewTab)
// .should("be.visible")
// .click({ force: true });
cy.get(this._newDatabases).should("be.visible");
}
public FillPostgresDSForm(shouldAddTrailingSpaces = false) {
const hostAddress = shouldAddTrailingSpaces
? datasourceFormData["postgres-host"] + " "
: datasourceFormData["postgres-host"];
const databaseName = shouldAddTrailingSpaces
? datasourceFormData["postgres-databaseName"] + " "
: datasourceFormData["postgres-databaseName"];
cy.get(this._host).type(hostAddress);
cy.get(this._port).type(datasourceFormData["postgres-port"].toString());
cy.get(this._databaseName)
.clear()
.type(databaseName);
cy.get(this._sectionAuthentication).click();
cy.get(this._username).type(datasourceFormData["postgres-username"]);
cy.get(this._password).type(datasourceFormData["postgres-password"]);
}
public FillMongoDSForm(shouldAddTrailingSpaces = false) {
const hostAddress = shouldAddTrailingSpaces
? datasourceFormData["mongo-host"] + " "
: datasourceFormData["mongo-host"];
cy.get(this._host).type(hostAddress);
cy.get(this._port).type(datasourceFormData["mongo-port"].toString());
cy.get(this._sectionAuthentication).click();
cy.get(this._databaseName)
.clear()
.type(datasourceFormData["mongo-databaseName"]);
}
public FillMySqlDSForm(shouldAddTrailingSpaces = false) {
const hostAddress = shouldAddTrailingSpaces
? datasourceFormData["mysql-host"] + " "
: datasourceFormData["mysql-host"];
const databaseName = shouldAddTrailingSpaces
? datasourceFormData["mysql-databaseName"] + " "
: datasourceFormData["mysql-databaseName"];
cy.get(this._host).type(hostAddress);
cy.get(this._port).type(datasourceFormData["mysql-port"].toString());
cy.get(this._databaseName)
.clear()
.type(databaseName);
cy.get(this._sectionAuthentication).click();
cy.get(this._username).type(datasourceFormData["mysql-username"]);
cy.get(this._password).type(datasourceFormData["mysql-password"]);
}
public TestSaveDatasource(expectedRes = true) {
this.TestDatasource(expectedRes);
this.SaveDatasource();
}
public TestDatasource(expectedRes = true) {
cy.get(this._testDs).click();
this.agHelper.ValidateNetworkDataSuccess("@testDatasource", expectedRes);
this.agHelper.WaitUntilToastDisappear("datasource is valid");
}
public SaveDatasource() {
cy.get(this._saveDs).click();
this.agHelper.ValidateNetworkStatus("@saveDatasource", 200);
// cy.wait("@saveDatasource")
// .then((xhr) => {
// cy.log(JSON.stringify(xhr.response!.body));
// }).should("have.nested.property", "response.body.responseMeta.status", 200);
}
public DeleteDatasouceFromActiveTab(
datasourceName: string,
expectedRes = 200,
) {
this.NavigateToDSCreateNew();
this.agHelper.GetNClick(this._activeTab);
cy.get(this._datasourceCard)
.contains(datasourceName)
.scrollIntoView()
.should("be.visible")
.closest(this._datasourceCard)
.within(() => {
cy.get(this._contextMenuDatasource).click({ force: true });
});
this.agHelper.GetNClick(this._contextMenuDelete);
this.agHelper.GetNClick(this._visibleTextSpan("Are you sure?"));
this.agHelper.ValidateNetworkStatus("@deleteDatasource", expectedRes);
}
public DeleteDatasouceFromWinthinDS(
datasourceName: string,
expectedStatus = 200,
) {
this.NavigateToDSCreateNew();
this.agHelper.GetNClick(this._activeTab);
cy.get(this._datasourceCard)
.contains(datasourceName)
.scrollIntoView()
.should("be.visible")
.click();
this.agHelper.Sleep(2000); //for the Datasource page to open
this.agHelper.ClickButton("Delete");
this.agHelper.ClickButton("Are you sure?");
this.agHelper.ValidateNetworkStatus("@deleteDatasource", expectedStatus);
}
public NavigateFromActiveDS(datasourceName: string, createQuery: boolean) {
let btnLocator =
createQuery == true
? this._createQuery
: this._datasourceCardGeneratePageBtn;
this.ee.SelectEntityByName(datasourceName, "DATASOURCES");
this.ee.ExpandCollapseEntity(datasourceName, false);
this.NavigateToDSCreateNew();
this.agHelper.GetNClick(this._activeTab);
cy.get(this._datasourceCard)
.contains(datasourceName)
.scrollIntoView()
.should("be.visible")
.closest(this._datasourceCard)
.within(() => {
cy.get(btnLocator).click({ force: true });
});
this.agHelper.Sleep(2000); //for the CreateQuery/GeneratePage page to load
}
public NavigateToActiveDSviaEntityExplorer(datasourceName: string) {
this.ee.SelectEntityByName(datasourceName, "DATASOURCES");
cy.get(this._createQuery).click({ force: true });
}
public ValidateNSelectDropdown(
ddTitle: string,
currentValue = "",
newValue = "",
) {
let toChange = false;
if (currentValue)
cy.xpath(this._visibleTextSpan(currentValue))
.scrollIntoView()
.should("be.visible", currentValue + " dropdown value not present");
if (newValue) toChange = true;
if (toChange) {
cy.xpath(this._dropdownTitle(ddTitle)).click(); //to expand the dropdown
cy.xpath(this._visibleTextSpan(newValue))
.last()
.click({ force: true }); //to select the new value
}
}
public ReconnectDataSourcePostgres(dbName: string) {
this.agHelper.AssertElementVisible(this._reconnectModal);
cy.xpath(this._activeDSListReconnectModal("PostgreSQL")).should(
"be.visible",
);
cy.xpath(this._activeDSListReconnectModal(dbName)).should("be.visible"); //.click()
this.ValidateNSelectDropdown("Connection Mode", "", "Read / Write");
this.FillPostgresDSForm();
cy.get(this._saveDs).click();
cy.get(this._importSuccessModal).should("be.visible");
cy.get(this._importSuccessModalClose).click({ force: true });
}
RunQuery(expectedStatus = true) {
cy.get(this._runQueryBtn).click({ force: true });
this.agHelper.ValidateNetworkExecutionSuccess(
"@postExecute",
expectedStatus,
);
}
public ReadQueryTableResponse(index: number, timeout = 100) {
//timeout can be sent higher values incase of larger tables
this.agHelper.Sleep(timeout); //Settling time for table!
return cy
.xpath(this._queryTableResponse)
.eq(index)
.invoke("text");
}
public AssertQueryResponseHeaders(columnHeaders: string[]) {
columnHeaders.forEach(($header) =>
this.agHelper.AssertElementVisible(this._queryResponseHeader($header)),
);
}
public AssertJSONFormHeader(
rowindex: number,
colIndex: number,
headerString: string,
validateCellData: "" | string = "",
isMongo = false,
) {
let jsonHeaderString = "";
this.table.ReadTableRowColumnData(rowindex, colIndex).then(($cellData) => {
if (validateCellData) expect($cellData).to.eq(validateCellData);
jsonHeaderString =
isMongo == true
? "Update Document " + headerString + ": " + $cellData
: "Update Row " + headerString + ": " + $cellData;
this.agHelper
.GetText(this.locator._jsonFormHeader)
.then(($header: any) => expect($header).to.eq(jsonHeaderString));
});
}
public ToggleUsePreparedStatement(enable = true || false) {
if (enable)
cy.get(this._usePreparedStatement).check({
force: true,
});
else
cy.get(this._usePreparedStatement).uncheck({
force: true,
});
this.agHelper.AssertAutoSave();
}
}