🪟 🧹 Improve and fix linting in webapp-e2e-tests (#20134)

* Apply similar eslint rules to the webapp project and fix outstanding issues

* add paths to e2e tsconfig (for webstorm)

airbyte-webapp-e2e-tests/.eslintrc.js

@@ -0,0 +1,52 @@
+module.exports = {
+  env: {
+    browser: true,
+    node: true,
+  },
+  extends: [
+    "plugin:cypress/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "plugin:prettier/recommended",
+  ],
+  plugins: ["@typescript-eslint", "prettier"],
+  parser: "@typescript-eslint/parser",
+  rules: {
+    "cypress/no-unnecessary-waiting": "warn",
+    "prettier/prettier": "warn",
+
+    curly: "warn",
+    "dot-location": ["warn", "property"],
+    "dot-notation": "warn",
+    "no-else-return": "warn",
+    "no-lonely-if": "warn",
+    "no-inner-declarations": "off",
+    "no-unused-vars": "off",
+    "no-useless-computed-key": "warn",
+    "no-useless-return": "warn",
+    "no-var": "warn",
+    "object-shorthand": ["warn", "always"],
+    "prefer-arrow-callback": "warn",
+    "prefer-const": "warn",
+    "prefer-destructuring": ["warn", { AssignmentExpression: { array: true } }],
+    "prefer-object-spread": "warn",
+    "prefer-template": "warn",
+    "spaced-comment": ["warn", "always", { markers: ["/"] }],
+    yoda: "warn",
+
+    "@typescript-eslint/array-type": ["warn", { default: "array-simple" }],
+    "@typescript-eslint/ban-ts-comment": [
+      "warn",
+      {
+        "ts-expect-error": "allow-with-description",
+      },
+    ],
+    "@typescript-eslint/ban-types": "warn",
+    "@typescript-eslint/consistent-indexed-object-style": ["warn", "record"],
+    "@typescript-eslint/consistent-type-definitions": ["warn", "interface"],
+    "@typescript-eslint/no-unused-vars": "warn",
+
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/triple-slash-reference": "off",
+  },
+};

airbyte-webapp-e2e-tests/cypress/commands/common.ts

@@ -3,9 +3,7 @@ export const submitButtonClick = () => {
 };
 
 export const updateField = (field: string, value: string) => {
-  cy.get("input[name='" + field + "']")
-    .clear()
-    .type(value);
+  cy.get(`input[name='${field}']`).clear().type(value);
 };
 
 export const openSettingForm = (name: string) => {
@@ -31,5 +29,5 @@ export const fillEmail = (email: string) => {
 // useful for ensuring that a name is unique from one test run to the next
 export const appendRandomString = (string: string) => {
   const randomString = Math.random().toString(36).substring(2, 10);
-  return string + " _" + randomString;
+  return `${string} _${randomString}`;
 };

airbyte-webapp-e2e-tests/cypress/commands/destination.ts

@@ -2,7 +2,7 @@ import { deleteEntity, openSettingForm, submitButtonClick, updateField } from ".
 import { fillLocalJsonForm, fillPostgresForm } from "./connector";
 import { goToDestinationPage, openNewDestinationForm } from "pages/destinationPage";
 
-export const createLocalJsonDestination = (name: string, destinationPath: string = "/local") => {
+export const createLocalJsonDestination = (name: string, destinationPath = "/local") => {
   cy.intercept("/api/v1/scheduler/destinations/check_connection").as("checkDestinationConnection");
   cy.intercept("/api/v1/destinations/create").as("createDestination");
 
@@ -17,12 +17,12 @@ export const createLocalJsonDestination = (name: string, destinationPath: string
 
 export const createPostgresDestination = (
   name: string,
-  host: string = "localhost",
-  port: string = "5434",
-  database: string = "airbyte_ci_destination",
-  username: string = "postgres",
-  password: string = "secret_password",
-  schema: string = ""
+  host = "localhost",
+  port = "5434",
+  database = "airbyte_ci_destination",
+  username = "postgres",
+  password = "secret_password",
+  schema = ""
 ) => {
   cy.intercept("/api/v1/scheduler/destinations/check_connection").as("checkDestinationConnection");
   cy.intercept("/api/v1/destinations/create").as("createDestination");

airbyte-webapp-e2e-tests/cypress/commands/source.ts

@@ -4,12 +4,12 @@ import { fillPostgresForm, fillPokeAPIForm } from "./connector";
 
 export const createPostgresSource = (
   name: string,
-  host: string = "localhost",
-  port: string = "5433",
-  database: string = "airbyte_ci_source",
-  username: string = "postgres",
-  password: string = "secret_password",
-  schema: string = ""
+  host = "localhost",
+  port = "5433",
+  database = "airbyte_ci_source",
+  username = "postgres",
+  password = "secret_password",
+  schema = ""
 ) => {
   cy.intercept("/api/v1/scheduler/sources/check_connection").as("checkSourceUpdateConnection");
   cy.intercept("/api/v1/sources/create").as("createSource");

airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts

@@ -21,7 +21,7 @@ import {
   checkPrimaryKey,
   isPrimaryKeyNonExist,
   selectPrimaryKeyField,
-  checkPreFilledPrimaryKeyField
+  checkPreFilledPrimaryKeyField,
 } from "pages/replicationPage";
 import { openSourceDestinationFromGrid, goToSourcePage } from "pages/sourcePage";
 import { goToSettingsPage } from "pages/settingsConnectionPage";
@@ -35,7 +35,6 @@ import {
   toggleStreamWithChangesAccordion,
 } from "../pages/modals/catalogDiffModal";
 import { updateSchemaModalConfirmBtnClick } from "../pages/modals/updateSchemaModal";
-import { update, ceil } from "cypress/types/lodash";
 
 describe("Connection main actions", () => {
   beforeEach(() => {
@@ -252,7 +251,7 @@ describe("Connection main actions", () => {
       expect(interception.request)
         .property("body")
         .to.contain({
-          name: sourceName + " <> " + destName + "Connection name",
+          name: `${sourceName} <> ${destName}Connection name`,
           prefix: "auto_test",
           namespaceDefinition: "customformat",
           namespaceFormat: "${SOURCE_NAMESPACE}_test",
@@ -453,7 +452,7 @@ describe("Connection main actions", () => {
       expect(interception.request)
         .property("body")
         .to.contain({
-          name: sourceName + " <> " + destName + "Connection name",
+          name: `${sourceName} <> ${destName}Connection name`,
           namespaceDefinition: "customformat",
           namespaceFormat: "${SOURCE_NAMESPACE}_DestinationNamespaceCustomFormat",
           status: "active",
@@ -523,7 +522,7 @@ describe("Connection main actions", () => {
       expect(interception.request)
         .property("body")
         .to.contain({
-          name: sourceName + " <> " + destName + "Connection name",
+          name: `${sourceName} <> ${destName}Connection name`,
           namespaceDefinition: "destination",
           namespaceFormat: "${SOURCE_NAMESPACE}",
           status: "active",

airbyte-webapp-e2e-tests/cypress/integration/source.spec.ts

@@ -13,11 +13,12 @@ describe("Source main actions", () => {
     cy.intercept("/api/v1/sources/create").as("createSource");
     createPostgresSource("Test source cypress");
 
-    cy.wait("@createSource", {timeout: 30000}).then((interception) => {
-      assert("include", `/source/${interception.response?.body.Id}`)});
+    cy.wait("@createSource", { timeout: 30000 }).then((interception) => {
+      assert("include", `/source/${interception.response?.body.Id}`);
+    });
   });
 
-  //TODO: add update source on some other connector or create 1 more user for pg
+  // TODO: add update source on some other connector or create 1 more user for pg
   it.skip("Update source", () => {
     const sourceName = appendRandomString("Test source cypress for update");
     createPostgresSource(sourceName);
@@ -70,11 +71,12 @@ describe("Unsaved changes modal", () => {
 
     cy.get("[data-testid='confirmationModal']").should("exist");
     cy.get("[data-testid='confirmationModal']").contains("Discard changes");
-    cy.get("[data-testid='confirmationModal']")
-      .contains("There are unsaved changes. Are you sure you want to discard your changes?");
+    cy.get("[data-testid='confirmationModal']").contains(
+      "There are unsaved changes. Are you sure you want to discard your changes?"
+    );
   });
 
-  //BUG - https://github.com/airbytehq/airbyte/issues/18246
+  // BUG - https://github.com/airbytehq/airbyte/issues/18246
   it.skip("Check leaving Source page after failing testing", () => {
     cy.intercept("/api/v1/scheduler/sources/check_connection").as("checkSourceUpdateConnection");
 
@@ -83,13 +85,14 @@ describe("Unsaved changes modal", () => {
     fillPokeAPIForm("testName", "name");
     submitButtonClick();
 
-    cy.wait("@checkSourceUpdateConnection", {timeout: 5000});
+    cy.wait("@checkSourceUpdateConnection", { timeout: 5000 });
 
     openHomepage();
 
     cy.get("[data-testid='confirmationModal']").should("exist");
     cy.get("[data-testid='confirmationModal']").contains("Discard changes");
-    cy.get("[data-testid='confirmationModal']")
-      .contains("There are unsaved changes. Are you sure you want to discard your changes?");
+    cy.get("[data-testid='confirmationModal']").contains(
+      "There are unsaved changes. Are you sure you want to discard your changes?"
+    );
   });
 });

airbyte-webapp-e2e-tests/cypress/pages/createConnectorPage.ts

@@ -53,7 +53,7 @@ export const enterSchema = (value: string) => {
   cy.get(schemaInput).first().type(value, { force: true }).type("{enter}", { force: true });
 };
 
-export const removeSchema = (value: string = "Remove public") => {
+export const removeSchema = (value = "Remove public") => {
   if (!value) {
     return;
   }

airbyte-webapp-e2e-tests/cypress/pages/modals/updateSchemaModal.ts

@@ -1,3 +1,3 @@
 export const updateSchemaModalConfirmBtnClick = () => {
-    cy.get("[data-testid='update-schema-confirm-btn']").click();
-};
+  cy.get("[data-testid='update-schema-confirm-btn']").click();
+};

airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts

@@ -40,10 +40,7 @@ export const fillOutDestinationPrefix = (value: string) => {
 export const setupDestinationNamespaceCustomFormat = (value: string) => {
   cy.get(destinationNamespace).click();
   cy.get(destinationNamespaceCustom).click();
-  cy.get(destinationNamespaceCustomInput)
-    .first()
-    .type(value)
-    .should("have.value", "${SOURCE_NAMESPACE}" + value);
+  cy.get(destinationNamespaceCustomInput).first().type(value).should("have.value", `\${SOURCE_NAMESPACE}${value}`);
 };
 
 export const setupDestinationNamespaceSourceFormat = () => {

airbyte-webapp-e2e-tests/cypress/plugins/index.ts

@@ -12,16 +12,15 @@
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
 
-import Cypress from "cypress"
-
+import Cypress from "cypress";
 
 /**
  * @type {Cypress.PluginConfig}
  */
 module.exports = (on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
-    on("task", {
-        dbQuery:(query)=> require("cypress-postgres")(query.query,query.connection)
-    });
+  on("task", {
+    dbQuery: (query) => require("cypress-postgres")(query.query, query.connection),
+  });
 };