Skip to content

Commit fbcdd27

Browse files
RohitRaj011RohitRaj011
committed
fix: VariableDataTablePopupMenu - scroll not working fix
1 parent 34547b7 commit fbcdd27

File tree

4 files changed

+97
-89
lines changed

4 files changed

+97
-89
lines changed

‎src/components/CIPipelineN/VariableDataTable/ValueConfigOverlay.tsx

Lines changed: 47 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import {
3131
Textarea,
3232
TextareaProps,
3333
Tooltip,
34+
UsePopoverReturnType,
3435
validateRequiredPositiveNumber,
3536
VariableTypeFormat,
3637
} from '@devtron-labs/devtron-fe-common-lib'
@@ -174,10 +175,10 @@ export const ValueConfigOverlay = ({ row, handleRowUpdateAction }: ConfigOverlay
174175
}
175176

176177
// RENDERERS
177-
const renderContent = () => {
178+
const renderContent = (scrollableRef: UsePopoverReturnType['scrollableRef']) => {
178179
if (isFormatFile) {
179180
return (
180-
<div className="dc__overflow-auto p-12 flex-grow-1 flexbox-col dc__gap-12">
181+
<div ref={scrollableRef} className="dc__overflow-auto p-12 flex-grow-1 flexbox-col dc__gap-12">
181182
<CustomInput
182183
name={`file-mount-${rowId}`}
183184
label="File mount path"
@@ -228,7 +229,7 @@ export const ValueConfigOverlay = ({ row, handleRowUpdateAction }: ConfigOverlay
228229

229230
if (isFormatBoolOrDate) {
230231
return (
231-
<div className="p-12 flex-grow-1">
232+
<div ref={scrollableRef} className="p-12 flex-grow-1">
232233
<div className="dc__border-dashed br-6 p-16 flexbox-col dc__align-items-center dc__gap-12">
233234
<ICInfoOutlineGrey className="icon-dim-24" />
234235
<div className="w-100 dc__text-center fs-12 lh-18 flexbox-col dc__gap-2">
@@ -242,7 +243,7 @@ export const ValueConfigOverlay = ({ row, handleRowUpdateAction }: ConfigOverlay
242243

243244
if (choices.length) {
244245
return (
245-
<div className="flexbox-col dc__gap-6 pt-12 min-h-100">
246+
<div ref={scrollableRef} className="flexbox-col dc__gap-6 pt-12 min-h-100">
246247
<div className="py-4 px-12">
247248
<Button
248249
text="Add choice"
@@ -318,45 +319,49 @@ export const ValueConfigOverlay = ({ row, handleRowUpdateAction }: ConfigOverlay
318319
}
319320
position="bottom"
320321
>
321-
<>
322-
{renderContent()}
323-
{(choices.length || AskValueAtRuntimeCheckbox) && (
324-
<div className="dc__border-top-n1 p-12 flexbox-col dc__gap-8">
325-
{!!choices.length && (
326-
<Checkbox
327-
isChecked={!blockCustomValue}
328-
rootClassName="mb-0 flex top dc_max-width__max-content"
329-
value={CHECKBOX_VALUE.CHECKED}
330-
onChange={handleAllowCustomInput}
331-
data-testid="allow-custom-input"
332-
>
333-
<Tooltip
334-
alwaysShowTippyOnHover
335-
className="w-200"
336-
placement="bottom-start"
337-
content={
338-
<div className="fs-12 lh-18 flexbox-col dc__gap-2">
339-
<p className="m-0 fw-6">Allow custom input</p>
340-
<p className="m-0">Allow entering any value other than provided choices</p>
341-
</div>
342-
}
322+
{({ scrollableRef }) => (
323+
<>
324+
{renderContent(scrollableRef)}
325+
{(choices.length || AskValueAtRuntimeCheckbox) && (
326+
<div className="dc__border-top-n1 p-12 flexbox-col dc__gap-8">
327+
{!!choices.length && (
328+
<Checkbox
329+
isChecked={!blockCustomValue}
330+
rootClassName="mb-0 flex top dc_max-width__max-content"
331+
value={CHECKBOX_VALUE.CHECKED}
332+
onChange={handleAllowCustomInput}
333+
data-testid="allow-custom-input"
343334
>
344-
<div className="dc__border-dashed--n3-bottom fs-13 cn-9 lh-20">
345-
Allow Custom input
346-
</div>
347-
</Tooltip>
348-
</Checkbox>
349-
)}
350-
{AskValueAtRuntimeCheckbox && (
351-
<AskValueAtRuntimeCheckbox
352-
isChecked={askValueAtRuntime}
353-
value={CHECKBOX_VALUE.CHECKED}
354-
onChange={handleAskValueAtRuntime}
355-
/>
356-
)}
357-
</div>
358-
)}
359-
</>
335+
<Tooltip
336+
alwaysShowTippyOnHover
337+
className="w-200"
338+
placement="bottom-start"
339+
content={
340+
<div className="fs-12 lh-18 flexbox-col dc__gap-2">
341+
<p className="m-0 fw-6">Allow custom input</p>
342+
<p className="m-0">
343+
Allow entering any value other than provided choices
344+
</p>
345+
</div>
346+
}
347+
>
348+
<div className="dc__border-dashed--n3-bottom fs-13 cn-9 lh-20">
349+
Allow Custom input
350+
</div>
351+
</Tooltip>
352+
</Checkbox>
353+
)}
354+
{AskValueAtRuntimeCheckbox && (
355+
<AskValueAtRuntimeCheckbox
356+
isChecked={askValueAtRuntime}
357+
value={CHECKBOX_VALUE.CHECKED}
358+
onChange={handleAskValueAtRuntime}
359+
/>
360+
)}
361+
</div>
362+
)}
363+
</>
364+
)}
360365
</VariableDataTablePopupMenu>
361366
)
362367
}

‎src/components/CIPipelineN/VariableDataTable/VariableConfigOverlay.tsx

Lines changed: 46 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -60,51 +60,53 @@ export const VariableConfigOverlay = ({ row, handleRowUpdateAction }: ConfigOver
6060

6161
return (
6262
<VariableDataTablePopupMenu showHeaderIcon heading="Variable configuration" position="right">
63-
<>
64-
<div className="p-12 flexbox-col dc__gap-12">
65-
<CustomInput
66-
placeholder="Enter variable name"
67-
name="variable-name"
68-
onChange={handleVariableName}
69-
value={data.variable.value}
70-
label="Variable"
71-
required
72-
autoFocus
73-
/>
74-
<Textarea
75-
label="Description"
76-
value={variableDescription}
77-
placeholder="Describe this variable"
78-
onChange={handleVariableDescriptionChange}
79-
name="variable-description"
80-
/>
81-
</div>
82-
<div className="dc__border-top-n1 p-12 flexbox-col dc__gap-8">
83-
<Checkbox
84-
isChecked={isVariableRequired}
85-
rootClassName="mb-0 flex top dc_max-width__max-content"
86-
value={CHECKBOX_VALUE.CHECKED}
87-
onChange={handleVariableRequired}
88-
data-testid="ask-value-is-required"
89-
>
90-
<Tooltip
91-
alwaysShowTippyOnHover
92-
className="w-200"
93-
placement="bottom-start"
94-
content={
95-
<div className="fs-12 lh-18 flexbox-col dc__gap-2">
96-
<p className="m-0 fw-6">Value is required</p>
97-
<p className="m-0">
98-
Value for required variables must be provided for pipeline execution
99-
</p>
100-
</div>
101-
}
63+
{({ scrollableRef }) => (
64+
<>
65+
<div ref={scrollableRef} className="p-12 flexbox-col dc__gap-12">
66+
<CustomInput
67+
placeholder="Enter variable name"
68+
name="variable-name"
69+
onChange={handleVariableName}
70+
value={data.variable.value}
71+
label="Variable"
72+
required
73+
autoFocus
74+
/>
75+
<Textarea
76+
label="Description"
77+
value={variableDescription}
78+
placeholder="Describe this variable"
79+
onChange={handleVariableDescriptionChange}
80+
name="variable-description"
81+
/>
82+
</div>
83+
<div className="dc__border-top-n1 p-12 flexbox-col dc__gap-8">
84+
<Checkbox
85+
isChecked={isVariableRequired}
86+
rootClassName="mb-0 flex top dc_max-width__max-content"
87+
value={CHECKBOX_VALUE.CHECKED}
88+
onChange={handleVariableRequired}
89+
data-testid="ask-value-is-required"
10290
>
103-
<div className="dc__border-dashed--n3-bottom fs-13 cn-9 lh-20">Value is required</div>
104-
</Tooltip>
105-
</Checkbox>
106-
</div>
107-
</>
91+
<Tooltip
92+
alwaysShowTippyOnHover
93+
className="w-200"
94+
placement="bottom-start"
95+
content={
96+
<div className="fs-12 lh-18 flexbox-col dc__gap-2">
97+
<p className="m-0 fw-6">Value is required</p>
98+
<p className="m-0">
99+
Value for required variables must be provided for pipeline execution
100+
</p>
101+
</div>
102+
}
103+
>
104+
<div className="dc__border-dashed--n3-bottom fs-13 cn-9 lh-20">Value is required</div>
105+
</Tooltip>
106+
</Checkbox>
107+
</div>
108+
</>
109+
)}
108110
</VariableDataTablePopupMenu>
109111
)
110112
}

‎src/components/CIPipelineN/VariableDataTable/VariableDataTablePopupMenu.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export const VariableDataTablePopupMenu = ({
7373
triggerElement={triggerElement}
7474
buttonProps={null}
7575
>
76-
<div className="flexbox-col w-100 mxh-350 dc__overflow-auto" ref={scrollableRef}>
76+
<div className="flexbox-col w-100 mxh-350 dc__overflow-auto">
7777
<div className="px-12 py-8 flexbox dc__align-items-center dc__content-space dc__gap-8 dc__border-bottom-n1">
7878
<div className="flexbox dc__align-items-center dc__gap-8">
7979
{showHeaderIcon && <ICSlidersVertical className="icon-dim-16" />}
@@ -93,7 +93,7 @@ export const VariableDataTablePopupMenu = ({
9393
disabled={disableClose}
9494
/>
9595
</div>
96-
{children}
96+
{children({ scrollableRef })}
9797
</div>
9898
</Popover>
9999
)

‎src/components/CIPipelineN/VariableDataTable/types.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222
RefVariableType,
2323
SelectPickerOptionType,
2424
UsePopoverProps,
25+
UsePopoverReturnType,
2526
VariableType,
2627
VariableTypeFormat,
2728
} from '@devtron-labs/devtron-fe-common-lib'
@@ -144,7 +145,7 @@ export interface VariableDataTablePopupMenuProps {
144145
showIconDot?: boolean
145146
disableClose?: boolean
146147
onClose?: () => void
147-
children: JSX.Element
148+
children: (props: Pick<UsePopoverReturnType, 'scrollableRef'>) => JSX.Element
148149
position: UsePopoverProps['position']
149150
}
150151

0 commit comments

Comments
 (0)