Integrate Prettier into ESLint and fix linting issues

Other changes:
- Ensure that .tsx files are included in the linting process

.eslintrc.json

@@ -6,7 +6,8 @@
   "extends": [
       "eslint:recommended",
       "plugin:react/recommended",
-      "plugin:@typescript-eslint/eslint-recommended"
+      "plugin:@typescript-eslint/eslint-recommended",
+      "plugin:prettier/recommended"
   ],
   "globals": {
       "Atomics": "readonly",

.github/workflows/node.js.yml

@@ -27,9 +27,8 @@ jobs:
         check-latest: true
 
     - run: npm ci
-    - run: npm run format-check
+    - run: npm run lint
+    - run: npm run test
     - run: npm run check-types
     - run: npm run build
-    - run: npm run build-storybook
+    - run: npm run build-storybook
-    - run: npm run lint
-    - run: npm run test

README.md

@@ -42,9 +42,8 @@ If your Keycloak instance is not on `localhost:8180`, create a file `.env` with
 ### Additionally there are some nice scripts to format and lint
 
 ```bash
-$> npm run format
-$> npm run check-types
 $> npm run lint
+$> npm run check-types
 ```
 
 To switch to a RH-SSO themed version of this console you can run:

jest.config.ts

@@ -7,8 +7,8 @@ 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>/src/__mocks__/fileMock.js",
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/mocks/fileMock.js",
-    "\\.(css|less)$": "<rootDir>/src/__mocks__/styleMock.js"
+    "\\.(css|less)$": "<rootDir>/mocks/styleMock.js"
   }
 };
 

package-lock.json

@@ -57,6 +57,8 @@
         "decompress": "^4.2.1",
         "decompress-targz": "^4.1.1",
         "eslint": "^7.30.0",
+        "eslint-config-prettier": "^8.3.0",
+        "eslint-plugin-prettier": "^3.4.0",
         "eslint-plugin-react": "^7.24.0",
         "grunt": "^1.4.1",
         "grunt-contrib-copy": "^1.0.0",
@@ -16858,6 +16860,39 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint-config-prettier": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz",
+      "integrity": "sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==",
+      "dev": true,
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-prettier": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.0.tgz",
+      "integrity": "sha512-UDK6rJT6INSfcOo545jiaOwB701uAIt2/dR7WnFQoGCVl1/EMqdANBmwUaqqQ45aXprsTGzSa39LI1PyuRBxxw==",
+      "dev": true,
+      "dependencies": {
+        "prettier-linter-helpers": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=5.0.0",
+        "prettier": ">=1.13.0"
+      },
+      "peerDependenciesMeta": {
+        "eslint-config-prettier": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/eslint-plugin-react": {
       "version": "7.24.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.24.0.tgz",
@@ -17750,6 +17785,12 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
+    "node_modules/fast-diff": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
+      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
+      "dev": true
+    },
     "node_modules/fast-glob": {
       "version": "3.2.6",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.6.tgz",
@@ -27470,6 +27511,18 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "dependencies": {
+        "fast-diff": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -47371,6 +47424,22 @@
         }
       }
     },
+    "eslint-config-prettier": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz",
+      "integrity": "sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==",
+      "dev": true,
+      "requires": {}
+    },
+    "eslint-plugin-prettier": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.0.tgz",
+      "integrity": "sha512-UDK6rJT6INSfcOo545jiaOwB701uAIt2/dR7WnFQoGCVl1/EMqdANBmwUaqqQ45aXprsTGzSa39LI1PyuRBxxw==",
+      "dev": true,
+      "requires": {
+        "prettier-linter-helpers": "^1.0.0"
+      }
+    },
     "eslint-plugin-react": {
       "version": "7.24.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.24.0.tgz",
@@ -47965,6 +48034,12 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
+    "fast-diff": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
+      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
+      "dev": true
+    },
     "fast-glob": {
       "version": "3.2.6",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.6.tgz",
@@ -55359,6 +55434,15 @@
       "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==",
       "dev": true
     },
+    "prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "requires": {
+        "fast-diff": "^1.1.2"
+      }
+    },
     "pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",

package.json

@@ -15,9 +15,7 @@
   "scripts": {
     "build": "snowpack build",
     "check-types": "tsc -p ./",
-    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
+    "lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\"",
-    "format-check": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",
-    "lint": "eslint ./src/**/*.ts*",
     "postinstall": "grunt",
     "start": "snowpack dev",
     "test": "jest",
@@ -75,6 +73,8 @@
     "decompress": "^4.2.1",
     "decompress-targz": "^4.1.1",
     "eslint": "^7.30.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.24.0",
     "grunt": "^1.4.1",
     "grunt-contrib-copy": "^1.0.0",

src/client-scopes/details/MapperList.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from "react-i18next";
 import { Link, useHistory } from "react-router-dom";
 import {
   AlertVariant,
-  ButtonVariant,
   Dropdown,
   DropdownItem,
   DropdownToggle,

src/clients/credentials/Credentials.tsx

@@ -1,7 +1,6 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { useErrorHandler } from "react-error-boundary";
 import {
   ActionGroup,
   AlertVariant,
@@ -35,11 +34,6 @@ type ClientAuthenticatorProviders = {
   displayName: string;
 };
 
-type Secret = {
-  type: string;
-  value: string;
-};
-
 type AccessToken = {
   registrationAccessToken: string;
 };

src/clients/keys/GenerateKeyDialog.tsx

@@ -13,12 +13,10 @@ import {
   SelectVariant,
   Text,
   TextContent,
-  TextInput,
 } from "@patternfly/react-core";
 
 import type KeyStoreConfig from "keycloak-admin/lib/defs/keystoreConfig";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
-import { PasswordInput } from "../../components/password-input/PasswordInput";
 import { StoreSettings } from "./StoreSettings";
 
 type GenerateKeyDialogProps = {

src/clients/keys/Keys.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import FileSaver from "file-saver";
 import {

src/components/realm-selector/RealmSelector.tsx

@@ -23,11 +23,6 @@ import { RecentUsed } from "./recent-used";
 
 import "./realm-selector.css";
 
-type RecentUsedRealm = {
-  name: string;
-  used: boolean;
-};
-
 export const RealmSelector = () => {
   const { realm, setRealm, realms } = useRealm();
   const { whoAmI } = useContext(WhoAmIContext);

src/components/wizard-section-header/WizardSectionHeader.tsx

@@ -1,22 +1,5 @@
-import React, { ReactElement, useContext, useState } from "react";
+import { Text, TextContent, Title } from "@patternfly/react-core";
-import {
+import React from "react";
-  Text,
-  PageSection,
-  TextContent,
-  Divider,
-  Level,
-  LevelItem,
-  Switch,
-  Toolbar,
-  ToolbarContent,
-  ToolbarItem,
-  Badge,
-  ButtonProps,
-  Dropdown,
-  DropdownToggle,
-  DropdownPosition,
-  Title,
-} from "@patternfly/react-core";
 import "./wizard-section-header.css";
 
 export type WizardSectionHeaderProps = {

src/components/work-in-progress/WorkInProgress.tsx

@@ -8,7 +8,8 @@ type WorkInProgressProps = {
 
 export const WorkInProgress = ({ marvelLink }: WorkInProgressProps) => (
   <div>
-    This page is not completed yet, but this is what it's going to look like:
+    This page is not completed yet, but this is what it&apos;s going to look
+    like:
     <div className="container">
       <iframe className="responsive-iframe" src={marvelLink}></iframe>
     </div>

src/identity-providers/add/DiscoverySettings.tsx

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useFormContext, useWatch } from "react-hook-form";
 import {
-  Divider,
   ExpandableSection,
   FormGroup,
   TextInput,