feat: Cloudformation + RDS

packages/frontend/src/components/Layout.tsx

@@ -11,7 +11,7 @@ import {useQuery} from '@tanstack/react-query'
 import {getCloudStatus} from '@/api/cloudProxyClient'
 import {useCloudServicesQuery} from '@/api/queries/cloudQueries'
 import {AccountSwitcher} from '@/components/AccountSwitcher'
-import {serviceIcon} from '@/components/serviceIcons'
+import {ServiceIcon} from '@/components/serviceIcons'
 import type {CloudProvider, CloudServiceDescriptor, RuntimeReachability} from '@/types/cloud'
 
 /** The runtime's reachability, plus the state before the status query answers. */
@@ -34,11 +34,10 @@ function connectionDotClass(status: ConnectionStatus): string {
 /** Matches today's service count, so the real nav causes no layout jump. */
 const SKELETON_ROWS = 7
 
-function NavItem({to, icon, label, collapsed}: { to: string; icon: React.ElementType; label: string; collapsed: boolean }) {
-    const Icon = icon
+function NavItem({to, icon, label, collapsed}: { to: string; icon: React.ReactNode; label: string; collapsed: boolean }) {
     return (
         <NavLink className="nav-link" to={to} title={collapsed ? label : undefined}>
-            <Icon size={14} aria-hidden="true"/>
+            {icon}
             <span>{label}</span>
         </NavLink>
     )
@@ -110,14 +109,14 @@ function CloudServiceNav({collapsed}: {collapsed: boolean}) {
 }
 
 function CloudServiceNavItem({cloud, service, collapsed}: {cloud: CloudProvider; service: CloudServiceDescriptor; collapsed: boolean}) {
-    const Icon = serviceIcon(service.iconKey)
     const reasonTitle = service.reason ? `${service.displayName} — ${service.reason}` : service.displayName
+    const icon = <ServiceIcon cloud={cloud} iconKey={service.iconKey} size={14}/>
 
     if (service.availability === 'available') {
         const target = service.route.startsWith('/')
             ? service.route
             : `/cloud-explorer/${cloud}/${service.route}`
-        return <NavItem to={target} icon={Icon} label={service.displayName} collapsed={collapsed}/>
+        return <NavItem to={target} icon={icon} label={service.displayName} collapsed={collapsed}/>
     }
 
     // Title duplicates the visible label when the sidebar is expanded, which WAVE
@@ -127,7 +126,7 @@ function CloudServiceNavItem({cloud, service, collapsed}: {cloud: CloudProvider;
             className="nav-link disabled"
             title={collapsed || service.reason ? reasonTitle : undefined}
         >
-            <Icon size={14} aria-hidden="true"/>
+            {icon}
             <span>{service.displayName}</span>
             <span className="nav-soon">Soon</span>
         </div>
@@ -188,7 +187,7 @@ export function Layout() {
                     <nav className="nav" aria-label="Console">
                         <div className="nav-section">
                             <span className="nav-label">General</span>
-                            <NavItem to={`/console/${activeCloud}`} icon={LayoutDashboard} label="Console Home" collapsed={collapsed}/>
+                            <NavItem to={`/console/${activeCloud}`} icon={<LayoutDashboard size={14} aria-hidden="true"/>} label="Console Home" collapsed={collapsed}/>
                         </div>
                         <CloudServiceNav collapsed={collapsed}/>
                     </nav>