Lint all files in the project (#1167)

.eslintrc.js

@@ -1,8 +1,10 @@
 /** @type {import("eslint").Linter.Config } */
 module.exports = {
   root: true,
+  ignorePatterns: ["node_modules", "build", "keycloak-theme", "server"],
   parserOptions: {
-    project: "./tsconfig.json",
+    project: "./tsconfig.eslint.json",
+    extraFileExtensions: [".mjs"],
   },
   env: {
     node: true,
@@ -48,5 +50,13 @@ module.exports = {
         "@typescript-eslint/no-empty-function": "off",
       },
     },
+    {
+      files: ["cypress/**/*"],
+      extends: ["plugin:cypress/recommended"],
+      // TODO: Set these rules to "error" when issues have been resolved.
+      rules: {
+        "cypress/no-unnecessary-waiting": "warn",
+      },
+    },
   ],
 };

cypress/integration/user_fed_ldap_test.spec.ts

@@ -160,10 +160,7 @@ describe("User Fed LDAP tests", () => {
   it("Create new LDAP provider using the New Provider dropdown", () => {
     providersPage.clickMenuCommand(addProviderMenu, allCapProvider);
     providersPage.fillLdapRequiredGeneralData(secondLdapName, secondLdapVendor);
-    providersPage.fillLdapRequiredConnectionData(
+    providersPage.fillLdapRequiredConnectionData(connectionUrl, secondBindType);
-      connectionUrl,
-      secondBindType,
-    );
     providersPage.fillLdapRequiredSearchingData(
       secondUsersDn,
       secondUserLdapAtt,

cypress/plugins/index.js

@@ -1,3 +1,4 @@
+/// <reference types="cypress" />
 // ***********************************************************
 // This example plugins/index.js can be used to load plugins
 //
@@ -14,7 +15,8 @@
 /**
  * @type {Cypress.PluginConfig}
  */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
-}
+};

cypress/support/pages/admin_console/manage/RoleMappingTab.ts

@@ -51,7 +51,7 @@ export default class RoleMappingTab {
   }
 
   checkRoles(roleNames: string[]) {
-    if (roleNames && roleNames.length) {
+    if (roleNames.length) {
       cy.getId(this.assignedRolesTable)
         .get(this.namesColumn)
         .should((roles) => {

cypress/support/pages/admin_console/manage/realm_roles/CreateRealmRolePage.ts

@@ -10,7 +10,7 @@ export default class CreateRealmRolePage {
     this.realmRoleNameError = "#kc-name-helper";
     this.realmRoleDescriptionInput = "#kc-role-description";
 
-    this.saveBtn = 'realm-roles-save-button';
+    this.saveBtn = "realm-roles-save-button";
     this.cancelBtn = '[type="button"]';
   }
 

cypress/support/pages/admin_console/manage/users/UserDetailsPage.ts

@@ -1,54 +1,54 @@
 import { RequiredActionAlias } from "@keycloak/keycloak-admin-client/lib/defs/requiredActionProviderRepresentation";
 
 export default class UserDetailsPage {
-    saveBtn: string;
+  saveBtn: string;
-    cancelBtn: string;
+  cancelBtn: string;
-    emailInput: string;
+  emailInput: string;
-    emailValue: string;
+  emailValue: string;
-    firstNameInput: string;
+  firstNameInput: string;
-    firstNameValue: string;
+  firstNameValue: string;
-    lastNameInput: string;
+  lastNameInput: string;
-    lastNameValue: string;
+  lastNameValue: string;
-    enabledSwitch: string;
+  enabledSwitch: string;
-    enabledValue: boolean
+  enabledValue: boolean;
-    requiredUserActions: RequiredActionAlias[];
+  requiredUserActions: RequiredActionAlias[];
 
-    constructor() {
+  constructor() {
-      this.saveBtn = "save-user";
+    this.saveBtn = "save-user";
-      this.cancelBtn = "cancel-create-user";
+    this.cancelBtn = "cancel-create-user";
-      this.emailInput = "email-input"
+    this.emailInput = "email-input";
-      this.emailValue = "example" + "_" + (Math.random() + 1).toString(36).substring(7) + "@example.com";
+    this.emailValue =
-      this.firstNameInput = "firstName-input"
+      "example" +
-      this.firstNameValue = "firstname";
+      "_" +
-      this.lastNameInput = "lastName-input"
+      (Math.random() + 1).toString(36).substring(7) +
-      this.lastNameValue = "lastname";
+      "@example.com";
-      this.enabledSwitch = "user-enabled-switch"
+    this.firstNameInput = "firstName-input";
-      this.enabledValue = true;
+    this.firstNameValue = "firstname";
-      this.requiredUserActions = [RequiredActionAlias.UPDATE_PASSWORD]
+    this.lastNameInput = "lastName-input";
-    }
+    this.lastNameValue = "lastname";
-  
+    this.enabledSwitch = "user-enabled-switch";
-    
+    this.enabledValue = true;
-    fillUserData() {
+    this.requiredUserActions = [RequiredActionAlias.UPDATE_PASSWORD];
+  }
 
+  fillUserData() {
     cy.getId(this.emailInput).type(this.emailValue);
     cy.getId(this.firstNameInput).type(this.firstNameValue);
     cy.getId(this.lastNameInput).type(this.lastNameValue);
     cy.getId(this.enabledSwitch).check({ force: true });
 
-  
+    return this;
-      return this;
-    }
-  
-    save() {
-      cy.getId(this.saveBtn).click();
-  
-      return this;
-    }
-  
-    cancel() {
-      cy.getId(this.cancelBtn).click();
-  
-      return this;
-    }
   }
 
+  save() {
+    cy.getId(this.saveBtn).click();
+
+    return this;
+  }
+
+  cancel() {
+    cy.getId(this.cancelBtn).click();
+
+    return this;
+  }
+}

cypress/support/util/keycloak_before.ts

@@ -5,7 +5,7 @@ export const keycloakBefore = () => {
          GET /admin/serverinfo/
          GET /admin/master/console/whoami
     */
-  cy.on("uncaught:exception", (err, runnable) => {
+  cy.on("uncaught:exception", (err) => {
     console.log("-------------------");
     console.log(err);
     console.log("--------------------");

jest.config.ts

@@ -7,9 +7,10 @@ const config: Config.InitialOptions = {
   ...snowpackConfig(),
   setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
   moduleNameMapper: {
-    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/mocks/fileMock.js",
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
-    "\\.(css|less)$": "<rootDir>/mocks/styleMock.js"
+      "<rootDir>/mocks/fileMock.js",
-  }
+    "\\.(css|less)$": "<rootDir>/mocks/styleMock.js",
+  },
 };
 
 export default config;

jest.setup.ts

@@ -1,16 +1,16 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";
-import i18n from 'i18next';
+import i18n from "i18next";
-import { initReactI18next } from 'react-i18next';
+import { initReactI18next } from "react-i18next";
 
-import 'mutationobserver-shim';
+import "mutationobserver-shim";
 
 i18n.use(initReactI18next).init({
-  lng: 'en',
+  lng: "en",
-  fallbackLng: 'en',
+  fallbackLng: "en",
 
   // have a common namespace used around the full app
-  ns: ['translations'],
+  ns: ["translations"],
-  defaultNS: 'translations',
+  defaultNS: "translations",
 
   resources: { en: { translations: {} } },
 });

package-lock.json

@@ -52,6 +52,7 @@
         "decompress-targz": "^4.1.1",
         "eslint": "^7.32.0",
         "eslint-config-prettier": "^8.3.0",
+        "eslint-plugin-cypress": "^2.12.1",
         "eslint-plugin-prettier": "^4.0.0",
         "eslint-plugin-react": "^7.25.1",
         "http2-proxy": "^5.0.53",
@@ -7473,6 +7474,18 @@
         "eslint": ">=7.0.0"
       }
     },
+    "node_modules/eslint-plugin-cypress": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-cypress/-/eslint-plugin-cypress-2.12.1.tgz",
+      "integrity": "sha512-c2W/uPADl5kospNDihgiLc7n87t5XhUbFDoTl6CfVkmG+kDAb5Ux10V9PoLPu9N+r7znpc+iQlcmAqT1A/89HA==",
+      "dev": true,
+      "dependencies": {
+        "globals": "^11.12.0"
+      },
+      "peerDependencies": {
+        "eslint": ">= 3.2.1"
+      }
+    },
     "node_modules/eslint-plugin-prettier": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz",
@@ -23952,6 +23965,15 @@
       "dev": true,
       "requires": {}
     },
+    "eslint-plugin-cypress": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-cypress/-/eslint-plugin-cypress-2.12.1.tgz",
+      "integrity": "sha512-c2W/uPADl5kospNDihgiLc7n87t5XhUbFDoTl6CfVkmG+kDAb5Ux10V9PoLPu9N+r7znpc+iQlcmAqT1A/89HA==",
+      "dev": true,
+      "requires": {
+        "globals": "^11.12.0"
+      }
+    },
     "eslint-plugin-prettier": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz",

package.json

@@ -15,7 +15,7 @@
   "scripts": {
     "build": "snowpack build",
     "build:rh-sso": "THEME_NAME=rh-sso snowpack build",
-    "lint": "eslint \"./src/**/*.{js,jsx,mjs,ts,tsx}\"",
+    "lint": "eslint . --ext js,jsx,mjs,ts,tsx",
     "start": "snowpack dev",
     "start:rh-sso": "THEME_NAME=rh-sso snowpack dev",
     "test": "jest",
@@ -67,6 +67,7 @@
     "decompress-targz": "^4.1.1",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.25.1",
     "http2-proxy": "^5.0.53",

postcss.config.js

@@ -1,6 +1,4 @@
-const postImport = require('postcss-import');
+const postImport = require("postcss-import");
 module.exports = {
-  plugins: [
+  plugins: [postImport()],
-    postImport(),
+};
-  ]
-}

tsconfig.eslint.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["**/*", ".eslintrc.js"],
+  "exclude": [
+    "node_modules",
+    "build",
+    "keycloak-theme",
+    "server"
+  ]
+}

types/import.d.ts

@@ -1,5 +1,5 @@
 declare namespace Cypress {
-  interface Chainable<Subject> {
+  interface Chainable {
     /**
      * Get one or more DOM elements by `data-testid`.
      *

types/static.d.ts

@@ -1,36 +1,36 @@
 /* Use this file to declare any custom file extensions for importing */
 /* Use this folder to also add/extend a package d.ts file, if needed. */
 
-declare module '*.css';
+declare module "*.css";
-declare module '*.svg' {
+declare module "*.svg" {
   const ref: string;
   export default ref;
 }
-declare module '*.bmp' {
+declare module "*.bmp" {
   const ref: string;
   export default ref;
 }
-declare module '*.gif' {
+declare module "*.gif" {
   const ref: string;
   export default ref;
 }
-declare module '*.jpg' {
+declare module "*.jpg" {
   const ref: string;
   export default ref;
 }
-declare module '*.jpeg' {
+declare module "*.jpeg" {
   const ref: string;
   export default ref;
 }
-declare module '*.png' {
+declare module "*.png" {
   const ref: string;
   export default ref;
 }
-declare module '*.webp' {
+declare module "*.webp" {
   const ref: string;
   export default ref;
 }
-declare module '*.json' {
+declare module "*.json" {
   const value: any;
   export default value;
 }