AAP-19491: Enable pretifier for js and ts code on pre-commit (#782)

Author: hasys

.pre-commit-config.yaml

@@ -34,3 +34,8 @@ repos:
   hooks:
   - id: pyupgrade
     language_version: python3
+-   repo: https://github.com/pre-commit/mirrors-prettier
+    rev: v4.0.0-alpha.8
+    hooks:
+    -   id: prettier
+        types_or: [tsx, ts, javascript]

ansible_wisdom_console_react/.eslintrc.js

@@ -1,17 +1,17 @@
 // See https://youtrack.jetbrains.com/issue/WEB-54170/Allow-specifying-environment-variables-for-ESLint#focus=Comments-27-6031544.0-0
 module.exports = {
-    'extends': ['react-app', 'react-app/jest'],
-    'parser': '@typescript-eslint/parser',
-    'parserOptions': {
-        'babelOptions': {
-            'presets': [
-                ['babel-preset-react-app', false],
-                (process.env.NODE_ENV === 'production')
-                        ? 'babel-preset-react-app/prod'
-                        : (process.env.NODE_ENV === 'test')
-                                ? 'babel-preset-react-app/test'
-                                : 'babel-preset-react-app/dev',
-            ],
-        }
-    }
-}
+  extends: ["react-app", "react-app/jest"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    babelOptions: {
+      presets: [
+        ["babel-preset-react-app", false],
+        process.env.NODE_ENV === "production"
+          ? "babel-preset-react-app/prod"
+          : process.env.NODE_ENV === "test"
+          ? "babel-preset-react-app/test"
+          : "babel-preset-react-app/dev",
+      ],
+    },
+  },
+};

ansible_wisdom_console_react/.prettierignore

@@ -0,0 +1,5 @@
+*.css
+*.html
+*.svg
+*.json
+README.md

ansible_wisdom_console_react/__mocks__/monaco-editor.ts

@@ -1,3 +1,3 @@
 module.exports = {
-    // Stub methods as needed (we should not need any for the Admin Portal)
+  // Stub methods as needed (we should not need any for the Admin Portal)
 };

ansible_wisdom_console_react/__mocks__/react-i18next.ts

@@ -1,8 +1,8 @@
 module.exports = {
-    // Stub methods as needed...
-    useTranslation: () => {
-        return {
-            t: (str: String) => str,
-        };
-    },
+  // Stub methods as needed...
+  useTranslation: () => {
+    return {
+      t: (str: String) => str,
+    };
+  },
 };

ansible_wisdom_console_react/config/env.js

@@ -1,16 +1,16 @@
-'use strict';
+"use strict";
 
-const fs = require('fs');
-const path = require('path');
-const paths = require('./paths');
+const fs = require("fs");
+const path = require("path");
+const paths = require("./paths");
 
 // Make sure that including paths.js after env.js will read .env variables.
-delete require.cache[require.resolve('./paths')];
+delete require.cache[require.resolve("./paths")];
 
 const NODE_ENV = process.env.NODE_ENV;
 if (!NODE_ENV) {
   throw new Error(
-    'The NODE_ENV environment variable is required but was not specified.'
+    "The NODE_ENV environment variable is required but was not specified.",
   );
 }
 
@@ -20,7 +20,7 @@ const dotenvFiles = [
   // Don't include `.env.local` for `test` environment
   // since normally you expect tests to produce the same
   // results for everyone
-  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
+  NODE_ENV !== "test" && `${paths.dotenv}.local`,
   `${paths.dotenv}.${NODE_ENV}`,
   paths.dotenv,
 ].filter(Boolean);
@@ -30,12 +30,12 @@ const dotenvFiles = [
 // that have already been set.  Variable expansion is supported in .env files.
 // https://github.com/motdotla/dotenv
 // https://github.com/motdotla/dotenv-expand
-dotenvFiles.forEach(dotenvFile => {
+dotenvFiles.forEach((dotenvFile) => {
   if (fs.existsSync(dotenvFile)) {
-    require('dotenv-expand')(
-      require('dotenv').config({
+    require("dotenv-expand")(
+      require("dotenv").config({
         path: dotenvFile,
-      })
+      }),
     );
   }
 });
@@ -50,10 +50,10 @@ dotenvFiles.forEach(dotenvFile => {
 // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
 // We also resolve them to make sure all tools using them work consistently.
 const appDirectory = fs.realpathSync(process.cwd());
-process.env.NODE_PATH = (process.env.NODE_PATH || '')
+process.env.NODE_PATH = (process.env.NODE_PATH || "")
   .split(path.delimiter)
-  .filter(folder => folder && !path.isAbsolute(folder))
-  .map(folder => path.resolve(appDirectory, folder))
+  .filter((folder) => folder && !path.isAbsolute(folder))
+  .map((folder) => path.resolve(appDirectory, folder))
   .join(path.delimiter);
 
 // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
@@ -62,7 +62,7 @@ const REACT_APP = /^REACT_APP_/i;
 
 function getClientEnvironment(publicUrl) {
   const raw = Object.keys(process.env)
-    .filter(key => REACT_APP.test(key))
+    .filter((key) => REACT_APP.test(key))
     .reduce(
       (env, key) => {
         env[key] = process.env[key];
@@ -71,7 +71,7 @@ function getClientEnvironment(publicUrl) {
       {
         // Useful for determining whether we’re running in production mode.
         // Most importantly, it switches React into the correct mode.
-        NODE_ENV: process.env.NODE_ENV || 'development',
+        NODE_ENV: process.env.NODE_ENV || "development",
         // Useful for resolving the correct path to static assets in `public`.
         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
         // This should only be used as an escape hatch. Normally you would put
@@ -87,12 +87,12 @@ function getClientEnvironment(publicUrl) {
         WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
         // Whether or not react-refresh is enabled.
         // It is defined here so it is available in the webpackHotDevClient.
-        FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
-      }
+        FAST_REFRESH: process.env.FAST_REFRESH !== "false",
+      },
     );
   // Stringify all values so we can feed into webpack DefinePlugin
   const stringified = {
-    'process.env': Object.keys(raw).reduce((env, key) => {
+    "process.env": Object.keys(raw).reduce((env, key) => {
       env[key] = JSON.stringify(raw[key]);
       return env;
     }, {}),

ansible_wisdom_console_react/config/getHttpsConfig.js

@@ -1,21 +1,21 @@
-'use strict';
+"use strict";
 
-const fs = require('fs');
-const path = require('path');
-const crypto = require('crypto');
-const chalk = require('react-dev-utils/chalk');
-const paths = require('./paths');
+const fs = require("fs");
+const path = require("path");
+const crypto = require("crypto");
+const chalk = require("react-dev-utils/chalk");
+const paths = require("./paths");
 
 // Ensure the certificate and key provided are valid and if not
 // throw an easy to debug error
 function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
   let encrypted;
   try {
     // publicEncrypt will throw an error with an invalid cert
-    encrypted = crypto.publicEncrypt(cert, Buffer.from('test'));
+    encrypted = crypto.publicEncrypt(cert, Buffer.from("test"));
   } catch (err) {
     throw new Error(
-      `The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`
+      `The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`,
     );
   }
 
@@ -26,7 +26,7 @@ function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
     throw new Error(
       `The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${
         err.message
-      }`
+      }`,
     );
   }
 }
@@ -36,8 +36,8 @@ function readEnvFile(file, type) {
   if (!fs.existsSync(file)) {
     throw new Error(
       `You specified ${chalk.cyan(
-        type
-      )} in your env, but the file "${chalk.yellow(file)}" can't be found.`
+        type,
+      )} in your env, but the file "${chalk.yellow(file)}" can't be found.`,
     );
   }
   return fs.readFileSync(file);
@@ -47,14 +47,14 @@ function readEnvFile(file, type) {
 // Return cert files if provided in env, otherwise just true or false
 function getHttpsConfig() {
   const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
-  const isHttps = HTTPS === 'true';
+  const isHttps = HTTPS === "true";
 
   if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
     const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
     const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
     const config = {
-      cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
-      key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
+      cert: readEnvFile(crtFile, "SSL_CRT_FILE"),
+      key: readEnvFile(keyFile, "SSL_KEY_FILE"),
     };
 
     validateKeyAndCerts({ ...config, keyFile, crtFile });

ansible_wisdom_console_react/config/jest/babelTransform.js

@@ -1,14 +1,14 @@
-'use strict';
+"use strict";
 
-const babelJest = require('babel-jest').default;
+const babelJest = require("babel-jest").default;
 
 const hasJsxRuntime = (() => {
-  if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
+  if (process.env.DISABLE_NEW_JSX_TRANSFORM === "true") {
     return false;
   }
 
   try {
-    require.resolve('react/jsx-runtime');
+    require.resolve("react/jsx-runtime");
     return true;
   } catch (e) {
     return false;
@@ -18,9 +18,9 @@ const hasJsxRuntime = (() => {
 module.exports = babelJest.createTransformer({
   presets: [
     [
-      require.resolve('babel-preset-react-app'),
+      require.resolve("babel-preset-react-app"),
       {
-        runtime: hasJsxRuntime ? 'automatic' : 'classic',
+        runtime: hasJsxRuntime ? "automatic" : "classic",
       },
     ],
   ],

ansible_wisdom_console_react/config/jest/cssTransform.js

@@ -1,16 +1,16 @@
-'use strict';
+"use strict";
 
 // This is a custom Jest transformer turning style imports into empty objects.
 // http://facebook.github.io/jest/docs/en/webpack.html
 
 module.exports = {
-    process() {
-        return {
-            code: `module.exports = {};`,
-        };
-    },
-    getCacheKey() {
-        // The output is always the same.
-        return 'cssTransform';
-    },
+  process() {
+    return {
+      code: `module.exports = {};`,
+    };
+  },
+  getCacheKey() {
+    // The output is always the same.
+    return "cssTransform";
+  },
 };

ansible_wisdom_console_react/config/jest/fileTransform.js

@@ -1,11 +1,11 @@
-'use strict';
+"use strict";
 
-const path = require('path');
+const path = require("path");
 
 module.exports = {
   process(sourceText, sourcePath, options) {
     return {
       code: `module.exports = ${JSON.stringify(path.basename(sourcePath))};`,
     };
   },
-}
+};

ansible_wisdom_console_react/config/jest/matchMedia.js

@@ -1,7 +1,9 @@
-global.matchMedia = global.matchMedia || function() {
+global.matchMedia =
+  global.matchMedia ||
+  function () {
     return {
-        matches : false,
-        addListener : function() {},
-        removeListener: function() {}
-    }
-}
+      matches: false,
+      addListener: function () {},
+      removeListener: function () {},
+    };
+  };