feat(sandboxes): Improve code evaluator editor ux (#12690)

Author: cephalization

app/schema.graphql

@@ -602,7 +602,7 @@ input CreateCodeEvaluatorInput {
   sourceCode: String!
   language: Language!
   description: String = null
-  sandboxConfigId: Int = null
+  sandboxConfigId: ID = null
   outputConfigs: [AnnotationConfigInput!] = null
   inputMapping: EvaluatorInputMappingInput = null
 }
@@ -1448,6 +1448,7 @@ input EvaluatorPreviewInput @oneOf {
   builtInEvaluatorId: ID
   inlineLlmEvaluator: InlineLLMEvaluatorInput
   codeEvaluatorId: ID
+  inlineCodeEvaluator: InlineCodeEvaluatorInput
 }
 
 input EvaluatorPreviewItemInput {
@@ -2053,6 +2054,15 @@ input GoogleGenAIHttpOptionsInput {
 
 scalar Identifier
 
+input InlineCodeEvaluatorInput {
+  name: String!
+  language: Language!
+  sourceCode: String!
+  outputConfigs: [AnnotationConfigInput!]!
+  sandboxConfigId: ID = null
+  description: String = null
+}
+
 input InlineLLMEvaluatorInput {
   name: String!
   promptVersion: ChatPromptVersionInput!
@@ -3877,7 +3887,7 @@ input UpdateCodeEvaluatorInput {
   sourceCode: String
   language: Language
   description: String
-  sandboxConfigId: Int
+  sandboxConfigId: ID
   outputConfigs: [AnnotationConfigInput!]
   inputMapping: EvaluatorInputMappingInput
 }

app/src/components/dataset/CreateCodeDatasetEvaluatorSlideover.tsx

@@ -1,4 +1,4 @@
-import { Suspense, useMemo, useState } from "react";
+import { Suspense, useCallback, useEffect, useRef, useState } from "react";
 import type { ModalOverlayProps } from "react-aria-components";
 import { graphql, useLazyLoadQuery, useMutation } from "react-relay";
 import invariant from "tiny-invariant";
@@ -9,11 +9,11 @@ import { Modal, ModalOverlay } from "@phoenix/components/core/overlay/Modal";
 import type { CreateCodeDatasetEvaluatorSlideover_createCodeEvaluatorMutation } from "@phoenix/components/dataset/__generated__/CreateCodeDatasetEvaluatorSlideover_createCodeEvaluatorMutation.graphql";
 import type { CreateCodeDatasetEvaluatorSlideover_createDatasetCodeEvaluatorMutation } from "@phoenix/components/dataset/__generated__/CreateCodeDatasetEvaluatorSlideover_createDatasetCodeEvaluatorMutation.graphql";
 import type { CreateCodeDatasetEvaluatorSlideoverQuery } from "@phoenix/components/dataset/__generated__/CreateCodeDatasetEvaluatorSlideoverQuery.graphql";
+import { mapSandboxConfigOptions } from "@phoenix/components/evaluators/CodeEvaluatorLanguageSandboxFields";
 import { DEFAULT_CODE_EVALUATOR_SOURCE } from "@phoenix/components/evaluators/codeEvaluatorUtils";
 import {
-  EditCodeEvaluatorDialogContent,
-  mapSandboxConfigOptions,
   createDefaultContinuousOutputConfig,
+  EditCodeEvaluatorDialogContent,
 } from "@phoenix/components/evaluators/EditCodeEvaluatorDialogContent";
 import { buildOutputConfigsInput } from "@phoenix/components/evaluators/utils";
 import { EvaluatorStoreProvider } from "@phoenix/contexts/EvaluatorContext";
@@ -29,20 +29,49 @@ export const CreateCodeDatasetEvaluatorSlideover = ({
   datasetId,
   updateConnectionIds,
   onEvaluatorCreated,
+  onOpenChange,
+  isOpen,
   ...props
 }: {
   datasetId: string;
   updateConnectionIds?: string[];
   onEvaluatorCreated?: (datasetEvaluatorId: string) => void;
 } & ModalOverlayProps) => {
+  const isDirtyRef = useRef(false);
+
+  // Reset dirty state when slideover opens
+  useEffect(() => {
+    if (isOpen) {
+      isDirtyRef.current = false;
+    }
+  }, [isOpen]);
+
+  const handleOpenChange = useCallback(
+    (nextIsOpen: boolean) => {
+      if (!nextIsOpen && isDirtyRef.current) {
+        const confirmed = window.confirm(
+          "You have unsaved changes. Are you sure you want to close?"
+        );
+        if (!confirmed) return;
+      }
+      onOpenChange?.(nextIsOpen);
+    },
+    [onOpenChange]
+  );
+
+  const handleDirtyChange = useCallback((isDirty: boolean) => {
+    isDirtyRef.current = isDirty;
+  }, []);
+
   return (
-    <ModalOverlay {...props}>
+    <ModalOverlay {...props} isOpen={isOpen} onOpenChange={handleOpenChange}>
       <Modal variant="slideover" size="fullscreen">
         <Dialog>
           {({ close }) => (
             <Suspense fallback={<Loading />}>
               <CreateCodeEvaluatorDialog
                 onClose={close}
+                onDirtyChange={handleDirtyChange}
                 datasetId={datasetId}
                 updateConnectionIds={updateConnectionIds}
                 onEvaluatorCreated={onEvaluatorCreated}
@@ -57,11 +86,13 @@ export const CreateCodeDatasetEvaluatorSlideover = ({
 
 const CreateCodeEvaluatorDialog = ({
   onClose,
+  onDirtyChange,
   datasetId,
   updateConnectionIds,
   onEvaluatorCreated,
 }: {
   onClose: () => void;
+  onDirtyChange?: (isDirty: boolean) => void;
   datasetId: string;
   updateConnectionIds?: string[];
   onEvaluatorCreated?: (datasetEvaluatorId: string) => void;
@@ -74,19 +105,24 @@ const CreateCodeEvaluatorDialog = ({
         sandboxProviders {
           backendType
           language
+          enabled
           configs {
             id
             name
             description
           }
         }
+        sandboxBackends {
+          backendType
+          status
+        }
       }
     `,
     {}
   );
-  const sandboxConfigs = useMemo(
-    () => mapSandboxConfigOptions(data.sandboxProviders),
-    [data.sandboxProviders]
+  const sandboxConfigs = mapSandboxConfigOptions(
+    data.sandboxProviders,
+    data.sandboxBackends
   );
   const [createCodeEvaluator, isCreatingCodeEvaluator] =
     useMutation<CreateCodeDatasetEvaluatorSlideover_createCodeEvaluatorMutation>(graphql`
@@ -119,40 +155,36 @@ const CreateCodeEvaluatorDialog = ({
         }
       }
     `);
-  const initialState = useMemo(
-    () =>
-      ({
-        evaluator: {
-          globalName: "",
-          name: "",
-          description: "",
-          inputMapping: {
-            literalMapping: {},
-            pathMapping: {},
-          },
-          kind: "CODE",
-          isBuiltin: false,
-          includeExplanation: false,
-        },
-        outputConfigs: [createDefaultContinuousOutputConfig("")],
-        dataset: {
-          readonly: true,
-          id: datasetId,
-          selectedExampleId: null,
-          selectedSplitIds: [],
-        },
-        evaluatorMappingSource: EVALUATOR_MAPPING_SOURCE_DEFAULT,
-        showPromptPreview: false,
-      }) satisfies EvaluatorStoreProps,
-    [datasetId]
-  );
+  const initialState: EvaluatorStoreProps = {
+    evaluator: {
+      globalName: "",
+      name: "",
+      description: "",
+      inputMapping: {
+        literalMapping: {},
+        pathMapping: {},
+      },
+      kind: "CODE",
+      isBuiltin: false,
+      includeExplanation: false,
+    },
+    outputConfigs: [createDefaultContinuousOutputConfig("")],
+    dataset: {
+      readonly: true,
+      id: datasetId,
+      selectedExampleId: null,
+      selectedSplitIds: [],
+    },
+    evaluatorMappingSource: EVALUATOR_MAPPING_SOURCE_DEFAULT,
+    showPromptPreview: false,
+  };
 
   const onSubmit = (
     store: EvaluatorStoreInstance,
     payload: {
       language: "PYTHON" | "TYPESCRIPT";
       sourceCode: string;
-      sandboxConfigId: number | null;
+      sandboxConfigId?: string | null;
     }
   ) => {
     setError(undefined);
@@ -198,6 +230,7 @@ const CreateCodeEvaluatorDialog = ({
               title: "Evaluator created",
               message: "The code evaluator has been added to the dataset.",
             });
+            onDirtyChange?.(false);
             onClose();
           },
           onError: (mutationError) => {
@@ -223,6 +256,8 @@ const CreateCodeEvaluatorDialog = ({
       {({ store }) => (
         <EditCodeEvaluatorDialogContent
           onSubmit={(payload) => onSubmit(store, payload)}
+          onCancel={onClose}
+          onDirtyChange={onDirtyChange}
           isSubmitting={
             isCreatingCodeEvaluator || isCreatingDatasetCodeEvaluator
           }