WIP wasp dev tools

Signed-off-by: Mihovil Ilakovac <mihovil@ilakovac.com>

waspc/data/Generator/templates/react-app/src/components/WaspDevTools.module.css

@@ -0,0 +1,27 @@
+.container {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  padding: 2rem;
+  padding-bottom: 1rem;
+}
+
+.container:hover .devTools {
+  /* transform: translateY(0); */
+}
+
+.devTools {
+  background-color: white;
+  border-radius: 9999px;
+  padding: 0.5rem 1rem;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  font-family: sans-serif;
+  /* transform: translateY(100%);
+  transition: transform 0.3s; */
+}
+
+.prismaStatusText {
+  display: inline-flex;
+  align-items: center;
+}

waspc/data/Generator/templates/react-app/src/components/WaspDevTools.tsx

@@ -0,0 +1,43 @@
+{{={= =}=}}
+import styles from './WaspDevTools.module.css'
+
+export function WaspDevTools() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.devTools}>
+        Prisma status: <PrismaStatusText status="{= prismaStatus =}" />
+      </div>
+    </div>
+  )
+}
+
+type PrismaStatus = 'ok' | 'needsMigration' | 'error'
+
+const statusToText: Record<PrismaStatus, string> = {
+  ok: 'all good',
+  needsMigration: 'needs migration',
+  error: 'error',
+}
+
+const statusToColor: Record<PrismaStatus, string> = {
+  ok: '#22c55e',
+  needsMigration: '#a855f7',
+  error: '#dc2626',
+}
+
+function PrismaStatusText({ status }: { status: PrismaStatus }) {
+  const color = statusToColor[status]
+  const text = statusToText[status]
+
+  return (
+    <span
+      className={styles.prismaStatusText}
+      style={{ color }}
+    >
+      {text}{' '}
+      <svg width="10" height="10" style={{ marginLeft: '0.5rem' }}>
+        <circle cx="5" cy="5" r="5" fill="currentColor" />
+      </svg>
+    </span>
+  )
+}

waspc/data/Generator/templates/react-app/src/index.tsx

@@ -9,6 +9,8 @@ import {
   queryClientInitialized,
 } from 'wasp/client/operations'
 
+import { WaspDevTools } from './components/WaspDevTools'
+
 {=# setupFn.isDefined =}
 {=& setupFn.importStatement =}
 {=/ setupFn.isDefined =}
@@ -42,6 +44,7 @@ async function render() {
         {router}
         {=/ areWebSocketsUsed =}
       </QueryClientProvider>
+      <WaspDevTools />
     </React.StrictMode>
   )
 }

waspc/src/Wasp/Generator.hs

@@ -6,6 +6,7 @@ module Wasp.Generator
   )
 where
 
+import Data.Aeson (KeyValue ((.=)), object)
 import Data.List.NonEmpty (toList)
 import qualified Data.Text
 import qualified Data.Text.IO
@@ -27,6 +28,7 @@ import Wasp.Generator.Setup (runSetup)
 import qualified Wasp.Generator.Start
 import qualified Wasp.Generator.Test
 import Wasp.Generator.WebAppGenerator (genWebApp)
+import qualified Wasp.Generator.WebAppGenerator.Common as WebApp
 import Wasp.Generator.WriteFileDrafts (synchronizeFileDraftsWithDisk)
 import Wasp.Message (SendMessage)
 import Wasp.Util ((<++>))
@@ -49,7 +51,17 @@ writeWebAppCode spec dstDir sendMessage = do
       synchronizeFileDraftsWithDisk dstDir fileDrafts
       writeDotWaspInfo dstDir
       (setupGeneratorWarnings, setupGeneratorErrors) <- runSetup spec dstDir sendMessage
-      return (generatorWarnings ++ setupGeneratorWarnings, setupGeneratorErrors)
+
+      let prismaStatus = if null setupGeneratorErrors then "ok" else "needsMigration"
+
+      let (devToolsWarnings, devToolsResult) = runGenerator $ genWaspDevTools prismaStatus
+
+      case devToolsResult of
+        Left devToolsErrors -> return (devToolsWarnings, toList devToolsErrors)
+        Right devToolsFileDrafts -> do
+          synchronizeFileDraftsWithDisk dstDir (fileDrafts ++ devToolsFileDrafts)
+
+          return (generatorWarnings ++ setupGeneratorWarnings, setupGeneratorErrors)
 
 genApp :: AppSpec -> Generator [FileDraft]
 genApp spec =
@@ -60,6 +72,15 @@ genApp spec =
     <++> genDockerFiles spec
     <++> genConfigFiles spec
 
+genWaspDevTools :: String -> Generator [FileDraft]
+genWaspDevTools prismaStatus =
+  return $
+    [ WebApp.mkTmplFdWithDstAndData
+        [relfile|src/components/WaspDevTools.tsx|]
+        [relfile|src/components/WaspDevTools.tsx|]
+        (Just $ object ["prismaStatus" .= prismaStatus])
+    ]
+
 -- | Writes .waspinfo, which contains some basic metadata about how/when wasp generated the code.
 writeDotWaspInfo :: Path' Abs (Dir ProjectRootDir) -> IO ()
 writeDotWaspInfo dstDir = do

waspc/src/Wasp/Generator/WebAppGenerator.hs

@@ -196,6 +196,11 @@ genSrcDir spec =
       genFileCopy [relfile|vite-env.d.ts|],
       genFileCopy [relfile|test/vitest/setup.ts|],
       genFileCopy [relfile|components/Message.tsx|],
+      -- WaspDevTools.tsx is generated in the Wasp.Generator to have
+      -- access to the errors and warnings that are outputed during the
+      -- generation process.
+      -- genFileCopy [relfile|components/WaspDevTools.tsx|],
+      genFileCopy [relfile|components/WaspDevTools.module.css|],
       genFileCopy [relfile|components/Loader.tsx|],
       genFileCopy [relfile|components/Loader.module.css|],
       genFileCopy [relfile|components/FullPageWrapper.tsx|],