{goupedByDate.length > 0 ? (
- goupedByDate.map(group => {
+ goupedByDate.map((group) => {
return
;
})
) : (
-
+
No history yet
- You haven't run any operations yet. Get started by running your first operation.
+ You haven't run any operations yet. Get started by running
+ your first operation.
diff --git a/packages/web/app/src/laboratory/components/laboratory/laboratory.tsx b/packages/libraries/laboratory/src/components/laboratory/laboratory.tsx
similarity index 56%
rename from packages/web/app/src/laboratory/components/laboratory/laboratory.tsx
rename to packages/libraries/laboratory/src/components/laboratory/laboratory.tsx
index 265fbcbb5a2..91cabde8818 100644
--- a/packages/web/app/src/laboratory/components/laboratory/laboratory.tsx
+++ b/packages/libraries/laboratory/src/components/laboratory/laboratory.tsx
@@ -1,24 +1,25 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { ReactNode, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
import { FileIcon, FoldersIcon, HistoryIcon, SettingsIcon } from 'lucide-react';
+import monacoStyles from 'monaco-editor/min/vs/editor/editor.main.css?inline';
import * as z from 'zod';
-import { Markdown } from '@/components/v2/markdown';
-import { Collections } from '@/laboratory/components/laboratory/collections';
-import { Command } from '@/laboratory/components/laboratory/command';
+import { Collections } from '@/components/laboratory/collections';
+import { Command } from '@/components/laboratory/command';
import {
LaboratoryPermission,
LaboratoryPermissions,
LaboratoryProvider,
useLaboratory,
type LaboratoryApi,
-} from '@/laboratory/components/laboratory/context';
-import { Env } from '@/laboratory/components/laboratory/env';
-import { History } from '@/laboratory/components/laboratory/history';
-import { HistoryItem } from '@/laboratory/components/laboratory/history-item';
-import { Operation } from '@/laboratory/components/laboratory/operation';
-import { Preflight } from '@/laboratory/components/laboratory/preflight';
-import { Settings } from '@/laboratory/components/laboratory/settings';
-import { Tabs } from '@/laboratory/components/laboratory/tabs';
-import { Button } from '@/laboratory/components/ui/button';
+} from '@/components/laboratory/context';
+import { Env } from '@/components/laboratory/env';
+import { History } from '@/components/laboratory/history';
+import { HistoryItem } from '@/components/laboratory/history-item';
+import { Operation } from '@/components/laboratory/operation';
+import { Preflight } from '@/components/laboratory/preflight';
+import { Settings } from '@/components/laboratory/settings';
+import { Tabs } from '@/components/laboratory/tabs';
+import { Button } from '@/components/ui/button';
import {
Dialog,
DialogClose,
@@ -27,7 +28,7 @@ import {
DialogFooter,
DialogHeader,
DialogTitle,
-} from '@/laboratory/components/ui/dialog';
+} from '@/components/ui/dialog';
import {
DropdownMenu,
DropdownMenuContent,
@@ -36,7 +37,7 @@ import {
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuTrigger,
-} from '@/laboratory/components/ui/dropdown-menu';
+} from '@/components/ui/dropdown-menu';
import {
Empty,
EmptyContent,
@@ -44,35 +45,45 @@ import {
EmptyHeader,
EmptyMedia,
EmptyTitle,
-} from '@/laboratory/components/ui/empty';
-import {
- Field,
- FieldDescription,
- FieldError,
- FieldGroup,
- FieldLabel,
-} from '@/laboratory/components/ui/field';
-import { Input } from '@/laboratory/components/ui/input';
-import {
- ResizableHandle,
- ResizablePanel,
- ResizablePanelGroup,
-} from '@/laboratory/components/ui/resizable';
-import { Toaster } from '@/laboratory/components/ui/sonner';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/laboratory/components/ui/tooltip';
-import { useCollections } from '@/laboratory/lib/collections';
-import { useEndpoint } from '@/laboratory/lib/endpoint';
-import { useEnv } from '@/laboratory/lib/env';
-import { useHistory } from '@/laboratory/lib/history';
-import { useOperations } from '@/laboratory/lib/operations';
-import { LaboratoryPluginTab, usePlugins } from '@/laboratory/lib/plugins';
-import { usePreflight } from '@/laboratory/lib/preflight';
-import { useSettings } from '@/laboratory/lib/settings';
-import { LaboratoryTabCustom, useTabs } from '@/laboratory/lib/tabs';
-import { useTests } from '@/laboratory/lib/tests';
-import { cn } from '@/laboratory/lib/utils';
+} from '@/components/ui/empty';
+import { Field, FieldError, FieldGroup, FieldLabel } from '@/components/ui/field';
+import { Input } from '@/components/ui/input';
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
+import { Toaster } from '@/components/ui/sonner';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import laboratoryStyles from '@/index.css?inline';
+import { useCollections } from '@/lib/collections';
+import { useEndpoint } from '@/lib/endpoint';
+import { useEnv } from '@/lib/env';
+import { useHistory } from '@/lib/history';
+import { useOperations } from '@/lib/operations';
+import { LaboratoryPluginTab, usePlugins } from '@/lib/plugins';
+import { usePreflight } from '@/lib/preflight';
+import { useSettings } from '@/lib/settings';
+import { LaboratoryTabCustom, useTabs } from '@/lib/tabs';
+import { useTests } from '@/lib/tests';
+import { cn } from '@/lib/utils';
import { useForm } from '@tanstack/react-form';
+const ShadowRootContainer = (props: { children: ReactNode }) => {
+ const hostRef = useRef
(null);
+ const [shadowRoot, setShadowRoot] = useState(null);
+
+ useLayoutEffect(() => {
+ if (!hostRef.current || shadowRoot) {
+ return;
+ }
+
+ setShadowRoot(hostRef.current.attachShadow({ mode: 'open' }));
+ }, [shadowRoot]);
+
+ return (
+
+ {shadowRoot ? createPortal(props.children, shadowRoot) : null}
+
+ );
+};
+
const addCollectionFormSchema = z.object({
name: z.string().min(1, 'Name is required'),
});
@@ -88,9 +99,7 @@ const addTestFormSchema = z.object({
const PreflightPromptModal = (props: {
open: boolean;
onOpenChange: (open: boolean) => void;
- title?: string;
- description?: string;
- placeholder?: string;
+ placeholder: string;
defaultValue?: string;
onSubmit?: (value: string | null) => void;
}) => {
@@ -125,6 +134,7 @@ const PreflightPromptModal = (props: {
Preflight prompt
+ Enter values for the preflight script.