diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 395b2ab2e..8f3243b54 100755
--- a/.pre-commit-config.yaml
+++ b/.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]
diff --git a/ansible_wisdom_console_react/.eslintrc.js b/ansible_wisdom_console_react/.eslintrc.js
index d2a26af77..85e28f3b8 100644
--- a/ansible_wisdom_console_react/.eslintrc.js
+++ b/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",
+      ],
+    },
+  },
+};
diff --git a/ansible_wisdom_console_react/.prettierignore b/ansible_wisdom_console_react/.prettierignore
new file mode 100644
index 000000000..805779273
--- /dev/null
+++ b/ansible_wisdom_console_react/.prettierignore
@@ -0,0 +1,5 @@
+*.css
+*.html
+*.svg
+*.json
+README.md
diff --git a/ansible_wisdom_console_react/__mocks__/monaco-editor.ts b/ansible_wisdom_console_react/__mocks__/monaco-editor.ts
index 650b3384c..0e83a0a04 100644
--- a/ansible_wisdom_console_react/__mocks__/monaco-editor.ts
+++ b/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)
 };
diff --git a/ansible_wisdom_console_react/__mocks__/react-i18next.ts b/ansible_wisdom_console_react/__mocks__/react-i18next.ts
index 2b6d1684f..60a567e46 100644
--- a/ansible_wisdom_console_react/__mocks__/react-i18next.ts
+++ b/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,
+    };
+  },
 };
diff --git a/ansible_wisdom_console_react/config/env.js b/ansible_wisdom_console_react/config/env.js
index ffa7e496a..7153edd90 100644
--- a/ansible_wisdom_console_react/config/env.js
+++ b/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;
     }, {}),
diff --git a/ansible_wisdom_console_react/config/getHttpsConfig.js b/ansible_wisdom_console_react/config/getHttpsConfig.js
index 013d493c1..eb1c043f1 100644
--- a/ansible_wisdom_console_react/config/getHttpsConfig.js
+++ b/ansible_wisdom_console_react/config/getHttpsConfig.js
@@ -1,10 +1,10 @@
-'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
@@ -12,10 +12,10 @@ 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 });
diff --git a/ansible_wisdom_console_react/config/jest/babelTransform.js b/ansible_wisdom_console_react/config/jest/babelTransform.js
index 5b391e405..7e2179ac4 100644
--- a/ansible_wisdom_console_react/config/jest/babelTransform.js
+++ b/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",
       },
     ],
   ],
diff --git a/ansible_wisdom_console_react/config/jest/cssTransform.js b/ansible_wisdom_console_react/config/jest/cssTransform.js
index f17fa1025..9b430225d 100644
--- a/ansible_wisdom_console_react/config/jest/cssTransform.js
+++ b/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";
+  },
 };
diff --git a/ansible_wisdom_console_react/config/jest/fileTransform.js b/ansible_wisdom_console_react/config/jest/fileTransform.js
index 0e81c2b1c..445a2dc7a 100644
--- a/ansible_wisdom_console_react/config/jest/fileTransform.js
+++ b/ansible_wisdom_console_react/config/jest/fileTransform.js
@@ -1,6 +1,6 @@
-'use strict';
+"use strict";
 
-const path = require('path');
+const path = require("path");
 
 module.exports = {
   process(sourceText, sourcePath, options) {
@@ -8,4 +8,4 @@ module.exports = {
       code: `module.exports = ${JSON.stringify(path.basename(sourcePath))};`,
     };
   },
-}
+};
diff --git a/ansible_wisdom_console_react/config/jest/matchMedia.js b/ansible_wisdom_console_react/config/jest/matchMedia.js
index cf2e5822e..b85c9459d 100644
--- a/ansible_wisdom_console_react/config/jest/matchMedia.js
+++ b/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 () {},
+    };
+  };
diff --git a/ansible_wisdom_console_react/config/modules.js b/ansible_wisdom_console_react/config/modules.js
index d63e41d78..1d54f1f10 100644
--- a/ansible_wisdom_console_react/config/modules.js
+++ b/ansible_wisdom_console_react/config/modules.js
@@ -1,10 +1,10 @@
-'use strict';
+"use strict";
 
-const fs = require('fs');
-const path = require('path');
-const paths = require('./paths');
-const chalk = require('react-dev-utils/chalk');
-const resolve = require('resolve');
+const fs = require("fs");
+const path = require("path");
+const paths = require("./paths");
+const chalk = require("react-dev-utils/chalk");
+const resolve = require("resolve");
 
 /**
  * Get additional module paths based on the baseUrl of a compilerOptions object.
@@ -15,19 +15,19 @@ function getAdditionalModulePaths(options = {}) {
   const baseUrl = options.baseUrl;
 
   if (!baseUrl) {
-    return '';
+    return "";
   }
 
   const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
 
   // We don't need to do anything if `baseUrl` is set to `node_modules`. This is
   // the default behavior.
-  if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
+  if (path.relative(paths.appNodeModules, baseUrlResolved) === "") {
     return null;
   }
 
   // Allow the user set the `baseUrl` to `appSrc`.
-  if (path.relative(paths.appSrc, baseUrlResolved) === '') {
+  if (path.relative(paths.appSrc, baseUrlResolved) === "") {
     return [paths.appSrc];
   }
 
@@ -36,7 +36,7 @@ function getAdditionalModulePaths(options = {}) {
   // not transpiled outside of `src`. We do allow importing them with the
   // absolute path (e.g. `src/Components/Button.js`) but we set that up with
   // an alias.
-  if (path.relative(paths.appPath, baseUrlResolved) === '') {
+  if (path.relative(paths.appPath, baseUrlResolved) === "") {
     return null;
   }
 
@@ -44,8 +44,8 @@ function getAdditionalModulePaths(options = {}) {
   throw new Error(
     chalk.red.bold(
       "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
-        ' Create React App does not support other values at this time.'
-    )
+        " Create React App does not support other values at this time.",
+    ),
   );
 }
 
@@ -63,7 +63,7 @@ function getWebpackAliases(options = {}) {
 
   const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
 
-  if (path.relative(paths.appPath, baseUrlResolved) === '') {
+  if (path.relative(paths.appPath, baseUrlResolved) === "") {
     return {
       src: paths.appSrc,
     };
@@ -84,9 +84,9 @@ function getJestAliases(options = {}) {
 
   const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
 
-  if (path.relative(paths.appPath, baseUrlResolved) === '') {
+  if (path.relative(paths.appPath, baseUrlResolved) === "") {
     return {
-      '^src/(.*)$': '<rootDir>/src/$1',
+      "^src/(.*)$": "<rootDir>/src/$1",
     };
   }
 }
@@ -98,7 +98,7 @@ function getModules() {
 
   if (hasTsConfig && hasJsConfig) {
     throw new Error(
-      'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
+      "You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.",
     );
   }
 
@@ -108,9 +108,11 @@ function getModules() {
   // TypeScript project and set up the config
   // based on tsconfig.json
   if (hasTsConfig) {
-    const ts = require(resolve.sync('typescript', {
-      basedir: paths.appNodeModules,
-    }));
+    const ts = require(
+      resolve.sync("typescript", {
+        basedir: paths.appNodeModules,
+      }),
+    );
     config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;
     // Otherwise we'll check if there is jsconfig.json
     // for non TS projects.
diff --git a/ansible_wisdom_console_react/config/paths.js b/ansible_wisdom_console_react/config/paths.js
index 142432906..0557fcd2b 100644
--- a/ansible_wisdom_console_react/config/paths.js
+++ b/ansible_wisdom_console_react/config/paths.js
@@ -1,13 +1,13 @@
-'use strict';
+"use strict";
 
-const path = require('path');
-const fs = require('fs');
-const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');
+const path = require("path");
+const fs = require("fs");
+const getPublicUrlOrPath = require("react-dev-utils/getPublicUrlOrPath");
 
 // Make sure any symlinks in the project folder are resolved:
 // https://github.com/facebook/create-react-app/issues/637
 const appDirectory = fs.realpathSync(process.cwd());
-const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
+const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
 
 // We use `PUBLIC_URL` environment variable or "homepage" field to infer
 // "public path" at which the app is served.
@@ -16,31 +16,32 @@ const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
 // We can't use a relative path in HTML because we don't want to load something
 // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
 const publicUrlOrPath = getPublicUrlOrPath(
-  process.env.NODE_ENV === 'development',
-  require(resolveApp('package.json')).homepage,
-  process.env.PUBLIC_URL
+  process.env.NODE_ENV === "development",
+  require(resolveApp("package.json")).homepage,
+  process.env.PUBLIC_URL,
 );
 
-const buildPath = process.env.BUILD_PATH || '../ansible_wisdom/main/static/console';
+const buildPath =
+  process.env.BUILD_PATH || "../ansible_wisdom/main/static/console";
 
 const moduleFileExtensions = [
-  'web.mjs',
-  'mjs',
-  'web.js',
-  'js',
-  'web.ts',
-  'ts',
-  'web.tsx',
-  'tsx',
-  'json',
-  'web.jsx',
-  'jsx',
+  "web.mjs",
+  "mjs",
+  "web.js",
+  "js",
+  "web.ts",
+  "ts",
+  "web.tsx",
+  "tsx",
+  "json",
+  "web.jsx",
+  "jsx",
 ];
 
 // Resolve file paths in the same order as webpack
 const resolveModule = (resolveFn, filePath) => {
-  const extension = moduleFileExtensions.find(extension =>
-    fs.existsSync(resolveFn(`${filePath}.${extension}`))
+  const extension = moduleFileExtensions.find((extension) =>
+    fs.existsSync(resolveFn(`${filePath}.${extension}`)),
   );
 
   if (extension) {
@@ -52,28 +53,26 @@ const resolveModule = (resolveFn, filePath) => {
 
 // config after eject: we're in ./config/
 module.exports = {
-  dotenv: resolveApp('.env'),
-  appPath: resolveApp('.'),
+  dotenv: resolveApp(".env"),
+  appPath: resolveApp("."),
   appBuild: resolveApp(buildPath),
-  appPublic: resolveApp('public'),
-  appHtml: resolveApp('public/index.html'),
-  appDeniedHtml: resolveApp('public/denied.html'),
-  appIndexJs: resolveModule(resolveApp, 'src/index'),
-  appDeniedJs: resolveModule(resolveApp, 'src/denied/denied'),
-  appPackageJson: resolveApp('package.json'),
-  appSrc: resolveApp('src'),
-  appTsConfig: resolveApp('tsconfig.json'),
-  appJsConfig: resolveApp('jsconfig.json'),
-  yarnLockFile: resolveApp('yarn.lock'),
-  testsSetup: resolveModule(resolveApp, 'src/setupTests'),
-  proxySetup: resolveApp('src/setupProxy.js'),
-  appNodeModules: resolveApp('node_modules'),
-  appWebpackCache: resolveApp('node_modules/.cache'),
-  appTsBuildInfoFile: resolveApp('node_modules/.cache/tsconfig.tsbuildinfo'),
-  swSrc: resolveModule(resolveApp, 'src/service-worker'),
+  appPublic: resolveApp("public"),
+  appHtml: resolveApp("public/index.html"),
+  appDeniedHtml: resolveApp("public/denied.html"),
+  appIndexJs: resolveModule(resolveApp, "src/index"),
+  appDeniedJs: resolveModule(resolveApp, "src/denied/denied"),
+  appPackageJson: resolveApp("package.json"),
+  appSrc: resolveApp("src"),
+  appTsConfig: resolveApp("tsconfig.json"),
+  appJsConfig: resolveApp("jsconfig.json"),
+  yarnLockFile: resolveApp("yarn.lock"),
+  testsSetup: resolveModule(resolveApp, "src/setupTests"),
+  proxySetup: resolveApp("src/setupProxy.js"),
+  appNodeModules: resolveApp("node_modules"),
+  appWebpackCache: resolveApp("node_modules/.cache"),
+  appTsBuildInfoFile: resolveApp("node_modules/.cache/tsconfig.tsbuildinfo"),
+  swSrc: resolveModule(resolveApp, "src/service-worker"),
   publicUrlOrPath,
 };
 
-
-
 module.exports.moduleFileExtensions = moduleFileExtensions;
diff --git a/ansible_wisdom_console_react/config/webpack.config.js b/ansible_wisdom_console_react/config/webpack.config.js
index dbc582f3a..0dd0f46d6 100644
--- a/ansible_wisdom_console_react/config/webpack.config.js
+++ b/ansible_wisdom_console_react/config/webpack.config.js
@@ -1,58 +1,58 @@
-'use strict';
+"use strict";
 
-const fs = require('fs');
-const path = require('path');
-const webpack = require('webpack');
-const resolve = require('resolve');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
-const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
-const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
-const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
-const ESLintPlugin = require('eslint-webpack-plugin');
-const paths = require('./paths');
-const modules = require('./modules');
-const getClientEnvironment = require('./env');
-const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
+const fs = require("fs");
+const path = require("path");
+const webpack = require("webpack");
+const resolve = require("resolve");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
+const InlineChunkHtmlPlugin = require("react-dev-utils/InlineChunkHtmlPlugin");
+const TerserPlugin = require("terser-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
+const InterpolateHtmlPlugin = require("react-dev-utils/InterpolateHtmlPlugin");
+const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
+const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
+const getCSSModuleLocalIdent = require("react-dev-utils/getCSSModuleLocalIdent");
+const ESLintPlugin = require("eslint-webpack-plugin");
+const paths = require("./paths");
+const modules = require("./modules");
+const getClientEnvironment = require("./env");
+const ModuleNotFoundPlugin = require("react-dev-utils/ModuleNotFoundPlugin");
 const ForkTsCheckerWebpackPlugin =
-  process.env.TSC_COMPILE_ON_ERROR === 'true'
-    ? require('react-dev-utils/ForkTsCheckerWarningWebpackPlugin')
-    : require('react-dev-utils/ForkTsCheckerWebpackPlugin');
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+  process.env.TSC_COMPILE_ON_ERROR === "true"
+    ? require("react-dev-utils/ForkTsCheckerWarningWebpackPlugin")
+    : require("react-dev-utils/ForkTsCheckerWebpackPlugin");
+const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
 
-const createEnvironmentHash = require('./webpack/persistentCache/createEnvironmentHash');
+const createEnvironmentHash = require("./webpack/persistentCache/createEnvironmentHash");
 
 // Source maps are resource heavy and can cause out of memory issue for large source files.
-const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
+const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== "false";
 
-const reactRefreshRuntimeEntry = require.resolve('react-refresh/runtime');
+const reactRefreshRuntimeEntry = require.resolve("react-refresh/runtime");
 const reactRefreshWebpackPluginRuntimeEntry = require.resolve(
-  '@pmmmwh/react-refresh-webpack-plugin'
+  "@pmmmwh/react-refresh-webpack-plugin",
 );
-const babelRuntimeEntry = require.resolve('babel-preset-react-app');
+const babelRuntimeEntry = require.resolve("babel-preset-react-app");
 const babelRuntimeEntryHelpers = require.resolve(
-  '@babel/runtime/helpers/esm/assertThisInitialized',
-  { paths: [babelRuntimeEntry] }
+  "@babel/runtime/helpers/esm/assertThisInitialized",
+  { paths: [babelRuntimeEntry] },
 );
-const babelRuntimeRegenerator = require.resolve('@babel/runtime/regenerator', {
+const babelRuntimeRegenerator = require.resolve("@babel/runtime/regenerator", {
   paths: [babelRuntimeEntry],
 });
 
 // Some apps do not need the benefits of saving a web request, so not inlining the chunk
 // makes for a smoother build process.
-const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
+const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== "false";
 
-const emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === 'true';
-const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === 'true';
+const emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === "true";
+const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === "true";
 
 const imageInlineSizeLimit = parseInt(
-  process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
+  process.env.IMAGE_INLINE_SIZE_LIMIT || "10000",
 );
 
 // Check if TypeScript is setup
@@ -60,7 +60,7 @@ const useTypeScript = fs.existsSync(paths.appTsConfig);
 
 // Check if Tailwind config exists
 const useTailwind = fs.existsSync(
-  path.join(paths.appPath, 'tailwind.config.js')
+  path.join(paths.appPath, "tailwind.config.js"),
 );
 
 // Get the path to the uncompiled service worker (if it exists).
@@ -73,12 +73,12 @@ const sassRegex = /\.(scss|sass)$/;
 const sassModuleRegex = /\.module\.(scss|sass)$/;
 
 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;
@@ -88,13 +88,13 @@ const hasJsxRuntime = (() => {
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
 module.exports = function (webpackEnv) {
-  const isEnvDevelopment = webpackEnv === 'development';
-  const isEnvProduction = webpackEnv === 'production';
+  const isEnvDevelopment = webpackEnv === "development";
+  const isEnvProduction = webpackEnv === "production";
 
   // Variable used for enabling profiling in Production
   // passed into alias object. Uses a flag if passed into the build command
   const isEnvProductionProfile =
-    isEnvProduction && process.argv.includes('--profile');
+    isEnvProduction && process.argv.includes("--profile");
 
   // We will provide `paths.publicUrlOrPath` to our app
   // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
@@ -107,38 +107,38 @@ module.exports = function (webpackEnv) {
   // common function to get style loaders
   const getStyleLoaders = (cssOptions, preProcessor) => {
     const loaders = [
-      isEnvDevelopment && require.resolve('style-loader'),
+      isEnvDevelopment && require.resolve("style-loader"),
       isEnvProduction && {
         loader: MiniCssExtractPlugin.loader,
         // css is located in `static/css`, use '../../' to locate index.html folder
         // in production `paths.publicUrlOrPath` can be a relative path
-        options: paths.publicUrlOrPath.startsWith('.')
-          ? { publicPath: '../../' }
+        options: paths.publicUrlOrPath.startsWith(".")
+          ? { publicPath: "../../" }
           : {},
       },
       {
-        loader: require.resolve('css-loader'),
+        loader: require.resolve("css-loader"),
         options: cssOptions,
       },
       {
         // Options for PostCSS as we reference these options twice
         // Adds vendor prefixing based on your specified browser support in
         // package.json
-        loader: require.resolve('postcss-loader'),
+        loader: require.resolve("postcss-loader"),
         options: {
           postcssOptions: {
             // Necessary for external CSS imports to work
             // https://github.com/facebook/create-react-app/issues/2677
-            ident: 'postcss',
+            ident: "postcss",
             config: false,
             plugins: !useTailwind
               ? [
-                  'postcss-flexbugs-fixes',
+                  "postcss-flexbugs-fixes",
                   [
-                    'postcss-preset-env',
+                    "postcss-preset-env",
                     {
                       autoprefixer: {
-                        flexbox: 'no-2009',
+                        flexbox: "no-2009",
                       },
                       stage: 3,
                     },
@@ -146,16 +146,16 @@ module.exports = function (webpackEnv) {
                   // Adds PostCSS Normalize as the reset css with default options,
                   // so that it honors browserslist config in package.json
                   // which in turn let's users customize the target behavior as per their needs.
-                  'postcss-normalize',
+                  "postcss-normalize",
                 ]
               : [
-                  'tailwindcss',
-                  'postcss-flexbugs-fixes',
+                  "tailwindcss",
+                  "postcss-flexbugs-fixes",
                   [
-                    'postcss-preset-env',
+                    "postcss-preset-env",
                     {
                       autoprefixer: {
-                        flexbox: 'no-2009',
+                        flexbox: "no-2009",
                       },
                       stage: 3,
                     },
@@ -169,7 +169,7 @@ module.exports = function (webpackEnv) {
     if (preProcessor) {
       loaders.push(
         {
-          loader: require.resolve('resolve-url-loader'),
+          loader: require.resolve("resolve-url-loader"),
           options: {
             sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
             root: paths.appSrc,
@@ -180,24 +180,24 @@ module.exports = function (webpackEnv) {
           options: {
             sourceMap: true,
           },
-        }
+        },
       );
     }
     return loaders;
   };
 
   return {
-    target: ['browserslist'],
+    target: ["browserslist"],
     // Webpack noise constrained to errors and warnings
-    stats: 'errors-warnings',
-    mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
+    stats: "errors-warnings",
+    mode: isEnvProduction ? "production" : isEnvDevelopment && "development",
     // Stop compilation early in production
     bail: isEnvProduction,
     devtool: isEnvProduction
       ? shouldUseSourceMap
-        ? 'source-map'
+        ? "source-map"
         : false
-      : isEnvDevelopment && 'cheap-module-source-map',
+      : isEnvDevelopment && "cheap-module-source-map",
     // These are the "entry points" to our application.
     // This means they will be the "root" imports that are included in JS bundle.
     entry: {
@@ -212,40 +212,41 @@ module.exports = function (webpackEnv) {
       // There will be one main bundle, and one file per asynchronous chunk.
       // In development, it does not produce real files.
       filename: isEnvProduction
-        ? 'static/js/[name].js'
-        : isEnvDevelopment && 'static/js/[name].bundle.js',
+        ? "static/js/[name].js"
+        : isEnvDevelopment && "static/js/[name].bundle.js",
       chunkFilename: isEnvProduction
-        ? 'static/js/[name].chunk.js'
-        : isEnvDevelopment && 'static/js/[name].chunk.js',
-      assetModuleFilename: 'static/media/[name].[hash][ext]',
+        ? "static/js/[name].chunk.js"
+        : isEnvDevelopment && "static/js/[name].chunk.js",
+      assetModuleFilename: "static/media/[name].[hash][ext]",
       // webpack uses `publicPath` to determine where the app is being served from.
       // It requires a trailing slash, or the file assets will get an incorrect path.
       // We inferred the "public path" (such as / or /my-project) from homepage.
       publicPath: paths.publicUrlOrPath,
       // Point sourcemap entries to original disk location (format as URL on Windows)
       devtoolModuleFilenameTemplate: isEnvProduction
-        ? info =>
+        ? (info) =>
             path
               .relative(paths.appSrc, info.absoluteResourcePath)
-              .replace(/\\/g, '/')
+              .replace(/\\/g, "/")
         : isEnvDevelopment &&
-          (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
+          ((info) =>
+            path.resolve(info.absoluteResourcePath).replace(/\\/g, "/")),
     },
     cache: {
-      type: 'filesystem',
+      type: "filesystem",
       version: createEnvironmentHash(env.raw),
       cacheDirectory: paths.appWebpackCache,
-      store: 'pack',
+      store: "pack",
       buildDependencies: {
-        defaultWebpack: ['webpack/lib/'],
+        defaultWebpack: ["webpack/lib/"],
         config: [__filename],
-        tsconfig: [paths.appTsConfig, paths.appJsConfig].filter(f =>
-          fs.existsSync(f)
+        tsconfig: [paths.appTsConfig, paths.appJsConfig].filter((f) =>
+          fs.existsSync(f),
         ),
       },
     },
     infrastructureLogging: {
-      level: 'none',
+      level: "none",
     },
     optimization: {
       minimize: isEnvProduction,
@@ -299,8 +300,8 @@ module.exports = function (webpackEnv) {
       // We placed these paths second because we want `node_modules` to "win"
       // if there are any conflicts. This matches Node resolution mechanism.
       // https://github.com/facebook/create-react-app/issues/253
-      modules: ['node_modules', paths.appNodeModules].concat(
-        modules.additionalModulePaths || []
+      modules: ["node_modules", paths.appNodeModules].concat(
+        modules.additionalModulePaths || [],
       ),
       // These are the reasonable defaults supported by the Node ecosystem.
       // We also include JSX as a common component filename extension to support
@@ -309,16 +310,16 @@ module.exports = function (webpackEnv) {
       // `web` extension prefixes have been added for better support
       // for React Native Web.
       extensions: paths.moduleFileExtensions
-        .map(ext => `.${ext}`)
-        .filter(ext => useTypeScript || !ext.includes('ts')),
+        .map((ext) => `.${ext}`)
+        .filter((ext) => useTypeScript || !ext.includes("ts")),
       alias: {
         // Support React Native Web
         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-        'react-native': 'react-native-web',
+        "react-native": "react-native-web",
         // Allows for better profiling with ReactDevTools
         ...(isEnvProductionProfile && {
-          'react-dom$': 'react-dom/profiling',
-          'scheduler/tracing': 'scheduler/tracing-profiling',
+          "react-dom$": "react-dom/profiling",
+          "scheduler/tracing": "scheduler/tracing-profiling",
         }),
         ...(modules.webpackAliases || {}),
       },
@@ -343,10 +344,10 @@ module.exports = function (webpackEnv) {
       rules: [
         // Handle node_modules packages that contain sourcemaps
         shouldUseSourceMap && {
-          enforce: 'pre',
+          enforce: "pre",
           exclude: /@babel(?:\/|\\{1,2})runtime/,
           test: /\.(js|mjs|jsx|ts|tsx|css)$/,
-          loader: require.resolve('source-map-loader'),
+          loader: require.resolve("source-map-loader"),
         },
         {
           // "oneOf" will traverse all following loaders until one will
@@ -357,8 +358,8 @@ module.exports = function (webpackEnv) {
             // https://github.com/jshttp/mime-db
             {
               test: [/\.avif$/],
-              type: 'asset',
-              mimetype: 'image/avif',
+              type: "asset",
+              mimetype: "image/avif",
               parser: {
                 dataUrlCondition: {
                   maxSize: imageInlineSizeLimit,
@@ -370,7 +371,7 @@ module.exports = function (webpackEnv) {
             // A missing `test` is equivalent to a match.
             {
               test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-              type: 'asset',
+              type: "asset",
               parser: {
                 dataUrlCondition: {
                   maxSize: imageInlineSizeLimit,
@@ -381,7 +382,7 @@ module.exports = function (webpackEnv) {
               test: /\.svg$/,
               use: [
                 {
-                  loader: require.resolve('@svgr/webpack'),
+                  loader: require.resolve("@svgr/webpack"),
                   options: {
                     prettier: false,
                     svgo: false,
@@ -393,9 +394,9 @@ module.exports = function (webpackEnv) {
                   },
                 },
                 {
-                  loader: require.resolve('file-loader'),
+                  loader: require.resolve("file-loader"),
                   options: {
-                    name: 'static/media/[name].[hash].[ext]',
+                    name: "static/media/[name].[hash].[ext]",
                   },
                 },
               ],
@@ -408,16 +409,16 @@ module.exports = function (webpackEnv) {
             {
               test: /\.(js|mjs|jsx|ts|tsx)$/,
               include: paths.appSrc,
-              loader: require.resolve('babel-loader'),
+              loader: require.resolve("babel-loader"),
               options: {
                 customize: require.resolve(
-                  'babel-preset-react-app/webpack-overrides'
+                  "babel-preset-react-app/webpack-overrides",
                 ),
                 presets: [
                   [
-                    require.resolve('babel-preset-react-app'),
+                    require.resolve("babel-preset-react-app"),
                     {
-                      runtime: hasJsxRuntime ? 'automatic' : 'classic',
+                      runtime: hasJsxRuntime ? "automatic" : "classic",
                     },
                   ],
                 ],
@@ -425,7 +426,7 @@ module.exports = function (webpackEnv) {
                 plugins: [
                   isEnvDevelopment &&
                     shouldUseReactRefresh &&
-                    require.resolve('react-refresh/babel'),
+                    require.resolve("react-refresh/babel"),
                 ].filter(Boolean),
                 // This is a feature of `babel-loader` for webpack (not Babel itself).
                 // It enables caching results in ./node_modules/.cache/babel-loader/
@@ -441,14 +442,14 @@ module.exports = function (webpackEnv) {
             {
               test: /\.(js|mjs)$/,
               exclude: /@babel(?:\/|\\{1,2})runtime/,
-              loader: require.resolve('babel-loader'),
+              loader: require.resolve("babel-loader"),
               options: {
                 babelrc: false,
                 configFile: false,
                 compact: false,
                 presets: [
                   [
-                    require.resolve('babel-preset-react-app/dependencies'),
+                    require.resolve("babel-preset-react-app/dependencies"),
                     { helpers: true },
                   ],
                 ],
@@ -479,7 +480,7 @@ module.exports = function (webpackEnv) {
                   ? shouldUseSourceMap
                   : isEnvDevelopment,
                 modules: {
-                  mode: 'icss',
+                  mode: "icss",
                 },
               }),
               // Don't consider CSS imports dead code even if the
@@ -498,7 +499,7 @@ module.exports = function (webpackEnv) {
                   ? shouldUseSourceMap
                   : isEnvDevelopment,
                 modules: {
-                  mode: 'local',
+                  mode: "local",
                   getLocalIdent: getCSSModuleLocalIdent,
                 },
               }),
@@ -516,10 +517,10 @@ module.exports = function (webpackEnv) {
                     ? shouldUseSourceMap
                     : isEnvDevelopment,
                   modules: {
-                    mode: 'icss',
+                    mode: "icss",
                   },
                 },
-                'sass-loader'
+                "sass-loader",
               ),
               // Don't consider CSS imports dead code even if the
               // containing package claims to have no side effects.
@@ -538,11 +539,11 @@ module.exports = function (webpackEnv) {
                     ? shouldUseSourceMap
                     : isEnvDevelopment,
                   modules: {
-                    mode: 'local',
+                    mode: "local",
                     getLocalIdent: getCSSModuleLocalIdent,
                   },
                 },
-                'sass-loader'
+                "sass-loader",
               ),
             },
             // "file" loader makes sure those assets get served by WebpackDevServer.
@@ -555,8 +556,13 @@ module.exports = function (webpackEnv) {
               // its runtime that would otherwise be processed through "file" loader.
               // Also exclude `html` and `json` extensions so they get processed
               // by webpacks internal loaders.
-              exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx|cjs)$/, /\.html$/, /\.json$/],
-              type: 'asset/resource',
+              exclude: [
+                /^$/,
+                /\.(js|mjs|jsx|ts|tsx|cjs)$/,
+                /\.html$/,
+                /\.json$/,
+              ],
+              type: "asset/resource",
             },
             // ** STOP ** Are you adding a new loader?
             // Make sure to add the new loader(s) before the "file" loader.
@@ -569,13 +575,13 @@ module.exports = function (webpackEnv) {
       new HtmlWebpackPlugin(
         Object.assign(
           {},
-                {
-                  inject: true,
-                  chunks: ['index'],
-                  template: paths.appHtml,
-                  filename: 'index.html'
-                },
-                isEnvProduction
+          {
+            inject: true,
+            chunks: ["index"],
+            template: paths.appHtml,
+            filename: "index.html",
+          },
+          isEnvProduction
             ? {
                 minify: {
                   removeComments: true,
@@ -590,36 +596,36 @@ module.exports = function (webpackEnv) {
                   minifyURLs: true,
                 },
               }
-            : undefined
-        )
+            : undefined,
+        ),
       ),
       // Generates an `denied.html` file with the <script> injected.
       new HtmlWebpackPlugin(
-              Object.assign(
-                      {},
-                      {
-                        inject: true,
-                        chunks: ['denied'],
-                        template: paths.appDeniedHtml,
-                        filename: 'denied.html',
-                      },
-                      isEnvProduction
-                              ? {
-                                minify: {
-                                  removeComments: true,
-                                  collapseWhitespace: true,
-                                  removeRedundantAttributes: true,
-                                  useShortDoctype: true,
-                                  removeEmptyAttributes: true,
-                                  removeStyleLinkTypeAttributes: true,
-                                  keepClosingSlash: true,
-                                  minifyJS: true,
-                                  minifyCSS: true,
-                                  minifyURLs: true,
-                                },
-                              }
-                              : undefined
-              )
+        Object.assign(
+          {},
+          {
+            inject: true,
+            chunks: ["denied"],
+            template: paths.appDeniedHtml,
+            filename: "denied.html",
+          },
+          isEnvProduction
+            ? {
+                minify: {
+                  removeComments: true,
+                  collapseWhitespace: true,
+                  removeRedundantAttributes: true,
+                  useShortDoctype: true,
+                  removeEmptyAttributes: true,
+                  removeStyleLinkTypeAttributes: true,
+                  keepClosingSlash: true,
+                  minifyJS: true,
+                  minifyCSS: true,
+                  minifyURLs: true,
+                },
+              }
+            : undefined,
+        ),
       ),
       // Inlines the webpack runtime script. This script is too small to warrant
       // a network request.
@@ -657,8 +663,8 @@ module.exports = function (webpackEnv) {
         new MiniCssExtractPlugin({
           // Options similar to the same options in webpackOptions.output
           // both options are optional
-          filename: 'static/css/[name].css',
-          chunkFilename: 'static/css/[name].chunk.css',
+          filename: "static/css/[name].css",
+          chunkFilename: "static/css/[name].chunk.css",
         }),
       // Generate an asset manifest file with the following content:
       // - "files" key: Mapping of all asset filenames to their corresponding
@@ -667,7 +673,7 @@ module.exports = function (webpackEnv) {
       // - "entrypoints" key: Array of files which are included in `index.html`,
       //   can be used to reconstruct the HTML if necessary
       new WebpackManifestPlugin({
-        fileName: 'asset-manifest.json',
+        fileName: "asset-manifest.json",
         publicPath: paths.publicUrlOrPath,
         generate: (seed, files, entrypoints) => {
           const manifestFiles = files.reduce((manifest, file) => {
@@ -676,7 +682,9 @@ module.exports = function (webpackEnv) {
           }, seed);
           let entrypointFiles = [];
           for (let [entryFile, fileName] of Object.entries(entrypoints)) {
-            let notMapFiles = fileName.filter(fileName => !fileName.endsWith('.map'));
+            let notMapFiles = fileName.filter(
+              (fileName) => !fileName.endsWith(".map"),
+            );
             entrypointFiles = entrypointFiles.concat(notMapFiles);
           }
           return {
@@ -712,7 +720,7 @@ module.exports = function (webpackEnv) {
         new ForkTsCheckerWebpackPlugin({
           async: isEnvDevelopment,
           typescript: {
-            typescriptPath: resolve.sync('typescript', {
+            typescriptPath: resolve.sync("typescript", {
               basedir: paths.appNodeModules,
             }),
             configOverwrite: {
@@ -732,7 +740,7 @@ module.exports = function (webpackEnv) {
             diagnosticOptions: {
               syntactic: true,
             },
-            mode: 'write-references',
+            mode: "write-references",
             // profile: true,
           },
           issue: {
@@ -741,41 +749,41 @@ module.exports = function (webpackEnv) {
             // '../cra-template-typescript/template/src/App.tsx'
             // otherwise.
             include: [
-              { file: '../**/src/**/*.{ts,tsx}' },
-              { file: '**/src/**/*.{ts,tsx}' },
+              { file: "../**/src/**/*.{ts,tsx}" },
+              { file: "**/src/**/*.{ts,tsx}" },
             ],
             exclude: [
-              { file: '**/src/**/__tests__/**' },
-              { file: '**/src/**/?(*.){spec|test}.*' },
-              { file: '**/src/setupProxy.*' },
-              { file: '**/src/setupTests.*' },
+              { file: "**/src/**/__tests__/**" },
+              { file: "**/src/**/?(*.){spec|test}.*" },
+              { file: "**/src/setupProxy.*" },
+              { file: "**/src/setupTests.*" },
             ],
           },
           logger: {
-            infrastructure: 'silent',
+            infrastructure: "silent",
           },
         }),
       !disableESLintPlugin &&
         new ESLintPlugin({
           // Plugin options
-          extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
-          formatter: require.resolve('react-dev-utils/eslintFormatter'),
-          eslintPath: require.resolve('eslint'),
+          extensions: ["js", "mjs", "jsx", "ts", "tsx"],
+          formatter: require.resolve("react-dev-utils/eslintFormatter"),
+          eslintPath: require.resolve("eslint"),
           failOnError: !(isEnvDevelopment && emitErrorsAsWarnings),
           context: paths.appSrc,
           cache: true,
           cacheLocation: path.resolve(
             paths.appNodeModules,
-            '.cache/.eslintcache'
+            ".cache/.eslintcache",
           ),
           // ESLint class options
           cwd: paths.appPath,
           resolvePluginsRelativeTo: __dirname,
           baseConfig: {
-            extends: [require.resolve('eslint-config-react-app/base')],
+            extends: [require.resolve("eslint-config-react-app/base")],
             rules: {
               ...(!hasJsxRuntime && {
-                'react/react-in-jsx-scope': 'error',
+                "react/react-in-jsx-scope": "error",
               }),
             },
           },
diff --git a/ansible_wisdom_console_react/config/webpack.mock.api.keys.ts b/ansible_wisdom_console_react/config/webpack.mock.api.keys.ts
index c7901259c..2a52700a2 100644
--- a/ansible_wisdom_console_react/config/webpack.mock.api.keys.ts
+++ b/ansible_wisdom_console_react/config/webpack.mock.api.keys.ts
@@ -1,65 +1,65 @@
-import {delay, DELAY_MS, ERROR_DESCRIPTION, ORG_ID} from './webpack.mock.globals';
+import {
+  delay,
+  DELAY_MS,
+  ERROR_DESCRIPTION,
+  ORG_ID,
+} from "./webpack.mock.globals";
 
 const webpackMockServer = require("webpack-mock-server");
 
 export default webpackMockServer.add((app, helper) => {
+  const KEY_FIELD = "key";
+  const LAST_UPDATED_FIELD = "last_update";
+  const keys = new Map<string, { key: string; last_update: Date }>();
 
-    const KEY_FIELD = 'key';
-    const LAST_UPDATED_FIELD = 'last_update';
-    const keys = new Map<string, { key: string, last_update: Date }>();
+  app.get("/api/v0/wca/apikey/", async (_req, res) => {
+    await delay(DELAY_MS);
+    if (keys.has(ORG_ID)) {
+      // Key response only contains the Last Updated field
+      const data = keys.get(ORG_ID);
+      res.json({ last_update: data[LAST_UPDATED_FIELD] });
+    } else {
+      res.json({});
+    }
+  });
 
-    app.get("/api/v0/wca/apikey/",
-        async (_req, res) => {
-            await delay(DELAY_MS);
-            if (keys.has(ORG_ID)) {
-                // Key response only contains the Last Updated field
-                const data = keys.get(ORG_ID);
-                res.json({last_update: data[LAST_UPDATED_FIELD]});
-            } else {
-                res.json({});
-            }
-        });
+  app.get("/api/v0/wca/apikey/test/", async (_req, res) => {
+    await delay(DELAY_MS);
+    if (!keys.has(ORG_ID)) {
+      res.sendStatus(404);
+      return;
+    } else {
+      const data = keys.get(ORG_ID);
+      const key = data[KEY_FIELD];
+      if (key === "error-test") {
+        // Emulate a server-side error
+        res.status(500).json({ detail: ERROR_DESCRIPTION });
+        return;
+      }
+      if (key === "invalid-test") {
+        // Emulate an invalid API Key
+        res.sendStatus(400);
+        return;
+      }
+    }
+    res.sendStatus(200);
+  });
 
-    app.get("/api/v0/wca/apikey/test/",
-        async (_req, res) => {
-            await delay(DELAY_MS);
-            if (!keys.has(ORG_ID)) {
-                res.sendStatus(404);
-                return;
-            } else {
-                const data = keys.get(ORG_ID);
-                const key = data[KEY_FIELD];
-                if (key === "error-test") {
-                    // Emulate a server-side error
-                    res.status(500).json({detail: ERROR_DESCRIPTION});
-                    return;
-                }
-                if (key === "invalid-test") {
-                    // Emulate an invalid API Key
-                    res.sendStatus(400);
-                    return;
-                }
-            }
-            res.sendStatus(200);
-        });
-
-    app.post("/api/v0/wca/apikey/",
-        async (_req, res) => {
-            await delay(DELAY_MS);
-            const key = _req.body['key'];
-            if (key === "error") {
-                // Emulate a server-side error
-                res.status(500).json({detail: ERROR_DESCRIPTION});
-                return;
-            }
-            if (key === "invalid") {
-                // Emulate an invalid API Key
-                res.sendStatus(400);
-                return;
-            }
-            const entry = {key: key, last_update: new Date()};
-            keys.set(ORG_ID, entry);
-            res.sendStatus(200);
-        });
-
-})
+  app.post("/api/v0/wca/apikey/", async (_req, res) => {
+    await delay(DELAY_MS);
+    const key = _req.body["key"];
+    if (key === "error") {
+      // Emulate a server-side error
+      res.status(500).json({ detail: ERROR_DESCRIPTION });
+      return;
+    }
+    if (key === "invalid") {
+      // Emulate an invalid API Key
+      res.sendStatus(400);
+      return;
+    }
+    const entry = { key: key, last_update: new Date() };
+    keys.set(ORG_ID, entry);
+    res.sendStatus(200);
+  });
+});
diff --git a/ansible_wisdom_console_react/config/webpack.mock.api.modelids.ts b/ansible_wisdom_console_react/config/webpack.mock.api.modelids.ts
index 92903fa15..b644de9b4 100644
--- a/ansible_wisdom_console_react/config/webpack.mock.api.modelids.ts
+++ b/ansible_wisdom_console_react/config/webpack.mock.api.modelids.ts
@@ -1,61 +1,61 @@
-import {delay, DELAY_MS, ERROR_DESCRIPTION, ORG_ID} from './webpack.mock.globals';
+import {
+  delay,
+  DELAY_MS,
+  ERROR_DESCRIPTION,
+  ORG_ID,
+} from "./webpack.mock.globals";
 
 const webpackMockServer = require("webpack-mock-server");
 export default webpackMockServer.add((app, helper) => {
+  const MODEL_ID_FIELD = "model_id";
+  const modelIds = new Map<string, { model_id: string; last_update: Date }>();
 
-    const MODEL_ID_FIELD = 'model_id';
-    const modelIds = new Map<string, { model_id: string, last_update: Date }>();
+  app.get("/api/v0/wca/modelid/", async (_req, res) => {
+    await delay(DELAY_MS);
+    if (modelIds.has(ORG_ID)) {
+      res.json(modelIds.get(ORG_ID));
+    } else {
+      res.json({});
+    }
+  });
 
-    app.get("/api/v0/wca/modelid/",
-        async (_req, res) => {
-            await delay(DELAY_MS);
-            if (modelIds.has(ORG_ID)) {
-                res.json(modelIds.get(ORG_ID));
-            } else {
-                res.json({});
-            }
-        });
+  app.get("/api/v0/wca/modelid/test/", async (_req, res) => {
+    await delay(DELAY_MS);
+    if (!modelIds.has(ORG_ID)) {
+      res.sendStatus(404);
+      return;
+    } else {
+      const data = modelIds.get(ORG_ID);
+      const modelId = data[MODEL_ID_FIELD];
+      if (modelId === "error-test") {
+        // Emulate a server-side error
+        res.status(500).json({ detail: ERROR_DESCRIPTION });
+        return;
+      }
+      if (modelId === "invalid-test") {
+        // Emulate an invalid Model Id
+        res.sendStatus(400);
+        return;
+      }
+    }
+    res.sendStatus(200);
+  });
 
-    app.get("/api/v0/wca/modelid/test/",
-        async (_req, res) => {
-            await delay(DELAY_MS);
-            if (!modelIds.has(ORG_ID)) {
-                res.sendStatus(404);
-                return;
-            } else {
-                const data = modelIds.get(ORG_ID);
-                const modelId = data[MODEL_ID_FIELD];
-                if (modelId === "error-test") {
-                    // Emulate a server-side error
-                    res.status(500).json({detail: ERROR_DESCRIPTION});
-                    return;
-                }
-                if (modelId === "invalid-test") {
-                    // Emulate an invalid Model Id
-                    res.sendStatus(400);
-                    return;
-                }
-            }
-            res.sendStatus(200);
-        });
-
-    app.post("/api/v0/wca/modelid/",
-        async (_req, res) => {
-            await delay(DELAY_MS);
-            const modelId = _req.body[MODEL_ID_FIELD];
-            if (modelId === "error") {
-                // Emulate a server-side error
-                res.status(500).json({detail: ERROR_DESCRIPTION});
-                return;
-            }
-            if (modelId === "invalid") {
-                // Emulate an invalid Model Id
-                res.sendStatus(400);
-                return;
-            }
-            const entry = {model_id: modelId, last_update: new Date()};
-            modelIds.set(ORG_ID, entry);
-            res.sendStatus(200);
-        });
-
-})
+  app.post("/api/v0/wca/modelid/", async (_req, res) => {
+    await delay(DELAY_MS);
+    const modelId = _req.body[MODEL_ID_FIELD];
+    if (modelId === "error") {
+      // Emulate a server-side error
+      res.status(500).json({ detail: ERROR_DESCRIPTION });
+      return;
+    }
+    if (modelId === "invalid") {
+      // Emulate an invalid Model Id
+      res.sendStatus(400);
+      return;
+    }
+    const entry = { model_id: modelId, last_update: new Date() };
+    modelIds.set(ORG_ID, entry);
+    res.sendStatus(200);
+  });
+});
diff --git a/ansible_wisdom_console_react/config/webpack.mock.api.telemetry.ts b/ansible_wisdom_console_react/config/webpack.mock.api.telemetry.ts
index e8ba592b9..4692a6921 100644
--- a/ansible_wisdom_console_react/config/webpack.mock.api.telemetry.ts
+++ b/ansible_wisdom_console_react/config/webpack.mock.api.telemetry.ts
@@ -1,23 +1,19 @@
-import {delay, DELAY_MS} from './webpack.mock.globals';
+import { delay, DELAY_MS } from "./webpack.mock.globals";
 
 const webpackMockServer = require("webpack-mock-server");
 
 export default webpackMockServer.add((app, helper) => {
+  let optOut = false;
 
-    let optOut = false;
+  app.get("/api/v0/telemetry/", async (_req, res) => {
+    await delay(DELAY_MS);
+    res.json({ optOut: optOut });
+  });
 
-    app.get("/api/v0/telemetry/",
-        async (_req, res) => {
-            await delay(DELAY_MS);
-            res.json({optOut: optOut});
-        });
-
-    app.post("/api/v0/telemetry/",
-        async (_req, res) => {
-            await delay(DELAY_MS);
-            const _optOut = _req.body['optOut'];
-            optOut = _optOut;
-            res.sendStatus(200);
-        });
-
-})
+  app.post("/api/v0/telemetry/", async (_req, res) => {
+    await delay(DELAY_MS);
+    const _optOut = _req.body["optOut"];
+    optOut = _optOut;
+    res.sendStatus(200);
+  });
+});
diff --git a/ansible_wisdom_console_react/config/webpack.mock.globals.ts b/ansible_wisdom_console_react/config/webpack.mock.globals.ts
index dcc7f9c2d..ef8727f43 100644
--- a/ansible_wisdom_console_react/config/webpack.mock.globals.ts
+++ b/ansible_wisdom_console_react/config/webpack.mock.globals.ts
@@ -1,10 +1,11 @@
 export const ORG_ID = "org-id";
 export const MODEL_ID_FIELD = "model_id";
 
-export const ERROR_DESCRIPTION = "Something went horribly wrong. I suggest you speak to the development team to try and figure out a solution.";
+export const ERROR_DESCRIPTION =
+  "Something went horribly wrong. I suggest you speak to the development team to try and figure out a solution.";
 
 export const DELAY_MS = 1000;
 
 export const delay = (ms: number) => {
-    return new Promise(resolve => setTimeout(resolve, ms));
-}
+  return new Promise((resolve) => setTimeout(resolve, ms));
+};
diff --git a/ansible_wisdom_console_react/config/webpack/persistentCache/createEnvironmentHash.js b/ansible_wisdom_console_react/config/webpack/persistentCache/createEnvironmentHash.js
index 4487e853e..4b482c37e 100644
--- a/ansible_wisdom_console_react/config/webpack/persistentCache/createEnvironmentHash.js
+++ b/ansible_wisdom_console_react/config/webpack/persistentCache/createEnvironmentHash.js
@@ -1,9 +1,9 @@
-'use strict';
-const { createHash } = require('crypto');
+"use strict";
+const { createHash } = require("crypto");
 
-module.exports = env => {
-  const hash = createHash('md5');
+module.exports = (env) => {
+  const hash = createHash("md5");
   hash.update(JSON.stringify(env));
 
-  return hash.digest('hex');
+  return hash.digest("hex");
 };
diff --git a/ansible_wisdom_console_react/config/webpackDevServer.config.js b/ansible_wisdom_console_react/config/webpackDevServer.config.js
index 33f65070c..4c89c9ee8 100644
--- a/ansible_wisdom_console_react/config/webpackDevServer.config.js
+++ b/ansible_wisdom_console_react/config/webpackDevServer.config.js
@@ -1,22 +1,22 @@
-'use strict';
+"use strict";
 
-const fs = require('fs');
-const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
-const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
-const ignoredFiles = require('react-dev-utils/ignoredFiles');
-const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');
-const paths = require('./paths');
-const getHttpsConfig = require('./getHttpsConfig');
+const fs = require("fs");
+const evalSourceMapMiddleware = require("react-dev-utils/evalSourceMapMiddleware");
+const noopServiceWorkerMiddleware = require("react-dev-utils/noopServiceWorkerMiddleware");
+const ignoredFiles = require("react-dev-utils/ignoredFiles");
+const redirectServedPath = require("react-dev-utils/redirectServedPathMiddleware");
+const paths = require("./paths");
+const getHttpsConfig = require("./getHttpsConfig");
 const webpackMockServer = require("webpack-mock-server");
 
-const host = process.env.HOST || '0.0.0.0';
+const host = process.env.HOST || "0.0.0.0";
 const sockHost = process.env.WDS_SOCKET_HOST;
 const sockPath = process.env.WDS_SOCKET_PATH; // default: '/ws'
 const sockPort = process.env.WDS_SOCKET_PORT;
 
 module.exports = function (proxy, allowedHost) {
   const disableFirewall =
-    !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true';
+    !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === "true";
   return {
     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
     // websites from potentially accessing local content through DNS rebinding:
@@ -36,11 +36,11 @@ module.exports = function (proxy, allowedHost) {
     // really know what you're doing with a special environment variable.
     // Note: ["localhost", ".localhost"] will support subdomains - but we might
     // want to allow setting the allowedHosts manually for more complex setups
-    allowedHosts: disableFirewall ? 'all' : [allowedHost],
+    allowedHosts: disableFirewall ? "all" : [allowedHost],
     headers: {
-      'Access-Control-Allow-Origin': '*',
-      'Access-Control-Allow-Methods': '*',
-      'Access-Control-Allow-Headers': '*',
+      "Access-Control-Allow-Origin": "*",
+      "Access-Control-Allow-Methods": "*",
+      "Access-Control-Allow-Headers": "*",
     },
     // Enable gzip compression of generated files.
     compress: true,
@@ -102,9 +102,7 @@ module.exports = function (proxy, allowedHost) {
       // See https://github.com/facebook/create-react-app/issues/387.
       disableDotRule: true,
       index: paths.publicUrlOrPath,
-      rewrites: [
-        { from: /\/denied/, to: '/denied.html'}
-      ]
+      rewrites: [{ from: /\/denied/, to: "/denied.html" }],
     },
     // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
     proxy,
@@ -128,9 +126,9 @@ module.exports = function (proxy, allowedHost) {
         entry: [
           "config/webpack.mock.api.keys.ts",
           "config/webpack.mock.api.modelids.ts",
-          "config/webpack.mock.api.telemetry.ts"
-        ]
-      })
+          "config/webpack.mock.api.telemetry.ts",
+        ],
+      });
     },
     onAfterSetupMiddleware(devServer) {
       // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
diff --git a/ansible_wisdom_console_react/scripts/build.js b/ansible_wisdom_console_react/scripts/build.js
index 82b174664..2f0b5d34b 100644
--- a/ansible_wisdom_console_react/scripts/build.js
+++ b/ansible_wisdom_console_react/scripts/build.js
@@ -1,31 +1,31 @@
-'use strict';
+"use strict";
 
 // Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'production';
-process.env.NODE_ENV = 'production';
+process.env.BABEL_ENV = "production";
+process.env.NODE_ENV = "production";
 
 // Makes the script crash on unhandled rejections instead of silently
 // ignoring them. In the future, promise rejections that are not handled will
 // terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
+process.on("unhandledRejection", (err) => {
   throw err;
 });
 
 // Ensure environment variables are read.
-require('../config/env');
-
-const path = require('path');
-const chalk = require('react-dev-utils/chalk');
-const fs = require('fs-extra');
-const bfj = require('bfj');
-const webpack = require('webpack');
-const configFactory = require('../config/webpack.config');
-const paths = require('../config/paths');
-const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
-const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
-const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
-const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
-const printBuildError = require('react-dev-utils/printBuildError');
+require("../config/env");
+
+const path = require("path");
+const chalk = require("react-dev-utils/chalk");
+const fs = require("fs-extra");
+const bfj = require("bfj");
+const webpack = require("webpack");
+const configFactory = require("../config/webpack.config");
+const paths = require("../config/paths");
+const checkRequiredFiles = require("react-dev-utils/checkRequiredFiles");
+const formatWebpackMessages = require("react-dev-utils/formatWebpackMessages");
+const printHostingInstructions = require("react-dev-utils/printHostingInstructions");
+const FileSizeReporter = require("react-dev-utils/FileSizeReporter");
+const printBuildError = require("react-dev-utils/printBuildError");
 
 const measureFileSizesBeforeBuild =
   FileSizeReporter.measureFileSizesBeforeBuild;
@@ -44,21 +44,21 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 }
 
 const argv = process.argv.slice(2);
-const writeStatsJson = argv.indexOf('--stats') !== -1;
+const writeStatsJson = argv.indexOf("--stats") !== -1;
 
 // Generate configuration
-const config = configFactory('production');
+const config = configFactory("production");
 
 // We require that you explicitly set browsers and do not fall back to
 // browserslist defaults.
-const { checkBrowsers } = require('react-dev-utils/browsersHelper');
+const { checkBrowsers } = require("react-dev-utils/browsersHelper");
 checkBrowsers(paths.appPath, isInteractive)
   .then(() => {
     // First, read the current file sizes in build directory.
     // This lets us display how much they changed later.
     return measureFileSizesBeforeBuild(paths.appBuild);
   })
-  .then(previousFileSizes => {
+  .then((previousFileSizes) => {
     // Remove all content but keep the directory so that
     // if you're in it, you don't end up in Trash
     fs.emptyDirSync(paths.appBuild);
@@ -70,29 +70,29 @@ checkBrowsers(paths.appPath, isInteractive)
   .then(
     ({ stats, previousFileSizes, warnings }) => {
       if (warnings.length) {
-        console.log(chalk.yellow('Compiled with warnings.\n'));
-        console.log(warnings.join('\n\n'));
+        console.log(chalk.yellow("Compiled with warnings.\n"));
+        console.log(warnings.join("\n\n"));
         console.log(
-          '\nSearch for the ' +
-            chalk.underline(chalk.yellow('keywords')) +
-            ' to learn more about each warning.'
+          "\nSearch for the " +
+            chalk.underline(chalk.yellow("keywords")) +
+            " to learn more about each warning.",
         );
         console.log(
-          'To ignore, add ' +
-            chalk.cyan('// eslint-disable-next-line') +
-            ' to the line before.\n'
+          "To ignore, add " +
+            chalk.cyan("// eslint-disable-next-line") +
+            " to the line before.\n",
         );
       } else {
-        console.log(chalk.green('Compiled successfully.\n'));
+        console.log(chalk.green("Compiled successfully.\n"));
       }
 
-      console.log('File sizes after gzip:\n');
+      console.log("File sizes after gzip:\n");
       printFileSizesAfterBuild(
         stats,
         previousFileSizes,
         paths.appBuild,
         WARN_AFTER_BUNDLE_GZIP_SIZE,
-        WARN_AFTER_CHUNK_GZIP_SIZE
+        WARN_AFTER_CHUNK_GZIP_SIZE,
       );
       console.log();
 
@@ -105,26 +105,26 @@ checkBrowsers(paths.appPath, isInteractive)
         publicUrl,
         publicPath,
         buildFolder,
-        useYarn
+        useYarn,
       );
     },
-    err => {
-      const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
+    (err) => {
+      const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === "true";
       if (tscCompileOnError) {
         console.log(
           chalk.yellow(
-            'Compiled with the following type errors (you may want to check these before deploying your app):\n'
-          )
+            "Compiled with the following type errors (you may want to check these before deploying your app):\n",
+          ),
         );
         printBuildError(err);
       } else {
-        console.log(chalk.red('Failed to compile.\n'));
+        console.log(chalk.red("Failed to compile.\n"));
         printBuildError(err);
         process.exit(1);
       }
-    }
+    },
   )
-  .catch(err => {
+  .catch((err) => {
     if (err && err.message) {
       console.log(err.message);
     }
@@ -133,7 +133,7 @@ checkBrowsers(paths.appPath, isInteractive)
 
 // Create the production build and print the deployment instructions.
 function build(previousFileSizes) {
-  console.log('Creating an optimized production build...');
+  console.log("Creating an optimized production build...");
 
   const compiler = webpack(config);
   return new Promise((resolve, reject) => {
@@ -147,10 +147,10 @@ function build(previousFileSizes) {
         let errMessage = err.message;
 
         // Add additional information for postcss errors
-        if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
+        if (Object.prototype.hasOwnProperty.call(err, "postcssNode")) {
           errMessage +=
-            '\nCompileError: Begins at CSS selector ' +
-            err['postcssNode'].selector;
+            "\nCompileError: Begins at CSS selector " +
+            err["postcssNode"].selector;
         }
 
         messages = formatWebpackMessages({
@@ -159,7 +159,7 @@ function build(previousFileSizes) {
         });
       } else {
         messages = formatWebpackMessages(
-          stats.toJson({ all: false, warnings: true, errors: true })
+          stats.toJson({ all: false, warnings: true, errors: true }),
         );
       }
       if (messages.errors.length) {
@@ -168,26 +168,26 @@ function build(previousFileSizes) {
         if (messages.errors.length > 1) {
           messages.errors.length = 1;
         }
-        return reject(new Error(messages.errors.join('\n\n')));
+        return reject(new Error(messages.errors.join("\n\n")));
       }
       if (
         process.env.CI &&
-        (typeof process.env.CI !== 'string' ||
-          process.env.CI.toLowerCase() !== 'false') &&
+        (typeof process.env.CI !== "string" ||
+          process.env.CI.toLowerCase() !== "false") &&
         messages.warnings.length
       ) {
         // Ignore sourcemap warnings in CI builds. See #8227 for more info.
         const filteredWarnings = messages.warnings.filter(
-          w => !/Failed to parse source map/.test(w)
+          (w) => !/Failed to parse source map/.test(w),
         );
         if (filteredWarnings.length) {
           console.log(
             chalk.yellow(
-              '\nTreating warnings as errors because process.env.CI = true.\n' +
-                'Most CI servers set it automatically.\n'
-            )
+              "\nTreating warnings as errors because process.env.CI = true.\n" +
+                "Most CI servers set it automatically.\n",
+            ),
           );
-          return reject(new Error(filteredWarnings.join('\n\n')));
+          return reject(new Error(filteredWarnings.join("\n\n")));
         }
       }
 
@@ -199,9 +199,9 @@ function build(previousFileSizes) {
 
       if (writeStatsJson) {
         return bfj
-          .write(paths.appBuild + '/bundle-stats.json', stats.toJson())
+          .write(paths.appBuild + "/bundle-stats.json", stats.toJson())
           .then(() => resolve(resolveArgs))
-          .catch(error => reject(new Error(error)));
+          .catch((error) => reject(new Error(error)));
       }
 
       return resolve(resolveArgs);
diff --git a/ansible_wisdom_console_react/scripts/start.js b/ansible_wisdom_console_react/scripts/start.js
index 317b293b8..ea94270c2 100644
--- a/ansible_wisdom_console_react/scripts/start.js
+++ b/ansible_wisdom_console_react/scripts/start.js
@@ -1,38 +1,38 @@
-'use strict';
+"use strict";
 
 // Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'development';
-process.env.NODE_ENV = 'development';
+process.env.BABEL_ENV = "development";
+process.env.NODE_ENV = "development";
 
 // Makes the script crash on unhandled rejections instead of silently
 // ignoring them. In the future, promise rejections that are not handled will
 // terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
+process.on("unhandledRejection", (err) => {
   throw err;
 });
 
 // Ensure environment variables are read.
-require('../config/env');
+require("../config/env");
 
-const fs = require('fs');
-const chalk = require('react-dev-utils/chalk');
-const webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
-const clearConsole = require('react-dev-utils/clearConsole');
-const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+const fs = require("fs");
+const chalk = require("react-dev-utils/chalk");
+const webpack = require("webpack");
+const WebpackDevServer = require("webpack-dev-server");
+const clearConsole = require("react-dev-utils/clearConsole");
+const checkRequiredFiles = require("react-dev-utils/checkRequiredFiles");
 const {
   choosePort,
   createCompiler,
   prepareProxy,
   prepareUrls,
-} = require('react-dev-utils/WebpackDevServerUtils');
-const openBrowser = require('react-dev-utils/openBrowser');
-const semver = require('semver');
-const paths = require('../config/paths');
-const configFactory = require('../config/webpack.config');
-const createDevServerConfig = require('../config/webpackDevServer.config');
-const getClientEnvironment = require('../config/env');
-const react = require(require.resolve('react', { paths: [paths.appPath] }));
+} = require("react-dev-utils/WebpackDevServerUtils");
+const openBrowser = require("react-dev-utils/openBrowser");
+const semver = require("semver");
+const paths = require("../config/paths");
+const configFactory = require("../config/webpack.config");
+const createDevServerConfig = require("../config/webpackDevServer.config");
+const getClientEnvironment = require("../config/env");
+const react = require(require.resolve("react", { paths: [paths.appPath] }));
 
 const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
 const useYarn = fs.existsSync(paths.yarnLockFile);
@@ -45,56 +45,51 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 
 // Tools like Cloud9 rely on this.
 const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 8888;
-const HOST = process.env.HOST || '0.0.0.0';
+const HOST = process.env.HOST || "0.0.0.0";
 
 if (process.env.HOST) {
   console.log(
     chalk.cyan(
       `Attempting to bind to HOST environment variable: ${chalk.yellow(
-        chalk.bold(process.env.HOST)
-      )}`
-    )
+        chalk.bold(process.env.HOST),
+      )}`,
+    ),
   );
   console.log(
-    `If this was unintentional, check that you haven't mistakenly set it in your shell.`
+    `If this was unintentional, check that you haven't mistakenly set it in your shell.`,
   );
   console.log(
-    `Learn more here: ${chalk.yellow('https://cra.link/advanced-config')}`
+    `Learn more here: ${chalk.yellow("https://cra.link/advanced-config")}`,
   );
   console.log();
 }
 
 // We require that you explicitly set browsers and do not fall back to
 // browserslist defaults.
-const { checkBrowsers } = require('react-dev-utils/browsersHelper');
+const { checkBrowsers } = require("react-dev-utils/browsersHelper");
 checkBrowsers(paths.appPath, isInteractive)
   .then(() => {
     // We attempt to use the default port but if it is busy, we offer the user to
     // run on a different port. `choosePort()` Promise resolves to the next free port.
     return choosePort(HOST, DEFAULT_PORT);
   })
-  .then(port => {
+  .then((port) => {
     if (port == null) {
       // We have not found a port.
       return;
     }
 
-    const config = configFactory('development');
-    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
+    const config = configFactory("development");
+    const protocol = process.env.HTTPS === "true" ? "https" : "http";
     const appName = require(paths.appPackageJson).name;
     // {manstis} Homepage is set to 'static/console/' to map to Django, however we
     // want to launch from '/console' for App.tsx's use of 'PageApp.basename'.
     // This configures a React Router to handle '/console' prefixed URLs.
-    const pathNameSegments = paths.publicUrlOrPath.slice(0, -1).split('/');
+    const pathNameSegments = paths.publicUrlOrPath.slice(0, -1).split("/");
     const pathName = pathNameSegments[pathNameSegments.length - 1];
 
     const useTypeScript = fs.existsSync(paths.appTsConfig);
-    const urls = prepareUrls(
-      protocol,
-      HOST,
-      port,
-      pathName
-    );
+    const urls = prepareUrls(protocol, HOST, port, pathName);
     // Create a webpack compiler that is configured with custom messages.
     const compiler = createCompiler({
       appName,
@@ -106,11 +101,7 @@ checkBrowsers(paths.appPath, isInteractive)
     });
     // Load proxy config
     const proxySetting = require(paths.appPackageJson).proxy;
-    const proxyConfig = prepareProxy(
-      proxySetting,
-      paths.appPublic,
-      pathName
-    );
+    const proxyConfig = prepareProxy(proxySetting, paths.appPublic, pathName);
     // Serve webpack assets generated by the compiler over a web server.
     const serverConfig = {
       ...createDevServerConfig(proxyConfig, urls.lanUrlForConfig),
@@ -124,34 +115,34 @@ checkBrowsers(paths.appPath, isInteractive)
         clearConsole();
       }
 
-      if (env.raw.FAST_REFRESH && semver.lt(react.version, '16.10.0')) {
+      if (env.raw.FAST_REFRESH && semver.lt(react.version, "16.10.0")) {
         console.log(
           chalk.yellow(
-            `Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.`
-          )
+            `Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.`,
+          ),
         );
       }
 
-      console.log(chalk.cyan('Starting the development server...\n'));
+      console.log(chalk.cyan("Starting the development server...\n"));
       openBrowser(urls.localUrlForBrowser);
     });
 
-    ['SIGINT', 'SIGTERM'].forEach(function (sig) {
+    ["SIGINT", "SIGTERM"].forEach(function (sig) {
       process.on(sig, function () {
         devServer.close();
         process.exit();
       });
     });
 
-    if (process.env.CI !== 'true') {
+    if (process.env.CI !== "true") {
       // Gracefully exit when stdin ends
-      process.stdin.on('end', function () {
+      process.stdin.on("end", function () {
         devServer.close();
         process.exit();
       });
     }
   })
-  .catch(err => {
+  .catch((err) => {
     if (err && err.message) {
       console.log(err.message);
     }
diff --git a/ansible_wisdom_console_react/scripts/test.js b/ansible_wisdom_console_react/scripts/test.js
index a38c855c5..0bd9b33ea 100644
--- a/ansible_wisdom_console_react/scripts/test.js
+++ b/ansible_wisdom_console_react/scripts/test.js
@@ -1,27 +1,27 @@
-'use strict';
+"use strict";
 
 // Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'test';
-process.env.NODE_ENV = 'test';
-process.env.PUBLIC_URL = '';
+process.env.BABEL_ENV = "test";
+process.env.NODE_ENV = "test";
+process.env.PUBLIC_URL = "";
 
 // Makes the script crash on unhandled rejections instead of silently
 // ignoring them. In the future, promise rejections that are not handled will
 // terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
+process.on("unhandledRejection", (err) => {
   throw err;
 });
 
 // Ensure environment variables are read.
-require('../config/env');
+require("../config/env");
 
-const jest = require('jest');
-const execSync = require('child_process').execSync;
+const jest = require("jest");
+const execSync = require("child_process").execSync;
 let argv = process.argv.slice(2);
 
 function isInGitRepository() {
   try {
-    execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
+    execSync("git rev-parse --is-inside-work-tree", { stdio: "ignore" });
     return true;
   } catch (e) {
     return false;
@@ -30,7 +30,7 @@ function isInGitRepository() {
 
 function isInMercurialRepository() {
   try {
-    execSync('hg --cwd . root', { stdio: 'ignore' });
+    execSync("hg --cwd . root", { stdio: "ignore" });
     return true;
   } catch (e) {
     return false;
@@ -40,13 +40,12 @@ function isInMercurialRepository() {
 // Watch unless on CI or explicitly running all tests
 if (
   !process.env.CI &&
-  argv.indexOf('--watchAll') === -1 &&
-  argv.indexOf('--watchAll=false') === -1
+  argv.indexOf("--watchAll") === -1 &&
+  argv.indexOf("--watchAll=false") === -1
 ) {
   // https://github.com/facebook/create-react-app/issues/5210
   const hasSourceControl = isInGitRepository() || isInMercurialRepository();
-  argv.push(hasSourceControl ? '--watch' : '--watchAll');
+  argv.push(hasSourceControl ? "--watch" : "--watchAll");
 }
 
-
 jest.run(argv);
diff --git a/ansible_wisdom_console_react/src/Alerts.tsx b/ansible_wisdom_console_react/src/Alerts.tsx
index af55c101a..faf89b5e8 100644
--- a/ansible_wisdom_console_react/src/Alerts.tsx
+++ b/ansible_wisdom_console_react/src/Alerts.tsx
@@ -1,56 +1,71 @@
-import React, {forwardRef, useCallback, useImperativeHandle} from 'react';
-import {Alert, AlertActionCloseButton, AlertGroup, AlertProps} from "@patternfly/react-core";
-import {useTranslation} from "react-i18next";
-import './ModelSettings.css';
+import React, { forwardRef, useCallback, useImperativeHandle } from "react";
+import {
+  Alert,
+  AlertActionCloseButton,
+  AlertGroup,
+  AlertProps,
+} from "@patternfly/react-core";
+import { useTranslation } from "react-i18next";
+import "./ModelSettings.css";
 
 export type AlertsHandle = {
-    readonly addAlert: (title: string) => void;
+  readonly addAlert: (title: string) => void;
 };
 
-type AlertsProps = {}
+type AlertsProps = {};
 
 export const Alerts = forwardRef<AlertsHandle, AlertsProps>((props, ref) => {
-    const {t} = useTranslation();
-    const [alerts, setAlerts] = React.useState<React.ReactElement<AlertProps>[]>([]);
+  const { t } = useTranslation();
+  const [alerts, setAlerts] = React.useState<React.ReactElement<AlertProps>[]>(
+    [],
+  );
 
-    const _removeAlert = useCallback((key: React.Key) => {
-        setAlerts(prevAlerts => prevAlerts.filter(alert => alert.props.id !== key.toString()));
-    }, []);
+  const _removeAlert = useCallback((key: React.Key) => {
+    setAlerts((prevAlerts) =>
+      prevAlerts.filter((alert) => alert.props.id !== key.toString()),
+    );
+  }, []);
 
-    const _addAlert = useCallback((title: string) => {
-        const key = new Date().getTime();
-        setAlerts(prevAlerts => [
-            <Alert
-                variant={"success"}
-                title={title}
-                timeout={5000}
-                onTimeout={() => _removeAlert(key)}
-                isLiveRegion
-                actionClose={
-                    <AlertActionCloseButton
-                        title={t("Close")}
-                        variantLabel={"success alert"}
-                        onClose={() => _removeAlert(key)}
-                    />
-                }
-                key={key}
-                id={key.toString()}
-                data-testid={"alert"}
-            >
-            </Alert>,
-            ...prevAlerts
-        ]);
-    }, [t, _removeAlert]);
+  const _addAlert = useCallback(
+    (title: string) => {
+      const key = new Date().getTime();
+      setAlerts((prevAlerts) => [
+        <Alert
+          variant={"success"}
+          title={title}
+          timeout={5000}
+          onTimeout={() => _removeAlert(key)}
+          isLiveRegion
+          actionClose={
+            <AlertActionCloseButton
+              title={t("Close")}
+              variantLabel={"success alert"}
+              onClose={() => _removeAlert(key)}
+            />
+          }
+          key={key}
+          id={key.toString()}
+          data-testid={"alert"}
+        ></Alert>,
+        ...prevAlerts,
+      ]);
+    },
+    [t, _removeAlert],
+  );
 
-    useImperativeHandle(ref, () => ({
-        addAlert(title: string) {
-            _addAlert(title);
-        }
-    }), [_addAlert]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      addAlert(title: string) {
+        _addAlert(title);
+      },
+    }),
+    [_addAlert],
+  );
 
-    return (
-        <AlertGroup isToast={true} isLiveRegion={true}>
-            {alerts}
-        </AlertGroup>
-    )
+  return (
+    <AlertGroup isToast={true} isLiveRegion={true}>
+      {alerts}
+    </AlertGroup>
+  );
 });
diff --git a/ansible_wisdom_console_react/src/App.tsx b/ansible_wisdom_console_react/src/App.tsx
index e8268e7f5..156ea2fb2 100644
--- a/ansible_wisdom_console_react/src/App.tsx
+++ b/ansible_wisdom_console_react/src/App.tsx
@@ -1,55 +1,54 @@
-import {useMemo} from 'react'
-import {useTranslation} from 'react-i18next'
-import {AppHeader} from './AppHeader'
-import {ModelSettings} from "./ModelSettings";
-import {TelemetrySettings} from "./TelemetrySettings";
-import {PageNavigationItem} from "@ansible/ansible-ui-framework";
-import {PageApp} from "./PageApp";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { AppHeader } from "./AppHeader";
+import { ModelSettings } from "./ModelSettings";
+import { TelemetrySettings } from "./TelemetrySettings";
+import { PageNavigationItem } from "@ansible/ansible-ui-framework";
+import { PageApp } from "./PageApp";
 
 export interface AppProps {
-    readonly userName: string
-    readonly telemetryOptEnabled: boolean
+  readonly userName: string;
+  readonly telemetryOptEnabled: boolean;
 }
 
 export function App(props: AppProps) {
-    const {t} = useTranslation();
-    const {userName, telemetryOptEnabled} = props;
+  const { t } = useTranslation();
+  const { userName, telemetryOptEnabled } = props;
 
-    const navigationItems = useMemo<PageNavigationItem[]>(
-        () => {
-            const items = [{
-                // Model settings
-                label: t('ModelSettings'),
-                path: 'settings',
-                element: <ModelSettings/>
-            }]
-            if (telemetryOptEnabled) {
-                items.push({
-                    // Telemetry
-                    label: t('Telemetry'),
-                    path: 'telemetry',
-                    element: <TelemetrySettings/>
-                })
-            }
-            return [
-                {
-                    // Admin portal
-                    label: t('AdminPortal'),
-                    path: 'admin',
-                    children: items,
-                },
-            ]
-        },
-        [t, telemetryOptEnabled]
-    );
+  const navigationItems = useMemo<PageNavigationItem[]>(() => {
+    const items = [
+      {
+        // Model settings
+        label: t("ModelSettings"),
+        path: "settings",
+        element: <ModelSettings />,
+      },
+    ];
+    if (telemetryOptEnabled) {
+      items.push({
+        // Telemetry
+        label: t("Telemetry"),
+        path: "telemetry",
+        element: <TelemetrySettings />,
+      });
+    }
+    return [
+      {
+        // Admin portal
+        label: t("AdminPortal"),
+        path: "admin",
+        children: items,
+      },
+    ];
+  }, [t, telemetryOptEnabled]);
 
-    return (
-        <PageApp
-            header={<AppHeader userName={userName}/>}
-            navigationItems={navigationItems}
-            basename="/console"
-        />
-    );
+  return (
+    <PageApp
+      header={<AppHeader userName={userName} />}
+      navigationItems={navigationItems}
+      basename="/console"
+    />
+  );
 }
 
 export default App;
diff --git a/ansible_wisdom_console_react/src/AppHeader.tsx b/ansible_wisdom_console_react/src/AppHeader.tsx
index 7460e4dfd..14cad0fab 100644
--- a/ansible_wisdom_console_react/src/AppHeader.tsx
+++ b/ansible_wisdom_console_react/src/AppHeader.tsx
@@ -1,48 +1,55 @@
-import {PageMasthead} from '@ansible/ansible-ui-framework'
-import {useTranslation} from 'react-i18next'
-import {Brand, DropdownItem, ToolbarGroup, ToolbarItem} from "@patternfly/react-core";
-import {UserCircleIcon} from "@patternfly/react-icons";
-import {PageMastheadDropdown} from "./PageMastheadDropdown";
-import RedHatLogo from './redhat-logo.svg';
+import { PageMasthead } from "@ansible/ansible-ui-framework";
+import { useTranslation } from "react-i18next";
+import {
+  Brand,
+  DropdownItem,
+  ToolbarGroup,
+  ToolbarItem,
+} from "@patternfly/react-core";
+import { UserCircleIcon } from "@patternfly/react-icons";
+import { PageMastheadDropdown } from "./PageMastheadDropdown";
+import RedHatLogo from "./redhat-logo.svg";
 
 export interface AppHeaderProps {
-    readonly userName: string
+  readonly userName: string;
 }
 
 export function AppHeader(props: AppHeaderProps) {
-    const {t} = useTranslation()
-    const {userName} = props;
+  const { t } = useTranslation();
+  const { userName } = props;
 
-    const logout = () => {
-        window.location.assign("/logout")
-    };
+  const logout = () => {
+    window.location.assign("/logout");
+  };
 
-    return (
-        <PageMasthead
-            icon={<Brand alt="" widths={{default: '125px', md: '125px'}}>
-                <source media="(min-width: 125px)" srcSet={RedHatLogo}/>
-            </Brand>}
-            title=""
-        >
-            <ToolbarItem style={{flexGrow: 1}}/>
-            <ToolbarGroup variant="icon-button-group">
-                <ToolbarItem>
-                    <PageMastheadDropdown
-                        id="account-menu"
-                        icon={<UserCircleIcon size="md"/>}
-                        userName={userName}
-                    >
-                        <DropdownItem
-                            id="logout"
-                            label={t('Logout')}
-                            onClick={logout}
-                            data-testid="app-header__logout"
-                        >
-                            {t('Logout')}
-                        </DropdownItem>
-                    </PageMastheadDropdown>
-                </ToolbarItem>
-            </ToolbarGroup>
-        </PageMasthead>
-    )
+  return (
+    <PageMasthead
+      icon={
+        <Brand alt="" widths={{ default: "125px", md: "125px" }}>
+          <source media="(min-width: 125px)" srcSet={RedHatLogo} />
+        </Brand>
+      }
+      title=""
+    >
+      <ToolbarItem style={{ flexGrow: 1 }} />
+      <ToolbarGroup variant="icon-button-group">
+        <ToolbarItem>
+          <PageMastheadDropdown
+            id="account-menu"
+            icon={<UserCircleIcon size="md" />}
+            userName={userName}
+          >
+            <DropdownItem
+              id="logout"
+              label={t("Logout")}
+              onClick={logout}
+              data-testid="app-header__logout"
+            >
+              {t("Logout")}
+            </DropdownItem>
+          </PageMastheadDropdown>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </PageMasthead>
+  );
 }
diff --git a/ansible_wisdom_console_react/src/BusyButton.tsx b/ansible_wisdom_console_react/src/BusyButton.tsx
index d65c37c73..999221b09 100644
--- a/ansible_wisdom_console_react/src/BusyButton.tsx
+++ b/ansible_wisdom_console_react/src/BusyButton.tsx
@@ -1,28 +1,20 @@
-import {Button, ButtonProps} from "@patternfly/react-core";
+import { Button, ButtonProps } from "@patternfly/react-core";
 
 export interface BusyButtonProps extends ButtonProps {
-    readonly isBusy: boolean;
-
+  readonly isBusy: boolean;
 }
 
 export const BusyButton = (props: BusyButtonProps) => {
-    const {isBusy, children} = props;
-    const {isBusy: _, ...baseProps} = props;
-    return (
-        <>
-            {isBusy && (
-                <Button
-                    {...baseProps}
-                    icon={undefined}
-                    isLoading={isBusy}>
-                    {children}
-                </Button>
-            )}
-            {!isBusy && (
-                <Button {...baseProps}>
-                    {children}
-                </Button>
-            )}
-        </>
-    )
-}
+  const { isBusy, children } = props;
+  const { isBusy: _, ...baseProps } = props;
+  return (
+    <>
+      {isBusy && (
+        <Button {...baseProps} icon={undefined} isLoading={isBusy}>
+          {children}
+        </Button>
+      )}
+      {!isBusy && <Button {...baseProps}>{children}</Button>}
+    </>
+  );
+};
diff --git a/ansible_wisdom_console_react/src/ErrorModal.tsx b/ansible_wisdom_console_react/src/ErrorModal.tsx
index 573926657..24c7c64b0 100644
--- a/ansible_wisdom_console_react/src/ErrorModal.tsx
+++ b/ansible_wisdom_console_react/src/ErrorModal.tsx
@@ -1,58 +1,70 @@
-import React, {useMemo} from 'react';
-import {Button, ExpandableSection, Modal, ModalVariant, Text, TextContent} from '@patternfly/react-core';
-import {useTranslation} from "react-i18next";
-import './ErrorModal.css';
+import React, { useMemo } from "react";
+import {
+  Button,
+  ExpandableSection,
+  Modal,
+  ModalVariant,
+  Text,
+  TextContent,
+} from "@patternfly/react-core";
+import { useTranslation } from "react-i18next";
+import "./ErrorModal.css";
 
 interface ErrorModalProps {
-    readonly caption: string,
-    readonly  hasError: HasError,
-    readonly close: () => void
+  readonly caption: string;
+  readonly hasError: HasError;
+  readonly close: () => void;
 }
 
-export type HasError = { inError: false } | { inError: true, message: string, detail: string };
-export const NO_ERROR: HasError = {inError: false};
+export type HasError =
+  | { inError: false }
+  | { inError: true; message: string; detail: string };
+export const NO_ERROR: HasError = { inError: false };
 
 export const ErrorModal = (props: ErrorModalProps) => {
-    const {t} = useTranslation();
-    const {caption, hasError, close} = props;
-    const _error = useMemo<string>(() => {
-        if ('message' in hasError) {
-            return hasError.message;
-        }
-        return "";
-    }, [hasError]);
-    const _detail = useMemo<string>(() => {
-        if ('detail' in hasError) {
-            return hasError.detail;
-        }
-        return "";
-    }, [hasError]);
+  const { t } = useTranslation();
+  const { caption, hasError, close } = props;
+  const _error = useMemo<string>(() => {
+    if ("message" in hasError) {
+      return hasError.message;
+    }
+    return "";
+  }, [hasError]);
+  const _detail = useMemo<string>(() => {
+    if ("detail" in hasError) {
+      return hasError.detail;
+    }
+    return "";
+  }, [hasError]);
 
-    return (
-        <Modal
-            className={"Error-Modal"}
-            variant={ModalVariant.small}
-            title={t("Error")}
-            description={caption}
-            titleIconVariant="danger"
-            isOpen={hasError.inError}
-            onClose={close}
-            actions={[
-                <Button key="confirm" variant="secondary" onClick={close}>
-                    {t("Close")}
-                </Button>,
-            ]}
-        >
-            <ExpandableSection toggleText={t("ErrorDetails")} className={"Error-Modal__container"}>
-                <TextContent>
-                    <Text component={"pre"} className={"Error-Model__detail"}>
-                        {_error}
-                    </Text>
-                    <Text component={"pre"} className={"Error-Model__detail"}>
-                        {_detail}
-                    </Text>
-                </TextContent>
-            </ExpandableSection>
-        </Modal>
-    );
+  return (
+    <Modal
+      className={"Error-Modal"}
+      variant={ModalVariant.small}
+      title={t("Error")}
+      description={caption}
+      titleIconVariant="danger"
+      isOpen={hasError.inError}
+      onClose={close}
+      actions={[
+        <Button key="confirm" variant="secondary" onClick={close}>
+          {t("Close")}
+        </Button>,
+      ]}
+    >
+      <ExpandableSection
+        toggleText={t("ErrorDetails")}
+        className={"Error-Modal__container"}
+      >
+        <TextContent>
+          <Text component={"pre"} className={"Error-Model__detail"}>
+            {_error}
+          </Text>
+          <Text component={"pre"} className={"Error-Model__detail"}>
+            {_detail}
+          </Text>
+        </TextContent>
+      </ExpandableSection>
+    </Modal>
+  );
 };
diff --git a/ansible_wisdom_console_react/src/ModelSettings.tsx b/ansible_wisdom_console_react/src/ModelSettings.tsx
index 6a9f69651..37afb1501 100644
--- a/ansible_wisdom_console_react/src/ModelSettings.tsx
+++ b/ansible_wisdom_console_react/src/ModelSettings.tsx
@@ -1,70 +1,72 @@
-import React, {useEffect, useState} from 'react';
-import {Page} from "@patternfly/react-core";
-import './ModelSettings.css';
-import {ModelSettingsKey} from "./ModelSettingsKey";
-import {ModelSettingsModelId} from "./ModelSettingsModelId";
-import {ModelSettingsOverview} from "./ModelSettingsOverview";
-import {useWcaKey} from "./hooks/useWcaKeyAPI";
-import {WcaKey, WcaModelId} from "./api/types";
-import {useWcaModelId} from "./hooks/useWcaModelIdAPI";
+import React, { useEffect, useState } from "react";
+import { Page } from "@patternfly/react-core";
+import "./ModelSettings.css";
+import { ModelSettingsKey } from "./ModelSettingsKey";
+import { ModelSettingsModelId } from "./ModelSettingsModelId";
+import { ModelSettingsOverview } from "./ModelSettingsOverview";
+import { useWcaKey } from "./hooks/useWcaKeyAPI";
+import { WcaKey, WcaModelId } from "./api/types";
+import { useWcaModelId } from "./hooks/useWcaModelIdAPI";
 
-export type Mode = 'OVERVIEW' | 'SET_WCA_KEY' | 'SET_MODEL_ID';
+export type Mode = "OVERVIEW" | "SET_WCA_KEY" | "SET_MODEL_ID";
 
 export function ModelSettings() {
-    const [mode, setMode] = useState<Mode>('OVERVIEW');
-    const [reloadWcaKey, setReloadWcaKey] = useState<boolean>(true);
-    const [reloadWcaModelId, setReloadWcaModelId] = useState<boolean>(true);
-    const [wcaKey, setWcaKey] = useState<WcaKey>({status: "NOT_ASKED"});
-    const [wcaModelId, setWcaModelId] = useState<WcaModelId>({status: "NOT_ASKED"});
-    const _wcaKey = useWcaKey(reloadWcaKey);
-    const _wcaModelId = useWcaModelId(reloadWcaModelId);
+  const [mode, setMode] = useState<Mode>("OVERVIEW");
+  const [reloadWcaKey, setReloadWcaKey] = useState<boolean>(true);
+  const [reloadWcaModelId, setReloadWcaModelId] = useState<boolean>(true);
+  const [wcaKey, setWcaKey] = useState<WcaKey>({ status: "NOT_ASKED" });
+  const [wcaModelId, setWcaModelId] = useState<WcaModelId>({
+    status: "NOT_ASKED",
+  });
+  const _wcaKey = useWcaKey(reloadWcaKey);
+  const _wcaModelId = useWcaModelId(reloadWcaModelId);
 
-    useEffect(() => {
-        setWcaKey(_wcaKey);
-    }, [_wcaKey]);
+  useEffect(() => {
+    setWcaKey(_wcaKey);
+  }, [_wcaKey]);
 
-    useEffect(() => {
-        setWcaModelId(_wcaModelId);
-    }, [_wcaModelId]);
+  useEffect(() => {
+    setWcaModelId(_wcaModelId);
+  }, [_wcaModelId]);
 
-    return (
-        <Page>
-            {mode === 'OVERVIEW' && (
-                <ModelSettingsOverview
-                    wcaKey={wcaKey}
-                    wcaModelId={wcaModelId}
-                    setModeToKey={() => {
-                        setReloadWcaKey(false);
-                        setMode('SET_WCA_KEY');
-                    }}
-                    setModeToModelId={() => {
-                        setReloadWcaModelId(false);
-                        setMode('SET_MODEL_ID');
-                    }}
-                />
-            )}
-            {mode === 'SET_WCA_KEY' && (
-                <ModelSettingsKey
-                    wcaKey={wcaKey}
-                    cancel={() => setMode('OVERVIEW')}
-                    reload={() => {
-                        setWcaKey({status: "NOT_ASKED"});
-                        setReloadWcaKey(true);
-                        setMode('OVERVIEW');
-                    }}
-                />
-            )}
-            {mode === 'SET_MODEL_ID' && (
-                <ModelSettingsModelId
-                    wcaModelId={wcaModelId}
-                    cancel={() => setMode('OVERVIEW')}
-                    reload={() => {
-                        setWcaModelId({status: "NOT_ASKED"});
-                        setReloadWcaModelId(true);
-                        setMode('OVERVIEW');
-                    }}
-                />
-            )}
-        </Page>
-    )
+  return (
+    <Page>
+      {mode === "OVERVIEW" && (
+        <ModelSettingsOverview
+          wcaKey={wcaKey}
+          wcaModelId={wcaModelId}
+          setModeToKey={() => {
+            setReloadWcaKey(false);
+            setMode("SET_WCA_KEY");
+          }}
+          setModeToModelId={() => {
+            setReloadWcaModelId(false);
+            setMode("SET_MODEL_ID");
+          }}
+        />
+      )}
+      {mode === "SET_WCA_KEY" && (
+        <ModelSettingsKey
+          wcaKey={wcaKey}
+          cancel={() => setMode("OVERVIEW")}
+          reload={() => {
+            setWcaKey({ status: "NOT_ASKED" });
+            setReloadWcaKey(true);
+            setMode("OVERVIEW");
+          }}
+        />
+      )}
+      {mode === "SET_MODEL_ID" && (
+        <ModelSettingsModelId
+          wcaModelId={wcaModelId}
+          cancel={() => setMode("OVERVIEW")}
+          reload={() => {
+            setWcaModelId({ status: "NOT_ASKED" });
+            setReloadWcaModelId(true);
+            setMode("OVERVIEW");
+          }}
+        />
+      )}
+    </Page>
+  );
 }
diff --git a/ansible_wisdom_console_react/src/ModelSettingsEditor.tsx b/ansible_wisdom_console_react/src/ModelSettingsEditor.tsx
index 892b67c30..899cb037a 100644
--- a/ansible_wisdom_console_react/src/ModelSettingsEditor.tsx
+++ b/ansible_wisdom_console_react/src/ModelSettingsEditor.tsx
@@ -1,187 +1,194 @@
-import React, {useMemo, useState} from 'react';
+import React, { useMemo, useState } from "react";
 import {
-    Alert,
-    Breadcrumb,
-    BreadcrumbItem,
-    Button,
-    Icon,
-    PageSection,
-    PageSectionVariants,
-    Panel,
-    PanelMain,
-    PanelMainBody,
-    Split,
-    SplitItem,
-    Stack,
-    StackItem,
-    Text,
-    TextContent,
-    Tooltip
+  Alert,
+  Breadcrumb,
+  BreadcrumbItem,
+  Button,
+  Icon,
+  PageSection,
+  PageSectionVariants,
+  Panel,
+  PanelMain,
+  PanelMainBody,
+  Split,
+  SplitItem,
+  Stack,
+  StackItem,
+  Text,
+  TextContent,
+  Tooltip,
 } from "@patternfly/react-core";
-import {useTranslation} from "react-i18next";
-import {CheckCircleIcon, OutlinedQuestionCircleIcon} from "@patternfly/react-icons";
-import './ModelSettings.css';
-import {ErrorModal, HasError, NO_ERROR} from "./ErrorModal";
-import {BusyButton} from "./BusyButton";
-import {SingleInlineEdit} from "./SingleInlineEdit";
+import { useTranslation } from "react-i18next";
+import {
+  CheckCircleIcon,
+  OutlinedQuestionCircleIcon,
+} from "@patternfly/react-icons";
+import "./ModelSettings.css";
+import { ErrorModal, HasError, NO_ERROR } from "./ErrorModal";
+import { BusyButton } from "./BusyButton";
+import { SingleInlineEdit } from "./SingleInlineEdit";
 
 interface ModelSettingsEditorCaptionIds {
-
-    readonly errorModalCaption: string;
-    readonly invalidAlertCaption: string;
-    readonly setValueTitle: string;
-    readonly updateValueTitle: string;
-    readonly fieldCaption: string;
-    readonly fieldCaptionTooltip: string;
-    readonly fieldInputCaption: string;
-    readonly fieldInputPlaceholder: string;
-
+  readonly errorModalCaption: string;
+  readonly invalidAlertCaption: string;
+  readonly setValueTitle: string;
+  readonly updateValueTitle: string;
+  readonly fieldCaption: string;
+  readonly fieldCaptionTooltip: string;
+  readonly fieldInputCaption: string;
+  readonly fieldInputPlaceholder: string;
 }
 
 interface ModelSettingsEditorProps {
-
-    readonly hasValue: boolean;
-    readonly isSaving: boolean;
-    readonly isValueInvalid: boolean;
-    readonly isPassword: boolean;
-    readonly clearInvalidState: () => void;
-    readonly errorState: HasError;
-    readonly setErrorState: (state: HasError) => void;
-    readonly save: (value: string) => void;
-    readonly cancel: () => void;
-    readonly captions: ModelSettingsEditorCaptionIds;
+  readonly hasValue: boolean;
+  readonly isSaving: boolean;
+  readonly isValueInvalid: boolean;
+  readonly isPassword: boolean;
+  readonly clearInvalidState: () => void;
+  readonly errorState: HasError;
+  readonly setErrorState: (state: HasError) => void;
+  readonly save: (value: string) => void;
+  readonly cancel: () => void;
+  readonly captions: ModelSettingsEditorCaptionIds;
 }
 
 export const ModelSettingsEditor = (props: ModelSettingsEditorProps) => {
-    const {t} = useTranslation();
-    const {
-        hasValue,
-        isSaving,
-        isValueInvalid,
-        clearInvalidState,
-        errorState,
-        setErrorState,
-        save,
-        cancel,
-        captions,
-        isPassword
-    } = props;
+  const { t } = useTranslation();
+  const {
+    hasValue,
+    isSaving,
+    isValueInvalid,
+    clearInvalidState,
+    errorState,
+    setErrorState,
+    save,
+    cancel,
+    captions,
+    isPassword,
+  } = props;
 
-    const {
-        errorModalCaption,
-        invalidAlertCaption,
-        setValueTitle,
-        updateValueTitle,
-        fieldCaption,
-        fieldCaptionTooltip,
-        fieldInputCaption,
-        fieldInputPlaceholder
-    } = captions;
+  const {
+    errorModalCaption,
+    invalidAlertCaption,
+    setValueTitle,
+    updateValueTitle,
+    fieldCaption,
+    fieldCaptionTooltip,
+    fieldInputCaption,
+    fieldInputPlaceholder,
+  } = captions;
 
-    const [value, setValue] = useState<string>("");
-    const isSaveDisabled: boolean = useMemo(() => value?.trim().length === 0 || isSaving, [value, isSaving]);
+  const [value, setValue] = useState<string>("");
+  const isSaveDisabled: boolean = useMemo(
+    () => value?.trim().length === 0 || isSaving,
+    [value, isSaving],
+  );
 
-    return (
-        <>
-            <ErrorModal
-                caption={t(errorModalCaption)}
-                hasError={errorState}
-                close={() => setErrorState(NO_ERROR)}
-            />
-            <PageSection
-                variant={PageSectionVariants.light}
-                isWidthLimited
-                data-testid={"model-settings-editor__bread-crumbs"}
-            >
-                <Stack hasGutter={true}>
-                    <StackItem>
-                        <Breadcrumb>
-                            <BreadcrumbItem to="/console/admin/settings">{t("ModelSettings")}</BreadcrumbItem>
-                            <BreadcrumbItem isActive>{hasValue ? t(updateValueTitle) : t(setValueTitle)}</BreadcrumbItem>
-                        </Breadcrumb>
-                    </StackItem>
-                    <StackItem>
-                        <TextContent>
-                            {!hasValue && (
-                                <Text component="h1">{t(setValueTitle)}</Text>
-                            )}
-                            {hasValue && (
-                                <Text component="h1">{t(updateValueTitle)}</Text>
-                            )}
-                        </TextContent>
-                    </StackItem>
-                </Stack>
-            </PageSection>
-            <PageSection data-testid={"model-settings-editor__editor"}>
-                <Panel variant={"bordered"}>
-                    <PanelMain>
-                        <PanelMainBody>
-                            <Stack hasGutter={true}>
-                                {isValueInvalid && (
-                                    <StackItem>
-                                        <Alert
-                                            variant="warning"
-                                            title={t(invalidAlertCaption)}
-                                            data-testid={"model-settings-editor__alert-invalid"}
-                                        />
-                                    </StackItem>
-                                )}
-                                <StackItem>
-                                    <TextContent>
-                                        <Text component={"h3"}>
-                                            {t(fieldCaption)}
-                                            <Tooltip aria="none" aria-live="polite" content={t(fieldCaptionTooltip)}>
-                                                <Icon>
-                                                    <OutlinedQuestionCircleIcon className={"Info-icon"}/>
-                                                </Icon>
-                                            </Tooltip>
-                                        </Text>
-                                    </TextContent>
-                                </StackItem>
-                                <StackItem>
-                                    <SingleInlineEdit
-                                        value={value}
-                                        onChange={(value) => {
-                                            setValue(value);
-                                            clearInvalidState();
-                                        }}
-                                        aria-label={t(fieldInputCaption)}
-                                        placeholder={t(fieldInputPlaceholder)}
-                                        isDisabled={isSaving}
-                                        isPassword={isPassword}
-                                    />
-                                </StackItem>
-                                <StackItem>
-                                    <Split hasGutter={true}>
-                                        <SplitItem>
-                                            <BusyButton
-                                                variant={"primary"}
-                                                icon={<CheckCircleIcon/>}
-                                                onClick={() => save(value)}
-                                                isBusy={isSaving}
-                                                isDisabled={isSaveDisabled}
-                                                data-testid={"model-settings-editor__save-button"}
-                                            >
-                                                {t("Save")}
-                                            </BusyButton>
-                                        </SplitItem>
-                                        <SplitItem>
-                                            <Button
-                                                variant={"secondary"}
-                                                onClick={cancel}
-                                                isDisabled={isSaving}
-                                                data-testid={"model-settings-editor__cancel-button"}
-                                            >
-                                                {t("Cancel")}
-                                            </Button>
-                                        </SplitItem>
-                                    </Split>
-                                </StackItem>
-                            </Stack>
-                        </PanelMainBody>
-                    </PanelMain>
-                </Panel>
-            </PageSection>
-        </>
-    )
-}
+  return (
+    <>
+      <ErrorModal
+        caption={t(errorModalCaption)}
+        hasError={errorState}
+        close={() => setErrorState(NO_ERROR)}
+      />
+      <PageSection
+        variant={PageSectionVariants.light}
+        isWidthLimited
+        data-testid={"model-settings-editor__bread-crumbs"}
+      >
+        <Stack hasGutter={true}>
+          <StackItem>
+            <Breadcrumb>
+              <BreadcrumbItem to="/console/admin/settings">
+                {t("ModelSettings")}
+              </BreadcrumbItem>
+              <BreadcrumbItem isActive>
+                {hasValue ? t(updateValueTitle) : t(setValueTitle)}
+              </BreadcrumbItem>
+            </Breadcrumb>
+          </StackItem>
+          <StackItem>
+            <TextContent>
+              {!hasValue && <Text component="h1">{t(setValueTitle)}</Text>}
+              {hasValue && <Text component="h1">{t(updateValueTitle)}</Text>}
+            </TextContent>
+          </StackItem>
+        </Stack>
+      </PageSection>
+      <PageSection data-testid={"model-settings-editor__editor"}>
+        <Panel variant={"bordered"}>
+          <PanelMain>
+            <PanelMainBody>
+              <Stack hasGutter={true}>
+                {isValueInvalid && (
+                  <StackItem>
+                    <Alert
+                      variant="warning"
+                      title={t(invalidAlertCaption)}
+                      data-testid={"model-settings-editor__alert-invalid"}
+                    />
+                  </StackItem>
+                )}
+                <StackItem>
+                  <TextContent>
+                    <Text component={"h3"}>
+                      {t(fieldCaption)}
+                      <Tooltip
+                        aria="none"
+                        aria-live="polite"
+                        content={t(fieldCaptionTooltip)}
+                      >
+                        <Icon>
+                          <OutlinedQuestionCircleIcon className={"Info-icon"} />
+                        </Icon>
+                      </Tooltip>
+                    </Text>
+                  </TextContent>
+                </StackItem>
+                <StackItem>
+                  <SingleInlineEdit
+                    value={value}
+                    onChange={(value) => {
+                      setValue(value);
+                      clearInvalidState();
+                    }}
+                    aria-label={t(fieldInputCaption)}
+                    placeholder={t(fieldInputPlaceholder)}
+                    isDisabled={isSaving}
+                    isPassword={isPassword}
+                  />
+                </StackItem>
+                <StackItem>
+                  <Split hasGutter={true}>
+                    <SplitItem>
+                      <BusyButton
+                        variant={"primary"}
+                        icon={<CheckCircleIcon />}
+                        onClick={() => save(value)}
+                        isBusy={isSaving}
+                        isDisabled={isSaveDisabled}
+                        data-testid={"model-settings-editor__save-button"}
+                      >
+                        {t("Save")}
+                      </BusyButton>
+                    </SplitItem>
+                    <SplitItem>
+                      <Button
+                        variant={"secondary"}
+                        onClick={cancel}
+                        isDisabled={isSaving}
+                        data-testid={"model-settings-editor__cancel-button"}
+                      >
+                        {t("Cancel")}
+                      </Button>
+                    </SplitItem>
+                  </Split>
+                </StackItem>
+              </Stack>
+            </PanelMainBody>
+          </PanelMain>
+        </Panel>
+      </PageSection>
+    </>
+  );
+};
diff --git a/ansible_wisdom_console_react/src/ModelSettingsKey.tsx b/ansible_wisdom_console_react/src/ModelSettingsKey.tsx
index 4473dcb1e..8d095fa7b 100644
--- a/ansible_wisdom_console_react/src/ModelSettingsKey.tsx
+++ b/ansible_wisdom_console_react/src/ModelSettingsKey.tsx
@@ -1,73 +1,74 @@
-import React, {useCallback, useMemo, useState} from 'react';
-import './ModelSettings.css';
-import {WcaKey, WcaKeyRequest} from "./api/types";
-import {saveWcaKey} from "./api/api";
-import {HasError, NO_ERROR} from "./ErrorModal";
-import {DELAY} from "./api/globals";
-import {ModelSettingsEditor} from "./ModelSettingsEditor";
+import React, { useCallback, useMemo, useState } from "react";
+import "./ModelSettings.css";
+import { WcaKey, WcaKeyRequest } from "./api/types";
+import { saveWcaKey } from "./api/api";
+import { HasError, NO_ERROR } from "./ErrorModal";
+import { DELAY } from "./api/globals";
+import { ModelSettingsEditor } from "./ModelSettingsEditor";
 
 interface ModelSettingsKeyProps {
-    readonly wcaKey: WcaKey | undefined;
-    readonly cancel: () => void;
-    readonly reload: () => void;
+  readonly wcaKey: WcaKey | undefined;
+  readonly cancel: () => void;
+  readonly reload: () => void;
 }
 
 export const ModelSettingsKey = (props: ModelSettingsKeyProps) => {
-    const {wcaKey, cancel, reload} = props;
+  const { wcaKey, cancel, reload } = props;
 
-    const [saving, setSaving] = useState<boolean>(false);
-    const hasWcaKey = useMemo(() => wcaKey?.status === "SUCCESS", [wcaKey]);
+  const [saving, setSaving] = useState<boolean>(false);
+  const hasWcaKey = useMemo(() => wcaKey?.status === "SUCCESS", [wcaKey]);
 
-    const [isKeyInvalid, setIsKeyInvalid] = useState<boolean>(false);
-    const [keyError, setKeyError] = useState<HasError>(NO_ERROR);
+  const [isKeyInvalid, setIsKeyInvalid] = useState<boolean>(false);
+  const [keyError, setKeyError] = useState<HasError>(NO_ERROR);
 
-    const save = useCallback((value: string) => {
-        const timeoutId = setTimeout(() => setSaving(true), DELAY);
-        const wcaKey: WcaKeyRequest = {key: value};
-        saveWcaKey(wcaKey)
-            .then((_) => {
-                reload();
-            })
-            .catch((error) => {
-                if (error.response?.status === 400) {
-                    setIsKeyInvalid(true);
-                } else {
-                    setKeyError({
-                        inError: true,
-                        message: error.message,
-                        detail: error.response?.data?.detail
-                    });
-                }
-            })
-            .finally(() => {
-                setSaving(false);
-                clearTimeout(timeoutId);
+  const save = useCallback(
+    (value: string) => {
+      const timeoutId = setTimeout(() => setSaving(true), DELAY);
+      const wcaKey: WcaKeyRequest = { key: value };
+      saveWcaKey(wcaKey)
+        .then((_) => {
+          reload();
+        })
+        .catch((error) => {
+          if (error.response?.status === 400) {
+            setIsKeyInvalid(true);
+          } else {
+            setKeyError({
+              inError: true,
+              message: error.message,
+              detail: error.response?.data?.detail,
             });
-    }, [reload]);
+          }
+        })
+        .finally(() => {
+          setSaving(false);
+          clearTimeout(timeoutId);
+        });
+    },
+    [reload],
+  );
 
-    return (
-        <ModelSettingsEditor
-            hasValue={hasWcaKey}
-            isSaving={saving}
-            isValueInvalid={isKeyInvalid}
-            isPassword={true}
-            clearInvalidState={() => setIsKeyInvalid(false)}
-            errorState={keyError}
-            setErrorState={setKeyError}
-            save={save}
-            cancel={cancel}
-            captions={
-                {
-                    errorModalCaption: "KeyError",
-                    invalidAlertCaption: "KeyInvalidAlert",
-                    setValueTitle: "AddKeyTitle",
-                    updateValueTitle: "UpdateKeyTitle",
-                    fieldCaption: "APIKey",
-                    fieldCaptionTooltip: "APIKeyTooltip",
-                    fieldInputCaption: "AddKey",
-                    fieldInputPlaceholder: "PlaceholderKey"
-                }
-            }
-        />
-    )
-}
+  return (
+    <ModelSettingsEditor
+      hasValue={hasWcaKey}
+      isSaving={saving}
+      isValueInvalid={isKeyInvalid}
+      isPassword={true}
+      clearInvalidState={() => setIsKeyInvalid(false)}
+      errorState={keyError}
+      setErrorState={setKeyError}
+      save={save}
+      cancel={cancel}
+      captions={{
+        errorModalCaption: "KeyError",
+        invalidAlertCaption: "KeyInvalidAlert",
+        setValueTitle: "AddKeyTitle",
+        updateValueTitle: "UpdateKeyTitle",
+        fieldCaption: "APIKey",
+        fieldCaptionTooltip: "APIKeyTooltip",
+        fieldInputCaption: "AddKey",
+        fieldInputPlaceholder: "PlaceholderKey",
+      }}
+    />
+  );
+};
diff --git a/ansible_wisdom_console_react/src/ModelSettingsModelId.tsx b/ansible_wisdom_console_react/src/ModelSettingsModelId.tsx
index 541fb2a0b..dadd0cdb0 100644
--- a/ansible_wisdom_console_react/src/ModelSettingsModelId.tsx
+++ b/ansible_wisdom_console_react/src/ModelSettingsModelId.tsx
@@ -1,73 +1,77 @@
-import React, {useCallback, useMemo, useState} from 'react';
-import './ModelSettings.css';
-import {WcaModelId, WcaModelIdRequest} from "./api/types";
-import {saveWcaModelId} from "./api/api";
-import {HasError, NO_ERROR} from "./ErrorModal";
-import {DELAY} from "./api/globals";
-import {ModelSettingsEditor} from "./ModelSettingsEditor";
+import React, { useCallback, useMemo, useState } from "react";
+import "./ModelSettings.css";
+import { WcaModelId, WcaModelIdRequest } from "./api/types";
+import { saveWcaModelId } from "./api/api";
+import { HasError, NO_ERROR } from "./ErrorModal";
+import { DELAY } from "./api/globals";
+import { ModelSettingsEditor } from "./ModelSettingsEditor";
 
 interface ModelSettingsModelIdProps {
-    readonly wcaModelId: WcaModelId;
-    readonly cancel: () => void;
-    readonly reload: () => void;
+  readonly wcaModelId: WcaModelId;
+  readonly cancel: () => void;
+  readonly reload: () => void;
 }
 
 export const ModelSettingsModelId = (props: ModelSettingsModelIdProps) => {
-    const {wcaModelId, cancel, reload} = props;
+  const { wcaModelId, cancel, reload } = props;
 
-    const [saving, setSaving] = useState(false);
-    const hasWcaModelId = useMemo(() => wcaModelId?.status === "SUCCESS", [wcaModelId]);
+  const [saving, setSaving] = useState(false);
+  const hasWcaModelId = useMemo(
+    () => wcaModelId?.status === "SUCCESS",
+    [wcaModelId],
+  );
 
-    const [isModelIdInvalid, setIsModelIdInvalid] = useState<boolean>(false);
-    const [modelIdError, setModelIdError] = useState<HasError>(NO_ERROR);
+  const [isModelIdInvalid, setIsModelIdInvalid] = useState<boolean>(false);
+  const [modelIdError, setModelIdError] = useState<HasError>(NO_ERROR);
 
-    const save = useCallback((value: string) => {
-        const timeoutId = setTimeout(() => setSaving(true), DELAY);
-        const wcaModelId: WcaModelIdRequest = {model_id: value};
-        saveWcaModelId(wcaModelId)
-            .then((_) => {
-                reload();
-            })
-            .catch((error) => {
-                if (error.response?.status === 400) {
-                    setIsModelIdInvalid(true);
-                } else {
-                    setModelIdError({
-                        inError: true,
-                        message: error.message,
-                        detail: error.response?.data?.detail
-                    });
-                }
-            })
-            .finally(() => {
-                setSaving(false);
-                clearTimeout(timeoutId);
+  const save = useCallback(
+    (value: string) => {
+      const timeoutId = setTimeout(() => setSaving(true), DELAY);
+      const wcaModelId: WcaModelIdRequest = { model_id: value };
+      saveWcaModelId(wcaModelId)
+        .then((_) => {
+          reload();
+        })
+        .catch((error) => {
+          if (error.response?.status === 400) {
+            setIsModelIdInvalid(true);
+          } else {
+            setModelIdError({
+              inError: true,
+              message: error.message,
+              detail: error.response?.data?.detail,
             });
-    }, [reload]);
+          }
+        })
+        .finally(() => {
+          setSaving(false);
+          clearTimeout(timeoutId);
+        });
+    },
+    [reload],
+  );
 
-    return (
-        <ModelSettingsEditor
-            hasValue={hasWcaModelId}
-            isSaving={saving}
-            isValueInvalid={isModelIdInvalid}
-            isPassword={false}
-            clearInvalidState={() => setIsModelIdInvalid(false)}
-            errorState={modelIdError}
-            setErrorState={setModelIdError}
-            save={save}
-            cancel={cancel}
-            captions={
-                {
-                    errorModalCaption: "ModelIdError",
-                    invalidAlertCaption: "ModelIdInvalidAlert",
-                    setValueTitle: "AddModelIdTitle",
-                    updateValueTitle: "UpdateModelIdTitle",
-                    fieldCaption: "ModelId",
-                    fieldCaptionTooltip: "ModelIdTooltip",
-                    fieldInputCaption: "AddModelId",
-                    fieldInputPlaceholder: "PlaceholderModelId"
-                }
-            }
-        />
-    );
-}
+  return (
+    <ModelSettingsEditor
+      hasValue={hasWcaModelId}
+      isSaving={saving}
+      isValueInvalid={isModelIdInvalid}
+      isPassword={false}
+      clearInvalidState={() => setIsModelIdInvalid(false)}
+      errorState={modelIdError}
+      setErrorState={setModelIdError}
+      save={save}
+      cancel={cancel}
+      captions={{
+        errorModalCaption: "ModelIdError",
+        invalidAlertCaption: "ModelIdInvalidAlert",
+        setValueTitle: "AddModelIdTitle",
+        updateValueTitle: "UpdateModelIdTitle",
+        fieldCaption: "ModelId",
+        fieldCaptionTooltip: "ModelIdTooltip",
+        fieldInputCaption: "AddModelId",
+        fieldInputPlaceholder: "PlaceholderModelId",
+      }}
+    />
+  );
+};
diff --git a/ansible_wisdom_console_react/src/ModelSettingsOverview.tsx b/ansible_wisdom_console_react/src/ModelSettingsOverview.tsx
index 472313df1..90621de07 100644
--- a/ansible_wisdom_console_react/src/ModelSettingsOverview.tsx
+++ b/ansible_wisdom_console_react/src/ModelSettingsOverview.tsx
@@ -1,347 +1,449 @@
-import React, {useCallback, useMemo, useRef, useState} from 'react';
-import {Alert, Button, Icon, PageSection, PageSectionVariants, Panel, PanelMain, PanelMainBody, Skeleton, Split, SplitItem, Stack, StackItem, Text, TextContent, Tooltip} from "@patternfly/react-core";
-import {useTranslation} from "react-i18next";
-import {CheckCircleIcon, OutlinedQuestionCircleIcon, PlusCircleIcon} from "@patternfly/react-icons";
-import './ModelSettings.css';
-import {APIException, Success, WcaKey, WcaKeyResponse, WcaModelId, WcaModelIdResponse} from "./api/types";
-import {DELAY} from "./api/globals";
-import {testWcaKey, testWcaModelId} from "./api/api";
-import {ErrorModal, HasError, NO_ERROR} from "./ErrorModal";
-import {Alerts, AlertsHandle} from "./Alerts";
-import {BusyButton} from "./BusyButton";
-import {AxiosError} from "axios"
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import {
+  Alert,
+  Button,
+  Icon,
+  PageSection,
+  PageSectionVariants,
+  Panel,
+  PanelMain,
+  PanelMainBody,
+  Skeleton,
+  Split,
+  SplitItem,
+  Stack,
+  StackItem,
+  Text,
+  TextContent,
+  Tooltip,
+} from "@patternfly/react-core";
+import { useTranslation } from "react-i18next";
+import {
+  CheckCircleIcon,
+  OutlinedQuestionCircleIcon,
+  PlusCircleIcon,
+} from "@patternfly/react-icons";
+import "./ModelSettings.css";
+import {
+  APIException,
+  Success,
+  WcaKey,
+  WcaKeyResponse,
+  WcaModelId,
+  WcaModelIdResponse,
+} from "./api/types";
+import { DELAY } from "./api/globals";
+import { testWcaKey, testWcaModelId } from "./api/api";
+import { ErrorModal, HasError, NO_ERROR } from "./ErrorModal";
+import { Alerts, AlertsHandle } from "./Alerts";
+import { BusyButton } from "./BusyButton";
+import { AxiosError } from "axios";
 
 interface ModelSettingsOverviewProps {
-    readonly wcaKey: WcaKey;
-    readonly wcaModelId: WcaModelId;
-    readonly setModeToKey: () => void
-    readonly setModeToModelId: () => void
+  readonly wcaKey: WcaKey;
+  readonly wcaModelId: WcaModelId;
+  readonly setModeToKey: () => void;
+  readonly setModeToModelId: () => void;
 }
 
 export const ModelSettingsOverview = (props: ModelSettingsOverviewProps) => {
-    const {t} = useTranslation();
-    const {wcaKey, wcaModelId, setModeToKey, setModeToModelId} = props;
+  const { t } = useTranslation();
+  const { wcaKey, wcaModelId, setModeToKey, setModeToModelId } = props;
 
-    const isWcaKeyLoading: boolean = useMemo(() => wcaKey.status === "NOT_ASKED" || wcaKey.status === "LOADING", [wcaKey]);
-    const isWcaKeyNotFound: boolean = useMemo(() => wcaKey.status === "SUCCESS_NOT_FOUND", [wcaKey]);
-    const isWcaKeyFound: boolean = useMemo(() => wcaKey.status === "SUCCESS", [wcaKey]);
+  const isWcaKeyLoading: boolean = useMemo(
+    () => wcaKey.status === "NOT_ASKED" || wcaKey.status === "LOADING",
+    [wcaKey],
+  );
+  const isWcaKeyNotFound: boolean = useMemo(
+    () => wcaKey.status === "SUCCESS_NOT_FOUND",
+    [wcaKey],
+  );
+  const isWcaKeyFound: boolean = useMemo(
+    () => wcaKey.status === "SUCCESS",
+    [wcaKey],
+  );
 
-    const isWcaModelIdLoading: boolean = useMemo(() => wcaModelId.status === "NOT_ASKED" || wcaModelId.status === "LOADING", [wcaModelId]);
-    const isWcaModelIdNotFound: boolean = useMemo(() => wcaModelId.status === "SUCCESS_NOT_FOUND", [wcaModelId]);
-    const isWcaModelIdFound: boolean = useMemo(() => wcaModelId.status === "SUCCESS", [wcaModelId]);
+  const isWcaModelIdLoading: boolean = useMemo(
+    () => wcaModelId.status === "NOT_ASKED" || wcaModelId.status === "LOADING",
+    [wcaModelId],
+  );
+  const isWcaModelIdNotFound: boolean = useMemo(
+    () => wcaModelId.status === "SUCCESS_NOT_FOUND",
+    [wcaModelId],
+  );
+  const isWcaModelIdFound: boolean = useMemo(
+    () => wcaModelId.status === "SUCCESS",
+    [wcaModelId],
+  );
 
-    const [isValidatingKey, setIsValidatingKey] = useState<boolean>(false);
-    const [isKeyInvalid, setIsKeyInvalid] = useState<boolean>(false);
-    const [keyError, setKeyError] = useState<HasError>(NO_ERROR);
+  const [isValidatingKey, setIsValidatingKey] = useState<boolean>(false);
+  const [isKeyInvalid, setIsKeyInvalid] = useState<boolean>(false);
+  const [keyError, setKeyError] = useState<HasError>(NO_ERROR);
 
-    const [isValidatingModelId, setIsValidatingModelId] = useState<boolean>(false);
-    const [isModelIdInvalid, setIsModelIdInvalid] = useState<boolean>(false);
-    const [modelIdError, setModelIdError] = useState<HasError>(NO_ERROR);
+  const [isValidatingModelId, setIsValidatingModelId] =
+    useState<boolean>(false);
+  const [isModelIdInvalid, setIsModelIdInvalid] = useState<boolean>(false);
+  const [modelIdError, setModelIdError] = useState<HasError>(NO_ERROR);
 
-    const alertsRef = useRef<AlertsHandle>(null);
+  const alertsRef = useRef<AlertsHandle>(null);
 
-    const testKey = useCallback(() => {
-        const timeoutId = setTimeout(() => setIsValidatingKey(true), DELAY);
-        testWcaKey()
-            .then((_) => {
-                alertsRef.current?.addAlert(t("KeyValidationSuccess"));
-            })
-            .catch((error) => {
-                if (error.response?.status === 400) {
-                    setIsKeyInvalid(true);
-                } else {
-                    setKeyError({
-                        inError: true,
-                        message: error.message,
-                        detail: error.response?.data?.detail
-                    });
-                }
-            })
-            .finally(() => {
-                setIsValidatingKey(false);
-                clearTimeout(timeoutId);
-            });
-    }, [t]);
+  const testKey = useCallback(() => {
+    const timeoutId = setTimeout(() => setIsValidatingKey(true), DELAY);
+    testWcaKey()
+      .then((_) => {
+        alertsRef.current?.addAlert(t("KeyValidationSuccess"));
+      })
+      .catch((error) => {
+        if (error.response?.status === 400) {
+          setIsKeyInvalid(true);
+        } else {
+          setKeyError({
+            inError: true,
+            message: error.message,
+            detail: error.response?.data?.detail,
+          });
+        }
+      })
+      .finally(() => {
+        setIsValidatingKey(false);
+        clearTimeout(timeoutId);
+      });
+  }, [t]);
 
-    const testModelId = useCallback(() => {
-        const timeoutId = setTimeout(() => setIsValidatingModelId(true), DELAY);
-        testWcaModelId()
-            .then((_) => {
-                alertsRef.current?.addAlert(t("ModelIdValidationSuccess"));
-            })
-            .catch((error: AxiosError<APIException, any>) => {
-                if (error.response?.status === 400) {
-                    setIsModelIdInvalid(true);
-                } else if (error.response?.status === 403
-                    && error.response?.data?.code === "permission_denied__user_trial_expired") {
-                    setModelIdError({
-                        inError: true,
-                        message: t("ModelIdValidationTrialExpired"),
-                        detail: error.response?.data?.detail ?? ""
-                    });
-                } else {
-                    setModelIdError({
-                        inError: true,
-                        message: error.message,
-                        detail: error.response?.data?.detail ?? ""
-                    });
-                }
-            })
-            .finally(() => {
-                setIsValidatingModelId(false);
-                clearTimeout(timeoutId);
-            });
-    }, [t]);
+  const testModelId = useCallback(() => {
+    const timeoutId = setTimeout(() => setIsValidatingModelId(true), DELAY);
+    testWcaModelId()
+      .then((_) => {
+        alertsRef.current?.addAlert(t("ModelIdValidationSuccess"));
+      })
+      .catch((error: AxiosError<APIException, any>) => {
+        if (error.response?.status === 400) {
+          setIsModelIdInvalid(true);
+        } else if (
+          error.response?.status === 403 &&
+          error.response?.data?.code === "permission_denied__user_trial_expired"
+        ) {
+          setModelIdError({
+            inError: true,
+            message: t("ModelIdValidationTrialExpired"),
+            detail: error.response?.data?.detail ?? "",
+          });
+        } else {
+          setModelIdError({
+            inError: true,
+            message: error.message,
+            detail: error.response?.data?.detail ?? "",
+          });
+        }
+      })
+      .finally(() => {
+        setIsValidatingModelId(false);
+        clearTimeout(timeoutId);
+      });
+  }, [t]);
 
-    return (
-        <>
-            <ErrorModal
-                caption={t("KeyValidationError")}
-                hasError={keyError}
-                close={() => setKeyError(NO_ERROR)}
-            />
-            <ErrorModal
-                caption={t("ModelIdValidationError")}
-                hasError={modelIdError}
-                close={() => setModelIdError(NO_ERROR)}
-            />
-            <PageSection variant={PageSectionVariants.light} isWidthLimited>
-                <Alerts ref={alertsRef}/>
-                <TextContent>
-                    <Text component="h1">{t("ModelSettings")}</Text>
-                </TextContent>
-            </PageSection>
-            <PageSection data-testid={"model-settings-overview"}>
-                <Panel variant={"bordered"}>
-                    <PanelMain>
-                        <PanelMainBody>
-                            <Stack hasGutter={true}>
-                                {isKeyInvalid && (
-                                    <StackItem>
-                                        <Alert
-                                            variant="warning"
-                                            title={t("KeyInvalidAlert")}
-                                            data-testid={"model-settings-overview__alert-key-invalid"}
-                                        />
-                                    </StackItem>
-                                )}
-                                <StackItem>
-                                    <TextContent>
-                                        <Text component={"h3"}>
-                                            {t("APIKey")}
-                                            <Tooltip aria="none" aria-live="polite" content={t("APIKeyTooltip")}>
-                                                <Icon>
-                                                    <OutlinedQuestionCircleIcon className={"Info-icon"}/>
-                                                </Icon>
-                                            </Tooltip>
-                                        </Text>
-                                        <Text component={"p"}>{t("APIKeyDescription")}</Text>
-                                    </TextContent>
-                                </StackItem>
-                                <StackItem>
-                                    {isWcaKeyLoading && (
-                                        <div className={"Loading"} data-testid={"model-settings-overview__key-loading"}>
-                                            <Skeleton height="100%" screenreaderText={t("Loading")}/>
-                                        </div>
-                                    )}
-                                    {isWcaKeyNotFound && (
-                                        <TextContent data-testid={"model-settings-overview__key-not-found"}>
-                                            <Text component={"p"}>{t("NoAPIKey")}</Text>
-                                        </TextContent>
-                                    )}
-                                    {isWcaKeyFound && (
-                                        <>
-                                            <TextContent data-testid={"model-settings-overview__key"}>
-                                                <Text component={"h3"}>{t("APIKey")}</Text>
-                                            </TextContent>
-                                            <Split>
-                                                <SplitItem isFilled={true}>
-                                                    <TextContent>
-                                                        <Text component={"p"} className={"Secret-value"}>{t("SecretValue")}</Text>
-                                                    </TextContent>
-                                                </SplitItem>
-                                                <SplitItem>
-                                                    <BusyButton
-                                                        variant={"tertiary"}
-                                                        isSmall={true}
-                                                        isBusy={isValidatingKey}
-                                                        isDisabled={isValidatingKey}
-                                                        onClick={testKey}
-                                                        data-testid={"model-settings-overview__key-test-button"}
-                                                    >
-                                                        {t("Test")}
-                                                    </BusyButton>
-                                                </SplitItem>
-                                            </Split>
-                                        </>
-                                    )}
-                                </StackItem>
-                                <StackItem>
-                                    {isWcaKeyNotFound && (
-                                        <Button
-                                            variant={"primary"}
-                                            icon={<PlusCircleIcon/>}
-                                            onClick={setModeToKey}
-                                            data-testid={"model-settings-overview__add-key-button"}
-                                        >
-                                            {t("AddAPIKey")}
-                                        </Button>
-                                    )}
-                                    {isWcaKeyFound && (
-                                        <Button
-                                            variant={"primary"}
-                                            icon={<CheckCircleIcon/>}
-                                            isDisabled={isValidatingKey}
-                                            onClick={setModeToKey}
-                                            data-testid={"model-settings-overview__update-key-button"}
-                                        >
-                                            {t("UpdateAPIKey")}
-                                        </Button>
-                                    )}
-                                </StackItem>
-                                {isWcaKeyFound && (
-                                    <>
-                                        <StackItem>
-                                            <TextContent>
-                                                <Text component={"h3"}>{t("LastUpdated")}</Text>
-                                            </TextContent>
-                                        </StackItem>
-                                        <StackItem>
-                                            <TextContent>
-                                                {/*This is a safe cast as 'isWcaKeyFound' is true*/}
-                                                <Text component={"p"}>{(wcaKey as Success<WcaKeyResponse>).data.lastUpdate.toLocaleString()}</Text>
-                                            </TextContent>
-                                        </StackItem>
-                                    </>
-                                )}
-                            </Stack>
-                        </PanelMainBody>
-                    </PanelMain>
-                </Panel>
-            </PageSection>
-            <PageSection>
-                <Panel variant={"bordered"}>
-                    <PanelMain>
-                        <PanelMainBody>
-                            <Stack hasGutter={true}>
-                                {isModelIdInvalid && (
-                                    <StackItem>
-                                        <Alert
-                                            variant="warning"
-                                            title={t("ModelIdInvalidAlert")}
-                                            data-testid={"model-settings-overview__alert-model-id-invalid"}
-                                        />
-                                    </StackItem>
-                                )}
-                                {isWcaModelIdNotFound && !isWcaKeyFound && !isWcaKeyLoading && !isWcaModelIdLoading && (
-                                    <Alert
-                                        variant="info"
-                                        title={t("NoModelIdNoAPIKey")}
-                                        data-testid={"model-settings-overview__model-id-set-api-key-first"}
-                                    />
-                                )}
-                                <StackItem>
-                                    <TextContent>
-                                        <Text component={"h3"}>
-                                            {t("ModelId")}
-                                            <Tooltip aria="none" aria-live="polite" content={t("ModelIdTooltip")}>
-                                                <Icon>
-                                                    <OutlinedQuestionCircleIcon className={"Info-icon"}/>
-                                                </Icon>
-                                            </Tooltip>
-                                        </Text>
-                                        <Text component={"p"}>{t("ModelIdDescription")}</Text>
-                                    </TextContent>
-                                </StackItem>
-                                <StackItem>
-                                    <StackItem>
-                                        {(isWcaKeyLoading || isWcaModelIdLoading) && (
-                                            <div className={"Loading"} data-testid={"model-settings-overview__model-id-loading"}>
-                                                <Skeleton height="100%" screenreaderText={t("Loading")}/>
-                                            </div>
-                                        )}
-                                        {isWcaModelIdNotFound && !isWcaKeyLoading && (
-                                            <TextContent data-testid={"model-settings-overview__model-id-not-found"}>
-                                                <Text component={"p"}>{t("NoModelId")}</Text>
-                                            </TextContent>
-                                        )}
-                                        {isWcaModelIdFound && !isWcaKeyLoading && (
-                                            <>
-                                                <TextContent data-testid={"model-settings-overview__model-id"}>
-                                                    <Text component={"h3"}>{t("ModelId")}</Text>
-                                                </TextContent>
-                                                <Split>
-                                                    <SplitItem isFilled={true}>
-                                                        <TextContent>
-                                                            {/*This is a safe cast as 'isWcaModelIdFound' is true*/}
-                                                            <Text
-                                                                component={"p"}
-                                                                className={"Secret-value"}>
-                                                                {(wcaModelId as Success<WcaModelIdResponse>).data.model_id}
-                                                            </Text>
-                                                        </TextContent>
-                                                    </SplitItem>
-                                                    <SplitItem>
-                                                        <BusyButton
-                                                            variant={"tertiary"}
-                                                            isSmall={true}
-                                                            isBusy={isValidatingModelId}
-                                                            isDisabled={isValidatingModelId}
-                                                            onClick={testModelId}
-                                                            data-testid={"model-settings-overview__model-id-test-button"}
-                                                        >
-                                                            {t("Test")}
-                                                        </BusyButton>
-                                                    </SplitItem>
-                                                </Split>
-                                            </>
-                                        )}
-                                    </StackItem>
-                                </StackItem>
-                                <StackItem>
-                                    {isWcaModelIdNotFound && !isWcaKeyLoading && (
-                                        <Button
-                                            variant={"primary"}
-                                            icon={<PlusCircleIcon/>}
-                                            onClick={setModeToModelId}
-                                            isDisabled={!isWcaKeyFound}
-                                            data-testid={"model-settings-overview__add-model-id-button"}
-                                        >
-                                            {t("AddModelId")}
-                                        </Button>
-                                    )}
-                                    {isWcaModelIdFound && !isWcaKeyLoading && (
-                                        <Button
-                                            variant={"primary"}
-                                            icon={<CheckCircleIcon/>}
-                                            isDisabled={isValidatingModelId}
-                                            onClick={setModeToModelId}
-                                            data-testid={"model-settings-overview__update-model-id-button"}
-                                        >
-                                            {t("UpdateModelId")}
-                                        </Button>
-                                    )}
-                                </StackItem>
-                                {isWcaModelIdFound && (
-                                    <>
-                                        <StackItem>
-                                            <TextContent>
-                                                <Text component={"h3"}>{t("LastUpdated")}</Text>
-                                            </TextContent>
-                                        </StackItem>
-                                        <StackItem>
-                                            <TextContent>
-                                                {/*This is a safe cast as 'isWcaModelIdFound' is true*/}
-                                                <Text component={"p"}>{(wcaModelId as Success<WcaModelIdResponse>).data.lastUpdate.toLocaleString()}</Text>
-                                            </TextContent>
-                                        </StackItem>
-                                    </>
-                                )}
-                            </Stack>
-                        </PanelMainBody>
-                    </PanelMain>
-                </Panel>
-            </PageSection>
-        </>
-    )
-}
+  return (
+    <>
+      <ErrorModal
+        caption={t("KeyValidationError")}
+        hasError={keyError}
+        close={() => setKeyError(NO_ERROR)}
+      />
+      <ErrorModal
+        caption={t("ModelIdValidationError")}
+        hasError={modelIdError}
+        close={() => setModelIdError(NO_ERROR)}
+      />
+      <PageSection variant={PageSectionVariants.light} isWidthLimited>
+        <Alerts ref={alertsRef} />
+        <TextContent>
+          <Text component="h1">{t("ModelSettings")}</Text>
+        </TextContent>
+      </PageSection>
+      <PageSection data-testid={"model-settings-overview"}>
+        <Panel variant={"bordered"}>
+          <PanelMain>
+            <PanelMainBody>
+              <Stack hasGutter={true}>
+                {isKeyInvalid && (
+                  <StackItem>
+                    <Alert
+                      variant="warning"
+                      title={t("KeyInvalidAlert")}
+                      data-testid={"model-settings-overview__alert-key-invalid"}
+                    />
+                  </StackItem>
+                )}
+                <StackItem>
+                  <TextContent>
+                    <Text component={"h3"}>
+                      {t("APIKey")}
+                      <Tooltip
+                        aria="none"
+                        aria-live="polite"
+                        content={t("APIKeyTooltip")}
+                      >
+                        <Icon>
+                          <OutlinedQuestionCircleIcon className={"Info-icon"} />
+                        </Icon>
+                      </Tooltip>
+                    </Text>
+                    <Text component={"p"}>{t("APIKeyDescription")}</Text>
+                  </TextContent>
+                </StackItem>
+                <StackItem>
+                  {isWcaKeyLoading && (
+                    <div
+                      className={"Loading"}
+                      data-testid={"model-settings-overview__key-loading"}
+                    >
+                      <Skeleton height="100%" screenreaderText={t("Loading")} />
+                    </div>
+                  )}
+                  {isWcaKeyNotFound && (
+                    <TextContent
+                      data-testid={"model-settings-overview__key-not-found"}
+                    >
+                      <Text component={"p"}>{t("NoAPIKey")}</Text>
+                    </TextContent>
+                  )}
+                  {isWcaKeyFound && (
+                    <>
+                      <TextContent data-testid={"model-settings-overview__key"}>
+                        <Text component={"h3"}>{t("APIKey")}</Text>
+                      </TextContent>
+                      <Split>
+                        <SplitItem isFilled={true}>
+                          <TextContent>
+                            <Text component={"p"} className={"Secret-value"}>
+                              {t("SecretValue")}
+                            </Text>
+                          </TextContent>
+                        </SplitItem>
+                        <SplitItem>
+                          <BusyButton
+                            variant={"tertiary"}
+                            isSmall={true}
+                            isBusy={isValidatingKey}
+                            isDisabled={isValidatingKey}
+                            onClick={testKey}
+                            data-testid={
+                              "model-settings-overview__key-test-button"
+                            }
+                          >
+                            {t("Test")}
+                          </BusyButton>
+                        </SplitItem>
+                      </Split>
+                    </>
+                  )}
+                </StackItem>
+                <StackItem>
+                  {isWcaKeyNotFound && (
+                    <Button
+                      variant={"primary"}
+                      icon={<PlusCircleIcon />}
+                      onClick={setModeToKey}
+                      data-testid={"model-settings-overview__add-key-button"}
+                    >
+                      {t("AddAPIKey")}
+                    </Button>
+                  )}
+                  {isWcaKeyFound && (
+                    <Button
+                      variant={"primary"}
+                      icon={<CheckCircleIcon />}
+                      isDisabled={isValidatingKey}
+                      onClick={setModeToKey}
+                      data-testid={"model-settings-overview__update-key-button"}
+                    >
+                      {t("UpdateAPIKey")}
+                    </Button>
+                  )}
+                </StackItem>
+                {isWcaKeyFound && (
+                  <>
+                    <StackItem>
+                      <TextContent>
+                        <Text component={"h3"}>{t("LastUpdated")}</Text>
+                      </TextContent>
+                    </StackItem>
+                    <StackItem>
+                      <TextContent>
+                        {/*This is a safe cast as 'isWcaKeyFound' is true*/}
+                        <Text component={"p"}>
+                          {(
+                            wcaKey as Success<WcaKeyResponse>
+                          ).data.lastUpdate.toLocaleString()}
+                        </Text>
+                      </TextContent>
+                    </StackItem>
+                  </>
+                )}
+              </Stack>
+            </PanelMainBody>
+          </PanelMain>
+        </Panel>
+      </PageSection>
+      <PageSection>
+        <Panel variant={"bordered"}>
+          <PanelMain>
+            <PanelMainBody>
+              <Stack hasGutter={true}>
+                {isModelIdInvalid && (
+                  <StackItem>
+                    <Alert
+                      variant="warning"
+                      title={t("ModelIdInvalidAlert")}
+                      data-testid={
+                        "model-settings-overview__alert-model-id-invalid"
+                      }
+                    />
+                  </StackItem>
+                )}
+                {isWcaModelIdNotFound &&
+                  !isWcaKeyFound &&
+                  !isWcaKeyLoading &&
+                  !isWcaModelIdLoading && (
+                    <Alert
+                      variant="info"
+                      title={t("NoModelIdNoAPIKey")}
+                      data-testid={
+                        "model-settings-overview__model-id-set-api-key-first"
+                      }
+                    />
+                  )}
+                <StackItem>
+                  <TextContent>
+                    <Text component={"h3"}>
+                      {t("ModelId")}
+                      <Tooltip
+                        aria="none"
+                        aria-live="polite"
+                        content={t("ModelIdTooltip")}
+                      >
+                        <Icon>
+                          <OutlinedQuestionCircleIcon className={"Info-icon"} />
+                        </Icon>
+                      </Tooltip>
+                    </Text>
+                    <Text component={"p"}>{t("ModelIdDescription")}</Text>
+                  </TextContent>
+                </StackItem>
+                <StackItem>
+                  <StackItem>
+                    {(isWcaKeyLoading || isWcaModelIdLoading) && (
+                      <div
+                        className={"Loading"}
+                        data-testid={
+                          "model-settings-overview__model-id-loading"
+                        }
+                      >
+                        <Skeleton
+                          height="100%"
+                          screenreaderText={t("Loading")}
+                        />
+                      </div>
+                    )}
+                    {isWcaModelIdNotFound && !isWcaKeyLoading && (
+                      <TextContent
+                        data-testid={
+                          "model-settings-overview__model-id-not-found"
+                        }
+                      >
+                        <Text component={"p"}>{t("NoModelId")}</Text>
+                      </TextContent>
+                    )}
+                    {isWcaModelIdFound && !isWcaKeyLoading && (
+                      <>
+                        <TextContent
+                          data-testid={"model-settings-overview__model-id"}
+                        >
+                          <Text component={"h3"}>{t("ModelId")}</Text>
+                        </TextContent>
+                        <Split>
+                          <SplitItem isFilled={true}>
+                            <TextContent>
+                              {/*This is a safe cast as 'isWcaModelIdFound' is true*/}
+                              <Text component={"p"} className={"Secret-value"}>
+                                {
+                                  (wcaModelId as Success<WcaModelIdResponse>)
+                                    .data.model_id
+                                }
+                              </Text>
+                            </TextContent>
+                          </SplitItem>
+                          <SplitItem>
+                            <BusyButton
+                              variant={"tertiary"}
+                              isSmall={true}
+                              isBusy={isValidatingModelId}
+                              isDisabled={isValidatingModelId}
+                              onClick={testModelId}
+                              data-testid={
+                                "model-settings-overview__model-id-test-button"
+                              }
+                            >
+                              {t("Test")}
+                            </BusyButton>
+                          </SplitItem>
+                        </Split>
+                      </>
+                    )}
+                  </StackItem>
+                </StackItem>
+                <StackItem>
+                  {isWcaModelIdNotFound && !isWcaKeyLoading && (
+                    <Button
+                      variant={"primary"}
+                      icon={<PlusCircleIcon />}
+                      onClick={setModeToModelId}
+                      isDisabled={!isWcaKeyFound}
+                      data-testid={
+                        "model-settings-overview__add-model-id-button"
+                      }
+                    >
+                      {t("AddModelId")}
+                    </Button>
+                  )}
+                  {isWcaModelIdFound && !isWcaKeyLoading && (
+                    <Button
+                      variant={"primary"}
+                      icon={<CheckCircleIcon />}
+                      isDisabled={isValidatingModelId}
+                      onClick={setModeToModelId}
+                      data-testid={
+                        "model-settings-overview__update-model-id-button"
+                      }
+                    >
+                      {t("UpdateModelId")}
+                    </Button>
+                  )}
+                </StackItem>
+                {isWcaModelIdFound && (
+                  <>
+                    <StackItem>
+                      <TextContent>
+                        <Text component={"h3"}>{t("LastUpdated")}</Text>
+                      </TextContent>
+                    </StackItem>
+                    <StackItem>
+                      <TextContent>
+                        {/*This is a safe cast as 'isWcaModelIdFound' is true*/}
+                        <Text component={"p"}>
+                          {(
+                            wcaModelId as Success<WcaModelIdResponse>
+                          ).data.lastUpdate.toLocaleString()}
+                        </Text>
+                      </TextContent>
+                    </StackItem>
+                  </>
+                )}
+              </Stack>
+            </PanelMainBody>
+          </PanelMain>
+        </Panel>
+      </PageSection>
+    </>
+  );
+};
diff --git a/ansible_wisdom_console_react/src/PageApp.tsx b/ansible_wisdom_console_react/src/PageApp.tsx
index 4c438225d..1da30b87e 100644
--- a/ansible_wisdom_console_react/src/PageApp.tsx
+++ b/ansible_wisdom_console_react/src/PageApp.tsx
@@ -1,14 +1,23 @@
-import {PageFramework, PageLayout, PageNavigationItem} from '@ansible/ansible-ui-framework'
-import {Page} from '@patternfly/react-core'
-import {ReactNode, useMemo} from 'react'
-import {createBrowserRouter, Navigate, Outlet, RouterProvider,} from 'react-router-dom'
-import './PageApp.css'
-import {PageSidebar} from "./PageSidebar";
+import {
+  PageFramework,
+  PageLayout,
+  PageNavigationItem,
+} from "@ansible/ansible-ui-framework";
+import { Page } from "@patternfly/react-core";
+import { ReactNode, useMemo } from "react";
+import {
+  createBrowserRouter,
+  Navigate,
+  Outlet,
+  RouterProvider,
+} from "react-router-dom";
+import "./PageApp.css";
+import { PageSidebar } from "./PageSidebar";
 
 interface PageAppProps {
-    readonly basename: string;
-    readonly header: ReactNode;
-    readonly navigationItems: PageNavigationItem[];
+  readonly basename: string;
+  readonly header: ReactNode;
+  readonly navigationItems: PageNavigationItem[];
 }
 
 // This is copied from ansible/ansible-ui/framework and modified to support redirection
@@ -16,48 +25,53 @@ interface PageAppProps {
 // ansible/ansible-ui/framework supports redirection to a default root this can be removed.
 // See https://issues.redhat.com/browse/AAP-16027
 export function PageApp(props: PageAppProps) {
-    const {navigationItems, basename, header} = props
-    const navigationItemsWithRoot = useMemo<PageNavigationItem[]>(
-        () => [
-            {
-                path: '*',
-                element: <PageRouterLayout header={header} navigationItems={navigationItems}/>,
-                children: navigationItems,
-            },
-            {
-                path: '/',
-                element: <Navigate to="/admin/settings" replace={true}/>,
-            },
-            {
-                path: '/admin',
-                element: <Navigate to="/admin/settings" replace={true}/>,
-            },
-        ],
-        [header, navigationItems]
-    );
+  const { navigationItems, basename, header } = props;
+  const navigationItemsWithRoot = useMemo<PageNavigationItem[]>(
+    () => [
+      {
+        path: "*",
+        element: (
+          <PageRouterLayout header={header} navigationItems={navigationItems} />
+        ),
+        children: navigationItems,
+      },
+      {
+        path: "/",
+        element: <Navigate to="/admin/settings" replace={true} />,
+      },
+      {
+        path: "/admin",
+        element: <Navigate to="/admin/settings" replace={true} />,
+      },
+    ],
+    [header, navigationItems],
+  );
 
-    const router = useMemo(
-        () => createBrowserRouter(navigationItemsWithRoot, {basename}),
-        [basename, navigationItemsWithRoot]
-    )
+  const router = useMemo(
+    () => createBrowserRouter(navigationItemsWithRoot, { basename }),
+    [basename, navigationItemsWithRoot],
+  );
 
-    return <RouterProvider router={router}/>
+  return <RouterProvider router={router} />;
 }
 
 interface PageRouterLayoutProps {
-    readonly header?: ReactNode;
-    readonly navigationItems: PageNavigationItem[];
+  readonly header?: ReactNode;
+  readonly navigationItems: PageNavigationItem[];
 }
 
 function PageRouterLayout(props: PageRouterLayoutProps) {
-    const {header, navigationItems} = props
-    return (
-        <PageFramework>
-            <Page header={header} sidebar={<PageSidebar navigation={navigationItems}/>}>
-                <PageLayout>
-                    <Outlet/>
-                </PageLayout>
-            </Page>
-        </PageFramework>
-    )
+  const { header, navigationItems } = props;
+  return (
+    <PageFramework>
+      <Page
+        header={header}
+        sidebar={<PageSidebar navigation={navigationItems} />}
+      >
+        <PageLayout>
+          <Outlet />
+        </PageLayout>
+      </Page>
+    </PageFramework>
+  );
 }
diff --git a/ansible_wisdom_console_react/src/PageMastheadDropdown.tsx b/ansible_wisdom_console_react/src/PageMastheadDropdown.tsx
index 94775c9f7..dc5ac7418 100644
--- a/ansible_wisdom_console_react/src/PageMastheadDropdown.tsx
+++ b/ansible_wisdom_console_react/src/PageMastheadDropdown.tsx
@@ -1,47 +1,53 @@
-import {Dropdown, DropdownToggle, Flex, FlexItem} from '@patternfly/react-core';
-import {ReactNode, useCallback, useState} from 'react';
-import {useBreakpoint} from "@ansible/ansible-ui-framework";
+import {
+  Dropdown,
+  DropdownToggle,
+  Flex,
+  FlexItem,
+} from "@patternfly/react-core";
+import { ReactNode, useCallback, useState } from "react";
+import { useBreakpoint } from "@ansible/ansible-ui-framework";
 
 interface PageMastheadDropdownProps {
-    readonly id: string;
-    readonly icon: ReactNode;
-    readonly userName: string;
-    readonly children: ReactNode;
+  readonly id: string;
+  readonly icon: ReactNode;
+  readonly userName: string;
+  readonly children: ReactNode;
 }
 
 export function PageMastheadDropdown(props: PageMastheadDropdownProps) {
-    const isSmallOrLarger = useBreakpoint('sm');
-    const [open, setOpen] = useState(false);
-    const {id, icon, userName, children} = props;
-    const onSelect = useCallback(() => setOpen((open) => !open), []);
-    const onToggle = useCallback(() => setOpen((open) => !open), []);
-    const _children = Array.isArray(children) ? children : [children];
+  const isSmallOrLarger = useBreakpoint("sm");
+  const [open, setOpen] = useState(false);
+  const { id, icon, userName, children } = props;
+  const onSelect = useCallback(() => setOpen((open) => !open), []);
+  const onToggle = useCallback(() => setOpen((open) => !open), []);
+  const _children = Array.isArray(children) ? children : [children];
 
-    return (
-        <Dropdown
-            id={id}
-            onSelect={onSelect}
-            toggle={
-                <DropdownToggle
-                    toggleIndicator={null} onToggle={onToggle}
-                    data-testid="page-masthead-dropdown__button"
-                >
-                    <Flex
-                        alignItems={{default: 'alignItemsCenter'}}
-                        flexWrap={{default: 'nowrap'}}
-                        spaceItems={{default: 'spaceItemsSm'}}
-                    >
-                        <FlexItem>{icon}</FlexItem>
-                        {isSmallOrLarger && <FlexItem wrap="nowrap">{userName}</FlexItem>}
-                    </Flex>
-                </DropdownToggle>
-            }
-            isOpen={open}
-            isPlain
-            dropdownItems={_children}
-            position="right"
-            data-cy={id}
-            data-testid="page-masthead-dropdown"
-        />
-    );
+  return (
+    <Dropdown
+      id={id}
+      onSelect={onSelect}
+      toggle={
+        <DropdownToggle
+          toggleIndicator={null}
+          onToggle={onToggle}
+          data-testid="page-masthead-dropdown__button"
+        >
+          <Flex
+            alignItems={{ default: "alignItemsCenter" }}
+            flexWrap={{ default: "nowrap" }}
+            spaceItems={{ default: "spaceItemsSm" }}
+          >
+            <FlexItem>{icon}</FlexItem>
+            {isSmallOrLarger && <FlexItem wrap="nowrap">{userName}</FlexItem>}
+          </Flex>
+        </DropdownToggle>
+      }
+      isOpen={open}
+      isPlain
+      dropdownItems={_children}
+      position="right"
+      data-cy={id}
+      data-testid="page-masthead-dropdown"
+    />
+  );
 }
diff --git a/ansible_wisdom_console_react/src/PageSidebar.tsx b/ansible_wisdom_console_react/src/PageSidebar.tsx
index 557a68424..aa093a4d1 100644
--- a/ansible_wisdom_console_react/src/PageSidebar.tsx
+++ b/ansible_wisdom_console_react/src/PageSidebar.tsx
@@ -1,51 +1,56 @@
-import {PageNavigation, PageNavigationItem, usePageNavSideBar} from '@ansible/ansible-ui-framework'
-import {Brand, Text, TextContent, TextVariants} from '@patternfly/react-core'
-import {useTranslation} from 'react-i18next'
-import LSLogo from "./lightspeed-logo.png"
-import './PageApp.css'
+import {
+  PageNavigation,
+  PageNavigationItem,
+  usePageNavSideBar,
+} from "@ansible/ansible-ui-framework";
+import { Brand, Text, TextContent, TextVariants } from "@patternfly/react-core";
+import { useTranslation } from "react-i18next";
+import LSLogo from "./lightspeed-logo.png";
+import "./PageApp.css";
 
 interface LSBrandProps {
-    readonly cName?: string
+  readonly cName?: string;
 }
 
 function LSBrand(props: LSBrandProps) {
-    const {t} = useTranslation();
-    const {cName} = props;
-    return (
-        <div
-            data-testid={"page-sidebar__brand"}
-            className={cName}
-        >
-            <Brand alt="" widths={{default: '40px', md: '40px'}} className={'ansible-lightspeed-logo'}>
-                <source media="(min-width: 40px)" srcSet={LSLogo}/>
-            </Brand>
-            <TextContent className={'ansible-lightspeed-w'}>
-                <Text component={TextVariants.p} className={'ansible-lightspeed-t'}>
-                    {t('AnsibleLightspeed') + ' ' + t('with')}
-                </Text>
-                <Text component={TextVariants.p} className={'ansible-lightspeed-t'}>
-                    {t('IBMwatsonxCodeAssistant')}
-                </Text>
-            </TextContent>
-        </div>
-    );
+  const { t } = useTranslation();
+  const { cName } = props;
+  return (
+    <div data-testid={"page-sidebar__brand"} className={cName}>
+      <Brand
+        alt=""
+        widths={{ default: "40px", md: "40px" }}
+        className={"ansible-lightspeed-logo"}
+      >
+        <source media="(min-width: 40px)" srcSet={LSLogo} />
+      </Brand>
+      <TextContent className={"ansible-lightspeed-w"}>
+        <Text component={TextVariants.p} className={"ansible-lightspeed-t"}>
+          {t("AnsibleLightspeed") + " " + t("with")}
+        </Text>
+        <Text component={TextVariants.p} className={"ansible-lightspeed-t"}>
+          {t("IBMwatsonxCodeAssistant")}
+        </Text>
+      </TextContent>
+    </div>
+  );
 }
 
 interface PageSidebarProps {
-    readonly   navigation: PageNavigationItem[];
+  readonly navigation: PageNavigationItem[];
 }
 
 export function PageSidebar(props: PageSidebarProps) {
-    const navBar = usePageNavSideBar();
-    const {navigation} = props;
-    const barStateClassName = navBar.isOpen ? "pf-m-expanded" : "pf-m-collapsed";
-    const groupClassName = ' pf-c-page__sidebar ' + barStateClassName;
-    return (
-        <div className={groupClassName}>
-            <LSBrand cName={groupClassName} aria-hidden={!navBar.isOpen}/>
-            <div data-testid={"page-sidebar__navigation"}>
-                <PageNavigation navigation={navigation}/>
-            </div>
-        </div>
-    );
+  const navBar = usePageNavSideBar();
+  const { navigation } = props;
+  const barStateClassName = navBar.isOpen ? "pf-m-expanded" : "pf-m-collapsed";
+  const groupClassName = " pf-c-page__sidebar " + barStateClassName;
+  return (
+    <div className={groupClassName}>
+      <LSBrand cName={groupClassName} aria-hidden={!navBar.isOpen} />
+      <div data-testid={"page-sidebar__navigation"}>
+        <PageNavigation navigation={navigation} />
+      </div>
+    </div>
+  );
 }
diff --git a/ansible_wisdom_console_react/src/SingleInlineEdit.tsx b/ansible_wisdom_console_react/src/SingleInlineEdit.tsx
index e46b4790d..ee45d138e 100644
--- a/ansible_wisdom_console_react/src/SingleInlineEdit.tsx
+++ b/ansible_wisdom_console_react/src/SingleInlineEdit.tsx
@@ -1,79 +1,82 @@
-import {EyeIcon, EyeSlashIcon, TimesIcon} from "@patternfly/react-icons";
-import {Button, InputGroup, TextInput} from "@patternfly/react-core";
-import {useTranslation} from "react-i18next";
-import {useState} from "react";
+import { EyeIcon, EyeSlashIcon, TimesIcon } from "@patternfly/react-icons";
+import { Button, InputGroup, TextInput } from "@patternfly/react-core";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
 
 export interface InlineTextInputProps {
-    readonly value: string;
-    readonly onChange: (value: string) => void;
-    readonly 'aria-label': string;
-    readonly placeholder: string;
-    readonly isDisabled: boolean;
-    readonly isPassword: boolean;
+  readonly value: string;
+  readonly onChange: (value: string) => void;
+  readonly "aria-label": string;
+  readonly placeholder: string;
+  readonly isDisabled: boolean;
+  readonly isPassword: boolean;
 }
 
 export const SingleInlineEdit = (props: InlineTextInputProps) => {
-    const {t} = useTranslation();
+  const { t } = useTranslation();
 
-    const {value, onChange, placeholder, isDisabled, isPassword} = props;
-    const [passwordHidden, setPasswordHidden] = useState<boolean>(isPassword)
+  const { value, onChange, placeholder, isDisabled, isPassword } = props;
+  const [passwordHidden, setPasswordHidden] = useState<boolean>(isPassword);
 
-    return (
-        <>
-            {isPassword && (
-                <InputGroup>
-                    <TextInput
-                        type={isPassword && passwordHidden ? "password" : "text"}
-                        onChange={(value, event) => props.onChange?.(value)}
-                        aria-label={props["aria-label"]}
-                        placeholder={placeholder}
-                        isDisabled={isDisabled}
-                        data-testid={"model-settings-editor__input"}
-                    />
-                    <Button
-                        variant="control"
-                        onClick={() => setPasswordHidden(!passwordHidden)}
-                        aria-label={passwordHidden ? t('ShowText') : t('HideText')}
-                        data-testid={"model-settings-editor__toggleView"}>
-                        {passwordHidden ? <EyeIcon/> : <EyeSlashIcon/>}
-                    </Button>
-                    <Button variant="plain"
-                            aria-label={t('ClearText')}
-                            title={t('ClearText')}
-                            onClick={() => {
-                                onChange?.('');
-                            }}
-                            isDisabled={isDisabled || value.trim().length === 0}
-                            data-testid={"model-settings-editor__clear-button"}
-                    >
-                        <TimesIcon/>
-                    </Button>
-                </InputGroup>
-            )}
-            {!isPassword && (
-                <InputGroup>
-                    <TextInput
-                        value={value}
-                        type={"text"}
-                        onChange={(value, event) => props.onChange?.(value)}
-                        aria-label={props["aria-label"]}
-                        placeholder={placeholder}
-                        isDisabled={isDisabled}
-                        data-testid={"model-settings-editor__input"}
-                    />
-                    <Button variant="plain"
-                            aria-label={t('ClearText')}
-                            title={t('ClearText')}
-                            onClick={() => {
-                                onChange?.('');
-                            }}
-                            isDisabled={isDisabled || value.trim().length === 0}
-                            data-testid={"model-settings-editor__clear-button"}
-                    >
-                        <TimesIcon/>
-                    </Button>
-                </InputGroup>
-            )}
-        </>
-    );
-}
+  return (
+    <>
+      {isPassword && (
+        <InputGroup>
+          <TextInput
+            type={isPassword && passwordHidden ? "password" : "text"}
+            onChange={(value, event) => props.onChange?.(value)}
+            aria-label={props["aria-label"]}
+            placeholder={placeholder}
+            isDisabled={isDisabled}
+            data-testid={"model-settings-editor__input"}
+          />
+          <Button
+            variant="control"
+            onClick={() => setPasswordHidden(!passwordHidden)}
+            aria-label={passwordHidden ? t("ShowText") : t("HideText")}
+            data-testid={"model-settings-editor__toggleView"}
+          >
+            {passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
+          </Button>
+          <Button
+            variant="plain"
+            aria-label={t("ClearText")}
+            title={t("ClearText")}
+            onClick={() => {
+              onChange?.("");
+            }}
+            isDisabled={isDisabled || value.trim().length === 0}
+            data-testid={"model-settings-editor__clear-button"}
+          >
+            <TimesIcon />
+          </Button>
+        </InputGroup>
+      )}
+      {!isPassword && (
+        <InputGroup>
+          <TextInput
+            value={value}
+            type={"text"}
+            onChange={(value, event) => props.onChange?.(value)}
+            aria-label={props["aria-label"]}
+            placeholder={placeholder}
+            isDisabled={isDisabled}
+            data-testid={"model-settings-editor__input"}
+          />
+          <Button
+            variant="plain"
+            aria-label={t("ClearText")}
+            title={t("ClearText")}
+            onClick={() => {
+              onChange?.("");
+            }}
+            isDisabled={isDisabled || value.trim().length === 0}
+            data-testid={"model-settings-editor__clear-button"}
+          >
+            <TimesIcon />
+          </Button>
+        </InputGroup>
+      )}
+    </>
+  );
+};
diff --git a/ansible_wisdom_console_react/src/TelemetrySettings.tsx b/ansible_wisdom_console_react/src/TelemetrySettings.tsx
index 67a6e6f3a..2f1abc840 100644
--- a/ansible_wisdom_console_react/src/TelemetrySettings.tsx
+++ b/ansible_wisdom_console_react/src/TelemetrySettings.tsx
@@ -1,185 +1,232 @@
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {Button, Icon, Page, PageSection, PageSectionVariants, Panel, PanelMain, PanelMainBody, Radio, Skeleton, Split, SplitItem, Stack, StackItem, Text, TextContent} from "@patternfly/react-core";
-import './ModelSettings.css';
-import {Success, Telemetry, TelemetryRequest, TelemetryResponse} from "./api/types";
-import {CheckCircleIcon, ExternalLinkAltIcon} from "@patternfly/react-icons";
-import {useTranslation} from "react-i18next";
-import {DELAY} from "./api/globals";
-import {saveTelemetrySettings} from "./api/api";
-import {ErrorModal, HasError, NO_ERROR} from "./ErrorModal";
-import {useTelemetry} from "./hooks/useTelemetryAPI";
-import {BusyButton} from "./BusyButton";
-import {Alerts, AlertsHandle} from "./Alerts";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  Button,
+  Icon,
+  Page,
+  PageSection,
+  PageSectionVariants,
+  Panel,
+  PanelMain,
+  PanelMainBody,
+  Radio,
+  Skeleton,
+  Split,
+  SplitItem,
+  Stack,
+  StackItem,
+  Text,
+  TextContent,
+} from "@patternfly/react-core";
+import "./ModelSettings.css";
+import {
+  Success,
+  Telemetry,
+  TelemetryRequest,
+  TelemetryResponse,
+} from "./api/types";
+import { CheckCircleIcon, ExternalLinkAltIcon } from "@patternfly/react-icons";
+import { useTranslation } from "react-i18next";
+import { DELAY } from "./api/globals";
+import { saveTelemetrySettings } from "./api/api";
+import { ErrorModal, HasError, NO_ERROR } from "./ErrorModal";
+import { useTelemetry } from "./hooks/useTelemetryAPI";
+import { BusyButton } from "./BusyButton";
+import { Alerts, AlertsHandle } from "./Alerts";
 
 export function TelemetrySettings() {
-    const {t} = useTranslation();
+  const { t } = useTranslation();
 
-    const [telemetry, setTelemetry] = useState<Telemetry>({status: "NOT_ASKED"});
-    const [telemetryOptOut, setTelemetryOptOut] = useState<boolean>(false);
-    const _telemetry = useTelemetry();
+  const [telemetry, setTelemetry] = useState<Telemetry>({
+    status: "NOT_ASKED",
+  });
+  const [telemetryOptOut, setTelemetryOptOut] = useState<boolean>(false);
+  const _telemetry = useTelemetry();
 
-    const [saving, setSaving] = useState<boolean>(false);
-    const [telemetrySettingsError, setTelemetrySettingsError] = useState<HasError>(NO_ERROR);
-    const isTelemetryLoading: boolean = useMemo(() => _telemetry.status === "NOT_ASKED" || _telemetry.status === "LOADING", [_telemetry]);
-    const isTelemetryFound: boolean = useMemo(() => _telemetry.status === "SUCCESS", [_telemetry]);
+  const [saving, setSaving] = useState<boolean>(false);
+  const [telemetrySettingsError, setTelemetrySettingsError] =
+    useState<HasError>(NO_ERROR);
+  const isTelemetryLoading: boolean = useMemo(
+    () => _telemetry.status === "NOT_ASKED" || _telemetry.status === "LOADING",
+    [_telemetry],
+  );
+  const isTelemetryFound: boolean = useMemo(
+    () => _telemetry.status === "SUCCESS",
+    [_telemetry],
+  );
 
-    const alertsRef = useRef<AlertsHandle>(null);
+  const alertsRef = useRef<AlertsHandle>(null);
 
-    useEffect(() => {
-        setTelemetry(_telemetry);
-        if (_telemetry.status === "SUCCESS") {
-            const optOut: boolean = (_telemetry as Success<TelemetryResponse>).data.optOut;
-            setTelemetryOptOut(optOut);
-        }
-    }, [_telemetry]);
-
-    const optInOutChanged = useMemo(() => {
-        if (telemetry.status === "SUCCESS") {
-            return ((telemetry as Success<TelemetryResponse>).data.optOut) !== telemetryOptOut;
-        }
-        return false;
-    }, [telemetry, telemetryOptOut])
+  useEffect(() => {
+    setTelemetry(_telemetry);
+    if (_telemetry.status === "SUCCESS") {
+      const optOut: boolean = (_telemetry as Success<TelemetryResponse>).data
+        .optOut;
+      setTelemetryOptOut(optOut);
+    }
+  }, [_telemetry]);
 
-    const save = useCallback(() => {
-        const timeoutId = setTimeout(() => setSaving(true), DELAY);
-        const telemetryRequest: TelemetryRequest = {optOut: telemetryOptOut};
-        saveTelemetrySettings(telemetryRequest)
-            .then((_) => {
-                setSaving(false);
-                setTelemetry({status: "SUCCESS", data: telemetryRequest});
-                if (telemetryOptOut) {
-                    alertsRef.current?.addAlert(t("TelemetryOptOutSaveSuccessAlert"));
-                } else {
-                    alertsRef.current?.addAlert(t("TelemetryOptInSaveSuccessAlert"));
-                }
-            })
-            .catch((error) => {
-                setTelemetrySettingsError({
-                    inError: true,
-                    message: error.message,
-                    detail: error.response?.data?.detail
-                })
-            })
-            .finally(() => {
-                setSaving(false);
-                clearTimeout(timeoutId);
-            });
-    }, [t, telemetryOptOut]);
+  const optInOutChanged = useMemo(() => {
+    if (telemetry.status === "SUCCESS") {
+      return (
+        (telemetry as Success<TelemetryResponse>).data.optOut !==
+        telemetryOptOut
+      );
+    }
+    return false;
+  }, [telemetry, telemetryOptOut]);
 
-    const cancel = useCallback(() => {
+  const save = useCallback(() => {
+    const timeoutId = setTimeout(() => setSaving(true), DELAY);
+    const telemetryRequest: TelemetryRequest = { optOut: telemetryOptOut };
+    saveTelemetrySettings(telemetryRequest)
+      .then((_) => {
         setSaving(false);
-        if (telemetry.status === "SUCCESS") {
-            const optOut: boolean = (_telemetry as Success<TelemetryResponse>).data.optOut;
-            setTelemetryOptOut(optOut);
+        setTelemetry({ status: "SUCCESS", data: telemetryRequest });
+        if (telemetryOptOut) {
+          alertsRef.current?.addAlert(t("TelemetryOptOutSaveSuccessAlert"));
+        } else {
+          alertsRef.current?.addAlert(t("TelemetryOptInSaveSuccessAlert"));
         }
-    }, [_telemetry, telemetry])
+      })
+      .catch((error) => {
+        setTelemetrySettingsError({
+          inError: true,
+          message: error.message,
+          detail: error.response?.data?.detail,
+        });
+      })
+      .finally(() => {
+        setSaving(false);
+        clearTimeout(timeoutId);
+      });
+  }, [t, telemetryOptOut]);
+
+  const cancel = useCallback(() => {
+    setSaving(false);
+    if (telemetry.status === "SUCCESS") {
+      const optOut: boolean = (_telemetry as Success<TelemetryResponse>).data
+        .optOut;
+      setTelemetryOptOut(optOut);
+    }
+  }, [_telemetry, telemetry]);
 
-    return (
-        <Page>
-            <ErrorModal
-                caption={t("TelemetryError")}
-                hasError={telemetrySettingsError}
-                close={() => setTelemetrySettingsError(NO_ERROR)}
-            />
-            <PageSection variant={PageSectionVariants.light} isWidthLimited>
-                <TextContent>
-                    <Alerts ref={alertsRef}/>
-                    <Text component="h1">{t("TelemetrySettings")}</Text>
-                </TextContent>
-            </PageSection>
-            <PageSection data-testid={"telemetry-settings"}>
-                <Panel variant={"bordered"}>
-                    <PanelMain>
-                        <PanelMainBody>
-                            <Stack hasGutter={true}>
-                                <StackItem>
-                                    <TextContent>
-                                        <Text component={"h3"}>
-                                            {t("TelemetryManageUsage")}
-                                        </Text>
-                                        <Text component={"p"}>
-                                            {t("TelemetryManageUsageDescription")}
-                                            <a href={t("TelemetryManageUsageAdminDashboardURL")}>
-                                                {t("TelemetryManageUsageAdminDashboardURLText")}
-                                            </a>
-                                        </Text>
-                                        <Text component={"p"}>
-                                            <a href={t("TelemetryManageUsageLearnMoreURL")}>
-                                                {t("TelemetryManageUsageLearnMoreURLText")}
-                                                <Icon size="md">
-                                                    <ExternalLinkAltIcon style={{color: "var(--pf-c-content--a--Color)"}}/>
-                                                </Icon>
-                                            </a>
-                                        </Text>
-                                    </TextContent>
-                                </StackItem>
-                                <StackItem>
-                                    {isTelemetryLoading && (
-                                        <div className={"Loading"} data-testid={"telemetry-settings__telemetry-loading"}>
-                                            <Skeleton height="100%" screenreaderText={t("Loading")}/>
-                                        </div>
-                                    )}
-                                    {isTelemetryFound && (
-                                        <Stack hasGutter={true}>
-                                            <StackItem>
-                                                {/*This is a safe cast as 'isTelemetryFound' is true*/}
-                                                <Radio
-                                                    id="optInRadio"
-                                                    name="optInOutRadio"
-                                                    label={t("TelemetryOptInLabel")}
-                                                    description={t("TelemetryOptInDescription")}
-                                                    isChecked={!telemetryOptOut}
-                                                    onChange={() => setTelemetryOptOut(false)}
-                                                    isDisabled={saving}
-                                                    data-testid={"telemetry-settings__opt_in_radiobutton"}
-                                                />
-                                            </StackItem>
-                                            <StackItem>
-                                                <Radio
-                                                    id="optOutRadio"
-                                                    name="optInOutRadio"
-                                                    label={t("TelemetryOptOutLabel")}
-                                                    description={t("TelemetryOptOutDescription")}
-                                                    isChecked={telemetryOptOut}
-                                                    onChange={() => setTelemetryOptOut(true)}
-                                                    isDisabled={saving}
-                                                    data-testid={"telemetry-settings__opt_out_radiobutton"}
-                                                />
-                                            </StackItem>
-                                            <StackItem>
-                                                <Split hasGutter={true}>
-                                                    <SplitItem>
-                                                        <BusyButton
-                                                            variant={"primary"}
-                                                            icon={<CheckCircleIcon/>}
-                                                            onClick={save}
-                                                            isBusy={saving}
-                                                            isDisabled={saving}
-                                                            data-testid={"telemetry-settings__save-button"}
-                                                        >
-                                                            {t("Save")}
-                                                        </BusyButton>
-                                                    </SplitItem>
-                                                    <SplitItem>
-                                                        <Button
-                                                            variant={"secondary"}
-                                                            onClick={cancel}
-                                                            isDisabled={saving || !optInOutChanged}
-                                                            data-testid={"telemetry-settings__cancel-button"}
-                                                        >
-                                                            {t("Cancel")}
-                                                        </Button>
-                                                    </SplitItem>
-                                                </Split>
-                                            </StackItem>
-                                        </Stack>
-                                    )}
-                                </StackItem>
-                            </Stack>
-                        </PanelMainBody>
-                    </PanelMain>
-                </Panel>
-            </PageSection>
-        </Page>
-    )
+  return (
+    <Page>
+      <ErrorModal
+        caption={t("TelemetryError")}
+        hasError={telemetrySettingsError}
+        close={() => setTelemetrySettingsError(NO_ERROR)}
+      />
+      <PageSection variant={PageSectionVariants.light} isWidthLimited>
+        <TextContent>
+          <Alerts ref={alertsRef} />
+          <Text component="h1">{t("TelemetrySettings")}</Text>
+        </TextContent>
+      </PageSection>
+      <PageSection data-testid={"telemetry-settings"}>
+        <Panel variant={"bordered"}>
+          <PanelMain>
+            <PanelMainBody>
+              <Stack hasGutter={true}>
+                <StackItem>
+                  <TextContent>
+                    <Text component={"h3"}>{t("TelemetryManageUsage")}</Text>
+                    <Text component={"p"}>
+                      {t("TelemetryManageUsageDescription")}
+                      <a href={t("TelemetryManageUsageAdminDashboardURL")}>
+                        {t("TelemetryManageUsageAdminDashboardURLText")}
+                      </a>
+                    </Text>
+                    <Text component={"p"}>
+                      <a href={t("TelemetryManageUsageLearnMoreURL")}>
+                        {t("TelemetryManageUsageLearnMoreURLText")}
+                        <Icon size="md">
+                          <ExternalLinkAltIcon
+                            style={{ color: "var(--pf-c-content--a--Color)" }}
+                          />
+                        </Icon>
+                      </a>
+                    </Text>
+                  </TextContent>
+                </StackItem>
+                <StackItem>
+                  {isTelemetryLoading && (
+                    <div
+                      className={"Loading"}
+                      data-testid={"telemetry-settings__telemetry-loading"}
+                    >
+                      <Skeleton height="100%" screenreaderText={t("Loading")} />
+                    </div>
+                  )}
+                  {isTelemetryFound && (
+                    <Stack hasGutter={true}>
+                      <StackItem>
+                        {/*This is a safe cast as 'isTelemetryFound' is true*/}
+                        <Radio
+                          id="optInRadio"
+                          name="optInOutRadio"
+                          label={t("TelemetryOptInLabel")}
+                          description={t("TelemetryOptInDescription")}
+                          isChecked={!telemetryOptOut}
+                          onChange={() => setTelemetryOptOut(false)}
+                          isDisabled={saving}
+                          data-testid={"telemetry-settings__opt_in_radiobutton"}
+                        />
+                      </StackItem>
+                      <StackItem>
+                        <Radio
+                          id="optOutRadio"
+                          name="optInOutRadio"
+                          label={t("TelemetryOptOutLabel")}
+                          description={t("TelemetryOptOutDescription")}
+                          isChecked={telemetryOptOut}
+                          onChange={() => setTelemetryOptOut(true)}
+                          isDisabled={saving}
+                          data-testid={
+                            "telemetry-settings__opt_out_radiobutton"
+                          }
+                        />
+                      </StackItem>
+                      <StackItem>
+                        <Split hasGutter={true}>
+                          <SplitItem>
+                            <BusyButton
+                              variant={"primary"}
+                              icon={<CheckCircleIcon />}
+                              onClick={save}
+                              isBusy={saving}
+                              isDisabled={saving}
+                              data-testid={"telemetry-settings__save-button"}
+                            >
+                              {t("Save")}
+                            </BusyButton>
+                          </SplitItem>
+                          <SplitItem>
+                            <Button
+                              variant={"secondary"}
+                              onClick={cancel}
+                              isDisabled={saving || !optInOutChanged}
+                              data-testid={"telemetry-settings__cancel-button"}
+                            >
+                              {t("Cancel")}
+                            </Button>
+                          </SplitItem>
+                        </Split>
+                      </StackItem>
+                    </Stack>
+                  )}
+                </StackItem>
+              </Stack>
+            </PanelMainBody>
+          </PanelMain>
+        </Panel>
+      </PageSection>
+    </Page>
+  );
 }
diff --git a/ansible_wisdom_console_react/src/__tests__/App.test.tsx b/ansible_wisdom_console_react/src/__tests__/App.test.tsx
index 8625abefc..15398eb14 100644
--- a/ansible_wisdom_console_react/src/__tests__/App.test.tsx
+++ b/ansible_wisdom_console_react/src/__tests__/App.test.tsx
@@ -1,17 +1,13 @@
-import {render, screen} from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import {App} from "../App";
+import { App } from "../App";
 
-describe('App',
-    () => {
-
-        it('Rendering::With Username',
-            async () => {
-                window.history.pushState({}, 'Test page', "/console")
-                render(<App userName={"Batman"} telemetryOptEnabled={true}/>);
-                const accountMenu = await screen.findByTestId("page-masthead-dropdown");
-                expect(accountMenu).toBeInTheDocument();
-                expect(accountMenu).toHaveTextContent("Batman");
-            });
-
-    });
+describe("App", () => {
+  it("Rendering::With Username", async () => {
+    window.history.pushState({}, "Test page", "/console");
+    render(<App userName={"Batman"} telemetryOptEnabled={true} />);
+    const accountMenu = await screen.findByTestId("page-masthead-dropdown");
+    expect(accountMenu).toBeInTheDocument();
+    expect(accountMenu).toHaveTextContent("Batman");
+  });
+});
diff --git a/ansible_wisdom_console_react/src/__tests__/AppHeader.test.tsx b/ansible_wisdom_console_react/src/__tests__/AppHeader.test.tsx
index 0d64f628b..63cdff7fc 100644
--- a/ansible_wisdom_console_react/src/__tests__/AppHeader.test.tsx
+++ b/ansible_wisdom_console_react/src/__tests__/AppHeader.test.tsx
@@ -1,48 +1,45 @@
-import {render, screen} from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import {AppHeader} from "../AppHeader";
+import { AppHeader } from "../AppHeader";
 import userEvent from "@testing-library/user-event";
 
-describe('AppHeader',
-    () => {
-
-        // Store the original 'location' object so that it can be restored for other tests.
-        const realLocation = window.location
-
-        beforeAll(() => {
-            // Mock the 'location.assign' function so that we can monitor it.
-            // @ts-ignore
-            delete window.location
-            window.location = {...realLocation, assign: jest.fn()}
-        })
-
-        afterAll(() => {
-            // Restore original 'location' object
-            window.location = realLocation
-        })
-
-        it('Rendering',
-            async () => {
-
-                render(<AppHeader userName={"Batman"}/>);
-                const accountMenu = await screen.findByTestId("page-masthead-dropdown");
-                expect(accountMenu).toBeInTheDocument();
-                expect(accountMenu).toHaveTextContent("Batman");
-
-                // Check "Logout" option is not present
-                expect(screen.queryByText("Logout")).toBeNull();
-
-                // Emulate click on menu button
-                const accountMenuToggle = await screen.findByTestId("page-masthead-dropdown__button");
-                await userEvent.click(accountMenuToggle);
-
-                // "Logout" menu option should now be present
-                expect(await screen.findByText("Logout")).toBeInTheDocument();
-
-                // Emulate clicking on the logout button
-                const logoutMenuItem = await screen.findByTestId("app-header__logout");
-                await userEvent.click(logoutMenuItem);
-                expect(window.location.assign).toBeCalledWith("/logout");
-            });
-
-    });
+describe("AppHeader", () => {
+  // Store the original 'location' object so that it can be restored for other tests.
+  const realLocation = window.location;
+
+  beforeAll(() => {
+    // Mock the 'location.assign' function so that we can monitor it.
+    // @ts-ignore
+    delete window.location;
+    window.location = { ...realLocation, assign: jest.fn() };
+  });
+
+  afterAll(() => {
+    // Restore original 'location' object
+    window.location = realLocation;
+  });
+
+  it("Rendering", async () => {
+    render(<AppHeader userName={"Batman"} />);
+    const accountMenu = await screen.findByTestId("page-masthead-dropdown");
+    expect(accountMenu).toBeInTheDocument();
+    expect(accountMenu).toHaveTextContent("Batman");
+
+    // Check "Logout" option is not present
+    expect(screen.queryByText("Logout")).toBeNull();
+
+    // Emulate click on menu button
+    const accountMenuToggle = await screen.findByTestId(
+      "page-masthead-dropdown__button",
+    );
+    await userEvent.click(accountMenuToggle);
+
+    // "Logout" menu option should now be present
+    expect(await screen.findByText("Logout")).toBeInTheDocument();
+
+    // Emulate clicking on the logout button
+    const logoutMenuItem = await screen.findByTestId("app-header__logout");
+    await userEvent.click(logoutMenuItem);
+    expect(window.location.assign).toBeCalledWith("/logout");
+  });
+});
diff --git a/ansible_wisdom_console_react/src/__tests__/BusyButton.test.tsx b/ansible_wisdom_console_react/src/__tests__/BusyButton.test.tsx
index 2b0297505..87edad805 100644
--- a/ansible_wisdom_console_react/src/__tests__/BusyButton.test.tsx
+++ b/ansible_wisdom_console_react/src/__tests__/BusyButton.test.tsx
@@ -1,24 +1,19 @@
-import {render, screen} from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import {BusyButton} from "../BusyButton";
+import { BusyButton } from "../BusyButton";
 
-describe('BusyButton',
-    () => {
+describe("BusyButton", () => {
+  it("Rendering::When busy", async () => {
+    render(<BusyButton isBusy={true} data-testid="busy-button" />);
+    const element = screen.getByTestId("busy-button");
+    expect(element).toBeInTheDocument();
+    expect(element.className).toContain("pf-m-in-progress");
+  });
 
-        it('Rendering::When busy',
-            async () => {
-                render(<BusyButton isBusy={true} data-testid="busy-button"/>);
-                const element = screen.getByTestId("busy-button");
-                expect(element).toBeInTheDocument();
-                expect(element.className).toContain("pf-m-in-progress");
-            });
-
-        it('Rendering::When not busy',
-            async () => {
-                render(<BusyButton isBusy={false} data-testid="busy-button"/>);
-                const element = screen.getByTestId("busy-button");
-                expect(element).toBeInTheDocument();
-                expect(element.className).not.toContain("pf-m-in-progress");
-            });
-
-    });
+  it("Rendering::When not busy", async () => {
+    render(<BusyButton isBusy={false} data-testid="busy-button" />);
+    const element = screen.getByTestId("busy-button");
+    expect(element).toBeInTheDocument();
+    expect(element.className).not.toContain("pf-m-in-progress");
+  });
+});
diff --git a/ansible_wisdom_console_react/src/__tests__/ModelSettings.test.tsx b/ansible_wisdom_console_react/src/__tests__/ModelSettings.test.tsx
index 74f0e4d75..4e253a2fb 100644
--- a/ansible_wisdom_console_react/src/__tests__/ModelSettings.test.tsx
+++ b/ansible_wisdom_console_react/src/__tests__/ModelSettings.test.tsx
@@ -1,91 +1,127 @@
-import {render, screen, waitForElementToBeRemoved} from "@testing-library/react";
+import {
+  render,
+  screen,
+  waitForElementToBeRemoved,
+} from "@testing-library/react";
 import "@testing-library/jest-dom";
-import {ModelSettings} from "../ModelSettings";
+import { ModelSettings } from "../ModelSettings";
 import axios from "axios";
 import userEvent from "@testing-library/user-event";
 
-jest.mock('axios',
-    () => ({
-        get: jest.fn(),
-    }));
+jest.mock("axios", () => ({
+  get: jest.fn(),
+}));
 
-describe('ModelSettings',
-    () => {
-
-        beforeEach(() => jest.resetAllMocks());
-
-        it('Loading API Key',
-            async () => {
-                (axios.get as jest.Mock).mockResolvedValue({"data": {"last_update": new Date()}});
-                render(<ModelSettings/>);
-                expect(screen.getByTestId("model-settings-overview__key-loading")).toBeInTheDocument();
-                await waitForElementToBeRemoved(() => screen.queryByTestId("model-settings-overview__key-loading"));
-            });
-
-        it('Loading Model Id',
-            async () => {
-                (axios.get as jest.Mock).mockResolvedValue({"data": {"last_update": new Date()}});
-                render(<ModelSettings/>);
-                expect(screen.getByTestId("model-settings-overview__model-id-loading")).toBeInTheDocument();
-                await waitForElementToBeRemoved(() => screen.queryByTestId("model-settings-overview__model-id-loading"));
-            });
-
-        it('API Key Loaded',
-            async () => {
-                (axios.get as jest.Mock).mockResolvedValue({"data": {"last_update": new Date()}});
-                render(<ModelSettings/>);
-                expect(await screen.findByTestId("model-settings-overview__key")).toBeInTheDocument();
-            });
-
-        it('API Key Not Found',
-            async () => {
-                (axios.get as jest.Mock).mockResolvedValue({"data": {}});
-                render(<ModelSettings/>);
-                expect(await screen.findByTestId("model-settings-overview__key-not-found")).toBeInTheDocument();
-            });
-
-        it('Model Id Loaded',
-            async () => {
-                (axios.get as jest.Mock).mockResolvedValue({"data": {"last_update": new Date()}});
-                render(<ModelSettings/>);
-                expect(await screen.findByTestId("model-settings-overview__model-id")).toBeInTheDocument();
-            });
-
-        it('Model Id Key Not Found',
-            async () => {
-                (axios.get as jest.Mock).mockResolvedValue({"data": {}});
-                render(<ModelSettings/>);
-                expect(await screen.findByTestId("model-settings-overview__model-id-not-found")).toBeInTheDocument();
-            });
-
-        it('Render::ModelSettingsKey',
-            async () => {
-                (axios.get as jest.Mock).mockResolvedValue({"data": {"last_update": new Date()}});
-                render(<ModelSettings/>);
-                expect(await screen.findByTestId("model-settings-overview__key")).toBeInTheDocument();
-                expect(await screen.findByTestId("model-settings-overview__model-id")).toBeInTheDocument();
-
-                // Emulate User clicking on "Update Key" button
-                const editButton = await screen.findByTestId("model-settings-overview__update-key-button");
-                await userEvent.click(editButton);
-
-                // The ModelSettingsKey component should be rendered
-                expect(await screen.findByTestId("model-settings-editor__editor")).toBeInTheDocument();
-            });
-
-        it('Render::ModelSettingsModelId',
-            async () => {
-                (axios.get as jest.Mock).mockResolvedValue({"data": {"last_update": new Date()}});
-                render(<ModelSettings/>);
-                expect(await screen.findByTestId("model-settings-overview__key")).toBeInTheDocument();
-                expect(await screen.findByTestId("model-settings-overview__model-id")).toBeInTheDocument();
-
-                // Emulate User clicking on "Update Model Id" button
-                const editButton = await screen.findByTestId("model-settings-overview__update-model-id-button");
-                await userEvent.click(editButton);
-
-                // The ModelSettingsModelId component should be rendered
-                expect(await screen.findByTestId("model-settings-editor__editor")).toBeInTheDocument();
-            });
+describe("ModelSettings", () => {
+  beforeEach(() => jest.resetAllMocks());
 
+  it("Loading API Key", async () => {
+    (axios.get as jest.Mock).mockResolvedValue({
+      data: { last_update: new Date() },
+    });
+    render(<ModelSettings />);
+    expect(
+      screen.getByTestId("model-settings-overview__key-loading"),
+    ).toBeInTheDocument();
+    await waitForElementToBeRemoved(() =>
+      screen.queryByTestId("model-settings-overview__key-loading"),
+    );
+  });
+
+  it("Loading Model Id", async () => {
+    (axios.get as jest.Mock).mockResolvedValue({
+      data: { last_update: new Date() },
+    });
+    render(<ModelSettings />);
+    expect(
+      screen.getByTestId("model-settings-overview__model-id-loading"),
+    ).toBeInTheDocument();
+    await waitForElementToBeRemoved(() =>
+      screen.queryByTestId("model-settings-overview__model-id-loading"),
+    );
+  });
+
+  it("API Key Loaded", async () => {
+    (axios.get as jest.Mock).mockResolvedValue({
+      data: { last_update: new Date() },
+    });
+    render(<ModelSettings />);
+    expect(
+      await screen.findByTestId("model-settings-overview__key"),
+    ).toBeInTheDocument();
+  });
+
+  it("API Key Not Found", async () => {
+    (axios.get as jest.Mock).mockResolvedValue({ data: {} });
+    render(<ModelSettings />);
+    expect(
+      await screen.findByTestId("model-settings-overview__key-not-found"),
+    ).toBeInTheDocument();
+  });
+
+  it("Model Id Loaded", async () => {
+    (axios.get as jest.Mock).mockResolvedValue({
+      data: { last_update: new Date() },
+    });
+    render(<ModelSettings />);
+    expect(
+      await screen.findByTestId("model-settings-overview__model-id"),
+    ).toBeInTheDocument();
+  });
+
+  it("Model Id Key Not Found", async () => {
+    (axios.get as jest.Mock).mockResolvedValue({ data: {} });
+    render(<ModelSettings />);
+    expect(
+      await screen.findByTestId("model-settings-overview__model-id-not-found"),
+    ).toBeInTheDocument();
+  });
+
+  it("Render::ModelSettingsKey", async () => {
+    (axios.get as jest.Mock).mockResolvedValue({
+      data: { last_update: new Date() },
+    });
+    render(<ModelSettings />);
+    expect(
+      await screen.findByTestId("model-settings-overview__key"),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByTestId("model-settings-overview__model-id"),
+    ).toBeInTheDocument();
+
+    // Emulate User clicking on "Update Key" button
+    const editButton = await screen.findByTestId(
+      "model-settings-overview__update-key-button",
+    );
+    await userEvent.click(editButton);
+
+    // The ModelSettingsKey component should be rendered
+    expect(
+      await screen.findByTestId("model-settings-editor__editor"),
+    ).toBeInTheDocument();
+  });
+
+  it("Render::ModelSettingsModelId", async () => {
+    (axios.get as jest.Mock).mockResolvedValue({
+      data: { last_update: new Date() },
     });
+    render(<ModelSettings />);
+    expect(
+      await screen.findByTestId("model-settings-overview__key"),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByTestId("model-settings-overview__model-id"),
+    ).toBeInTheDocument();
+
+    // Emulate User clicking on "Update Model Id" button
+    const editButton = await screen.findByTestId(
+      "model-settings-overview__update-model-id-button",
+    );
+    await userEvent.click(editButton);
+
+    // The ModelSettingsModelId component should be rendered
+    expect(
+      await screen.findByTestId("model-settings-editor__editor"),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/ansible_wisdom_console_react/src/__tests__/ModelSettingsKey.test.tsx b/ansible_wisdom_console_react/src/__tests__/ModelSettingsKey.test.tsx
index bf52b04d2..d4e326a6a 100644
--- a/ansible_wisdom_console_react/src/__tests__/ModelSettingsKey.test.tsx
+++ b/ansible_wisdom_console_react/src/__tests__/ModelSettingsKey.test.tsx
@@ -1,132 +1,162 @@
-import {render, screen} from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import {ModelSettingsKey} from "../ModelSettingsKey";
-import {WcaKey} from "../api/types";
+import { ModelSettingsKey } from "../ModelSettingsKey";
+import { WcaKey } from "../api/types";
 import userEvent from "@testing-library/user-event";
 import axios from "axios";
 
-jest.mock('axios',
-    () => ({
-        get: jest.fn(),
-        post: jest.fn(),
-    }));
-
-describe('ModelSettingsKey',
-    () => {
-
-        const mockReload = jest.fn();
-        const mockCancel = jest.fn();
-
-        beforeEach(() => jest.resetAllMocks());
-
-        it('Loaded',
-            async () => {
-                const wcaKey: WcaKey = {status: "SUCCESS", data: {lastUpdate: new Date()}};
-
-                render(
-                    <ModelSettingsKey
-                        wcaKey={wcaKey}
-                        reload={mockReload}
-                        cancel={mockCancel}
-                    />
-                );
-                expect(await screen.findByTestId("model-settings-editor__bread-crumbs")).toBeInTheDocument();
-                expect(await screen.findByTestId("model-settings-editor__editor")).toBeInTheDocument();
-                expect(await screen.findByTestId("model-settings-editor__save-button")).toBeInTheDocument();
-                expect(await screen.findByTestId("model-settings-editor__cancel-button")).toBeInTheDocument();
-            });
-
-        it('Click::Save::Success',
-            async () => {
-                const wcaKey: WcaKey = {status: "SUCCESS", data: {lastUpdate: new Date()}};
-                (axios.post as jest.Mock).mockResolvedValue({});
-
-                render(
-                    <ModelSettingsKey
-                        wcaKey={wcaKey}
-                        reload={mockReload}
-                        cancel={mockCancel}
-                    />
-                );
-
-                // Emulate a key being entered
-                const keyTextbox = await screen.findByTestId("model-settings-editor__input");
-                await userEvent.type(keyTextbox, "a-new-key");
-
-                // Emulate click on "Save" button
-                const saveButton = await screen.findByTestId("model-settings-editor__save-button");
-                await userEvent.click(saveButton);
-
-                expect(mockReload).toBeCalled();
-            });
-
-        it('Click::Save::Failure',
-            async () => {
-                const wcaKey: WcaKey = {status: "SUCCESS", data: {lastUpdate: new Date()}};
-                (axios.post as jest.Mock).mockRejectedValue({"response": {"status": 400}});
-
-                render(
-                    <ModelSettingsKey
-                        wcaKey={wcaKey}
-                        reload={mockReload}
-                        cancel={mockCancel}
-                    />
-                );
-
-                // Emulate a key being entered
-                const keyTextbox = await screen.findByTestId("model-settings-editor__input");
-                await userEvent.type(keyTextbox, "a-new-key");
-
-                // Emulate click on "Save" button
-                const saveButton = await screen.findByTestId("model-settings-editor__save-button");
-                await userEvent.click(saveButton);
-
-                const alert = await screen.findByTestId("model-settings-editor__alert-invalid");
-                expect(alert).toBeInTheDocument();
-            });
-
-        it('Click::Save::Failure::Error',
-            async () => {
-                const wcaKey: WcaKey = {status: "SUCCESS", data: {lastUpdate: new Date()}};
-                (axios.post as jest.Mock).mockRejectedValue({"response": {"status": 500}});
-
-                render(
-                    <ModelSettingsKey
-                        wcaKey={wcaKey}
-                        reload={mockReload}
-                        cancel={mockCancel}
-                    />
-                );
-
-                // Emulate a key being entered
-                const keyTextbox = await screen.findByTestId("model-settings-editor__input");
-                await userEvent.type(keyTextbox, "a-new-key");
-
-                // Emulate click on "Save" button
-                const saveButton = await screen.findByTestId("model-settings-editor__save-button");
-                await userEvent.click(saveButton);
-
-                // Modals are added to the 'document.body' so perform a basic check for a known field.
-                expect(document.body).toHaveTextContent("KeyError")
-            });
-
-        it('Click::Cancel',
-            async () => {
-                const wcaKey: WcaKey = {status: "SUCCESS", data: {lastUpdate: new Date()}};
-
-                render(
-                    <ModelSettingsKey
-                        wcaKey={wcaKey}
-                        reload={mockReload}
-                        cancel={mockCancel}
-                    />
-                );
-
-                // Emulate click on "Cancel" button
-                const cancelButton = await screen.findByTestId("model-settings-editor__cancel-button");
-                await userEvent.click(cancelButton);
-
-                expect(mockCancel).toBeCalled();
-            });
-
-    });
+jest.mock("axios", () => ({
+  get: jest.fn(),
+  post: jest.fn(),
+}));
+
+describe("ModelSettingsKey", () => {
+  const mockReload = jest.fn();
+  const mockCancel = jest.fn();
+
+  beforeEach(() => jest.resetAllMocks());
+
+  it("Loaded", async () => {
+    const wcaKey: WcaKey = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date() },
+    };
+
+    render(
+      <ModelSettingsKey
+        wcaKey={wcaKey}
+        reload={mockReload}
+        cancel={mockCancel}
+      />,
+    );
+    expect(
+      await screen.findByTestId("model-settings-editor__bread-crumbs"),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByTestId("model-settings-editor__editor"),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByTestId("model-settings-editor__save-button"),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByTestId("model-settings-editor__cancel-button"),
+    ).toBeInTheDocument();
+  });
+
+  it("Click::Save::Success", async () => {
+    const wcaKey: WcaKey = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date() },
+    };
+    (axios.post as jest.Mock).mockResolvedValue({});
+
+    render(
+      <ModelSettingsKey
+        wcaKey={wcaKey}
+        reload={mockReload}
+        cancel={mockCancel}
+      />,
+    );
+
+    // Emulate a key being entered
+    const keyTextbox = await screen.findByTestId(
+      "model-settings-editor__input",
+    );
+    await userEvent.type(keyTextbox, "a-new-key");
+
+    // Emulate click on "Save" button
+    const saveButton = await screen.findByTestId(
+      "model-settings-editor__save-button",
+    );
+    await userEvent.click(saveButton);
+
+    expect(mockReload).toBeCalled();
+  });
+
+  it("Click::Save::Failure", async () => {
+    const wcaKey: WcaKey = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date() },
+    };
+    (axios.post as jest.Mock).mockRejectedValue({ response: { status: 400 } });
+
+    render(
+      <ModelSettingsKey
+        wcaKey={wcaKey}
+        reload={mockReload}
+        cancel={mockCancel}
+      />,
+    );
+
+    // Emulate a key being entered
+    const keyTextbox = await screen.findByTestId(
+      "model-settings-editor__input",
+    );
+    await userEvent.type(keyTextbox, "a-new-key");
+
+    // Emulate click on "Save" button
+    const saveButton = await screen.findByTestId(
+      "model-settings-editor__save-button",
+    );
+    await userEvent.click(saveButton);
+
+    const alert = await screen.findByTestId(
+      "model-settings-editor__alert-invalid",
+    );
+    expect(alert).toBeInTheDocument();
+  });
+
+  it("Click::Save::Failure::Error", async () => {
+    const wcaKey: WcaKey = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date() },
+    };
+    (axios.post as jest.Mock).mockRejectedValue({ response: { status: 500 } });
+
+    render(
+      <ModelSettingsKey
+        wcaKey={wcaKey}
+        reload={mockReload}
+        cancel={mockCancel}
+      />,
+    );
+
+    // Emulate a key being entered
+    const keyTextbox = await screen.findByTestId(
+      "model-settings-editor__input",
+    );
+    await userEvent.type(keyTextbox, "a-new-key");
+
+    // Emulate click on "Save" button
+    const saveButton = await screen.findByTestId(
+      "model-settings-editor__save-button",
+    );
+    await userEvent.click(saveButton);
+
+    // Modals are added to the 'document.body' so perform a basic check for a known field.
+    expect(document.body).toHaveTextContent("KeyError");
+  });
+
+  it("Click::Cancel", async () => {
+    const wcaKey: WcaKey = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date() },
+    };
+
+    render(
+      <ModelSettingsKey
+        wcaKey={wcaKey}
+        reload={mockReload}
+        cancel={mockCancel}
+      />,
+    );
+
+    // Emulate click on "Cancel" button
+    const cancelButton = await screen.findByTestId(
+      "model-settings-editor__cancel-button",
+    );
+    await userEvent.click(cancelButton);
+
+    expect(mockCancel).toBeCalled();
+  });
+});
diff --git a/ansible_wisdom_console_react/src/__tests__/ModelSettingsModelId.test.tsx b/ansible_wisdom_console_react/src/__tests__/ModelSettingsModelId.test.tsx
index 428f63a87..8448b30c1 100644
--- a/ansible_wisdom_console_react/src/__tests__/ModelSettingsModelId.test.tsx
+++ b/ansible_wisdom_console_react/src/__tests__/ModelSettingsModelId.test.tsx
@@ -1,132 +1,162 @@
-import {render, screen} from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import {ModelSettingsModelId} from "../ModelSettingsModelId";
-import {WcaModelId} from "../api/types";
+import { ModelSettingsModelId } from "../ModelSettingsModelId";
+import { WcaModelId } from "../api/types";
 import userEvent from "@testing-library/user-event";
 import axios from "axios";
 
-jest.mock('axios',
-    () => ({
-        get: jest.fn(),
-        post: jest.fn(),
-    }));
-
-describe('ModelSettingsModelId',
-    () => {
-
-        const mockReload = jest.fn();
-        const mockCancel = jest.fn();
-
-        beforeEach(() => jest.resetAllMocks());
-
-        it('Loaded',
-            async () => {
-                const wcaModelId: WcaModelId = {status: "SUCCESS", data: {lastUpdate: new Date(), model_id: "model_id"}};
-
-                render(
-                    <ModelSettingsModelId
-                        wcaModelId={wcaModelId}
-                        reload={mockReload}
-                        cancel={mockCancel}
-                    />
-                );
-                expect(await screen.findByTestId("model-settings-editor__bread-crumbs")).toBeInTheDocument();
-                expect(await screen.findByTestId("model-settings-editor__editor")).toBeInTheDocument();
-                expect(await screen.findByTestId("model-settings-editor__save-button")).toBeInTheDocument();
-                expect(await screen.findByTestId("model-settings-editor__cancel-button")).toBeInTheDocument();
-            });
-
-        it('Click::Save::Success',
-            async () => {
-                const wcaModelId: WcaModelId = {status: "SUCCESS", data: {lastUpdate: new Date(), model_id: "model_id"}};
-                (axios.post as jest.Mock).mockResolvedValue({});
-
-                render(
-                    <ModelSettingsModelId
-                        wcaModelId={wcaModelId}
-                        reload={mockReload}
-                        cancel={mockCancel}
-                    />
-                );
-
-                // Emulate a key being entered
-                const keyTextbox = await screen.findByTestId("model-settings-editor__input");
-                await userEvent.type(keyTextbox, "a-new-key");
-
-                // Emulate click on "Save" button
-                const saveButton = await screen.findByTestId("model-settings-editor__save-button");
-                await userEvent.click(saveButton);
-
-                expect(mockReload).toBeCalled();
-            });
-
-        it('Click::Save::Failure',
-            async () => {
-                const wcaModelId: WcaModelId = {status: "SUCCESS", data: {lastUpdate: new Date(), model_id: "model_id"}};
-                (axios.post as jest.Mock).mockRejectedValue({"response": {"status": 400}});
-
-                render(
-                    <ModelSettingsModelId
-                        wcaModelId={wcaModelId}
-                        reload={mockReload}
-                        cancel={mockCancel}
-                    />
-                );
-
-                // Emulate a key being entered
-                const keyTextbox = await screen.findByTestId("model-settings-editor__input");
-                await userEvent.type(keyTextbox, "a-new-key");
-
-                // Emulate click on "Save" button
-                const saveButton = await screen.findByTestId("model-settings-editor__save-button");
-                await userEvent.click(saveButton);
-
-                const alert = await screen.findByTestId("model-settings-editor__alert-invalid");
-                expect(alert).toBeInTheDocument();
-            });
-
-        it('Click::Save::Failure::Error',
-            async () => {
-                const wcaModelId: WcaModelId = {status: "SUCCESS", data: {lastUpdate: new Date(), model_id: "model_id"}};
-                (axios.post as jest.Mock).mockRejectedValue({"response": {"status": 500}});
-
-                render(
-                    <ModelSettingsModelId
-                        wcaModelId={wcaModelId}
-                        reload={mockReload}
-                        cancel={mockCancel}
-                    />
-                );
-
-                // Emulate a key being entered
-                const keyTextbox = await screen.findByTestId("model-settings-editor__input");
-                await userEvent.type(keyTextbox, "a-new-key");
-
-                // Emulate click on "Save" button
-                const saveButton = await screen.findByTestId("model-settings-editor__save-button");
-                await userEvent.click(saveButton);
-
-                // Modals are added to the 'document.body' so perform a basic check for a known field.
-                expect(document.body).toHaveTextContent("ModelIdError")
-            });
-
-        it('Click::Cancel',
-            async () => {
-                const wcaModelId: WcaModelId = {status: "SUCCESS", data: {lastUpdate: new Date(), model_id: "model_id"}};
-
-                render(
-                    <ModelSettingsModelId
-                        wcaModelId={wcaModelId}
-                        reload={mockReload}
-                        cancel={mockCancel}
-                    />
-                );
-
-                // Emulate click on "Cancel" button
-                const cancelButton = await screen.findByTestId("model-settings-editor__cancel-button");
-                await userEvent.click(cancelButton);
-
-                expect(mockCancel).toBeCalled();
-            });
-
-    });
+jest.mock("axios", () => ({
+  get: jest.fn(),
+  post: jest.fn(),
+}));
+
+describe("ModelSettingsModelId", () => {
+  const mockReload = jest.fn();
+  const mockCancel = jest.fn();
+
+  beforeEach(() => jest.resetAllMocks());
+
+  it("Loaded", async () => {
+    const wcaModelId: WcaModelId = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date(), model_id: "model_id" },
+    };
+
+    render(
+      <ModelSettingsModelId
+        wcaModelId={wcaModelId}
+        reload={mockReload}
+        cancel={mockCancel}
+      />,
+    );
+    expect(
+      await screen.findByTestId("model-settings-editor__bread-crumbs"),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByTestId("model-settings-editor__editor"),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByTestId("model-settings-editor__save-button"),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByTestId("model-settings-editor__cancel-button"),
+    ).toBeInTheDocument();
+  });
+
+  it("Click::Save::Success", async () => {
+    const wcaModelId: WcaModelId = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date(), model_id: "model_id" },
+    };
+    (axios.post as jest.Mock).mockResolvedValue({});
+
+    render(
+      <ModelSettingsModelId
+        wcaModelId={wcaModelId}
+        reload={mockReload}
+        cancel={mockCancel}
+      />,
+    );
+
+    // Emulate a key being entered
+    const keyTextbox = await screen.findByTestId(
+      "model-settings-editor__input",
+    );
+    await userEvent.type(keyTextbox, "a-new-key");
+
+    // Emulate click on "Save" button
+    const saveButton = await screen.findByTestId(
+      "model-settings-editor__save-button",
+    );
+    await userEvent.click(saveButton);
+
+    expect(mockReload).toBeCalled();
+  });
+
+  it("Click::Save::Failure", async () => {
+    const wcaModelId: WcaModelId = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date(), model_id: "model_id" },
+    };
+    (axios.post as jest.Mock).mockRejectedValue({ response: { status: 400 } });
+
+    render(
+      <ModelSettingsModelId
+        wcaModelId={wcaModelId}
+        reload={mockReload}
+        cancel={mockCancel}
+      />,
+    );
+
+    // Emulate a key being entered
+    const keyTextbox = await screen.findByTestId(
+      "model-settings-editor__input",
+    );
+    await userEvent.type(keyTextbox, "a-new-key");
+
+    // Emulate click on "Save" button
+    const saveButton = await screen.findByTestId(
+      "model-settings-editor__save-button",
+    );
+    await userEvent.click(saveButton);
+
+    const alert = await screen.findByTestId(
+      "model-settings-editor__alert-invalid",
+    );
+    expect(alert).toBeInTheDocument();
+  });
+
+  it("Click::Save::Failure::Error", async () => {
+    const wcaModelId: WcaModelId = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date(), model_id: "model_id" },
+    };
+    (axios.post as jest.Mock).mockRejectedValue({ response: { status: 500 } });
+
+    render(
+      <ModelSettingsModelId
+        wcaModelId={wcaModelId}
+        reload={mockReload}
+        cancel={mockCancel}
+      />,
+    );
+
+    // Emulate a key being entered
+    const keyTextbox = await screen.findByTestId(
+      "model-settings-editor__input",
+    );
+    await userEvent.type(keyTextbox, "a-new-key");
+
+    // Emulate click on "Save" button
+    const saveButton = await screen.findByTestId(
+      "model-settings-editor__save-button",
+    );
+    await userEvent.click(saveButton);
+
+    // Modals are added to the 'document.body' so perform a basic check for a known field.
+    expect(document.body).toHaveTextContent("ModelIdError");
+  });
+
+  it("Click::Cancel", async () => {
+    const wcaModelId: WcaModelId = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date(), model_id: "model_id" },
+    };
+
+    render(
+      <ModelSettingsModelId
+        wcaModelId={wcaModelId}
+        reload={mockReload}
+        cancel={mockCancel}
+      />,
+    );
+
+    // Emulate click on "Cancel" button
+    const cancelButton = await screen.findByTestId(
+      "model-settings-editor__cancel-button",
+    );
+    await userEvent.click(cancelButton);
+
+    expect(mockCancel).toBeCalled();
+  });
+});
diff --git a/ansible_wisdom_console_react/src/__tests__/ModelSettingsOverview.test.tsx b/ansible_wisdom_console_react/src/__tests__/ModelSettingsOverview.test.tsx
index 75e23ef09..66091e115 100644
--- a/ansible_wisdom_console_react/src/__tests__/ModelSettingsOverview.test.tsx
+++ b/ansible_wisdom_console_react/src/__tests__/ModelSettingsOverview.test.tsx
@@ -1,350 +1,449 @@
-import {render, screen} from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import {ModelSettingsOverview} from "../ModelSettingsOverview";
-import {WcaKey, WcaModelId} from "../api/types";
+import { ModelSettingsOverview } from "../ModelSettingsOverview";
+import { WcaKey, WcaModelId } from "../api/types";
 import userEvent from "@testing-library/user-event";
 import axios from "axios";
 
-jest.mock('axios',
-    () => ({
-        get: jest.fn(),
-    }));
-
-describe('ModelSettingsOverview',
-    () => {
-
-        const setModeToKey = jest.fn();
-        const setModeToModelId = jest.fn();
-
-        beforeEach(() => jest.resetAllMocks());
-
-        it('Loading',
-            async () => {
-                const wcaKey: WcaKey = {status: "LOADING"};
-                const wcaModelId: WcaModelId = {status: "LOADING"};
-
-                render(
-                    <ModelSettingsOverview
-                        wcaKey={wcaKey}
-                        wcaModelId={wcaModelId}
-                        setModeToKey={setModeToKey}
-                        setModeToModelId={setModeToModelId}
-                    />
-                );
-                expect(await screen.findByTestId("model-settings-overview__key-loading")).toBeInTheDocument();
-                expect(await screen.findByTestId("model-settings-overview__model-id-loading")).toBeInTheDocument();
-            });
-
-        it('Loaded::Not found',
-            async () => {
-                const wcaKey: WcaKey = {status: "SUCCESS_NOT_FOUND"};
-                const wcaModelId: WcaModelId = {status: "SUCCESS_NOT_FOUND"};
-
-                render(
-                    <ModelSettingsOverview
-                        wcaKey={wcaKey}
-                        wcaModelId={wcaModelId}
-                        setModeToKey={setModeToKey}
-                        setModeToModelId={setModeToModelId}
-                    />
-                );
-                expect(await screen.findByTestId("model-settings-overview__key-not-found")).toBeInTheDocument();
-                expect(await screen.findByTestId("model-settings-overview__add-key-button")).toBeInTheDocument();
-
-                expect(await screen.findByTestId("model-settings-overview__model-id-not-found")).toBeInTheDocument();
-                expect(await screen.findByTestId("model-settings-overview__add-model-id-button")).toBeInTheDocument();
-            });
-
-        it('Loaded::Found',
-            async () => {
-                const wcaKey: WcaKey = {status: "SUCCESS", data: {lastUpdate: new Date()}};
-                const wcaModelId: WcaModelId = {status: "SUCCESS", data: {lastUpdate: new Date(), model_id: "model_id"}};
-
-                render(
-                    <ModelSettingsOverview
-                        wcaKey={wcaKey}
-                        wcaModelId={wcaModelId}
-                        setModeToKey={setModeToKey}
-                        setModeToModelId={setModeToModelId}
-                    />
-                );
-                expect(await screen.findByTestId("model-settings-overview__key")).toBeInTheDocument();
-                expect(await screen.findByTestId("model-settings-overview__update-key-button")).toBeInTheDocument();
-
-                expect(await screen.findByTestId("model-settings-overview__model-id")).toBeInTheDocument();
-                expect(await screen.findByTestId("model-settings-overview__update-model-id-button")).toBeInTheDocument();
-            });
-
-        it('Add::Key',
-            async () => {
-                const wcaKey: WcaKey = {status: "SUCCESS_NOT_FOUND"};
-                const wcaModelId: WcaModelId = {status: "SUCCESS_NOT_FOUND"};
-
-                render(
-                    <ModelSettingsOverview
-                        wcaKey={wcaKey}
-                        wcaModelId={wcaModelId}
-                        setModeToKey={setModeToKey}
-                        setModeToModelId={setModeToModelId}
-                    />
-                );
-
-                // Emulate click on "Add Key" button
-                const addKeyButton = await screen.findByTestId("model-settings-overview__add-key-button");
-                await userEvent.click(addKeyButton);
-
-                expect(setModeToKey).toBeCalled();
-            });
-
-        it('Update::Key',
-            async () => {
-                const wcaKey: WcaKey = {status: "SUCCESS", data: {lastUpdate: new Date()}};
-                const wcaModelId: WcaModelId = {status: "SUCCESS", data: {lastUpdate: new Date(), model_id: "model_id"}};
-
-                render(
-                    <ModelSettingsOverview
-                        wcaKey={wcaKey}
-                        wcaModelId={wcaModelId}
-                        setModeToKey={setModeToKey}
-                        setModeToModelId={setModeToModelId}
-                    />
-                );
-
-                // Emulate click on "Update Key" button
-                const updateKeyButton = await screen.findByTestId("model-settings-overview__update-key-button");
-                await userEvent.click(updateKeyButton);
-
-                expect(setModeToKey).toBeCalled();
-            });
-
-        it('Add::ModelId::APIKeyFound',
-            async () => {
-                const wcaKey: WcaKey = {status: "SUCCESS", data: {lastUpdate: new Date()}};
-                const wcaModelId: WcaModelId = {status: "SUCCESS_NOT_FOUND"};
-
-                render(
-                    <ModelSettingsOverview
-                        wcaKey={wcaKey}
-                        wcaModelId={wcaModelId}
-                        setModeToKey={setModeToKey}
-                        setModeToModelId={setModeToModelId}
-                    />
-                );
-
-                // Emulate click on "Add Model ID" button
-                const addModelIdButton = await screen.findByTestId("model-settings-overview__add-model-id-button");
-                await userEvent.click(addModelIdButton);
-
-                expect(setModeToModelId).toBeCalled();
-            });
-
-        it('Add::ModelId::APIKeyNotFound',
-            async () => {
-                const wcaKey: WcaKey = {status: "SUCCESS_NOT_FOUND"};
-                const wcaModelId: WcaModelId = {status: "SUCCESS_NOT_FOUND"};
-
-                render(
-                    <ModelSettingsOverview
-                        wcaKey={wcaKey}
-                        wcaModelId={wcaModelId}
-                        setModeToKey={setModeToKey}
-                        setModeToModelId={setModeToModelId}
-                    />
-                );
-
-                const alert = await screen.findByTestId("model-settings-overview__model-id-set-api-key-first");
-                expect(alert).toHaveTextContent("NoModelIdNoAPIKey");
-
-                const addModelIdButton = await screen.findByTestId("model-settings-overview__add-model-id-button");
-                expect(addModelIdButton).toBeDisabled();
-            });
-
-        it('Update::ModelId',
-            async () => {
-                const wcaKey: WcaKey = {status: "SUCCESS", data: {lastUpdate: new Date()}};
-                const wcaModelId: WcaModelId = {status: "SUCCESS", data: {lastUpdate: new Date(), model_id: "model_id"}};
-
-                render(
-                    <ModelSettingsOverview
-                        wcaKey={wcaKey}
-                        wcaModelId={wcaModelId}
-                        setModeToKey={setModeToKey}
-                        setModeToModelId={setModeToModelId}
-                    />
-                );
-
-                // Emulate click on "Update Model ID" button
-                const updateModelIdButton = await screen.findByTestId("model-settings-overview__update-model-id-button");
-                await userEvent.click(updateModelIdButton);
-
-                expect(setModeToModelId).toBeCalled();
-            });
-
-        it('Validate::Key::Success',
-            async () => {
-                const wcaKey: WcaKey = {status: "SUCCESS", data: {lastUpdate: new Date()}};
-                const wcaModelId: WcaModelId = {status: "SUCCESS", data: {lastUpdate: new Date(), model_id: "model_id"}};
-                (axios.get as jest.Mock).mockResolvedValue({});
-
-                render(
-                    <ModelSettingsOverview
-                        wcaKey={wcaKey}
-                        wcaModelId={wcaModelId}
-                        setModeToKey={setModeToKey}
-                        setModeToModelId={setModeToModelId}
-                    />
-                );
-
-                // Emulate click on "Test [Key]" button
-                const testKeyButton = await screen.findByTestId("model-settings-overview__key-test-button");
-                await userEvent.click(testKeyButton);
-
-                const alert = await screen.findByTestId("alert");
-                expect(alert).toHaveTextContent("KeyValidationSuccess");
-            });
-
-        it('Validate::Key::Failure',
-            async () => {
-                const wcaKey: WcaKey = {status: "SUCCESS", data: {lastUpdate: new Date()}};
-                const wcaModelId: WcaModelId = {status: "SUCCESS", data: {lastUpdate: new Date(), model_id: "model_id"}};
-                (axios.get as jest.Mock).mockRejectedValue({"response": {"status": 400}});
-
-                render(
-                    <ModelSettingsOverview
-                        wcaKey={wcaKey}
-                        wcaModelId={wcaModelId}
-                        setModeToKey={setModeToKey}
-                        setModeToModelId={setModeToModelId}
-                    />
-                );
-
-                // Emulate click on "Test [Key]" button
-                const testKeyButton = await screen.findByTestId("model-settings-overview__key-test-button");
-                await userEvent.click(testKeyButton);
-
-                const alert = await screen.findByTestId("model-settings-overview__alert-key-invalid");
-                expect(alert).toBeInTheDocument();
-            });
-
-        it('Validate::Key::Failure::Error',
-            async () => {
-                const wcaKey: WcaKey = {status: "SUCCESS", data: {lastUpdate: new Date()}};
-                const wcaModelId: WcaModelId = {status: "SUCCESS", data: {lastUpdate: new Date(), model_id: "model_id"}};
-                (axios.get as jest.Mock).mockRejectedValue({"response": {"status": 500}});
-
-                render(
-                    <ModelSettingsOverview
-                        wcaKey={wcaKey}
-                        wcaModelId={wcaModelId}
-                        setModeToKey={setModeToKey}
-                        setModeToModelId={setModeToModelId}
-                    />
-                );
-
-                // Emulate click on "Test [Key]" button
-                const testKeyButton = await screen.findByTestId("model-settings-overview__key-test-button");
-                await userEvent.click(testKeyButton);
-
-                // Modals are added to the 'document.body' so perform a basic check for a known field.
-                expect(document.body).toHaveTextContent("KeyValidationError")
-            });
-
-        it('Validate::ModelId::Success',
-            async () => {
-                const wcaKey: WcaKey = {status: "SUCCESS", data: {lastUpdate: new Date()}};
-                const wcaModelId: WcaModelId = {status: "SUCCESS", data: {lastUpdate: new Date(), model_id: "model_id"}};
-                (axios.get as jest.Mock).mockResolvedValue({});
-
-                render(
-                    <ModelSettingsOverview
-                        wcaKey={wcaKey}
-                        wcaModelId={wcaModelId}
-                        setModeToKey={setModeToKey}
-                        setModeToModelId={setModeToModelId}
-                    />
-                );
-
-                // Emulate click on "Test [ModelId]" button
-                const testModelIdButton = await screen.findByTestId("model-settings-overview__model-id-test-button");
-                await userEvent.click(testModelIdButton);
-
-                const alert = await screen.findByTestId("alert");
-                expect(alert).toHaveTextContent("ModelIdValidationSuccess");
-            });
-
-        it('Validate::ModelId::Failure',
-            async () => {
-                const wcaKey: WcaKey = {status: "SUCCESS", data: {lastUpdate: new Date()}};
-                const wcaModelId: WcaModelId = {status: "SUCCESS", data: {lastUpdate: new Date(), model_id: "model_id"}};
-                (axios.get as jest.Mock).mockRejectedValue({"response": {"status": 400}});
-
-                render(
-                    <ModelSettingsOverview
-                        wcaKey={wcaKey}
-                        wcaModelId={wcaModelId}
-                        setModeToKey={setModeToKey}
-                        setModeToModelId={setModeToModelId}
-                    />
-                );
-
-                // Emulate click on "Test [ModelId]" button
-                const testModelIdButton = await screen.findByTestId("model-settings-overview__model-id-test-button");
-                await userEvent.click(testModelIdButton);
-
-                const alert = await screen.findByTestId("model-settings-overview__alert-model-id-invalid");
-                expect(alert).toBeInTheDocument();
-            });
-
-        it('Validate::ModelId::TrialExpired',
-            async () => {
-                const wcaKey: WcaKey = {status: "SUCCESS", data: {lastUpdate: new Date()}};
-                const wcaModelId: WcaModelId = {status: "SUCCESS", data: {lastUpdate: new Date(), model_id: "model_id"}};
-                (axios.get as jest.Mock).mockRejectedValue({"response": {
-                    "status": 403,
-                    "data": {
-                        "status_code": 403,
-                        "code": "permission_denied__user_trial_expired",
-                        "detail": "User trial expired. Please contact your administrator.",
-                }}});
-
-                render(
-                    <ModelSettingsOverview
-                        wcaKey={wcaKey}
-                        wcaModelId={wcaModelId}
-                        setModeToKey={setModeToKey}
-                        setModeToModelId={setModeToModelId}
-                    />
-                );
-
-                // Emulate click on "Test [ModelId]" button
-                const testKeyButton = await screen.findByTestId("model-settings-overview__model-id-test-button");
-                await userEvent.click(testKeyButton);
-
-                // Modals are added to the 'document.body' so perform a basic check for a known field.
-                expect(document.body).toHaveTextContent("ModelIdValidationTrialExpired")
-            });
-
-        it('Validate::ModelId::Failure::Error',
-            async () => {
-                const wcaKey: WcaKey = {status: "SUCCESS", data: {lastUpdate: new Date()}};
-                const wcaModelId: WcaModelId = {status: "SUCCESS", data: {lastUpdate: new Date(), model_id: "model_id"}};
-                (axios.get as jest.Mock).mockRejectedValue({"response": {"status": 500}});
-
-                render(
-                    <ModelSettingsOverview
-                        wcaKey={wcaKey}
-                        wcaModelId={wcaModelId}
-                        setModeToKey={setModeToKey}
-                        setModeToModelId={setModeToModelId}
-                    />
-                );
-
-                // Emulate click on "Test [ModelId]" button
-                const testKeyButton = await screen.findByTestId("model-settings-overview__model-id-test-button");
-                await userEvent.click(testKeyButton);
-
-                // Modals are added to the 'document.body' so perform a basic check for a known field.
-                expect(document.body).toHaveTextContent("ModelIdValidationError")
-            });
-
+jest.mock("axios", () => ({
+  get: jest.fn(),
+}));
+
+describe("ModelSettingsOverview", () => {
+  const setModeToKey = jest.fn();
+  const setModeToModelId = jest.fn();
+
+  beforeEach(() => jest.resetAllMocks());
+
+  it("Loading", async () => {
+    const wcaKey: WcaKey = { status: "LOADING" };
+    const wcaModelId: WcaModelId = { status: "LOADING" };
+
+    render(
+      <ModelSettingsOverview
+        wcaKey={wcaKey}
+        wcaModelId={wcaModelId}
+        setModeToKey={setModeToKey}
+        setModeToModelId={setModeToModelId}
+      />,
+    );
+    expect(
+      await screen.findByTestId("model-settings-overview__key-loading"),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByTestId("model-settings-overview__model-id-loading"),
+    ).toBeInTheDocument();
+  });
+
+  it("Loaded::Not found", async () => {
+    const wcaKey: WcaKey = { status: "SUCCESS_NOT_FOUND" };
+    const wcaModelId: WcaModelId = { status: "SUCCESS_NOT_FOUND" };
+
+    render(
+      <ModelSettingsOverview
+        wcaKey={wcaKey}
+        wcaModelId={wcaModelId}
+        setModeToKey={setModeToKey}
+        setModeToModelId={setModeToModelId}
+      />,
+    );
+    expect(
+      await screen.findByTestId("model-settings-overview__key-not-found"),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByTestId("model-settings-overview__add-key-button"),
+    ).toBeInTheDocument();
+
+    expect(
+      await screen.findByTestId("model-settings-overview__model-id-not-found"),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByTestId("model-settings-overview__add-model-id-button"),
+    ).toBeInTheDocument();
+  });
+
+  it("Loaded::Found", async () => {
+    const wcaKey: WcaKey = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date() },
+    };
+    const wcaModelId: WcaModelId = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date(), model_id: "model_id" },
+    };
+
+    render(
+      <ModelSettingsOverview
+        wcaKey={wcaKey}
+        wcaModelId={wcaModelId}
+        setModeToKey={setModeToKey}
+        setModeToModelId={setModeToModelId}
+      />,
+    );
+    expect(
+      await screen.findByTestId("model-settings-overview__key"),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByTestId("model-settings-overview__update-key-button"),
+    ).toBeInTheDocument();
+
+    expect(
+      await screen.findByTestId("model-settings-overview__model-id"),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByTestId(
+        "model-settings-overview__update-model-id-button",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("Add::Key", async () => {
+    const wcaKey: WcaKey = { status: "SUCCESS_NOT_FOUND" };
+    const wcaModelId: WcaModelId = { status: "SUCCESS_NOT_FOUND" };
+
+    render(
+      <ModelSettingsOverview
+        wcaKey={wcaKey}
+        wcaModelId={wcaModelId}
+        setModeToKey={setModeToKey}
+        setModeToModelId={setModeToModelId}
+      />,
+    );
+
+    // Emulate click on "Add Key" button
+    const addKeyButton = await screen.findByTestId(
+      "model-settings-overview__add-key-button",
+    );
+    await userEvent.click(addKeyButton);
+
+    expect(setModeToKey).toBeCalled();
+  });
+
+  it("Update::Key", async () => {
+    const wcaKey: WcaKey = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date() },
+    };
+    const wcaModelId: WcaModelId = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date(), model_id: "model_id" },
+    };
+
+    render(
+      <ModelSettingsOverview
+        wcaKey={wcaKey}
+        wcaModelId={wcaModelId}
+        setModeToKey={setModeToKey}
+        setModeToModelId={setModeToModelId}
+      />,
+    );
+
+    // Emulate click on "Update Key" button
+    const updateKeyButton = await screen.findByTestId(
+      "model-settings-overview__update-key-button",
+    );
+    await userEvent.click(updateKeyButton);
+
+    expect(setModeToKey).toBeCalled();
+  });
+
+  it("Add::ModelId::APIKeyFound", async () => {
+    const wcaKey: WcaKey = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date() },
+    };
+    const wcaModelId: WcaModelId = { status: "SUCCESS_NOT_FOUND" };
+
+    render(
+      <ModelSettingsOverview
+        wcaKey={wcaKey}
+        wcaModelId={wcaModelId}
+        setModeToKey={setModeToKey}
+        setModeToModelId={setModeToModelId}
+      />,
+    );
+
+    // Emulate click on "Add Model ID" button
+    const addModelIdButton = await screen.findByTestId(
+      "model-settings-overview__add-model-id-button",
+    );
+    await userEvent.click(addModelIdButton);
+
+    expect(setModeToModelId).toBeCalled();
+  });
+
+  it("Add::ModelId::APIKeyNotFound", async () => {
+    const wcaKey: WcaKey = { status: "SUCCESS_NOT_FOUND" };
+    const wcaModelId: WcaModelId = { status: "SUCCESS_NOT_FOUND" };
+
+    render(
+      <ModelSettingsOverview
+        wcaKey={wcaKey}
+        wcaModelId={wcaModelId}
+        setModeToKey={setModeToKey}
+        setModeToModelId={setModeToModelId}
+      />,
+    );
+
+    const alert = await screen.findByTestId(
+      "model-settings-overview__model-id-set-api-key-first",
+    );
+    expect(alert).toHaveTextContent("NoModelIdNoAPIKey");
+
+    const addModelIdButton = await screen.findByTestId(
+      "model-settings-overview__add-model-id-button",
+    );
+    expect(addModelIdButton).toBeDisabled();
+  });
+
+  it("Update::ModelId", async () => {
+    const wcaKey: WcaKey = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date() },
+    };
+    const wcaModelId: WcaModelId = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date(), model_id: "model_id" },
+    };
+
+    render(
+      <ModelSettingsOverview
+        wcaKey={wcaKey}
+        wcaModelId={wcaModelId}
+        setModeToKey={setModeToKey}
+        setModeToModelId={setModeToModelId}
+      />,
+    );
+
+    // Emulate click on "Update Model ID" button
+    const updateModelIdButton = await screen.findByTestId(
+      "model-settings-overview__update-model-id-button",
+    );
+    await userEvent.click(updateModelIdButton);
+
+    expect(setModeToModelId).toBeCalled();
+  });
+
+  it("Validate::Key::Success", async () => {
+    const wcaKey: WcaKey = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date() },
+    };
+    const wcaModelId: WcaModelId = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date(), model_id: "model_id" },
+    };
+    (axios.get as jest.Mock).mockResolvedValue({});
+
+    render(
+      <ModelSettingsOverview
+        wcaKey={wcaKey}
+        wcaModelId={wcaModelId}
+        setModeToKey={setModeToKey}
+        setModeToModelId={setModeToModelId}
+      />,
+    );
+
+    // Emulate click on "Test [Key]" button
+    const testKeyButton = await screen.findByTestId(
+      "model-settings-overview__key-test-button",
+    );
+    await userEvent.click(testKeyButton);
+
+    const alert = await screen.findByTestId("alert");
+    expect(alert).toHaveTextContent("KeyValidationSuccess");
+  });
+
+  it("Validate::Key::Failure", async () => {
+    const wcaKey: WcaKey = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date() },
+    };
+    const wcaModelId: WcaModelId = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date(), model_id: "model_id" },
+    };
+    (axios.get as jest.Mock).mockRejectedValue({ response: { status: 400 } });
+
+    render(
+      <ModelSettingsOverview
+        wcaKey={wcaKey}
+        wcaModelId={wcaModelId}
+        setModeToKey={setModeToKey}
+        setModeToModelId={setModeToModelId}
+      />,
+    );
+
+    // Emulate click on "Test [Key]" button
+    const testKeyButton = await screen.findByTestId(
+      "model-settings-overview__key-test-button",
+    );
+    await userEvent.click(testKeyButton);
+
+    const alert = await screen.findByTestId(
+      "model-settings-overview__alert-key-invalid",
+    );
+    expect(alert).toBeInTheDocument();
+  });
+
+  it("Validate::Key::Failure::Error", async () => {
+    const wcaKey: WcaKey = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date() },
+    };
+    const wcaModelId: WcaModelId = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date(), model_id: "model_id" },
+    };
+    (axios.get as jest.Mock).mockRejectedValue({ response: { status: 500 } });
+
+    render(
+      <ModelSettingsOverview
+        wcaKey={wcaKey}
+        wcaModelId={wcaModelId}
+        setModeToKey={setModeToKey}
+        setModeToModelId={setModeToModelId}
+      />,
+    );
+
+    // Emulate click on "Test [Key]" button
+    const testKeyButton = await screen.findByTestId(
+      "model-settings-overview__key-test-button",
+    );
+    await userEvent.click(testKeyButton);
+
+    // Modals are added to the 'document.body' so perform a basic check for a known field.
+    expect(document.body).toHaveTextContent("KeyValidationError");
+  });
+
+  it("Validate::ModelId::Success", async () => {
+    const wcaKey: WcaKey = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date() },
+    };
+    const wcaModelId: WcaModelId = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date(), model_id: "model_id" },
+    };
+    (axios.get as jest.Mock).mockResolvedValue({});
+
+    render(
+      <ModelSettingsOverview
+        wcaKey={wcaKey}
+        wcaModelId={wcaModelId}
+        setModeToKey={setModeToKey}
+        setModeToModelId={setModeToModelId}
+      />,
+    );
+
+    // Emulate click on "Test [ModelId]" button
+    const testModelIdButton = await screen.findByTestId(
+      "model-settings-overview__model-id-test-button",
+    );
+    await userEvent.click(testModelIdButton);
+
+    const alert = await screen.findByTestId("alert");
+    expect(alert).toHaveTextContent("ModelIdValidationSuccess");
+  });
+
+  it("Validate::ModelId::Failure", async () => {
+    const wcaKey: WcaKey = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date() },
+    };
+    const wcaModelId: WcaModelId = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date(), model_id: "model_id" },
+    };
+    (axios.get as jest.Mock).mockRejectedValue({ response: { status: 400 } });
+
+    render(
+      <ModelSettingsOverview
+        wcaKey={wcaKey}
+        wcaModelId={wcaModelId}
+        setModeToKey={setModeToKey}
+        setModeToModelId={setModeToModelId}
+      />,
+    );
+
+    // Emulate click on "Test [ModelId]" button
+    const testModelIdButton = await screen.findByTestId(
+      "model-settings-overview__model-id-test-button",
+    );
+    await userEvent.click(testModelIdButton);
+
+    const alert = await screen.findByTestId(
+      "model-settings-overview__alert-model-id-invalid",
+    );
+    expect(alert).toBeInTheDocument();
+  });
+
+  it("Validate::ModelId::TrialExpired", async () => {
+    const wcaKey: WcaKey = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date() },
+    };
+    const wcaModelId: WcaModelId = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date(), model_id: "model_id" },
+    };
+    (axios.get as jest.Mock).mockRejectedValue({
+      response: {
+        status: 403,
+        data: {
+          status_code: 403,
+          code: "permission_denied__user_trial_expired",
+          detail: "User trial expired. Please contact your administrator.",
+        },
+      },
     });
+
+    render(
+      <ModelSettingsOverview
+        wcaKey={wcaKey}
+        wcaModelId={wcaModelId}
+        setModeToKey={setModeToKey}
+        setModeToModelId={setModeToModelId}
+      />,
+    );
+
+    // Emulate click on "Test [ModelId]" button
+    const testKeyButton = await screen.findByTestId(
+      "model-settings-overview__model-id-test-button",
+    );
+    await userEvent.click(testKeyButton);
+
+    // Modals are added to the 'document.body' so perform a basic check for a known field.
+    expect(document.body).toHaveTextContent("ModelIdValidationTrialExpired");
+  });
+
+  it("Validate::ModelId::Failure::Error", async () => {
+    const wcaKey: WcaKey = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date() },
+    };
+    const wcaModelId: WcaModelId = {
+      status: "SUCCESS",
+      data: { lastUpdate: new Date(), model_id: "model_id" },
+    };
+    (axios.get as jest.Mock).mockRejectedValue({ response: { status: 500 } });
+
+    render(
+      <ModelSettingsOverview
+        wcaKey={wcaKey}
+        wcaModelId={wcaModelId}
+        setModeToKey={setModeToKey}
+        setModeToModelId={setModeToModelId}
+      />,
+    );
+
+    // Emulate click on "Test [ModelId]" button
+    const testKeyButton = await screen.findByTestId(
+      "model-settings-overview__model-id-test-button",
+    );
+    await userEvent.click(testKeyButton);
+
+    // Modals are added to the 'document.body' so perform a basic check for a known field.
+    expect(document.body).toHaveTextContent("ModelIdValidationError");
+  });
+});
diff --git a/ansible_wisdom_console_react/src/__tests__/PageSidebar.test.tsx b/ansible_wisdom_console_react/src/__tests__/PageSidebar.test.tsx
index e769629bb..3f41f782a 100644
--- a/ansible_wisdom_console_react/src/__tests__/PageSidebar.test.tsx
+++ b/ansible_wisdom_console_react/src/__tests__/PageSidebar.test.tsx
@@ -1,84 +1,79 @@
-import {render, screen} from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import {PageSidebar} from "../PageSidebar";
-import {MemoryRouter} from "react-router-dom";
-import {PageMastheadToggle} from "@ansible/ansible-ui-framework";
+import { PageSidebar } from "../PageSidebar";
+import { MemoryRouter } from "react-router-dom";
+import { PageMastheadToggle } from "@ansible/ansible-ui-framework";
 import userEvent from "@testing-library/user-event";
 
-describe('PageSidebar',
-    () => {
+describe("PageSidebar", () => {
+  it("Rendering", async () => {
+    const { container } = render(
+      <MemoryRouter>
+        <PageSidebar
+          navigation={[
+            {
+              id: "nav-item__id",
+              label: "nav-item__label",
+              path: "/nav-item",
+              element: <div />,
+              children: [],
+            },
+          ]}
+        />
+      </MemoryRouter>,
+    );
+    const brand = await screen.findByTestId("page-sidebar__brand");
+    expect(brand).toBeInTheDocument();
 
-        it('Rendering',
-            async () => {
+    const navigation = await screen.findByTestId("page-sidebar__navigation");
+    expect(navigation).toBeInTheDocument();
 
-                const {container} = render(
-                    <MemoryRouter>
-                        <PageSidebar
-                            navigation={[
-                                {
-                                    id: "nav-item__id",
-                                    label: "nav-item__label",
-                                    path: "/nav-item",
-                                    element: <div/>,
-                                    children: []
-                                }
-                            ]}
-                        />
-                    </MemoryRouter>
-                );
-                const brand = await screen.findByTestId("page-sidebar__brand");
-                expect(brand).toBeInTheDocument();
+    // These are really horrible checks but <PageNavigation/> doesn't have much to query against.
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const navItemElement = container.querySelector(".pf-c-nav__link");
+    expect(navItemElement).not.toBeNull();
+    expect(navItemElement?.getAttribute("id")).toEqual("nav-item__id");
+    expect(navItemElement?.textContent).toEqual("nav-item__label");
+  });
 
-                const navigation = await screen.findByTestId("page-sidebar__navigation");
-                expect(navigation).toBeInTheDocument();
+  it("Rendering::ToggleState", async () => {
+    render(
+      <MemoryRouter>
+        <PageMastheadToggle />
+        <PageSidebar
+          navigation={[
+            {
+              id: "nav-item__id",
+              label: "nav-item__label",
+              path: "/nav-item",
+              element: <div />,
+              children: [],
+            },
+          ]}
+        />
+      </MemoryRouter>,
+    );
+    // This is really horrible but <PageMasthead/> doesn't have much to query against.
+    const toggleButton = screen.getByText(
+      (content, element) => element?.tagName.toLowerCase() === "button",
+    );
 
-                // These are really horrible checks but <PageNavigation/> doesn't have much to query against.
-                // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-                const navItemElement = container.querySelector(".pf-c-nav__link");
-                expect(navItemElement).not.toBeNull();
-                expect(navItemElement?.getAttribute("id")).toEqual("nav-item__id");
-                expect(navItemElement?.textContent).toEqual("nav-item__label");
-            });
+    // Emulate collapse
+    await userEvent.click(toggleButton);
+    let brand = await screen.findByTestId("page-sidebar__brand");
+    expect(brand.className).toContain("pf-m-collapsed");
 
-        it('Rendering::ToggleState',
-            async () => {
+    let navigation = await screen.findByTestId("page-sidebar__navigation");
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(navigation.children[0].className).toContain("pf-m-collapsed");
 
-                render(
-                    <MemoryRouter>
-                        <PageMastheadToggle/>
-                        <PageSidebar
-                            navigation={[
-                                {
-                                    id: "nav-item__id",
-                                    label: "nav-item__label",
-                                    path: "/nav-item",
-                                    element: <div/>,
-                                    children: []
-                                }
-                            ]}
-                        />
-                    </MemoryRouter>
-                );
-                // This is really horrible but <PageMasthead/> doesn't have much to query against.
-                const toggleButton = screen.getByText((content, element) => element?.tagName.toLowerCase() === "button");
+    // Emulate expansion
+    await userEvent.click(toggleButton);
+    brand = await screen.findByTestId("page-sidebar__brand");
+    expect(brand.className).toContain("pf-m-collapsed");
 
-                // Emulate collapse
-                await userEvent.click(toggleButton);
-                let brand = await screen.findByTestId("page-sidebar__brand");
-                expect(brand.className).toContain("pf-m-collapsed");
-
-                let navigation = await screen.findByTestId("page-sidebar__navigation");
-                // eslint-disable-next-line testing-library/no-node-access
-                expect(navigation.children[0].className).toContain("pf-m-collapsed");
-
-                // Emulate expansion
-                await userEvent.click(toggleButton);
-                brand = await screen.findByTestId("page-sidebar__brand");
-                expect(brand.className).toContain("pf-m-collapsed");
-
-                navigation = await screen.findByTestId("page-sidebar__navigation");
-                // eslint-disable-next-line testing-library/no-node-access
-                expect(navigation.children[0].className).toContain("pf-m-collapsed");
-            });
-
-    });
+    navigation = await screen.findByTestId("page-sidebar__navigation");
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(navigation.children[0].className).toContain("pf-m-collapsed");
+  });
+});
diff --git a/ansible_wisdom_console_react/src/__tests__/SingleInlineEdit.test.tsx b/ansible_wisdom_console_react/src/__tests__/SingleInlineEdit.test.tsx
index d0d7c0078..539c66629 100644
--- a/ansible_wisdom_console_react/src/__tests__/SingleInlineEdit.test.tsx
+++ b/ansible_wisdom_console_react/src/__tests__/SingleInlineEdit.test.tsx
@@ -1,150 +1,154 @@
-import {render, screen} from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import {SingleInlineEdit} from "../SingleInlineEdit";
+import { SingleInlineEdit } from "../SingleInlineEdit";
 import userEvent from "@testing-library/user-event";
 
-describe('SingleInlineEdit',
-    () => {
+describe("SingleInlineEdit", () => {
+  it("OnRender", async () => {
+    render(
+      <SingleInlineEdit
+        value={"test-value"}
+        aria-label={"test-aria-label"}
+        isDisabled={false}
+        isPassword={false}
+        placeholder={"test-placeholder"}
+        onChange={jest.fn()}
+      />,
+    );
+    const textInputElement = screen.getByTestId("model-settings-editor__input");
+    expect(textInputElement).toBeInTheDocument();
+    expect(textInputElement).toHaveAttribute("type", "text");
+    expect(textInputElement).toHaveAttribute("value", "test-value");
+    expect(textInputElement).toHaveAttribute("aria-label", "test-aria-label");
+    expect(textInputElement).toHaveAttribute("placeholder", "test-placeholder");
+    expect(textInputElement).not.toBeDisabled();
+    const clearButtonElement = screen.getByTestId(
+      "model-settings-editor__clear-button",
+    );
+    expect(clearButtonElement).toBeInTheDocument();
+    expect(clearButtonElement).toHaveAttribute("aria-label", "ClearText");
+    expect(clearButtonElement).toHaveAttribute("title", "ClearText");
+    expect(clearButtonElement).not.toBeDisabled();
+  });
 
-        it('OnRender',
-            async () => {
-                render(
-                    <SingleInlineEdit
-                        value={'test-value'}
-                        aria-label={'test-aria-label'}
-                        isDisabled={false}
-                        isPassword={false}
-                        placeholder={'test-placeholder'}
-                        onChange={jest.fn()}
-                    />
-                );
-                const textInputElement = screen.getByTestId("model-settings-editor__input");
-                expect(textInputElement).toBeInTheDocument();
-                expect(textInputElement).toHaveAttribute('type', 'text');
-                expect(textInputElement).toHaveAttribute('value', 'test-value');
-                expect(textInputElement).toHaveAttribute('aria-label', 'test-aria-label');
-                expect(textInputElement).toHaveAttribute('placeholder', 'test-placeholder');
-                expect(textInputElement).not.toBeDisabled();
-                const clearButtonElement = screen.getByTestId("model-settings-editor__clear-button");
-                expect(clearButtonElement).toBeInTheDocument();
-                expect(clearButtonElement).toHaveAttribute('aria-label', 'ClearText');
-                expect(clearButtonElement).toHaveAttribute('title', 'ClearText');
-                expect(clearButtonElement).not.toBeDisabled();
-            });
+  it("OnRender::Password", async () => {
+    render(
+      <SingleInlineEdit
+        value={"test-value"}
+        aria-label={"test-aria-label"}
+        isDisabled={false}
+        isPassword={true}
+        placeholder={"test-placeholder"}
+        onChange={jest.fn()}
+      />,
+    );
+    const textInputElement = screen.getByTestId("model-settings-editor__input");
+    expect(textInputElement).toBeInTheDocument();
+    expect(textInputElement).toHaveAttribute("type", "password");
+    expect(textInputElement).not.toHaveAttribute("value", "test-value");
+    expect(textInputElement).toHaveAttribute("aria-label", "test-aria-label");
+    expect(textInputElement).toHaveAttribute("placeholder", "test-placeholder");
+    expect(textInputElement).not.toBeDisabled();
+    const toggleViewElement = screen.getByTestId(
+      "model-settings-editor__toggleView",
+    );
+    expect(toggleViewElement).toBeInTheDocument();
+    expect(toggleViewElement).toHaveAttribute("aria-label", "ShowText");
+    const clearButtonElement = screen.getByTestId(
+      "model-settings-editor__clear-button",
+    );
+    expect(clearButtonElement).toBeInTheDocument();
+    expect(clearButtonElement).toHaveAttribute("aria-label", "ClearText");
+    expect(clearButtonElement).toHaveAttribute("title", "ClearText");
+    expect(clearButtonElement).not.toBeDisabled();
+  });
 
-            it('OnRender::Password',
-                async () => {
-                        render(
-                            <SingleInlineEdit
-                                value={'test-value'}
-                                aria-label={'test-aria-label'}
-                                isDisabled={false}
-                                isPassword={true}
-                                placeholder={'test-placeholder'}
-                                onChange={jest.fn()}
-                            />
-                        );
-                        const textInputElement = screen.getByTestId("model-settings-editor__input");
-                        expect(textInputElement).toBeInTheDocument();
-                        expect(textInputElement).toHaveAttribute('type', 'password');
-                        expect(textInputElement).not.toHaveAttribute('value', 'test-value');
-                        expect(textInputElement).toHaveAttribute('aria-label', 'test-aria-label');
-                        expect(textInputElement).toHaveAttribute('placeholder', 'test-placeholder');
-                        expect(textInputElement).not.toBeDisabled();
-                        const toggleViewElement = screen.getByTestId("model-settings-editor__toggleView");
-                        expect(toggleViewElement).toBeInTheDocument();
-                        expect(toggleViewElement).toHaveAttribute('aria-label', 'ShowText');
-                        const clearButtonElement = screen.getByTestId("model-settings-editor__clear-button");
-                        expect(clearButtonElement).toBeInTheDocument();
-                        expect(clearButtonElement).toHaveAttribute('aria-label', 'ClearText');
-                        expect(clearButtonElement).toHaveAttribute('title', 'ClearText');
-                        expect(clearButtonElement).not.toBeDisabled();
-                });
+  it("OnTextChange", async () => {
+    const callback = jest.fn();
+    render(
+      <SingleInlineEdit
+        aria-label={"test-aria-label"}
+        value={"test-value"}
+        onChange={callback}
+        isDisabled={false}
+        isPassword={false}
+        placeholder={"test-placeholder"}
+      />,
+    );
+    const textInputElement = screen.getByTestId("model-settings-editor__input");
+    expect(textInputElement).toBeInTheDocument();
+    expect(textInputElement).toHaveAttribute("value", "test-value");
+    await userEvent.type(textInputElement, "2");
+    expect(callback).toBeCalledWith("test-value2");
+  });
 
-        it('OnTextChange',
-            async () => {
-                const callback = jest.fn();
-                render(
-                    <SingleInlineEdit
-                        aria-label={'test-aria-label'}
-                        value={'test-value'}
-                        onChange={callback}
-                        isDisabled={false}
-                        isPassword={false}
-                        placeholder={'test-placeholder'}
-                    />
-                );
-                const textInputElement = screen.getByTestId("model-settings-editor__input");
-                expect(textInputElement).toBeInTheDocument();
-                expect(textInputElement).toHaveAttribute('value', 'test-value');
-                await userEvent.type(textInputElement, '2');
-                expect(callback).toBeCalledWith('test-value2');
-            });
+  it("OnClearButtonClick", async () => {
+    const callback = jest.fn();
+    render(
+      <SingleInlineEdit
+        aria-label={"test-aria-label"}
+        value={"test-value"}
+        onChange={callback}
+        isDisabled={false}
+        isPassword={false}
+        placeholder={"test-placeholder"}
+      />,
+    );
+    const textInputElement = screen.getByTestId("model-settings-editor__input");
+    expect(textInputElement).toBeInTheDocument();
+    expect(textInputElement).toHaveAttribute("value", "test-value");
+    const clearButtonElement = screen.getByTestId(
+      "model-settings-editor__clear-button",
+    );
+    expect(clearButtonElement).toBeInTheDocument();
+    await userEvent.click(clearButtonElement);
+    expect(callback).toBeCalledWith("");
+  });
 
-        it('OnClearButtonClick',
-            async () => {
-                const callback = jest.fn();
-                render(
-                    <SingleInlineEdit
-                        aria-label={'test-aria-label'}
-                        value={'test-value'}
-                        onChange={callback}
-                        isDisabled={false}
-                        isPassword={false}
-                        placeholder={'test-placeholder'}
-                    />
-                );
-                const textInputElement = screen.getByTestId("model-settings-editor__input");
-                expect(textInputElement).toBeInTheDocument();
-                expect(textInputElement).toHaveAttribute('value', 'test-value')
-                const clearButtonElement = screen.getByTestId("model-settings-editor__clear-button");
-                expect(clearButtonElement).toBeInTheDocument();
-                await userEvent.click(clearButtonElement);
-                expect(callback).toBeCalledWith('');
-            });
+  it("OnToggleViewClick", async () => {
+    const callback = jest.fn();
+    render(
+      <SingleInlineEdit
+        aria-label={"test-aria-label"}
+        value={"test-value"}
+        onChange={callback}
+        isDisabled={false}
+        isPassword={true}
+        placeholder={"test-placeholder"}
+      />,
+    );
+    const textInputElement = screen.getByTestId("model-settings-editor__input");
+    expect(textInputElement).toBeInTheDocument();
+    expect(textInputElement).toHaveAttribute("type", "password");
+    expect(textInputElement).not.toHaveAttribute("value", "test-value");
+    const toggleViewElement = screen.getByTestId(
+      "model-settings-editor__toggleView",
+    );
+    expect(toggleViewElement).toBeInTheDocument();
+    expect(toggleViewElement).toHaveAttribute("aria-label", "ShowText");
+    await userEvent.click(toggleViewElement);
+    expect(textInputElement).toHaveAttribute("type", "text");
+    expect(toggleViewElement).toHaveAttribute("aria-label", "HideText");
+  });
 
-        it('OnToggleViewClick',
-            async () => {
-                const callback = jest.fn();
-                render(
-                    <SingleInlineEdit
-                        aria-label={'test-aria-label'}
-                        value={'test-value'}
-                        onChange={callback}
-                        isDisabled={false}
-                        isPassword={true}
-                        placeholder={'test-placeholder'}
-                    />
-                );
-                const textInputElement = screen.getByTestId("model-settings-editor__input");
-                expect(textInputElement).toBeInTheDocument();
-                expect(textInputElement).toHaveAttribute('type', 'password');
-                expect(textInputElement).not.toHaveAttribute('value', 'test-value')
-                const toggleViewElement = screen.getByTestId("model-settings-editor__toggleView");
-                expect(toggleViewElement).toBeInTheDocument();
-                expect(toggleViewElement).toHaveAttribute('aria-label', 'ShowText');
-                await userEvent.click(toggleViewElement);
-                expect(textInputElement).toHaveAttribute('type', 'text');
-                expect(toggleViewElement).toHaveAttribute('aria-label', 'HideText');
-            });
-
-        it('OnRenderDisabled',
-            async () => {
-                const callback = jest.fn();
-                render(
-                    <SingleInlineEdit
-                        aria-label={'test-aria-label'}
-                        value={'test-value'}
-                        onChange={callback}
-                        isDisabled={true}
-                        isPassword={false}
-                        placeholder={'test-placeholder'}
-                    />
-                );
-                const textInputElement = screen.getByTestId("model-settings-editor__input");
-                expect(textInputElement).toBeInTheDocument();
-                expect(textInputElement).toHaveAttribute('value', 'test-value');
-                const clearButtonElement = screen.getByTestId("model-settings-editor__clear-button");
-                expect(clearButtonElement).toBeDisabled();
-            });
-    });
+  it("OnRenderDisabled", async () => {
+    const callback = jest.fn();
+    render(
+      <SingleInlineEdit
+        aria-label={"test-aria-label"}
+        value={"test-value"}
+        onChange={callback}
+        isDisabled={true}
+        isPassword={false}
+        placeholder={"test-placeholder"}
+      />,
+    );
+    const textInputElement = screen.getByTestId("model-settings-editor__input");
+    expect(textInputElement).toBeInTheDocument();
+    expect(textInputElement).toHaveAttribute("value", "test-value");
+    const clearButtonElement = screen.getByTestId(
+      "model-settings-editor__clear-button",
+    );
+    expect(clearButtonElement).toBeDisabled();
+  });
+});
diff --git a/ansible_wisdom_console_react/src/__tests__/TelemetrySettings.test.tsx b/ansible_wisdom_console_react/src/__tests__/TelemetrySettings.test.tsx
index 9eb8b7e72..0b223a33f 100644
--- a/ansible_wisdom_console_react/src/__tests__/TelemetrySettings.test.tsx
+++ b/ansible_wisdom_console_react/src/__tests__/TelemetrySettings.test.tsx
@@ -1,148 +1,179 @@
-import {render, screen} from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import {TelemetrySettings} from "../TelemetrySettings";
+import { TelemetrySettings } from "../TelemetrySettings";
 import userEvent from "@testing-library/user-event";
 import axios from "axios";
-import {API_TELEMETRY_PATH} from "../api/api";
-
-jest.mock('axios',
-    () => ({
-        get: jest.fn(),
-        post: jest.fn(),
-    }));
-
-describe('TelemetrySettings',
-    () => {
-
-        beforeEach(() => jest.resetAllMocks());
-
-        it('Loading',
-            async () => {
-                (axios.get as jest.Mock).mockResolvedValue({"optOut": "false"});
-                render(
-                    <TelemetrySettings/>
-                );
-                expect((axios.get as jest.Mock)).toBeCalledWith(API_TELEMETRY_PATH)
-                expect(await screen.findByTestId("telemetry-settings__telemetry-loading")).toBeInTheDocument();
-            });
-
-        it('Loaded::Found',
-            async () => {
-                (axios.get as jest.Mock).mockResolvedValue({"data": {"optOut": true}});
-                render(
-                    <TelemetrySettings/>
-                );
-                expect((axios.get as jest.Mock)).toBeCalledWith(API_TELEMETRY_PATH)
-                expect(await screen.findByTestId("telemetry-settings__opt_in_radiobutton")).toBeInTheDocument();
-                expect(await screen.findByTestId("telemetry-settings__opt_out_radiobutton")).toBeInTheDocument();
-
-                const saveButton: HTMLInputElement = await screen.findByTestId("telemetry-settings__save-button");
-                const cancelButton: HTMLInputElement = await screen.findByTestId("telemetry-settings__cancel-button");
-                expect(saveButton).toBeInTheDocument();
-                expect(cancelButton).toBeInTheDocument();
-                expect(saveButton.disabled).toBeFalsy();
-                expect(cancelButton.disabled).toBeTruthy();
-            });
-
-        it('Click::Save::Success',
-            async () => {
-                (axios.get as jest.Mock).mockResolvedValue({"data": {"optOut": false}});
-                (axios.post as jest.Mock).mockResolvedValue({});
-
-                render(
-                    <TelemetrySettings/>
-                );
-
-                // Check initial settings
-                let optInRadioButton: HTMLInputElement = await screen.findByTestId("telemetry-settings__opt_in_radiobutton");
-                let optOutRadioButton: HTMLInputElement = await screen.findByTestId("telemetry-settings__opt_out_radiobutton");
-                expect(optInRadioButton.checked).toEqual(true);
-                expect(optOutRadioButton.checked).toEqual(false);
-
-                // Emulate click on "Opt Out" radio button
-                await userEvent.click(optOutRadioButton);
-
-                // Check settings have changed
-                optInRadioButton = await screen.findByTestId("telemetry-settings__opt_in_radiobutton");
-                optOutRadioButton = await screen.findByTestId("telemetry-settings__opt_out_radiobutton")
-                expect(optInRadioButton.checked).toEqual(false);
-                expect(optOutRadioButton.checked).toEqual(true);
-
-                // Check action button states
-                const saveButton: HTMLInputElement = await screen.findByTestId("telemetry-settings__save-button");
-                const cancelButton: HTMLInputElement = await screen.findByTestId("telemetry-settings__cancel-button");
-                expect(saveButton).toBeInTheDocument();
-                expect(cancelButton).toBeInTheDocument();
-                expect(saveButton.disabled).toBeFalsy();
-                expect(cancelButton.disabled).toBeFalsy();
-
-                // Emulate click on "Save" button
-                await userEvent.click(saveButton);
-
-                expect((axios.post as jest.Mock)).toBeCalledWith(API_TELEMETRY_PATH, {"optOut": true}, {"headers": {"X-CSRFToken": null}})
-            });
-
-        it('Click::Save::Failure::Error',
-            async () => {
-                (axios.get as jest.Mock).mockResolvedValue({"data": {"optOut": false}});
-                (axios.post as jest.Mock).mockRejectedValue({"response": {"status": 500}});
-
-                render(
-                    <TelemetrySettings/>
-                );
-
-                // Emulate click on "Opt Out" radio button
-                const optOutRadioButton: HTMLInputElement = await screen.findByTestId("telemetry-settings__opt_out_radiobutton");
-                expect(optOutRadioButton.checked).toEqual(false);
-                await userEvent.click(optOutRadioButton);
-
-                // Emulate click on "Save" button
-                const saveButton = await screen.findByTestId("telemetry-settings__save-button");
-                await userEvent.click(saveButton);
-
-                expect((axios.post as jest.Mock)).toBeCalledWith(API_TELEMETRY_PATH, {"optOut": true}, {"headers": {"X-CSRFToken": null}})
-
-                // Modals are added to the 'document.body' so perform a basic check for a known field.
-                expect(document.body).toHaveTextContent("TelemetryError")
-            });
-
-        it('Click::Cancel',
-            async () => {
-                (axios.get as jest.Mock).mockResolvedValue({"data": {"optOut": false}});
-
-                render(
-                    <TelemetrySettings/>
-                );
-
-                // Check initial settings
-                let optInRadioButton: HTMLInputElement = await screen.findByTestId("telemetry-settings__opt_in_radiobutton");
-                let optOutRadioButton: HTMLInputElement = await screen.findByTestId("telemetry-settings__opt_out_radiobutton");
-                expect(optInRadioButton.checked).toEqual(true);
-                expect(optOutRadioButton.checked).toEqual(false);
-
-                // Emulate click on "Opt Out" radio button
-                await userEvent.click(optOutRadioButton);
-
-                // Check settings have changed
-                optInRadioButton = await screen.findByTestId("telemetry-settings__opt_in_radiobutton");
-                optOutRadioButton = await screen.findByTestId("telemetry-settings__opt_out_radiobutton")
-                expect(optInRadioButton.checked).toEqual(false);
-                expect(optOutRadioButton.checked).toEqual(true);
-
-                // Emulate click on "Cancel" button
-                const cancelButton: HTMLInputElement = await screen.findByTestId("telemetry-settings__cancel-button");
-                await userEvent.click(cancelButton);
-
-                // Check original settings are restored
-                optInRadioButton = await screen.findByTestId("telemetry-settings__opt_in_radiobutton");
-                optOutRadioButton = await screen.findByTestId("telemetry-settings__opt_out_radiobutton")
-                expect(optInRadioButton.checked).toEqual(true);
-                expect(optOutRadioButton.checked).toEqual(false);
-
-                // Check action button states
-                const saveButton: HTMLInputElement = await screen.findByTestId("telemetry-settings__save-button");
-                expect(saveButton.disabled).toBeFalsy();
-                expect(cancelButton.disabled).toBeTruthy();
-            });
-
-    });
+import { API_TELEMETRY_PATH } from "../api/api";
+
+jest.mock("axios", () => ({
+  get: jest.fn(),
+  post: jest.fn(),
+}));
+
+describe("TelemetrySettings", () => {
+  beforeEach(() => jest.resetAllMocks());
+
+  it("Loading", async () => {
+    (axios.get as jest.Mock).mockResolvedValue({ optOut: "false" });
+    render(<TelemetrySettings />);
+    expect(axios.get as jest.Mock).toBeCalledWith(API_TELEMETRY_PATH);
+    expect(
+      await screen.findByTestId("telemetry-settings__telemetry-loading"),
+    ).toBeInTheDocument();
+  });
+
+  it("Loaded::Found", async () => {
+    (axios.get as jest.Mock).mockResolvedValue({ data: { optOut: true } });
+    render(<TelemetrySettings />);
+    expect(axios.get as jest.Mock).toBeCalledWith(API_TELEMETRY_PATH);
+    expect(
+      await screen.findByTestId("telemetry-settings__opt_in_radiobutton"),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByTestId("telemetry-settings__opt_out_radiobutton"),
+    ).toBeInTheDocument();
+
+    const saveButton: HTMLInputElement = await screen.findByTestId(
+      "telemetry-settings__save-button",
+    );
+    const cancelButton: HTMLInputElement = await screen.findByTestId(
+      "telemetry-settings__cancel-button",
+    );
+    expect(saveButton).toBeInTheDocument();
+    expect(cancelButton).toBeInTheDocument();
+    expect(saveButton.disabled).toBeFalsy();
+    expect(cancelButton.disabled).toBeTruthy();
+  });
+
+  it("Click::Save::Success", async () => {
+    (axios.get as jest.Mock).mockResolvedValue({ data: { optOut: false } });
+    (axios.post as jest.Mock).mockResolvedValue({});
+
+    render(<TelemetrySettings />);
+
+    // Check initial settings
+    let optInRadioButton: HTMLInputElement = await screen.findByTestId(
+      "telemetry-settings__opt_in_radiobutton",
+    );
+    let optOutRadioButton: HTMLInputElement = await screen.findByTestId(
+      "telemetry-settings__opt_out_radiobutton",
+    );
+    expect(optInRadioButton.checked).toEqual(true);
+    expect(optOutRadioButton.checked).toEqual(false);
+
+    // Emulate click on "Opt Out" radio button
+    await userEvent.click(optOutRadioButton);
+
+    // Check settings have changed
+    optInRadioButton = await screen.findByTestId(
+      "telemetry-settings__opt_in_radiobutton",
+    );
+    optOutRadioButton = await screen.findByTestId(
+      "telemetry-settings__opt_out_radiobutton",
+    );
+    expect(optInRadioButton.checked).toEqual(false);
+    expect(optOutRadioButton.checked).toEqual(true);
+
+    // Check action button states
+    const saveButton: HTMLInputElement = await screen.findByTestId(
+      "telemetry-settings__save-button",
+    );
+    const cancelButton: HTMLInputElement = await screen.findByTestId(
+      "telemetry-settings__cancel-button",
+    );
+    expect(saveButton).toBeInTheDocument();
+    expect(cancelButton).toBeInTheDocument();
+    expect(saveButton.disabled).toBeFalsy();
+    expect(cancelButton.disabled).toBeFalsy();
+
+    // Emulate click on "Save" button
+    await userEvent.click(saveButton);
+
+    expect(axios.post as jest.Mock).toBeCalledWith(
+      API_TELEMETRY_PATH,
+      { optOut: true },
+      { headers: { "X-CSRFToken": null } },
+    );
+  });
+
+  it("Click::Save::Failure::Error", async () => {
+    (axios.get as jest.Mock).mockResolvedValue({ data: { optOut: false } });
+    (axios.post as jest.Mock).mockRejectedValue({ response: { status: 500 } });
+
+    render(<TelemetrySettings />);
+
+    // Emulate click on "Opt Out" radio button
+    const optOutRadioButton: HTMLInputElement = await screen.findByTestId(
+      "telemetry-settings__opt_out_radiobutton",
+    );
+    expect(optOutRadioButton.checked).toEqual(false);
+    await userEvent.click(optOutRadioButton);
+
+    // Emulate click on "Save" button
+    const saveButton = await screen.findByTestId(
+      "telemetry-settings__save-button",
+    );
+    await userEvent.click(saveButton);
+
+    expect(axios.post as jest.Mock).toBeCalledWith(
+      API_TELEMETRY_PATH,
+      { optOut: true },
+      { headers: { "X-CSRFToken": null } },
+    );
+
+    // Modals are added to the 'document.body' so perform a basic check for a known field.
+    expect(document.body).toHaveTextContent("TelemetryError");
+  });
+
+  it("Click::Cancel", async () => {
+    (axios.get as jest.Mock).mockResolvedValue({ data: { optOut: false } });
+
+    render(<TelemetrySettings />);
+
+    // Check initial settings
+    let optInRadioButton: HTMLInputElement = await screen.findByTestId(
+      "telemetry-settings__opt_in_radiobutton",
+    );
+    let optOutRadioButton: HTMLInputElement = await screen.findByTestId(
+      "telemetry-settings__opt_out_radiobutton",
+    );
+    expect(optInRadioButton.checked).toEqual(true);
+    expect(optOutRadioButton.checked).toEqual(false);
+
+    // Emulate click on "Opt Out" radio button
+    await userEvent.click(optOutRadioButton);
+
+    // Check settings have changed
+    optInRadioButton = await screen.findByTestId(
+      "telemetry-settings__opt_in_radiobutton",
+    );
+    optOutRadioButton = await screen.findByTestId(
+      "telemetry-settings__opt_out_radiobutton",
+    );
+    expect(optInRadioButton.checked).toEqual(false);
+    expect(optOutRadioButton.checked).toEqual(true);
+
+    // Emulate click on "Cancel" button
+    const cancelButton: HTMLInputElement = await screen.findByTestId(
+      "telemetry-settings__cancel-button",
+    );
+    await userEvent.click(cancelButton);
+
+    // Check original settings are restored
+    optInRadioButton = await screen.findByTestId(
+      "telemetry-settings__opt_in_radiobutton",
+    );
+    optOutRadioButton = await screen.findByTestId(
+      "telemetry-settings__opt_out_radiobutton",
+    );
+    expect(optInRadioButton.checked).toEqual(true);
+    expect(optOutRadioButton.checked).toEqual(false);
+
+    // Check action button states
+    const saveButton: HTMLInputElement = await screen.findByTestId(
+      "telemetry-settings__save-button",
+    );
+    expect(saveButton.disabled).toBeFalsy();
+    expect(cancelButton.disabled).toBeTruthy();
+  });
+});
diff --git a/ansible_wisdom_console_react/src/api/__tests__/api.test.ts b/ansible_wisdom_console_react/src/api/__tests__/api.test.ts
index 91f3fdaff..81762c6e6 100644
--- a/ansible_wisdom_console_react/src/api/__tests__/api.test.ts
+++ b/ansible_wisdom_console_react/src/api/__tests__/api.test.ts
@@ -1,42 +1,34 @@
 import "@testing-library/jest-dom";
-import {readCookie} from "../api";
+import { readCookie } from "../api";
 
-describe("API",
-    () => {
+describe("API", () => {
+  it("Cookie extraction::Empty string", () => {
+    document.cookie = "";
+    const cookie = readCookie("csrftoken");
+    expect(cookie).toBeNull();
+  });
 
-        it("Cookie extraction::Empty string",
-            () => {
-                document.cookie = "";
-                const cookie = readCookie("csrftoken");
-                expect(cookie).toBeNull();
-            });
+  it("Cookie extraction::Single::With whitespace", () => {
+    document.cookie = "csrftoken = 12345   ";
+    const cookie = readCookie("csrftoken");
+    expect(cookie).toEqual("12345");
+  });
 
-        it("Cookie extraction::Single::With whitespace",
-            () => {
-                document.cookie = "csrftoken = 12345   ";
-                const cookie = readCookie("csrftoken");
-                expect(cookie).toEqual("12345");
-            });
+  it("Cookie extraction::Single::Without whitespace", () => {
+    document.cookie = "csrftoken=12345";
+    const cookie = readCookie("csrftoken");
+    expect(cookie).toEqual("12345");
+  });
 
-        it("Cookie extraction::Single::Without whitespace",
-            () => {
-                document.cookie = "csrftoken=12345";
-                const cookie = readCookie("csrftoken");
-                expect(cookie).toEqual("12345");
-            });
+  it("Cookie extraction::Multiple::With whitespace", () => {
+    document.cookie = "smurf = abcdef; csrftoken = 12345   ";
+    const cookie = readCookie("csrftoken");
+    expect(cookie).toEqual("12345");
+  });
 
-        it("Cookie extraction::Multiple::With whitespace",
-            () => {
-                document.cookie = "smurf = abcdef; csrftoken = 12345   ";
-                const cookie = readCookie("csrftoken");
-                expect(cookie).toEqual("12345");
-            });
-
-        it("Cookie extraction::Multiple::Without whitespace",
-            () => {
-                document.cookie = "smurf=abcdef;csrftoken=12345";
-                const cookie = readCookie("csrftoken");
-                expect(cookie).toEqual("12345");
-            });
-
-    });
+  it("Cookie extraction::Multiple::Without whitespace", () => {
+    document.cookie = "smurf=abcdef;csrftoken=12345";
+    const cookie = readCookie("csrftoken");
+    expect(cookie).toEqual("12345");
+  });
+});
diff --git a/ansible_wisdom_console_react/src/api/api.ts b/ansible_wisdom_console_react/src/api/api.ts
index 7b738518d..9701a47f5 100644
--- a/ansible_wisdom_console_react/src/api/api.ts
+++ b/ansible_wisdom_console_react/src/api/api.ts
@@ -1,55 +1,61 @@
-import {TelemetryRequest, WcaKeyRequest, WcaModelIdRequest} from "./types";
+import { TelemetryRequest, WcaKeyRequest, WcaModelIdRequest } from "./types";
 import axios from "axios";
 
+export const API_TELEMETRY_PATH = "/api/v0/telemetry/";
 export const API_WCA_KEY_PATH = "/api/v0/wca/apikey/";
 export const API_WCA_MODEL_ID_PATH = "/api/v0/wca/modelid/";
 export const API_WCA_KEY_TEST_PATH = "/api/v0/wca/apikey/test";
 export const API_WCA_MODEL_ID_TEST_PATH = "/api/v0/wca/modelid/test";
-export const API_TELEMETRY_PATH = "/api/v0/telemetry/";
 
 export const readCookie = (name: string): string | null => {
-    const nameEQ = name + "=";
-    const ca = document.cookie.split(';');
-    for (let c of ca) {
-        const cookie = c.trim();
-        if (cookie.startsWith(nameEQ)) {
-            return cookie.substring(nameEQ.length, cookie.length);
-        }
+  const nameEQ = name + "=";
+  const ca = document.cookie.split(";");
+  for (let c of ca) {
+    const cookie = c.trim();
+    if (cookie.startsWith(nameEQ)) {
+      return cookie.substring(nameEQ.length, cookie.length);
     }
-    return null;
-}
+  }
+  return null;
+};
 
 export const getWcaKey = () => {
-    return axios.get(API_WCA_KEY_PATH);
+  return axios.get(API_WCA_KEY_PATH);
 };
 
 export const saveWcaKey = (wcaKey: WcaKeyRequest) => {
-    const csrfToken = readCookie('csrftoken');
-    return axios.post(API_WCA_KEY_PATH, wcaKey, {headers: {"X-CSRFToken": csrfToken}});
+  const csrfToken = readCookie("csrftoken");
+  return axios.post(API_WCA_KEY_PATH, wcaKey, {
+    headers: { "X-CSRFToken": csrfToken },
+  });
 };
 
 export const testWcaKey = () => {
-    return axios.get(API_WCA_KEY_TEST_PATH);
+  return axios.get(API_WCA_KEY_TEST_PATH);
 };
 
 export const getWcaModelId = () => {
-    return axios.get(API_WCA_MODEL_ID_PATH);
+  return axios.get(API_WCA_MODEL_ID_PATH);
 };
 
 export const saveWcaModelId = (wcaModelId: WcaModelIdRequest) => {
-    const csrfToken = readCookie('csrftoken');
-    return axios.post(API_WCA_MODEL_ID_PATH, wcaModelId, {headers: {"X-CSRFToken": csrfToken}});
+  const csrfToken = readCookie("csrftoken");
+  return axios.post(API_WCA_MODEL_ID_PATH, wcaModelId, {
+    headers: { "X-CSRFToken": csrfToken },
+  });
 };
 
 export const testWcaModelId = () => {
-    return axios.get(API_WCA_MODEL_ID_TEST_PATH);
+  return axios.get(API_WCA_MODEL_ID_TEST_PATH);
 };
 
 export const getTelemetrySettings = () => {
-    return axios.get(API_TELEMETRY_PATH);
+  return axios.get(API_TELEMETRY_PATH);
 };
 
 export const saveTelemetrySettings = (telemetry: TelemetryRequest) => {
-    const csrfToken = readCookie('csrftoken');
-    return axios.post(API_TELEMETRY_PATH, telemetry, {headers: {"X-CSRFToken": csrfToken}});
+  const csrfToken = readCookie("csrftoken");
+  return axios.post(API_TELEMETRY_PATH, telemetry, {
+    headers: { "X-CSRFToken": csrfToken },
+  });
 };
diff --git a/ansible_wisdom_console_react/src/api/types.ts b/ansible_wisdom_console_react/src/api/types.ts
index c82735e0d..75ace2473 100644
--- a/ansible_wisdom_console_react/src/api/types.ts
+++ b/ansible_wisdom_console_react/src/api/types.ts
@@ -1,44 +1,64 @@
 // Loading statuses and payloads
-export type Status = "NOT_ASKED" | "LOADING" | "FAILURE" | "SUCCESS" | "SUCCESS_NOT_FOUND";
+export type Status =
+  | "NOT_ASKED"
+  | "LOADING"
+  | "FAILURE"
+  | "SUCCESS"
+  | "SUCCESS_NOT_FOUND";
 export type NotAsked = { status: "NOT_ASKED" };
 export type Loading = { status: "LOADING" };
 export type Failure = { status: "FAILURE"; error: Error };
 export type Success<R> = { status: "SUCCESS"; data: R };
 export type SuccessNotFound = { status: "SUCCESS_NOT_FOUND" };
 
-export type WcaKey = NotAsked | Loading | Failure | Success<WcaKeyResponse> | SuccessNotFound;
-export type WcaModelId = NotAsked | Loading | Failure | Success<WcaModelIdResponse> | SuccessNotFound;
-export type Telemetry = NotAsked | Loading | Failure | Success<TelemetryResponse> | SuccessNotFound;
+export type WcaKey =
+  | NotAsked
+  | Loading
+  | Failure
+  | Success<WcaKeyResponse>
+  | SuccessNotFound;
+export type WcaModelId =
+  | NotAsked
+  | Loading
+  | Failure
+  | Success<WcaModelIdResponse>
+  | SuccessNotFound;
+export type Telemetry =
+  | NotAsked
+  | Loading
+  | Failure
+  | Success<TelemetryResponse>
+  | SuccessNotFound;
 
 // Request objects for the REST [GET] APIs
 export interface WcaKeyRequest {
-    key: string
+  key: string;
 }
 
 export interface WcaModelIdRequest {
-    model_id: string
+  model_id: string;
 }
 
 // Response objects for the REST [POST] APIs
 export interface WcaKeyResponse {
-    lastUpdate: Date;
+  lastUpdate: Date;
 }
 
 export interface WcaModelIdResponse {
-    model_id: string;
-    lastUpdate: Date;
+  model_id: string;
+  lastUpdate: Date;
 }
 
 export interface TelemetryRequest {
-    optOut: boolean
+  optOut: boolean;
 }
 
 export interface TelemetryResponse {
-    optOut: boolean
+  optOut: boolean;
 }
 
 export interface APIException {
-    status_code: number;
-    detail: string;
-    code: string;
+  status_code: number;
+  detail: string;
+  code: string;
 }
diff --git a/ansible_wisdom_console_react/src/denied/AppDenied.tsx b/ansible_wisdom_console_react/src/denied/AppDenied.tsx
index a2194fa9d..d63c90a6d 100644
--- a/ansible_wisdom_console_react/src/denied/AppDenied.tsx
+++ b/ansible_wisdom_console_react/src/denied/AppDenied.tsx
@@ -1,42 +1,42 @@
-import {useMemo} from 'react'
-import {useTranslation} from 'react-i18next'
-import {PageNavigationItem} from "@ansible/ansible-ui-framework";
-import {PageAppDenied} from "./PageAppDenied";
-import {AppHeader} from "../AppHeader";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { PageNavigationItem } from "@ansible/ansible-ui-framework";
+import { PageAppDenied } from "./PageAppDenied";
+import { AppHeader } from "../AppHeader";
 
 interface AppDeniedProps {
-    readonly userName?: string
-    readonly hasSubscription: boolean
+  readonly userName?: string;
+  readonly hasSubscription: boolean;
 }
 
 export function AppDenied(props: AppDeniedProps) {
-    const {t} = useTranslation();
-    const {userName, hasSubscription} = props;
+  const { t } = useTranslation();
+  const { userName, hasSubscription } = props;
 
-    const navigationItems = useMemo<PageNavigationItem[]>(
-        () => [
-            {
-                // Admin portal
-                label: t('AdminPortal'),
-                path: 'admin',
-                children: [
-                    {
-                        // Model settings
-                        label: t('ModelSettings'),
-                        path: 'settings',
-                        element: <></>
-                    },
-                ],
-            },
+  const navigationItems = useMemo<PageNavigationItem[]>(
+    () => [
+      {
+        // Admin portal
+        label: t("AdminPortal"),
+        path: "admin",
+        children: [
+          {
+            // Model settings
+            label: t("ModelSettings"),
+            path: "settings",
+            element: <></>,
+          },
         ],
-        [t]
-    );
+      },
+    ],
+    [t],
+  );
 
-    return (
-        <PageAppDenied
-            header={<AppHeader userName={userName ?? t("UnknownUser")}/>}
-            navigationItems={navigationItems}
-            hasSubscription={hasSubscription}
-        />
-    );
+  return (
+    <PageAppDenied
+      header={<AppHeader userName={userName ?? t("UnknownUser")} />}
+      navigationItems={navigationItems}
+      hasSubscription={hasSubscription}
+    />
+  );
 }
diff --git a/ansible_wisdom_console_react/src/denied/PageAppDenied.tsx b/ansible_wisdom_console_react/src/denied/PageAppDenied.tsx
index 1336a06e9..6318c5ccd 100644
--- a/ansible_wisdom_console_react/src/denied/PageAppDenied.tsx
+++ b/ansible_wisdom_console_react/src/denied/PageAppDenied.tsx
@@ -1,15 +1,19 @@
-import {PageFramework, PageLayout, PageNavigationItem} from '@ansible/ansible-ui-framework'
-import {Page} from '@patternfly/react-core'
-import {ReactNode, useMemo} from 'react'
-import {PageSidebar} from "../PageSidebar"
-import '../PageApp.css'
-import {createBrowserRouter, RouterProvider} from "react-router-dom";
-import {PageDenied} from "./PageDenied";
+import {
+  PageFramework,
+  PageLayout,
+  PageNavigationItem,
+} from "@ansible/ansible-ui-framework";
+import { Page } from "@patternfly/react-core";
+import { ReactNode, useMemo } from "react";
+import { PageSidebar } from "../PageSidebar";
+import "../PageApp.css";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { PageDenied } from "./PageDenied";
 
 interface PageAppDeniedProps {
-    readonly header: ReactNode
-    readonly navigationItems: PageNavigationItem[];
-    readonly hasSubscription: boolean;
+  readonly header: ReactNode;
+  readonly navigationItems: PageNavigationItem[];
+  readonly hasSubscription: boolean;
 }
 
 /**
@@ -20,43 +24,55 @@ interface PageAppDeniedProps {
  * @constructor
  */
 export function PageAppDenied(props: PageAppDeniedProps) {
-    const {navigationItems, header, hasSubscription} = props
-    const navigationItemsWithRoot = useMemo<PageNavigationItem[]>(
-        () => [
-            {
-                path: '*',
-                element: <PageRouterLayout
-                    header={header}
-                    navigationItems={navigationItems}
-                    hasSubscription={hasSubscription}/>,
-                children: navigationItems,
-            },
-        ],
-        [header, navigationItems, hasSubscription]
-    );
+  const { navigationItems, header, hasSubscription } = props;
+  const navigationItemsWithRoot = useMemo<PageNavigationItem[]>(
+    () => [
+      {
+        path: "*",
+        element: (
+          <PageRouterLayout
+            header={header}
+            navigationItems={navigationItems}
+            hasSubscription={hasSubscription}
+          />
+        ),
+        children: navigationItems,
+      },
+    ],
+    [header, navigationItems, hasSubscription],
+  );
 
-    const router = useMemo(
-        () => createBrowserRouter(navigationItemsWithRoot),
-        [navigationItemsWithRoot]
-    )
+  const router = useMemo(
+    () => createBrowserRouter(navigationItemsWithRoot),
+    [navigationItemsWithRoot],
+  );
 
-    return <RouterProvider router={router}/>
+  return <RouterProvider router={router} />;
 }
 
 function PageRouterLayout(props: PageAppDeniedProps) {
-    const {header, navigationItems, hasSubscription} = props
-    return (
-        <PageFramework>
-            <Page header={header} sidebar={<PageSidebar navigation={navigationItems}/>}>
-                <PageLayout>
-                    {hasSubscription && (
-                        <PageDenied titleKey={"NoPermissionsTitle"} captionKey={"NoPermissionsContactOrgCaption"}/>
-                    )}
-                    {!hasSubscription && (
-                        <PageDenied titleKey={"NoPermissionsNoSubscriptionTitle"} captionKey={"NoPermissionsNoSubscriptionContactOrgCaption"}/>
-                    )}
-                </PageLayout>
-            </Page>
-        </PageFramework>
-    )
+  const { header, navigationItems, hasSubscription } = props;
+  return (
+    <PageFramework>
+      <Page
+        header={header}
+        sidebar={<PageSidebar navigation={navigationItems} />}
+      >
+        <PageLayout>
+          {hasSubscription && (
+            <PageDenied
+              titleKey={"NoPermissionsTitle"}
+              captionKey={"NoPermissionsContactOrgCaption"}
+            />
+          )}
+          {!hasSubscription && (
+            <PageDenied
+              titleKey={"NoPermissionsNoSubscriptionTitle"}
+              captionKey={"NoPermissionsNoSubscriptionContactOrgCaption"}
+            />
+          )}
+        </PageLayout>
+      </Page>
+    </PageFramework>
+  );
 }
diff --git a/ansible_wisdom_console_react/src/denied/PageDenied.tsx b/ansible_wisdom_console_react/src/denied/PageDenied.tsx
index bf02e7a32..83750f77c 100644
--- a/ansible_wisdom_console_react/src/denied/PageDenied.tsx
+++ b/ansible_wisdom_console_react/src/denied/PageDenied.tsx
@@ -1,55 +1,72 @@
-import React from 'react';
-import {Bullseye, EmptyState, EmptyStateBody, Icon, PageSection, PageSectionVariants, Panel, PanelMain, PanelMainBody, Stack, StackItem, Text, TextContent, TextVariants} from "@patternfly/react-core";
-import {ExclamationCircleIcon} from "@patternfly/react-icons";
-import {useTranslation} from "react-i18next";
+import React from "react";
+import {
+  Bullseye,
+  EmptyState,
+  EmptyStateBody,
+  Icon,
+  PageSection,
+  PageSectionVariants,
+  Panel,
+  PanelMain,
+  PanelMainBody,
+  Stack,
+  StackItem,
+  Text,
+  TextContent,
+  TextVariants,
+} from "@patternfly/react-core";
+import { ExclamationCircleIcon } from "@patternfly/react-icons";
+import { useTranslation } from "react-i18next";
 
 interface PageDeniedProps {
-    readonly titleKey: string;
-    readonly captionKey: string;
+  readonly titleKey: string;
+  readonly captionKey: string;
 }
 
 export function PageDenied(props: PageDeniedProps) {
-    const {t} = useTranslation();
-    const {titleKey, captionKey} = props;
+  const { t } = useTranslation();
+  const { titleKey, captionKey } = props;
 
-    return (
-        <>
-            <PageSection variant={PageSectionVariants.light} isWidthLimited>
-                <TextContent>
-                    <Text component="h1">{t("ModelSettings")}</Text>
-                </TextContent>
-            </PageSection>
-            <PageSection>
-                <Panel variant={"bordered"} style={{height: "100%"}}>
-                    <PanelMain style={{height: "100%"}}>
-                        <PanelMainBody style={{height: "100%"}}>
-                            <Bullseye>
-                                <EmptyState>
-                                    <EmptyStateBody>
-                                        <Stack hasGutter={true} style={{alignItems: "center"}}>
-                                            <StackItem>
-                                                <Icon size="xl" status="danger">
-                                                    <ExclamationCircleIcon/>
-                                                </Icon>
-                                            </StackItem>
-                                            <StackItem>
-                                                <TextContent data-testid={"page-denied__title"}>
-                                                    <Text component={TextVariants.h1}>{t(titleKey)}</Text>
-                                                </TextContent>
-                                            </StackItem>
-                                            <StackItem>
-                                                <TextContent data-testid={"page-denied__caption"}>
-                                                    <Text component={TextVariants.p}>{t(captionKey)}</Text>
-                                                </TextContent>
-                                            </StackItem>
-                                        </Stack>
-                                    </EmptyStateBody>
-                                </EmptyState>
-                            </Bullseye>
-                        </PanelMainBody>
-                    </PanelMain>
-                </Panel>
-            </PageSection>
-        </>
-    )
+  return (
+    <>
+      <PageSection variant={PageSectionVariants.light} isWidthLimited>
+        <TextContent>
+          <Text component="h1">{t("ModelSettings")}</Text>
+        </TextContent>
+      </PageSection>
+      <PageSection>
+        <Panel variant={"bordered"} style={{ height: "100%" }}>
+          <PanelMain style={{ height: "100%" }}>
+            <PanelMainBody style={{ height: "100%" }}>
+              <Bullseye>
+                <EmptyState>
+                  <EmptyStateBody>
+                    <Stack hasGutter={true} style={{ alignItems: "center" }}>
+                      <StackItem>
+                        <Icon size="xl" status="danger">
+                          <ExclamationCircleIcon />
+                        </Icon>
+                      </StackItem>
+                      <StackItem>
+                        <TextContent data-testid={"page-denied__title"}>
+                          <Text component={TextVariants.h1}>{t(titleKey)}</Text>
+                        </TextContent>
+                      </StackItem>
+                      <StackItem>
+                        <TextContent data-testid={"page-denied__caption"}>
+                          <Text component={TextVariants.p}>
+                            {t(captionKey)}
+                          </Text>
+                        </TextContent>
+                      </StackItem>
+                    </Stack>
+                  </EmptyStateBody>
+                </EmptyState>
+              </Bullseye>
+            </PanelMainBody>
+          </PanelMain>
+        </Panel>
+      </PageSection>
+    </>
+  );
 }
diff --git a/ansible_wisdom_console_react/src/denied/__tests__/AppDenied.test.tsx b/ansible_wisdom_console_react/src/denied/__tests__/AppDenied.test.tsx
index 58f21ea3d..3a1a747ac 100644
--- a/ansible_wisdom_console_react/src/denied/__tests__/AppDenied.test.tsx
+++ b/ansible_wisdom_console_react/src/denied/__tests__/AppDenied.test.tsx
@@ -1,26 +1,21 @@
-import {render, screen} from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import {AppDenied} from "../AppDenied";
+import { AppDenied } from "../AppDenied";
 
-describe('App',
-    () => {
+describe("App", () => {
+  it("Rendering::With Username", async () => {
+    window.history.pushState({}, "Test page", "/console");
+    render(<AppDenied userName={"Batman"} hasSubscription={true} />);
+    const accountMenu = await screen.findByTestId("page-masthead-dropdown");
+    expect(accountMenu).toBeInTheDocument();
+    expect(accountMenu).toHaveTextContent("Batman");
+  });
 
-        it('Rendering::With Username',
-            async () => {
-                window.history.pushState({}, 'Test page', "/console")
-                render(<AppDenied userName={"Batman"} hasSubscription={true}/>);
-                const accountMenu = await screen.findByTestId("page-masthead-dropdown");
-                expect(accountMenu).toBeInTheDocument();
-                expect(accountMenu).toHaveTextContent("Batman");
-            });
-
-        it('Rendering::Without Username',
-            async () => {
-                window.history.pushState({}, 'Test page', "/console")
-                render(<AppDenied hasSubscription={false}/>);
-                const accountMenu = await screen.findByTestId("page-masthead-dropdown");
-                expect(accountMenu).toBeInTheDocument();
-                expect(accountMenu).toHaveTextContent("UnknownUser");
-            });
-
-    });
+  it("Rendering::Without Username", async () => {
+    window.history.pushState({}, "Test page", "/console");
+    render(<AppDenied hasSubscription={false} />);
+    const accountMenu = await screen.findByTestId("page-masthead-dropdown");
+    expect(accountMenu).toBeInTheDocument();
+    expect(accountMenu).toHaveTextContent("UnknownUser");
+  });
+});
diff --git a/ansible_wisdom_console_react/src/denied/__tests__/PageDenied.test.tsx b/ansible_wisdom_console_react/src/denied/__tests__/PageDenied.test.tsx
index a3f742c99..9f202a9d7 100644
--- a/ansible_wisdom_console_react/src/denied/__tests__/PageDenied.test.tsx
+++ b/ansible_wisdom_console_react/src/denied/__tests__/PageDenied.test.tsx
@@ -1,19 +1,15 @@
-import {render, screen} from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import {PageDenied} from "../PageDenied";
+import { PageDenied } from "../PageDenied";
 
-describe('App',
-    () => {
-
-        it('Basic rendering',
-            async () => {
-                render(<PageDenied titleKey={"titleKey"} captionKey={"captionKey"}/>);
-                const title = await screen.findByTestId("page-denied__title");
-                expect(title).toBeInTheDocument();
-                expect(title).toHaveTextContent("titleKey");
-                const caption = await screen.findByTestId("page-denied__caption");
-                expect(caption).toBeInTheDocument();
-                expect(caption).toHaveTextContent("captionKey");
-            });
-
-    });
+describe("App", () => {
+  it("Basic rendering", async () => {
+    render(<PageDenied titleKey={"titleKey"} captionKey={"captionKey"} />);
+    const title = await screen.findByTestId("page-denied__title");
+    expect(title).toBeInTheDocument();
+    expect(title).toHaveTextContent("titleKey");
+    const caption = await screen.findByTestId("page-denied__caption");
+    expect(caption).toBeInTheDocument();
+    expect(caption).toHaveTextContent("captionKey");
+  });
+});
diff --git a/ansible_wisdom_console_react/src/denied/denied.tsx b/ansible_wisdom_console_react/src/denied/denied.tsx
index 65fad17f8..7116671a1 100644
--- a/ansible_wisdom_console_react/src/denied/denied.tsx
+++ b/ansible_wisdom_console_react/src/denied/denied.tsx
@@ -1,19 +1,21 @@
-import '@patternfly/patternfly/patternfly-base.css'
-import '@patternfly/patternfly/patternfly-charts-theme-dark.css'
+import "@patternfly/patternfly/patternfly-base.css";
+import "@patternfly/patternfly/patternfly-charts-theme-dark.css";
 
-import '@ansible/ansible-ui-framework/style.css'
+import "@ansible/ansible-ui-framework/style.css";
 
-import {StrictMode} from 'react'
-import {createRoot} from 'react-dom/client'
-import '../i18n'
-import '../index.css'
-import {AppDenied} from "./AppDenied";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "../i18n";
+import "../index.css";
+import { AppDenied } from "./AppDenied";
 
-const userName = document.getElementById('user_name')?.innerText ?? undefined;
-const hasSubscription = document.getElementById('has_subscription')?.innerText.toLowerCase() === 'true';
+const userName = document.getElementById("user_name")?.innerText ?? undefined;
+const hasSubscription =
+  document.getElementById("has_subscription")?.innerText.toLowerCase() ===
+  "true";
 
-createRoot(document.getElementById('root') as HTMLElement).render(
-    <StrictMode>
-        <AppDenied userName={userName} hasSubscription={hasSubscription}/>
-    </StrictMode>
-)
+createRoot(document.getElementById("root") as HTMLElement).render(
+  <StrictMode>
+    <AppDenied userName={userName} hasSubscription={hasSubscription} />
+  </StrictMode>,
+);
diff --git a/ansible_wisdom_console_react/src/hooks/useTelemetryAPI.tsx b/ansible_wisdom_console_react/src/hooks/useTelemetryAPI.tsx
index 3d9e464ce..60b6480e4 100644
--- a/ansible_wisdom_console_react/src/hooks/useTelemetryAPI.tsx
+++ b/ansible_wisdom_console_react/src/hooks/useTelemetryAPI.tsx
@@ -1,30 +1,30 @@
-import {useEffect, useState} from "react";
-import {Telemetry} from "../api/types";
-import {getTelemetrySettings} from "../api/api";
+import { useEffect, useState } from "react";
+import { Telemetry } from "../api/types";
+import { getTelemetrySettings } from "../api/api";
 
 export const useTelemetry = () => {
-    const [telemetry, setTelemetry] = useState<Telemetry>({
-        status: "NOT_ASKED",
-    });
+  const [telemetry, setTelemetry] = useState<Telemetry>({
+    status: "NOT_ASKED",
+  });
 
-    useEffect(() => {
-        let isMounted = true;
-        setTelemetry({status: "LOADING"});
-        getTelemetrySettings()
-            .then((response) => {
-                if (isMounted) {
-                    const optOut = response.data['optOut'];
-                    setTelemetry({status: "SUCCESS", data: {optOut: optOut}});
-                }
-            })
-            .catch((error) => {
-                setTelemetry({status: "FAILURE", error: error});
-            });
+  useEffect(() => {
+    let isMounted = true;
+    setTelemetry({ status: "LOADING" });
+    getTelemetrySettings()
+      .then((response) => {
+        if (isMounted) {
+          const optOut = response.data["optOut"];
+          setTelemetry({ status: "SUCCESS", data: { optOut: optOut } });
+        }
+      })
+      .catch((error) => {
+        setTelemetry({ status: "FAILURE", error: error });
+      });
 
-        return () => {
-            isMounted = false;
-        };
-    }, []);
+    return () => {
+      isMounted = false;
+    };
+  }, []);
 
-    return telemetry;
+  return telemetry;
 };
diff --git a/ansible_wisdom_console_react/src/hooks/useWcaKeyAPI.tsx b/ansible_wisdom_console_react/src/hooks/useWcaKeyAPI.tsx
index 08313c5b0..f6c648d67 100644
--- a/ansible_wisdom_console_react/src/hooks/useWcaKeyAPI.tsx
+++ b/ansible_wisdom_console_react/src/hooks/useWcaKeyAPI.tsx
@@ -1,35 +1,38 @@
-import {useEffect, useState} from "react";
-import {WcaKey} from "../api/types";
-import {getWcaKey} from "../api/api";
+import { useEffect, useState } from "react";
+import { WcaKey } from "../api/types";
+import { getWcaKey } from "../api/api";
 
 export const useWcaKey = (reload: boolean) => {
-    const [wcaKey, setWcaKey] = useState<WcaKey>({
-        status: "NOT_ASKED",
-    });
+  const [wcaKey, setWcaKey] = useState<WcaKey>({
+    status: "NOT_ASKED",
+  });
 
-    useEffect(() => {
-        let isMounted = true;
-        if (reload) {
-            setWcaKey({status: "LOADING"});
-            getWcaKey()
-                .then((response) => {
-                    if (isMounted) {
-                        const lastUpdate = response.data['last_update'];
-                        if (lastUpdate) {
-                            setWcaKey({status: "SUCCESS", data: {lastUpdate: new Date(lastUpdate)}});
-                        } else {
-                            setWcaKey({status: "SUCCESS_NOT_FOUND"});
-                        }
-                    }
-                })
-                .catch((error) => {
-                    setWcaKey({status: "FAILURE", error: error});
-                });
-        }
-        return () => {
-            isMounted = false;
-        };
-    }, [reload]);
+  useEffect(() => {
+    let isMounted = true;
+    if (reload) {
+      setWcaKey({ status: "LOADING" });
+      getWcaKey()
+        .then((response) => {
+          if (isMounted) {
+            const lastUpdate = response.data["last_update"];
+            if (lastUpdate) {
+              setWcaKey({
+                status: "SUCCESS",
+                data: { lastUpdate: new Date(lastUpdate) },
+              });
+            } else {
+              setWcaKey({ status: "SUCCESS_NOT_FOUND" });
+            }
+          }
+        })
+        .catch((error) => {
+          setWcaKey({ status: "FAILURE", error: error });
+        });
+    }
+    return () => {
+      isMounted = false;
+    };
+  }, [reload]);
 
-    return wcaKey;
+  return wcaKey;
 };
diff --git a/ansible_wisdom_console_react/src/hooks/useWcaModelIdAPI.tsx b/ansible_wisdom_console_react/src/hooks/useWcaModelIdAPI.tsx
index 687f035b7..e8c59f94b 100644
--- a/ansible_wisdom_console_react/src/hooks/useWcaModelIdAPI.tsx
+++ b/ansible_wisdom_console_react/src/hooks/useWcaModelIdAPI.tsx
@@ -1,36 +1,39 @@
-import {useEffect, useState} from "react";
-import {WcaModelId} from "../api/types";
-import {getWcaModelId} from "../api/api";
+import { useEffect, useState } from "react";
+import { WcaModelId } from "../api/types";
+import { getWcaModelId } from "../api/api";
 
 export const useWcaModelId = (reload: boolean) => {
-    const [wcaModelId, setWcaModelId] = useState<WcaModelId>({
-        status: "NOT_ASKED",
-    });
+  const [wcaModelId, setWcaModelId] = useState<WcaModelId>({
+    status: "NOT_ASKED",
+  });
 
-    useEffect(() => {
-        let isMounted = true;
-        if (reload) {
-            setWcaModelId({status: "LOADING"});
-            getWcaModelId()
-                .then((response) => {
-                    if (isMounted) {
-                        const modelId = response.data['model_id'];
-                        const lastUpdate = response.data['last_update'];
-                        if (lastUpdate) {
-                            setWcaModelId({status: "SUCCESS", data: {model_id: modelId, lastUpdate: new Date(lastUpdate)}});
-                        } else {
-                            setWcaModelId({status: "SUCCESS_NOT_FOUND"});
-                        }
-                    }
-                })
-                .catch((error) => {
-                    setWcaModelId({status: "FAILURE", error: error});
-                });
-        }
-        return () => {
-            isMounted = false;
-        };
-    }, [reload]);
+  useEffect(() => {
+    let isMounted = true;
+    if (reload) {
+      setWcaModelId({ status: "LOADING" });
+      getWcaModelId()
+        .then((response) => {
+          if (isMounted) {
+            const modelId = response.data["model_id"];
+            const lastUpdate = response.data["last_update"];
+            if (lastUpdate) {
+              setWcaModelId({
+                status: "SUCCESS",
+                data: { model_id: modelId, lastUpdate: new Date(lastUpdate) },
+              });
+            } else {
+              setWcaModelId({ status: "SUCCESS_NOT_FOUND" });
+            }
+          }
+        })
+        .catch((error) => {
+          setWcaModelId({ status: "FAILURE", error: error });
+        });
+    }
+    return () => {
+      isMounted = false;
+    };
+  }, [reload]);
 
-    return wcaModelId;
+  return wcaModelId;
 };
diff --git a/ansible_wisdom_console_react/src/i18n.tsx b/ansible_wisdom_console_react/src/i18n.tsx
index fc68b6b7d..c4af9ddf8 100644
--- a/ansible_wisdom_console_react/src/i18n.tsx
+++ b/ansible_wisdom_console_react/src/i18n.tsx
@@ -1,25 +1,25 @@
-import i18n from 'i18next'
-import detector from 'i18next-browser-languagedetector'
-import backend from 'i18next-http-backend'
-import {initReactI18next} from 'react-i18next'
+import i18n from "i18next";
+import detector from "i18next-browser-languagedetector";
+import backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
 
-declare module 'i18next' {
-    interface CustomTypeOptions {
-        returnNull: false
-    }
+declare module "i18next" {
+  interface CustomTypeOptions {
+    returnNull: false;
+  }
 }
 
 void i18n
-    .use(backend)
-    .use(detector)
-    .use(initReactI18next) // passes i18n down to react-i18next
-    .init({
-        fallbackLng: 'en', // use en if detected lng is not available
-        supportedLngs: ['en'],
-        interpolation: {
-            escapeValue: false, // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
-        },
-        backend: {
-            loadPath: '/static/console/static/locales/{{lng}}/{{ns}}.json',
-        },
-    })
+  .use(backend)
+  .use(detector)
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    fallbackLng: "en", // use en if detected lng is not available
+    supportedLngs: ["en"],
+    interpolation: {
+      escapeValue: false, // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
+    },
+    backend: {
+      loadPath: "/static/console/static/locales/{{lng}}/{{ns}}.json",
+    },
+  });
diff --git a/ansible_wisdom_console_react/src/index.tsx b/ansible_wisdom_console_react/src/index.tsx
index a056bf816..c78a82828 100644
--- a/ansible_wisdom_console_react/src/index.tsx
+++ b/ansible_wisdom_console_react/src/index.tsx
@@ -1,20 +1,23 @@
-import '@patternfly/patternfly/patternfly-base.css'
-import '@patternfly/patternfly/patternfly-charts-theme-dark.css'
+import "@patternfly/patternfly/patternfly-base.css";
+import "@patternfly/patternfly/patternfly-charts-theme-dark.css";
 
-import '@ansible/ansible-ui-framework/style.css'
+import "@ansible/ansible-ui-framework/style.css";
 
-import {StrictMode} from 'react'
-import {createRoot} from 'react-dom/client'
-import {App} from './App'
-import './i18n'
-import './index.css'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import "./i18n";
+import "./index.css";
 
-const userName = document.getElementById('user_name')?.innerText ?? "undefined";
-const telemetryOptEnabledInnerText = document.getElementById('telemetry_opt_enabled')?.innerText;
-const telemetryOptEnabled = telemetryOptEnabledInnerText?.toLowerCase()==="true";
+const userName = document.getElementById("user_name")?.innerText ?? "undefined";
+const telemetryOptEnabledInnerText = document.getElementById(
+  "telemetry_opt_enabled",
+)?.innerText;
+const telemetryOptEnabled =
+  telemetryOptEnabledInnerText?.toLowerCase() === "true";
 
-createRoot(document.getElementById('root') as HTMLElement).render(
-    <StrictMode>
-        <App userName={userName} telemetryOptEnabled={telemetryOptEnabled}/>
-    </StrictMode>
-)
+createRoot(document.getElementById("root") as HTMLElement).render(
+  <StrictMode>
+    <App userName={userName} telemetryOptEnabled={telemetryOptEnabled} />
+  </StrictMode>,
+);
diff --git a/ansible_wisdom_console_react/src/react-app-env.d.ts b/ansible_wisdom_console_react/src/react-app-env.d.ts
index 83b167edf..4a3ff36d6 100644
--- a/ansible_wisdom_console_react/src/react-app-env.d.ts
+++ b/ansible_wisdom_console_react/src/react-app-env.d.ts
@@ -3,69 +3,69 @@
 /// <reference types="react-dom" />
 
 declare namespace NodeJS {
-    interface ProcessEnv {
-        readonly NODE_ENV: 'development' | 'production' | 'test';
-        readonly PUBLIC_URL: string;
-    }
+  interface ProcessEnv {
+    readonly NODE_ENV: "development" | "production" | "test";
+    readonly PUBLIC_URL: string;
+  }
 }
 
-declare module '*.avif' {
-    const src: string;
-    export default src;
+declare module "*.avif" {
+  const src: string;
+  export default src;
 }
 
-declare module '*.bmp' {
-    const src: string;
-    export default src;
+declare module "*.bmp" {
+  const src: string;
+  export default src;
 }
 
-declare module '*.gif' {
-    const src: string;
-    export default src;
+declare module "*.gif" {
+  const src: string;
+  export default src;
 }
 
-declare module '*.jpg' {
-    const src: string;
-    export default src;
+declare module "*.jpg" {
+  const src: string;
+  export default src;
 }
 
-declare module '*.jpeg' {
-    const src: string;
-    export default src;
+declare module "*.jpeg" {
+  const src: string;
+  export default src;
 }
 
-declare module '*.png' {
-    const src: string;
-    export default src;
+declare module "*.png" {
+  const src: string;
+  export default src;
 }
 
-declare module '*.webp' {
-    const src: string;
-    export default src;
+declare module "*.webp" {
+  const src: string;
+  export default src;
 }
 
-declare module '*.svg' {
-    import * as React from 'react';
+declare module "*.svg" {
+  import * as React from "react";
 
-    export const ReactComponent: React.FunctionComponent<React.SVGProps<
-        SVGSVGElement
-    > & { title?: string }>;
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >;
 
-    const src: string;
-    export default src;
+  const src: string;
+  export default src;
 }
 
-declare module '*.module.css' {
-    const classes: { readonly [key: string]: string };
-    export default classes;
+declare module "*.module.css" {
+  const classes: { readonly [key: string]: string };
+  export default classes;
 }
 
-declare module '*.module.scss' {
-    const classes: { readonly [key: string]: string };
-    export default classes;
+declare module "*.module.scss" {
+  const classes: { readonly [key: string]: string };
+  export default classes;
 }
 
-declare module '*.module.sass' {
-    const classes: { readonly [key: string]: string };
-    export default classes;
+declare module "*.module.sass" {
+  const classes: { readonly [key: string]: string };
+  export default classes;
 }