PromucFlow_constructor/app/client/cypress/support/dataSourceCommands.js
Ivan Akulov 424d2f6965
chore: upgrade to prettier v2 + enforce import types (#21013)Co-authored-by: Satish Gandham <hello@satishgandham.com> Co-authored-by: Satish Gandham <satish.iitg@gmail.com>
## Description

This PR upgrades Prettier to v2 + enforces TypeScript’s [`import
type`](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export)
syntax where applicable. It’s submitted as a separate PR so we can merge
it easily.

As a part of this PR, we reformat the codebase heavily:
- add `import type` everywhere where it’s required, and
- re-format the code to account for Prettier 2’s breaking changes:
https://prettier.io/blog/2020/03/21/2.0.0.html#breaking-changes

This PR is submitted against `release` to make sure all new code by team
members will adhere to new formatting standards, and we’ll have fewer
conflicts when merging `bundle-optimizations` into `release`. (I’ll
merge `release` back into `bundle-optimizations` once this PR is
merged.)

### Why is this needed?

This PR is needed because, for the Lodash optimization from
7cbb12af88,
we need to use `import type`. Otherwise, `babel-plugin-lodash` complains
that `LoDashStatic` is not a lodash function.

However, just using `import type` in the current codebase will give you
this:

<img width="962" alt="Screenshot 2023-03-08 at 17 45 59"
src="https://user-images.githubusercontent.com/2953267/223775744-407afa0c-e8b9-44a1-90f9-b879348da57f.png">

That’s because Prettier 1 can’t parse `import type` at all. To parse it,
we need to upgrade to Prettier 2.

### Why enforce `import type`?

Apart from just enabling `import type` support, this PR enforces
specifying `import type` everywhere it’s needed. (Developers will get
immediate TypeScript and ESLint errors when they forget to do so.)

I’m doing this because I believe `import type` improves DX and makes
refactorings easier.

Let’s say you had a few imports like below. Can you tell which of these
imports will increase the bundle size? (Tip: it’s not all of them!)

```ts
// app/client/src/workers/Linting/utils.ts
import { Position } from "codemirror";
import { LintError as JSHintError, LintOptions } from "jshint";
import { get, isEmpty, isNumber, keys, last, set } from "lodash";
```

It’s pretty hard, right?

What about now?

```ts
// app/client/src/workers/Linting/utils.ts
import type { Position } from "codemirror";
import type { LintError as JSHintError, LintOptions } from "jshint";
import { get, isEmpty, isNumber, keys, last, set } from "lodash";
```

Now, it’s clear that only `lodash` will be bundled.

This helps developers to see which imports are problematic, but it
_also_ helps with refactorings. Now, if you want to see where
`codemirror` is bundled, you can just grep for `import \{.*\} from
"codemirror"` – and you won’t get any type-only imports.

This also helps (some) bundlers. Upon transpiling, TypeScript erases
type-only imports completely. In some environment (not ours), this makes
the bundle smaller, as the bundler doesn’t need to bundle type-only
imports anymore.

## Type of change

- Chore (housekeeping or task changes that don't impact user perception)


## How Has This Been Tested?

This was tested to not break the build.

### Test Plan
> Add Testsmith test cases links that relate to this PR

### 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
- [ ] 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
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test

---------

Co-authored-by: Satish Gandham <hello@satishgandham.com>
Co-authored-by: Satish Gandham <satish.iitg@gmail.com>
2023-03-16 17:11:47 +05:30

513 lines
18 KiB
JavaScript

/* eslint-disable cypress/no-unnecessary-waiting */
/* eslint-disable cypress/no-assigning-return-values */
require("cy-verify-downloads").addCustomCommand();
require("cypress-file-upload");
import { ObjectsRegistry } from "../support/Objects/Registry";
const pages = require("../locators/Pages.json");
const datasourceEditor = require("../locators/DatasourcesEditor.json");
const datasourceFormData = require("../fixtures/datasources.json");
const explorer = require("../locators/explorerlocators.json");
const apiWidgetslocator = require("../locators/apiWidgetslocator.json");
const apiEditorLocators = require("../locators/ApiEditor");
const dataSources = ObjectsRegistry.DataSources;
const backgroundColorBlack = "rgb(0, 0, 0)";
const backgroundColorGray1 = "rgb(250, 250, 250)";
const backgroundColorGray2 = "rgb(240, 240, 240)";
const backgroundColorGray8 = "rgb(113, 110, 110)";
export const initLocalstorage = () => {
cy.window().then((window) => {
window.localStorage.setItem("ShowCommentsButtonToolTip", "");
window.localStorage.setItem("updateDismissed", "true");
});
};
Cypress.Commands.add("testSaveDeleteDatasource", () => {
// Instead of deleting the last datasource on the active datasources list,
// we delete the datasource that was just created (identified by its title)
cy.get(datasourceEditor.datasourceTitle)
.invoke("text")
.then((datasourceTitle) => {
// test datasource
cy.get(".t--test-datasource").click();
cy.wait("@testDatasource");
// .should("have.nested.property", "response.body.data.success", true)
// .debug();
// save datasource
cy.get(".t--save-datasource").click();
cy.wait("@saveDatasource").should(
"have.nested.property",
"response.body.responseMeta.status",
201,
);
// select datasource to be deleted by datasource title
cy.contains("EDIT").click();
// delete datasource
cy.get(".t--delete-datasource").click();
cy.get(".t--delete-datasource").contains("Are you sure?").click();
cy.wait("@deleteDatasource").should(
"have.nested.property",
"response.body.responseMeta.status",
200,
);
});
});
Cypress.Commands.add("NavigateToDatasourceEditor", () => {
cy.get(explorer.addDBQueryEntity).last().click({ force: true });
cy.get(pages.integrationCreateNew)
.should("be.visible")
.click({ force: true });
});
Cypress.Commands.add("NavigateToActiveDatasources", () => {
cy.get(explorer.addDBQueryEntity).last().click({ force: true });
cy.get(pages.integrationActiveTab)
.should("be.visible")
.click({ force: true });
});
Cypress.Commands.add("testDatasource", (expectedRes = true) => {
cy.get(".t--test-datasource").click({ force: true });
cy.wait("@testDatasource").should(
"have.nested.property",
"response.body.data.success",
expectedRes,
);
});
Cypress.Commands.add("saveDatasource", () => {
cy.get(".t--save-datasource").click({ force: true });
cy.wait("@saveDatasource")
.then((xhr) => {
cy.log(JSON.stringify(xhr.response.body));
})
.should("have.nested.property", "response.body.responseMeta.status", 201);
});
Cypress.Commands.add("testSaveDatasource", (expectedRes = true) => {
cy.testDatasource(expectedRes);
cy.saveDatasource();
// cy.get(datasourceEditor.datasourceCard)
// .last()
// .click();
});
Cypress.Commands.add(
"fillMongoDatasourceForm",
(shouldAddTrailingSpaces = false) => {
const hostAddress = shouldAddTrailingSpaces
? datasourceFormData["mongo-host"] + " "
: datasourceFormData["mongo-host"];
// const databaseName = shouldAddTrailingSpaces
// ? datasourceFormData["mongo-databaseName"] + " "
// : datasourceFormData["mongo-databaseName"];
cy.get(datasourceEditor["host"]).type(hostAddress);
cy.get(datasourceEditor.port).type(datasourceFormData["mongo-port"]);
//cy.get(datasourceEditor["port"]).type(datasourceFormData["mongo-port"]);
//cy.get(datasourceEditor["selConnectionType"]).click();
//cy.contains(datasourceFormData["connection-type"]).click();
//cy.get(datasourceEditor["defaultDatabaseName"]).type(databaseName);//is optional hence removing
dataSources.ExpandSectionByName(datasourceEditor.sectionAuthentication);
cy.get(datasourceEditor["databaseName"])
.clear()
.type(datasourceFormData["mongo-databaseName"]);
// cy.get(datasourceEditor["username"]).type(
// datasourceFormData["mongo-username"],
// );
// cy.get(datasourceEditor["password"]).type(
// datasourceFormData["mongo-password"],
// );
// cy.get(datasourceEditor["authenticationAuthtype"]).click();
// cy.contains(datasourceFormData["mongo-authenticationAuthtype"]).click({
// force: true,
// });
},
);
Cypress.Commands.add(
"fillPostgresDatasourceForm",
(shouldAddTrailingSpaces = false) => {
const hostAddress = shouldAddTrailingSpaces
? datasourceFormData["postgres-host"] + " "
: datasourceFormData["postgres-host"];
const databaseName = shouldAddTrailingSpaces
? datasourceFormData["postgres-databaseName"] + " "
: datasourceFormData["postgres-databaseName"];
cy.get(datasourceEditor.host).type(hostAddress);
cy.get(datasourceEditor.port).type(datasourceFormData["postgres-port"]);
cy.get(datasourceEditor.databaseName).clear().type(databaseName);
dataSources.ExpandSectionByName(datasourceEditor.sectionAuthentication);
cy.get(datasourceEditor.username).type(
datasourceFormData["postgres-username"],
);
cy.get(datasourceEditor.password).type(
datasourceFormData["postgres-password"],
);
},
);
Cypress.Commands.add(
"fillElasticDatasourceForm",
(shouldAddTrailingSpaces = false) => {
// we are using postgresql data for elastic search,
// in the future, this should be changed, just for testing purposes
const hostAddress = "https://localhost";
const headerValue = "Bearer Token";
cy.get(datasourceEditor.host).type(hostAddress);
cy.get(datasourceEditor.port).type(datasourceFormData["postgres-port"]);
cy.get(datasourceEditor.sectionAuthentication).click();
cy.get(datasourceEditor.username).type(
datasourceFormData["postgres-username"],
);
cy.get(datasourceEditor.password).type(
datasourceFormData["postgres-password"],
);
cy.get(datasourceEditor.headers).type(headerValue);
},
);
Cypress.Commands.add(
"fillMySQLDatasourceForm",
(shouldAddTrailingSpaces = false) => {
const hostAddress = shouldAddTrailingSpaces
? datasourceFormData["mysql-host"] + " "
: datasourceFormData["mysql-host"];
const databaseName = shouldAddTrailingSpaces
? datasourceFormData["mysql-databaseName"] + " "
: datasourceFormData["mysql-databaseName"];
cy.get(datasourceEditor.host).type(hostAddress);
cy.get(datasourceEditor.port).type(datasourceFormData["mysql-port"]);
cy.get(datasourceEditor.databaseName).clear().type(databaseName);
dataSources.ExpandSectionByName(datasourceEditor.sectionAuthentication);
cy.get(datasourceEditor.username).type(
datasourceFormData["mysql-username"],
);
cy.get(datasourceEditor.password).type(
datasourceFormData["mysql-password"],
);
},
);
Cypress.Commands.add(
"fillMsSQLDatasourceForm",
(shouldAddTrailingSpaces = false) => {
const hostAddress = shouldAddTrailingSpaces
? datasourceFormData["mssql-host"] + " "
: datasourceFormData["mssql-host"];
const databaseName = shouldAddTrailingSpaces
? datasourceFormData["mssql-databaseName"] + " "
: datasourceFormData["mssql-databaseName"];
cy.get(datasourceEditor.host).type(hostAddress);
cy.get(datasourceEditor.port).type(datasourceFormData["mssql-port"]);
cy.get(datasourceEditor.databaseName).clear().type(databaseName);
dataSources.ExpandSectionByName(datasourceEditor.sectionAuthentication);
cy.get(datasourceEditor.username).type(
datasourceFormData["mssql-username"],
);
cy.get(datasourceEditor.password).type(
datasourceFormData["mssql-password"],
);
},
);
Cypress.Commands.add(
"fillArangoDBDatasourceForm",
(shouldAddTrailingSpaces = false) => {
const hostAddress = shouldAddTrailingSpaces
? datasourceFormData["arango-host"] + " "
: datasourceFormData["arango-host"];
const databaseName = shouldAddTrailingSpaces
? datasourceFormData["arango-databaseName"] + " "
: datasourceFormData["arango-databaseName"];
cy.get(datasourceEditor.host).type(hostAddress);
cy.get(datasourceEditor.port).type(datasourceFormData["arango-port"]);
cy.get(datasourceEditor.databaseName).clear().type(databaseName);
dataSources.ExpandSectionByName(datasourceEditor.sectionAuthentication);
cy.get(datasourceEditor.username).type(
datasourceFormData["arango-username"],
);
cy.get(datasourceEditor.password).type(
datasourceFormData["arango-password"],
);
},
);
Cypress.Commands.add(
"fillRedshiftDatasourceForm",
(shouldAddTrailingSpaces = false) => {
const hostAddress = shouldAddTrailingSpaces
? datasourceFormData["redshift-host"] + " "
: datasourceFormData["redshift-host"];
const databaseName = shouldAddTrailingSpaces
? datasourceFormData["redshift-databaseName"] + " "
: datasourceFormData["redshift-databaseName"];
cy.get(datasourceEditor.host).type(hostAddress);
cy.get(datasourceEditor.port).type(datasourceFormData["redshift-port"]);
cy.get(datasourceEditor.databaseName).clear().type(databaseName);
dataSources.ExpandSectionByName(datasourceEditor.sectionAuthentication);
cy.get(datasourceEditor.username).type(
datasourceFormData["redshift-username"],
);
cy.get(datasourceEditor.password).type(
datasourceFormData["redshift-password"],
);
},
);
Cypress.Commands.add(
"fillUsersMockDatasourceForm",
(shouldAddTrailingSpaces = false) => {
const userMockDatabaseName = shouldAddTrailingSpaces
? `${datasourceFormData["mockDatabaseName"] + " "}`
: datasourceFormData["mockDatabaseName"];
const userMockHostAddress = shouldAddTrailingSpaces
? `${datasourceFormData["mockHostAddress"] + " "}`
: datasourceFormData["mockHostAddress"];
const userMockDatabaseUsername = shouldAddTrailingSpaces
? `${datasourceFormData["mockDatabaseUsername"] + " "}`
: datasourceFormData["mockDatabaseUsername"];
cy.get(datasourceEditor["host"]).clear().type(userMockHostAddress);
cy.get(datasourceEditor["databaseName"]).clear().type(userMockDatabaseName);
cy.get(datasourceEditor["sectionAuthentication"]).click();
cy.get(datasourceEditor["password"])
.clear()
.type(datasourceFormData["mockDatabasePassword"]);
cy.get(datasourceEditor["username"]).clear().type(userMockDatabaseUsername);
},
);
Cypress.Commands.add(
"fillSMTPDatasourceForm",
(shouldAddTrailingSpaces = false) => {
const hostAddress = shouldAddTrailingSpaces
? datasourceFormData["smtp-host"] + " "
: datasourceFormData["smtp-host"];
cy.get(datasourceEditor.host).type(hostAddress);
cy.get(datasourceEditor.port).type(datasourceFormData["smtp-port"]);
cy.get(datasourceEditor.sectionAuthentication).click();
cy.get(datasourceEditor.username).type(datasourceFormData["smtp-username"]);
cy.get(datasourceEditor.password).type(datasourceFormData["smtp-password"]);
},
);
Cypress.Commands.add("createPostgresDatasource", () => {
cy.NavigateToDatasourceEditor();
cy.get(datasourceEditor.PostgreSQL).click();
cy.fillPostgresDatasourceForm();
cy.testSaveDatasource();
});
// this can be modified further when google sheets automation is done.
Cypress.Commands.add("createGoogleSheetsDatasource", () => {
cy.NavigateToDatasourceEditor();
cy.get(datasourceEditor.GoogleSheets).click();
});
Cypress.Commands.add("deleteDatasource", (datasourceName) => {
cy.NavigateToQueryEditor();
cy.get(pages.integrationActiveTab)
.should("be.visible")
.click({ force: true });
cy.contains(".t--datasource-name", datasourceName).click();
cy.get(".t--delete-datasource").click();
cy.get(".t--delete-datasource").contains("Are you sure?").click();
cy.wait("@deleteDatasource").should(
"have.nested.property",
"response.body.responseMeta.status",
200,
);
});
Cypress.Commands.add("renameDatasource", (datasourceName) => {
cy.get(".t--edit-datasource-name").click();
cy.get(".t--edit-datasource-name input")
.clear()
.type(datasourceName, { force: true })
.should("have.value", datasourceName)
.blur();
});
Cypress.Commands.add("fillAmazonS3DatasourceForm", () => {
cy.get(datasourceEditor.projectID).clear().type(Cypress.env("S3_ACCESS_KEY"));
cy.get(datasourceEditor.serviceAccCredential)
.clear()
.type(Cypress.env("S3_SECRET_KEY"));
});
Cypress.Commands.add("createAmazonS3Datasource", () => {
cy.NavigateToDatasourceEditor();
cy.get(datasourceEditor.AmazonS3).click();
cy.fillAmazonS3DatasourceForm();
cy.testSaveDatasource();
});
Cypress.Commands.add("fillMongoDatasourceFormWithURI", () => {
cy.xpath(datasourceEditor["mongoUriDropdown"]).click().wait(500);
cy.xpath(datasourceEditor["mongoUriYes"]).click().wait(500);
cy.xpath(datasourceEditor["mongoUriInput"]).type(
datasourceFormData["mongo-uri"],
);
});
Cypress.Commands.add("ReconnectDatasource", (datasource) => {
cy.xpath(`//span[text()='${datasource}']`).click();
});
Cypress.Commands.add("createNewAuthApiDatasource", (renameVal) => {
cy.NavigateToAPI_Panel();
//Click on Authenticated API
cy.get(apiWidgetslocator.createAuthApiDatasource).click();
//Verify weather Authenticated API is successfully created.
// cy.wait("@saveDatasource").should(
// "have.nested.property",
// "response.body.responseMeta.status",
// 201,
// );
cy.get(datasourceEditor.datasourceTitleLocator).click();
cy.get(`${datasourceEditor.datasourceTitleLocator} input`)
.clear()
.type(renameVal, { force: true })
.blur();
//Fill dummy inputs and save
cy.fillAuthenticatedAPIForm();
cy.saveDatasource();
// Added because api name edit takes some time to
// reflect in api sidebar after the call passes.
// eslint-disable-next-line cypress/no-unnecessary-waiting
cy.wait(2000);
});
Cypress.Commands.add("deleteAuthApiDatasource", (renameVal) => {
//Navigate to active datasources panel.
cy.get(pages.addEntityAPI).last().should("be.visible").click({ force: true });
cy.get(pages.integrationActiveTab)
.should("be.visible")
.click({ force: true });
cy.get("#loading").should("not.exist");
//Select the datasource to delete
cy.get(".t--datasource-name").contains(renameVal).click();
//Click on delete and later confirm
cy.get(".t--delete-datasource").click();
cy.get(".t--delete-datasource").contains("Are you sure?").click();
//Verify the status of deletion
cy.wait("@deleteDatasource").should(
"have.nested.property",
"response.body.responseMeta.status",
200,
);
});
Cypress.Commands.add("createGraphqlDatasource", (datasourceName) => {
cy.NavigateToDatasourceEditor();
//Click on Authenticated Graphql API
cy.get(apiEditorLocators.createGraphQLDatasource).click({ force: true });
//Verify weather Authenticated Graphql Datasource is successfully created.
cy.wait("@saveDatasource").should(
"have.nested.property",
"response.body.responseMeta.status",
201,
);
// Change the Graphql Datasource name
cy.get(".t--edit-datasource-name").click();
cy.get(".t--edit-datasource-name input")
.clear()
.type(datasourceName, { force: true })
.should("have.value", datasourceName)
.blur();
// Adding Graphql Url
cy.get("input[name='url']").type(datasourceFormData.graphqlApiUrl);
// save datasource
cy.get(".t--save-datasource").click({ force: true });
cy.wait("@saveDatasource").should(
"have.nested.property",
"response.body.responseMeta.status",
201,
);
});
Cypress.Commands.add("createMockDatasource", (datasourceName) => {
cy.get(".t--mock-datasource").contains(datasourceName).click();
});
Cypress.Commands.add("datasourceCardContainerStyle", (tag) => {
cy.get(tag)
.should("have.css", "min-width", "150px")
.and("have.css", "border-radius", "4px")
.and("have.css", "align-items", "center");
});
Cypress.Commands.add("datasourceCardStyle", (tag) => {
cy.get(tag)
.should("have.css", "display", "flex")
.and("have.css", "justify-content", "space-between")
.and("have.css", "align-items", "center")
.and("have.css", "height", "64px")
.realHover()
.should("have.css", "background-color", backgroundColorGray1)
.and("have.css", "cursor", "pointer");
});
Cypress.Commands.add("datasourceImageStyle", (tag) => {
cy.get(tag)
.should("have.css", "height", "28px")
.and("have.css", "max-width", "100%");
});
Cypress.Commands.add("datasourceContentWrapperStyle", (tag) => {
cy.get(tag)
.should("have.css", "display", "flex")
.and("have.css", "align-items", "center")
.and("have.css", "gap", "13px")
.and("have.css", "padding-left", "13.5px");
});
Cypress.Commands.add("datasourceIconWrapperStyle", (tag) => {
cy.get(tag)
.should("have.css", "background-color", backgroundColorGray2)
.and("have.css", "width", "48px")
.and("have.css", "height", "48px")
.and("have.css", "border-radius", "50%")
.and("have.css", "display", "flex")
.and("have.css", "align-items", "center");
});
Cypress.Commands.add("datasourceNameStyle", (tag) => {
cy.get(tag)
.should("have.css", "color", backgroundColorBlack)
.and("have.css", "font-size", "16px")
.and("have.css", "font-weight", "400")
.and("have.css", "line-height", "24px")
.and("have.css", "letter-spacing", "-0.24px");
});
Cypress.Commands.add("mockDatasourceDescriptionStyle", (tag) => {
cy.get(tag)
.should("have.css", "color", backgroundColorGray8)
.and("have.css", "font-size", "13px")
.and("have.css", "font-weight", "400")
.and("have.css", "line-height", "17px")
.and("have.css", "letter-spacing", "-0.24px");
});