diff --git a/package-lock.json b/package-lock.json index bdf6b1da9..ca1a62b2a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.22.4", + "version": "1.22.5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.22.4", + "version": "1.22.5", "hasInstallScript": true, "license": "ISC", "dependencies": { diff --git a/package.json b/package.json index fac8b2739..226c955a6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.22.4", + "version": "1.22.5", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", diff --git a/src/Assets/IconV2/ic-curved-arrow.svg b/src/Assets/IconV2/ic-curved-arrow.svg new file mode 100644 index 000000000..04b4044dd --- /dev/null +++ b/src/Assets/IconV2/ic-curved-arrow.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/Assets/IconV2/ic-nav-cursor.svg b/src/Assets/IconV2/ic-nav-cursor.svg new file mode 100644 index 000000000..295732275 --- /dev/null +++ b/src/Assets/IconV2/ic-nav-cursor.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/Assets/Illustration/cmd-bar-visual.webp b/src/Assets/Illustration/cmd-bar-visual.webp new file mode 100644 index 000000000..2ca70968f Binary files /dev/null and b/src/Assets/Illustration/cmd-bar-visual.webp differ diff --git a/src/Shared/Components/DTFocusTrap/DTFocusTrap.tsx b/src/Shared/Components/DTFocusTrap/DTFocusTrap.tsx index 65bc9b4d1..01d68273c 100644 --- a/src/Shared/Components/DTFocusTrap/DTFocusTrap.tsx +++ b/src/Shared/Components/DTFocusTrap/DTFocusTrap.tsx @@ -38,11 +38,24 @@ const DTFocusTrap = ({ [onEscape, deactivateFocusOnEscape], ) + // Focus escape key bind when focus trap is avoided + const handleEscapeKeyBind = (e: KeyboardEvent) => { + if (e.key === 'Escape') { + onEscape(e) + } + } + useEffect(() => { + if (avoidFocusTrap) { + document.addEventListener('keydown', handleEscapeKeyBind) + } preventBodyScroll(true) return () => { preventBodyScroll(false) + if (avoidFocusTrap) { + document.removeEventListener('keydown', handleEscapeKeyBind) + } } }, []) diff --git a/src/Shared/Components/GenericModal/GenericModal.component.tsx b/src/Shared/Components/GenericModal/GenericModal.component.tsx index 3be60dab8..2f52309f5 100644 --- a/src/Shared/Components/GenericModal/GenericModal.component.tsx +++ b/src/Shared/Components/GenericModal/GenericModal.component.tsx @@ -21,7 +21,7 @@ import { noop, stopPropagation } from '@Common/Helper' import { Backdrop, Button, ButtonStyleType, ButtonVariantType, Icon } from '@Shared/Components' import { ComponentSizeType } from '@Shared/constants' -import { MODAL_WIDTH_TO_CLASS_NAME_MAP } from './constants' +import { BORDER_VARIANT_TO_CLASS_NAME_MAP, MODAL_WIDTH_TO_CLASS_NAME_MAP } from './constants' import { GenericModalProvider, useGenericModalContext } from './GenericModal.context' import { GenericModalFooterProps, GenericModalHeaderProps, GenericModalProps } from './types' @@ -87,13 +87,20 @@ const GenericModal = ({ onEscape = noop, closeOnBackdropClick = false, children, + avoidFocusTrap = false, + borderVariant = 'secondary', + alignCenter = false, }: PropsWithChildren) => ( {open && ( - + = { 450: 'w-450', @@ -22,3 +22,9 @@ export const MODAL_WIDTH_TO_CLASS_NAME_MAP: Record = { + secondary: 'border__secondary', + none: '', + 'secondary-translucent': 'border__secondary-translucent', +} diff --git a/src/Shared/Components/GenericModal/types.ts b/src/Shared/Components/GenericModal/types.ts index e5993b388..a71884e9e 100644 --- a/src/Shared/Components/GenericModal/types.ts +++ b/src/Shared/Components/GenericModal/types.ts @@ -17,7 +17,9 @@ import { BackdropProps } from '../Backdrop' import { ButtonProps } from '../Button' -export interface GenericModalProps extends Partial> { +export type BorderVariantType = 'secondary' | 'none' | 'secondary-translucent' + +export interface GenericModalProps extends Partial> { /** Unique identifier for the modal */ name: string /** Controls whether the modal is visible or hidden */ @@ -35,6 +37,8 @@ export interface GenericModalProps extends Partial {} diff --git a/src/Shared/Components/Icon/Icon.tsx b/src/Shared/Components/Icon/Icon.tsx index f9517d50e..17bf08959 100644 --- a/src/Shared/Components/Icon/Icon.tsx +++ b/src/Shared/Components/Icon/Icon.tsx @@ -96,6 +96,7 @@ import { ReactComponent as ICCostVisibility } from '@IconsV2/ic-cost-visibility. import { ReactComponent as ICCpu } from '@IconsV2/ic-cpu.svg' import { ReactComponent as ICCrown } from '@IconsV2/ic-crown.svg' import { ReactComponent as ICCube } from '@IconsV2/ic-cube.svg' +import { ReactComponent as ICCurvedArrow } from '@IconsV2/ic-curved-arrow.svg' import { ReactComponent as ICDatabaseBackup } from '@IconsV2/ic-database-backup.svg' import { ReactComponent as ICDelete } from '@IconsV2/ic-delete.svg' import { ReactComponent as ICDeleteDots } from '@IconsV2/ic-delete-dots.svg' @@ -217,6 +218,7 @@ import { ReactComponent as ICMobile } from '@IconsV2/ic-mobile.svg' import { ReactComponent as ICMonitoring } from '@IconsV2/ic-monitoring.svg' import { ReactComponent as ICMoreVertical } from '@IconsV2/ic-more-vertical.svg' import { ReactComponent as ICNamespace } from '@IconsV2/ic-namespace.svg' +import { ReactComponent as ICNavCursor } from '@IconsV2/ic-nav-cursor.svg' import { ReactComponent as ICNew } from '@IconsV2/ic-new.svg' import { ReactComponent as ICNodeScript } from '@IconsV2/ic-node-script.svg' import { ReactComponent as ICOidc } from '@IconsV2/ic-oidc.svg' @@ -412,6 +414,7 @@ export const iconMap = { 'ic-cpu': ICCpu, 'ic-crown': ICCrown, 'ic-cube': ICCube, + 'ic-curved-arrow': ICCurvedArrow, 'ic-database-backup': ICDatabaseBackup, 'ic-delete-dots': ICDeleteDots, 'ic-delete-lightning': ICDeleteLightning, @@ -533,6 +536,7 @@ export const iconMap = { 'ic-monitoring': ICMonitoring, 'ic-more-vertical': ICMoreVertical, 'ic-namespace': ICNamespace, + 'ic-nav-cursor': ICNavCursor, 'ic-new': ICNew, 'ic-node-script': ICNodeScript, 'ic-oidc': ICOidc, diff --git a/src/Shared/Components/Illustration/Illustration.tsx b/src/Shared/Components/Illustration/Illustration.tsx index aa6c8041f..409da2299 100644 --- a/src/Shared/Components/Illustration/Illustration.tsx +++ b/src/Shared/Components/Illustration/Illustration.tsx @@ -1,5 +1,6 @@ // NOTE: This file is auto-generated. Do not edit directly. Run the script `npm run generate-illustration` to update. +import CmdBarVisual from '@Illustrations/cmd-bar-visual.webp' import CreateBackupSchedule from '@Illustrations/create-backup-schedule.webp' import CreateBackupSnapshot from '@Illustrations/create-backup-snapshot.webp' import { ReactComponent as ImgCelebration } from '@Illustrations/img-celebration.svg' @@ -31,6 +32,7 @@ export const illustrationMap = { 'img-no-backup-location': ImgNoBackupLocation, 'img-no-restores': ImgNoRestores, 'img-page-not-found': ImgPageNotFound, + 'cmd-bar-visual': CmdBarVisual, 'create-backup-schedule': CreateBackupSchedule, 'create-backup-snapshot': CreateBackupSnapshot, 'img-code': ImgCode,