From 61668359c5569a1d70625703a2405603c4a398c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kre=C5=A1imir=20=C4=8Coko?= <kresimircoko@gmail.com>
Date: Mon, 4 May 2026 09:47:10 +0200
Subject: [PATCH 1/4] 3090 - add clientside support for
 optionsLoadedDynamically for properties

---
 .../components/properties/Property.tsx        |   4 +
 .../components/PropertyComboBox.tsx           | 259 ++++++++++++------
 .../properties/hooks/useProperty.ts           |   7 +
 3 files changed, 187 insertions(+), 83 deletions(-)

diff --git a/client/src/pages/platform/workflow-editor/components/properties/Property.tsx b/client/src/pages/platform/workflow-editor/components/properties/Property.tsx
index a7bbab33b58..12ca7fc3649 100644
--- a/client/src/pages/platform/workflow-editor/components/properties/Property.tsx
+++ b/client/src/pages/platform/workflow-editor/components/properties/Property.tsx
@@ -130,6 +130,7 @@ const Property = ({
         name,
         options,
         optionsDataSource,
+        optionsLoadedDynamically,
         placeholder,
         propertiesDataSource,
         propertyParameterValue,
@@ -527,6 +528,7 @@ const Property = ({
                                                 minLength={minLength}
                                                 onBlur={() => {
                                                     field.onBlur();
+
                                                     handleControlledBlur(field.value);
                                                 }}
                                                 onChange={(event) => {
@@ -639,6 +641,7 @@ const Property = ({
                                         }}
                                         options={(formattedOptions as Array<Option>) || []}
                                         optionsDataSource={optionsDataSource}
+                                        optionsLoadedDynamically={optionsLoadedDynamically}
                                         path={calculatedPath}
                                         required={required}
                                         showInputTypeSwitchButton={isToolsClusterElement}
@@ -830,6 +833,7 @@ const Property = ({
                             onValueChange={(value: string) => handleSelectChange(value, name!)}
                             options={(formattedOptions as Array<Option>) || []}
                             optionsDataSource={optionsDataSource}
+                            optionsLoadedDynamically={optionsLoadedDynamically}
                             path={calculatedPath}
                             required={required}
                             showInputTypeSwitchButton={showInputTypeSwitchButton}
diff --git a/client/src/pages/platform/workflow-editor/components/properties/components/PropertyComboBox.tsx b/client/src/pages/platform/workflow-editor/components/properties/components/PropertyComboBox.tsx
index d0454643c85..3cb521649a3 100644
--- a/client/src/pages/platform/workflow-editor/components/properties/components/PropertyComboBox.tsx
+++ b/client/src/pages/platform/workflow-editor/components/properties/components/PropertyComboBox.tsx
@@ -8,20 +8,24 @@ import {Tooltip, TooltipContent, TooltipTrigger} from '@/components/ui/tooltip';
 import {useClusterElementContext} from '@/pages/platform/workflow-editor/components/properties/ClusterElementContext';
 import {useClusterElementOptionsQuery} from '@/shared/middleware/graphql';
 import {
+    WorkflowNodeOptionKeys,
     useGetClusterElementNodeOptionsQuery,
     useGetWorkflowNodeOptionsQuery,
 } from '@/shared/queries/platform/workflowNodeOptions.queries';
 import {useEnvironmentStore} from '@/shared/stores/useEnvironmentStore';
+import {useQueryClient} from '@tanstack/react-query';
 import {CheckIcon, ChevronsUpDownIcon, CircleQuestionMarkIcon} from 'lucide-react';
 import {FocusEventHandler, ReactNode, useCallback, useEffect, useMemo, useState} from 'react';
 import InlineSVG from 'react-inlinesvg';
 import {twMerge} from 'tailwind-merge';
+import {useDebouncedCallback} from 'use-debounce';
 import {useShallow} from 'zustand/shallow';
 
 import useWorkflowEditorStore from '../../../stores/useWorkflowEditorStore';
 import useWorkflowNodeDetailsPanelStore from '../../../stores/useWorkflowNodeDetailsPanelStore';
 import getFormattedDependencyKey from '../../../utils/getFormattedDependencyKey';
 import PropertyInputTypeSwitch from './PropertyInputTypeSwitch';
+import PropertyInput from './property-input/PropertyInput';
 
 import type {
     GetClusterElementNodeOptionsRequest,
@@ -54,6 +58,7 @@ interface PropertyComboBoxProps {
     onValueChange?: (value: string) => void;
     options: Array<Option>;
     optionsDataSource?: OptionsDataSource;
+    optionsLoadedDynamically?: boolean;
     path?: string;
     placeholder?: string;
     required?: boolean;
@@ -79,6 +84,7 @@ const PropertyComboBox = ({
     onValueChange,
     options: initialOptions,
     optionsDataSource,
+    optionsLoadedDynamically,
     path: initialPath,
     placeholder = 'Select...',
     required,
@@ -89,6 +95,7 @@ const PropertyComboBox = ({
 }: PropertyComboBoxProps) => {
     const [open, setOpen] = useState(false);
     const [value, setValue] = useState(initialValue != null ? initialValue.toString() : defaultValue);
+    const [inputValue, setInputValue] = useState('');
 
     const clusterElementContext = useClusterElementContext();
 
@@ -139,10 +146,19 @@ const PropertyComboBox = ({
                 id: workflowId,
                 lookupDependsOnPaths,
                 propertyName: path!,
+                searchText: inputValue.length >= 3 ? inputValue : undefined,
                 workflowNodeName,
             },
         }),
-        [currentEnvironmentId, lookupDependsOnPaths, lookupDependsOnValuesKey, path, workflowId, workflowNodeName]
+        [
+            currentEnvironmentId,
+            inputValue,
+            lookupDependsOnPaths,
+            lookupDependsOnValuesKey,
+            path,
+            workflowId,
+            workflowNodeName,
+        ]
     );
 
     const clusterElementQueryOptions: {
@@ -196,6 +212,7 @@ const PropertyComboBox = ({
         data: workflowNodeOptions,
         isLoading,
         isRefetching,
+        refetch: refetchWorkflowNodeOptions,
     } = useGetWorkflowNodeOptionsQuery(queryOptions, Boolean(queryEnabled && !currentNode?.clusterElementType));
 
     const {
@@ -406,12 +423,43 @@ const PropertyComboBox = ({
         [onValueChange]
     );
 
+    const handleInputValueChange = useDebouncedCallback((value: string) => {
+        setInputValue(value);
+    }, 300);
+
+    const queryClient = useQueryClient();
+
     useEffect(() => {
         if (initialValue != null) {
             setValue(initialValue.toString());
         }
     }, [initialValue]);
 
+    useEffect(() => {
+        if (!optionsLoadedDynamically) {
+            return;
+        }
+
+        if (inputValue.length < 3) {
+            return;
+        }
+
+        queryClient.invalidateQueries({
+            queryKey: WorkflowNodeOptionKeys.propertyWorkflowNodeOptions(
+                queryOptions.request,
+                queryOptions.loadDependencyValueKey
+            ),
+        });
+    }, [
+        inputValue,
+        optionsLoadedDynamically,
+        queryClient,
+        queryOptions.loadDependencyValueKey,
+        queryOptions.request,
+        refetchWorkflowNodeOptions,
+        workflowNodeOptions,
+    ]);
+
     return (
         <fieldset className="w-full space-y-1">
             {label && (
@@ -448,99 +496,125 @@ const PropertyComboBox = ({
             )}
 
             <Popover modal onOpenChange={setOpen} open={open}>
-                <PopoverTrigger aria-label={`Select options for property ${label ?? name}`} asChild onBlur={onBlur}>
-                    <Button
-                        aria-expanded={open}
-                        className={twMerge(
-                            'relative w-full justify-between whitespace-normal font-normal',
-                            showInputTypeSwitchButton && 'mt-0'
-                        )}
-                        disabled={
-                            !options.length &&
-                            (isRefetching ||
-                                isClusterElementNodeOptionsRefetching ||
-                                noOptionsAvailable ||
-                                !!missingConnection ||
-                                !connectionRequirementMet)
-                        }
-                        name={name}
-                        role="combobox"
-                        variant="outline"
-                    >
-                        {leadingIcon && (
-                            <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center rounded-l-md border-r border-gray-200 bg-gray-100 px-3">
-                                {leadingIcon}
-                            </div>
-                        )}
-
-                        {lookupDependsOnValues &&
-                            (isRefetching || isClusterElementNodeOptionsRefetching) &&
-                            !currentOption?.label && (
-                                <span className={twMerge('flex items-center', leadingIcon && 'ml-9')}>
-                                    <LoadingIcon /> Refetching...
-                                </span>
+                {optionsLoadedDynamically && name && (
+                    <PopoverTrigger aria-label={`Select options for property ${label ?? name}`} asChild onBlur={onBlur}>
+                        <PropertyInput
+                            leadingIcon={leadingIcon}
+                            name={name}
+                            onChange={(event) => handleInputValueChange(event.target.value)}
+                            placeholder="Foo..."
+                            required={required}
+                            type="text"
+                            value={inputValue}
+                        />
+                    </PopoverTrigger>
+                )}
+
+                {!optionsLoadedDynamically && (
+                    <PopoverTrigger aria-label={`Select options for property ${label ?? name}`} asChild onBlur={onBlur}>
+                        <Button
+                            aria-expanded={open}
+                            className={twMerge(
+                                'relative w-full justify-between whitespace-normal font-normal',
+                                showInputTypeSwitchButton && 'mt-0'
+                            )}
+                            disabled={
+                                !options.length &&
+                                (isRefetching ||
+                                    isClusterElementNodeOptionsRefetching ||
+                                    noOptionsAvailable ||
+                                    !!missingConnection ||
+                                    !connectionRequirementMet)
+                            }
+                            name={name}
+                            role="combobox"
+                            variant="outline"
+                        >
+                            {leadingIcon && (
+                                <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center rounded-l-md border-r border-gray-200 bg-gray-100 px-3">
+                                    {leadingIcon}
+                                </div>
                             )}
 
-                        {(lookupDependsOnValues && (isLoading || isClusterElementNodeOptionsLoading)) ||
-                        isClusterElementOptionsLoading ? (
-                            <span className={twMerge('flex items-center', leadingIcon && 'ml-9')}>
-                                <LoadingIcon /> Loading...
-                            </span>
-                        ) : null}
-
-                        {((lookupDependsOnValues &&
-                            !(isLoading || isClusterElementNodeOptionsLoading || isClusterElementOptionsLoading)) ||
-                            !lookupDependsOnValues) && (
-                            <>
-                                {currentOption ? (
-                                    <span
-                                        className={twMerge(
-                                            'flex w-full items-center font-normal',
-                                            leadingIcon && 'ml-9'
-                                        )}
-                                    >
-                                        {currentOption?.icon && (
-                                            <InlineSVG className="mr-2 size-6 flex-none" src={currentOption?.icon} />
-                                        )}
-
-                                        {currentOption?.label}
+                            {lookupDependsOnValues &&
+                                (isRefetching || isClusterElementNodeOptionsRefetching) &&
+                                !currentOption?.label && (
+                                    <span className={twMerge('flex items-center', leadingIcon && 'ml-9')}>
+                                        <LoadingIcon /> Refetching...
                                     </span>
-                                ) : (
-                                    !(isRefetching || isClusterElementNodeOptionsRefetching) && (
-                                        <span className={placeholderClassName}>{memoizedPlaceholder}</span>
-                                    )
                                 )}
-                            </>
-                        )}
 
-                        <ChevronsUpDownIcon className="ml-2 size-4 shrink-0 opacity-50" />
-                    </Button>
-                </PopoverTrigger>
+                            {(lookupDependsOnValues && (isLoading || isClusterElementNodeOptionsLoading)) ||
+                            isClusterElementOptionsLoading ? (
+                                <span className={twMerge('flex items-center', leadingIcon && 'ml-9')}>
+                                    <LoadingIcon /> Loading...
+                                </span>
+                            ) : null}
+
+                            {((lookupDependsOnValues &&
+                                !(isLoading || isClusterElementNodeOptionsLoading || isClusterElementOptionsLoading)) ||
+                                !lookupDependsOnValues) && (
+                                <>
+                                    {currentOption ? (
+                                        <span
+                                            className={twMerge(
+                                                'flex w-full items-center font-normal',
+                                                leadingIcon && 'ml-9'
+                                            )}
+                                        >
+                                            {currentOption?.icon && (
+                                                <InlineSVG
+                                                    className="mr-2 size-6 flex-none"
+                                                    src={currentOption?.icon}
+                                                />
+                                            )}
+
+                                            {currentOption?.label}
+                                        </span>
+                                    ) : (
+                                        !(isRefetching || isClusterElementNodeOptionsRefetching) && (
+                                            <span className={placeholderClassName}>{memoizedPlaceholder}</span>
+                                        )
+                                    )}
+                                </>
+                            )}
 
-                <PopoverContent align="start" className="min-w-combo-box-popper-anchor-width p-0" side="bottom">
+                            <ChevronsUpDownIcon className="ml-2 size-4 shrink-0 opacity-50" />
+                        </Button>
+                    </PopoverTrigger>
+                )}
+
+                <PopoverContent
+                    align="start"
+                    className="min-w-combo-box-popper-anchor-width p-0"
+                    onOpenAutoFocus={(event) => event.preventDefault()}
+                    side="bottom"
+                >
                     <Command>
-                        <CommandInput className="h-9 border-none ring-0" placeholder="Search..." />
+                        {!optionsLoadedDynamically && (
+                            <CommandInput className="h-9 border-none ring-0" placeholder="Search..." />
+                        )}
 
                         <CommandList>
-                            <CommandEmpty>No item found.</CommandEmpty>
+                            {!optionsLoadedDynamically && <CommandEmpty>No item found.</CommandEmpty>}
 
                             <CommandGroup>
-                                <CommandItem
-                                    className="cursor-pointer font-normal hover:bg-muted"
-                                    key="resetOption"
-                                    onSelect={() => {
-                                        setOpen(false);
-
-                                        if (onValueChange) {
-                                            onValueChange('');
-                                        }
-                                    }}
-                                    value=""
-                                >
-                                    <span>Select...</span>
-
-                                    {value === '' && <CheckIcon className="ml-auto size-4" />}
-                                </CommandItem>
+                                {optionsLoadedDynamically && (isLoading || isRefetching) && (
+                                    <div className="flex items-center gap-2 px-3 py-2">
+                                        <LoadingIcon className="size-4" />
+
+                                        <span className="text-sm">Loading options...</span>
+                                    </div>
+                                )}
+
+                                {optionsLoadedDynamically &&
+                                    !isLoading &&
+                                    !isRefetching &&
+                                    !(options as Array<ComboBoxItemType>)?.length && (
+                                        <div className="flex items-center gap-2 px-3 py-2">
+                                            <span className="text-sm">Start typing to filter...</span>
+                                        </div>
+                                    )}
 
                                 {(options as Array<ComboBoxItemType>)?.map((option) => {
                                     const labelAndDescription = [
@@ -580,6 +654,25 @@ const PropertyComboBox = ({
                                         </CommandItem>
                                     );
                                 })}
+
+                                {!optionsLoadedDynamically && (
+                                    <CommandItem
+                                        className="cursor-pointer font-normal hover:bg-muted"
+                                        key="resetOption"
+                                        onSelect={() => {
+                                            setOpen(false);
+
+                                            if (onValueChange) {
+                                                onValueChange('');
+                                            }
+                                        }}
+                                        value=""
+                                    >
+                                        <span>Select...</span>
+
+                                        {value === '' && <CheckIcon className="ml-auto size-4" />}
+                                    </CommandItem>
+                                )}
                             </CommandGroup>
                         </CommandList>
                     </Command>
diff --git a/client/src/pages/platform/workflow-editor/components/properties/hooks/useProperty.ts b/client/src/pages/platform/workflow-editor/components/properties/hooks/useProperty.ts
index ec34d96c879..de9e106addb 100644
--- a/client/src/pages/platform/workflow-editor/components/properties/hooks/useProperty.ts
+++ b/client/src/pages/platform/workflow-editor/components/properties/hooks/useProperty.ts
@@ -152,6 +152,7 @@ type UsePropertyReturnType = {
     name: string | undefined;
     options?: PropertyAllType['options'];
     optionsDataSource?: OptionsDataSource;
+    optionsLoadedDynamically?: boolean;
     placeholder: string;
     propertiesDataSource?: PropertiesDataSource;
     /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -297,6 +298,7 @@ export const useProperty = ({
         numberPrecision,
         options,
         optionsDataSource,
+        optionsLoadedDynamically,
         placeholder = '',
         properties,
         propertiesDataSource,
@@ -317,6 +319,10 @@ export const useProperty = ({
 
     let {displayCondition} = property;
 
+    if (optionsLoadedDynamically) {
+        console.log(property);
+    }
+
     const {
         deleteClusterElementParameterMutation,
         deleteWorkflowNodeParameterMutation,
@@ -1815,6 +1821,7 @@ export const useProperty = ({
         name,
         options,
         optionsDataSource,
+        optionsLoadedDynamically,
         placeholder,
         propertiesDataSource,
         propertyParameterValue,

From a76727e7ad56e0584f9e1fbfea68291bcb039918 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kre=C5=A1imir=20=C4=8Coko?= <kresimircoko@gmail.com>
Date: Mon, 4 May 2026 09:47:29 +0200
Subject: [PATCH 2/4] 3090 - temporary type addition, to be removed when
 backend is done

---
 client/src/shared/types.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/shared/types.ts b/client/src/shared/types.ts
index 4beb0b81cac..269c85b68b4 100644
--- a/client/src/shared/types.ts
+++ b/client/src/shared/types.ts
@@ -368,6 +368,7 @@ export type PropertyAllType = Omit<PropertyTypeAllType, 'controlType'> & {
     controlType?: ControlType;
     custom?: boolean;
     expressionEnabled?: boolean;
+    optionsLoadedDynamically?: boolean;
     properties?: Array<PropertyAllType>;
 };
 

From 80c35defc2796a3b6647cd2dc4d4d46fe1243a74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kre=C5=A1imir=20=C4=8Coko?= <kresimircoko@gmail.com>
Date: Mon, 4 May 2026 13:55:58 +0200
Subject: [PATCH 3/4] 4858 - playwright - fix integer locator after changing
 input type

---
 client/test/playwright/pages/workflowPage.ts  |  4 +
 .../tests/properties/arrayProperty.spec.ts    |  6 +-
 .../tests/properties/objectProperty.spec.ts   |  2 +-
 .../properties/propertyPersistence.spec.ts    | 11 ++-
 .../properties/propertyValidation.spec.ts     | 96 ++++++++++++++-----
 .../utils/propertyValidationUtils.ts          | 26 +++--
 6 files changed, 109 insertions(+), 36 deletions(-)

diff --git a/client/test/playwright/pages/workflowPage.ts b/client/test/playwright/pages/workflowPage.ts
index f9ac2687838..70ccb9f772d 100644
--- a/client/test/playwright/pages/workflowPage.ts
+++ b/client/test/playwright/pages/workflowPage.ts
@@ -106,6 +106,10 @@ export class WorkflowPage {
         return this.arrayPropertyItemAt(index).getByRole('textbox');
     }
 
+    arrayPropertyItemSpinbuttonAt(index: number): Locator {
+        return this.arrayPropertyItemAt(index).getByRole('spinbutton');
+    }
+
     async addArrayItemsToReachRowCount({
         itemType = 'STRING',
         targetRowCount,
diff --git a/client/test/playwright/tests/properties/arrayProperty.spec.ts b/client/test/playwright/tests/properties/arrayProperty.spec.ts
index 9a3830864bf..05553630ffa 100644
--- a/client/test/playwright/tests/properties/arrayProperty.spec.ts
+++ b/client/test/playwright/tests/properties/arrayProperty.spec.ts
@@ -402,7 +402,7 @@ test.describe('ArrayProperty - Array property type (ArrayProperty.tsx)', () => {
             });
 
             await test.step('Set first INTEGER row to a value and leave the second INTEGER row empty', async () => {
-                const firstIntegerInput = workflowPage.arrayPropertyItemTextboxAt(1);
+                const firstIntegerInput = workflowPage.arrayPropertyItemSpinbuttonAt(1);
 
                 await replaceMentionsInputValue({
                     input: firstIntegerInput,
@@ -410,7 +410,7 @@ test.describe('ArrayProperty - Array property type (ArrayProperty.tsx)', () => {
                     value: valueOnDeletedIntegerRow,
                 });
 
-                const secondIntegerInput = workflowPage.arrayPropertyItemTextboxAt(2);
+                const secondIntegerInput = workflowPage.arrayPropertyItemSpinbuttonAt(2);
 
                 await replaceMentionsInputValue({
                     input: secondIntegerInput,
@@ -434,7 +434,7 @@ test.describe('ArrayProperty - Array property type (ArrayProperty.tsx)', () => {
 
                 await expect(arrayItems).toHaveCount(2);
 
-                const remainingIntegerRowAfterDeleted = workflowPage.arrayPropertyItemTextboxAt(1);
+                const remainingIntegerRowAfterDeleted = workflowPage.arrayPropertyItemSpinbuttonAt(1);
 
                 await expect(remainingIntegerRowAfterDeleted).toHaveValue('');
             });
diff --git a/client/test/playwright/tests/properties/objectProperty.spec.ts b/client/test/playwright/tests/properties/objectProperty.spec.ts
index c1381616b1b..4075877ec42 100644
--- a/client/test/playwright/tests/properties/objectProperty.spec.ts
+++ b/client/test/playwright/tests/properties/objectProperty.spec.ts
@@ -78,7 +78,7 @@ test.describe('ObjectProperty - Object property type (ObjectProperty.tsx)', () =
                 const integerProperty =
                     workflowPage.firstTaskComponentConfigurationPanel.getByLabel('Integer property');
 
-                const integerInput = integerProperty.getByRole('textbox');
+                const integerInput = integerProperty.getByRole('spinbutton');
 
                 await expect(integerInput).toHaveValue(expectedValues.Integer);
             });
diff --git a/client/test/playwright/tests/properties/propertyPersistence.spec.ts b/client/test/playwright/tests/properties/propertyPersistence.spec.ts
index a5cc5fe5f86..0ed611b629c 100644
--- a/client/test/playwright/tests/properties/propertyPersistence.spec.ts
+++ b/client/test/playwright/tests/properties/propertyPersistence.spec.ts
@@ -5,6 +5,7 @@ import {WorkflowPage} from '../../pages/workflowPage';
 import sampleWorkflow from '../../sampleWorkflow.json';
 import {clickAndExpectToBeVisible} from '../../utils/clickAndExpectToBeVisible';
 import {type TestProjectI, type TestWorkflowI} from '../../utils/projectUtils';
+import {fillPropertyInput} from '../../utils/propertyValidationUtils';
 import {getWorkflowDefinition, openPropertiesTab, reopenConfigurationPanel} from '../../utils/workflowUtils';
 
 export const test = mergeTests(loginTest(), projectTest, importWorkflowTest);
@@ -69,7 +70,7 @@ test.describe('Reading from Workflow Definition', () => {
             await test.step('integer property', async () => {
                 const integerProperty = configurationPanel.getByLabel('Integer property');
 
-                const integerInput = integerProperty.getByRole('textbox');
+                const integerInput = integerProperty.getByRole('spinbutton');
 
                 await expect(integerInput).toHaveValue(expectedValues.Integer);
             });
@@ -216,6 +217,10 @@ test.describe('Saving to Workflow Definition', () => {
 
                     expect(expectedPropertyType).toBe('object');
                     expect(propertyInputValue).toBe(expectedPropertyValue[0].toString());
+                } else if (expectedPropertyName === 'Integer') {
+                    const integerInput = property.getByRole('spinbutton');
+
+                    await expect(integerInput).toHaveValue(expectedPropertyValue!.toString());
                 } else {
                     const propertyInputValue = await propertyInput.inputValue();
 
@@ -244,7 +249,7 @@ test.describe('Saving to Workflow Definition', () => {
     test('should save basic INTEGER property', async () => {
         const integerProperty = configurationPanel.getByLabel('Integer property');
 
-        const integerInput = integerProperty.getByRole('textbox');
+        const integerInput = integerProperty.getByRole('spinbutton');
 
         const testValue = 123;
 
@@ -259,7 +264,7 @@ test.describe('Saving to Workflow Definition', () => {
     test('should save negative value to the INTEGER property', async () => {
         const integerProperty = configurationPanel.getByLabel('Integer property');
 
-        const integerInput = integerProperty.getByRole('textbox');
+        const integerInput = integerProperty.getByRole('spinbutton');
 
         const testValue = -123;
 
diff --git a/client/test/playwright/tests/properties/propertyValidation.spec.ts b/client/test/playwright/tests/properties/propertyValidation.spec.ts
index 6bfdb9b1c03..88abd8334ca 100644
--- a/client/test/playwright/tests/properties/propertyValidation.spec.ts
+++ b/client/test/playwright/tests/properties/propertyValidation.spec.ts
@@ -27,7 +27,7 @@ test.describe('Property validation - string', () => {
     test.describe('String Regular Expression', () => {
         test('should show validation error when value does not match regex (only letters allowed)', async () => {
             await test.step('Enter invalid value', async () => {
-                await fillPropertyInput(configurationPanel, 'stringRegEx property', '123');
+                await fillPropertyInput({configurationPanel, propertyLabel: 'stringRegEx property', value: '123'});
             });
 
             await test.step('Assert validation error', async () => {
@@ -41,7 +41,7 @@ test.describe('Property validation - string', () => {
 
         test('should clear regex validation error when value matches (letters only)', async () => {
             await test.step('Enter invalid value', async () => {
-                await fillPropertyInput(configurationPanel, 'stringRegEx property', '12');
+                await fillPropertyInput({configurationPanel, propertyLabel: 'stringRegEx property', value: '12'});
             });
 
             await test.step('Assert validation error', async () => {
@@ -53,7 +53,7 @@ test.describe('Property validation - string', () => {
             });
 
             await test.step('Enter valid value', async () => {
-                await fillPropertyInput(configurationPanel, 'stringRegEx property', 'ab');
+                await fillPropertyInput({configurationPanel, propertyLabel: 'stringRegEx property', value: 'ab'});
             });
 
             await test.step('Assert no validation error', async () => {
@@ -63,7 +63,7 @@ test.describe('Property validation - string', () => {
 
         test('should not show validation error when value matches regex', async () => {
             await test.step('Enter valid value', async () => {
-                await fillPropertyInput(configurationPanel, 'stringRegEx property', 'abc');
+                await fillPropertyInput({configurationPanel, propertyLabel: 'stringRegEx property', value: 'abc'});
             });
 
             await test.step('Assert no validation error', async () => {
@@ -75,7 +75,7 @@ test.describe('Property validation - string', () => {
     test.describe('String Min Length', () => {
         test('should show validation error when string length is below minLength', async () => {
             await test.step('Enter value below minLength', async () => {
-                await fillPropertyInput(configurationPanel, 'stringMinLength property', 'a');
+                await fillPropertyInput({configurationPanel, propertyLabel: 'stringMinLength property', value: 'a'});
             });
 
             await test.step('Assert validation error', async () => {
@@ -89,7 +89,11 @@ test.describe('Property validation - string', () => {
 
         test('should not show validation error when string length meets minLength', async () => {
             await test.step('Enter value meeting minLength', async () => {
-                await fillPropertyInput(configurationPanel, 'stringMinLength property', 'abcde');
+                await fillPropertyInput({
+                    configurationPanel,
+                    propertyLabel: 'stringMinLength property',
+                    value: 'abcde',
+                });
             });
 
             await test.step('Assert no validation error', async () => {
@@ -101,7 +105,11 @@ test.describe('Property validation - string', () => {
     test.describe('String Max Length', () => {
         test('should show validation error when string length exceeds maxLength', async () => {
             await test.step('Enter value exceeding maxLength', async () => {
-                await fillPropertyInput(configurationPanel, 'stringMaxLength property', 'abcdef');
+                await fillPropertyInput({
+                    configurationPanel,
+                    propertyLabel: 'stringMaxLength property',
+                    value: 'abcdef',
+                });
             });
 
             await test.step('Assert validation error', async () => {
@@ -115,7 +123,7 @@ test.describe('Property validation - string', () => {
 
         test('should not show validation error when string length is within maxLength', async () => {
             await test.step('Enter value within maxLength', async () => {
-                await fillPropertyInput(configurationPanel, 'stringMaxLength property', 'abc');
+                await fillPropertyInput({configurationPanel, propertyLabel: 'stringMaxLength property', value: 'abc'});
             });
 
             await test.step('Assert no validation error', async () => {
@@ -140,7 +148,12 @@ test.describe('Property validation - numeric', () => {
     test.describe('Integer Max Value', () => {
         test('should show validation error when value exceeds maxValue', async () => {
             await test.step('Enter value exceeding maxValue', async () => {
-                await fillPropertyInput(configurationPanel, 'integerMaxValue property', '11');
+                await fillPropertyInput({
+                    configurationPanel,
+                    inputRole: 'spinbutton',
+                    propertyLabel: 'integerMaxValue property',
+                    value: '11',
+                });
             });
 
             await test.step('Assert validation error', async () => {
@@ -154,7 +167,12 @@ test.describe('Property validation - numeric', () => {
 
         test('should not show validation error when value is within maxValue', async () => {
             await test.step('Enter value within maxValue', async () => {
-                await fillPropertyInput(configurationPanel, 'integerMaxValue property', '10');
+                await fillPropertyInput({
+                    configurationPanel,
+                    inputRole: 'spinbutton',
+                    propertyLabel: 'integerMaxValue property',
+                    value: '10',
+                });
             });
 
             await test.step('Assert no validation error', async () => {
@@ -166,7 +184,12 @@ test.describe('Property validation - numeric', () => {
     test.describe('Integer Min Value', () => {
         test('should show validation error when value is below minValue', async () => {
             await test.step('Enter value below minValue', async () => {
-                await fillPropertyInput(configurationPanel, 'integerMinValue property', '9');
+                await fillPropertyInput({
+                    configurationPanel,
+                    inputRole: 'spinbutton',
+                    propertyLabel: 'integerMinValue property',
+                    value: '9',
+                });
             });
 
             await test.step('Assert validation error', async () => {
@@ -180,7 +203,12 @@ test.describe('Property validation - numeric', () => {
 
         test('should not show validation error when value meets minValue', async () => {
             await test.step('Enter value meeting minValue', async () => {
-                await fillPropertyInput(configurationPanel, 'integerMinValue property', '10');
+                await fillPropertyInput({
+                    configurationPanel,
+                    inputRole: 'spinbutton',
+                    propertyLabel: 'integerMinValue property',
+                    value: '10',
+                });
             });
 
             await test.step('Assert no validation error', async () => {
@@ -192,7 +220,7 @@ test.describe('Property validation - numeric', () => {
     test.describe('Number Max Value', () => {
         test('should show validation error when value exceeds maxValue', async () => {
             await test.step('Enter value exceeding maxValue', async () => {
-                await fillPropertyInput(configurationPanel, 'numberMaxValue property', '6');
+                await fillPropertyInput({configurationPanel, propertyLabel: 'numberMaxValue property', value: '6'});
             });
 
             await test.step('Assert validation error', async () => {
@@ -206,7 +234,7 @@ test.describe('Property validation - numeric', () => {
 
         test('should not show validation error when value is within maxValue', async () => {
             await test.step('Enter value within maxValue', async () => {
-                await fillPropertyInput(configurationPanel, 'numberMaxValue property', '5');
+                await fillPropertyInput({configurationPanel, propertyLabel: 'numberMaxValue property', value: '5'});
             });
 
             await test.step('Assert no validation error', async () => {
@@ -218,7 +246,7 @@ test.describe('Property validation - numeric', () => {
     test.describe('Number Min Value', () => {
         test('should show validation error when value is below minValue', async () => {
             await test.step('Enter value below minValue', async () => {
-                await fillPropertyInput(configurationPanel, 'numberMinValue property', '4');
+                await fillPropertyInput({configurationPanel, propertyLabel: 'numberMinValue property', value: '4'});
             });
 
             await test.step('Assert validation error', async () => {
@@ -232,7 +260,7 @@ test.describe('Property validation - numeric', () => {
 
         test('should not show validation error when value meets minValue', async () => {
             await test.step('Enter value meeting minValue', async () => {
-                await fillPropertyInput(configurationPanel, 'numberMinValue property', '5');
+                await fillPropertyInput({configurationPanel, propertyLabel: 'numberMinValue property', value: '5'});
             });
 
             await test.step('Assert no validation error', async () => {
@@ -244,7 +272,11 @@ test.describe('Property validation - numeric', () => {
     test.describe('Number max decimal places', () => {
         test('should show validation error when decimal places exceed maxNumberPrecision', async () => {
             await test.step('Enter value with too many decimal places', async () => {
-                await fillPropertyInput(configurationPanel, 'numberMaxNumPrecision property', '1.123');
+                await fillPropertyInput({
+                    configurationPanel,
+                    propertyLabel: 'numberMaxNumPrecision property',
+                    value: '1.123',
+                });
             });
 
             await test.step('Assert validation error', async () => {
@@ -258,7 +290,11 @@ test.describe('Property validation - numeric', () => {
 
         test('should not show validation error when decimal places are within maxNumberPrecision', async () => {
             await test.step('Enter value within max decimal places', async () => {
-                await fillPropertyInput(configurationPanel, 'numberMaxNumPrecision property', '1.12');
+                await fillPropertyInput({
+                    configurationPanel,
+                    propertyLabel: 'numberMaxNumPrecision property',
+                    value: '1.12',
+                });
             });
 
             await test.step('Assert no validation error', async () => {
@@ -270,7 +306,11 @@ test.describe('Property validation - numeric', () => {
     test.describe('Number min decimal places', () => {
         test('should show validation error when decimal places are below minNumberPrecision', async () => {
             await test.step('Enter value with too few decimal places', async () => {
-                await fillPropertyInput(configurationPanel, 'numberMinNumPrecision property', '1.1');
+                await fillPropertyInput({
+                    configurationPanel,
+                    propertyLabel: 'numberMinNumPrecision property',
+                    value: '1.1',
+                });
             });
 
             await test.step('Assert validation error', async () => {
@@ -284,7 +324,11 @@ test.describe('Property validation - numeric', () => {
 
         test('should not show validation error when decimal places meet minNumberPrecision', async () => {
             await test.step('Enter value meeting min decimal places', async () => {
-                await fillPropertyInput(configurationPanel, 'numberMinNumPrecision property', '1.12');
+                await fillPropertyInput({
+                    configurationPanel,
+                    propertyLabel: 'numberMinNumPrecision property',
+                    value: '1.12',
+                });
             });
 
             await test.step('Assert no validation error', async () => {
@@ -296,7 +340,11 @@ test.describe('Property validation - numeric', () => {
     test.describe('Number precision', () => {
         test('should show validation error when decimal places exceed numberPrecision', async () => {
             await test.step('Enter value with too many decimal places', async () => {
-                await fillPropertyInput(configurationPanel, 'numberPrecision property', '1.1234');
+                await fillPropertyInput({
+                    configurationPanel,
+                    propertyLabel: 'numberPrecision property',
+                    value: '1.1234',
+                });
             });
 
             await test.step('Assert validation error', async () => {
@@ -310,7 +358,11 @@ test.describe('Property validation - numeric', () => {
 
         test('should not show validation error when decimal places are within numberPrecision', async () => {
             await test.step('Enter value within number precision', async () => {
-                await fillPropertyInput(configurationPanel, 'numberPrecision property', '1.123');
+                await fillPropertyInput({
+                    configurationPanel,
+                    propertyLabel: 'numberPrecision property',
+                    value: '1.123',
+                });
             });
 
             await test.step('Assert no validation error', async () => {
diff --git a/client/test/playwright/utils/propertyValidationUtils.ts b/client/test/playwright/utils/propertyValidationUtils.ts
index 8cab06dc021..7340373a1d8 100644
--- a/client/test/playwright/utils/propertyValidationUtils.ts
+++ b/client/test/playwright/utils/propertyValidationUtils.ts
@@ -1,15 +1,25 @@
-import {expect, type Locator, type Page} from '@playwright/test';
+import {type Locator, type Page, expect} from '@playwright/test';
 
 import {WorkflowPage} from '../pages/workflowPage';
 import {clickAndExpectToBeVisible} from './clickAndExpectToBeVisible';
 
-export async function fillPropertyInput(
-    configurationPanel: Locator,
-    propertyLabel: string,
-    value: string
-): Promise<void> {
+interface FillPropertyInputProps {
+    configurationPanel: Locator;
+    inputRole?: 'textbox' | 'spinbutton';
+    propertyLabel: string;
+    value: string;
+}
+
+export async function fillPropertyInput({
+    configurationPanel,
+    inputRole = 'textbox',
+    propertyLabel,
+    value,
+}: FillPropertyInputProps): Promise<void> {
     const property = configurationPanel.getByLabel(propertyLabel);
-    const input = property.getByRole('textbox');
+
+    const input = property.getByRole(inputRole);
+
     await input.clear();
     await input.fill(value);
 }
@@ -20,7 +30,9 @@ export async function assertPropertyValidation(
     expectedError?: string
 ): Promise<void> {
     const property = configurationPanel.getByLabel(propertyLabel);
+
     const alert = property.locator('[role="alert"]');
+
     if (expectedError !== undefined) {
         await expect(alert).toBeVisible();
         await expect(alert).toHaveText(expectedError);

From 5f806bac9a3cbebf489fa818cfb94a868479d3ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kre=C5=A1imir=20=C4=8Coko?= <kresimircoko@gmail.com>
Date: Tue, 5 May 2026 17:20:50 +0200
Subject: [PATCH 4/4] 4878 - fix DeployButton spacing when project hasnt been
 published yet

---
 .../project-header/components/DeployButton.tsx         | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/src/pages/automation/project/components/project-header/components/DeployButton.tsx b/client/src/pages/automation/project/components/project-header/components/DeployButton.tsx
index 0c2f382f592..ed843785092 100644
--- a/client/src/pages/automation/project/components/project-header/components/DeployButton.tsx
+++ b/client/src/pages/automation/project/components/project-header/components/DeployButton.tsx
@@ -34,8 +34,14 @@ const DeployButton = ({project}: {project: Project}) => {
         return (
             <Tooltip>
                 <TooltipTrigger asChild>
-                    <span className="ml-2 inline-flex">
-                        <Button disabled icon={<RocketIcon />} label="Deploy" variant="outline" />
+                    <span className="inline-flex">
+                        <Button
+                            className="rounded-l-none border-l-0"
+                            disabled
+                            icon={<RocketIcon />}
+                            label="Deploy"
+                            variant="outline"
+                        />
                     </span>
                 </TooltipTrigger>