feat: replace hibernate modal with confirmation modal

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.1.5",
+        "@devtron-labs/devtron-fe-common-lib": "1.1.6",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/App.tsx

@@ -337,6 +337,7 @@ export default function App() {
                                     <div id="full-screen-modal" />
                                     <div id="visible-modal" />
                                     <div id="visible-modal-2" />
+                                    <div id="animated-dialog-backdrop" />
                                     {import.meta.env.VITE_NODE_ENV === 'production' &&
                                         window._env_ &&
                                         window._env_.HOTJAR_ENABLED && <Hotjar />}

src/components/app/details/appDetails/AppDetails.tsx

@@ -18,7 +18,6 @@ import React, { useEffect, useState, useMemo, useRef, useCallback } from 'react'
 import {
     showError,
     Progressing,
-    ConfirmationDialog,
     noop,
     stopPropagation,
     multiSelectStyles,
@@ -35,6 +34,8 @@ import {
     ToastVariantType,
     ToastManager,
     SelectPicker,
+    ConfirmationModal,
+    ConfirmationModalVariantType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { Link, useParams, useHistory, useRouteMatch, generatePath, Route, useLocation } from 'react-router-dom'
 import Tippy from '@tippyjs/react'
@@ -56,16 +57,16 @@ import { NavigationArrow, useAppContext, FragmentHOC } from '../../../common'
 import { groupHeaderStyle, Option } from '../../../v2/common/ReactSelect.utils'
 import { getAppConfigStatus, getAppOtherEnvironmentMin, stopStartApp } from '../../../../services/service'
 // @ts-check
-import AppNotDeployedIcon from '../../../../assets/img/app-not-deployed.png'
-import AppNotConfiguredIcon from '../../../../assets/img/app-not-configured.png'
-import restoreIcon from '../../../../assets/icons/ic-restore.svg'
-import warningIcon from '../../../../assets/icons/ic-warning.svg'
-import { ReactComponent as PlayButton } from '../../../../assets/icons/ic-play.svg'
-import { ReactComponent as Connect } from '../../../../assets/icons/ic-connected.svg'
-import { ReactComponent as Disconnect } from '../../../../assets/icons/ic-disconnected.svg'
-import { ReactComponent as Abort } from '../../../../assets/icons/ic-abort.svg'
-import { ReactComponent as StopButton } from '../../../../assets/icons/ic-stop.svg'
-import { ReactComponent as ForwardArrow } from '../../../../assets/icons/ic-arrow-forward.svg'
+import AppNotDeployedIcon from '@Images/app-not-deployed.png'
+import AppNotConfiguredIcon from '@Images/app-not-configured.png'
+import { ReactComponent as ICHibernate } from '@Icons/ic-medium-hibernate.svg'
+import { ReactComponent as ICUnhibernate } from '@Icons/ic-medium-unhibernate.svg'
+import { ReactComponent as PlayButton } from '@Icons/ic-play.svg'
+import { ReactComponent as Connect } from '@Icons/ic-connected.svg'
+import { ReactComponent as Disconnect } from '@Icons/ic-disconnected.svg'
+import { ReactComponent as Abort } from '@Icons/ic-abort.svg'
+import { ReactComponent as StopButton } from '@Icons/ic-stop.svg'
+import { ReactComponent as ForwardArrow } from '@Icons/ic-arrow-forward.svg'
 
 import { SourceInfo } from './SourceInfo'
 import { Application, Nodes, AggregatedNodes, NodeDetailTabs } from '../../types'
@@ -657,12 +658,12 @@ export const Details: React.FC<DetailsType> = ({
     }
 
     const handleHibernateConfirmationModalClose = (e) => {
-        e.stopPropagation()
+        e?.stopPropagation()
         setHibernateConfirmationModal('')
     }
 
     const renderHibernateModal = (): JSX.Element => {
-        if (isDeploymentBlocked && DeploymentWindowConfirmationDialog) {
+        if (hibernateConfirmationModal && isDeploymentBlocked && DeploymentWindowConfirmationDialog) {
             return (
                 <DeploymentWindowConfirmationDialog
                     onClose={handleHibernateConfirmationModalClose}
@@ -677,46 +678,38 @@ export const Details: React.FC<DetailsType> = ({
             )
         }
         return (
-            <ConfirmationDialog>
-                <ConfirmationDialog.Icon src={hibernateConfirmationModal === 'hibernate' ? warningIcon : restoreIcon} />
-                <ConfirmationDialog.Body
-                    title={`${hibernateConfirmationModal === 'hibernate' ? 'Hibernate' : 'Restore'} '${
-                        appDetails.appName
-                    }' on '${appDetails.environmentName}'`}
-                    subtitle={
-                        <p>
-                            Pods for this application will be
-                            <b className="mr-4 ml-4">
-                                scaled
-                                {hibernateConfirmationModal === 'hibernate'
-                                    ? ' down to 0 '
-                                    : ' up to its original count '}
-                                on {appDetails.environmentName}
-                            </b>
-                            environment.
-                        </p>
-                    }
-                >
-                    <p className="mt-16">Are you sure you want to continue?</p>
-                </ConfirmationDialog.Body>
-                <ConfirmationDialog.ButtonGroup>
-                    <button
-                        className="cta cancel"
-                        disabled={hibernating}
-                        onClick={handleHibernateConfirmationModalClose}
-                    >
-                        Cancel
-                    </button>
-                    <button
-                        className="cta"
-                        disabled={hibernating}
-                        data-testid={`app-details-${hibernateConfirmationModal === 'hibernate' ? 'hibernate' : 'restore'}`}
-                        onClick={handleHibernate}
-                    >
-                        {hibernating ? <Progressing /> : getHibernateText()}
-                    </button>
-                </ConfirmationDialog.ButtonGroup>
-            </ConfirmationDialog>
+            <ConfirmationModal
+                variant={ConfirmationModalVariantType.custom}
+                Icon={hibernateConfirmationModal === 'hibernate' ? ICHibernate : ICUnhibernate}
+                title={`${hibernateConfirmationModal === 'hibernate' ? 'Hibernate' : 'Restore'} '${appDetails.appName}' on '${appDetails.environmentName}'`}
+                subtitle={
+                    <p className="m-0-imp fs-13">
+                        Pods for this application will be
+                        <b className="mr-4 ml-4">
+                            scaled
+                            {hibernateConfirmationModal === 'hibernate' ? ' down to 0 ' : ' up to its original count '}
+                            on {appDetails.environmentName}
+                        </b>
+                        environment.
+                    </p>
+                }
+                buttonConfig={{
+                    secondaryButtonConfig: {
+                        disabled: hibernating,
+                        onClick: handleHibernateConfirmationModalClose,
+                        text: 'Cancel',
+                    },
+                    primaryButtonConfig: {
+                        isLoading: hibernating,
+                        onClick: handleHibernate,
+                        text: getHibernateText(),
+                    },
+                }}
+                showConfirmationModal={!!hibernateConfirmationModal}
+                handleClose={handleHibernateConfirmationModalClose}
+            >
+                <span className="fs-13">Are you sure you want to continue?</span>
+            </ConfirmationModal>
         )
     }
 
@@ -821,7 +814,7 @@ export const Details: React.FC<DetailsType> = ({
                     renderCIListHeader={renderCIListHeader}
                 />
             )}
-            {hibernateConfirmationModal && renderHibernateModal()}
+            {appDetails && renderHibernateModal()}
             {rotateModal && renderRestartWorkload()}
             {
                 <ClusterMetaDataBar
@@ -831,7 +824,9 @@ export const Details: React.FC<DetailsType> = ({
                     isVirtualEnvironment={isVirtualEnvRef.current}
                 />
             }
-            {isConfigDriftEnabled && ConfigDriftModalRoute && !isVirtualEnvRef.current && <ConfigDriftModalRoute path={path} />}
+            {isConfigDriftEnabled && ConfigDriftModalRoute && !isVirtualEnvRef.current && (
+                <ConfigDriftModalRoute path={path} />
+            )}
         </>
     )
 }

src/components/cdPipeline/CDPipeline.tsx

@@ -1411,9 +1411,9 @@ export default function CDPipeline({
                         reload={reloadAppConfig}
                     />
                 )}
-
-                {cdPipelineId && showDeleteModal && (
+                {cdPipelineId && (
                     <DeleteCDNode
+                        showDeleteDialog={showDeleteModal}
                         deleteDialog={deleteDialog}
                         setDeleteDialog={setDeleteDialog}
                         clusterName={formData.clusterName}

src/components/cdPipeline/DeleteCDNode.tsx

@@ -14,13 +14,19 @@
  * limitations under the License.
  */
 
-import { DeleteDialog, DeploymentAppTypes, ForceDeleteDialog } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    DeploymentAppTypes,
+    ForceDeleteDialog,
+    ConfirmationModal,
+    ConfirmationModalVariantType,
+} from '@devtron-labs/devtron-fe-common-lib'
 import ClusterNotReachableDailog from '../common/ClusterNotReachableDailog/ClusterNotReachableDialog'
 import { DELETE_ACTION } from '../../config'
 import { DeleteCDNodeProps, DeleteDialogType } from './types'
 import { handleDeleteCDNodePipeline, handleDeletePipeline } from './cdpipeline.util'
 
 const DeleteCDNode = ({
+    showDeleteDialog,
     deleteDialog,
     setDeleteDialog,
     clusterName,
@@ -67,14 +73,28 @@ const DeleteCDNode = ({
     }
 
     return (
-        <DeleteDialog
+        <ConfirmationModal
+            variant={ConfirmationModalVariantType.delete}
             title={`Delete pipeline for '${deleteTitleName}' environment ?`}
-            description={`Are you sure you want to delete this CD Pipeline from '${appName}' application?`}
-            delete={() => handleDeleteCDNodePipeline(deleteCD, deploymentAppType as DeploymentAppTypes)}
-            closeDelete={hideDeleteModal}
-            apiCallInProgress={isLoading}
-            showDeleteConfirmation
-            deleteConfirmationText={deleteTitleName}
+            subtitle={`Are you sure you want to delete this CD Pipeline from '${appName}' application?`}
+            buttonConfig={{
+                secondaryButtonConfig: {
+                    text: 'Cancel',
+                    onClick: hideDeleteModal,
+                    disabled: isLoading,
+                },
+                primaryButtonConfig: {
+                    text: 'Delete',
+                    onClick: () => handleDeleteCDNodePipeline(deleteCD, deploymentAppType as DeploymentAppTypes),
+                    isLoading,
+                },
+            }}
+            customInputConfig={{
+                identifier: 'delete-cd-node-input',
+                confirmationKeyword: deleteTitleName,
+            }}
+            showConfirmationModal={showDeleteDialog}
+            handleClose={hideDeleteModal}
         />
     )
 }

src/components/cdPipeline/types.ts

@@ -46,6 +46,7 @@ export interface ForceDeleteMessageType {
 }
 
 export interface DeleteCDNodeProps {
+    showDeleteDialog: boolean
     deleteDialog: DeleteDialogType
     setDeleteDialog: React.Dispatch<React.SetStateAction<DeleteDialogType>> | ((deleteDialog: DeleteDialogType) => void)
     clusterName: string

src/components/common/navigation/NavigationRoutes.tsx

@@ -28,6 +28,7 @@ import {
     URLS as CommonURLS,
     AppListConstants,
     MODES,
+    DEVTRON_BASE_MAIN_ID,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { Route, Switch, useRouteMatch, useHistory, useLocation } from 'react-router-dom'
 import * as Sentry from '@sentry/browser'
@@ -380,7 +381,7 @@ export default function NavigationRoutes() {
                 isSuperAdmin,
             }}
         >
-            <main className={`${_isOnboardingPage ? 'no-nav' : ''}`}>
+            <main className={_isOnboardingPage ? 'no-nav' : ''} id={DEVTRON_BASE_MAIN_ID}>
                 {!_isOnboardingPage && (
                     <Navigation
                         history={history}

src/components/workflowEditor/nodes/CDNode.tsx

@@ -296,7 +296,12 @@ export class CDNode extends Component<CDNodeProps, CDNodeState> {
     }
 
     renderWrapWithLink = (children: ReactElement) => (
-        <Link to={this.props.to} onClick={this.onClickNodeCard} target={this.props.isOffendingPipelineView ? '_blank' : '_self'} className="dc__no-decor">
+        <Link
+            to={this.props.to}
+            onClick={this.onClickNodeCard}
+            target={this.props.isOffendingPipelineView ? '_blank' : '_self'}
+            className="dc__no-decor"
+        >
             {children}
         </Link>
     )
@@ -306,7 +311,7 @@ export class CDNode extends Component<CDNodeProps, CDNodeState> {
         const currentNodeKey = `${WorkflowNodeType.CD}-${this.props.id.substring(4)}`
         return (
             <ConditionalWrap
-                condition={!!this.props.to && (!this.props.isOffendingPipelineView  || this.props.showPluginWarning)}
+                condition={!!this.props.to && (!this.props.isOffendingPipelineView || this.props.showPluginWarning)}
                 wrap={this.renderWrapWithLink}
             >
                 <div
@@ -393,21 +398,20 @@ export class CDNode extends Component<CDNodeProps, CDNodeState> {
                 >
                     {this.props.cdNamesList?.length > 0 ? this.renderReadOnlyCard() : this.renderCardContent()}
                 </foreignObject>
-
-                {this.state.showDeleteDialog && (
-                    <DeleteCDNode
-                        deleteDialog={this.state.deleteDialog}
-                        setDeleteDialog={this.handleDeleteDialogUpdate}
-                        clusterName={this.state.clusterName}
-                        appName={this.props.appName}
-                        hideDeleteModal={this.handleHideDeleteModal}
-                        deleteCD={this.deleteCD}
-                        deploymentAppType={this.props.deploymentAppType ?? ''}
-                        forceDeleteData={this.state.forceDeleteData}
-                        deleteTitleName={this.props.environmentName}
-                        isLoading={this.state.deleteInProgress}
-                    />
-                )}
+
+                <DeleteCDNode
+                    showDeleteDialog={this.state.showDeleteDialog}
+                    deleteDialog={this.state.deleteDialog}
+                    setDeleteDialog={this.handleDeleteDialogUpdate}
+                    clusterName={this.state.clusterName}
+                    appName={this.props.appName}
+                    hideDeleteModal={this.handleHideDeleteModal}
+                    deleteCD={this.deleteCD}
+                    deploymentAppType={this.props.deploymentAppType ?? ''}
+                    forceDeleteData={this.state.forceDeleteData}
+                    deleteTitleName={this.props.environmentName}
+                    isLoading={this.state.deleteInProgress}
+                />
                 {this.renderDeleteConformationDialog()}
             </>
         )

src/css/base.scss

@@ -4012,6 +4012,10 @@ textarea,
     margin-bottom: 0px !important;
 }
 
+.mt-40 {
+    margin-top: 40px;
+}
+
 .mt-120 {
     margin-top: 120px;
 }
@@ -5254,3 +5258,9 @@ textarea::placeholder {
 .code-editor-red-diff {
     background: var(--R100);
 }
+
+.backdrop {
+    background: rgba(0, 0, 0, 0.75);
+    z-index: var(--modal-index);
+    backdrop-filter: blur(1px);
+}