feat: implement global variables on table input#9902
feat: implement global variables on table input#9902edwinjosechittilappilly merged 54 commits intomainfrom
Conversation
…without border when its global variable
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughAdds an allowCustomValue flag across input components and popover to control custom input vs. option-only selection. Integrates InputGlobalComponent for “global variable” table cells. Adjusts table edit handling to wire onCellValueChanged only when provided. Updates column formatting/context and alters the columns prop shape passed to TableNodeComponent. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant G as AgGridReact
participant T as TableComponent
participant C as Consumer onCellValueChanged
U->>G: Edit cell value
alt Consumer callback provided
G->>T: onCellValueChanged wrapper(e)
note over T: Detect single-toggle columns<br/>Schedule zero-delay refresh
T->>G: refreshCells (changed column)
T->>G: refreshCells (other single-toggle columns)
T->>C: onCellValueChanged(e)
else No consumer callback
note over G,T: No handler attached
end
sequenceDiagram
autonumber
actor U as User
participant TACR as TableAutoCellRender
participant IGC as InputGlobalComponent
participant IC as InputComponent
participant CIP as CustomInputPopover
TACR->>IGC: Render when col.context.globalVariable
IGC->>IC: allowCustomValue=false, load_from_db=true
IC->>CIP: Render popover (options-only)
U->>CIP: Click/select option
CIP-->>IC: on-new-value({ value })
IC-->>IGC: propagate new value
IGC-->>TACR: setValue?.(value)
note over CIP: Custom input hidden (allowCustomValue=false)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🧪 Early access (Sonnet 4.5): enabledWe are currently testing the Sonnet 4.5 model, which is expected to improve code review quality. However, this model may lead to increased noise levels in the review comments. Please disable the early access features if the noise level causes any inconvenience. Note:
Comment |
Frontend Unit Test Coverage ReportCoverage Summary
Unit Test Results
|
Codecov Report❌ Patch coverage is ❌ Your patch status has failed because the patch coverage (4.16%) is below the target coverage (40.00%). You can increase the patch coverage or adjust the target coverage. Additional details and impacted files@@ Coverage Diff @@
## main #9902 +/- ##
==========================================
+ Coverage 23.43% 23.68% +0.24%
==========================================
Files 1090 1090
Lines 39855 39766 -89
Branches 5531 5542 +11
==========================================
+ Hits 9339 9417 +78
+ Misses 30345 30178 -167
Partials 171 171
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
github-actions
bot
added
enhancement
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
src/frontend/src/types/utils/functions.ts (1)
27-33: ColumnField missing global_variable flag used elsewhereutils.ts references col.global_variable, but ColumnField doesn’t declare it, causing TS errors.
Apply this diff to align the public type:
export interface ColumnField { name: string; display_name: string; sortable: boolean; filterable: boolean; formatter?: FormatterType; description?: string; load_from_db?: boolean; + global_variable?: boolean; disable_edit?: boolean; default?: any; edit_mode?: "modal" | "inline" | "popover"; hidden?: boolean; options?: string[]; }src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/index.tsx (2)
297-302: Bug:isDestroyedis a function; you’re checking the property, so this branch never runs.Call it:
!api.isDestroyed().- setTimeout(() => { - if (!realRef?.current?.api?.isDestroyed) { - realRef?.current?.api?.hideOverlay(); - // Force column fit after hiding overlay to ensure proper layout - realRef?.current?.api?.sizeColumnsToFit(); - } - }, 1000); + setTimeout(() => { + const api = realRef?.current?.api; + if (api && !api.isDestroyed()) { + api.hideOverlay(); + // Force column fit after hiding overlay to ensure proper layout + api.sizeColumnsToFit(); + } + }, 1000);
17-17: cloneDeep import is wrong; current call will not deep-clone and can break grid updates.
import cloneDeep from "lodash"imports the lodash wrapper, not thecloneDeepfunction. Use a named import or the path import.- import cloneDeep from "lodash"; + // Prefer path import for bundle size; fall back to named import if desired + import cloneDeep from "lodash/cloneDeep";No other changes needed; your usage at Lines 306–309 will then work as intended.
Also applies to: 306-309
🧹 Nitpick comments (9)
src/frontend/src/shared/components/delete-confirmation-modal.tsx (1)
69-70: Hover scope change may hide the Trash icon outside popover contextsUsing group-hover/popover-item:opacity-100 requires an ancestor with class "group/popover-item". If this modal is used outside such a context, the icon will stay hidden (opacity-0).
Consider a safer fallback to support both scopes:
- className={cn( - "h-4 w-4 text-primary opacity-0 hover:text-status-red group-hover/popover-item:opacity-100", - )} + className={cn( + "h-4 w-4 text-primary opacity-0 hover:text-status-red group-hover:opacity-100 group-hover/popover-item:opacity-100", + )}src/frontend/src/utils/utils.ts (1)
553-557: Unify context flag for global variablescontext.globalVariable is only set from load_from_db, but other paths rely on global_variable too. Unify to cover both.
Apply:
- context: { - ...(col.description ? { info: col.description } : {}), - ...(col.load_from_db ? { globalVariable: col.load_from_db } : {}), - }, + context: { + ...(col.description ? { info: col.description } : {}), + ...((col.load_from_db || col.global_variable) + ? { globalVariable: true } + : {}), + },src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx (2)
149-161: Keep baseline input styling when custom values are disallowedThe false branch drops primary-input styling, which may cause visual inconsistencies. Recommend retaining base styles while disabling text entry.
- return allowCustomValue - ? cn( - "primary-input noflow nopan nodelete nodrag border-1 flex h/full min-h-[2.375rem] cursor-default flex-wrap items-center px-2", - editNode && "min-h-7 p-0 px-1", - editNode && disabled && "min-h-5 border-muted", - disabled && "bg-muted text-muted", - isFocused && - "border-foreground ring-1 ring-foreground hover:border-foreground", - ) - : "flex items-center gap-2 w/full h/full min-h-[2.375rem]"; + return allowCustomValue + ? cn( + "primary-input noflow nopan nodelete nodrag border-1 flex h-full min-h-[2.375rem] cursor-default flex-wrap items-center px-2", + editNode && "min-h-7 p-0 px-1", + editNode && disabled && "min-h-5 border-muted", + disabled && "bg-muted text-muted", + isFocused && + "border-foreground ring-1 ring-foreground hover:border-foreground", + ) + : cn( + "primary-input noflow nopan nodelete nodrag border-1 flex items-center gap-2 w-full h-full min-h-[2.375rem]", + editNode && "min-h-7 p-0 px-1", + editNode && disabled && "min-h-5 border-muted", + disabled && "bg-muted text-muted", + );
243-254: Make the clickable div keyboard-accessibleAdd role and key handler so users can open options with keyboard when allowCustomValue is false.
- <div + <div data-testid={`anchor-${id}`} className={getAnchorClassName( editNode, disabled, isFocused, allowCustomValue, )} - onClick={() => + role="button" + tabIndex={0} + onKeyDown={(e) => { + if ((e.key === "Enter" || e.key === " ") && (!allowCustomValue || !disabled)) { + setShowOptions(true); + } + }} + onClick={() => (!allowCustomValue || !nodeStyle) && !disabled && setShowOptions(true) }src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/components/tableAutoCellRender/index.tsx (2)
67-67: Avoid duplicate DOM ids across cells.
id="string-reader-global"repeats for every cell; generate a stable, unique id usingcolDef.colIdand row id/index (see diff above). Prevents a11y issues and event confusion.
80-83: Use meaningful labels/placeholders.Empty
display_name/placeholderhurts accessibility. PrefercolDef.headerNameas a fallback (see diff above).src/frontend/src/components/core/parameterRenderComponent/components/inputGlobalComponent/index.tsx (2)
32-36: Potential over-render/fetch: one query per cell.Each cell instantiates
useGetGlobalVariables(). If many cells render, consider lifting variables to context and passing them in, or memoizing at a higher level.Would you like a quick pattern using React Context to supply global variables to all cells from a single query?
95-107: Hide “Add New Variable” affordance when disabled.You pass
disabledinto the modal, but still render the button. Optionally don’t render the add button at all whendisabledto reduce noise.- const renderAddVariableButton = () => ( - <GlobalVariableModal referenceField={display_name} disabled={disabled}> + const renderAddVariableButton = () => + disabled ? null : ( + <GlobalVariableModal referenceField={display_name} disabled={disabled}> ... - </GlobalVariableModal> - ); + </GlobalVariableModal> + );src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/index.tsx (1)
399-459: Wrapper is fine; prefer ColumnApi for column discovery and type the event.
gridApi.getColumns()may vary across AG Grid versions;columnApi.getAllGridColumns()is more robust. Also, annotate the event type.- onCellValueChanged={ - props.onCellValueChanged - ? (e) => { + onCellValueChanged={ + props.onCellValueChanged + ? (e: import("ag-grid-community").CellValueChangedEvent) => { // Handle single-toggle column changes (Vectorize and Identifier) to refresh grid editability const isSingleToggleField = e.colDef.field === "Vectorize" || e.colDef.field === "vectorize" || e.colDef.field === "Identifier" || e.colDef.field === "identifier"; if (isSingleToggleField) { setTimeout(() => { - if ( - realRef.current?.api && - !realRef.current.api.isDestroyed() - ) { + if ( + realRef.current?.api && + !realRef.current.api.isDestroyed() + ) { // Refresh all cells with force to update cell renderer params if (e.colDef.field) { realRef.current.api.refreshCells({ force: true, columns: [e.colDef.field], }); } // Also refresh all other single-toggle column cells if they exist - const allSingleToggleColumns = realRef.current.api - .getColumns() - ?.filter((col) => { - const field = col.getColDef().field; + const allSingleToggleColumns = realRef.current.columnApi + ?.getAllGridColumns() + ?.filter((col) => { + const field = col.getColDef().field; return ( field === "Vectorize" || field === "vectorize" || field === "Identifier" || field === "identifier" ); });
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx(6 hunks)src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/index.tsx(2 hunks)src/frontend/src/components/core/parameterRenderComponent/components/inputGlobalComponent/index.tsx(2 hunks)src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/components/tableAutoCellRender/index.tsx(2 hunks)src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/index.tsx(1 hunks)src/frontend/src/components/core/parameterRenderComponent/index.tsx(1 hunks)src/frontend/src/components/core/parameterRenderComponent/types.ts(1 hunks)src/frontend/src/shared/components/delete-confirmation-modal.tsx(1 hunks)src/frontend/src/types/components/index.ts(1 hunks)src/frontend/src/types/utils/functions.ts(1 hunks)src/frontend/src/utils/utils.ts(3 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
src/frontend/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
src/frontend/src/**/*.{ts,tsx,js,jsx}: All frontend TypeScript and JavaScript code should be located under src/frontend/src/ and organized into components, pages, icons, stores, types, utils, hooks, services, and assets directories as per the specified directory layout.
Use React 18 with TypeScript for all UI components in the frontend.
Format all TypeScript and JavaScript code using the make format_frontend command.
Lint all TypeScript and JavaScript code using the make lint command.
Files:
src/frontend/src/types/components/index.tssrc/frontend/src/components/core/parameterRenderComponent/types.tssrc/frontend/src/components/core/parameterRenderComponent/components/tableComponent/components/tableAutoCellRender/index.tsxsrc/frontend/src/types/utils/functions.tssrc/frontend/src/components/core/parameterRenderComponent/index.tsxsrc/frontend/src/components/core/parameterRenderComponent/components/inputComponent/index.tsxsrc/frontend/src/components/core/parameterRenderComponent/components/inputGlobalComponent/index.tsxsrc/frontend/src/components/core/parameterRenderComponent/components/tableComponent/index.tsxsrc/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsxsrc/frontend/src/utils/utils.tssrc/frontend/src/shared/components/delete-confirmation-modal.tsx
src/frontend/src/types/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
All TypeScript type definitions should be placed in the types directory.
Files:
src/frontend/src/types/components/index.tssrc/frontend/src/types/utils/functions.ts
src/frontend/src/components/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
All components should be styled using Tailwind CSS utility classes.
Files:
src/frontend/src/components/core/parameterRenderComponent/types.tssrc/frontend/src/components/core/parameterRenderComponent/components/tableComponent/components/tableAutoCellRender/index.tsxsrc/frontend/src/components/core/parameterRenderComponent/index.tsxsrc/frontend/src/components/core/parameterRenderComponent/components/inputComponent/index.tsxsrc/frontend/src/components/core/parameterRenderComponent/components/inputGlobalComponent/index.tsxsrc/frontend/src/components/core/parameterRenderComponent/components/tableComponent/index.tsxsrc/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx
src/frontend/src/@(components|hooks)/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
Implement dark mode support in components and hooks where needed.
Files:
src/frontend/src/components/core/parameterRenderComponent/types.tssrc/frontend/src/components/core/parameterRenderComponent/components/tableComponent/components/tableAutoCellRender/index.tsxsrc/frontend/src/components/core/parameterRenderComponent/index.tsxsrc/frontend/src/components/core/parameterRenderComponent/components/inputComponent/index.tsxsrc/frontend/src/components/core/parameterRenderComponent/components/inputGlobalComponent/index.tsxsrc/frontend/src/components/core/parameterRenderComponent/components/tableComponent/index.tsxsrc/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx
src/frontend/src/utils/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
All utility functions should be placed in the utils directory.
Files:
src/frontend/src/utils/utils.ts
🧠 Learnings (1)
📚 Learning: 2025-06-23T12:46:52.420Z
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Export custom icon components in React using React.forwardRef to ensure proper ref forwarding and compatibility with parent components.
Applied to files:
src/frontend/src/shared/components/delete-confirmation-modal.tsx
🧬 Code graph analysis (2)
src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/components/tableAutoCellRender/index.tsx (1)
src/frontend/src/components/core/parameterRenderComponent/components/inputGlobalComponent/index.tsx (1)
InputGlobalComponent(18-144)
src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx (2)
src/frontend/src/components/common/genericIconComponent/index.tsx (1)
ForwardedIconComponent(15-146)src/frontend/src/utils/utils.ts (1)
cn(37-39)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Run Frontend Unit Tests / Frontend Jest Unit Tests
- GitHub Check: Run Frontend Tests / Determine Test Suites and Shard Distribution
- GitHub Check: Test Starter Templates
🔇 Additional comments (10)
src/frontend/src/types/components/index.ts (1)
54-55: Add allowCustomValue to InputComponentType — looks goodOptional flag is correctly typed and backward compatible.
src/frontend/src/components/core/parameterRenderComponent/types.ts (1)
136-140: InputGlobalComponentType extended with allowCustomValue — OKShape matches downstream usage and remains optional.
src/frontend/src/utils/utils.ts (1)
9-11: Type-only import for Cookies — OKPurely type usage; avoids bundling runtime.
src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx (2)
109-117: Good: hover state swap uses group/popover-item scopeThe Check/X indicator swap is now correctly tied to the CommandItem hover scope.
360-361: Good: CommandItem adopts group/popover-itemEnsures hover-driven child transitions behave as intended.
src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/index.tsx (2)
47-47: Default allowCustomValue=true — backward compatibleReasonable default; existing call sites need no changes.
170-171: Propagating allowCustomValue to CustomInputPopover — OKThreading is correct and matches new popover API.
src/frontend/src/components/core/parameterRenderComponent/index.tsx (1)
198-204: ```shell
#!/bin/bash
set -euo pipefailecho "PWD: $(pwd)"
echo
echo "=== Top-level files ==="
ls -la | sed -n '1,120p' || trueecho
echo "=== Search for 'ColumnField' ==="
rg -n "ColumnField" || trueecho
echo "=== Search for 'table_schema' ==="
rg -n "table_schema" || trueecho
echo "=== Search for 'tableSchema' ==="
rg -n "tableSchema" || trueecho
echo "=== Search for 'InputFieldType' ==="
rg -n "InputFieldType" || trueecho
echo "=== Show src/types/utils/functions.* if present ==="
for f in src/types/utils/functions*; do
[ -f "$f" ] && echo "---- $f ----" && sed -n '1,240p' "$f"
doneecho
echo "=== Show src/types/api* files if present ==="
for f in src/types/api*; do
[ -f "$f" ] && echo "---- $f ----" && sed -n '1,240p' "$f"
doneecho
echo "=== Show parameterRenderComponent/index.tsx (full) ==="
sed -n '1,520p' src/frontend/src/components/core/parameterRenderComponent/index.tsx || trueecho
echo "=== Show any frontend files that reference table_schema ==="
rg -n "table_schema" src/frontend || true</blockquote></details> <details> <summary>src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/components/tableAutoCellRender/index.tsx (1)</summary><blockquote> `73-76`: **Good: edits are disabled when no onCellValueChanged is wired.** Prevents editing without a handler. LGTM. </blockquote></details> <details> <summary>src/frontend/src/components/core/parameterRenderComponent/components/inputGlobalComponent/index.tsx (1)</summary><blockquote> `26-26`: **Forwarding allowCustomValue is correct.** Default `true` with controlled override works and keeps InputComponent behavior consistent. Also applies to: 139-139 </blockquote></details> </blockquote></details> </details> <!-- This is an auto-generated comment by CodeRabbit for review status -->
| } else if (colDef?.context?.globalVariable) { | ||
| return ( | ||
| <InputGlobalComponent | ||
| id="string-reader-global" | ||
| value={value ?? ""} | ||
| editNode={false} | ||
| handleOnNewValue={(newValue) => { | ||
| setValue?.(newValue.value); | ||
| }} | ||
| disabled={ | ||
| !colDef?.onCellValueChanged && | ||
| !api.getGridOption("onCellValueChanged") | ||
| } | ||
| load_from_db={true} | ||
| allowCustomValue={false} | ||
| password={false} | ||
| display_name="" | ||
| placeholder="" | ||
| isToolMode={false} | ||
| hasRefreshButton={false} | ||
| /> | ||
| ); | ||
| } else { |
There was a problem hiding this comment.
Global-variable cells can render wrong UI when value equals "success"/"failure". Reorder condition.
If a global-variable cell’s current value is the string "success" or "failure", it renders a Badge instead of the InputGlobalComponent. Check colDef?.context?.globalVariable before the label checks.
Apply this diff around the string-case branch:
- //TODO: REFACTOR FOR ANY LABEL NOT HARDCODED
- else if (value === "success") {
+ // Global variable cells should always render the selector first
+ else if (colDef?.context?.globalVariable) {
+ return (
+ <InputGlobalComponent
+ id={
+ `string-reader-global-${colDef?.colId ?? "col"}-${props?.node?.id ?? props?.rowIndex ?? "row"}`
+ }
+ value={value ?? ""}
+ editNode={false}
+ handleOnNewValue={(newValue) => {
+ setValue?.(newValue.value);
+ }}
+ disabled={
+ !colDef?.onCellValueChanged &&
+ !api.getGridOption("onCellValueChanged")
+ }
+ load_from_db={true}
+ allowCustomValue={false}
+ password={false}
+ display_name={colDef?.headerName ?? ""}
+ placeholder={colDef?.headerName ?? ""}
+ isToolMode={false}
+ hasRefreshButton={false}
+ />
+ );
+ }
+ //TODO: REFACTOR FOR ANY LABEL NOT HARDCODED
+ else if (value === "success") {
return (
<Badge
variant="successStatic"
size="sq"
className={cn("h-[18px] w-full justify-center")}
>
{value}
</Badge>
);
- } else if (value === "failure") {
+ } else if (value === "failure") {
return (
<Badge
variant="errorStatic"
size="sq"
className={cn("h-[18px] w-full justify-center")}
>
{value}
</Badge>
);
- } else if (colDef?.context?.globalVariable) {
- return (
- <InputGlobalComponent
- id="string-reader-global"
- value={value ?? ""}
- editNode={false}
- handleOnNewValue={(newValue) => {
- setValue?.(newValue.value);
- }}
- disabled={
- !colDef?.onCellValueChanged &&
- !api.getGridOption("onCellValueChanged")
- }
- load_from_db={true}
- allowCustomValue={false}
- password={false}
- display_name=""
- placeholder=""
- isToolMode={false}
- hasRefreshButton={false}
- />
- );
} else {
return (
<StringReader
editable={
!!colDef?.onCellValueChanged ||
!!api.getGridOption("onCellValueChanged")
}
setValue={setValue!}
string={value}
/>
);
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| } else if (colDef?.context?.globalVariable) { | |
| return ( | |
| <InputGlobalComponent | |
| id="string-reader-global" | |
| value={value ?? ""} | |
| editNode={false} | |
| handleOnNewValue={(newValue) => { | |
| setValue?.(newValue.value); | |
| }} | |
| disabled={ | |
| !colDef?.onCellValueChanged && | |
| !api.getGridOption("onCellValueChanged") | |
| } | |
| load_from_db={true} | |
| allowCustomValue={false} | |
| password={false} | |
| display_name="" | |
| placeholder="" | |
| isToolMode={false} | |
| hasRefreshButton={false} | |
| /> | |
| ); | |
| } else { | |
| // Global variable cells should always render the selector first | |
| else if (colDef?.context?.globalVariable) { | |
| return ( | |
| <InputGlobalComponent | |
| id={ | |
| `string-reader-global-${colDef?.colId ?? "col"}-${props?.node?.id ?? props?.rowIndex ?? "row"}` | |
| } | |
| value={value ?? ""} | |
| editNode={false} | |
| handleOnNewValue={(newValue) => { | |
| setValue?.(newValue.value); | |
| }} | |
| disabled={ | |
| !colDef?.onCellValueChanged && | |
| !api.getGridOption("onCellValueChanged") | |
| } | |
| load_from_db={true} | |
| allowCustomValue={false} | |
| password={false} | |
| display_name={colDef?.headerName ?? ""} | |
| placeholder={colDef?.headerName ?? ""} | |
| isToolMode={false} | |
| hasRefreshButton={false} | |
| /> | |
| ); | |
| } | |
| //TODO: REFACTOR FOR ANY LABEL NOT HARDCODED | |
| else if (value === "success") { | |
| return ( | |
| <Badge | |
| variant="successStatic" | |
| size="sq" | |
| className={cn("h-[18px] w-full justify-center")} | |
| > | |
| {value} | |
| </Badge> | |
| ); | |
| } else if (value === "failure") { | |
| return ( | |
| <Badge | |
| variant="errorStatic" | |
| size="sq" | |
| className={cn("h-[18px] w-full justify-center")} | |
| > | |
| {value} | |
| </Badge> | |
| ); | |
| } else { | |
| return ( | |
| <StringReader | |
| editable={ | |
| !!colDef?.onCellValueChanged || | |
| !!api.getGridOption("onCellValueChanged") | |
| } | |
| setValue={setValue!} | |
| string={value} | |
| /> | |
| ); | |
| } |
🤖 Prompt for AI Agents
In
src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/components/tableAutoCellRender/index.tsx
around lines 64 to 86, the branch that renders Badge for string values like
"success"/"failure" runs before the check for colDef?.context?.globalVariable,
causing global-variable cells to render the wrong UI; reorder the logic so the
colDef?.context?.globalVariable branch is evaluated before the string-case/label
checks (or add an early return when globalVariable is true) so
InputGlobalComponent is used for global-variable cells regardless of their
string value.
src/frontend/src/utils/utils.ts
Outdated
| if (col.global_variable) { | ||
| newCol.editable = false; | ||
| newCol.cellClass = "no-border !p-0"; | ||
| } | ||
| newCol.cellRenderer = TableAutoCellRender; |
There was a problem hiding this comment.
Property not on type + behavior mismatch
- col.global_variable is not typed (see previous comment).
- If a column is a global variable, we should consistently make it non-editable; consider also honoring load_from_db for non-editability.
Apply:
- if (col.global_variable) {
+ if (col.global_variable || col.load_from_db) {
newCol.editable = false;
newCol.cellClass = "no-border !p-0";
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| if (col.global_variable) { | |
| newCol.editable = false; | |
| newCol.cellClass = "no-border !p-0"; | |
| } | |
| newCol.cellRenderer = TableAutoCellRender; | |
| if (col.global_variable || col.load_from_db) { | |
| newCol.editable = false; | |
| newCol.cellClass = "no-border !p-0"; | |
| } | |
| newCol.cellRenderer = TableAutoCellRender; |
🤖 Prompt for AI Agents
In src/frontend/src/utils/utils.ts around lines 622 to 626, the code reads
col.global_variable but that property is not typed and the non-editable behavior
isn't consistently applied; update the column type/interface to include
global_variable?: boolean, and change the logic to set newCol.editable = false
when col.global_variable === true OR when col.load_from_db === true, keep
newCol.cellClass = "no-border !p-0" for global variables, and then assign
newCol.cellRenderer = TableAutoCellRender as before; ensure you use the typed
property (optional chaining or strict check) to avoid TS errors.
* add column with load from db * Update test_table_loader_component.py --------- Co-authored-by: Eric Hare <ericrhare@gmail.com>
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
|
4 participants
This pull request introduces support for customizing whether input components allow custom values, with a focus on table and global variable input handling. The changes add an
allowCustomValueprop throughout input-related components, enhance table cell rendering for global variables, and make related improvements to styling and type definitions.Input Customization and Propagation:
allowCustomValueprop toInputComponent,InputGlobalComponent, and their type definitions, allowing control over whether custom input values are permitted. This prop is passed through the component tree and used to control input rendering and behavior. [1] [2] [3] [4] [5] [6]Popover and Input Behavior Adjustments:
CustomInputPopoverand related popover logic to respect theallowCustomValueprop, modifying input rendering, anchor class names, and click behavior accordingly. [1] [2] [3] [4]Table and Cell Rendering Enhancements:
TableAutoCellRenderto renderInputGlobalComponentfor global variable columns, withallowCustomValueset tofalse, improving support for global variable editing in tables. [1] [2]FormatColumnsutility to propagateload_from_dbandglobalVariablecontext for columns, and to disable editing and adjust styling for global variable columns. [1] [2] [3]Styling and Interaction Improvements:
group/popover-itemconvention, improving hover and focus interactions for selection indicators and icons. [1] [2] [3]Miscellaneous:
Cookies.ParameterRenderComponent.onCellValueChangedinTableComponentfor better event delegation. [1] [2] [3]Summary by CodeRabbit