small feat: svg animation for servers, codebuild, codePipleline etc...

packages/frontend/src/components/LightsailInstancePanel.tsx

@@ -19,6 +19,7 @@ export function LightsailInstancePanel({resource, runtimeReachable, onDeleted}:
     const [startCommand, setStartCommand] = useState('')
     const [confirmDelete, setConfirmDelete] = useState(false)
     const fileInput = useRef<HTMLInputElement>(null)
+    const actionsMenu = useRef<HTMLDetailsElement>(null)
     const ports = publicPorts(resource?.metadata.networking)
     const hostMappings = hostPortMappings(resource?.metadata.hostPortMappings)
     const disks = instanceDisks(resource?.metadata.hardware)
@@ -100,11 +101,12 @@ export function LightsailInstancePanel({resource, runtimeReachable, onDeleted}:
     const wordpress = stringMetadata(resource.metadata.blueprintId) === 'wordpress'
     const wordpressPort = hostMappings.find((mapping) => mapping.instancePort === 80)
     const stateLabel = resource.status ?? 'Unknown'
+    const closeActionsMenu = () => actionsMenu.current?.removeAttribute('open')
 
     return <section className="table-panel lightsail-instance-panel" style={{marginTop: 16}}>
         <header className="lightsail-instance-header">
             <div><p className="eyebrow">Amazon Lightsail instance</p><h2>{resource.name}</h2><p className="muted"><code>{resource.id}</code>{resource.region && <> · {resource.region}</>}</p></div>
-            <div className="lightsail-instance-controls"><span className={`runtime-state ${status === 'running' ? 'ready' : 'pending'}`}>{stateLabel}</span><details className="dynamodb-actions"><summary>Actions <ChevronDown size={14}/></summary><div className="dynamodb-actions-menu lightsail-actions-menu"><button type="button" onClick={() => setTab('overview')}><Settings size={14}/>Manage</button><button type="button" disabled={!runtimeReachable || busy || status !== 'stopped'} onClick={() => lifecycle.mutate('start')}><Play size={14}/>Start</button><button type="button" disabled={!runtimeReachable || busy || status !== 'running'} onClick={() => lifecycle.mutate('stop')}><Square size={14}/>Stop</button><button type="button" disabled={!runtimeReachable || busy || status !== 'running'} onClick={() => lifecycle.mutate('reboot')}><RotateCw size={14}/>Reboot</button><button className="dynamodb-action-delete" type="button" disabled={!runtimeReachable || busy} onClick={() => setConfirmDelete(true)}><Trash2 size={14}/>Delete</button></div></details></div>
+            <div className="lightsail-instance-controls"><span className={`runtime-state ${status === 'running' ? 'ready' : 'pending'}`}>{stateLabel}</span><details className="dynamodb-actions" ref={actionsMenu}><summary>Actions <ChevronDown size={14}/></summary><div className="dynamodb-actions-menu lightsail-actions-menu"><button type="button" onClick={() => { closeActionsMenu(); setTab('overview') }}><Settings size={14}/>Manage</button><button type="button" disabled={!runtimeReachable || busy || status !== 'stopped'} onClick={() => { closeActionsMenu(); lifecycle.mutate('start') }}><Play size={14}/>Start</button><button type="button" disabled={!runtimeReachable || busy || status !== 'running'} onClick={() => { closeActionsMenu(); lifecycle.mutate('stop') }}><Square size={14}/>Stop</button><button type="button" disabled={!runtimeReachable || busy || status !== 'running'} onClick={() => { closeActionsMenu(); lifecycle.mutate('reboot') }}><RotateCw size={14}/>Reboot</button><button className="dynamodb-action-delete" type="button" disabled={!runtimeReachable || busy} onClick={() => { closeActionsMenu(); setConfirmDelete(true) }}><Trash2 size={14}/>Delete</button></div></details></div>
         </header>
         <div className="drawer-tabs lightsail-instance-tabs" role="tablist" aria-label="Instance details">
             <button className={`drawer-tab ${tab === 'overview' ? 'active' : ''}`} type="button" role="tab" aria-selected={tab === 'overview'} onClick={() => setTab('overview')}>Overview</button>