feat: remove modules and focus on deployments (#480)

Fixes #474 

![Screenshot 2023-10-11 at 12 25
34 PM](https://github.com/TBD54566975/ftl/assets/51647/365409a6-a239-40ad-8542-8f8c3f0c2345)
![Screenshot 2023-10-11 at 12 25
40 PM](https://github.com/TBD54566975/ftl/assets/51647/2cb75dee-f343-4024-95e3-ff1ac1787daa)
![Screenshot 2023-10-11 at 12 25
43 PM](https://github.com/TBD54566975/ftl/assets/51647/57ee86e3-39f2-427c-8374-f07a22b6333c)
![Screenshot 2023-10-11 at 12 25
48 PM](https://github.com/TBD54566975/ftl/assets/51647/844e16de-4bc3-499a-86e1-536b15d11301)

console/client/src/App.tsx

@@ -2,8 +2,6 @@ import { Navigate, Route, Routes } from 'react-router-dom'
 import { DeploymentPage } from './features/deployments/DeploymentPage.tsx'
 import { DeploymentsPage } from './features/deployments/DeploymentsPage.tsx'
 import { GraphPage } from './features/graph/GraphPage.tsx'
-import { ModulePage } from './features/modules/ModulePage.tsx'
-import { ModulesPage } from './features/modules/ModulesPage.tsx'
 import { TimelinePage } from './features/timeline/TimelinePage.tsx'
 import { VerbPage } from './features/verbs/VerbPage.tsx'
 import { Layout } from './layout/Layout.tsx'
@@ -15,12 +13,9 @@ export const App = () => {
         <Route path='/' element={<Navigate to='events' replace />} />
         <Route path='events' element={<TimelinePage />} />
 
-        <Route path='modules' element={<ModulesPage />} />
-        <Route path='modules/:moduleName' element={<ModulePage />} />
-        <Route path='modules/:moduleName/verbs/:verbName' element={<VerbPage />} />
-
         <Route path='deployments' element={<DeploymentsPage />} />
         <Route path='deployments/:deploymentName' element={<DeploymentPage />} />
+        <Route path='deployments/:deploymentName/verbs/:verbName' element={<VerbPage />} />
 
         <Route path='graph' element={<GraphPage />} />
       </Route>

console/client/src/components/Badge.tsx

@@ -0,0 +1,9 @@
+export const Badge = ({ name, className }: { name: string; className?: string }) => {
+  return (
+    <span
+      className={`inline-flex items-center rounded-lg bg-gray-100 dark:bg-gray-700 px-2 py-1 text-xs font-medium text-gray-600 dark:text-gray-300 ${className}`}
+    >
+      {name}
+    </span>
+  )
+}

console/client/src/components/ButtonExtraSmall.tsx

@@ -0,0 +1,17 @@
+interface Props {
+  children: React.ReactNode
+  onClick?: () => void
+  className?: string
+}
+
+export const ButtonExtraSmall = ({ children, onClick }: Props) => {
+  return (
+    <button
+      type='button'
+      onClick={onClick}
+      className='rounded bg-indigo-600 px-1.5 py-0.5 text-xs font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
+    >
+      {children}
+    </button>
+  )
+}

console/client/src/features/deployments/DeploymentCard.tsx

@@ -1,13 +1,43 @@
+import { useContext, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
+import { Badge } from '../../components/Badge'
 import { Card } from '../../components/Card'
+import { Module } from '../../protos/xyz/block/ftl/v1/console/console_pb'
+import { modulesContext } from '../../providers/modules-provider'
 import { deploymentTextColor } from './deployment.utils'
 
-export const DeploymentCard = ({ name, className }: { name: string; className?: string }) => {
+export const DeploymentCard = ({ deploymentName, className }: { deploymentName: string; className?: string }) => {
   const navigate = useNavigate()
+  const { modules } = useContext(modulesContext)
+  const [module, setModule] = useState<Module | undefined>()
+
+  useEffect(() => {
+    if (modules) {
+      const module = modules.find((module) => module.deploymentName === deploymentName)
+      setModule(module)
+    }
+  }, [modules])
+
   return (
-    <Card key={name} topBarColor='bg-green-500' className={className} onClick={() => navigate(`/deployments/${name}`)}>
-      {name}
-      <p className={`text-xs ${deploymentTextColor(name)}`}>{name}</p>
+    <Card
+      key={deploymentName}
+      topBarColor='bg-green-500'
+      className={className}
+      onClick={() => navigate(`/deployments/${deploymentName}`)}
+    >
+      <div className='flex flex-col'>
+        <div className='flex items-center'>
+          <p className={` ${deploymentTextColor(deploymentName)}`}>{deploymentName}</p>
+          <Badge className='ml-auto' name={module?.language ?? ''} />
+        </div>
+        <div className='mt-2 gap-1 flex flex-wrap'>
+          {module?.verbs.map((verb, index) => (
+            <span key={index} className='text-xs rounded mr-1 px-1 py-0.5 border border-indigo-500'>
+              {verb.verb?.name}
+            </span>
+          ))}
+        </div>
+      </div>
     </Card>
   )
 }

console/client/src/features/deployments/DeploymentPage.tsx

@@ -48,6 +48,13 @@ export const DeploymentPage = () => {
     setCalls(Array.from(verbCalls))
   }, [module])
 
+  const handleCallClick = (verb: VerbRef) => {
+    const module = modules?.modules.find((module) => module.name === verb.module)
+    if (module) {
+      navigate(`/deployments/${module.deploymentName}/verbs/${verb.name}`)
+    }
+  }
+
   return (
     <Page>
       <Page.Header
@@ -60,9 +67,9 @@ export const DeploymentPage = () => {
         <div className='grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4'>
           {module?.verbs.map((verb) => (
             <Card
-              key={module.deploymentName}
+              key={verb.verb?.name}
               topBarColor='bg-green-500'
-              onClick={() => navigate(`/modules/${module.name}/verbs/${verb.verb?.name}`)}
+              onClick={() => navigate(`/deployments/${module.deploymentName}/verbs/${verb.verb?.name}`)}
             >
               {verb.verb?.name}
               <p className='text-xs text-gray-400'>{verb.verb?.name}</p>
@@ -74,9 +81,7 @@ export const DeploymentPage = () => {
         <ul className='pt-2 flex space-x-2'>
           {calls?.map((verb) => (
             <li key={`${module?.name}-${verb.module}-${verb.name}`} className='text-xs'>
-              <ButtonSmall onClick={() => navigate(`/modules/${verb.module}/verbs/${verb.name}`)}>
-                {verbRefString(verb)}
-              </ButtonSmall>
+              <ButtonSmall onClick={() => handleCallClick(verb)}>{verbRefString(verb)}</ButtonSmall>
             </li>
           ))}
         </ul>

console/client/src/features/deployments/DeploymentsPage.tsx

@@ -13,7 +13,7 @@ export const DeploymentsPage = () => {
       <Page.Body className='p-4'>
         <div className='grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4'>
           {modules.modules.map((module) => (
-            <DeploymentCard key={module.deploymentName} name={module.deploymentName} />
+            <DeploymentCard key={module.deploymentName} deploymentName={module.deploymentName} />
           ))}
         </div>
       </Page.Body>