fix(prompts): fix regex validation logic so it shows up in the form (#…

…6228)
Arize-ai · Feb 6, 2025 · f9f72a3 · f9f72a3
1 parent d6db14e
commit f9f72a3
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/app/src/components/combobox/ComboBox.tsx b/app/src/components/combobox/ComboBox.tsx
@@ -67,13 +67,15 @@ export function ComboBox<T extends object>({
   width,
   stopPropagation,
   renderEmptyState,
+  isInvalid,
   ...props
 }: ComboBoxProps<T>) {
   return (
     <AriaComboBox
       {...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
@@ -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
@@ -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);