test

src/common.tsx

@@ -17,6 +17,7 @@ import MenuItem from '@mui/material/MenuItem';
 import MenuList from '@mui/material/MenuList';
 import { Permission } from "./actions";
 import TerminalComponent from "./terminal";
+import ReactDOM from "react-dom/client";
 
 export const apiAuthenticatedContext: Context<[boolean, Dispatch<boolean>]> = createContext([false, (value: boolean) => {}] as [boolean, Dispatch<boolean>])
 
@@ -264,6 +265,16 @@ export function ActionItem(p: { action: ActionInfo, identifierSubstring?: string
         setFormData(args.formData)
     }
 
+    function createTerminal(websocket: string){
+        const window = open('', '', 'width=800 height=600')!
+        window.document.write('<div id="root" width="100%" height="100%"/>')
+        
+        const root = ReactDOM.createRoot(
+            window.document.getElementById('root') as HTMLElement
+          );
+        root.render(<Box><TerminalComponent websocket={websocket}/></Box>)
+    }
+
     return (<>
         <Button variant={p.variant} disabled={!isUserAllowed(user, p.action)} onClick={() => { if (p.onClick) { p.onClick() } p.action.response_action == 'Terminal'?setTerminal(`ws${API_URL.slice("http".length)}${url}`):setForm(true) }} sx={p.sx}>{p.action.name}</Button >
         <Modal

src/terminal.tsx

@@ -78,7 +78,7 @@ function TerminalComponent (p: {websocket: string|null}) {
 
     useTerminalResize(terminalRef, fitAddon.current!)
 
-    return <NewWindow><div ref={terminalRef} style={{ width: '100%', height: '100%' }}></div></NewWindow>
+    return <div ref={terminalRef} style={{ width: '100%', height: '100%' }}></div>
 };
 
 export default TerminalComponent;