Skip to content

Commit

Permalink
Merge pull request #2211 from devtron-labs/feat/confirmation-modal
Browse files Browse the repository at this point in the history 
feat: replace hibernate modal with confirmation modal
  • Loading branch information
@arunjaindev
arunjaindev authored Nov 28, 2024
2 parents 74f5206 + 67d776f commit 2cf2702
Show file tree
Hide file tree
Showing 10 changed files with 235 additions and 88 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 />}
Expand Down
105 changes: 50 additions & 55 deletions src/components/app/details/appDetails/AppDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import React, { useEffect, useState, useMemo, useRef, useCallback } from 'react'
import {
showError,
Progressing,
ConfirmationDialog,
noop,
stopPropagation,
multiSelectStyles,
Expand All @@ -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'
Expand All @@ -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'
Expand Down Expand Up @@ -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}
Expand All @@ -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>
)
}

Expand Down Expand Up @@ -821,7 +814,7 @@ export const Details: React.FC<DetailsType> = ({
renderCIListHeader={renderCIListHeader}
/>
)}
{hibernateConfirmationModal && renderHibernateModal()}
{appDetails && renderHibernateModal()}
{rotateModal && renderRestartWorkload()}
{
<ClusterMetaDataBar
Expand All @@ -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} />
)}
</>
)
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/cdPipeline/CDPipeline.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1411,9 +1411,9 @@ export default function CDPipeline({
reload={reloadAppConfig}
/>
)}

{cdPipelineId && showDeleteModal && (
{cdPipelineId && (
<DeleteCDNode
showDeleteDialog={showDeleteModal}
deleteDialog={deleteDialog}
setDeleteDialog={setDeleteDialog}
clusterName={formData.clusterName}
Expand Down
36 changes: 28 additions & 8 deletions src/components/cdPipeline/DeleteCDNode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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}
/>
)
}
Expand Down
1 change: 1 addition & 0 deletions src/components/cdPipeline/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion src/components/common/navigation/NavigationRoutes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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}
Expand Down
38 changes: 21 additions & 17 deletions src/components/workflowEditor/nodes/CDNode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand All @@ -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
Expand Down Expand Up @@ -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()}
</>
)
Expand Down
10 changes: 10 additions & 0 deletions src/css/base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4012,6 +4012,10 @@ textarea,
margin-bottom: 0px !important;
}

.mt-40 {
margin-top: 40px;
}

.mt-120 {
margin-top: 120px;
}
Expand Down Expand Up @@ -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);
}
Loading

0 comments on commit 2cf2702

Please sign in to comment.