TNT-Flo/sandbox-web-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'refs/heads/feat/run-deploy-buttons' into feat/dokku

Browse Source 
# Conflicts:
#	backend/server/package-lock.json
#	backend/server/src/index.ts
#	frontend/components/editor/index.tsx
#	frontend/components/editor/navbar/deploy.tsx
#	frontend/components/editor/navbar/index.tsx
This commit is contained in:
James Murdza 2024-07-27 08:24:40 -04:00
commit 2e68b0b537
10 changed files with 516 additions and 299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/app/layout.tsx
View File

@ -6,6 +6,8 @@ import { ThemeProvider } from "@/components/layout/themeProvider"
import { ClerkProvider } from "@clerk/nextjs"
import { Toaster } from "@/components/ui/sonner"
import { Analytics } from "@vercel/analytics/react"
import { TerminalProvider } from '@/context/TerminalContext';
import { PreviewProvider } from "@/context/PreviewContext"
export const metadata: Metadata = {
title: "Sandbox",
@ -27,7 +29,11 @@ export default function RootLayout({
forcedTheme="dark"
disableTransitionOnChange
>
<PreviewProvider>
<TerminalProvider>
{children}
</TerminalProvider>
</PreviewProvider>
<Analytics />
<Toaster position="bottom-left" richColors />
</ThemeProvider>

40
frontend/components/editor/index.tsx
View File

@ -31,6 +31,8 @@ import Loading from "./loading"
import PreviewWindow from "./preview"
import Terminals from "./terminals"
import { ImperativePanelHandle } from "react-resizable-panels"
import { PreviewProvider, usePreview } from '@/context/PreviewContext';
import { useTerminal } from '@/context/TerminalContext';
export default function CodeEditor({
userData,
@ -44,12 +46,21 @@ export default function CodeEditor({
// Initialize socket connection if it doesn't exist
if (!socketRef.current) {
socketRef.current = io(
`${process.env.NEXT_PUBLIC_SERVER_URL}?userId=${userData.id}&sandboxId=${sandboxData.id}`,
`${window.location.protocol}//${window.location.hostname}:${process.env.NEXT_PUBLIC_SERVER_PORT}?userId=${userData.id}&sandboxId=${sandboxData.id}`,
{
timeout: 2000,
}
);}
);
}
//Terminalcontext functionsand effects
const { setUserAndSandboxId } = useTerminal();
useEffect(() => {
setUserAndSandboxId(userData.id, sandboxData.id);
}, [userData.id, sandboxData.id, setUserAndSandboxId]);
//Preview Button state
const [isPreviewCollapsed, setIsPreviewCollapsed] = useState(true)
const [disableAccess, setDisableAccess] = useState({
isDisabled: false,
@ -315,7 +326,7 @@ export default function CodeEditor({
console.log(`Saving file...${activeFileId}`);
console.log(`Saving file...${value}`);
socketRef.current?.emit("saveFile", activeFileId, value);
}, Number(process.env.FILE_SAVE_DEBOUNCE_DELAY)||1000),
}, Number(process.env.FILE_SAVE_DEBOUNCE_DELAY) || 1000),
[socketRef]
);
@ -383,7 +394,6 @@ export default function CodeEditor({
);
providerData.binding = binding;
setProvider(providerData.provider);
return () => {
@ -415,7 +425,6 @@ export default function CodeEditor({
// Connection/disconnection effect
useEffect(() => {
socketRef.current?.connect()
return () => {
socketRef.current?.disconnect()
}
@ -423,7 +432,7 @@ export default function CodeEditor({
// Socket event listener effect
useEffect(() => {
const onConnect = () => {}
const onConnect = () => { }
const onDisconnect = () => {
setTerminals([])
@ -622,7 +631,7 @@ export default function CodeEditor({
<DisableAccessModal
message={disableAccess.message}
open={disableAccess.isDisabled}
setOpen={() => {}}
setOpen={() => { }}
/>
<Loading />
</>
@ -631,6 +640,7 @@ export default function CodeEditor({
return (
<>
{/* Copilot DOM elements */}
<PreviewProvider>
<div ref={generateRef} />
<div className="z-50 p-1" ref={generateWidgetRef}>
{generate.show && ai ? (
@ -801,7 +811,7 @@ export default function CodeEditor({
<ResizablePanel defaultSize={40}>
<ResizablePanelGroup direction="vertical">
<ResizablePanel
ref={previewPanelRef}
ref={usePreview().previewPanelRef}
defaultSize={4}
collapsedSize={4}
minSize={25}
@ -811,13 +821,10 @@ export default function CodeEditor({
onExpand={() => setIsPreviewCollapsed(false)}
>
<PreviewWindow
collapsed={isPreviewCollapsed}
open={() => {
previewPanelRef.current?.expand()
usePreview().previewPanelRef.current?.expand()
setIsPreviewCollapsed(false)
}}
src={previewURL}
/>
} } collapsed={isPreviewCollapsed} src={previewURL}/>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel
@ -826,11 +833,7 @@ export default function CodeEditor({
className="p-2 flex flex-col"
>
{isOwner ? (
<Terminals
terminals={terminals}
setTerminals={setTerminals}
socket={socketRef.current}
/>
<Terminals />
) : (
<div className="w-full h-full flex items-center justify-center text-lg font-medium text-muted-foreground/50 select-none">
<TerminalSquare className="w-4 h-4 mr-2" />
@ -841,6 +844,7 @@ export default function CodeEditor({
</ResizablePanelGroup>
</ResizablePanel>
</ResizablePanelGroup>
</PreviewProvider>
</>
)
}

13
frontend/components/editor/navbar/index.tsx
View File

@ -11,6 +11,7 @@ import { useState } from "react";
import EditSandboxModal from "./edit";
import ShareSandboxModal from "./share";
import { Avatars } from "../live/avatars";
import RunButtonModal from "./run";
import DeployButtonModal from "./deploy";
export default function Navbar({
@ -20,15 +21,13 @@ export default function Navbar({
}: {
userData: User;
sandboxData: Sandbox;
shared: {
id: string;
name: string;
}[];
shared: { id: string; name: string }[];
}) {
const [isEditOpen, setIsEditOpen] = useState(false);
const [isShareOpen, setIsShareOpen] = useState(false);
const [isRunning, setIsRunning] = useState(false);
const isOwner = sandboxData.userId === userData.id;
const isOwner = sandboxData.userId === userData.id;;
return (
<>
@ -63,6 +62,10 @@ export default function Navbar({
) : null}
</div>
</div>
<RunButtonModal
isRunning={isRunning}
setIsRunning={setIsRunning}
/>
<div className="flex items-center h-full space-x-4">
<Avatars />

59
frontend/components/editor/navbar/run.tsx Normal file
View File

@ -0,0 +1,59 @@
"use client";
import { Play, StopCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useTerminal } from "@/context/TerminalContext";
import { usePreview } from "@/context/PreviewContext";
import { toast } from "sonner";
export default function RunButtonModal({
isRunning,
setIsRunning,
}: {
isRunning: boolean;
setIsRunning: (running: boolean) => void;
}) {
const { createNewTerminal, terminals, closeTerminal } = useTerminal();
const { setIsPreviewCollapsed, previewPanelRef} = usePreview();
const handleRun = () => {
if (isRunning) {
console.log('Stopping sandbox...');
console.log('Closing Preview Window');
terminals.forEach(term => {
if (term.terminal) {
closeTerminal(term.id);
console.log('Closing Terminal', term.id);
}
});
setIsPreviewCollapsed(true);
previewPanelRef.current?.collapse();
} else {
console.log('Running sandbox...');
console.log('Opening Terminal');
console.log('Opening Preview Window');
if (terminals.length < 4) {
createNewTerminal();
} else {
toast.error("You reached the maximum # of terminals.");
console.error('Maximum number of terminals reached.');
}
setIsPreviewCollapsed(false);
previewPanelRef.current?.expand();
}
setIsRunning(!isRunning);
};
return (
<>
<Button variant="outline" onClick={handleRun}>
{isRunning ? <StopCircle className="w-4 h-4 mr-2" /> : <Play className="w-4 h-4 mr-2" />}
{isRunning ? 'Stop' : 'Run'}
</Button>
</>
);
}

21
frontend/components/editor/preview/index.tsx
View File

@ -1,13 +1,9 @@
"use client"
import {
ChevronLeft,
ChevronRight,
Globe,
Link,
RotateCw,
TerminalSquare,
UnfoldVertical,
} from "lucide-react"
import { useRef, useState } from "react"
import { toast } from "sonner"
@ -27,22 +23,22 @@ export default function PreviewWindow({
return (
<>
<div
className={`${
collapsed ? "h-full" : "h-10"
className={`${collapsed ? "h-full" : "h-10"
} select-none w-full flex gap-2`}
>
<div className="h-8 rounded-md px-3 bg-secondary flex items-center w-full justify-between">
<div className="text-xs">Preview</div>
<div className="flex space-x-1 translate-x-1">
{collapsed ? (
<PreviewButton onClick={open}>
<UnfoldVertical className="w-4 h-4" />
<PreviewButton disabled onClick={() => { }}>
<TerminalSquare className="w-4 h-4" />
</PreviewButton>
) : (
<>
{/* Todo, make this open inspector */}
{/* <PreviewButton disabled onClick={() => {}}>
<TerminalSquare className="w-4 h-4" />
{/* Removed the unfoldvertical button since we have the same thing via the run button.
<PreviewButton onClick={open}>
<UnfoldVertical className="w-4 h-4" />
</PreviewButton> */}
<PreviewButton
@ -94,8 +90,7 @@ function PreviewButton({
}) {
return (
<div
className={`${
disabled ? "pointer-events-none opacity-50" : ""
className={`${disabled ? "pointer-events-none opacity-50" : ""
} p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm`}
onClick={onClick}
>

71
frontend/components/editor/terminals/index.tsx
View File

@ -2,35 +2,42 @@
import { Button } from "@/components/ui/button";
import Tab from "@/components/ui/tab";
import { closeTerminal, createTerminal } from "@/lib/terminal";
import { Terminal } from "@xterm/xterm";
import { Loader2, Plus, SquareTerminal, TerminalSquare } from "lucide-react";
import { Socket } from "socket.io-client";
import { toast } from "sonner";
import EditorTerminal from "./terminal";
import { useState } from "react";
import { useTerminal } from "@/context/TerminalContext";
import { useEffect } from "react";
export default function Terminals({
export default function Terminals() {
const {
terminals,
setTerminals,
socket,
}: {
terminals: { id: string; terminal: Terminal | null }[];
setTerminals: React.Dispatch<
React.SetStateAction<
{
id: string;
terminal: Terminal | null;
}[]
>
>;
socket: Socket;
}) {
const [activeTerminalId, setActiveTerminalId] = useState("");
const [creatingTerminal, setCreatingTerminal] = useState(false);
const [closingTerminal, setClosingTerminal] = useState("");
createNewTerminal,
closeTerminal,
activeTerminalId,
setActiveTerminalId,
creatingTerminal,
} = useTerminal();
const activeTerminal = terminals.find((t) => t.id === activeTerminalId);
// Effect to set the active terminal when a new one is created
useEffect(() => {
if (terminals.length > 0 && !activeTerminalId) {
setActiveTerminalId(terminals[terminals.length - 1].id);
}
}, [terminals, activeTerminalId, setActiveTerminalId]);
const handleCreateTerminal = () => {
if (terminals.length >= 4) {
toast.error("You reached the maximum # of terminals.");
return;
}
createNewTerminal();
};
return (
<>
<div className="h-10 w-full overflow-auto flex gap-2 shrink-0 tab-scroll">
@ -39,18 +46,7 @@ export default function Terminals({
key={term.id}
creating={creatingTerminal}
onClick={() => setActiveTerminalId(term.id)}
onClose={() =>
closeTerminal({
term,
terminals,
setTerminals,
setActiveTerminalId,
setClosingTerminal,
socket,
activeTerminalId,
})
}
closing={closingTerminal === term.id}
onClose={() => closeTerminal(term.id)}
selected={activeTerminalId === term.id}
>
<SquareTerminal className="w-4 h-4 mr-2" />
@ -59,18 +55,7 @@ export default function Terminals({
))}
<Button
disabled={creatingTerminal}
onClick={() => {
if (terminals.length >= 4) {
toast.error("You reached the maximum # of terminals.");
return;
}
createTerminal({
setTerminals,
setActiveTerminalId,
setCreatingTerminal,
socket,
});
}}
onClick={handleCreateTerminal}
size="smIcon"
variant={"secondary"}
className={`font-normal shrink-0 select-none text-muted-foreground disabled:opacity-50`}

14
frontend/components/editor/terminals/terminal.tsx
View File

@ -74,6 +74,20 @@ export default function EditorTerminal({
};
}, [term, terminalRef.current]);
useEffect(() => {
if (!term) return;
const handleTerminalResponse = (response: { id: string; data: string }) => {
if (response.id === id) {
term.write(response.data);
}
};
socket.on("terminalResponse", handleTerminalResponse);
return () => {
socket.off("terminalResponse", handleTerminalResponse);
};
}, [term, id, socket]);
return (
<>
<div

34
frontend/context/PreviewContext.tsx Normal file
View File

@ -0,0 +1,34 @@
"use client"
import React, { createContext, useContext, useState, useRef } from 'react';
import { ImperativePanelHandle } from "react-resizable-panels";
interface PreviewContextType {
isPreviewCollapsed: boolean;
setIsPreviewCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
previewURL: string;
setPreviewURL: React.Dispatch<React.SetStateAction<string>>;
previewPanelRef: React.RefObject<ImperativePanelHandle>;
}
const PreviewContext = createContext<PreviewContextType | undefined>(undefined);
export const PreviewProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [isPreviewCollapsed, setIsPreviewCollapsed] = useState(true);
const [previewURL, setPreviewURL] = useState<string>("");
const previewPanelRef = useRef<ImperativePanelHandle>(null);
return (
<PreviewContext.Provider value={{ isPreviewCollapsed, setIsPreviewCollapsed, previewURL, setPreviewURL, previewPanelRef }}>
{children}
</PreviewContext.Provider>
);
};
export const usePreview = () => {
const context = useContext(PreviewContext);
if (context === undefined) {
throw new Error('usePreview must be used within a PreviewProvider');
}
return context;
};

117
frontend/context/TerminalContext.tsx Normal file
View File

@ -0,0 +1,117 @@
"use client";
import React, { createContext, useContext, useState, useEffect } from 'react';
import { io, Socket } from 'socket.io-client';
import { Terminal } from '@xterm/xterm';
import { createTerminal as createTerminalHelper, closeTerminal as closeTerminalHelper } from '@/lib/terminal';
interface TerminalContextType {
socket: Socket | null;
terminals: { id: string; terminal: Terminal | null }[];
setTerminals: React.Dispatch<React.SetStateAction<{ id: string; terminal: Terminal | null }[]>>;
activeTerminalId: string;
setActiveTerminalId: React.Dispatch<React.SetStateAction<string>>;
creatingTerminal: boolean;
setCreatingTerminal: React.Dispatch<React.SetStateAction<boolean>>;
createNewTerminal: () => void;
closeTerminal: (id: string) => void;
setUserAndSandboxId: (userId: string, sandboxId: string) => void;
}
const TerminalContext = createContext<TerminalContextType | undefined>(undefined);
export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [socket, setSocket] = useState<Socket | null>(null);
const [terminals, setTerminals] = useState<{ id: string; terminal: Terminal | null }[]>([]);
const [activeTerminalId, setActiveTerminalId] = useState<string>('');
const [creatingTerminal, setCreatingTerminal] = useState<boolean>(false);
const [userId, setUserId] = useState<string | null>(null);
const [sandboxId, setSandboxId] = useState<string | null>(null);
useEffect(() => {
if (userId && sandboxId) {
console.log("Initializing socket connection...");
const newSocket = io(`${window.location.protocol}//${window.location.hostname}:${process.env.NEXT_PUBLIC_SERVER_PORT}?userId=${userId}&sandboxId=${sandboxId}`);
console.log("Socket instance:", newSocket);
setSocket(newSocket);
newSocket.on('connect', () => {
console.log("Socket connected:", newSocket.id);
});
newSocket.on('disconnect', () => {
console.log("Socket disconnected");
});
return () => {
console.log("Disconnecting socket...");
newSocket.disconnect();
};
}
}, [userId, sandboxId]);
const createNewTerminal = async () => {
if (!socket) return;
setCreatingTerminal(true);
try {
createTerminalHelper({
setTerminals,
setActiveTerminalId,
setCreatingTerminal,
socket,
});
} catch (error) {
console.error("Error creating terminal:", error);
} finally {
setCreatingTerminal(false);
}
};
const closeTerminal = (id: string) => {
if (!socket) return;
const terminalToClose = terminals.find(term => term.id === id);
if (terminalToClose) {
closeTerminalHelper({
term: terminalToClose,
terminals,
setTerminals,
setActiveTerminalId,
setClosingTerminal: () => {},
socket,
activeTerminalId,
});
}
};
const setUserAndSandboxId = (newUserId: string, newSandboxId: string) => {
setUserId(newUserId);
setSandboxId(newSandboxId);
};
const value = {
socket,
terminals,
setTerminals,
activeTerminalId,
setActiveTerminalId,
creatingTerminal,
setCreatingTerminal,
createNewTerminal,
closeTerminal,
setUserAndSandboxId,
};
return (
<TerminalContext.Provider value={value}>
{children}
</TerminalContext.Provider>
);
};
export const useTerminal = (): TerminalContextType => {
const context = useContext(TerminalContext);
if (!context) {
throw new Error('useTerminal must be used within a TerminalProvider');
}
return context;
};