feat: Lightsail + svg animation

packages/frontend/src/components/DynamicResourceView.tsx

@@ -43,6 +43,7 @@ import { ServerlessInvokePanel } from "@/components/ServerlessInvokePanel";
 import { dataExplorerPath } from "@/lib/dataExplorer";
 import { DatabaseSnapshotsPanel } from "@/components/DatabaseSnapshotsPanel";
 import { CreateRdsInstanceForm } from "@/components/CreateRdsInstanceForm";
+import { DatabaseLaunchProgress } from "@/components/DatabaseLaunchProgress";
 import { AppConfigPanel } from "@/components/AppConfigPanel";
 import { KmsCryptoPanel } from "@/components/KmsCryptoPanel";
 import { ApiGatewayRoutePanel } from "@/components/ApiGatewayRoutePanel";
@@ -73,6 +74,8 @@ import {WorkflowCreatePanel} from "@/components/WorkflowCreatePanel";
 import {KinesisPanel} from "@/components/KinesisPanel";
 import {SesConsolePanel} from '@/components/SesConsolePanel'
 import {ElastiCacheManagementPanel} from '@/components/ElastiCacheManagementPanel'
+import {LightsailLaunchPanel} from '@/components/LightsailLaunchPanel'
+import {LightsailInstancePanel} from '@/components/LightsailInstancePanel'
 import {workflowCreationDestinationPath, type WorkflowCreationDestination} from "@/lib/workflowCreate";
 import {workflowStudioPath} from "@/lib/workflowStudio";
 import {useNavigate, useSearchParams} from "react-router-dom";
@@ -88,6 +91,8 @@ interface DynamicResourceViewProps {
   onOpenInfo: () => void;
 }
 
+const ELASTICACHE_CREATION_MINIMUM_MS = 5_000;
+
 interface CreateMutationVariables {
   values: Record<string, unknown>;
   destination?: WorkflowCreationDestination;
@@ -220,6 +225,10 @@ export function DynamicResourceView({
       delete lambdaValues.blueprintQueueName;
       delete lambdaValues.blueprintSqsBatchSize;
       const resource = await createCloudResource(cloud, service, lambdaValues);
+      if (cloud === "aws" && service === "elasticache") {
+        await new Promise<void>((resolve) => setTimeout(resolve, ELASTICACHE_CREATION_MINIMUM_MS));
+        return resource;
+      }
       if (blueprintBucketName) {
         let bucketCreated = false;
         try {
@@ -817,6 +826,13 @@ export function DynamicResourceView({
                       }}
                       onCancel={() => setCreateOpen(false)}
                     />
+                  ) : service === "lightsail" && cloud === "aws" ? (
+                    <LightsailLaunchPanel
+                      isSubmitting={createMut.isPending}
+                      submitError={createMut.error instanceof Error ? createMut.error.message : null}
+                      onCancel={() => setCreateOpen(false)}
+                      onSubmit={(values) => createMut.mutate({values})}
+                    />
                   ) : service === "database" && cloud === "aws" ? (
                     <CreateRdsInstanceForm
                       cloud={cloud}
@@ -858,6 +874,7 @@ export function DynamicResourceView({
                   ) : service === "codedeploy" && cloud === "aws" ? (
                     <CodeDeployCreatePanel isSubmitting={createMut.isPending} submitError={createMut.error instanceof Error ? createMut.error.message : null} onCancel={() => setCreateOpen(false)} onSubmit={(values) => createMut.mutate({values})}/>
                   ) : (
+                    <>
                     <DynamicFormRenderer
                       key={`${cloud}:${service}:create`}
                       schema={schema}
@@ -872,6 +889,8 @@ export function DynamicResourceView({
                       onCancel={() => setCreateOpen(false)}
                       onSubmit={(values) => createMut.mutate({values})}
                     />
+                    {service === "elasticache" && cloud === "aws" && createMut.isPending && <DatabaseLaunchProgress name="cache cluster" description="Starting the cache container and preparing its local endpoint." />}
+                    </>
                   )}
                 </div>
               )}
@@ -1043,6 +1062,7 @@ export function DynamicResourceView({
       )}
        {service === "kinesis" && cloud === "aws" && <KinesisPanel cloud={cloud} resource={activeSelected} runtimeReachable={canUseRuntime} mode="stream" />}
        {service === "elasticache" && cloud === "aws" && <ElastiCacheManagementPanel runtimeReachable={canUseRuntime} />}
+       {service === "lightsail" && cloud === "aws" && <LightsailInstancePanel resource={activeSelected} runtimeReachable={canUseRuntime} onDeleted={() => setSelected(undefined)} />}
       {editingResource && schema.updateFields && (
         <div
           className="modal-overlay"