diff --git a/app/src/client/app/BuildPage.tsx b/app/src/client/app/BuildPage.tsx index e7ee1c76..56d62293 100644 --- a/app/src/client/app/BuildPage.tsx +++ b/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; diff --git a/app/src/client/components/AppNavBar.tsx b/app/src/client/components/AppNavBar.tsx index d3e7cdc0..198e57cc 100644 --- a/app/src/client/components/AppNavBar.tsx +++ b/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%, diff --git a/app/src/client/components/ModelItem.tsx b/app/src/client/components/ModelItem.tsx index cb60f680..1c52f3d4 100644 --- a/app/src/client/components/ModelItem.tsx +++ b/app/src/client/components/ModelItem.tsx @@ -33,7 +33,7 @@ const ModelItem: React.FC = ({ 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', diff --git a/app/src/client/components/buildPage/BuildPageTab.tsx b/app/src/client/components/buildPage/BuildPageTab.tsx index 15a167fc..b33e998d 100644 --- a/app/src/client/components/buildPage/BuildPageTab.tsx +++ b/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,7 +16,7 @@ interface Props { setActiveProperty: (activeProperty: string) => void; } -const BuildPageTab = ({ +export const BuildPageTab = ({ activeProperty, onSideNavItemClick, propertiesSchema, @@ -23,6 +24,7 @@ const BuildPageTab = ({ 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} /> ))} @@ -93,5 +99,3 @@ const BuildPageTab = ({ ); }; - -export default BuildPageTab; diff --git a/app/src/client/components/buildPage/UserProperty.tsx b/app/src/client/components/buildPage/UserProperty.tsx index 9c3509c3..08a205fd 100644 --- a/app/src/client/components/buildPage/UserProperty.tsx +++ b/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( )} ) : ( -
+

{`${title}`}

diff --git a/app/src/client/components/buildPage/useFormHandler.ts b/app/src/client/components/buildPage/useFormHandler.ts index 7c4b7084..49293697 100644 --- a/app/src/client/components/buildPage/useFormHandler.ts +++ b/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([]); + console.log('stack', stack); const getCurrentParser = useCallback(() => { return stack.length > 0 ? stack[stack.length - 1] : null; diff --git a/app/src/client/landing-page/LandingPage.tsx b/app/src/client/landing-page/LandingPage.tsx index 37117a00..77359dc4 100644 --- a/app/src/client/landing-page/LandingPage.tsx +++ b/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%, diff --git a/app/src/client/static/fa-main-logo.svg b/app/src/client/static/fa-main-logo.svg index ea8bd7bc..d5ea8bce 100644 --- a/app/src/client/static/fa-main-logo.svg +++ b/app/src/client/static/fa-main-logo.svg @@ -938,4 +938,4 @@ - \ No newline at end of file + diff --git a/app/src/client/static/logo.svg b/app/src/client/static/logo.svg index ee4d2788..756104bd 100644 --- a/app/src/client/static/logo.svg +++ b/app/src/client/static/logo.svg @@ -783,4 +783,4 @@ - \ No newline at end of file + diff --git a/app/src/client/static/pod-loga.svg b/app/src/client/static/pod-loga.svg index 815a6d76..b5e0251a 100644 --- a/app/src/client/static/pod-loga.svg +++ b/app/src/client/static/pod-loga.svg @@ -23,4 +23,4 @@ - \ No newline at end of file + diff --git a/app/src/client/tests/UserProperty-e2e.test.tsx b/app/src/client/tests/UserProperty-e2e.test.tsx index d90a8553..e68b9600 100644 --- a/app/src/client/tests/UserProperty-e2e.test.tsx +++ b/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(); + const { BuildPageTab } = await import('../components/buildPage/BuildPageTab'); + const renderResult = renderInContext(); await user.click(screen.getByText('Add Agent')); await waitFor(() => { expect(screen.getByText('AssistantAgent')).toBeInTheDocument(); diff --git a/app/src/client/tests/UserProperty.test.tsx b/app/src/client/tests/UserProperty.test.tsx index f5302ad3..234277f8 100644 --- a/app/src/client/tests/UserProperty.test.tsx +++ b/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(); + it('renders BuildPageTab component with add button when no models exist', () => { + renderInContext(); // 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(); + const { getByText, container } = renderInContext(); expect(getByText('Loading...')).toBeInTheDocument(); }); @@ -64,7 +64,7 @@ describe('UserProperty', () => { refetch: vi.fn(), }); - renderInContext(); + renderInContext(); expect(screen.getByText('Secret1')).toBeInTheDocument(); expect(screen.getByText('Secret2')).toBeInTheDocument(); @@ -78,7 +78,7 @@ describe('UserProperty', () => { refetch: vi.fn(), }); - const { getByText, getAllByTestId } = renderInContext(); + const { getByText, getAllByTestId } = renderInContext(); const addButton = getByText('Add Secret'); fireEvent.click(addButton); @@ -100,7 +100,7 @@ describe('UserProperty', () => { activeProperty: 'llm', }; - renderInContext(); + renderInContext(); 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(); + renderInContext(); 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(); + const { getByText, getByRole, container } = renderInContext(); fireEvent.click(screen.getByText('Add Secret')); diff --git a/app/src/client/tests/mocks.ts b/app/src/client/tests/mocks.ts index 87d7c00d..33b000e6 100644 --- a/app/src/client/tests/mocks.ts +++ b/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,