From d7836b0fa05f4dca18a38b9e33bb5c35d3d5ee43 Mon Sep 17 00:00:00 2001
From: Mikyo King <mikyo@arize.com>
Date: Fri, 31 Jan 2025 17:06:30 -0700
Subject: [PATCH] fix(prompts): fix regex validation logic so it shows up in
 the form

---
 app/src/components/combobox/ComboBox.tsx    |  2 ++
 app/src/components/field/styles.ts          |  7 +++++--
 app/src/pages/playground/SavePromptForm.tsx | 18 +++++++++++-------
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/app/src/components/combobox/ComboBox.tsx b/app/src/components/combobox/ComboBox.tsx
index 4b0d7bb4ca..0030f27d11 100644
--- a/app/src/components/combobox/ComboBox.tsx
+++ b/app/src/components/combobox/ComboBox.tsx
@@ -67,6 +67,7 @@ export function ComboBox<T extends object>({
   width,
   stopPropagation,
   renderEmptyState,
+  isInvalid,
   ...props
 }: ComboBoxProps<T>) {
   return (
@@ -74,6 +75,7 @@ export function ComboBox<T extends object>({
       {...props}
       css={css(fieldBaseCSS, comboBoxCSS)}
       data-size={size}
+      isInvalid={isInvalid || Boolean(errorMessage)}
       style={{
         width,
       }}
diff --git a/app/src/components/field/styles.ts b/app/src/components/field/styles.ts
index d7620e0b51..8fdb8cd2f9 100644
--- a/app/src/components/field/styles.ts
+++ b/app/src/components/field/styles.ts
@@ -25,16 +25,19 @@ export const fieldBaseCSS = css`
     vertical-align: middle;
 
     &[data-focused] {
+      // TODO: figure out focus ring behavior. For now the color is enough
       outline: none;
+    }
+    &[data-focused]:not([data-invalid]) {
       border: 1px solid var(--ac-global-input-field-border-color-active);
     }
-    &[data-hovered]:not([data-disabled]) {
+    &[data-hovered]:not([data-disabled]):not([data-invalid]) {
       border: 1px solid var(--ac-global-input-field-border-color-active);
     }
     &[data-disabled] {
       opacity: var(--ac-global-opacity-disabled);
     }
-    &[data-invalid]:not([data-focused]) {
+    &[data-invalid] {
       border-color: var(--ac-global-color-danger);
     }
     &::placeholder {
diff --git a/app/src/pages/playground/SavePromptForm.tsx b/app/src/pages/playground/SavePromptForm.tsx
index 6204c009ab..fe748248b2 100644
--- a/app/src/pages/playground/SavePromptForm.tsx
+++ b/app/src/pages/playground/SavePromptForm.tsx
@@ -7,8 +7,7 @@ import { Form, TextArea } from "@arizeai/components";
 import { Button, Flex, View } from "@phoenix/components";
 import { SavePromptFormQuery } from "@phoenix/pages/playground/__generated__/SavePromptFormQuery.graphql";
 import { PromptComboBox } from "@phoenix/pages/playground/PromptComboBox";
-
-import { identifierPattern } from "../../utils/identifierUtils";
+import { identifierPattern } from "@phoenix/utils/identifierUtils";
 
 export type SavePromptSubmitHandler = (params: SavePromptFormParams) => void;
 
@@ -62,7 +61,8 @@ export function SavePromptForm({
   const {
     control,
     handleSubmit,
-    formState: { isDirty, isValid, errors },
+    formState: { isDirty, isValid },
+    trigger,
   } = useForm<SavePromptFormParams>({
     values: {
       promptId: selectedPromptId ?? undefined,
@@ -104,20 +104,24 @@ export function SavePromptForm({
             },
             pattern: identifierPattern,
           }}
-          render={({ field: { onBlur, onChange } }) => (
+          render={({ field: { onBlur, onChange }, fieldState }) => (
             <PromptComboBox
               label="Prompt"
               description="The prompt to update, or prompt name to create"
-              placeholder="Select a prompt, or enter a new prompt name"
+              placeholder="Select or enter new prompt name"
               isRequired
               onBlur={onBlur}
               defaultInputValue={promptInputValue}
-              onInputChange={setPromptInputValue}
+              onInputChange={(value) => {
+                setPromptInputValue(value);
+                onChange(value);
+                trigger("name");
+              }}
               // this seems... not great. not sure how else to get a stable element reference that doesn't use a ref
               // https://react-spectrum.adobe.com/react-aria/Popover.html#props
               // eslint-disable-next-line react-compiler/react-compiler
               container={flexContainer.current ?? undefined}
-              errorMessage={errors.name?.message}
+              errorMessage={fieldState.error?.message}
               allowsCustomValue
               onChange={(promptId) => {
                 onChange(promptId);