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

packages/frontend/src/components/DynamicResourceView.tsx

@@ -59,6 +59,10 @@ import { LoadBalancerPanel } from "@/components/LoadBalancerPanel";
 import { TargetGroupPanel } from "@/components/TargetGroupPanel";
 import { LoadBalancerListenerPanel } from "@/components/LoadBalancerListenerPanel";
 import { WorkflowExecutionDebugger } from "@/components/WorkflowExecutionDebugger";
+import {WorkflowCreatePanel} from "@/components/WorkflowCreatePanel";
+import {workflowCreationDestinationPath, type WorkflowCreationDestination} from "@/lib/workflowCreate";
+import {workflowStudioPath} from "@/lib/workflowStudio";
+import {useNavigate} from "react-router-dom";
 
 interface DynamicResourceViewProps {
   cloud: CloudProvider;
@@ -71,6 +75,11 @@ interface DynamicResourceViewProps {
   onOpenInfo: () => void;
 }
 
+interface CreateMutationVariables {
+  values: Record<string, unknown>;
+  destination?: WorkflowCreationDestination;
+}
+
 export function DynamicResourceView({
   cloud,
   service,
@@ -80,6 +89,7 @@ export function DynamicResourceView({
   statusLoading = false,
   onOpenInfo,
 }: DynamicResourceViewProps) {
+  const navigate = useNavigate();
   const qc = useQueryClient();
   const [search, setSearch] = useState("");
   const [state, setState] = useState("");
@@ -166,7 +176,7 @@ export function DynamicResourceView({
   };
 
   const createMut = useMutation({
-    mutationFn: async (values: Record<string, unknown>) => {
+    mutationFn: async ({values}: CreateMutationVariables) => {
       const blueprintBucketName = typeof values.blueprintBucketName === "string" ? values.blueprintBucketName.trim() : "";
       const blueprintApiName = typeof values.blueprintApiName === "string" ? values.blueprintApiName.trim() : "";
       const blueprintRuleName = typeof values.blueprintRuleName === "string" ? values.blueprintRuleName.trim() : "";
@@ -254,12 +264,16 @@ export function DynamicResourceView({
         throw error;
       }
     },
-    onSuccess: (resource) => {
+    onSuccess: (resource, variables) => {
       setSelected(resource);
       setCreateOpen(false);
       void qc.invalidateQueries({
         queryKey: ["cloud-resources", cloud, service],
       });
+      if (cloud === "aws" && service === "workflows" && variables.destination === "studio") {
+        const destinationPath = workflowCreationDestinationPath(variables.destination, resource.id);
+        if (destinationPath) navigate(destinationPath);
+      }
     },
   });
 
@@ -774,14 +788,21 @@ export function DynamicResourceView({
                       isSubmitting={createMut.isPending}
                       submitError={createMut.error instanceof Error ? createMut.error.message : null}
                       onCancel={() => setCreateOpen(false)}
-                      onSubmit={(values) => createMut.mutate(values)}
+                      onSubmit={(values) => createMut.mutate({values})}
                     />
                   ) : service === "loadbalancing" && cloud === "aws" ? (
                     <LoadBalancerPanel
                       isSubmitting={createMut.isPending}
                       submitError={createMut.error instanceof Error ? createMut.error.message : null}
                       onCancel={() => setCreateOpen(false)}
-                      onSubmit={(values) => createMut.mutate(values)}
+                      onSubmit={(values) => createMut.mutate({values})}
+                    />
+                  ) : service === "workflows" && cloud === "aws" ? (
+                    <WorkflowCreatePanel
+                      isSubmitting={createMut.isPending}
+                      submitError={createMut.error instanceof Error ? createMut.error.message : null}
+                      onCancel={() => setCreateOpen(false)}
+                      onSubmit={(submission) => createMut.mutate(submission)}
                     />
                   ) : (
                     <DynamicFormRenderer
@@ -796,7 +817,7 @@ export function DynamicResourceView({
                           : null
                       }
                       onCancel={() => setCreateOpen(false)}
-                      onSubmit={(values) => createMut.mutate(values)}
+                      onSubmit={(values) => createMut.mutate({values})}
                     />
                   )}
                 </div>
@@ -840,13 +861,16 @@ export function DynamicResourceView({
           )}
         </section>
         {activeSelected && !showDatabaseSnapshots && (
-          <ResourceInspector
-            resource={activeSelected}
-            object={selectedObject}
-            cloud={cloud}
-            runtimeReachable={canUseRuntime}
-            serviceName={schema.displayName}
-          />
+          <div>
+            {cloud === "aws" && service === "workflows" && <button className="button compact workflow-open-studio" type="button" onClick={() => navigate(workflowStudioPath(activeSelected.id))}>Open Studio</button>}
+            <ResourceInspector
+              resource={activeSelected}
+              object={selectedObject}
+              cloud={cloud}
+              runtimeReachable={canUseRuntime}
+              serviceName={schema.displayName}
+            />
+          </div>
         )}
       </div>
       {service === "storage" && (