Merge pull request #622 from airtai/dev

Fix form resume flow
airtai · Aug 5, 2024 · 7497602 · 7497602
2 parents 887fe10 + 5fb9d7e
commit 7497602
Show file tree

Hide file tree

Showing 11 changed files with 282 additions and 24 deletions.
diff --git a/app/src/client/components/DynamicFormBuilder.tsx b/app/src/client/components/DynamicFormBuilder.tsx
@@ -17,14 +17,15 @@ const DynamicFormBuilder: React.FC<DynamicFormBuilderProps> = ({
   jsonSchema,
   validationURL,
   updateExistingModel,
+  resumeFormData,
   onSuccessCallback,
   onCancelCallback,
   onDeleteCallback,
   handleAddProperty,
 }) => {
   const { formData, handleChange, formErrors, setFormErrors } = useForm({
     jsonSchema,
-    defaultValues: updateExistingModel,
+    defaultValues: resumeFormData ? resumeFormData : updateExistingModel,
   });
 
   const {
@@ -46,6 +47,7 @@ const DynamicFormBuilder: React.FC<DynamicFormBuilderProps> = ({
     jsonSchema,
     allUserProperties,
     updateExistingModel,
+    resumeFormData,
   });
 
   const cancelButtonRef = useRef<HTMLButtonElement>(null);
@@ -82,6 +84,7 @@ const DynamicFormBuilder: React.FC<DynamicFormBuilderProps> = ({
         isLoading={isLoading}
         handleAddProperty={addProperty}
         updateExistingModel={updateExistingModel}
+        resumeFormData={resumeFormData}
         handleSubmit={onSubmit}
         instructionForDeployment={instructionForDeployment}
         onCancelCallback={onCancelCallback}

diff --git a/app/src/client/components/ModelForm.tsx b/app/src/client/components/ModelForm.tsx
@@ -12,6 +12,7 @@ interface ModelFormProps {
   data: SchemaCategory;
   selectedModel: string;
   updateExistingModel: SelectedModelSchema | null;
+  resumeFormData: SelectedModelSchema | null;
   propertyHeader: string;
   onModelChange: (model: string) => void;
   onSuccessCallback: (data: any) => void;
@@ -25,6 +26,7 @@ const ModelForm: React.FC<ModelFormProps> = ({
   data,
   selectedModel,
   updateExistingModel,
+  resumeFormData,
   propertyHeader,
   onModelChange,
   onSuccessCallback,
@@ -56,6 +58,7 @@ const ModelForm: React.FC<ModelFormProps> = ({
               jsonSchema={initialModelSchema}
               validationURL={validationURL}
               updateExistingModel={updateExistingModel ?? null}
+              resumeFormData={resumeFormData ?? null}
               onSuccessCallback={onSuccessCallback}
               onCancelCallback={onCancelCallback}
               onDeleteCallback={onDeleteCallback}

diff --git a/app/src/client/components/buildPage/UserPropertyHandler.tsx b/app/src/client/components/buildPage/UserPropertyHandler.tsx
@@ -20,6 +20,7 @@ import { FormDataStackItem, Props } from './types';
 import { FORM_DATA_STORAGE_KEY } from './utils';
 import { getTargetModel, storeFormData } from './utils';
 import useDetectRefresh from './useDetectRefresh';
+import { SelectedModelSchema } from '../../interfaces/BuildPageInterfaces';
 
 const UserPropertyHandler = ({ data, togglePropertyList }: Props) => {
   const history = useHistory();
@@ -28,8 +29,8 @@ const UserPropertyHandler = ({ data, togglePropertyList }: Props) => {
   const [selectedModel, setSelectedModel] = useState(data.schemas[0].name);
   const [notificationErrorMessage, setNotificationErrorMessage] = useState<string | null>(null);
   const { data: allUserProperties, refetch: refetchModels, isLoading: getModelsIsLoading } = useQuery(getModels);
-  const { updateExistingModel, setUpdateExistingModel, targetModelToAdd, handleFormResume } =
-    useFormDataStack(setShowAddModel);
+  const [updateExistingModel, setUpdateExistingModel] = useState<SelectedModelSchema | null>(null);
+  const { resumeFormData, setResumeFormData, targetModelToAdd, handleFormResume } = useFormDataStack(setShowAddModel);
 
   const propertyName = data.name;
 
@@ -100,7 +101,7 @@ const UserPropertyHandler = ({ data, togglePropertyList }: Props) => {
       const currentItem = formDataStack[formDataStack.length - 1];
       const nextRoute = `/build/${currentItem.source.propertyName}`;
       // @ts-ignore
-      setUpdateExistingModel(currentItem.formData);
+      setResumeFormData(currentItem.formData);
       targetModelToAdd.current = currentItem.formData.uuid ? null : currentItem.source.selectedModel;
 
       formDataStack.pop();
@@ -111,6 +112,8 @@ const UserPropertyHandler = ({ data, togglePropertyList }: Props) => {
       }
     } else {
       setShowAddModel(false);
+      setResumeFormData(null);
+      targetModelToAdd.current = null;
     }
   };
 
@@ -203,6 +206,7 @@ const UserPropertyHandler = ({ data, togglePropertyList }: Props) => {
                     data={data}
                     selectedModel={selectedModel}
                     updateExistingModel={updateExistingModel}
+                    resumeFormData={resumeFormData}
                     propertyHeader={propertyHeader}
                     onModelChange={handleModelChange}
                     onSuccessCallback={onSuccessCallback}

diff --git a/app/src/client/components/buildPage/useFormDataStack.ts b/app/src/client/components/buildPage/useFormDataStack.ts
@@ -5,7 +5,7 @@ import { SelectedModelSchema } from '../../interfaces/BuildPageInterfaces';
 
 export const useFormDataStack = (setShowAddModel: React.Dispatch<React.SetStateAction<boolean>>) => {
   const history = useHistory();
-  const [updateExistingModel, setUpdateExistingModel] = useState<SelectedModelSchema | null>(null);
+  const [resumeFormData, setResumeFormData] = useState<SelectedModelSchema | null>(null);
   const targetModelToAdd = useRef<string | null>(null);
 
   const handleFormResume = (filteredData: any) => {
@@ -14,20 +14,24 @@ export const useFormDataStack = (setShowAddModel: React.Dispatch<React.SetStateA
     if (currentItem) {
       setShowAddModel(true);
       // @ts-ignore
-      setUpdateExistingModel(currentItem.formData);
+      setResumeFormData(currentItem.formData);
       targetModelToAdd.current = currentItem.formData.uuid ? null : currentItem.source.selectedModel;
 
       sessionStorage.setItem(FORM_DATA_STORAGE_KEY, JSON.stringify(updatedStack));
 
       if (nextRoute) {
         history.push(nextRoute);
       }
+    } else {
+      setShowAddModel(false);
+      setResumeFormData(null);
+      targetModelToAdd.current = null;
     }
   };
 
   return {
-    updateExistingModel,
-    setUpdateExistingModel,
+    resumeFormData,
+    setResumeFormData,
     targetModelToAdd,
     handleFormResume,
   };

diff --git a/app/src/client/components/form/DynamicForm.tsx b/app/src/client/components/form/DynamicForm.tsx
@@ -4,7 +4,7 @@ import { TextInput } from './TextInput';
 import { SelectInput } from './SelectInput';
 import { TextArea } from './TextArea';
 import { SECRETS_TO_MASK } from '../../utils/constants';
-import { JsonSchema } from '../../interfaces/BuildPageInterfaces';
+import { JsonSchema, SelectedModelSchema } from '../../interfaces/BuildPageInterfaces';
 import { FormData } from '../../hooks/useForm';
 import AgentConversationHistory from '../AgentConversationHistory';
 
@@ -16,7 +16,8 @@ interface DynamicFormProps {
   refValues: Record<string, any>;
   isLoading: boolean;
   handleAddProperty: (property_type: string, key: string) => void;
-  updateExistingModel: any;
+  updateExistingModel: SelectedModelSchema | null;
+  resumeFormData: SelectedModelSchema | null;
   handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
   instructionForDeployment: Record<string, string> | null;
   onCancelCallback: (event: React.FormEvent) => void;
@@ -33,6 +34,7 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
   isLoading,
   handleAddProperty,
   updateExistingModel,
+  resumeFormData,
   handleSubmit,
   instructionForDeployment,
   onCancelCallback,
@@ -76,6 +78,7 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
                 handleAddProperty={(property_type) => handleAddProperty(property_type, key)}
                 isRequired={isRequired}
                 updateExistingModel={updateExistingModel}
+                resumeFormData={resumeFormData}
               />
             ) : key === 'system_message' ? (
               <TextArea

diff --git a/app/src/client/components/form/SelectInput.tsx b/app/src/client/components/form/SelectInput.tsx
@@ -20,6 +20,7 @@ interface SelectInputProps {
   handleAddProperty?: (propertyType: string) => void;
   isRequired: boolean;
   updateExistingModel?: any;
+  resumeFormData?: any;
 }
 
 const generateLabel = (option: string): string =>
@@ -76,6 +77,7 @@ export const SelectInput: React.FC<SelectInputProps> = ({
   handleAddProperty,
   isRequired,
   updateExistingModel = null,
+  resumeFormData = null,
 }) => {
   const selectOptions = useMemo(
     () => getSelectOptions(options, propertyTypes, isRequired),
@@ -86,14 +88,25 @@ export const SelectInput: React.FC<SelectInputProps> = ({
 
   const getInitialValue = (): SelectOption | null => {
     if (!propertyTypes) {
-      return selectOptions.length > 0 ? selectOptions[0] : null;
+      const dataToCheck = resumeFormData ? resumeFormData : updateExistingModel;
+      return selectOptions.length > 0
+        ? dataToCheck
+          ? { value: dataToCheck[id], label: dataToCheck[id] }
+          : selectOptions[0]
+        : null;
     }
 
-    if (!updateExistingModel) {
+    if (!updateExistingModel && !resumeFormData) {
       return isRequired && selectOptions.length > 1 ? selectOptions[0] : null;
     }
 
-    return isRequired || updateExistingModel[id] !== null ? (selectOptions.length > 1 ? selectOptions[0] : null) : null;
+    const dataToCheck = resumeFormData ? resumeFormData : updateExistingModel;
+
+    return isRequired || (dataToCheck[id] !== null && dataToCheck[id] !== '')
+      ? selectOptions.length > 1
+        ? selectOptions[0]
+        : null
+      : null;
   };
 
   const [defaultValue, setDefaultValue] = useState<SelectOption | null>(getInitialValue());

diff --git a/app/src/client/hooks/usePropertyReferenceValues.ts b/app/src/client/hooks/usePropertyReferenceValues.ts
@@ -13,12 +13,14 @@ interface UsePropertyReferenceValuesProps {
   jsonSchema: JsonSchema | null;
   allUserProperties: any;
   updateExistingModel: SelectedModelSchema | null;
+  resumeFormData: SelectedModelSchema | null;
 }
 
 export const usePropertyReferenceValues = ({
   jsonSchema,
   allUserProperties,
   updateExistingModel,
+  resumeFormData,
 }: UsePropertyReferenceValuesProps) => {
   const [refValues, setRefValues] = useState<Record<string, any>>({});
 
@@ -35,8 +37,8 @@ export const usePropertyReferenceValues = ({
         const title: string = property.hasOwnProperty('title') ? property.title || '' : key;
         const propertyRefs = propertyHasRef ? [property['$ref']] : getAllRefs(property);
         const matchedProperties = matchPropertiesToRefs(allUserProperties, propertyRefs);
-
-        const selectedModelRefValues = _.get(updateExistingModel, key, null);
+        const dataToCheck = resumeFormData ? resumeFormData : updateExistingModel;
+        const selectedModelRefValues = _.get(dataToCheck, key, null);
         const htmlSchema = constructHTMLSchema(matchedProperties, title, property, selectedModelRefValues);
         const propertyTypes = getPropertyTypes(propertyRefs, jsonSchema.$defs);
         const isRequired = _.includes(jsonSchema.required, key);

diff --git a/app/src/client/interfaces/DynamicFormBuilderInterface.ts b/app/src/client/interfaces/DynamicFormBuilderInterface.ts
@@ -7,6 +7,7 @@ export interface DynamicFormBuilderProps {
   jsonSchema: JsonSchema;
   validationURL: string;
   updateExistingModel: SelectedModelSchema | null;
+  resumeFormData: SelectedModelSchema | null;
   onSuccessCallback: (data: any) => void;
   onCancelCallback: (event: React.FormEvent) => void;
   onDeleteCallback: (data: any) => void;

diff --git a/app/src/client/tests/DynamicFormBuilder.test.tsx b/app/src/client/tests/DynamicFormBuilder.test.tsx
@@ -87,6 +87,7 @@ describe('DynamicFormBuilder', () => {
         jsonSchema={jsonSchema}
         validationURL='https://some-domain/some-route'
         updateExistingModel={null}
+        resumeFormData={null}
         onSuccessCallback={vi.fn()}
         onCancelCallback={vi.fn()}
         onDeleteCallback={vi.fn()}
@@ -106,6 +107,7 @@ describe('DynamicFormBuilder', () => {
         jsonSchema={jsonSchema}
         validationURL='https://some-domain/some-route'
         updateExistingModel={updateExistingModel}
+        resumeFormData={null}
         onSuccessCallback={vi.fn()}
         onCancelCallback={vi.fn()}
         onDeleteCallback={vi.fn()}
@@ -125,6 +127,7 @@ describe('DynamicFormBuilder', () => {
         jsonSchema={jsonSchema}
         validationURL='https://some-domain/some-route'
         updateExistingModel={updateExistingModel}
+        resumeFormData={null}
         onSuccessCallback={onSuccessCallback}
         onCancelCallback={vi.fn()}
         onDeleteCallback={vi.fn()}
@@ -165,6 +168,7 @@ describe('DynamicFormBuilder', () => {
         jsonSchema={jsonSchema}
         validationURL='https://some-domain/some-route'
         updateExistingModel={updateExistingModel}
+        resumeFormData={null}
         onSuccessCallback={onSuccessCallback}
         onCancelCallback={vi.fn()}
         onDeleteCallback={vi.fn()}
@@ -189,6 +193,7 @@ describe('DynamicFormBuilder', () => {
         jsonSchema={jsonSchema}
         validationURL='https://some-domain/some-route'
         updateExistingModel={null}
+        resumeFormData={null}
         onSuccessCallback={vi.fn()}
         onCancelCallback={vi.fn()}
         onDeleteCallback={vi.fn()}