mock SidePanel
)
- vi.mocked(MainContentContainer).mockReturnValue(
- mock MainContentContainer
- )
- vi.mocked(Loading).mockReturnValue(mock Loading
)
- })
-
- it('should render loading screen when isLoading is true', () => {
- ;(auth0 as any).useAuth0 = vi.fn().mockReturnValue({
- isAuthenticated: false,
- isLoading: true,
- })
- render()
- screen.getByText('mock Loading')
- })
-
- it('should render text', () => {
- ;(auth0 as any).useAuth0 = vi.fn().mockReturnValue({
- isAuthenticated: true,
- isLoading: false,
- })
- render()
- screen.getByText('mock SidePanel')
- screen.getByText('mock MainContentContainer')
- screen.getByText('Logout')
+ vi.mocked(OpentronsAI).mockReturnValue(mock OpentronsAI
)
})
- it('should call a mock function when clicking logout button', () => {
- ;(auth0 as any).useAuth0 = vi.fn().mockReturnValue({
- isAuthenticated: true,
- isLoading: false,
- logout: mockLogout,
- })
+ it('should render OpentronsAI', () => {
render()
- const logoutButton = screen.getByText('Logout')
- fireEvent.click(logoutButton)
- expect(mockLogout).toHaveBeenCalled()
+ expect(screen.getByText('mock OpentronsAI')).toBeInTheDocument()
})
})
diff --git a/opentrons-ai-client/src/App.tsx b/opentrons-ai-client/src/App.tsx
index 263ea02c844..104977150fc 100644
--- a/opentrons-ai-client/src/App.tsx
+++ b/opentrons-ai-client/src/App.tsx
@@ -1,82 +1,5 @@
-import { useEffect } from 'react'
-import { useAuth0 } from '@auth0/auth0-react'
-import { useTranslation } from 'react-i18next'
-import { useForm, FormProvider } from 'react-hook-form'
-import { useAtom } from 'jotai'
-import {
- COLORS,
- Flex,
- Link as LinkButton,
- POSITION_ABSOLUTE,
- POSITION_RELATIVE,
- TYPOGRAPHY,
-} from '@opentrons/components'
-
-import { tokenAtom } from './resources/atoms'
-import { useGetAccessToken } from './resources/hooks'
-import { SidePanel } from './molecules/SidePanel'
-import { Loading } from './molecules/Loading'
-import { MainContentContainer } from './organisms/MainContentContainer'
-
-export interface InputType {
- userPrompt: string
-}
+import { OpentronsAI } from './OpentronsAI'
export function App(): JSX.Element | null {
- const { t } = useTranslation('protocol_generator')
- const { isAuthenticated, logout, isLoading, loginWithRedirect } = useAuth0()
- const [, setToken] = useAtom(tokenAtom)
- const { getAccessToken } = useGetAccessToken()
-
- const fetchAccessToken = async (): Promisemock Landing page
)
+ vi.mocked(Loading).mockReturnValue(mock Loading
)
+ vi.mocked(Header).mockReturnValue(mock Header component
)
+ vi.mocked(Footer).mockReturnValue(mock Footer component
)
+ })
+
+ it('should render loading screen when isLoading is true', () => {
+ ;(auth0 as any).useAuth0 = vi.fn().mockReturnValue({
+ isAuthenticated: false,
+ isLoading: true,
+ })
+ render()
+ screen.getByText('mock Loading')
+ })
+
+ it('should render text', () => {
+ ;(auth0 as any).useAuth0 = vi.fn().mockReturnValue({
+ isAuthenticated: true,
+ isLoading: false,
+ })
+ render()
+ screen.getByText('mock Landing page')
+ })
+
+ it('should render Header component', () => {
+ ;(auth0 as any).useAuth0 = vi.fn().mockReturnValue({
+ isAuthenticated: true,
+ isLoading: false,
+ })
+ render()
+ screen.getByText('mock Header component')
+ })
+
+ it('should render Footer component', () => {
+ ;(auth0 as any).useAuth0 = vi.fn().mockReturnValue({
+ isAuthenticated: true,
+ isLoading: false,
+ })
+ render()
+ screen.getByText('mock Footer component')
+ })
+})
diff --git a/opentrons-ai-client/src/OpentronsAI.tsx b/opentrons-ai-client/src/OpentronsAI.tsx
new file mode 100644
index 00000000000..621c2453e50
--- /dev/null
+++ b/opentrons-ai-client/src/OpentronsAI.tsx
@@ -0,0 +1,90 @@
+import { HashRouter } from 'react-router-dom'
+import {
+ DIRECTION_COLUMN,
+ Flex,
+ OVERFLOW_AUTO,
+ COLORS,
+ ALIGN_CENTER,
+} from '@opentrons/components'
+import { OpentronsAIRoutes } from './OpentronsAIRoutes'
+import { useAuth0 } from '@auth0/auth0-react'
+import { useAtom } from 'jotai'
+import { useEffect } from 'react'
+import { Loading } from './molecules/Loading'
+import { mixpanelAtom, tokenAtom } from './resources/atoms'
+import { useGetAccessToken } from './resources/hooks'
+import { initializeMixpanel } from './analytics/mixpanel'
+import { useTrackEvent } from './resources/hooks/useTrackEvent'
+import { Header } from './molecules/Header'
+import { CLIENT_MAX_WIDTH } from './resources/constants'
+import { Footer } from './molecules/Footer'
+
+export function OpentronsAI(): JSX.Element | null {
+ const { isAuthenticated, isLoading, loginWithRedirect } = useAuth0()
+ const [, setToken] = useAtom(tokenAtom)
+ const [mixpanel] = useAtom(mixpanelAtom)
+ const { getAccessToken } = useGetAccessToken()
+ const trackEvent = useTrackEvent()
+
+ initializeMixpanel(mixpanel)
+
+ const fetchAccessToken = async (): Promise
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/opentrons-ai-client/src/OpentronsAIRoutes.tsx b/opentrons-ai-client/src/OpentronsAIRoutes.tsx
new file mode 100644
index 00000000000..630429c2aa1
--- /dev/null
+++ b/opentrons-ai-client/src/OpentronsAIRoutes.tsx
@@ -0,0 +1,39 @@
+import { Route, Navigate, Routes } from 'react-router-dom'
+import { Landing } from './pages/Landing'
+
+import type { RouteProps } from './resources/types'
+
+const opentronsAIRoutes: RouteProps[] = [
+ // replace Landing with the correct component
+ {
+ Component: Landing,
+ name: 'Create A New Protocol',
+ navLinkTo: '/new-protocol',
+ path: '/new-protocol',
+ },
+ {
+ Component: Landing,
+ name: 'Update An Existing Protocol',
+ navLinkTo: '/update-protocol',
+ path: '/update-protocol',
+ },
+]
+
+export function OpentronsAIRoutes(): JSX.Element {
+ const landingPage: RouteProps = {
+ Component: Landing,
+ name: 'Landing',
+ navLinkTo: '/',
+ path: '/',
+ }
+ const allRoutes: RouteProps[] = [...opentronsAIRoutes, landingPage]
+
+ return (
+ {t('toggle.share_session')}
-
-
- - {t('body.reason_for_collecting_data')} -
--
-
- {t('body.data_collected_is_internal')} -
- {t('body.data_only_from_pd')} -
- {t('body.opt_out_of_data_collection')} -
mock content
,
+ handleCancel: vi.fn(),
+ handleContinue: vi.fn(),
+ hintKey: 'change_magnet_module_model',
+ }
+ })
+ it('renders the hint with buttons and checkbox', () => {
+ render(props)
+ fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+ expect(props.handleCancel).toHaveBeenCalled()
+ expect(vi.mocked(removeHint)).toHaveBeenCalled()
+ fireEvent.click(screen.getByRole('button', { name: 'Continue' }))
+ expect(props.handleContinue).toHaveBeenCalled()
+ expect(vi.mocked(removeHint)).toHaveBeenCalled()
+ screen.getByText('mock content')
+ })
+})
diff --git a/protocol-designer/src/organisms/BlockingHintModal/index.tsx b/protocol-designer/src/organisms/BlockingHintModal/index.tsx
new file mode 100644
index 00000000000..be33b06742f
--- /dev/null
+++ b/protocol-designer/src/organisms/BlockingHintModal/index.tsx
@@ -0,0 +1,86 @@
+import { useCallback, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { useTranslation } from 'react-i18next'
+import { useDispatch } from 'react-redux'
+import {
+ ALIGN_CENTER,
+ COLORS,
+ Check,
+ Flex,
+ JUSTIFY_SPACE_BETWEEN,
+ Modal,
+ PrimaryButton,
+ SPACING,
+ SecondaryButton,
+ StyledText,
+} from '@opentrons/components'
+import { actions } from '../../tutorial'
+import { getMainPagePortalEl } from '../../components/portals/MainPageModalPortal'
+import type { ReactNode } from 'react'
+import type { HintKey } from '../../tutorial'
+
+export interface HintProps {
+ hintKey: HintKey
+ handleCancel: () => void
+ handleContinue: () => void
+ content: ReactNode
+}
+
+export function BlockingHintModal(props: HintProps): JSX.Element {
+ const { content, hintKey, handleCancel, handleContinue } = props
+ const { t, i18n } = useTranslation(['alert', 'shared'])
+ const dispatch = useDispatch()
+
+ const [rememberDismissal, setRememberDismissal] = useState