Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(cdp): fixes broken dictonary property adding #29514

Merged
merged 5 commits into from
Mar 5, 2025
Merged

fix(cdp): fixes broken dictonary property adding #29514

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3e04e4c
fix(cdp): fixes broken dictonary property adding
meikelmosby Mar 5, 2025
023bf8b
improve arraysEqual fn
meikelmosby Mar 5, 2025
cead750
wee
meikelmosby Mar 5, 2025
8ba1d99
use objectsEqual and get rid of arraysequal
meikelmosby Mar 5, 2025
9e90083
Fix
benjackwhite Mar 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 9 additions & 29 deletions frontend/src/scenes/pipeline/hogfunctions/HogFunctionInputs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ import { useValues } from 'kea'
import { LemonField } from 'lib/lemon-ui/LemonField'
import { CodeEditorInline, CodeEditorInlineProps } from 'lib/monaco/CodeEditorInline'
import { CodeEditorResizeable } from 'lib/monaco/CodeEditorResizable'
import { capitalizeFirstLetter } from 'lib/utils'
import { useEffect, useState } from 'react'
import { capitalizeFirstLetter, objectsEqual } from 'lib/utils'
import { useEffect, useRef, useState } from 'react'

import {
HogFunctionConfigurationType,
Expand Down Expand Up @@ -123,43 +123,23 @@ function DictionaryField({
templating: boolean
}): JSX.Element {
const [entries, setEntries] = useState<[string, string][]>(Object.entries(value ?? {}))

const arraysEqual = (a: any[], b: any[]): boolean => {
if (a === b) {
return true
}
if (a == null || b == null) {
return false
}
if (a.length !== b.length) {
return false
}

// If you don't care about the order of the elements inside
// the array, you should sort both arrays here.
// Please note that calling sort on an array will modify that array.
// you might want to clone your array first.

for (let i = 0; i < a.length; ++i) {
if (a[i] !== b[i]) {
return false
}
}
return true
}
const prevFilteredEntriesRef = useRef<[string, string][]>(entries)

useEffect(() => {
// NOTE: Filter out all empty entries as fetch will throw if passed in
const filteredEntries = entries.filter(([key, val]) => key.trim() !== '' || val.trim() !== '')

// avoid changing configuration if nothing has changed
if (arraysEqual(filteredEntries, entries)) {
// Compare with previous filtered entries to avoid unnecessary updates
if (objectsEqual(filteredEntries, prevFilteredEntriesRef.current)) {
return
}

// Update the ref with current filtered entries
prevFilteredEntriesRef.current = filteredEntries

const val = Object.fromEntries(filteredEntries)
onChange?.(val)
}, [entries])
}, [entries, onChange])

return (
<div className="space-y-2">
Expand Down
Loading