WIP

app/src/client/app/BuildPage.tsx

@@ -8,7 +8,7 @@ import { useBuildPage } from '../hooks/useBuildPage';
 import CustomAuthRequiredLayout from './layout/CustomAuthRequiredLayout';
 import LoadingComponent from '../components/LoadingComponent';
 import { ErrorComponent } from '../components/ErrorComponent';
-import BuildPageTab from '../components/buildPage/BuildPageTab';
+import { BuildPageTab } from '../components/buildPage/BuildPageTab';
 
 interface BuildPageProps {
   user: User;

app/src/client/components/AppNavBar.tsx

@@ -153,9 +153,9 @@ export default function AppNavBar({ position = 'sticky' }: Props): JSX.Element {
         className='absolute z-0 inset-x-0 top-[105px] dark:bg-boxdark-2 h-[calc(100vh-105px)] bg-no-repeat bg-center'
         style={{
           backgroundImage: `
-      linear-gradient(to bottom, 
-        #E33F2A 0%, 
-        rgba(227, 63, 42, 0) 20%, 
+      linear-gradient(to bottom,
+        #E33F2A 0%,
+        rgba(227, 63, 42, 0) 20%,
         rgba(227, 63, 42, 0) 65%,
         rgba(242, 92, 73, 0.7) 80%,
         rgba(242, 92, 73, 0.9) 90%,

app/src/client/components/ModelItem.tsx

@@ -33,7 +33,7 @@ const ModelItem: React.FC<ModelItemProps> = ({ model, onClick }) => {
   const propertyName = model.json_str.name ? model.json_str.name : model.model_name;
   const svgIcon = _.find(navLinkItems, ['componentName', model.type_name])!.svgIcon;
   const typeToClass: TypeToClass = {
-    secret: 'text-airt-primary mt-1 ml-1',
+    secret: 'text-airt-primary mt-1 ml-1', // pragma: allowlist secret
     deployment: 'text-airt-primary mt-1 ml-2',
     llm: 'text-airt-primary ml-0 mt-1',
     default: 'text-airt-primary ml-0',

app/src/client/components/buildPage/BuildPageTab.tsx

@@ -6,6 +6,7 @@ import { navLinkItems } from '../CustomSidebar';
 import { UserProperty } from './UserProperty';
 import { PropertiesSchema } from '../../interfaces/BuildPageInterfaces';
 import faLogoWithoutText from '../../static/fa-logo-without-text.svg';
+import { useFormHandler } from './useFormHandler';
 
 interface Props {
   onSideNavItemClick: (selectedItem: string) => void;
@@ -15,14 +16,15 @@ interface Props {
   setActiveProperty: (activeProperty: string) => void;
 }
 
-const BuildPageTab = ({
+export const BuildPageTab = ({
   activeProperty,
   onSideNavItemClick,
   propertiesSchema,
   sideNavItemClickCount,
   setActiveProperty,
 }: Props) => {
   const [activeTab, setActiveTab] = useState(0);
+  const { parser, propertiesInStack, pushNewParser, popFromStack, clearStack } = useFormHandler(setActiveProperty);
 
   const handleTabClick = (index: number) => {
     onSideNavItemClick(navLinkItems[index].componentName);
@@ -66,7 +68,11 @@ const BuildPageTab = ({
                 activeProperty={activeProperty}
                 propertiesSchema={propertiesSchema}
                 sideNavItemClickCount={sideNavItemClickCount}
-                setActiveProperty={setActiveProperty}
+                parser={parser}
+                propertiesInStack={propertiesInStack}
+                pushNewParser={pushNewParser}
+                popFromStack={popFromStack}
+                clearStack={clearStack}
               />
             </TabPanel>
           ))}
@@ -93,5 +99,3 @@ const BuildPageTab = ({
     </Box>
   );
 };
-
-export default BuildPageTab;

app/src/client/components/buildPage/UserProperty.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, memo } from 'react';
+import React, { useEffect, memo } from 'react';
 
 import _ from 'lodash';
 import { getModels, useQuery } from 'wasp/client/operations';
@@ -11,26 +11,37 @@ import { ModelSelector } from '../buildPage/ModelSelector';
 import { navLinkItems } from '../CustomSidebar';
 import { PropertiesSchema } from '../../interfaces/BuildPageInterfaces';
 import LoadingComponent from '../LoadingComponent';
-import { useFormHandler, PushParser } from './useFormHandler';
+import { PushParser } from './useFormHandler';
 
 import { filerOutComponentData, capitalizeFirstLetter, filterPropertiesByType } from './buildPageUtils';
-import { Flow } from './PropertySchemaParser';
+import { Flow, UserProperties } from './PropertySchemaParser';
 
 interface Props {
   activeProperty: string;
   propertiesSchema: PropertiesSchema;
   sideNavItemClickCount: number;
-  setActiveProperty: (activeProperty: string) => void;
+  parser: any;
+  propertiesInStack: any[];
+  pushNewParser: (params: PushParser) => void;
+  popFromStack: (userProperties: UserProperties[] | null, validateDataResponse?: any, index?: number) => void;
+  clearStack: () => void;
 }
 
 export const UserProperty = memo(
-  ({ activeProperty, propertiesSchema, sideNavItemClickCount, setActiveProperty }: Props) => {
+  ({
+    activeProperty,
+    propertiesSchema,
+    sideNavItemClickCount,
+    parser,
+    propertiesInStack,
+    pushNewParser,
+    popFromStack,
+    clearStack,
+  }: Props) => {
     const propertyHeader = _.find(navLinkItems, ['componentName', activeProperty])?.label;
     const propertyName = activeProperty === 'llm' ? 'LLM' : capitalizeFirstLetter(activeProperty);
     const propertySchemasList = filerOutComponentData(propertiesSchema, activeProperty);
 
-    const { parser, propertiesInStack, pushNewParser, popFromStack, clearStack } = useFormHandler(setActiveProperty);
-
     const { data: userProperties, refetch: refetchUserProperties, isLoading: isLoading } = useQuery(getModels);
     const userPropertiesByType = (userProperties && filterPropertiesByType(userProperties, activeProperty)) || [];
 
@@ -124,7 +135,7 @@ export const UserProperty = memo(
                     )}
                   </>
                 ) : (
-                  <div className='flex flex-col w-full gap-9'>
+                  <div className='flex flex-col w-full gap-9 mb-20'>
                     <div className='flex flex-col gap-5.5 px-6.5'>
                       <h2 className='text-lg font-semibold text-airt-primary mt-6 '>{`${title}`}</h2>
                       <div className='relative z-20 bg-white dark:bg-form-input'>

app/src/client/components/buildPage/useFormHandler.ts

@@ -15,6 +15,7 @@ export interface PushParser {
 
 export function useFormHandler(setActiveProperty: (activeProperty: string) => void) {
   const [stack, setStack] = useState<PropertySchemaParser[]>([]);
+  console.log('stack', stack);
 
   const getCurrentParser = useCallback(() => {
     return stack.length > 0 ? stack[stack.length - 1] : null;

app/src/client/landing-page/LandingPage.tsx

@@ -19,7 +19,7 @@ export default function LandingPage() {
         className='z-0 absolute inset-x-0 bottom-[0px] h-[50vh] dark:bg-boxdark-2 bg-no-repeat bg-center'
         style={{
           backgroundImage: `
-      linear-gradient(to bottom, 
+      linear-gradient(to bottom,
         rgba(242, 92, 73, 0.9) 0%,
         rgba(242, 92, 73, 0.8) 20%,
         rgba(242, 92, 73, 0.5) 40%,

app/src/client/tests/UserProperty-e2e.test.tsx

@@ -39,8 +39,8 @@ vi.mock('wasp/client/operations', () => ({
 // Helper functions
 const setupComponent = async (): Promise<{ user: UserEvent; container: HTMLElement }> => {
   const user = userEvent.setup();
-  const { UserProperty } = await import('../components/buildPage/UserProperty');
-  const renderResult = renderInContext(<UserProperty {...mockProps} activeProperty='agent' />);
+  const { BuildPageTab } = await import('../components/buildPage/BuildPageTab');
+  const renderResult = renderInContext(<BuildPageTab {...mockProps} activeProperty='agent' />);
   await user.click(screen.getByText('Add Agent'));
   await waitFor(() => {
     expect(screen.getByText('AssistantAgent')).toBeInTheDocument();

app/src/client/tests/UserProperty.test.tsx

@@ -3,7 +3,7 @@ import { describe, it, expect, vi, beforeEach, Mock } from 'vitest';
 import { screen, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { UserProperty } from '../components/buildPage/UserProperty';
+import { BuildPageTab } from '../components/buildPage/BuildPageTab';
 import { renderInContext } from 'wasp/client/test';
 import { useQuery } from 'wasp/client/operations';
 import { mockProps } from './mocks';
@@ -31,13 +31,13 @@ vi.mock('wasp/client/operations', () => ({
   addUserModels: vi.fn(() => Promise.resolve(validateAndSaveMockResponse)),
 }));
 
-describe('UserProperty', () => {
+describe('BuildPageTab', () => {
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
-  it('renders UserProperty component with add button when no models exist', () => {
-    renderInContext(<UserProperty {...mockProps} />);
+  it('renders BuildPageTab component with add button when no models exist', () => {
+    renderInContext(<BuildPageTab {...mockProps} />);
 
     // Check for the presence of the "Add TestProperty" button
     expect(screen.getByText('Add Secret')).toBeInTheDocument();
@@ -49,7 +49,7 @@ describe('UserProperty', () => {
   it('renders loading component when data is being fetched', () => {
     (useQuery as Mock).mockReturnValue({ data: undefined, refetch: vi.fn(), isLoading: true });
 
-    const { getByText, container } = renderInContext(<UserProperty {...mockProps} />);
+    const { getByText, container } = renderInContext(<BuildPageTab {...mockProps} />);
 
     expect(getByText('Loading...')).toBeInTheDocument();
   });
@@ -64,7 +64,7 @@ describe('UserProperty', () => {
       refetch: vi.fn(),
     });
 
-    renderInContext(<UserProperty {...mockProps} />);
+    renderInContext(<BuildPageTab {...mockProps} />);
 
     expect(screen.getByText('Secret1')).toBeInTheDocument();
     expect(screen.getByText('Secret2')).toBeInTheDocument();
@@ -78,7 +78,7 @@ describe('UserProperty', () => {
       refetch: vi.fn(),
     });
 
-    const { getByText, getAllByTestId } = renderInContext(<UserProperty {...mockProps} />);
+    const { getByText, getAllByTestId } = renderInContext(<BuildPageTab {...mockProps} />);
 
     const addButton = getByText('Add Secret');
     fireEvent.click(addButton);
@@ -100,7 +100,7 @@ describe('UserProperty', () => {
       activeProperty: 'llm',
     };
 
-    renderInContext(<UserProperty {...llmProps} />);
+    renderInContext(<BuildPageTab {...llmProps} />);
 
     expect(screen.getByText('Add LLM')).toBeInTheDocument();
     expect(screen.getByText('No LLMs found. Please add one.')).toBeInTheDocument();
@@ -115,7 +115,7 @@ describe('UserProperty', () => {
       refetch: vi.fn(),
     });
 
-    renderInContext(<UserProperty {...mockProps} />);
+    renderInContext(<BuildPageTab {...mockProps} />);
 
     expect(screen.getByText('Secret1')).toBeInTheDocument();
     expect(screen.queryByText('LLM1')).not.toBeInTheDocument();
@@ -127,7 +127,7 @@ describe('UserProperty', () => {
       refetch: vi.fn(),
     });
 
-    const { getByText, getByRole, container } = renderInContext(<UserProperty {...mockProps} />);
+    const { getByText, getByRole, container } = renderInContext(<BuildPageTab {...mockProps} />);
 
     fireEvent.click(screen.getByText('Add Secret'));
 

app/src/client/tests/mocks.ts

@@ -1012,6 +1012,7 @@ export const mockPropertieSchemas: PropertiesSchema = {
 };
 
 export const mockProps = {
+  onSideNavItemClick: vi.fn(),
   activeProperty: 'secret',
   propertiesSchema: mockPropertieSchemas,
   sideNavItemClickCount: 0,