finish up

Arize-ai · Jan 27, 2025 · 6b91337 · 6b91337
1 parent a3f15b9
commit 6b91337
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 6 deletions.
diff --git a/app/src/components/datetime/DateField.tsx b/app/src/components/datetime/DateField.tsx
@@ -36,6 +36,10 @@ const dateFieldCSS = css`
       outline: 1px solid var(--ac-global-color-primary);
       outline-offset: -1px;
     }
+
+    &[data-invalid] {
+      border-color: var(--ac-global-color-danger);
+    }
   }
 
   .react-aria-DateSegment {

diff --git a/app/src/components/datetime/TimeRangeForm.tsx b/app/src/components/datetime/TimeRangeForm.tsx
@@ -3,6 +3,7 @@ import {
   DateInput,
   DateSegment,
   DateValue,
+  FieldError,
   Form,
   Label,
 } from "react-aria-components";
@@ -26,8 +27,12 @@ const containerCSS = css`
 const formRowCSS = css`
   display: flex;
   gap: var(--ac-global-dimension-size-100);
-  align-items: end;
+  align-items: start;
   justify-content: end;
+  /* Move the button down to align */
+  button {
+    margin-top: 23.5px;
+  }
 `;
 
 const controlsRowCSS = css`
@@ -41,6 +46,8 @@ const dateFieldCSS = css`
   width: 100%;
   .react-aria-DateInput {
     width: 100%;
+    // Eliminate the re-sizing of the DateField as you type
+    min-width: 200px;
   }
 `;
 
@@ -78,26 +85,36 @@ export function TimeRangeForm(props: TimeRangeFormProps) {
     handleSubmit,
     formState: { isValid },
     resetField,
+    setError,
+    clearErrors,
   } = useForm<TimeRangeFormParams>({
     defaultValues: timeRangeToFormParams(initialValue || {}),
   });
 
   const onStartClear = useCallback(() => {
-    resetField("startDate");
+    resetField("startDate", { defaultValue: null });
   }, [resetField]);
 
   const onEndClear = useCallback(() => {
-    resetField("endDate");
+    alert("onEndClear");
+    resetField("endDate", { defaultValue: null });
   }, [resetField]);
 
   const onSubmit = useCallback(
     (data: TimeRangeFormParams) => {
+      clearErrors();
       const { startDate, endDate } = data;
       const start = startDate ? startDate.toDate(getLocalTimeZone()) : null;
       const end = endDate ? endDate.toDate(getLocalTimeZone()) : null;
+      if (start && end && start > end) {
+        setError("endDate", {
+          message: "End must be after the start date",
+        });
+        return;
+      }
       propsOnSubmit({ start, end });
     },
-    [propsOnSubmit]
+    [propsOnSubmit, setError, clearErrors]
   );
   return (
     <Form
@@ -143,7 +160,7 @@ export function TimeRangeForm(props: TimeRangeFormProps) {
           control={control}
           render={({
             field: { onChange, onBlur, value },
-            fieldState: { invalid },
+            fieldState: { invalid, error },
           }) => {
             return (
               <DateField
@@ -159,6 +176,7 @@ export function TimeRangeForm(props: TimeRangeFormProps) {
                 <DateInput>
                   {(segment) => <DateSegment segment={segment} />}
                 </DateInput>
+                {error ? <FieldError>{error.message}</FieldError> : null}
               </DateField>
             );
           }}

diff --git a/app/stories/TimeRangeForm.stories.tsx b/app/stories/TimeRangeForm.stories.tsx
@@ -8,6 +8,7 @@ import {
   Icon,
   Icons,
   Popover,
+  PopoverArrow,
   TimeRangeForm,
   TimeRangeFormProps,
   View,
@@ -47,7 +48,8 @@ export const InAPopOver = () => {
       </Button>
       <Popover placement="bottom end">
         <Dialog>
-          <View padding="size-200">
+          <PopoverArrow />
+          <View padding="size-100">
             <TimeRangeForm
               initialValue={timeRange}
               onSubmit={(timeRange) => {