Merge pull request #406 from devtron-labs/feat/confirmation-modal

feat: add new confirmation modal

Author: arunjaindev

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.1.5",
+    "version": "1.1.6",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -95,6 +95,7 @@
         "ansi_up": "^5.2.1",
         "dayjs": "^1.11.13",
         "fast-json-patch": "^3.1.1",
+        "framer-motion": "^6.5.1",
         "jsonpath-plus": "^10.0.0",
         "react-dates": "^21.8.0",
         "react-diff-viewer-continued": "^3.4.0",

package.json

@@ -21,11 +21,12 @@ export const KEYBOARD_KEYS_MAP = {
     Shift: '⇧',
     Meta: IS_PLATFORM_MAC_OS ? '⌘' : 'Win',
     Alt: IS_PLATFORM_MAC_OS ? '⌥' : 'Alt',
-    Escape: 'Escape',
     F: 'F',
     E: 'E',
     R: 'R',
     K: 'K',
+    Escape: 'Escape',
+    Enter: 'Enter',
 } as const
 
 export type SupportedKeyboardKeysType = keyof typeof KEYBOARD_KEYS_MAP

src/Assets/Icon/ic-medium-info.svg

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import Tippy from '@tippyjs/react'
 import { ReactComponent as CloseIcon } from '../Assets/Icon/ic-cross.svg'
 import { ReactComponent as Help } from '../Assets/Icon/ic-help.svg'
@@ -31,6 +31,12 @@ export const TippyCustomized = (props: TippyCustomizedProps) => {
     const [showHeadingInfo, setShowHeadingInfo] = useState(false)
     const isWhiteTheme = props.theme === TippyTheme.white
 
+    const closeOnEsc = (e) => {
+        if (e.keyCode === 27) {
+            closeTippy(e)
+        }
+    }
+
     const onTippyMount = (tippyInstance) => {
         tippyRef.current = tippyInstance
         document.addEventListener('keydown', closeOnEsc)
@@ -47,12 +53,7 @@ export const TippyCustomized = (props: TippyCustomizedProps) => {
             }
         }
         setShowHeadingInfo(false)
-    }
-
-    const closeOnEsc = (e) => {
-        if (e.keyCode === 27) {
-            closeTippy(e)
-        }
+        document.removeEventListener('keydown', closeOnEsc)
     }
 
     const toggleHeadingInfo = (e) => {

src/Common/Hooks/UseRegisterShortcut/types.ts

@@ -0,0 +1,45 @@
+import { useEffect } from 'react'
+import { createPortal } from 'react-dom'
+import { motion } from 'framer-motion'
+import { useRegisterShortcut } from '@Common/Hooks'
+import { preventBodyScroll, preventOutsideFocus } from '@Shared/Helpers'
+import { DEVTRON_BASE_MAIN_ID } from '@Shared/constants'
+import { BackdropProps } from './types'
+
+const Backdrop = ({ children, onEscape }: BackdropProps) => {
+    const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
+
+    // useEffect on onEscape since onEscape might change based on conditions
+    useEffect(() => {
+        registerShortcut({ keys: ['Escape'], callback: onEscape })
+
+        return () => {
+            unregisterShortcut(['Escape'])
+        }
+    }, [onEscape])
+
+    useEffect(() => {
+        preventBodyScroll(true)
+        // Setting main as inert to that focus is trapped inside the new portal
+        preventOutsideFocus({ identifier: DEVTRON_BASE_MAIN_ID, preventFocus: true })
+
+        return () => {
+            preventBodyScroll(false)
+            preventOutsideFocus({ identifier: DEVTRON_BASE_MAIN_ID, preventFocus: false })
+        }
+    }, [])
+
+    return createPortal(
+        <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0, transition: { duration: 0.35 } }}
+            className="backdrop dc__position-fixed dc__top-0 dc__left-0 full-height-width flexbox dc__content-center dc__align-items-center dc__overflow-hidden"
+        >
+            {children}
+        </motion.div>,
+        document.getElementById('animated-dialog-backdrop'),
+    )
+}
+
+export default Backdrop

src/Common/TippyCustomized.tsx

@@ -0,0 +1 @@
+export { default as Backdrop } from './Backdrop'

src/Shared/Components/Backdrop/Backdrop.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react'
+
+export interface BackdropProps {
+    children: ReactNode
+    /**
+     * @param onEscape: please wrap in a useCallback, with respective dependencies or []
+     */
+    onEscape: () => void
+}

src/Shared/Components/Backdrop/index.tsx

@@ -240,7 +240,7 @@ const HistorySummaryCard = React.memo(
                                             <span className="dc__bullet dc__bullet--d2 ml-4 mr-4" />
                                         </>
                                     )}
-                                    <div className="cn-7 fs-12 dc__ellipsis-right">
+                                    <div className="cn-7 fs-12 dc__truncate">
                                         {triggeredBy === 1 ? 'auto trigger' : triggeredByEmail}
                                     </div>
                                 </div>