+
+
+
+ );
+};
+
+export default CliCodeBlock;
diff --git a/packages/manager/apps/pci-ai-notebooks/src/components/error-boundary/ErrorBoundary.component.tsx b/packages/manager/apps/pci-ai-notebooks/src/components/error-boundary/ErrorBoundary.component.tsx
new file mode 100644
index 000000000000..c51a6da30cf8
--- /dev/null
+++ b/packages/manager/apps/pci-ai-notebooks/src/components/error-boundary/ErrorBoundary.component.tsx
@@ -0,0 +1,74 @@
+import { useNavigation } from '@ovh-ux/manager-react-shell-client';
+import { useRouteError } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import errorImgSrc from '@/../public/assets/oops.png';
+import { Alert, AlertDescription } from '../ui/alert';
+import { Button } from '../ui/button';
+
+const ErrorBoundary = () => {
+ const error = useRouteError();
+ const { t } = useTranslation('error');
+ const nav = useNavigation();
+
+ const navigateToHomepage = () => {
+ nav.navigateTo('public-cloud', '', {});
+ };
+ const reloadPage = () => {
+ nav.reload();
+ };
+
+ if (error instanceof Error) {
+ return (
+
+
+ {title}
+ +
+ {code}
+
+
+
+ );
+ }
+ return <>;
+};
+
+export default ErrorBoundary;
diff --git a/packages/manager/apps/pci-ai-notebooks/src/components/error-boundary/ErrorBoundary.spec.tsx b/packages/manager/apps/pci-ai-notebooks/src/components/error-boundary/ErrorBoundary.spec.tsx
new file mode 100644
index 000000000000..6c60627a0fe6
--- /dev/null
+++ b/packages/manager/apps/pci-ai-notebooks/src/components/error-boundary/ErrorBoundary.spec.tsx
@@ -0,0 +1,114 @@
+import {
+ act,
+ fireEvent,
+ render,
+ screen,
+ waitFor,
+} from '@testing-library/react';
+import { describe, it, vi } from 'vitest';
+import * as RouterDom from 'react-router-dom';
+import { useNavigation } from '@ovh-ux/manager-react-shell-client';
+import ErrorBoundary from '@/components/error-boundary/ErrorBoundary.component';
+import { RouterWithQueryClientWrapper } from '../../__tests__/helpers/wrappers/RouterWithQueryClientWrapper';
+
+vi.mock('react-router-dom', async () => {
+ const mod = await vi.importActual
+
+
+
+
+
+
+
+ 
+
+ {t('manager_error_page_title')}
+{t('manager_error_page_default')}
+{error.message}
+ {'xOvhQueryId' in error && ( ++ {t('manager_error_page_detail_code', { + code: error.xOvhQueryId, + })} +
+ )} +
+
+
+
+ {guide.title}
+{guide.excerpt}
+
+
+ );
+}
diff --git a/packages/manager/apps/pci-ai-notebooks/src/components/loading/Loading.spec.tsx b/packages/manager/apps/pci-ai-notebooks/src/components/loading/Loading.spec.tsx
new file mode 100644
index 000000000000..a6a91d99c966
--- /dev/null
+++ b/packages/manager/apps/pci-ai-notebooks/src/components/loading/Loading.spec.tsx
@@ -0,0 +1,13 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { describe, it, vi } from 'vitest';
+import Loading from '@/components/loading/Loading.component';
+
+describe('Loading component', () => {
+ it('should display the loading component', async () => {
+ render(
+
+
+
+
+ );
+}
diff --git a/packages/manager/apps/pci-ai-notebooks/src/components/loading/ProgressLoader.spec.tsx b/packages/manager/apps/pci-ai-notebooks/src/components/loading/ProgressLoader.spec.tsx
new file mode 100644
index 000000000000..d68bbef047da
--- /dev/null
+++ b/packages/manager/apps/pci-ai-notebooks/src/components/loading/ProgressLoader.spec.tsx
@@ -0,0 +1,76 @@
+import { act, render, screen, waitFor } from '@testing-library/react';
+import { describe, it, vi } from 'vitest';
+import ProgressLoader from '@/components/loading/ProgressLoader.component';
+
+describe('ProgressLoader component', () => {
+ beforeEach(() => {
+ vi.useFakeTimers({ shouldAdvanceTime: true });
+ });
+
+ afterEach(() => {
+ vi.runOnlyPendingTimers();
+ vi.useRealTimers();
+ });
+ it('should display the loader component', async () => {
+ render(
+ {editors.map((editor) => (
+ onChange(editor.id)}
+ value={editor.id}
+ checked={editor.id === value}
+ >
+
+ ))}
+
+ );
+ },
+);
+EditorsSelect.displayName = 'EditorsSelect';
+export default EditorsSelect;
diff --git a/packages/manager/apps/pci-ai-notebooks/src/components/order/error-list/ErrorList.component.tsx b/packages/manager/apps/pci-ai-notebooks/src/components/order/error-list/ErrorList.component.tsx
new file mode 100644
index 000000000000..a047b8bb597b
--- /dev/null
+++ b/packages/manager/apps/pci-ai-notebooks/src/components/order/error-list/ErrorList.component.tsx
@@ -0,0 +1,24 @@
+import { FieldError, FieldErrors } from 'react-hook-form';
+
+const ErrorList = ({ error }: { error: FieldErrors }) => {
+ const renderErrorMessages = (errors: FieldErrors): React.ReactNode[] => {
+ return Object.entries(errors).flatMap(([key, value]) => {
+ if (typeof value === 'object' && value !== null) {
+ if ('message' in value) {
+ // Direct error message
+ return
+ 
+ )}
+
+
+
+ {editor.logoUrl && (
+ + {editor.name} +
+ {editor.id === 'jupyterlabcollaborative' ? ( ++ {editor.description} +
+- {renderErrorMessages(error)}
| + onChange(e.target.value)} + className="hidden" + id={`flavor-${flavor.id}`} + value={flavor.id} + checked={value === flavor.id} + /> + | +
+ setSelectedFrameworkTypeIndex(+v)}
+ >
+
+ {fmkTypes.map((fmkType, index) => (
+
+ {fmkType}
+
+ ))}
+
+
+
+
+ );
+});
+
+FrameworksSelect.displayName = 'FrameworksSelect';
+export default FrameworksSelect;
diff --git a/packages/manager/apps/pci-ai-notebooks/src/components/order/framework/FrameworkTile.component.tsx b/packages/manager/apps/pci-ai-notebooks/src/components/order/framework/FrameworkTile.component.tsx
new file mode 100644
index 000000000000..8025133c9d9d
--- /dev/null
+++ b/packages/manager/apps/pci-ai-notebooks/src/components/order/framework/FrameworkTile.component.tsx
@@ -0,0 +1,67 @@
+import { useEffect, useState } from 'react';
+import RadioTile from '@/components/radio-tile/RadioTile.component';
+import * as ai from '@/types/cloud/project/ai';
+import VersionSelector from './FrameworkTileVersion.component';
+
+export const FrameworkTile = ({
+ framework,
+ version,
+ selected,
+ onChange,
+}: {
+ framework: ai.capabilities.notebook.Framework;
+ version: string;
+ selected: boolean;
+ onChange: (
+ framework: ai.capabilities.notebook.Framework,
+ version: string,
+ ) => void;
+}) => {
+ const [selectedVersion, setSelectedVersion] = useState
+ {mappedFramework
+ .filter((r) => r.type === fmkTypes[selectedFrameworkTypeIndex])
+ .map((fmk) => (
+ v === value.version)
+ : fmk.versions[0]
+ }
+ selected={fmk.id === value.framework}
+ onChange={(
+ newFramework: ai.capabilities.notebook.Framework,
+ newVersion: string,
+ ) => {
+ onChange({
+ framework: newFramework.id,
+ version: newVersion,
+ });
+ }}
+ />
+ ))}
+
+
+ 
+ )}
+
+
+
+ {framework.logoUrl && (
+ + {framework.name} +
++ {framework.description} +
+
+ {versions.map((fmkVersion) => (
+
+ ))}
+
+
+ {t('pricingLabel')}
+
+ );
+};
+
+export default OrderPrice;
diff --git a/packages/manager/apps/pci-ai-notebooks/src/components/order/region/RegionSelect.component.tsx b/packages/manager/apps/pci-ai-notebooks/src/components/order/region/RegionSelect.component.tsx
new file mode 100644
index 000000000000..442a211a8c1a
--- /dev/null
+++ b/packages/manager/apps/pci-ai-notebooks/src/components/order/region/RegionSelect.component.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import * as ai from '@/types/cloud/project/ai';
+import { cn } from '@/lib/utils';
+import RegionTile from './RegionTile.component';
+
+interface RegionsSelectProps {
+ regions: ai.capabilities.Region[];
+ value: string;
+ onChange: (newRegion: string) => void;
+ className?: string;
+}
+
+const RegionsSelect = React.forwardRef
+
+
+ {regions.map((region) => (
+ onChange(newValue)}
+ />
+ ))}
+
+ );
+ },
+);
+RegionsSelect.displayName = 'RegionsSelect';
+export default RegionsSelect;
diff --git a/packages/manager/apps/pci-ai-notebooks/src/components/order/region/RegionTile.component.tsx b/packages/manager/apps/pci-ai-notebooks/src/components/order/region/RegionTile.component.tsx
new file mode 100644
index 000000000000..d1f96841a811
--- /dev/null
+++ b/packages/manager/apps/pci-ai-notebooks/src/components/order/region/RegionTile.component.tsx
@@ -0,0 +1,37 @@
+import { useTranslation } from 'react-i18next';
+import RadioTile from '@/components/radio-tile/RadioTile.component';
+import * as ai from '@/types/cloud/project/ai';
+
+export const RegionTile = ({
+ region,
+ selected,
+ onChange,
+}: {
+ region: ai.capabilities.Region;
+ selected: boolean;
+ onChange: (newRegion: string) => void;
+}) => {
+ const { t: tRegions } = useTranslation('regions');
+ return (
+
+
+
+
+ + {tRegions(`region_${region.id}`)} + {` (${region.id})`} +
+
+ {children}
+
+ );
+};
+
+export default PageLayout;
diff --git a/packages/manager/apps/pci-ai-notebooks/src/components/page-layout/PageLayout.spec.tsx b/packages/manager/apps/pci-ai-notebooks/src/components/page-layout/PageLayout.spec.tsx
new file mode 100644
index 000000000000..2f33ab59aeae
--- /dev/null
+++ b/packages/manager/apps/pci-ai-notebooks/src/components/page-layout/PageLayout.spec.tsx
@@ -0,0 +1,12 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { describe, it } from 'vitest';
+import PageLayout from '@/components/page-layout/PageLayout.component';
+
+describe('PageLayout component', () => {
+ it('should display the page layout', async () => {
+ render(
+ (props.onChange ? props.onChange(e) : null)}
+ className="hidden"
+ type="radio"
+ id={id}
+ checked={props.checked}
+ {...props}
+ />
+
+
+ );
+};
+
+RadioTile.Separator = function RadioTileSeparator() {
+ return (
+
+ );
+};
+
+export default RadioTile;
diff --git a/packages/manager/apps/pci-ai-notebooks/src/components/radio-tile/RadioTile.spec.tsx b/packages/manager/apps/pci-ai-notebooks/src/components/radio-tile/RadioTile.spec.tsx
new file mode 100644
index 000000000000..8d0cbe0a0e5f
--- /dev/null
+++ b/packages/manager/apps/pci-ai-notebooks/src/components/radio-tile/RadioTile.spec.tsx
@@ -0,0 +1,88 @@
+import {
+ act,
+ fireEvent,
+ render,
+ screen,
+ waitFor,
+} from '@testing-library/react';
+import { describe, it, vi } from 'vitest';
+import RadioTile from '@/components/radio-tile/RadioTile.component';
+
+describe('RadioTile component', () => {
+ it('should display the radio tile', async () => {
+ render(
+ title
+content
+title
+content
+title
+content
+
+ {tabs.map((tab, index) => (
+
+ {({ isActive }) => (
+ {
+ if (node && isActive)
+ node?.scrollIntoView({
+ behavior: 'smooth',
+ block: 'center',
+ });
+ }}
+ >
+ {tab.label}
+ {tab.count > 0 && (
+
+ {tab.count}
+
+ )}
+
+ )}
+
+ ))}
+
+
+
+ );
+};
+
+export default TabsMenu;
diff --git a/packages/manager/apps/pci-ai-notebooks/src/components/tabs-menu/TabsMenu.spec.tsx b/packages/manager/apps/pci-ai-notebooks/src/components/tabs-menu/TabsMenu.spec.tsx
new file mode 100644
index 000000000000..a2e043de8e1a
--- /dev/null
+++ b/packages/manager/apps/pci-ai-notebooks/src/components/tabs-menu/TabsMenu.spec.tsx
@@ -0,0 +1,92 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import TabsMenu, { Tab } from '@/components/tabs-menu/TabsMenu.component';
+import { RouterWithQueryClientWrapper } from '../../__tests__/helpers/wrappers/RouterWithQueryClientWrapper';
+
+function setup(tabs: Tab[] = []) {
+ return render(
+
+
+ {children}
+ + {children} +
+)) +AlertTitle.displayName = "AlertTitle" + +const AlertDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes{children}
+)) +CardTitle.displayName = "CardTitle" + +const CardDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes
+
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+ React.ElementRef
+
+ );
+}
+
+interface DataTableProps
+
+
+
+
+
+ Page {table.getState().pagination.pageIndex + 1} of{" "}
+ {table.getPageCount()}
+
+
+
+
+
+
+
+
+
+
+
+
+
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+ React.ElementRef+ {body} +
+ ) +}) +FormMessage.displayName = "FormMessage" + +export { + useFormField, + Form, + FormItem, + FormLabel, + FormControl, + FormDescription, + FormMessage, + FormField, +} diff --git a/packages/manager/apps/pci-ai-notebooks/src/components/ui/input.tsx b/packages/manager/apps/pci-ai-notebooks/src/components/ui/input.tsx new file mode 100644 index 000000000000..677d05fd6c1c --- /dev/null +++ b/packages/manager/apps/pci-ai-notebooks/src/components/ui/input.tsx @@ -0,0 +1,25 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +export interface InputProps + extends React.InputHTMLAttributes
+
+
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+
+ );
+}
\ No newline at end of file
diff --git a/packages/manager/apps/pci-ai-notebooks/src/components/ui/toast.tsx b/packages/manager/apps/pci-ai-notebooks/src/components/ui/toast.tsx
new file mode 100644
index 000000000000..a82247753419
--- /dev/null
+++ b/packages/manager/apps/pci-ai-notebooks/src/components/ui/toast.tsx
@@ -0,0 +1,127 @@
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+ React.ElementRef
+
+ minuteRef.current?.focus()}
+ />
+
+
+
+ hourRef.current?.focus()}
+ onRightFocus={() => secondRef.current?.focus()}
+ />
+
+
+
+ minuteRef.current?.focus()}
+ />
+
+
+
+
+ {title && {title} }
+ {description && (
+ {description}
+ )}
+
+ {action}
+