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

1964 & 1947 - Bugfixes #1992

Merged
merged 3 commits into from
Jan 23, 2025
Merged

1964 & 1947 - Bugfixes #1992

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
84e5a04
1964 - remove MULTI_SELECT rendering of any kind until we implement a…
kresimir-coko Jan 23, 2025
a529022
Revert "1925 - Optimize ArrayProperty"
kresimir-coko Jan 23, 2025
c98d510
1947 - optimize ArrayProperty handlers
kresimir-coko Jan 23, 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
40 changes: 26 additions & 14 deletions client/src/pages/platform/workflow-editor/components/Properties/ArrayProperty.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {ControlType, ObjectProperty, PropertyType} from '@/shared/middleware/pla
import {ArrayPropertyType, PropertyAllType} from '@/shared/types';
import {PlusIcon} from '@radix-ui/react-icons';
import resolvePath from 'object-resolve-path';
import {Fragment, useCallback, useEffect, useMemo, useState} from 'react';
import {Fragment, useCallback, useEffect, useState} from 'react';

import {encodeParameters, encodePath} from '../../utils/encodingUtils';
import getParameterItemType from '../../utils/getParameterItemType';
Expand All @@ -19,14 +19,22 @@ interface ArrayPropertyProps {
property: PropertyAllType;
}

const initialAvailablePropertyTypes = Object.keys(VALUE_PROPERTY_CONTROL_TYPES).map((type) => ({
label: type as string,
value: type as string,
}));

const ArrayProperty = ({onDeleteClick, parentArrayItems, path, property}: ArrayPropertyProps) => {
const [arrayItems, setArrayItems] = useState<Array<ArrayPropertyType | Array<ArrayPropertyType>>>([]);
const [availablePropertyTypes, setAvailablePropertyTypes] =
useState<Array<{label: string; value: string}>>(initialAvailablePropertyTypes);
const [newPropertyType, setNewPropertyType] = useState<string>();

const {currentComponent} = useWorkflowNodeDetailsPanelStore();

const {additionalProperties, name, placeholder} = property;
let {items} = property;
const {additionalProperties, name} = property;

let items = property.items;

if (!items?.length && parentArrayItems?.[0]?.items?.length) {
items = parentArrayItems?.[0].items;
Expand Down Expand Up @@ -79,7 +87,8 @@ const ArrayProperty = ({onDeleteClick, parentArrayItems, path, property}: ArrayP
[currentComponent, onDeleteClick]
);

const availablePropertyTypes = useMemo(() => {
// get available property types from items and additional properties
useEffect(() => {
let propertyTypes: Array<{label: string; value: string}> = [];

const hasDuplicateTypes = items?.some(
Expand Down Expand Up @@ -121,9 +130,13 @@ const ArrayProperty = ({onDeleteClick, parentArrayItems, path, property}: ArrayP
}
}

return propertyTypes;
}, [items, additionalProperties, currentComponent]);
if (propertyTypes.length) {
setAvailablePropertyTypes(propertyTypes);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

// update newPropertyType when availablePropertyTypes change
useEffect(() => {
if (availablePropertyTypes.length) {
setNewPropertyType(availablePropertyTypes[0].value);
Expand All @@ -142,7 +155,6 @@ const ArrayProperty = ({onDeleteClick, parentArrayItems, path, property}: ArrayP
}

const encodedParameters = encodeParameters(currentComponent.parameters);

const encodedPath = encodePath(path);

const parameterValue = resolvePath(encodedParameters, encodedPath);
Expand All @@ -165,10 +177,10 @@ const ArrayProperty = ({onDeleteClick, parentArrayItems, path, property}: ArrayP
}

const subProperties = (matchingItem as ObjectProperty).properties?.map((property) =>
Object.keys(parameterItem).includes(name as keyof ArrayPropertyType)
Object.keys(parameterItem).includes(property.name as keyof ArrayPropertyType)
? {
...property,
defaultValue: parameterItem[name as keyof ArrayPropertyType],
defaultValue: parameterItem[property.name as keyof ArrayPropertyType],
}
: property
);
Expand All @@ -187,10 +199,10 @@ const ArrayProperty = ({onDeleteClick, parentArrayItems, path, property}: ArrayP
} else if (items?.length && items[0].type === 'OBJECT' && Array.isArray(parameterValue)) {
const parameterArrayItems = parameterValue.map((parameterItem: ArrayPropertyType, index: number) => {
const subProperties = (items[0] as ObjectProperty).properties?.map((property) =>
Object.keys(parameterItem).includes(name as keyof ArrayPropertyType)
Object.keys(parameterItem).includes(property.name as keyof ArrayPropertyType)
? {
...property,
defaultValue: parameterItem[name as keyof ArrayPropertyType],
defaultValue: parameterItem[property.name as keyof ArrayPropertyType],
}
: property
);
Expand Down Expand Up @@ -231,7 +243,7 @@ const ArrayProperty = ({onDeleteClick, parentArrayItems, path, property}: ArrayP

let label = `Item ${index}`;

if (name === 'conditions') {
if (property.name === 'conditions') {
label = `AND Condition ${index}`;
}

Expand Down Expand Up @@ -334,7 +346,7 @@ const ArrayProperty = ({onDeleteClick, parentArrayItems, path, property}: ArrayP
<SubPropertyPopover
array
availablePropertyTypes={availablePropertyTypes}
buttonLabel={placeholder ?? parentArrayItems?.[0]?.placeholder}
buttonLabel={property.placeholder ?? parentArrayItems?.[0]?.placeholder}
condition={currentComponent?.componentName === 'condition'}
handleClick={handleAddItemClick}
key={`${path}_${name}_subPropertyPopoverButton`}
Expand All @@ -351,7 +363,7 @@ const ArrayProperty = ({onDeleteClick, parentArrayItems, path, property}: ArrayP
>
<PlusIcon className="size-4" />

{placeholder || 'Add array item'}
{property.placeholder || 'Add array item'}
</Button>
)}
</Fragment>
Expand Down
2 changes: 1 addition & 1 deletion client/src/pages/platform/workflow-editor/components/Properties/Property.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -873,7 +873,7 @@ const Property = ({
</div>
)}

{(controlType === 'ARRAY_BUILDER' || controlType === 'MULTI_SELECT') && path && (
{controlType === 'ARRAY_BUILDER' && path && (
<ArrayProperty
onDeleteClick={handleDeleteCustomPropertyClick}
parentArrayItems={parentArrayItems}
Expand Down
Loading