Skip to content

Commit 0cbc139

Browse files
arunjaindevarunjaindev
authored
Merge pull request #2752 from devtron-labs/feat/replace-conf-dialogs
feat: remove confirmation dialog and replace with modal
2 parents bc8106e + 8564e6d commit 0cbc139

File tree

17 files changed

+401
-489
lines changed

17 files changed

+401
-489
lines changed

‎.eslintignore

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -354,7 +354,6 @@ src/components/v2/devtronStackManager/DevtronStackManager.component.tsx
354354
src/components/v2/devtronStackManager/DevtronStackManager.service.tsx
355355
src/components/v2/devtronStackManager/DevtronStackManager.tsx
356356
src/components/v2/devtronStackManager/DevtronStackManager.utils.ts
357-
src/components/v2/devtronStackManager/SuccessModalComponent.tsx
358357
src/components/v2/headers/ChartHeader.component.tsx
359358
src/components/v2/headers/EAHeader.component.tsx
360359
src/components/v2/index.tsx
@@ -372,7 +371,6 @@ src/components/workflowEditor/CreateWorkflow.tsx
372371
src/components/workflowEditor/DeprecatedWarningModal.tsx
373372
src/components/workflowEditor/EmptyWorkflow.tsx
374373
src/components/workflowEditor/NoGitOpsConfiguredWarning.tsx
375-
src/components/workflowEditor/NoGitOpsRepoConfiguredWarning.tsx
376374
src/components/workflowEditor/PipelineSelect.tsx
377375
src/components/workflowEditor/Workflow.tsx
378376
src/components/workflowEditor/nodes/CDNode.tsx

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"homepage": "/dashboard",
66
"dependencies": {
7-
"@devtron-labs/devtron-fe-common-lib": "1.15.0-pre-3",
7+
"@devtron-labs/devtron-fe-common-lib": "1.15.0-pre-4",
88
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
99
"@rjsf/core": "^5.13.3",
1010
"@rjsf/utils": "^5.13.3",

‎src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/EnvironmentOverrideRouter.tsx

Lines changed: 30 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ import { Link, NavLink, useLocation, useParams, useRouteMatch } from 'react-rout
1919

2020
import {
2121
ComponentSizeType,
22-
ConfirmationDialog,
22+
ConfirmationModal,
23+
ConfirmationModalVariantType,
2324
DeleteConfirmationModal,
2425
DocLink,
2526
EnvResourceType,
@@ -38,7 +39,6 @@ import { ReactComponent as ICStamp } from '@Icons/ic-stamp.svg'
3839
import { ReactComponent as Add } from '../../../../../../assets/icons/ic-add.svg'
3940
import { ReactComponent as DeleteIcon } from '../../../../../../assets/icons/ic-delete-interactive.svg'
4041
import { ReactComponent as More } from '../../../../../../assets/icons/ic-more-option.svg'
41-
import warn from '../../../../../../assets/icons/ic-warning.svg'
4242
import { createClusterEnvGroup, usePrevious } from '../../../../../../components/common'
4343
import { RESOURCE_ACTION_MENU } from '../../../../../../components/ResourceBrowser/Constants'
4444
import { URLS } from '../../../../../../config'
@@ -99,33 +99,34 @@ const JobEnvOverrideRoute = ({ envOverride, ciPipelines, reload, isEnvProtected
9999
)
100100

101101
const renderConfirmationDeleteModal = (pipeline, path: string): JSX.Element => (
102-
<ConfirmationDialog>
103-
<ConfirmationDialog.Icon src={warn} />
104-
<ConfirmationDialog.Body
105-
title={`Configurations for environment ‘${envOverride.environmentName}‘ is in use`}
106-
/>
107-
<p className="fs-13 cn-7 lh-1-54">
108-
{`Pipeline ‘${pipeline.name}‘ is using configurations for environment ‘${envOverride.environmentName}’.`}
109-
<Link to={path} onClick={onCloseDeleteModal} className="ml-2">
110-
View pipeline
111-
</Link>
112-
</p>
113-
<p className="fs-13 cn-7 lh-1-54">
114-
Base configmaps & secrets will be used if environment configurations are deleted.
115-
</p>
116-
<ConfirmationDialog.ButtonGroup>
117-
<button type="button" className="cta cancel" onClick={handleCancelDelete}>
118-
Cancel
119-
</button>
120-
<button
121-
type="button"
122-
onClick={handleDeleteConfirmation}
123-
className="cta delete cta-cd-delete-modal ml-16"
124-
>
125-
Delete Anyway
126-
</button>
127-
</ConfirmationDialog.ButtonGroup>
128-
</ConfirmationDialog>
102+
<ConfirmationModal
103+
variant={ConfirmationModalVariantType.warning}
104+
title={`Configurations for environment ‘${envOverride.environmentName}‘ is in use`}
105+
subtitle={
106+
<>
107+
<p className="fs-13 cn-7 lh-1-54">
108+
{`Pipeline ‘${pipeline.name}‘ is using configurations for environment ‘${envOverride.environmentName}’.`}
109+
<Link to={path} onClick={onCloseDeleteModal} className="ml-2">
110+
View pipeline
111+
</Link>
112+
</p>
113+
<p className="fs-13 cn-7 lh-1-54">
114+
Base configmaps & secrets will be used if environment configurations are deleted.
115+
</p>
116+
</>
117+
}
118+
buttonConfig={{
119+
secondaryButtonConfig: {
120+
text: 'Cancel',
121+
onClick: handleCancelDelete,
122+
},
123+
primaryButtonConfig: {
124+
text: 'Delete Anyway',
125+
onClick: handleDeleteConfirmation,
126+
},
127+
}}
128+
handleClose={handleCancelDelete}
129+
/>
129130
)
130131

131132
const showDeleteDialog = (pipeline): JSX.Element => {

‎src/Pages/GlobalConfigurations/Authorization/Shared/components/BulkSelection/BulkSelectionClearConfirmationModal.tsx

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,14 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { BulkSelectionEvents, ConfirmationDialog } from '@devtron-labs/devtron-fe-common-lib'
17+
import {
18+
BulkSelectionEvents,
19+
ConfirmationModal,
20+
ConfirmationModalVariantType,
21+
} from '@devtron-labs/devtron-fe-common-lib'
22+
23+
import { ReactComponent as CleanBrush } from '@Icons/ic-clean-brush-medium.svg'
1824

19-
import { ReactComponent as CleanBrush } from '../../../../../../assets/icons/ic-clean-brush-medium.svg'
2025
import { BulkSelectionModalTypes } from './constants'
2126
import { BulkSelectionClearConfirmationModalProps } from './types'
2227
import useAuthorizationBulkSelection from './useAuthorizationBulkSelection'
@@ -54,18 +59,23 @@ const BulkSelectionClearConfirmationModal = ({ type, onClose, onSubmit }: BulkSe
5459
}
5560

5661
return (
57-
<ConfirmationDialog className="w-400">
58-
<CleanBrush className="icon-dim-48" />
59-
<ConfirmationDialog.Body title={title} subtitle={subTitle} />
60-
<ConfirmationDialog.ButtonGroup>
61-
<button type="button" className="cta cancel" onClick={onClose}>
62-
Cancel
63-
</button>
64-
<button type="submit" className="cta" onClick={handleSubmit}>
65-
{buttonText}
66-
</button>
67-
</ConfirmationDialog.ButtonGroup>
68-
</ConfirmationDialog>
62+
<ConfirmationModal
63+
variant={ConfirmationModalVariantType.custom}
64+
Icon={<CleanBrush />}
65+
title={title}
66+
subtitle={subTitle}
67+
buttonConfig={{
68+
primaryButtonConfig: {
69+
onClick: handleSubmit,
70+
text: buttonText,
71+
},
72+
secondaryButtonConfig: {
73+
onClick: onClose,
74+
text: 'Cancel',
75+
},
76+
}}
77+
handleClose={onClose}
78+
/>
6979
)
7080
}
7181

‎src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/UserPermissionContainer.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -88,11 +88,14 @@ const UserPermissionContainer = ({
8888
const confirmApplyFilter = () =>
8989
new Promise((resolve, reject) => {
9090
if (isBulkSelectionApplied) {
91-
setBulkSelectionModalConfig({
92-
type: BulkSelectionModalTypes.clearAllAcrossPages,
93-
onSuccess: () => resolve(null),
94-
onCancel: () => reject(),
95-
})
91+
// set timeout because confirmation modal opens instantly and registers shortcut
92+
setTimeout(() => {
93+
setBulkSelectionModalConfig({
94+
type: BulkSelectionModalTypes.clearAllAcrossPages,
95+
onSuccess: () => resolve(null),
96+
onCancel: () => reject(),
97+
})
98+
}, 100)
9699
} else {
97100
resolve(null)
98101
}

‎src/components/charts/discoverChartDetail/ChartDeploymentList.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ import {
2121
ServerErrors,
2222
showError,
2323
Progressing,
24-
ConfirmationDialog,
2524
PopupMenu,
2625
ResponseType,
2726
DeploymentAppTypes,

‎src/components/gitOps/UpdateConfirmationDialog.tsx

Lines changed: 22 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { ButtonWithLoader, ConfirmationDialog, DocLink } from '@devtron-labs/devtron-fe-common-lib'
17+
import { ConfirmationModal, ConfirmationModalVariantType, DocLink } from '@devtron-labs/devtron-fe-common-lib'
1818

1919
import { GitProvider } from '@Components/common/GitTabs/constants'
2020
import { getProviderNameFromEnum } from '@Components/common/GitTabs/utils'
@@ -39,7 +39,7 @@ const UpdateConfirmationDialog = ({
3939
const renderIconField = () => {
4040
if (isSwitchingProvider) {
4141
return (
42-
<div className="flexbox dc__align-items-center dc__no-shrink dc__gap-20 pb-24">
42+
<div className="flexbox dc__align-items-center dc__no-shrink dc__gap-20">
4343
<GitProviderTabIcons provider={lastActiveGitOpsProvider} rootClassName="icon-dim-48" />
4444
<ICArrowRight className="dc__no-shrink icon-dim-16 scn-5" />
4545
<GitProviderTabIcons provider={providerTab} rootClassName="icon-dim-48" />
@@ -88,33 +88,26 @@ const UpdateConfirmationDialog = ({
8888
}
8989

9090
return (
91-
<ConfirmationDialog className="w-400">
92-
{renderIconField()}
93-
<ConfirmationDialog.Body title={renderTitle()}>{renderContent()}</ConfirmationDialog.Body>
94-
95-
<ConfirmationDialog.ButtonGroup>
96-
<button
97-
type="button"
98-
className="cta cancel h-36 flex"
99-
onClick={handleCancel}
100-
disabled={saveLoading}
101-
data-testid="cancel-git-ops-update"
102-
>
103-
Cancel
104-
</button>
105-
106-
<ButtonWithLoader
107-
isLoading={saveLoading}
108-
rootClassName="cta h-36 flex"
109-
onClick={handleUpdate}
110-
type="button"
111-
disabled={saveLoading}
112-
dataTestId="cancel-git-ops-update"
113-
>
114-
{isSwitchingProvider ? 'Switch & Save' : 'Save'}
115-
</ButtonWithLoader>
116-
</ConfirmationDialog.ButtonGroup>
117-
</ConfirmationDialog>
91+
<ConfirmationModal
92+
variant={ConfirmationModalVariantType.custom}
93+
Icon={renderIconField()}
94+
title={renderTitle()}
95+
buttonConfig={{
96+
secondaryButtonConfig: {
97+
text: 'Cancel',
98+
onClick: handleCancel,
99+
disabled: saveLoading,
100+
},
101+
primaryButtonConfig: {
102+
text: isSwitchingProvider ? 'Switch & Save' : 'Save',
103+
isLoading: saveLoading,
104+
onClick: handleUpdate,
105+
},
106+
}}
107+
handleClose={handleCancel}
108+
>
109+
{renderContent()}
110+
</ConfirmationModal>
118111
)
119112
}
120113

‎src/components/v2/chartDeploymentHistory/chartDeploymentHistory.scss

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -63,36 +63,6 @@
6363
}
6464
}
6565

66-
.confirmation-dialog__body.rollback-confirmation-dialog {
67-
width: 360px;
68-
height: 210px;
69-
70-
.confirmation-dialog__title {
71-
color: var(--N900);
72-
}
73-
74-
.confirmation-dialog__title + p {
75-
font-size: 14px;
76-
line-height: 1.5;
77-
}
78-
79-
.cta.cancel {
80-
height: 36px;
81-
}
82-
83-
.cta.deploy-button {
84-
width: 96px;
85-
height: 36px;
86-
border-radius: 4px;
87-
padding: 0;
88-
89-
.deploy-button-icon {
90-
width: 20px;
91-
height: 20px;
92-
}
93-
}
94-
}
95-
9666
.docker-wrapper {
9767
background-color: var(--bg-primary);
9868
width: 600px;

0 commit comments

Comments
 (0)