From 6573b47a1e6462a2306e43c666cabe0b64144578 Mon Sep 17 00:00:00 2001
From: Harish Mohan Raj <harish@airt.ai>
Date: Wed, 22 May 2024 10:11:04 +0530
Subject: [PATCH] Max consecutive auto reply values are not properly displayed
 in the UI (#216)

* Don't delete a property if it's used buy someother property

* Don't show auto reply button while showing retry chat button

* WIP: Show numeric stepper input for max consecutive auto reply

* Show numeric stepper input for max consecutive auto reply

* Show numeric stepper input for max consecutive auto reply

* Update error message
---
 app/src/client/app/BuildPage.tsx              |   2 +-
 .../client/components/DynamicFormBuilder.tsx  |  24 +-
 .../buildPage/UserPropertyHandler.tsx         |   2 +-
 .../form/NumericStepperWithClearButton.tsx    |  59 ++++
 app/src/client/hooks/useForm.ts               |  13 +-
 .../NumericStepperWithClearButton.test.tsx    |  45 +++
 app/src/client/tests/buildPageUtils.test.ts   | 321 ++++++++++++++++++
 app/src/client/utils/buildPageUtils.ts        |  45 ++-
 8 files changed, 488 insertions(+), 23 deletions(-)
 create mode 100644 app/src/client/components/form/NumericStepperWithClearButton.tsx
 create mode 100644 app/src/client/tests/NumericStepperWithClearButton.test.tsx

diff --git a/app/src/client/app/BuildPage.tsx b/app/src/client/app/BuildPage.tsx
index 96152990..59330cee 100644
--- a/app/src/client/app/BuildPage.tsx
+++ b/app/src/client/app/BuildPage.tsx
@@ -114,7 +114,7 @@ const BuildPage = ({ user }: BuildPageProps) => {
 
   const wrapperClass = document.body.classList.contains('server-error')
     ? 'h-[calc(100vh-173px)]'
-    : 'h-[calc(100vh-88px)]';
+    : 'h-[calc(100vh-80px)]';
 
   const history = useHistory();
   useEffect(() => {
diff --git a/app/src/client/components/DynamicFormBuilder.tsx b/app/src/client/components/DynamicFormBuilder.tsx
index 65e82856..26a8c261 100644
--- a/app/src/client/components/DynamicFormBuilder.tsx
+++ b/app/src/client/components/DynamicFormBuilder.tsx
@@ -22,6 +22,7 @@ import {
   checkForDependency,
 } from '../utils/buildPageUtils';
 import { set } from 'zod';
+import { NumericStepperWithClearButton } from './form/NumericStepperWithClearButton';
 
 interface DynamicFormBuilderProps {
   allUserProperties: any;
@@ -147,12 +148,23 @@ const DynamicFormBuilder: React.FC<DynamicFormBuilderProps> = ({
             <div key={key} className='w-full mt-2'>
               <label htmlFor={key}>{formElementsObject.title}</label>
               {formElementsObject.enum ? (
-                <SelectInput
-                  id={key}
-                  value={inputValue}
-                  options={formElementsObject.enum}
-                  onChange={(value) => handleChange(key, value)}
-                />
+                formElementsObject.type === 'numericStepperWithClearButton' ? (
+                  <div>
+                    <NumericStepperWithClearButton
+                      id={key}
+                      value={inputValue}
+                      formElementObject={formElementsObject}
+                      onChange={(value) => handleChange(key, value)}
+                    />
+                  </div>
+                ) : (
+                  <SelectInput
+                    id={key}
+                    value={inputValue}
+                    options={formElementsObject.enum}
+                    onChange={(value) => handleChange(key, value)}
+                  />
+                )
               ) : key === 'system_message' ? (
                 <TextArea
                   id={key}
diff --git a/app/src/client/components/buildPage/UserPropertyHandler.tsx b/app/src/client/components/buildPage/UserPropertyHandler.tsx
index 117b318b..c610ac17 100644
--- a/app/src/client/components/buildPage/UserPropertyHandler.tsx
+++ b/app/src/client/components/buildPage/UserPropertyHandler.tsx
@@ -93,7 +93,7 @@ const UserPropertyHandler = ({ data }: SecretsProps) => {
           if (propertyName !== '') {
             const currentPropertyName = _.has(updateExistingModel, 'name') ? updateExistingModel.name : '';
             setNotificationErrorMessage(
-              `Oops! You can't delete '${currentPropertyName}' because it's being used in '${propertyName}'.`
+              `Oops! You can't delete '${currentPropertyName}' because it's being used by '${propertyName}'.`
             );
           } else {
             await deleteUserModels({ uuid: updateExistingModel.uuid, type_name: updateExistingModel.type_name });
diff --git a/app/src/client/components/form/NumericStepperWithClearButton.tsx b/app/src/client/components/form/NumericStepperWithClearButton.tsx
new file mode 100644
index 00000000..4041914c
--- /dev/null
+++ b/app/src/client/components/form/NumericStepperWithClearButton.tsx
@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+
+interface formElementObjectValues {
+  default?: string;
+  description?: string;
+  enum?: string[];
+  title?: string;
+  type?: string;
+}
+
+interface NumericStepperWithClearButtonProps {
+  id: string;
+  formElementObject?: formElementObjectValues;
+  value: number; // Pass the current value as a prop
+  onChange: (value: number | null) => void; // Prop to handle value changes
+}
+
+export const NumericStepperWithClearButton: React.FC<NumericStepperWithClearButtonProps> = ({
+  id,
+  formElementObject,
+  value,
+  onChange,
+}) => {
+  const [inputValue, setInputValue] = useState<number | null>(value);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const targetValue = e.target.value;
+    const newValue = targetValue === '' ? null : parseInt(e.target.value, 10);
+    setInputValue(newValue);
+    onChange(newValue); // Call parent onChange with new value
+  };
+
+  const handleClear = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    setInputValue(null); // Clear the local input
+    onChange(null); // Pass the empty string to parent onChange
+  };
+
+  return (
+    <div className='flex gap-4'>
+      <input
+        className='my-2 p-2 border rounded w-full'
+        type='number'
+        data-testid='numeric-stepper'
+        id={id}
+        placeholder={`${formElementObject?.description}. Enter a number or 'Clear' to use the default value 'None'.`}
+        value={inputValue ? inputValue : ''}
+        onChange={handleChange}
+        min='1'
+      />
+      <button
+        onClick={handleClear}
+        className='rounded-md my-2 px-3.5 py-2.5 text-sm bg-airt-primary text-airt-font-base hover:bg-opacity-85 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
+      >
+        Clear
+      </button>
+    </div>
+  );
+};
diff --git a/app/src/client/hooks/useForm.ts b/app/src/client/hooks/useForm.ts
index fda7531d..a91721b6 100644
--- a/app/src/client/hooks/useForm.ts
+++ b/app/src/client/hooks/useForm.ts
@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import _ from 'lodash';
 import { JsonSchema, SelectedModelSchema } from '../interfaces/BuildPageInterfaces';
 
 interface UseFormProps {
@@ -34,7 +35,17 @@ export const useForm = ({ jsonSchema, defaultValues }: UseFormProps) => {
         if (property.enum && property.enum.length === 1) {
           initialFormData[key] = property.enum[0]; // Auto-set single enum value
         } else {
-          initialFormData[key] = property.default ?? ''; // Use default or empty string if no default
+          if (
+            _.has(property, 'anyOf') &&
+            _.isEqual(
+              _.map(property.anyOf, (o: any) => o.type),
+              ['integer', 'null']
+            )
+          ) {
+            initialFormData[key] = null;
+          } else {
+            initialFormData[key] = property.default ?? ''; // Use default or empty string if no default
+          }
         }
       }
     });
diff --git a/app/src/client/tests/NumericStepperWithClearButton.test.tsx b/app/src/client/tests/NumericStepperWithClearButton.test.tsx
new file mode 100644
index 00000000..a0cd7688
--- /dev/null
+++ b/app/src/client/tests/NumericStepperWithClearButton.test.tsx
@@ -0,0 +1,45 @@
+import { describe, test, expect, vi } from 'vitest';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { NumericStepperWithClearButton } from '../components/form/NumericStepperWithClearButton';
+
+const renderNumericStepper = (value: any, onChange: any, formElementObject = {}) => {
+  return render(
+    <NumericStepperWithClearButton
+      id='test-numeric-stepper'
+      value={value}
+      onChange={onChange}
+      formElementObject={formElementObject}
+    />
+  );
+};
+
+describe('NumericStepperWithClearButton', () => {
+  test('renders and updates value on user interaction with complex formElementObject', () => {
+    const mockChangeHandler = vi.fn();
+    const formElementObject = {
+      default: '10',
+      description: 'Age',
+      enum: ['5', '10', '15'],
+      title: 'Select Age',
+      type: 'number',
+    };
+
+    const { getByPlaceholderText } = renderNumericStepper(5, mockChangeHandler, formElementObject);
+
+    // Check if component renders with correct placeholder based on description and default value
+    const placeholderText = "Age. Enter a number or 'Clear' to use the default value 'None'.";
+    expect(getByPlaceholderText(placeholderText)).toBeInTheDocument();
+
+    // Simulate user changing value
+    const input = screen.getByTestId('numeric-stepper');
+    fireEvent.change(input, { target: { value: '15' } });
+    expect(mockChangeHandler).toHaveBeenCalledWith(15);
+    expect(input).toHaveValue(15);
+
+    // Test clear functionality
+    const button = screen.getByRole('button', { name: 'Clear' });
+    fireEvent.click(button);
+    expect(mockChangeHandler).toHaveBeenCalledWith(null);
+    expect(input).toHaveValue(null);
+  });
+});
diff --git a/app/src/client/tests/buildPageUtils.test.ts b/app/src/client/tests/buildPageUtils.test.ts
index a8bbe691..05d51fa2 100644
--- a/app/src/client/tests/buildPageUtils.test.ts
+++ b/app/src/client/tests/buildPageUtils.test.ts
@@ -838,6 +838,57 @@ describe('buildPageUtils', () => {
       const actual = constructHTMLSchema(input, title, property, null);
       expect(_.isEqual(actual, expected)).toBe(true);
     });
+    test('constructHTMLSchema - Numeric stepper with clear button', () => {
+      const expected = {
+        default: 'None',
+        description: 'The maximum number of consecutive auto-replies the agent can make',
+        enum: ['None'],
+        title: 'Max Consecutive Auto Reply',
+        type: 'numericStepperWithClearButton',
+      };
+      const property = {
+        anyOf: [
+          {
+            type: 'integer',
+          },
+          {
+            type: 'null',
+          },
+        ],
+        default: null,
+        description: 'The maximum number of consecutive auto-replies the agent can make',
+        title: 'Max Consecutive Auto Reply',
+      };
+      const title = 'Max Consecutive Auto Reply';
+      const actual = constructHTMLSchema([], title, property, null);
+      expect(_.isEqual(actual, expected)).toBe(true);
+    });
+    test('constructHTMLSchema - Numeric stepper - editing existing model', () => {
+      const expected = {
+        default: 5,
+        description: 'The maximum number of consecutive auto-replies the agent can make',
+        enum: ['None'],
+        title: 'Max Consecutive Auto Reply',
+        type: 'numericStepperWithClearButton',
+      };
+      const property = {
+        anyOf: [
+          {
+            type: 'integer',
+          },
+          {
+            type: 'null',
+          },
+        ],
+        default: null,
+        description: 'The maximum number of consecutive auto-replies the agent can make',
+        title: 'Max Consecutive Auto Reply',
+      };
+      const title = 'Max Consecutive Auto Reply';
+      const selectedModelRefValues = 5;
+      const actual = constructHTMLSchema([], title, property, selectedModelRefValues);
+      expect(_.isEqual(actual, expected)).toBe(true);
+    });
   });
   describe('getFormSubmitValues', () => {
     test('getFormSubmitValues - without refs', () => {
@@ -928,6 +979,237 @@ describe('buildPageUtils', () => {
       const actual = getFormSubmitValues(refValues, formData);
       expect(actual).toEqual(expected);
     });
+
+    test('getFormSubmitValues - with numeric stepper', () => {
+      const refValues = {
+        llm: {
+          htmlSchema: {
+            default: 'Dev Azure llm',
+            description: '',
+            enum: ['Dev Azure llm'],
+            title: 'LLM',
+            type: 'string',
+          },
+          refUserProperties: [
+            {
+              uuid: '25427d4f-d48f-430e-9d0b-b15b20619b01',
+              user_uuid: 'ff2bb5ec-c769-40f2-8613-b44d792cb690',
+              type_name: 'llm',
+              model_name: 'AzureOAI',
+              json_str: {
+                name: 'Dev Azure llm',
+                model: 'gpt-35-turbo-16k',
+                api_key: {
+                  name: 'AzureOAIAPIKey',
+                  type: 'secret',
+                  uuid: '621ee18b-2f0d-4dde-9c72-e3cc8a23bccb',
+                },
+                api_type: 'azure',
+                base_url: 'https://staging-airt-openai-france.openai.azure.com',
+                api_version: '2024-02-15-preview',
+              },
+              created_at: '2024-05-17T12:43:28.579000Z',
+              updated_at: '2024-05-17T12:43:28.579000Z',
+            },
+          ],
+        },
+        max_consecutive_auto_reply: {
+          htmlSchema: {
+            default: 'None',
+            description: 'The maximum number of consecutive auto-replies the agent can make',
+            enum: ['None'],
+            title: 'Max Consecutive Auto Reply',
+            type: 'numericStepperWithClearButton',
+          },
+          refUserProperties: [],
+        },
+      };
+      const formData = {
+        name: 'Hello',
+        llm: '',
+        max_consecutive_auto_reply: 100,
+      };
+      const expected = {
+        name: 'Hello',
+        llm: {
+          uuid: '25427d4f-d48f-430e-9d0b-b15b20619b01',
+          user_uuid: 'ff2bb5ec-c769-40f2-8613-b44d792cb690',
+          type_name: 'llm',
+          model_name: 'AzureOAI',
+          json_str: {
+            name: 'Dev Azure llm',
+            model: 'gpt-35-turbo-16k',
+            api_key: {
+              name: 'AzureOAIAPIKey',
+              type: 'secret',
+              uuid: '621ee18b-2f0d-4dde-9c72-e3cc8a23bccb',
+            },
+            api_type: 'azure',
+            base_url: 'https://staging-airt-openai-france.openai.azure.com',
+            api_version: '2024-02-15-preview',
+          },
+          created_at: '2024-05-17T12:43:28.579000Z',
+          updated_at: '2024-05-17T12:43:28.579000Z',
+        },
+        max_consecutive_auto_reply: 100,
+      };
+      const actual = getFormSubmitValues(refValues, formData);
+      expect(actual).toEqual(expected);
+    });
+
+    test('getFormSubmitValues - with numeric stepper with null value', () => {
+      const refValues = {
+        llm: {
+          htmlSchema: {
+            default: 'Dev Azure llm',
+            description: '',
+            enum: ['Dev Azure llm'],
+            title: 'LLM',
+            type: 'string',
+          },
+          refUserProperties: [
+            {
+              uuid: '25427d4f-d48f-430e-9d0b-b15b20619b01',
+              user_uuid: 'ff2bb5ec-c769-40f2-8613-b44d792cb690',
+              type_name: 'llm',
+              model_name: 'AzureOAI',
+              json_str: {
+                name: 'Dev Azure llm',
+                model: 'gpt-35-turbo-16k',
+                api_key: {
+                  name: 'AzureOAIAPIKey',
+                  type: 'secret',
+                  uuid: '621ee18b-2f0d-4dde-9c72-e3cc8a23bccb',
+                },
+                api_type: 'azure',
+                base_url: 'https://staging-airt-openai-france.openai.azure.com',
+                api_version: '2024-02-15-preview',
+              },
+              created_at: '2024-05-17T12:43:28.579000Z',
+              updated_at: '2024-05-17T12:43:28.579000Z',
+            },
+          ],
+        },
+        max_consecutive_auto_reply: {
+          htmlSchema: {
+            default: 'None',
+            description: 'The maximum number of consecutive auto-replies the agent can make',
+            enum: ['None'],
+            title: 'Max Consecutive Auto Reply',
+            type: 'numericStepperWithClearButton',
+          },
+          refUserProperties: [],
+        },
+      };
+      const formData = {
+        name: 'Hello',
+        llm: '',
+        max_consecutive_auto_reply: undefined,
+      };
+      const expected = {
+        name: 'Hello',
+        llm: {
+          uuid: '25427d4f-d48f-430e-9d0b-b15b20619b01',
+          user_uuid: 'ff2bb5ec-c769-40f2-8613-b44d792cb690',
+          type_name: 'llm',
+          model_name: 'AzureOAI',
+          json_str: {
+            name: 'Dev Azure llm',
+            model: 'gpt-35-turbo-16k',
+            api_key: {
+              name: 'AzureOAIAPIKey',
+              type: 'secret',
+              uuid: '621ee18b-2f0d-4dde-9c72-e3cc8a23bccb',
+            },
+            api_type: 'azure',
+            base_url: 'https://staging-airt-openai-france.openai.azure.com',
+            api_version: '2024-02-15-preview',
+          },
+          created_at: '2024-05-17T12:43:28.579000Z',
+          updated_at: '2024-05-17T12:43:28.579000Z',
+        },
+        max_consecutive_auto_reply: undefined,
+      };
+      const actual = getFormSubmitValues(refValues, formData);
+      expect(actual).toEqual(expected);
+    });
+
+    test('getFormSubmitValues - with numeric stepper - update existing record', () => {
+      const refValues = {
+        llm: {
+          htmlSchema: {
+            default: 'Dev Azure llm',
+            description: '',
+            enum: ['Dev Azure llm'],
+            title: 'LLM',
+            type: 'string',
+          },
+          refUserProperties: [
+            {
+              uuid: '25427d4f-d48f-430e-9d0b-b15b20619b01',
+              user_uuid: 'ff2bb5ec-c769-40f2-8613-b44d792cb690',
+              type_name: 'llm',
+              model_name: 'AzureOAI',
+              json_str: {
+                name: 'Dev Azure llm',
+                model: 'gpt-35-turbo-16k',
+                api_key: {
+                  name: 'AzureOAIAPIKey',
+                  type: 'secret',
+                  uuid: '621ee18b-2f0d-4dde-9c72-e3cc8a23bccb',
+                },
+                api_type: 'azure',
+                base_url: 'https://staging-airt-openai-france.openai.azure.com',
+                api_version: '2024-02-15-preview',
+              },
+              created_at: '2024-05-17T12:43:28.579000Z',
+              updated_at: '2024-05-17T12:43:28.579000Z',
+            },
+          ],
+        },
+        max_consecutive_auto_reply: {
+          htmlSchema: {
+            default: 1000,
+            description: 'The maximum number of consecutive auto-replies the agent can make',
+            enum: ['None'],
+            title: 'Max Consecutive Auto Reply',
+            type: 'numericStepperWithClearButton',
+          },
+          refUserProperties: [],
+        },
+      };
+      const formData = {
+        name: 'Hello',
+        llm: '',
+        max_consecutive_auto_reply: null,
+      };
+      const expected = {
+        name: 'Hello',
+        llm: {
+          uuid: '25427d4f-d48f-430e-9d0b-b15b20619b01',
+          user_uuid: 'ff2bb5ec-c769-40f2-8613-b44d792cb690',
+          type_name: 'llm',
+          model_name: 'AzureOAI',
+          json_str: {
+            name: 'Dev Azure llm',
+            model: 'gpt-35-turbo-16k',
+            api_key: {
+              name: 'AzureOAIAPIKey',
+              type: 'secret',
+              uuid: '621ee18b-2f0d-4dde-9c72-e3cc8a23bccb',
+            },
+            api_type: 'azure',
+            base_url: 'https://staging-airt-openai-france.openai.azure.com',
+            api_version: '2024-02-15-preview',
+          },
+          created_at: '2024-05-17T12:43:28.579000Z',
+          updated_at: '2024-05-17T12:43:28.579000Z',
+        },
+        max_consecutive_auto_reply: undefined,
+      };
+      const actual = getFormSubmitValues(refValues, formData);
+      expect(actual).toEqual(expected);
+    });
   });
   describe('isDependencyAvailable', () => {
     test('isDependencyNotCreated - positive case - without dependencies', () => {
@@ -1402,7 +1684,46 @@ describe('buildPageUtils', () => {
       const actual = filterDataToValidate(input);
       expect(actual).toEqual(expected);
     });
+    test('filterDataToValidate - with reference and null userPropertyData', () => {
+      const input = {
+        name: 'q',
+        llm: {
+          uuid: '25427d4f-d48f-430e-9d0b-b15b20619b01',
+          user_uuid: 'ff2bb5ec-c769-40f2-8613-b44d792cb690',
+          type_name: 'llm',
+          model_name: 'AzureOAI',
+          json_str: {
+            name: 'Dev Azure llm',
+            model: 'gpt-35-turbo-16k',
+            api_key: { name: 'AzureOAIAPIKey', type: 'secret', uuid: '621ee18b-2f0d-4dde-9c72-e3cc8a23bccb' },
+            api_type: 'azure',
+            base_url: 'https://staging-airt-openai-france.openai.azure.com',
+            api_version: '2024-02-15-preview',
+          },
+          created_at: '2024-05-17T12:43:28.579000Z',
+          updated_at: '2024-05-17T12:43:28.579000Z',
+        },
+        max_consecutive_auto_reply: null,
+        uuid: 'c81fde03-757d-4e19-9aff-daf6ef234f21',
+        type_name: 'agent',
+        model_name: 'UserProxyAgent',
+      };
+      const expected = {
+        name: 'q',
+        llm: {
+          uuid: '25427d4f-d48f-430e-9d0b-b15b20619b01',
+          type: 'llm',
+          name: 'AzureOAI',
+        },
+        max_consecutive_auto_reply: null,
+        uuid: 'c81fde03-757d-4e19-9aff-daf6ef234f21',
+        type_name: 'agent',
+        model_name: 'UserProxyAgent',
+      };
 
+      const actual = filterDataToValidate(input);
+      expect(actual).toEqual(expected);
+    });
     test('filterDataToValidate - without reference userPropertyData', () => {
       const input = {
         name: 'Test multiagent model',
diff --git a/app/src/client/utils/buildPageUtils.ts b/app/src/client/utils/buildPageUtils.ts
index 440037ea..14a5025b 100644
--- a/app/src/client/utils/buildPageUtils.ts
+++ b/app/src/client/utils/buildPageUtils.ts
@@ -43,20 +43,23 @@ export const getDependenciesCreatedByUser = async (type_name: string): Promise<S
 };
 
 interface constructHTMLSchemaValues {
-  [key: string]: string[] | string;
+  [key: string]: string[] | string | number;
 }
 
 export const constructHTMLSchema = (
   propertyDependencies: SelectedModelSchema[],
   title: string,
   property: any,
-  selectedModelRefValues: null | object
+  selectedModelRefValues: null | number | object
 ): constructHTMLSchemaValues => {
   const capitalizeTitle = _.map(title.split('_'), capitalizeFirstLetter).join(' ');
   let properties = _.map(propertyDependencies, 'json_str.name');
-  let defaultValue: string;
+  let defaultValue: string | number;
   if (selectedModelRefValues) {
-    defaultValue = _.filter(propertyDependencies, ['uuid', (selectedModelRefValues as any).uuid])[0].json_str.name;
+    defaultValue =
+      typeof selectedModelRefValues === 'number'
+        ? selectedModelRefValues
+        : _.filter(propertyDependencies, ['uuid', (selectedModelRefValues as any).uuid])[0].json_str.name;
   } else {
     defaultValue = _.has(property, 'default')
       ? property.default === null
@@ -71,12 +74,21 @@ export const constructHTMLSchema = (
   } else {
     properties.unshift('None');
   }
+  const isIntegerOrNull =
+    propertyDependencies.length === 0 &&
+    _.isEqual(
+      _.map(property.anyOf, (o: any) => o.type),
+      ['integer', 'null']
+    );
+
+  const returnType = isIntegerOrNull ? 'numericStepperWithClearButton' : 'string';
+  const description = isIntegerOrNull ? property.description : '';
   return {
     default: defaultValue,
-    description: '',
+    description: description,
     enum: properties,
     title: capitalizeTitle,
-    type: 'string',
+    type: returnType,
   };
 };
 
@@ -125,13 +137,18 @@ export const getFormSubmitValues = (refValues: any, formData: any) => {
   }
   _.forEach(refKeys, function (key: string) {
     if (_.has(formData, key)) {
-      const selectedKey = formData[key]
-        ? formData[key] && typeof formData[key] === 'string'
-          ? formData[key]
-          : formData[key].json_str.name
-        : refValues[key].htmlSchema.default;
+      let selectedKey: string | number | undefined;
+      if (formData[key] === null) {
+        selectedKey = undefined;
+      } else {
+        selectedKey = formData[key]
+          ? formData[key] && (typeof formData[key] === 'string' || typeof formData[key] === 'number')
+            ? formData[key]
+            : formData[key].json_str.name
+          : refValues[key].htmlSchema.default;
+      }
       const selectedData = refValues[key].refUserProperties.find((data: any) => data.json_str.name === selectedKey);
-      newFormData[key] = selectedData;
+      newFormData[key] = typeof selectedKey === 'string' ? selectedData : selectedKey;
     }
   });
   return newFormData;
@@ -212,12 +229,12 @@ type dataObject = {
 
 type filterDataToValidateType = {
   uuid: string;
-  [key: string]: string | dataObject;
+  [key: string]: string | dataObject | null;
 };
 
 export function filterDataToValidate(data: filterDataToValidateType): filterDataToValidateType {
   return _.mapValues(data, function (o: string | dataObject) {
-    return typeof o === 'object' ? { uuid: o.uuid, type: o.type_name, name: o.model_name } : o;
+    return o !== null && typeof o === 'object' ? { uuid: o.uuid, type: o.type_name, name: o.model_name } : o;
   });
 }