cleanup

Arize-ai · Jan 27, 2025 · a253f86 · a253f86
1 parent 1ec4274
commit a253f86
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 51 deletions.
diff --git a/app/src/components/datetime/DateField.tsx b/app/src/components/datetime/DateField.tsx
@@ -7,8 +7,11 @@ import {
 import { css } from "@emotion/react";
 
 import { fieldBaseCSS } from "../field/styles";
+import { StylableProps } from "../types";
 
-export type DateFieldProps<T extends DateValue> = AriaDateFieldProps<T>;
+export interface DateFieldProps<T extends DateValue>
+  extends AriaDateFieldProps<T>,
+    StylableProps {}
 
 const dateFieldCSS = css`
   --date-field-vertical-padding: 6px;
@@ -24,6 +27,7 @@ const dateFieldCSS = css`
     border-radius: var(--ac-global-rounding-small);
     background-color: var(--ac-global-input-field-background-color);
     width: fit-content;
+    box-sizing: border-box;
     min-width: 150px;
     white-space: nowrap;
     forced-color-adjust: none;
@@ -58,12 +62,21 @@ const dateFieldCSS = css`
     }
   }
 `;
+
+/**
+ * A date field, can be used to input just a date as well as a date and time.
+ */
 function DateField<T extends DateValue>(
   props: DateFieldProps<T>,
   ref: Ref<HTMLDivElement>
 ) {
+  const { css: propsCSS, ...restProps } = props;
   return (
-    <AriaDateField css={css(fieldBaseCSS, dateFieldCSS)} {...props} ref={ref} />
+    <AriaDateField
+      css={css(fieldBaseCSS, dateFieldCSS, propsCSS)}
+      {...restProps}
+      ref={ref}
+    />
   );
 }
 

diff --git a/app/src/components/datetime/TimeRangeForm.tsx b/app/src/components/datetime/TimeRangeForm.tsx
@@ -5,16 +5,17 @@ import {
   DateValue,
   Form,
   Label,
-  TimeValue,
 } from "react-aria-components";
 import { Controller, useForm } from "react-hook-form";
-import { parseAbsoluteToLocal } from "@internationalized/date";
+import {
+  getLocalTimeZone,
+  parseAbsoluteToLocal,
+} from "@internationalized/date";
 import { css } from "@emotion/react";
 
 import { Button, Icon, Icons } from "@phoenix/components";
 
 import { DateField } from "./DateField";
-import { TimeField } from "./TimeField";
 
 const containerCSS = css`
   display: flex;
@@ -26,6 +27,7 @@ const formRowCSS = css`
   display: flex;
   gap: var(--ac-global-dimension-size-100);
   align-items: end;
+  justify-content: end;
 `;
 
 const controlsRowCSS = css`
@@ -35,11 +37,16 @@ const controlsRowCSS = css`
   gap: var(--ac-global-dimension-size-100);
 `;
 
+const dateFieldCSS = css`
+  width: 100%;
+  .react-aria-DateInput {
+    width: 100%;
+  }
+`;
+
 type TimeRangeFormParams = {
   startDate: DateValue | null;
   endDate: DateValue | null;
-  startTime: TimeValue | null;
-  endTime: TimeValue | null;
 };
 
 export type TimeRangeFormProps = {
@@ -58,12 +65,6 @@ function timeRangeToFormParams(timeRange: OpenTimeRange): TimeRangeFormParams {
     endDate: timeRange.end
       ? parseAbsoluteToLocal(timeRange.end.toISOString())
       : null,
-    startTime: timeRange.start
-      ? parseAbsoluteToLocal(timeRange.start.toISOString())
-      : null,
-    endTime: timeRange.end
-      ? parseAbsoluteToLocal(timeRange.end.toISOString())
-      : null,
   };
 }
 
@@ -83,21 +84,17 @@ export function TimeRangeForm(props: TimeRangeFormProps) {
 
   const onStartClear = useCallback(() => {
     resetField("startDate");
-    resetField("startTime");
   }, [resetField]);
 
   const onEndClear = useCallback(() => {
     resetField("endDate");
-    resetField("endTime");
   }, [resetField]);
 
   const onSubmit = useCallback(
     (data: TimeRangeFormParams) => {
-      const { startDate, endDate, startTime, endTime } = data;
-      const start =
-        startDate && startTime ? new Date(startDate + "T" + startTime) : null;
-      const end = endDate && endTime ? new Date(endDate + "T" + endTime) : null;
-
+      const { startDate, endDate } = data;
+      const start = startDate ? startDate.toDate(getLocalTimeZone()) : null;
+      const end = endDate ? endDate.toDate(getLocalTimeZone()) : null;
       propsOnSubmit({ start, end });
     },
     [propsOnSubmit]
@@ -122,6 +119,8 @@ export function TimeRangeForm(props: TimeRangeFormProps) {
               onBlur={onBlur}
               value={value}
               granularity="second"
+              hideTimeZone
+              css={dateFieldCSS}
             >
               <Label>Start Date</Label>
               <DateInput>
@@ -130,27 +129,6 @@ export function TimeRangeForm(props: TimeRangeFormProps) {
             </DateField>
           )}
         />
-        <Controller
-          name="startTime"
-          control={control}
-          render={({
-            field: { onChange, onBlur, value },
-            fieldState: { invalid },
-          }) => (
-            <TimeField
-              isInvalid={invalid}
-              onChange={onChange}
-              onBlur={onBlur}
-              value={value}
-            >
-              <Label>Start Time</Label>
-              <DateInput>
-                {(segment) => <DateSegment segment={segment} />}
-              </DateInput>
-            </TimeField>
-          )}
-        />
-
         <Button
           size="S"
           excludeFromTabOrder
@@ -173,6 +151,9 @@ export function TimeRangeForm(props: TimeRangeFormProps) {
                 onChange={onChange}
                 onBlur={onBlur}
                 value={value}
+                granularity="second"
+                hideTimeZone
+                css={dateFieldCSS}
               >
                 <Label>End Date</Label>
                 <DateInput>
@@ -182,12 +163,6 @@ export function TimeRangeForm(props: TimeRangeFormProps) {
             );
           }}
         />
-        <TimeField>
-          <Label>End Time</Label>
-          <DateInput>
-            {(segment) => <DateSegment segment={segment} />}
-          </DateInput>
-        </TimeField>
         <Button
           size="S"
           excludeFromTabOrder
@@ -198,7 +173,7 @@ export function TimeRangeForm(props: TimeRangeFormProps) {
       </div>
       <div data-testid="controls" css={controlsRowCSS}>
         <Button size="S">Cancel</Button>
-        <Button isDisabled={!isValid} size="S" type="submit">
+        <Button isDisabled={!isValid} size="S" type="submit" variant="primary">
           Apply
         </Button>
       </div>

diff --git a/app/stories/TimeRangeForm.stories.tsx b/app/stories/TimeRangeForm.stories.tsx
@@ -36,12 +36,12 @@ export const Default = Template.bind({});
 Default.args = {};
 
 export const InAPopOver = () => {
-  const [timeRange, _setTimeRange] = useState<OpenTimeRange>({
+  const [timeRange, setTimeRange] = useState<OpenTimeRange>({
     start: new Date(),
   });
   const timeRangeString = timeRangeFormatter(timeRange);
   return (
-    <DialogTrigger>
+    <DialogTrigger isOpen>
       <Button size="S" icon={<Icon svg={<Icons.CalendarOutline />} />}>
         {timeRangeString}
       </Button>
@@ -51,7 +51,7 @@ export const InAPopOver = () => {
             <TimeRangeForm
               initialValue={timeRange}
               onSubmit={(timeRange) => {
-                _setTimeRange(timeRange);
+                setTimeRange(timeRange);
               }}
             />
           </View>