feat: navigation upgraded

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",

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)
+            }
         }
     }, [])
 

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<GenericModalProps>) => (
     <AnimatePresence>
         {open && (
             <GenericModalProvider value={{ name, onClose }}>
-                <Backdrop onEscape={onEscape} onClick={closeOnBackdropClick ? onClose : noop}>
+                <Backdrop
+                    onEscape={onEscape}
+                    onClick={closeOnBackdropClick ? onClose : noop}
+                    avoidFocusTrap={avoidFocusTrap}
+                >
                     <motion.div
-                        className={`shadow__modal flexbox-col bg__primary border__secondary br-${borderRadius} dc__m-auto mt-40 dc__overflow-hidden ${MODAL_WIDTH_TO_CLASS_NAME_MAP[width]}`}
+                        className={`shadow__modal flexbox-col bg__primary ${BORDER_VARIANT_TO_CLASS_NAME_MAP[borderVariant]} br-${borderRadius} dc__m-auto ${alignCenter ? '' : 'mt-40'} dc__overflow-hidden ${MODAL_WIDTH_TO_CLASS_NAME_MAP[width]}`}
                         exit={{ y: 100, opacity: 0, scale: 0.75, transition: { duration: 0.35 } }}
                         initial={{ y: 100, opacity: 0, scale: 0.75 }}
                         animate={{ y: 0, opacity: 1, scale: 1 }}

src/Shared/Components/GenericModal/constants.ts

@@ -14,11 +14,17 @@
  * limitations under the License.
  */
 
-import { GenericModalProps } from './types'
+import { BorderVariantType, GenericModalProps } from './types'
 
 export const MODAL_WIDTH_TO_CLASS_NAME_MAP: Record<GenericModalProps['width'], string> = {
     450: 'w-450',
     500: 'w-500',
     600: 'w-600',
     800: 'w-800',
 }
+
+export const BORDER_VARIANT_TO_CLASS_NAME_MAP: Record<BorderVariantType, string> = {
+    secondary: 'border__secondary',
+    none: '',
+    'secondary-translucent': 'border__secondary-translucent',
+}

src/Shared/Components/GenericModal/types.ts

@@ -17,7 +17,9 @@
 import { BackdropProps } from '../Backdrop'
 import { ButtonProps } from '../Button'
 
-export interface GenericModalProps extends Partial<Pick<BackdropProps, 'onEscape'>> {
+export type BorderVariantType = 'secondary' | 'none' | 'secondary-translucent'
+
+export interface GenericModalProps extends Partial<Pick<BackdropProps, 'onEscape' | 'avoidFocusTrap'>> {
     /** Unique identifier for the modal */
     name: string
     /** Controls whether the modal is visible or hidden */
@@ -35,6 +37,8 @@ export interface GenericModalProps extends Partial<Pick<BackdropProps, 'onEscape
      * @default false
      */
     closeOnBackdropClick?: boolean
+    borderVariant?: BorderVariantType
+    alignCenter?: boolean
 }
 
 export interface GenericModalContextType extends Pick<GenericModalProps, 'name' | 'onClose'> {}

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,

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,