Skip to content

Commit 62ec46e

Browse files
Elessar1802Elessar1802
committed
refactor: remove showConfirmationModal from ConfirmationModal
1 parent 488d569 commit 62ec46e

File tree

8 files changed

+90
-109
lines changed

8 files changed

+90
-109
lines changed

‎src/Shared/Components/BulkOperations/BulkOperations.component.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,6 @@ const BulkOperations = ({
188188
<ConfirmationModal
189189
{...confirmationModalConfig}
190190
handleClose={handleModalClose}
191-
showConfirmationModal
192191
buttonConfig={{
193192
primaryButtonConfig: {
194193
...confirmationModalConfig.buttonConfig.primaryButtonConfig,

‎src/Shared/Components/CICDHistory/TriggerDetails.tsx

Lines changed: 53 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -166,55 +166,59 @@ const ProgressingStatus = memo(({ stage, type, label = 'In progress' }: Progress
166166
</>
167167
)}
168168
</div>
169-
<ConfirmationModal
170-
variant={ConfirmationModalVariantType.warning}
171-
title={type === HistoryComponentType.CD ? `Abort ${stage.toLowerCase()}-deployment?` : 'Abort build?'}
172-
subtitle={
173-
type === HistoryComponentType.CD
174-
? 'Are you sure you want to abort this stage?'
175-
: 'Are you sure you want to abort this build?'
176-
}
177-
buttonConfig={{
178-
secondaryButtonConfig: {
179-
disabled: aborting,
180-
onClick: toggleAbortConfiguration,
181-
text: 'Cancel',
182-
},
183-
primaryButtonConfig: {
184-
isLoading: aborting,
185-
onClick: abortRunning,
186-
text: 'Yes, Abort',
187-
},
188-
}}
189-
showConfirmationModal={abortConfirmation}
190-
handleClose={toggleAbortConfiguration}
191-
/>
192-
<ConfirmationModal
193-
variant={ConfirmationModalVariantType.warning}
194-
title="Could not abort build!"
195-
subtitle={`Error: ${abortError.message}`}
196-
buttonConfig={{
197-
secondaryButtonConfig: {
198-
disabled: aborting,
199-
onClick: closeForceAbortModal,
200-
text: 'Cancel',
201-
},
202-
primaryButtonConfig: {
203-
isLoading: aborting,
204-
onClick: abortRunning,
205-
text: 'Force Abort',
206-
},
207-
}}
208-
showConfirmationModal={abortError.status}
209-
handleClose={closeForceAbortModal}
210-
>
211-
<div className="fs-13 fw-6 pt-12 cn-7 lh-1-54">
212-
<span>Please try to force abort</span>
213-
</div>
214-
<div className="pt-4 fw-4 cn-7 lh-1-54">
215-
<span>Some resource might get orphaned which will be cleaned up with Job-lifecycle</span>
216-
</div>
217-
</ConfirmationModal>
169+
{abortConfirmation && (
170+
<ConfirmationModal
171+
variant={ConfirmationModalVariantType.warning}
172+
title={
173+
type === HistoryComponentType.CD ? `Abort ${stage.toLowerCase()}-deployment?` : 'Abort build?'
174+
}
175+
subtitle={
176+
type === HistoryComponentType.CD
177+
? 'Are you sure you want to abort this stage?'
178+
: 'Are you sure you want to abort this build?'
179+
}
180+
buttonConfig={{
181+
secondaryButtonConfig: {
182+
disabled: aborting,
183+
onClick: toggleAbortConfiguration,
184+
text: 'Cancel',
185+
},
186+
primaryButtonConfig: {
187+
isLoading: aborting,
188+
onClick: abortRunning,
189+
text: 'Yes, Abort',
190+
},
191+
}}
192+
handleClose={toggleAbortConfiguration}
193+
/>
194+
)}
195+
{abortError.status && (
196+
<ConfirmationModal
197+
variant={ConfirmationModalVariantType.warning}
198+
title="Could not abort build!"
199+
subtitle={`Error: ${abortError.message}`}
200+
buttonConfig={{
201+
secondaryButtonConfig: {
202+
disabled: aborting,
203+
onClick: closeForceAbortModal,
204+
text: 'Cancel',
205+
},
206+
primaryButtonConfig: {
207+
isLoading: aborting,
208+
onClick: abortRunning,
209+
text: 'Force Abort',
210+
},
211+
}}
212+
handleClose={closeForceAbortModal}
213+
>
214+
<div className="fs-13 fw-6 pt-12 cn-7 lh-1-54">
215+
<span>Please try to force abort</span>
216+
</div>
217+
<div className="pt-4 fw-4 cn-7 lh-1-54">
218+
<span>Some resource might get orphaned which will be cleaned up with Job-lifecycle</span>
219+
</div>
220+
</ConfirmationModal>
221+
)}
218222
</>
219223
)
220224
})

‎src/Shared/Components/ConfirmationModal/CannotDeleteModal.tsx

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
11
import ConfirmationModal from './ConfirmationModal'
22
import { ConfirmationModalVariantType, CannotDeleteModalProps } from './types'
33

4-
export const CannotDeleteModal = ({
5-
title,
6-
component,
7-
subtitle,
8-
closeConfirmationModal,
9-
showCannotDeleteDialogModal,
10-
}: CannotDeleteModalProps) => (
4+
export const CannotDeleteModal = ({ title, component, subtitle, closeConfirmationModal }: CannotDeleteModalProps) => (
115
<ConfirmationModal
126
variant={ConfirmationModalVariantType.info}
137
title={`Cannot delete ${component} '${title}'`}
@@ -18,7 +12,6 @@ export const CannotDeleteModal = ({
1812
onClick: closeConfirmationModal,
1913
},
2014
}}
21-
showConfirmationModal={showCannotDeleteDialogModal}
2215
handleClose={closeConfirmationModal}
2316
/>
2417
)

‎src/Shared/Components/ConfirmationModal/ConfirmationModal.tsx

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -176,19 +176,20 @@ export const BaseConfirmationModal = () => {
176176
)
177177
}
178178

179-
const ConfirmationModal = ({ showConfirmationModal, ...props }: ConfirmationModalProps) => {
180-
const { setProps } = useConfirmationModalContext()
179+
const ConfirmationModal = (props: ConfirmationModalProps) => {
180+
const { props: currentProps, setProps } = useConfirmationModalContext()
181181

182182
useEffect(() => {
183-
setProps(showConfirmationModal ? props : null)
184-
}, [showConfirmationModal])
183+
if (currentProps) {
184+
throw new Error('Only one ConfirmationModal can be rendered at a time')
185+
}
186+
187+
setProps(props)
185188

186-
useEffect(
187-
() => () => {
189+
return () => {
188190
setProps(null)
189-
},
190-
[],
191-
)
191+
}
192+
}, [])
192193

193194
return null
194195
}

‎src/Shared/Components/ConfirmationModal/DeleteConfirmationModal.tsx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ export const DeleteConfirmationModal: React.FC<DeleteConfirmationModalProps> = (
3232
isDeleting,
3333
onDelete,
3434
onError,
35-
showConfirmationModal,
3635
closeConfirmationModal,
3736
confirmationConfig,
3837
// Additional UI-related logic
@@ -88,7 +87,6 @@ export const DeleteConfirmationModal: React.FC<DeleteConfirmationModalProps> = (
8887
<CannotDeleteModal
8988
title={title}
9089
subtitle={cannotDeleteText}
91-
showCannotDeleteDialogModal={showCannotDeleteDialogModal}
9290
closeConfirmationModal={handleCloseCannotDeleteModal}
9391
component={component}
9492
/>
@@ -100,7 +98,6 @@ export const DeleteConfirmationModal: React.FC<DeleteConfirmationModalProps> = (
10098
subtitle={subtitle}
10199
onDelete={onDelete}
102100
closeConfirmationModal={handleCloseForceDeleteModal}
103-
showConfirmationModal={showForceDeleteModal}
104101
/>
105102
)
106103

@@ -121,7 +118,6 @@ export const DeleteConfirmationModal: React.FC<DeleteConfirmationModalProps> = (
121118
disabled: isLoading || disabled,
122119
},
123120
}}
124-
showConfirmationModal={showConfirmationModal}
125121
handleClose={closeConfirmationModal}
126122
confirmationConfig={confirmationConfig}
127123
>

‎src/Shared/Components/ConfirmationModal/ForceDeleteConfirmationModal.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ export const ForceDeleteConfirmationModal = ({
2222
subtitle,
2323
onDelete,
2424
closeConfirmationModal,
25-
showConfirmationModal,
2625
}: ForceDeleteConfirmationProps) => {
2726
const renderSubtitle = () => (
2827
<>
@@ -45,7 +44,6 @@ export const ForceDeleteConfirmationModal = ({
4544
onClick: onDelete,
4645
},
4746
}}
48-
showConfirmationModal={showConfirmationModal}
4947
handleClose={closeConfirmationModal}
5048
/>
5149
)

‎src/Shared/Components/ConfirmationModal/types.ts

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ type ButtonConfigAndVariantType<isConfig extends boolean> =
6565
* Supports optional configuration mode with conditional properties.
6666
*
6767
* @template isConfig - Boolean flag to determine if configuration mode is enabled.
68-
* When `false`, `handleClose` and `showConfirmationModal` are required.
68+
* When `false`, `handleClose` is required.
6969
*/
7070
export type ConfirmationModalProps<isConfig extends boolean = false> = PropsWithChildren<{
7171
/**
@@ -95,24 +95,18 @@ export type ConfirmationModalProps<isConfig extends boolean = false> = PropsWith
9595
* Accepts an optional SyntheticEvent.
9696
*/
9797
handleClose: (e?: SyntheticEvent) => void
98-
/**
99-
* Boolean flag to control the visibility of the confirmation modal.
100-
*/
101-
showConfirmationModal: boolean
10298
}
10399
: {})
104100

105-
export type ConfirmationModalBodyProps = Omit<ConfirmationModalProps, 'showConfirmationModal'>
101+
export type ConfirmationModalBodyProps = ConfirmationModalProps
106102

107103
/**
108104
* Props for the DeleteComponentModal component.
109105
* This interface extends a subset of `ConfirmationModalProps` to configure
110106
* the confirmation modal behavior and allows additional customization options.
111107
*/
112108
export interface DeleteConfirmationModalProps
113-
extends Partial<
114-
Pick<ConfirmationModalProps, 'title' | 'subtitle' | 'showConfirmationModal' | 'children' | 'confirmationConfig'>
115-
> {
109+
extends Partial<Pick<ConfirmationModalProps, 'title' | 'subtitle' | 'children' | 'confirmationConfig'>> {
116110
// Required Props
117111
/**
118112
* Function to close the confirmation modal.
@@ -167,22 +161,18 @@ export interface DeleteConfirmationModalProps
167161
*/
168162
export interface CannotDeleteModalProps
169163
extends Partial<Pick<DeleteConfirmationModalProps, 'component' | 'closeConfirmationModal'>>,
170-
Partial<Pick<ConfirmationModalProps, 'title' | 'subtitle'>> {
171-
showCannotDeleteDialogModal: boolean
172-
}
164+
Partial<Pick<ConfirmationModalProps, 'title' | 'subtitle'>> {}
173165

174166
/**
175167
* Props for the ForceDeleteConfirmation component.
176168
* This interface extends selected properties from `DeleteConfirmationModalProps`
177169
* and `ConfirmationModalProps` to configure the force delete confirmation modal.
178170
*/
179171
export interface ForceDeleteConfirmationProps
180-
extends Partial<
181-
Pick<DeleteConfirmationModalProps, 'onDelete' | 'showConfirmationModal' | 'closeConfirmationModal'>
182-
>,
172+
extends Partial<Pick<DeleteConfirmationModalProps, 'onDelete' | 'closeConfirmationModal'>>,
183173
Partial<Pick<ConfirmationModalProps, 'title' | 'subtitle'>> {}
184174

185175
export interface ConfirmationModalContextType {
186-
props: Omit<ConfirmationModalProps, 'showConfirmationModal'> | null
176+
props: ConfirmationModalProps | null
187177
setProps: Dispatch<SetStateAction<ConfirmationModalContextType['props']>>
188178
}

‎src/Shared/Components/UnsavedChangesDialog/UnsavedChangesDialog.component.tsx

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -17,25 +17,25 @@
1717
import { ConfirmationModal, ConfirmationModalVariantType } from '../ConfirmationModal'
1818
import { UnsavedChangesDialogProps } from './types'
1919

20-
const UnsavedChangesDialog = ({ showUnsavedChangesDialog, handleClose, handleProceed }: UnsavedChangesDialogProps) => (
21-
<ConfirmationModal
22-
showConfirmationModal={showUnsavedChangesDialog}
23-
handleClose={handleClose}
24-
variant={ConfirmationModalVariantType.warning}
25-
shouldCloseOnEscape={false}
26-
title="Unsaved changes available"
27-
subtitle="Unsaved changes will be lost, are you sure you want to close the window?"
28-
buttonConfig={{
29-
primaryButtonConfig: {
30-
onClick: handleProceed,
31-
text: 'Discard changes',
32-
},
33-
secondaryButtonConfig: {
34-
onClick: handleClose,
35-
text: 'Cancel',
36-
},
37-
}}
38-
/>
39-
)
20+
const UnsavedChangesDialog = ({ showUnsavedChangesDialog, handleClose, handleProceed }: UnsavedChangesDialogProps) =>
21+
showUnsavedChangesDialog && (
22+
<ConfirmationModal
23+
handleClose={handleClose}
24+
variant={ConfirmationModalVariantType.warning}
25+
shouldCloseOnEscape={false}
26+
title="Unsaved changes available"
27+
subtitle="Unsaved changes will be lost, are you sure you want to close the window?"
28+
buttonConfig={{
29+
primaryButtonConfig: {
30+
onClick: handleProceed,
31+
text: 'Discard changes',
32+
},
33+
secondaryButtonConfig: {
34+
onClick: handleClose,
35+
text: 'Cancel',
36+
},
37+
}}
38+
/>
39+
)
4040

4141
export default UnsavedChangesDialog

0 commit comments

Comments
 (0)