Skip to content

Commit bf9c4da

Browse files
Elessar1802Elessar1802
committed
fix: review comments
1 parent 3845bcc commit bf9c4da

File tree

10 files changed

+167
-12
lines changed

10 files changed

+167
-12
lines changed

‎src/Assets/Icon/ic-medium-clean-brush.svg

Lines changed: 8 additions & 0 deletions
Loading

‎src/Assets/Icon/ic-medium-pause.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/Assets/Icon/ic-medium-play.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/Pages/ResourceBrowser/NodeDrainOptions.tsx

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { Checkbox } from '@Common/Checkbox'
2+
import { Tooltip } from '@Common/Tooltip'
3+
import { CHECKBOX_VALUE } from '@Common/Types'
4+
import { ReactComponent as ICTimer } from '@Icons/ic-timer.svg'
5+
import { ChangeEvent, FocusEvent } from 'react'
6+
import { DRAIN_NODE_MODAL_MESSAGING, NODE_DRAIN_OPTIONS_CHECKBOX_CONFIG } from './constants'
7+
import { AdditionalConfirmationModalOptionsProps, NodeDrainRequest } from './types'
8+
9+
const NodeDrainOptions = ({
10+
optionsData,
11+
setOptionsData: setNodeDrainOptions,
12+
children,
13+
}: AdditionalConfirmationModalOptionsProps<NodeDrainRequest['nodeDrainOptions']>) => {
14+
const nodeDrainOptions: NodeDrainRequest['nodeDrainOptions'] = optionsData ?? {
15+
gracePeriodSeconds: -1,
16+
deleteEmptyDirData: false,
17+
disableEviction: false,
18+
force: false,
19+
ignoreAllDaemonSets: false,
20+
}
21+
22+
const handleGracePeriodOnChange = (e: ChangeEvent<HTMLInputElement>) => {
23+
setNodeDrainOptions({
24+
...nodeDrainOptions,
25+
gracePeriodSeconds: e.target.value ? Number(e.target.value) : -1,
26+
})
27+
}
28+
29+
const handleGracePeriodOnBlur = (e: FocusEvent<HTMLInputElement>) => {
30+
if (!e.target.value || Number(e.target.value) < -1) {
31+
e.target.value = '-1'
32+
}
33+
}
34+
35+
const getCheckboxOnChangeHandler =
36+
(key: keyof NodeDrainRequest['nodeDrainOptions']) => (e: ChangeEvent<HTMLInputElement>) => {
37+
setNodeDrainOptions({
38+
...nodeDrainOptions,
39+
[key]: e.target.checked,
40+
})
41+
}
42+
43+
return (
44+
<div className="flexbox-col dc__gap-12 w-100">
45+
<div>
46+
<div className="flexbox dc__gap-8 dc__align-items-center px-8 py-2">
47+
<ICTimer className="icon-dim-20 dc__no-shrink scn-7" />
48+
<Tooltip content={DRAIN_NODE_MODAL_MESSAGING.GracePeriod.infoText} alwaysShowTippyOnHover>
49+
<span className="fs-13 cn-9 lh-20 dc__underline-dotted">Grace period</span>
50+
</Tooltip>
51+
<span className="flex left dc__border br-4 cn-9 fw-4 fs-13 lh-20 dc__overflow-hidden">
52+
<input
53+
name="grace-period"
54+
type="number"
55+
autoComplete="off"
56+
min={-1}
57+
defaultValue={nodeDrainOptions.gracePeriodSeconds}
58+
className="px-8 py-4 lh-20 w-60 dc__no-border"
59+
onChange={handleGracePeriodOnChange}
60+
onBlur={handleGracePeriodOnBlur}
61+
/>
62+
<span className="flex px-8 py-4 dc__border--left">sec</span>
63+
</span>
64+
</div>
65+
66+
{NODE_DRAIN_OPTIONS_CHECKBOX_CONFIG.map(({ key, infoText, label }) => (
67+
<Checkbox
68+
key={key}
69+
value={CHECKBOX_VALUE.CHECKED}
70+
isChecked={nodeDrainOptions[key]}
71+
dataTestId="disable-eviction"
72+
rootClassName="mt-0 mb-0 ml-8 mr-8 cn-9 fs-13 py-6 px-8 form__checkbox__root--gap-8"
73+
onChange={getCheckboxOnChangeHandler(key)}
74+
>
75+
<Tooltip content={infoText} alwaysShowTippyOnHover>
76+
<span className="dc__underline-dotted">{label}</span>
77+
</Tooltip>
78+
</Checkbox>
79+
))}
80+
</div>
81+
82+
{children}
83+
</div>
84+
)
85+
}
86+
87+
export default NodeDrainOptions

‎src/Pages/ResourceBrowser/constants.ts

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
import { SelectPickerOptionType } from '@Shared/Components'
2+
import { ReactComponent as ICMediumPlay } from '@Icons/ic-medium-play.svg'
3+
import { ReactComponent as ICMediumPause } from '@Icons/ic-medium-pause.svg'
4+
import { ReactComponent as ICCleanBrush } from '@Icons/ic-medium-clean-brush.svg'
5+
import { NodeDrainRequest } from './types'
26

37
export const ALL_NAMESPACE_OPTION: Readonly<Pick<SelectPickerOptionType<string>, 'value' | 'label'>> = {
48
value: 'all',
59
label: 'All namespaces',
610
}
711

812
export const DRAIN_NODE_MODAL_MESSAGING = {
13+
DrainIcon: ICCleanBrush,
914
GracePeriod: {
1015
heading: 'Grace period',
1116
infoText:
@@ -31,8 +36,49 @@ export const DRAIN_NODE_MODAL_MESSAGING = {
3136
},
3237
Actions: {
3338
infoText: 'Drain will cordon off the node and evict all pods of the node.',
34-
drain: 'Drain node',
39+
drain: 'Drain',
3540
draining: 'Draining node',
3641
cancel: 'Cancel',
3742
},
3843
}
44+
45+
export const CORDON_NODE_MODAL_MESSAGING = {
46+
UncordonIcon: ICMediumPlay,
47+
CordonIcon: ICMediumPause,
48+
cordonInfoText:
49+
'Cordoning a node will mark it as unschedulable. By cordoning a node, you can be sure that no new pods will be scheduled on the node.',
50+
uncordonInfoText:
51+
'Uncordoning this node will mark this node as schedulable. By uncordoning a node, you will allow pods to be scheduled on this node.',
52+
cordon: 'Cordon',
53+
uncordon: 'Uncordon',
54+
cordoning: 'Cordoning node',
55+
uncordoning: 'Uncordoning node',
56+
cancel: 'Cancel',
57+
}
58+
59+
export const NODE_DRAIN_OPTIONS_CHECKBOX_CONFIG: {
60+
key: Exclude<keyof NodeDrainRequest['nodeDrainOptions'], 'gracePeriodSeconds'>
61+
infoText: string
62+
label: string
63+
}[] = [
64+
{
65+
key: 'deleteEmptyDirData',
66+
infoText: DRAIN_NODE_MODAL_MESSAGING.DeleteEmptyDirectoryData.infoText,
67+
label: DRAIN_NODE_MODAL_MESSAGING.DeleteEmptyDirectoryData.heading,
68+
},
69+
{
70+
key: 'disableEviction',
71+
infoText: DRAIN_NODE_MODAL_MESSAGING.DisableEviction.infoText,
72+
label: DRAIN_NODE_MODAL_MESSAGING.DisableEviction.heading,
73+
},
74+
{
75+
key: 'force',
76+
infoText: DRAIN_NODE_MODAL_MESSAGING.ForceDrain.infoText,
77+
label: DRAIN_NODE_MODAL_MESSAGING.ForceDrain.heading,
78+
},
79+
{
80+
key: 'ignoreAllDaemonSets',
81+
infoText: DRAIN_NODE_MODAL_MESSAGING.IgnoreDaemonSets.infoText,
82+
label: DRAIN_NODE_MODAL_MESSAGING.IgnoreDaemonSets.heading,
83+
},
84+
] as const

‎src/Pages/ResourceBrowser/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,4 @@ export * from './Helper'
1919
export * from './constants'
2020
export * from './types'
2121
export * from './service'
22+
export { default as NodeDrainOptions } from './NodeDrainOptions'

‎src/Pages/ResourceBrowser/types.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Dispatch, SetStateAction, ReactElement } from 'react'
12
import { NodeActionRequest } from './ResourceBrowser.Types'
23

34
export enum ClusterFiltersType {
@@ -75,3 +76,9 @@ interface NodeDrainOptions {
7576
export interface NodeDrainRequest extends NodeActionRequest {
7677
nodeDrainOptions: NodeDrainOptions
7778
}
79+
80+
export interface AdditionalConfirmationModalOptionsProps<T = unknown> {
81+
optionsData: T
82+
setOptionsData: Dispatch<SetStateAction<T>>
83+
children?: ReactElement
84+
}

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ButtonHTMLAttributes, ChangeEvent, useCallback, useEffect, useState } from 'react'
1+
import { ButtonHTMLAttributes, ChangeEvent, cloneElement, useCallback, useEffect, useState } from 'react'
22
import { AnimatePresence, motion } from 'framer-motion'
33
import { CustomInput, noop, useRegisterShortcut, UseRegisterShortcutProvider } from '@Common/index'
44
import { ComponentSizeType } from '@Shared/constants'
@@ -65,7 +65,9 @@ const ConfirmationModalBody = ({
6565
animate={{ y: 0, opacity: 1, scale: 1 }}
6666
>
6767
<div className="flexbox-col dc__gap-12 p-20">
68-
<RenderIcon className="icon-dim-48 dc__no-shrink" />
68+
{cloneElement(RenderIcon, {
69+
className: `${RenderIcon.props?.className ?? ''} icon-dim-48 dc__no-shrink`,
70+
})}
6971
<span className="cn-9 fs-16 fw-6 lh-24 dc__word-break">{title}</span>
7072

7173
{typeof subtitle === 'string' ? (

‎src/Shared/Components/ConfirmationModal/types.tsx renamed to ‎src/Shared/Components/ConfirmationModal/types.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FunctionComponent, ReactNode, SVGProps, SyntheticEvent } from 'react'
1+
import { ReactElement, ReactNode, SyntheticEvent } from 'react'
22
import { ButtonProps } from '../Button'
33

44
export enum ConfirmationModalVariantType {
@@ -54,7 +54,7 @@ type ButtonConfigAndVariantType<isConfig extends boolean> =
5454
}
5555
| {
5656
variant: ConfirmationModalVariantType.custom
57-
Icon: FunctionComponent<SVGProps<SVGSVGElement>>
57+
Icon: ReactElement
5858
buttonConfig: ButtonConfig<isConfig, true>
5959
}
6060

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
11
import { ReactComponent as ICInfo } from '@Icons/ic-medium-info.svg'
22
import { ReactComponent as ICWarning } from '@Icons/ic-warning-y5.svg'
3-
import { FunctionComponent, ReactNode, SVGProps } from 'react'
3+
import { ReactElement, ReactNode } from 'react'
44
import { ReactComponent as ICDelete } from '@Images/delete-medium.svg'
55
import { ConfirmationModalVariantType } from './types'
66
import { ButtonStyleType } from '../Button'
77

8-
export const getIconFromVariant = (
9-
variant: ConfirmationModalVariantType,
10-
): FunctionComponent<SVGProps<SVGSVGElement>> => {
8+
export const getIconFromVariant = (variant: ConfirmationModalVariantType): ReactElement => {
119
switch (variant) {
1210
case ConfirmationModalVariantType.delete:
13-
return ICDelete
11+
return <ICDelete />
1412
case ConfirmationModalVariantType.warning:
15-
return ICWarning
13+
return <ICWarning />
1614
default:
17-
return ICInfo
15+
return <ICInfo />
1816
}
1917
}
2018

0 commit comments

Comments
 (0)