From beec58ee5ff3ee2dddd9321f91da614cafef7d80 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Thu, 5 Dec 2024 17:10:16 -0300
Subject: [PATCH] fix: re-activated playground page and made it full screen
 (#5066)

* Re-activated playground page

* Added full-screen to show entire content instead of modal

* Added full screen page on new Modal

* Made app wrapper page be full width and height
---
 src/frontend/src/modals/IOModal/newModal.tsx  | 29 ++++---------------
 src/frontend/src/modals/baseModal/index.tsx   |  4 ++-
 .../src/pages/AppWrapperPage/index.tsx        |  2 +-
 src/frontend/src/routes.tsx                   |  4 +--
 4 files changed, 11 insertions(+), 28 deletions(-)

diff --git a/src/frontend/src/modals/IOModal/newModal.tsx b/src/frontend/src/modals/IOModal/newModal.tsx
index 1ab1304be..95578a4d9 100644
--- a/src/frontend/src/modals/IOModal/newModal.tsx
+++ b/src/frontend/src/modals/IOModal/newModal.tsx
@@ -252,14 +252,14 @@ export default function IOModal({
       open={open}
       setOpen={setOpen}
       disable={disable}
-      type={isPlayground ? "modal" : undefined}
+      type={isPlayground ? "full-screen" : undefined}
       onSubmit={() => sendMessage({ repeat: 1 })}
       size="x-large"
       className="!rounded-[12px] p-0"
     >
       <BaseModal.Trigger>{children}</BaseModal.Trigger>
       {/* TODO ADAPT TO ALL TYPES OF INPUTS AND OUTPUTS */}
-      <BaseModal.Content overflowHidden>
+      <BaseModal.Content overflowHidden className="h-full">
         <div className="flex-max-width h-full">
           <div
             className={cn(
@@ -440,7 +440,8 @@ export default function IOModal({
                 <div
                   className={cn(
                     sidebarOpen ? "pointer-events-none opacity-0" : "",
-                    "absolute right-12 top-2 flex h-8 items-center justify-center rounded-sm ring-offset-background transition-opacity focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                    "absolute flex h-8 items-center justify-center rounded-sm ring-offset-background transition-opacity focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                    isPlayground ? "right-2 top-4" : "right-12 top-2",
                   )}
                 >
                   <ShadTooltip
@@ -463,7 +464,7 @@ export default function IOModal({
                       />
                     </Button>
                   </ShadTooltip>
-                  <Separator orientation="vertical" />
+                  {!isPlayground && <Separator orientation="vertical" />}
                 </div>
               </div>
               {haveChat ? (
@@ -503,26 +504,6 @@ export default function IOModal({
           </div>
         </div>
       </BaseModal.Content>
-      {!haveChat ? (
-        <BaseModal.Footer
-          submit={{
-            label: "Run Flow",
-            icon: (
-              <IconComponent
-                name={isBuilding ? "Loader2" : "Zap"}
-                className={cn(
-                  "h-4 w-4",
-                  isBuilding
-                    ? "animate-spin"
-                    : "fill-current text-medium-indigo",
-                )}
-              />
-            ),
-          }}
-        />
-      ) : (
-        <></>
-      )}
     </BaseModal>
   );
 }
diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx
index ffeebaca8..931f871fa 100644
--- a/src/frontend/src/modals/baseModal/index.tsx
+++ b/src/frontend/src/modals/baseModal/index.tsx
@@ -172,7 +172,7 @@ interface BaseModalProps {
   className?: string;
   disable?: boolean;
   onChangeOpenModal?: (open?: boolean) => void;
-  type?: "modal" | "dialog";
+  type?: "modal" | "dialog" | "full-screen";
   onSubmit?: () => void;
   onEscapeKeyDown?: (e: KeyboardEvent) => void;
 }
@@ -231,6 +231,8 @@ function BaseModal({
           {triggerChild}
           <ModalContent className={contentClasses}>{modalContent}</ModalContent>
         </Modal>
+      ) : type === "full-screen" ? (
+        <div className="min-h-full w-full flex-1">{modalContent}</div>
       ) : (
         <Dialog open={open} onOpenChange={setOpen}>
           {triggerChild}
diff --git a/src/frontend/src/pages/AppWrapperPage/index.tsx b/src/frontend/src/pages/AppWrapperPage/index.tsx
index 5fbdd8b71..e2286cd42 100644
--- a/src/frontend/src/pages/AppWrapperPage/index.tsx
+++ b/src/frontend/src/pages/AppWrapperPage/index.tsx
@@ -9,7 +9,7 @@ export function AppWrapperPage() {
   const { healthCheckTimeout, fetchingHealth, refetch } = useHealthCheck();
 
   return (
-    <div className="flex flex-col">
+    <div className="flex h-full w-full flex-col">
       <ErrorBoundary
         onReset={() => {
           // any reset function
diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx
index e236a8210..c5fd39127 100644
--- a/src/frontend/src/routes.tsx
+++ b/src/frontend/src/routes.tsx
@@ -201,9 +201,9 @@ const router = createBrowserRouter(
                 </Route>
                 <Route path="view" element={<ViewPage />} />
               </Route>
-              {/* <Route path="playground/:id/">
+              <Route path="playground/:id/">
                 <Route path="" element={<PlaygroundPage />} />
-              </Route> */}
+              </Route>
             </Route>
           </Route>
           <Route