diff --git a/.prettierrc b/.prettierrc index aa88c7adca..2a2705b8ba 100644 --- a/.prettierrc +++ b/.prettierrc @@ -2,5 +2,6 @@ "semi": true, "singleQuote": false, "trailingComma": "none", - "endOfLine": "auto" + "endOfLine": "auto", + "plugins": ["prettier-plugin-tailwindcss"] } diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index aa1fddef8f..f05794bae6 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,6 +1,6 @@ \ No newline at end of file + href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&display=swap" + rel="stylesheet" +/> diff --git a/development.md b/development.md index f54a355201..bd5cb0d3a5 100644 --- a/development.md +++ b/development.md @@ -11,6 +11,7 @@ typescript: { check: false, } ``` + With CRA it's more complicated. ### css prop type @@ -21,11 +22,10 @@ For type information related to css prop types (see: [issue-comment](https://git "jsxImportSource": "@emotion/react", ``` - ## Packages ### @headlressui/react -We are using incsider (master) version of headlessui/react, for the `by` property on `Combobox`. Without `by`, selected item logic was difficult to achieve. +We are using incsider (master) version of headlessui/react, for the `by` property on `Combobox`. Without `by`, selected item logic was difficult to achieve. Be careful about updating this package. diff --git a/e2e/.eslintrc.js b/e2e/.eslintrc.js index 96ec2a0da6..434c80b713 100644 --- a/e2e/.eslintrc.js +++ b/e2e/.eslintrc.js @@ -1,33 +1,25 @@ module.exports = { - "env": { - "browser": true, - "es2021": true - }, - "extends": [ - "eslint:recommended", - "plugin:@typescript-eslint/recommended" - ], - "overrides": [ - { - "env": { - "node": true - }, - "files": [ - ".eslintrc.{js,cjs}" - ], - "parserOptions": { - "sourceType": "script" - } - } - ], - "parser": "@typescript-eslint/parser", - "parserOptions": { - "ecmaVersion": "latest", - "sourceType": "module" - }, - "plugins": [ - "@typescript-eslint" - ], - "rules": { + env: { + browser: true, + es2021: true + }, + extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"], + overrides: [ + { + env: { + node: true + }, + files: [".eslintrc.{js,cjs}"], + parserOptions: { + sourceType: "script" + } } -} + ], + parser: "@typescript-eslint/parser", + parserOptions: { + ecmaVersion: "latest", + sourceType: "module" + }, + plugins: ["@typescript-eslint"], + rules: {} +}; diff --git a/package-lock.json b/package-lock.json index 8ba92033a7..1fb1beb698 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,7 +6,7 @@ "packages": { "": { "name": "@flanksource/flanksource-ui", - "version": "1.0.707", + "version": "1.0.711", "dependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@clerk/nextjs": "^5.2.2", @@ -139,7 +139,8 @@ "postcss": "^8", "postcss-loader": "^7.0.1", "postcss-nesting": "^12.1.2", - "prettier": "^2.3.2", + "prettier": "^3.3.3", + "prettier-plugin-tailwindcss": "^0.6.5", "semantic-release": "^22.0.12", "source-map-explorer": "^2.5.2", "storybook": "^7.6.17", @@ -10149,6 +10150,21 @@ "node": ">=10" } }, + "node_modules/@storybook/cli/node_modules/prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/@storybook/cli/node_modules/semver": { "version": "7.5.4", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", @@ -10233,6 +10249,21 @@ "url": "https://opencollective.com/storybook" } }, + "node_modules/@storybook/codemod/node_modules/prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/@storybook/components": { "version": "7.6.17", "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.6.17.tgz", @@ -27063,6 +27094,20 @@ "monaco-editor": ">=0.36" } }, + "node_modules/monaco-yaml/node_modules/prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/mri": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz", @@ -33403,19 +33448,94 @@ } }, "node_modules/prettier": { - "version": "2.8.8", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", - "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz", + "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==", + "dev": true, "bin": { - "prettier": "bin-prettier.js" + "prettier": "bin/prettier.cjs" }, "engines": { - "node": ">=10.13.0" + "node": ">=14" }, "funding": { "url": "https://github.com/prettier/prettier?sponsor=1" } }, + "node_modules/prettier-plugin-tailwindcss": { + "version": "0.6.5", + "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.5.tgz", + "integrity": "sha512-axfeOArc/RiGHjOIy9HytehlC0ZLeMaqY09mm8YCkMzznKiDkwFzOpBvtuhuv3xG5qB73+Mj7OCe2j/L1ryfuQ==", + "dev": true, + "engines": { + "node": ">=14.21.3" + }, + "peerDependencies": { + "@ianvs/prettier-plugin-sort-imports": "*", + "@prettier/plugin-pug": "*", + "@shopify/prettier-plugin-liquid": "*", + "@trivago/prettier-plugin-sort-imports": "*", + "@zackad/prettier-plugin-twig-melody": "*", + "prettier": "^3.0", + "prettier-plugin-astro": "*", + "prettier-plugin-css-order": "*", + "prettier-plugin-import-sort": "*", + "prettier-plugin-jsdoc": "*", + "prettier-plugin-marko": "*", + "prettier-plugin-organize-attributes": "*", + "prettier-plugin-organize-imports": "*", + "prettier-plugin-sort-imports": "*", + "prettier-plugin-style-order": "*", + "prettier-plugin-svelte": "*" + }, + "peerDependenciesMeta": { + "@ianvs/prettier-plugin-sort-imports": { + "optional": true + }, + "@prettier/plugin-pug": { + "optional": true + }, + "@shopify/prettier-plugin-liquid": { + "optional": true + }, + "@trivago/prettier-plugin-sort-imports": { + "optional": true + }, + "@zackad/prettier-plugin-twig-melody": { + "optional": true + }, + "prettier-plugin-astro": { + "optional": true + }, + "prettier-plugin-css-order": { + "optional": true + }, + "prettier-plugin-import-sort": { + "optional": true + }, + "prettier-plugin-jsdoc": { + "optional": true + }, + "prettier-plugin-marko": { + "optional": true + }, + "prettier-plugin-organize-attributes": { + "optional": true + }, + "prettier-plugin-organize-imports": { + "optional": true + }, + "prettier-plugin-sort-imports": { + "optional": true + }, + "prettier-plugin-style-order": { + "optional": true + }, + "prettier-plugin-svelte": { + "optional": true + } + } + }, "node_modules/pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", diff --git a/package.json b/package.json index 9c05697804..6c54422183 100644 --- a/package.json +++ b/package.json @@ -194,7 +194,8 @@ "postcss": "^8", "postcss-loader": "^7.0.1", "postcss-nesting": "^12.1.2", - "prettier": "^2.3.2", + "prettier": "^3.3.3", + "prettier-plugin-tailwindcss": "^0.6.5", "semantic-release": "^22.0.12", "source-map-explorer": "^2.5.2", "storybook": "^7.6.17", diff --git a/pages/_app.tsx b/pages/_app.tsx index dee2b52ab2..7c2ad56421 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -16,7 +16,7 @@ export default function MyApp({ Component, pageProps }: AppProps) {
{authProvider === "clerk" ? ( diff --git a/pages/global.css b/pages/global.css index e4714a0b9b..a42a5845b5 100644 --- a/pages/global.css +++ b/pages/global.css @@ -35,11 +35,11 @@ @layer components { .form-label { - @apply block text-sm font-semibold text-gray-700 mb-2; + @apply mb-2 block text-sm font-semibold text-gray-700; } .table-auto { - @apply shadow-lg bg-white rounded-md; + @apply rounded-md bg-white shadow-lg; } .table-auto tbody tr { @@ -48,7 +48,7 @@ .table-auto thead tr { border-bottom-width: 1px; - @apply border-gray-200 uppercase text-gray-600 font-bold text-sm items-center text-left px-4 py-1; + @apply items-center border-gray-200 px-4 py-1 text-left text-sm font-bold uppercase text-gray-600; } .table-auto thead tr th { @@ -70,11 +70,11 @@ } .btn-primary { - @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none; + @apply inline-flex items-center justify-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none; } .btn-icon { - @apply text-gray-600 hover:text-gray-900 inline-flex items-center justify-center px-0 pl-0 border-none text-sm font-medium bg-white focus:outline-none; + @apply inline-flex items-center justify-center border-none bg-white px-0 pl-0 text-sm font-medium text-gray-600 hover:text-gray-900 focus:outline-none; } .btn-icon > svg * { @@ -86,51 +86,51 @@ } .link { - @apply text-blue-500 hover:text-blue-800 visited:text-blue-500 cursor-pointer; + @apply cursor-pointer text-blue-500 visited:text-blue-500 hover:text-blue-800; } .btn-white { - @apply inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-100 focus:outline-none; + @apply inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-100 focus:outline-none; } .btn-danger { - @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none; + @apply inline-flex items-center justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none; } .btn-disabled { - @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-gray-300; + @apply inline-flex items-center justify-center rounded-md border border-transparent bg-gray-300 px-4 py-2 text-sm font-medium text-white shadow-sm; } .btn-secondary { - @apply inline-flex items-center justify-center border-none shadow-sm font-medium rounded-md text-blue-500 bg-blue-100 hover:bg-blue-200 focus:ring-offset-white focus:ring-blue-500 focus:outline-none; + @apply inline-flex items-center justify-center rounded-md border-none bg-blue-100 font-medium text-blue-500 shadow-sm hover:bg-blue-200 focus:outline-none focus:ring-blue-500 focus:ring-offset-white; } .btn-secondary-disabled { - @apply inline-flex items-center justify-center border-none shadow-sm font-medium rounded-md text-blue-100 bg-gray-100 opacity-50 cursor-not-allowed; + @apply inline-flex cursor-not-allowed items-center justify-center rounded-md border-none bg-gray-100 font-medium text-blue-100 opacity-50 shadow-sm; } .btn-secondary-xs { - @apply px-2.5 py-1.5 rounded-sm text-xs leading-4 font-medium; + @apply rounded-sm px-2.5 py-1.5 text-xs font-medium leading-4; } .btn-secondary-sm { - @apply px-3.5 py-2.5 rounded-sm text-sm leading-4 font-medium; + @apply rounded-sm px-3.5 py-2.5 text-sm font-medium leading-4; } .btn-secondary-base { - @apply px-4 py-2 rounded text-sm leading-5 font-medium; + @apply rounded px-4 py-2 text-sm font-medium leading-5; } .btn-secondary-l { - @apply px-4 py-2 rounded-l text-base leading-6 font-medium; + @apply rounded-l px-4 py-2 text-base font-medium leading-6; } .btn-secondary-xl { - @apply px-6 py-3 rounded-xl text-base leading-6 font-medium; + @apply rounded-xl px-6 py-3 text-base font-medium leading-6; } .checkbox { - @apply h-4 w-4 border border-gray-300 rounded bg-white focus:outline-none transition duration-200 bg-no-repeat bg-center bg-contain float-left cursor-pointer; + @apply float-left h-4 w-4 cursor-pointer rounded border border-gray-300 bg-white bg-contain bg-center bg-no-repeat transition duration-200 focus:outline-none; } nav a.active { @@ -157,12 +157,12 @@ } .comfortable-table td { - @apply text-gray-900 text-sm py-2 px-4; + @apply px-4 py-2 text-sm text-gray-900; } .comfortable-table th { border-bottom-width: 1px; - @apply text-gray-500 text-xs leading-4 font-medium tracking-wider uppercase text-left px-6; + @apply px-6 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-500; } .comfortable-table th:first-of-type { @@ -200,7 +200,7 @@ } .compact-table td { - @apply text-gray-900 text-sm font-medium py-2 px-1; + @apply px-1 py-2 text-sm font-medium text-gray-900; } .compact-table th { @@ -216,7 +216,7 @@ } .btn-round-primary { - @apply bg-blue-600 text-white inline-flex items-center justify-center p-1 border-transparent hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blue-500; + @apply inline-flex items-center justify-center border-transparent bg-blue-600 p-1 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-100; } .btn-round-xs { @@ -256,22 +256,21 @@ } .menu-items { - @apply absolute bg-white focus:outline-none mt-2 opacity-100 origin-top-right right-0 ring-1 ring-black ring-opacity-5 rounded-md scale-100 shadow-md transform w-64 z-50; + @apply absolute right-0 z-50 mt-2 w-64 origin-top-right scale-100 transform rounded-md bg-white opacity-100 shadow-md ring-1 ring-black ring-opacity-5 focus:outline-none; } .menu-item { - @apply block w-full py-2 px-4 text-sm text-gray-700 hover:bg-gray-50 hover:text-gray-900 divide-gray-300 text-left; + @apply block w-full divide-gray-300 px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 hover:text-gray-900; } } - .admonition { - border-radius: 0.4rem; - box-shadow: 0 1px 2px 0 #0000001a; - padding: 0.7rem 0.7rem + border-radius: 0.4rem; + box-shadow: 0 1px 2px 0 #0000001a; + padding: 0.7rem 0.7rem; } -.admonition.info { +.admonition.info { background-color: #eef9fd; border: 0px solid #4cb3d4; border-left-width: 5px; @@ -279,8 +278,6 @@ .admonition.warning { border: 0px solid #e6a700; - background-color: #fff8e6; + background-color: #fff8e6; border-left-width: 5px; - - } - +} diff --git a/pages/login/[[...index]].tsx b/pages/login/[[...index]].tsx index 55e6a137d0..639413a338 100644 --- a/pages/login/[[...index]].tsx +++ b/pages/login/[[...index]].tsx @@ -9,7 +9,7 @@ export default function Signin() { return ( <> -
+
{authSystem === "kratos" && } {authSystem === "clerk" && } diff --git a/pages/profile-settings/[[...profile-settings]].tsx b/pages/profile-settings/[[...profile-settings]].tsx index 398f4ed6c6..7cddfd3b34 100644 --- a/pages/profile-settings/[[...profile-settings]].tsx +++ b/pages/profile-settings/[[...profile-settings]].tsx @@ -9,8 +9,8 @@ export default function ProfileSettings() { return ( <> -
-
+
+
{authSystem === "kratos" && } {authSystem === "clerk" && }
diff --git a/pages/registration/[[...registration]].tsx b/pages/registration/[[...registration]].tsx index de9fe393ce..f8fc8d5ec3 100644 --- a/pages/registration/[[...registration]].tsx +++ b/pages/registration/[[...registration]].tsx @@ -10,8 +10,8 @@ export default function Registration() { return ( <> -
-
+
+
{authSystem === "kratos" && } {authSystem === "clerk" && }
diff --git a/public/mockServiceWorker.js b/public/mockServiceWorker.js index 51d85eeebf..f7c6e5f52f 100644 --- a/public/mockServiceWorker.js +++ b/public/mockServiceWorker.js @@ -8,121 +8,121 @@ * - Please do NOT serve this file on production. */ -const INTEGRITY_CHECKSUM = '3d6b9f06410d179a7f7404d4bf4c3c70' -const activeClientIds = new Set() +const INTEGRITY_CHECKSUM = "3d6b9f06410d179a7f7404d4bf4c3c70"; +const activeClientIds = new Set(); -self.addEventListener('install', function () { - self.skipWaiting() -}) +self.addEventListener("install", function () { + self.skipWaiting(); +}); -self.addEventListener('activate', function (event) { - event.waitUntil(self.clients.claim()) -}) +self.addEventListener("activate", function (event) { + event.waitUntil(self.clients.claim()); +}); -self.addEventListener('message', async function (event) { - const clientId = event.source.id +self.addEventListener("message", async function (event) { + const clientId = event.source.id; if (!clientId || !self.clients) { - return + return; } - const client = await self.clients.get(clientId) + const client = await self.clients.get(clientId); if (!client) { - return + return; } const allClients = await self.clients.matchAll({ - type: 'window', - }) + type: "window" + }); switch (event.data) { - case 'KEEPALIVE_REQUEST': { + case "KEEPALIVE_REQUEST": { sendToClient(client, { - type: 'KEEPALIVE_RESPONSE', - }) - break + type: "KEEPALIVE_RESPONSE" + }); + break; } - case 'INTEGRITY_CHECK_REQUEST': { + case "INTEGRITY_CHECK_REQUEST": { sendToClient(client, { - type: 'INTEGRITY_CHECK_RESPONSE', - payload: INTEGRITY_CHECKSUM, - }) - break + type: "INTEGRITY_CHECK_RESPONSE", + payload: INTEGRITY_CHECKSUM + }); + break; } - case 'MOCK_ACTIVATE': { - activeClientIds.add(clientId) + case "MOCK_ACTIVATE": { + activeClientIds.add(clientId); sendToClient(client, { - type: 'MOCKING_ENABLED', - payload: true, - }) - break + type: "MOCKING_ENABLED", + payload: true + }); + break; } - case 'MOCK_DEACTIVATE': { - activeClientIds.delete(clientId) - break + case "MOCK_DEACTIVATE": { + activeClientIds.delete(clientId); + break; } - case 'CLIENT_CLOSED': { - activeClientIds.delete(clientId) + case "CLIENT_CLOSED": { + activeClientIds.delete(clientId); const remainingClients = allClients.filter((client) => { - return client.id !== clientId - }) + return client.id !== clientId; + }); // Unregister itself when there are no more clients if (remainingClients.length === 0) { - self.registration.unregister() + self.registration.unregister(); } - break + break; } } -}) +}); -self.addEventListener('fetch', function (event) { - const { request } = event - const accept = request.headers.get('accept') || '' +self.addEventListener("fetch", function (event) { + const { request } = event; + const accept = request.headers.get("accept") || ""; // Bypass server-sent events. - if (accept.includes('text/event-stream')) { - return + if (accept.includes("text/event-stream")) { + return; } // Bypass navigation requests. - if (request.mode === 'navigate') { - return + if (request.mode === "navigate") { + return; } // Opening the DevTools triggers the "only-if-cached" request // that cannot be handled by the worker. Bypass such requests. - if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') { - return + if (request.cache === "only-if-cached" && request.mode !== "same-origin") { + return; } // Bypass all requests when there are no active clients. // Prevents the self-unregistered worked from handling requests // after it's been deleted (still remains active until the next reload). if (activeClientIds.size === 0) { - return + return; } // Generate unique request ID. - const requestId = Math.random().toString(16).slice(2) + const requestId = Math.random().toString(16).slice(2); event.respondWith( handleRequest(event, requestId).catch((error) => { - if (error.name === 'NetworkError') { + if (error.name === "NetworkError") { console.warn( '[MSW] Successfully emulated a network error for the "%s %s" request.', request.method, - request.url, - ) - return + request.url + ); + return; } // At this point, any exception indicates an issue with the original request/response. @@ -131,24 +131,24 @@ self.addEventListener('fetch', function (event) { [MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`, request.method, request.url, - `${error.name}: ${error.message}`, - ) - }), - ) -}) + `${error.name}: ${error.message}` + ); + }) + ); +}); async function handleRequest(event, requestId) { - const client = await resolveMainClient(event) - const response = await getResponse(event, client, requestId) + const client = await resolveMainClient(event); + const response = await getResponse(event, client, requestId); // Send back the response clone for the "response:*" life-cycle events. // Ensure MSW is active and ready to handle the message, otherwise // this message will pend indefinitely. if (client && activeClientIds.has(client.id)) { - ;(async function () { - const clonedResponse = response.clone() + (async function () { + const clonedResponse = response.clone(); sendToClient(client, { - type: 'RESPONSE', + type: "RESPONSE", payload: { requestId, type: clonedResponse.type, @@ -158,13 +158,13 @@ async function handleRequest(event, requestId) { body: clonedResponse.body === null ? null : await clonedResponse.text(), headers: Object.fromEntries(clonedResponse.headers.entries()), - redirected: clonedResponse.redirected, - }, - }) - })() + redirected: clonedResponse.redirected + } + }); + })(); } - return response + return response; } // Resolve the main client for the given event. @@ -172,49 +172,49 @@ async function handleRequest(event, requestId) { // that registered the worker. It's with the latter the worker should // communicate with during the response resolving phase. async function resolveMainClient(event) { - const client = await self.clients.get(event.clientId) + const client = await self.clients.get(event.clientId); - if (client?.frameType === 'top-level') { - return client + if (client?.frameType === "top-level") { + return client; } const allClients = await self.clients.matchAll({ - type: 'window', - }) + type: "window" + }); return allClients .filter((client) => { // Get only those clients that are currently visible. - return client.visibilityState === 'visible' + return client.visibilityState === "visible"; }) .find((client) => { // Find the client ID that's recorded in the // set of clients that have registered the worker. - return activeClientIds.has(client.id) - }) + return activeClientIds.has(client.id); + }); } async function getResponse(event, client, requestId) { - const { request } = event - const clonedRequest = request.clone() + const { request } = event; + const clonedRequest = request.clone(); function passthrough() { // Clone the request because it might've been already used // (i.e. its body has been read and sent to the client). - const headers = Object.fromEntries(clonedRequest.headers.entries()) + const headers = Object.fromEntries(clonedRequest.headers.entries()); // Remove MSW-specific request headers so the bypassed requests // comply with the server's CORS preflight check. // Operate with the headers as an object because request "Headers" // are immutable. - delete headers['x-msw-bypass'] + delete headers["x-msw-bypass"]; - return fetch(clonedRequest, { headers }) + return fetch(clonedRequest, { headers }); } // Bypass mocking when the client is not active. if (!client) { - return passthrough() + return passthrough(); } // Bypass initial page load requests (i.e. static assets). @@ -222,18 +222,18 @@ async function getResponse(event, client, requestId) { // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet // and is not ready to handle requests. if (!activeClientIds.has(client.id)) { - return passthrough() + return passthrough(); } // Bypass requests with the explicit bypass header. // Such requests can be issued by "ctx.fetch()". - if (request.headers.get('x-msw-bypass') === 'true') { - return passthrough() + if (request.headers.get("x-msw-bypass") === "true") { + return passthrough(); } // Notify the client that a request has been intercepted. const clientMessage = await sendToClient(client, { - type: 'REQUEST', + type: "REQUEST", payload: { id: requestId, url: request.url, @@ -249,55 +249,55 @@ async function getResponse(event, client, requestId) { referrerPolicy: request.referrerPolicy, body: await request.text(), bodyUsed: request.bodyUsed, - keepalive: request.keepalive, - }, - }) + keepalive: request.keepalive + } + }); switch (clientMessage.type) { - case 'MOCK_RESPONSE': { - return respondWithMock(clientMessage.data) + case "MOCK_RESPONSE": { + return respondWithMock(clientMessage.data); } - case 'MOCK_NOT_FOUND': { - return passthrough() + case "MOCK_NOT_FOUND": { + return passthrough(); } - case 'NETWORK_ERROR': { - const { name, message } = clientMessage.data - const networkError = new Error(message) - networkError.name = name + case "NETWORK_ERROR": { + const { name, message } = clientMessage.data; + const networkError = new Error(message); + networkError.name = name; // Rejecting a "respondWith" promise emulates a network error. - throw networkError + throw networkError; } } - return passthrough() + return passthrough(); } function sendToClient(client, message) { return new Promise((resolve, reject) => { - const channel = new MessageChannel() + const channel = new MessageChannel(); channel.port1.onmessage = (event) => { if (event.data && event.data.error) { - return reject(event.data.error) + return reject(event.data.error); } - resolve(event.data) - } + resolve(event.data); + }; - client.postMessage(message, [channel.port2]) - }) + client.postMessage(message, [channel.port2]); + }); } function sleep(timeMs) { return new Promise((resolve) => { - setTimeout(resolve, timeMs) - }) + setTimeout(resolve, timeMs); + }); } async function respondWithMock(response) { - await sleep(response.delay) - return new Response(response.body, response) + await sleep(response.delay); + return new Response(response.body, response); } diff --git a/src/__tests__/Canary/Rows/lib.test.js b/src/__tests__/Canary/Rows/lib.test.js index 4f45bd7991..f560e96f47 100644 --- a/src/__tests__/Canary/Rows/lib.test.js +++ b/src/__tests__/Canary/Rows/lib.test.js @@ -31,7 +31,7 @@ describe("prepareRows", () => { rows.forEach((obj, i) => { const pivot = subsetOne[i].namespace !== "" - ? `piv0t-${subsetOne[i].namespace}` ?? "piv0t-other" + ? (`piv0t-${subsetOne[i].namespace}` ?? "piv0t-other") : "piv0t-other"; expect(obj).toEqual({ valueLookup: pivot, @@ -62,7 +62,7 @@ describe("prepareRows", () => { rows.forEach((obj, i) => { const pivot = subsetOne[i].namespace !== "" - ? `piv0t-${subsetOne[i].namespace}` ?? "piv0t-other" + ? (`piv0t-${subsetOne[i].namespace}` ?? "piv0t-other") : "piv0t-other"; expect(obj).toEqual({ valueLookup: pivot, @@ -135,11 +135,11 @@ describe("prepareRows", () => { expect(obj).toEqual(testRow); } else { const value = - obj?.pivoted === true ? obj[obj?.valueLookup] ?? null : obj; + obj?.pivoted === true ? (obj[obj?.valueLookup] ?? null) : obj; const sourceObj = subsetMap[value?.sourceName] ?? {}; const pivot = sourceObj.namespace !== "" - ? `piv0t-${sourceObj.namespace}` ?? "piv0t-other" + ? (`piv0t-${sourceObj.namespace}` ?? "piv0t-other") : "piv0t-other"; // eslint-disable-next-line jest/no-conditional-expect expect(obj).toEqual({ @@ -216,7 +216,7 @@ describe("prepareRows", () => { expect(obj).toEqual(testRow); } else { const value = - obj?.pivoted === true ? obj[obj?.valueLookup] ?? null : obj; + obj?.pivoted === true ? (obj[obj?.valueLookup] ?? null) : obj; const sourceObj = subsetMap[value?.sourceName] ?? {}; const isLabelsPlainObject = isPlainObject(sourceObj.labels); if ( diff --git a/src/api/services/configs.ts b/src/api/services/configs.ts index c94afb5624..18f7a15d19 100644 --- a/src/api/services/configs.ts +++ b/src/api/services/configs.ts @@ -19,9 +19,8 @@ export const getAllConfigs = () => resolve(ConfigDB.get(`/configs`)); export const getConfigsTags = async () => { - const res = await ConfigDB.get<{ key: string; value: string }[]>( - "/config_tags" - ); + const res = + await ConfigDB.get<{ key: string; value: string }[]>("/config_tags"); return res.data ?? []; }; @@ -292,11 +291,14 @@ export async function getConfigsChanges({ // we want to convert the tags array to a string of key=[1,2,3] const exclude = tags[0].exclude; // We can only exclude or include all tags, not a mix of both const tagList = Object.entries( - tags.reduce((acc, tag) => { - acc[tag.key] = acc[tag.key] || []; - acc[tag.key].push(tag.value); - return acc; - }, {} as Record) + tags.reduce( + (acc, tag) => { + acc[tag.key] = acc[tag.key] || []; + acc[tag.key].push(tag.value); + return acc; + }, + {} as Record + ) ).map(([key, values]) => { if (values.length > 1) { const equalSign = exclude ? "notin" : "in"; diff --git a/src/api/traits.ts b/src/api/traits.ts index 695d7e01ee..6c1ae39301 100644 --- a/src/api/traits.ts +++ b/src/api/traits.ts @@ -1,7 +1,7 @@ import { DateType } from "./types/common"; import { User } from "./types/users"; -export interface Timestamped extends CreatedAt, UpdatedAt, Deletable { } +export interface Timestamped extends CreatedAt, UpdatedAt, Deletable {} export interface CreatedAt { created_at?: DateType; diff --git a/src/components/Agents/Add/AddAgentForm.tsx b/src/components/Agents/Add/AddAgentForm.tsx index 545371fdbe..2b4cb7c313 100644 --- a/src/components/Agents/Add/AddAgentForm.tsx +++ b/src/components/Agents/Add/AddAgentForm.tsx @@ -110,14 +110,14 @@ export default function AgentForm({ > {({ handleSubmit, values }) => (
+
Kubernetes
} diff --git a/src/components/Agents/AgentNamesDropdown.tsx b/src/components/Agents/AgentNamesDropdown.tsx index 363d2431a3..014f48e22a 100644 --- a/src/components/Agents/AgentNamesDropdown.tsx +++ b/src/components/Agents/AgentNamesDropdown.tsx @@ -45,7 +45,7 @@ export function AgentNamesDropdown({ hideControlBorder defaultValue="All" prefix={ -
+
Agent:
} diff --git a/src/components/Agents/AgentPage.tsx b/src/components/Agents/AgentPage.tsx index 63dc7c16ce..eba6e04cbf 100644 --- a/src/components/Agents/AgentPage.tsx +++ b/src/components/Agents/AgentPage.tsx @@ -81,7 +81,7 @@ export default function AgentsPage() { contentClass="p-0 h-full" loading={isLoading || isRefetching} > -
+
+

Copy the following command to install agent

diff --git a/src/components/Agents/InstalAgentInstruction/FluxInstallAgent.tsx b/src/components/Agents/InstalAgentInstruction/FluxInstallAgent.tsx index 1ccea36d3d..fb24953045 100644 --- a/src/components/Agents/InstalAgentInstruction/FluxInstallAgent.tsx +++ b/src/components/Agents/InstalAgentInstruction/FluxInstallAgent.tsx @@ -94,7 +94,7 @@ export default function FluxInstallAgent({ }, [agentFormValues, baseUrl, generatedAgent, kubeOptions]); return ( -
+
); diff --git a/src/components/Agents/InstalAgentInstruction/InstallAgentModal.tsx b/src/components/Agents/InstalAgentInstruction/InstallAgentModal.tsx index ac8ba3e814..77e1dee82c 100644 --- a/src/components/Agents/InstalAgentInstruction/InstallAgentModal.tsx +++ b/src/components/Agents/InstalAgentInstruction/InstallAgentModal.tsx @@ -10,7 +10,7 @@ import FluxInstallAgent from "./FluxInstallAgent"; export function WarningBox() { return (
@@ -37,7 +37,7 @@ export function MoreInfoBox() { for more options on fine-tuning the import of Kubernetes resources.

-

Next Steps

+

Next Steps

  • @@ -106,11 +106,11 @@ export default function InstallAgentModal({ bodyClass="flex flex-col w-full flex-1 h-full overflow-y-auto" helpLink="/installation/saas/agent" > -
    -

    +
    +

    Install the Mission Control agent using instructions below

    -
    +
    setActiveTab(v as any)} diff --git a/src/components/Agents/List/AgentsTableColumns.tsx b/src/components/Agents/List/AgentsTableColumns.tsx index 1de78ad89f..e380812de7 100644 --- a/src/components/Agents/List/AgentsTableColumns.tsx +++ b/src/components/Agents/List/AgentsTableColumns.tsx @@ -47,7 +47,7 @@ export const agentsTableColumns: ColumnDef[] = [ const isOnline = now.diff(lastSeenDate, "seconds") < 61; return ( -
    +
    diff --git a/src/components/Authentication/Clerk/ClerkAuthErrors.tsx b/src/components/Authentication/Clerk/ClerkAuthErrors.tsx index 9aaae72740..7690eff98e 100644 --- a/src/components/Authentication/Clerk/ClerkAuthErrors.tsx +++ b/src/components/Authentication/Clerk/ClerkAuthErrors.tsx @@ -12,9 +12,9 @@ export default function ClerkAuthErrors() { return ( <> -
    -
    -
    +
    +
    +
    -
    -
    -
    +
    +
    +
    {code === "BAD_SESSION" ? ( signOut()} - className="block w-full py-2 px-4 text-left text-sm text-gray-700 hover:bg-gray-50 hover:text-gray-900 border-0 border-b border-gray-200" + className="block w-full border-0 border-b border-gray-200 px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 hover:text-gray-900" > Sign out diff --git a/src/components/Authentication/Clerk/ClerkOrgModal.tsx b/src/components/Authentication/Clerk/ClerkOrgModal.tsx index 7e00ec1b14..368512dff1 100644 --- a/src/components/Authentication/Clerk/ClerkOrgModal.tsx +++ b/src/components/Authentication/Clerk/ClerkOrgModal.tsx @@ -4,26 +4,26 @@ import { clerkUrls } from "./ClerkAuthSessionChecker"; export default function ClerkOrgModal() { return ( -
    -
    -
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    +
    +
    -
    -
    -
    +
    +
    +
    -
    +
    -
    +
    -
    +
    +
    +
    ); diff --git a/src/components/Authentication/Clerk/InstanceCreationInProgress.tsx b/src/components/Authentication/Clerk/InstanceCreationInProgress.tsx index cfb025ab37..530b230f74 100644 --- a/src/components/Authentication/Clerk/InstanceCreationInProgress.tsx +++ b/src/components/Authentication/Clerk/InstanceCreationInProgress.tsx @@ -5,21 +5,21 @@ import { clerkUrls } from "./ClerkAuthSessionChecker"; export default function InstanceCreationInProgress() { return ( -
    -
    -
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    +
    +
    -
    -
    -
    +
    +
    +
    -
    +
    -
    +
    diff --git a/src/components/Authentication/Kratos/KratosLogin.tsx b/src/components/Authentication/Kratos/KratosLogin.tsx index 082627e976..f74e9050aa 100644 --- a/src/components/Authentication/Kratos/KratosLogin.tsx +++ b/src/components/Authentication/Kratos/KratosLogin.tsx @@ -164,7 +164,7 @@ const KratosLogin = () => { width={75} alt="Mission Control" src="/images/logo.svg" - className="p-2 h-auto m-auto rounded-8px w-72" + className="m-auto h-auto w-72 rounded-8px p-2" />

    {(() => { @@ -176,7 +176,7 @@ const KratosLogin = () => { return "Sign In to your account"; })()}

    -
    +
    {loginSuccessful || credentials ? ( ) : ( @@ -185,7 +185,7 @@ const KratosLogin = () => {
    -
    Reset password
    +
    Reset password
    diff --git a/src/components/Authentication/Kratos/KratosLogoutButton.tsx b/src/components/Authentication/Kratos/KratosLogoutButton.tsx index 7cb3cb9d84..ab5829c4d3 100644 --- a/src/components/Authentication/Kratos/KratosLogoutButton.tsx +++ b/src/components/Authentication/Kratos/KratosLogoutButton.tsx @@ -12,7 +12,7 @@ export default function KratosLogoutButton() { diff --git a/src/components/Authentication/Kratos/KratosProfileSettings.tsx b/src/components/Authentication/Kratos/KratosProfileSettings.tsx index d2fd814c23..44ebaeb4f5 100644 --- a/src/components/Authentication/Kratos/KratosProfileSettings.tsx +++ b/src/components/Authentication/Kratos/KratosProfileSettings.tsx @@ -34,7 +34,7 @@ function SettingsCard({ } return ( -
    +
    {children}
    ); @@ -118,15 +118,15 @@ function KratosProfileSettings() { ); return ( -
    +
    {/* eslint-disable-next-line @next/next/no-img-element */} Mission Control
    - + Go back diff --git a/src/components/Authentication/Kratos/KratosRecovery.tsx b/src/components/Authentication/Kratos/KratosRecovery.tsx index fe6a3fad39..51be3b1775 100644 --- a/src/components/Authentication/Kratos/KratosRecovery.tsx +++ b/src/components/Authentication/Kratos/KratosRecovery.tsx @@ -84,19 +84,19 @@ function KratosRecovery() { return ( <> -
    -
    +
    +
    Mission Control

    Recover account

    -
    +
    diff --git a/src/components/Authentication/Kratos/KratosRegistration.tsx b/src/components/Authentication/Kratos/KratosRegistration.tsx index ee60b32e9c..bcfb2d327c 100644 --- a/src/components/Authentication/Kratos/KratosRegistration.tsx +++ b/src/components/Authentication/Kratos/KratosRegistration.tsx @@ -92,12 +92,12 @@ export default function KratosRegistration() { Mission Control

    Create account

    -
    +
    @@ -105,7 +105,7 @@ export default function KratosRegistration() { Sign in diff --git a/src/components/Authentication/Kratos/KratosUserProfileDropdown.tsx b/src/components/Authentication/Kratos/KratosUserProfileDropdown.tsx index feb1c51931..081fe09e86 100644 --- a/src/components/Authentication/Kratos/KratosUserProfileDropdown.tsx +++ b/src/components/Authentication/Kratos/KratosUserProfileDropdown.tsx @@ -12,9 +12,9 @@ export function KratosUserProfileDropdown() { const userNavigation = [{ name: "Your Profile", href: "/profile-settings" }]; return ( - +
    - + {user?.avatar ? ( // eslint-disable-next-line @next/next/no-img-element - + - + Hi {user?.name} @@ -50,7 +50,7 @@ export function KratosUserProfileDropdown() { {item.name} diff --git a/src/components/Authentication/Kratos/ory/ui/Flow.tsx b/src/components/Authentication/Kratos/ory/ui/Flow.tsx index 486c253ff9..2a9dd04f5d 100644 --- a/src/components/Authentication/Kratos/ory/ui/Flow.tsx +++ b/src/components/Authentication/Kratos/ory/ui/Flow.tsx @@ -209,7 +209,7 @@ export class Flow extends Component, State> { nodes: nodes, groups: ["oidc"], withoutDefaultGroup: true - }).length > 0 &&
    } + }).length > 0 &&
    }
    diff --git a/src/components/Authentication/Kratos/ory/ui/NodeInputDefault.tsx b/src/components/Authentication/Kratos/ory/ui/NodeInputDefault.tsx index 88c19e6d4a..7d5fa7f7db 100644 --- a/src/components/Authentication/Kratos/ory/ui/NodeInputDefault.tsx +++ b/src/components/Authentication/Kratos/ory/ui/NodeInputDefault.tsx @@ -41,7 +41,7 @@ export function NodeInputDefault(props: NodeInputProps) { disabled={attributes.disabled || disabled} /> {!!node.messages.length && ( -
    +
    {node.messages.map(({ text, id }, k) => ( {text} diff --git a/src/components/Authentication/Kratos/ory/ui/NodeInputSubmit.tsx b/src/components/Authentication/Kratos/ory/ui/NodeInputSubmit.tsx index ec5dbec950..979839fd19 100644 --- a/src/components/Authentication/Kratos/ory/ui/NodeInputSubmit.tsx +++ b/src/components/Authentication/Kratos/ory/ui/NodeInputSubmit.tsx @@ -12,7 +12,7 @@ export function NodeInputSubmit({ }: NodeInputProps) { return ( diff --git a/src/components/Canary/CanaryCards.tsx b/src/components/Canary/CanaryCards.tsx index f89a120d78..dd609905ba 100644 --- a/src/components/Canary/CanaryCards.tsx +++ b/src/components/Canary/CanaryCards.tsx @@ -10,19 +10,19 @@ type CanaryCardProps = { export function CanaryCards({ checks, onClick }: CanaryCardProps) { return ( -
      +
        {checks.map((check) => (