feat: Step Function + small fixes + more services + color matching the services

packages/frontend/src/api/queries/cloudQueries.ts

@@ -1,5 +1,6 @@
 import {useQuery} from '@tanstack/react-query'
 import {
+    getCloudResource,
     getCloudServiceStatus,
     getCloudStatus,
     listCloudResources,
@@ -23,6 +24,8 @@ export const cloudQueryKeys = {
         ['cloud-service-status', cloud, service] as const,
     resources: (cloud: CloudProvider, service: CloudServiceType) =>
         ['cloud-console-resources', cloud, service] as const,
+    resource: (cloud: CloudProvider, service: CloudServiceType, id: string) =>
+        ['cloud-resource', cloud, service, id] as const,
 }
 
 export function useCloudsQuery() {
@@ -82,6 +85,21 @@ export function useCloudConsoleResourcesQuery({
     })
 }
 
+export function useCloudResourceQuery(
+    cloud: CloudProvider,
+    service: CloudServiceType,
+    id?: string,
+) {
+    return useQuery({
+        queryKey: cloudQueryKeys.resource(cloud, service, id ?? ''),
+        queryFn: ({signal}) => getCloudResource(cloud, service, id!, signal),
+        enabled: Boolean(id),
+        // A list refresh returns summary rows. Keep the inspected resource cached
+        // until the user selects a different state machine.
+        staleTime: Infinity,
+    })
+}
+
 function hasAvailableService(services: CloudServiceDescriptor[] | undefined, service: CloudServiceType): boolean {
     return services?.some((item) => item.service === service && item.availability === 'available') ?? false
 }