feat: add backdrop component

package.json

@@ -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-monaco-editor": "^0.54.0",

src/Common/Hooks/UseRegisterShortcut/types.ts

@@ -25,6 +25,8 @@ export const KEYBOARD_KEYS_MAP = {
     E: 'E',
     R: 'R',
     K: 'K',
+    Escape: 'Escape',
+    Enter: 'Enter',
 } as const
 
 export type SupportedKeyboardKeysType = keyof typeof KEYBOARD_KEYS_MAP

src/Shared/Components/Backdrop/Backdrop.tsx

@@ -0,0 +1,46 @@
+import { ReactNode, useEffect } from 'react'
+import { motion } from 'framer-motion'
+import { useRegisterShortcut } from '@Common/Hooks'
+import { preventBodyScroll, toggleOutsideFocus } from '@Shared/Helpers'
+import './backdrop.scss'
+import { createPortal } from 'react-dom'
+import { ToggleFocusType } from '@Shared/types'
+import { DEVTRON_BASE_MAIN_ID } from '@Shared/constants'
+
+const Backdrop = ({ children, onEscape }: { children: ReactNode; onEscape: () => void }) => {
+    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
+        toggleOutsideFocus({ identifier: DEVTRON_BASE_MAIN_ID, toggleFocus: ToggleFocusType.Disable })
+
+        return () => {
+            preventBodyScroll(false)
+            toggleOutsideFocus({ identifier: DEVTRON_BASE_MAIN_ID, toggleFocus: ToggleFocusType.Enable })
+        }
+    }, [])
+
+    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('backdrop'),
+    )
+}
+
+export default Backdrop

src/Shared/Components/Backdrop/backdrop.scss

@@ -0,0 +1,5 @@
+.backdrop {
+  background: #000000bf;
+  z-index: var(--modal-index);
+  backdrop-filter: blur(1px);
+}

src/Shared/Components/Backdrop/index.tsx

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

src/Shared/Components/CICDHistory/TriggerOutput.tsx

@@ -34,7 +34,6 @@ import {
     Reload,
     createGitCommitUrl,
     useAsync,
-    not,
     ZERO_TIME_STRING,
     useInterval,
     URLS,
@@ -187,7 +186,7 @@ const ProgressingStatus = React.memo(({ status, stage, type }: ProgressingStatus
     }
 
     const toggleAbortConfiguration = (): void => {
-        setAbortConfirmation(not)
+        setAbortConfirmation(!abortConfirmation)
     }
     const closeForceAbortModal = (): void => {
         setAbortError({
@@ -215,64 +214,55 @@ const ProgressingStatus = React.memo(({ status, stage, type }: ProgressingStatus
                     </>
                 )}
             </div>
-
-            {abortConfirmation && (
-                <ConfirmationModal
-                    variant={ConfirmationModalVariantType.warning}
-                    title={
-                        type === HistoryComponentType.CD ? `Abort ${stage.toLowerCase()}-deployment?` : 'Abort build?'
-                    }
-                    subtitle={
-                        type === HistoryComponentType.CD
-                            ? 'Are you sure you want to abort this stage?'
-                            : 'Are you sure you want to abort this build?'
-                    }
-                    buttonConfig={{
-                        secondaryButtonConfig: {
-                            dataTestId: 'cancel-abort-button',
-                            disabled: aborting,
-                            onClick: toggleAbortConfiguration,
-                            text: 'Cancel',
-                        },
-                        primaryButtonConfig: {
-                            dataTestId: 'abort-build-or-stage',
-                            isLoading: aborting,
-                            onClick: abortRunning,
-                            text: 'Yes, Abort',
-                        },
-                    }}
-                    handleClose={toggleAbortConfiguration}
-                />
-            )}
-            {abortError.status && (
-                <ConfirmationModal
-                    variant={ConfirmationModalVariantType.warning}
-                    title="Could not abort build!"
-                    subtitle={`Error: ${abortError.message}`}
-                    buttonConfig={{
-                        secondaryButtonConfig: {
-                            dataTestId: 'cancel-force-abort-button',
-                            disabled: aborting,
-                            onClick: closeForceAbortModal,
-                            text: 'Cancel',
-                        },
-                        primaryButtonConfig: {
-                            dataTestId: 'force-abort-build-or-stage',
-                            isLoading: aborting,
-                            onClick: abortRunning,
-                            text: 'Force Abort',
-                        },
-                    }}
-                    handleClose={closeForceAbortModal}
-                >
-                    <div className="fs-13 fw-6 pt-12 cn-7 lh-1-54">
-                        <span>Please try to force abort</span>
-                    </div>
-                    <div className="pt-4 fw-4 cn-7 lh-1-54">
-                        <span>Some resource might get orphaned which will be cleaned up with Job-lifecycle</span>
-                    </div>
-                </ConfirmationModal>
-            )}
+            <ConfirmationModal
+                variant={ConfirmationModalVariantType.warning}
+                title={type === HistoryComponentType.CD ? `Abort ${stage.toLowerCase()}-deployment?` : 'Abort build?'}
+                subtitle={
+                    type === HistoryComponentType.CD
+                        ? 'Are you sure you want to abort this stage?'
+                        : 'Are you sure you want to abort this build?'
+                }
+                buttonConfig={{
+                    secondaryButtonConfig: {
+                        disabled: aborting,
+                        onClick: toggleAbortConfiguration,
+                        text: 'Cancel',
+                    },
+                    primaryButtonConfig: {
+                        isLoading: aborting,
+                        onClick: abortRunning,
+                        text: 'Yes, Abort',
+                    },
+                }}
+                showConfirmationModal={abortConfirmation}
+                handleClose={toggleAbortConfiguration}
+            />
+            <ConfirmationModal
+                variant={ConfirmationModalVariantType.warning}
+                title="Could not abort build!"
+                subtitle={`Error: ${abortError.message}`}
+                buttonConfig={{
+                    secondaryButtonConfig: {
+                        disabled: aborting,
+                        onClick: closeForceAbortModal,
+                        text: 'Cancel',
+                    },
+                    primaryButtonConfig: {
+                        isLoading: aborting,
+                        onClick: abortRunning,
+                        text: 'Force Abort',
+                    },
+                }}
+                showConfirmationModal={abortError.status}
+                handleClose={closeForceAbortModal}
+            >
+                <div className="fs-13 fw-6 pt-12 cn-7 lh-1-54">
+                    <span>Please try to force abort</span>
+                </div>
+                <div className="pt-4 fw-4 cn-7 lh-1-54">
+                    <span>Some resource might get orphaned which will be cleaned up with Job-lifecycle</span>
+                </div>
+            </ConfirmationModal>
         </>
     )
 })