From 8b00919e3867a13227f66885b677f5f189ed56fa Mon Sep 17 00:00:00 2001 From: Rohit Raj Date: Thu, 22 May 2025 13:17:43 +0530 Subject: [PATCH 01/86] feat: add @tanstack/react-query package, custom QueryClientProvider, useQueryClient hook --- package-lock.json | 40 +++++++++++++++++++++++++- package.json | 3 +- src/Common/API/QueryClientProvider.tsx | 40 ++++++++++++++++++++++++++ src/Common/API/index.ts | 2 ++ src/Common/API/useQueryClient.ts | 23 +++++++++++++++ src/react-query.d.ts | 35 ++++++++++++++++++++++ tsconfig.json | 2 +- 7 files changed, 142 insertions(+), 3 deletions(-) create mode 100644 src/Common/API/QueryClientProvider.tsx create mode 100644 src/Common/API/useQueryClient.ts create mode 100644 src/react-query.d.ts diff --git a/package-lock.json b/package-lock.json index 3f402a30e..379958a63 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,7 @@ "@lezer/highlight": "1.2.1", "@replit/codemirror-indentation-markers": "6.5.3", "@replit/codemirror-vscode-keymap": "6.0.2", - "@types/react-dates": "^21.8.6", + "@tanstack/react-query": "<5", "@uiw/codemirror-extensions-hyper-link": "4.23.10", "@uiw/codemirror-theme-github": "4.23.7", "@uiw/react-codemirror": "4.23.7", @@ -54,6 +54,7 @@ "@types/dompurify": "^3.0.5", "@types/json-schema": "^7.0.15", "@types/react": "17.0.39", + "@types/react-dates": "^21.8.6", "@types/react-dom": "17.0.13", "@types/react-router-dom": "^5.3.3", "@typescript-eslint/eslint-plugin": "8.3.0", @@ -3597,6 +3598,41 @@ "@svgr/core": "^6.0.0" } }, + "node_modules/@tanstack/query-core": { + "version": "4.36.1", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.36.1.tgz", + "integrity": "sha512-DJSilV5+ytBP1FbFcEJovv4rnnm/CokuVvrBEtW/Va9DvuJ3HksbXUJEpI0aV1KtuL4ZoO9AVE6PyNLzF7tLeA==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/react-query": { + "version": "4.36.1", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.36.1.tgz", + "integrity": "sha512-y7ySVHFyyQblPl3J3eQBWpXZkliroki3ARnBKsdJchlgt7yJLRDUcf4B8soufgiYt3pEQIkBWBx1N9/ZPIeUWw==", + "dependencies": { + "@tanstack/query-core": "4.36.1", + "use-sync-external-store": "^1.2.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-native": "*" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, "node_modules/@testing-library/dom": { "version": "8.20.1", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.1.tgz", @@ -3979,6 +4015,7 @@ "version": "21.8.6", "resolved": "https://registry.npmjs.org/@types/react-dates/-/react-dates-21.8.6.tgz", "integrity": "sha512-fDF322SOXAxstapv0/oruiPx9kY4DiiaEHYAVvXdPfQhi/hdaONsA9dFw5JBNPAWz7Niuwk+UUhxPU98h70TjA==", + "dev": true, "dependencies": { "@types/react": "*", "@types/react-outside-click-handler": "*", @@ -3998,6 +4035,7 @@ "version": "1.3.4", "resolved": "https://registry.npmjs.org/@types/react-outside-click-handler/-/react-outside-click-handler-1.3.4.tgz", "integrity": "sha512-kLuYIa9nWk1n0ywJPbVWqOEIRg0mh3vumriCHbz6LUObJw4rXYx9inDm8G579BtnH8vC0wKfrTq5c2y/K/Xzww==", + "dev": true, "dependencies": { "@types/react": "*" } diff --git a/package.json b/package.json index 733ca4fa2..3b7a92f6e 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "@types/dompurify": "^3.0.5", "@types/json-schema": "^7.0.15", "@types/react": "17.0.39", + "@types/react-dates": "^21.8.6", "@types/react-dom": "17.0.13", "@types/react-router-dom": "^5.3.3", "@typescript-eslint/eslint-plugin": "8.3.0", @@ -106,7 +107,7 @@ "@lezer/highlight": "1.2.1", "@replit/codemirror-indentation-markers": "6.5.3", "@replit/codemirror-vscode-keymap": "6.0.2", - "@types/react-dates": "^21.8.6", + "@tanstack/react-query": "<5", "@uiw/codemirror-extensions-hyper-link": "4.23.10", "@uiw/codemirror-theme-github": "4.23.7", "@uiw/react-codemirror": "4.23.7", diff --git a/src/Common/API/QueryClientProvider.tsx b/src/Common/API/QueryClientProvider.tsx new file mode 100644 index 000000000..c310bd3e4 --- /dev/null +++ b/src/Common/API/QueryClientProvider.tsx @@ -0,0 +1,40 @@ +import { PropsWithChildren } from 'react' +import { + MutationCache, + QueryCache, + QueryClient, + QueryClientProvider as RQQueryClientProvider, +} from '@tanstack/react-query' + +import { showError } from '@Common/Helper' + +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + cacheTime: 0, + refetchOnWindowFocus: false, + }, + }, + queryCache: new QueryCache({ + onError: (error, query) => { + const showToastError = query.meta?.showError ?? true + if (showToastError) { + showError(error) + } + }, + }), + mutationCache: new MutationCache({ + onError: (error, _variables, _context, mutation) => { + const showToastError = mutation.meta?.showError ?? true + if (showToastError) { + showError(error) + } + }, + }), +}) + +export const QueryClientProvider = ({ children }: PropsWithChildren<{}>) => ( + + {children} + +) diff --git a/src/Common/API/index.ts b/src/Common/API/index.ts index a0c3caaa1..fd9bd7aa2 100644 --- a/src/Common/API/index.ts +++ b/src/Common/API/index.ts @@ -9,4 +9,6 @@ const dashboardAPI = new CoreAPI({ export const { post, put, patch, get, trash } = dashboardAPI export { default as CoreAPI } from './CoreAPI' +export { QueryClientProvider } from './QueryClientProvider' +export * from './useQueryClient' export { abortPreviousRequests, getIsRequestAborted, handleRedirectToLicenseActivation } from './utils' diff --git a/src/Common/API/useQueryClient.ts b/src/Common/API/useQueryClient.ts new file mode 100644 index 000000000..2fe25109c --- /dev/null +++ b/src/Common/API/useQueryClient.ts @@ -0,0 +1,23 @@ +import { + QueryKey, + useMutation as rqUseMutation, + UseMutationOptions, + UseMutationResult, + useQuery as rqUseQuery, + useQueryClient, + UseQueryOptions, + UseQueryResult, +} from '@tanstack/react-query' + +import { ServerErrors } from '@Common/ServerError' +import { ResponseType } from '@Common/Types' + +export const useQuery = ( + options: UseQueryOptions, ServerErrors, TData, TQueryKey>, +): UseQueryResult => rqUseQuery(options) + +export const useMutation = ( + options: UseMutationOptions, ServerErrors, TVariables, TContext>, +): UseMutationResult, ServerErrors, TVariables, TContext> => rqUseMutation(options) + +export { useQueryClient } diff --git a/src/react-query.d.ts b/src/react-query.d.ts new file mode 100644 index 000000000..7a9662308 --- /dev/null +++ b/src/react-query.d.ts @@ -0,0 +1,35 @@ +import '@tanstack/react-query' + +declare module '@tanstack/react-query' { + export interface QueryMeta { + /** + * Optional flag indicating whether to display a toast notification for errors. + * @default true + */ + showError?: boolean + } + export interface MutationMeta { + /** + * Optional flag indicating whether to display a toast notification for errors. + * @default true + */ + showError?: boolean + } + + interface Register { + queryMeta: { + /** + * Optional flag indicating whether to display a toast notification for errors. + * @default true + */ + showError?: boolean + } + mutationMeta: { + /** + * Optional flag indicating whether to display a toast notification for errors. + * @default true + */ + showError?: boolean + } + } +} diff --git a/tsconfig.json b/tsconfig.json index 8ab4b2801..b305039e3 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -30,7 +30,7 @@ "noFallthroughCasesInSwitch": false, "types": ["vite/client"] }, - "include": ["src"], + "include": ["src", "src/custom.d.ts", "src/react-query.d.ts"], "exclude": ["src/**/*.spec.ts", "src/**/*.spec.tsx", "src/**/*.test.ts", "src/**/*.test.tsx"], "references": [ { From a1387709d3fae21bfa821a820960917c6833fdc4 Mon Sep 17 00:00:00 2001 From: Rohit Raj Date: Thu, 22 May 2025 13:19:14 +0530 Subject: [PATCH 02/86] chore(version): bump to 1.14.0-beta-0 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 379958a63..1b734e85b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.14.0-pre-0", + "version": "1.14.0-beta-0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.14.0-pre-0", + "version": "1.14.0-beta-0", "hasInstallScript": true, "license": "ISC", "dependencies": { diff --git a/package.json b/package.json index 3b7a92f6e..d11b472bb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.14.0-pre-0", + "version": "1.14.0-beta-0", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", From f9e42a1c12203f11b475994e1a9254737cac5d54 Mon Sep 17 00:00:00 2001 From: Rohit Raj Date: Thu, 22 May 2025 14:09:39 +0530 Subject: [PATCH 03/86] feat: update react-query type definitions --- src/index.ts | 19 +++++++++++++++++++ src/react-query.d.ts | 35 ----------------------------------- tsconfig.json | 2 +- 3 files changed, 20 insertions(+), 36 deletions(-) delete mode 100644 src/react-query.d.ts diff --git a/src/index.ts b/src/index.ts index 98f920ca5..90ad9c414 100644 --- a/src/index.ts +++ b/src/index.ts @@ -16,6 +16,8 @@ import { OverrideMergeStrategyType } from '@Pages/Applications' +import '@tanstack/react-query' + export interface customEnv { SENTRY_ENV?: string SENTRY_ERROR_ENABLED?: boolean @@ -168,6 +170,23 @@ declare global { } } +declare module '@tanstack/react-query' { + export interface QueryMeta { + /** + * Optional flag indicating whether to display a toast notification for errors. + * @default true + */ + showError?: boolean + } + export interface MutationMeta { + /** + * Optional flag indicating whether to display a toast notification for errors. + * @default true + */ + showError?: boolean + } +} + export * from './Common' export * from './Pages' export * from './Shared' diff --git a/src/react-query.d.ts b/src/react-query.d.ts deleted file mode 100644 index 7a9662308..000000000 --- a/src/react-query.d.ts +++ /dev/null @@ -1,35 +0,0 @@ -import '@tanstack/react-query' - -declare module '@tanstack/react-query' { - export interface QueryMeta { - /** - * Optional flag indicating whether to display a toast notification for errors. - * @default true - */ - showError?: boolean - } - export interface MutationMeta { - /** - * Optional flag indicating whether to display a toast notification for errors. - * @default true - */ - showError?: boolean - } - - interface Register { - queryMeta: { - /** - * Optional flag indicating whether to display a toast notification for errors. - * @default true - */ - showError?: boolean - } - mutationMeta: { - /** - * Optional flag indicating whether to display a toast notification for errors. - * @default true - */ - showError?: boolean - } - } -} diff --git a/tsconfig.json b/tsconfig.json index b305039e3..8ab4b2801 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -30,7 +30,7 @@ "noFallthroughCasesInSwitch": false, "types": ["vite/client"] }, - "include": ["src", "src/custom.d.ts", "src/react-query.d.ts"], + "include": ["src"], "exclude": ["src/**/*.spec.ts", "src/**/*.spec.tsx", "src/**/*.test.ts", "src/**/*.test.tsx"], "references": [ { From fdc59c24a43fefe05cffc6e0d8641e76c8d3db5a Mon Sep 17 00:00:00 2001 From: Rohit Raj Date: Thu, 22 May 2025 15:16:04 +0530 Subject: [PATCH 04/86] feat: update error handling flags in QueryClientProvider and default options --- src/Common/API/QueryClientProvider.tsx | 14 ++++++++++---- src/index.ts | 4 ++-- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/Common/API/QueryClientProvider.tsx b/src/Common/API/QueryClientProvider.tsx index c310bd3e4..4bfe157b2 100644 --- a/src/Common/API/QueryClientProvider.tsx +++ b/src/Common/API/QueryClientProvider.tsx @@ -13,20 +13,26 @@ const queryClient = new QueryClient({ queries: { cacheTime: 0, refetchOnWindowFocus: false, + refetchOnReconnect: false, + retry: false, + meta: { showToastError: true }, + }, + mutations: { + cacheTime: 0, + retry: false, + meta: { showToastError: true }, }, }, queryCache: new QueryCache({ onError: (error, query) => { - const showToastError = query.meta?.showError ?? true - if (showToastError) { + if (query.meta.showToastError) { showError(error) } }, }), mutationCache: new MutationCache({ onError: (error, _variables, _context, mutation) => { - const showToastError = mutation.meta?.showError ?? true - if (showToastError) { + if (mutation.meta.showToastError) { showError(error) } }, diff --git a/src/index.ts b/src/index.ts index 90ad9c414..b800ebe2f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -176,14 +176,14 @@ declare module '@tanstack/react-query' { * Optional flag indicating whether to display a toast notification for errors. * @default true */ - showError?: boolean + showToastError?: boolean } export interface MutationMeta { /** * Optional flag indicating whether to display a toast notification for errors. * @default true */ - showError?: boolean + showToastError?: boolean } } From 4cba97ccd5c8cef9da957d358391dc105e2fa1ab Mon Sep 17 00:00:00 2001 From: Rohit Raj Date: Thu, 22 May 2025 15:25:01 +0530 Subject: [PATCH 05/86] chore(version): bump to 1.14.0-beta-1 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1b734e85b..da0917fb5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.14.0-beta-0", + "version": "1.14.0-beta-1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.14.0-beta-0", + "version": "1.14.0-beta-1", "hasInstallScript": true, "license": "ISC", "dependencies": { diff --git a/package.json b/package.json index d11b472bb..52897daa6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.14.0-beta-0", + "version": "1.14.0-beta-1", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", From b5d97bc798282afad2db8f4e91b6813945488bde Mon Sep 17 00:00:00 2001 From: Rohit Raj Date: Thu, 22 May 2025 15:47:50 +0530 Subject: [PATCH 06/86] chore: revert @types/react-dates to dependencies --- package-lock.json | 4 +--- package.json | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index da0917fb5..0a2f660d1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "@replit/codemirror-indentation-markers": "6.5.3", "@replit/codemirror-vscode-keymap": "6.0.2", "@tanstack/react-query": "<5", + "@types/react-dates": "^21.8.6", "@uiw/codemirror-extensions-hyper-link": "4.23.10", "@uiw/codemirror-theme-github": "4.23.7", "@uiw/react-codemirror": "4.23.7", @@ -54,7 +55,6 @@ "@types/dompurify": "^3.0.5", "@types/json-schema": "^7.0.15", "@types/react": "17.0.39", - "@types/react-dates": "^21.8.6", "@types/react-dom": "17.0.13", "@types/react-router-dom": "^5.3.3", "@typescript-eslint/eslint-plugin": "8.3.0", @@ -4015,7 +4015,6 @@ "version": "21.8.6", "resolved": "https://registry.npmjs.org/@types/react-dates/-/react-dates-21.8.6.tgz", "integrity": "sha512-fDF322SOXAxstapv0/oruiPx9kY4DiiaEHYAVvXdPfQhi/hdaONsA9dFw5JBNPAWz7Niuwk+UUhxPU98h70TjA==", - "dev": true, "dependencies": { "@types/react": "*", "@types/react-outside-click-handler": "*", @@ -4035,7 +4034,6 @@ "version": "1.3.4", "resolved": "https://registry.npmjs.org/@types/react-outside-click-handler/-/react-outside-click-handler-1.3.4.tgz", "integrity": "sha512-kLuYIa9nWk1n0ywJPbVWqOEIRg0mh3vumriCHbz6LUObJw4rXYx9inDm8G579BtnH8vC0wKfrTq5c2y/K/Xzww==", - "dev": true, "dependencies": { "@types/react": "*" } diff --git a/package.json b/package.json index 52897daa6..6015db4a8 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,6 @@ "@types/dompurify": "^3.0.5", "@types/json-schema": "^7.0.15", "@types/react": "17.0.39", - "@types/react-dates": "^21.8.6", "@types/react-dom": "17.0.13", "@types/react-router-dom": "^5.3.3", "@typescript-eslint/eslint-plugin": "8.3.0", @@ -108,6 +107,7 @@ "@replit/codemirror-indentation-markers": "6.5.3", "@replit/codemirror-vscode-keymap": "6.0.2", "@tanstack/react-query": "<5", + "@types/react-dates": "^21.8.6", "@uiw/codemirror-extensions-hyper-link": "4.23.10", "@uiw/codemirror-theme-github": "4.23.7", "@uiw/react-codemirror": "4.23.7", From 91f3ab3223e3d5d82ab72eed473b7834f80476a9 Mon Sep 17 00:00:00 2001 From: Rohit Raj Date: Mon, 2 Jun 2025 14:55:41 +0530 Subject: [PATCH 07/86] fix: move @types/react-dates to dev dependency --- package-lock.json | 4 +++- package.json | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index b7c917975..5c4fc2d3b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,6 @@ "@replit/codemirror-indentation-markers": "6.5.3", "@replit/codemirror-vscode-keymap": "6.0.2", "@tanstack/react-query": "<5", - "@types/react-dates": "^21.8.6", "@uiw/codemirror-extensions-hyper-link": "4.23.10", "@uiw/codemirror-theme-github": "4.23.7", "@uiw/react-codemirror": "4.23.7", @@ -54,6 +53,7 @@ "@types/dompurify": "^3.0.5", "@types/json-schema": "^7.0.15", "@types/react": "17.0.39", + "@types/react-dates": "^21.8.6", "@types/react-dom": "17.0.13", "@types/react-router-dom": "^5.3.3", "@typescript-eslint/eslint-plugin": "8.3.0", @@ -4011,6 +4011,7 @@ "version": "21.8.6", "resolved": "https://registry.npmjs.org/@types/react-dates/-/react-dates-21.8.6.tgz", "integrity": "sha512-fDF322SOXAxstapv0/oruiPx9kY4DiiaEHYAVvXdPfQhi/hdaONsA9dFw5JBNPAWz7Niuwk+UUhxPU98h70TjA==", + "dev": true, "dependencies": { "@types/react": "*", "@types/react-outside-click-handler": "*", @@ -4030,6 +4031,7 @@ "version": "1.3.4", "resolved": "https://registry.npmjs.org/@types/react-outside-click-handler/-/react-outside-click-handler-1.3.4.tgz", "integrity": "sha512-kLuYIa9nWk1n0ywJPbVWqOEIRg0mh3vumriCHbz6LUObJw4rXYx9inDm8G579BtnH8vC0wKfrTq5c2y/K/Xzww==", + "dev": true, "dependencies": { "@types/react": "*" } diff --git a/package.json b/package.json index 633abee2d..1f92f33dc 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "@types/dompurify": "^3.0.5", "@types/json-schema": "^7.0.15", "@types/react": "17.0.39", + "@types/react-dates": "^21.8.6", "@types/react-dom": "17.0.13", "@types/react-router-dom": "^5.3.3", "@typescript-eslint/eslint-plugin": "8.3.0", @@ -107,7 +108,6 @@ "@replit/codemirror-indentation-markers": "6.5.3", "@replit/codemirror-vscode-keymap": "6.0.2", "@tanstack/react-query": "<5", - "@types/react-dates": "^21.8.6", "@uiw/codemirror-extensions-hyper-link": "4.23.10", "@uiw/codemirror-theme-github": "4.23.7", "@uiw/react-codemirror": "4.23.7", From 6c4a25fa4ccfa6fe8168c9470f968f1300f65bc9 Mon Sep 17 00:00:00 2001 From: Rohit Raj Date: Mon, 2 Jun 2025 14:56:53 +0530 Subject: [PATCH 08/86] chore(version): bump to 1.14.2-beta-0 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5c4fc2d3b..5a9e56eb0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.14.2-pre-3", + "version": "1.14.2-beta-0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.14.2-pre-3", + "version": "1.14.2-beta-0", "hasInstallScript": true, "license": "ISC", "dependencies": { diff --git a/package.json b/package.json index 1f92f33dc..a136f3bdc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.14.2-pre-3", + "version": "1.14.2-beta-0", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", From b0c64e398ccc0bb639f04ed48149fb38967e8e8d Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Wed, 9 Jul 2025 14:57:29 +0530 Subject: [PATCH 09/86] feat: add focus trap component and support --- package-lock.json | 31 +++++++++ package.json | 1 + src/Common/Drawer/Drawer.tsx | 21 ++++-- src/Common/Modals/Modal.tsx | 48 ++++++------- src/Common/Modals/VisibleModal.tsx | 66 +++++------------- src/Common/Modals/VisibleModal2.tsx | 52 ++++---------- src/Shared/Components/Backdrop/Backdrop.tsx | 68 +++++++------------ src/Shared/Components/Backdrop/types.ts | 13 +--- src/Shared/Components/Button/types.ts | 4 ++ .../ConfirmationModal/ConfirmationModal.tsx | 10 ++- .../Components/DTFocusTrap/DTFocusTrap.tsx | 42 ++++++++++++ src/Shared/Components/DTFocusTrap/index.tsx | 2 + src/Shared/Components/DTFocusTrap/types.ts | 36 ++++++++++ .../GenericModal/GenericModal.component.tsx | 14 ++-- .../Components/Popover/Popover.component.tsx | 8 ++- src/Shared/Components/Popover/types.ts | 1 + .../Components/Popover/usePopover.hook.ts | 5 +- src/Shared/Helpers.tsx | 13 ---- src/Shared/types.ts | 5 -- 19 files changed, 239 insertions(+), 201 deletions(-) create mode 100644 src/Shared/Components/DTFocusTrap/DTFocusTrap.tsx create mode 100644 src/Shared/Components/DTFocusTrap/index.tsx create mode 100644 src/Shared/Components/DTFocusTrap/types.ts diff --git a/package-lock.json b/package-lock.json index 2ee805ef0..1242a1138 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,6 +30,7 @@ "codemirror-json-schema": "0.8.0", "dayjs": "^1.11.13", "fast-json-patch": "^3.1.1", + "focus-trap-react": "^10.3.1", "framer-motion": "^6.5.1", "jsonpath-plus": "^10.3.0", "marked": "^13.0.3", @@ -7202,6 +7203,30 @@ "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==", "dev": true }, + "node_modules/focus-trap": { + "version": "7.6.5", + "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.5.tgz", + "integrity": "sha512-7Ke1jyybbbPZyZXFxEftUtxFGLMpE2n6A+z//m4CRDlj0hW+o3iYSmh8nFlYMurOiJVDmJRilUQtJr08KfIxlg==", + "license": "MIT", + "dependencies": { + "tabbable": "^6.2.0" + } + }, + "node_modules/focus-trap-react": { + "version": "10.3.1", + "resolved": "https://registry.npmjs.org/focus-trap-react/-/focus-trap-react-10.3.1.tgz", + "integrity": "sha512-PN4Ya9xf9nyj/Nd9VxBNMuD7IrlRbmaG6POAQ8VLqgtc6IY/Ln1tYakow+UIq4fihYYYFM70/2oyidE6bbiPgw==", + "license": "MIT", + "dependencies": { + "focus-trap": "^7.6.1", + "tabbable": "^6.2.0" + }, + "peerDependencies": { + "prop-types": "^15.8.1", + "react": ">=16.3.0", + "react-dom": ">=16.3.0" + } + }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -11666,6 +11691,12 @@ "url": "https://opencollective.com/unts" } }, + "node_modules/tabbable": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", + "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==", + "license": "MIT" + }, "node_modules/tapable": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", diff --git a/package.json b/package.json index 3584ea54a..95ecafffc 100644 --- a/package.json +++ b/package.json @@ -115,6 +115,7 @@ "codemirror-json-schema": "0.8.0", "dayjs": "^1.11.13", "fast-json-patch": "^3.1.1", + "focus-trap-react": "^10.3.1", "framer-motion": "^6.5.1", "jsonpath-plus": "^10.3.0", "marked": "^13.0.3", diff --git a/src/Common/Drawer/Drawer.tsx b/src/Common/Drawer/Drawer.tsx index d33d57acb..ca496f290 100644 --- a/src/Common/Drawer/Drawer.tsx +++ b/src/Common/Drawer/Drawer.tsx @@ -15,11 +15,11 @@ */ import { useRef, useEffect } from 'react' -import { preventBodyScroll } from '../../Shared' import { VisibleModal } from '../Modals/VisibleModal' import './Drawer.scss' +import { DTFocusTrapType } from '@Shared/Components/DTFocusTrap' -export interface DrawerProps { +export interface DrawerProps extends Pick { position: 'left' | 'right' | 'bottom' | 'top' children?: any backdrop?: boolean @@ -44,14 +44,13 @@ export const Drawer = ({ onEscape, onClose, disableTransition, + initialFocus = undefined, }: DrawerProps) => { const drawerRef = useRef(null) useEffect(() => { setTimeout(() => drawerRef.current?.classList?.add('show'), 1) - preventBodyScroll(true) return () => { drawerRef.current?.classList?.remove('show') - preventBodyScroll(false) } }, []) const style = {} @@ -64,8 +63,18 @@ export const Drawer = ({ style['--height'] = height } return ( - -