migrate one more form

Arize-ai · Dec 31, 2024 · b41c2b0 · b41c2b0
1 parent d980b49
commit b41c2b0
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 23 deletions.
diff --git a/app/src/components/auth/CreateAPIKeyDialog.tsx b/app/src/components/auth/CreateAPIKeyDialog.tsx
@@ -3,9 +3,18 @@ import { Controller, useForm } from "react-hook-form";
 import { Form } from "react-router-dom";
 import { isValid as dateIsValid, parseISO } from "date-fns";
 
-import { Dialog, TextArea, TextField } from "@arizeai/components";
+import { Dialog, TextArea } from "@arizeai/components";
 
-import { Button, Flex, View } from "@phoenix/components";
+import {
+  Button,
+  FieldError,
+  Flex,
+  Input,
+  Label,
+  Text,
+  TextField,
+  View,
+} from "@phoenix/components";
 
 export type APIKeyFormParams = {
   name: string;
@@ -49,14 +58,19 @@ export function CreateAPIKeyDialog(props: {
               fieldState: { invalid, error },
             }) => (
               <TextField
-                label="Name"
-                description="A short name to identify this key"
-                errorMessage={error?.message}
-                validationState={invalid ? "invalid" : "valid"}
+                isInvalid={invalid}
                 onChange={onChange}
                 onBlur={onBlur}
                 value={value.toString()}
-              />
+              >
+                <Label>Name</Label>
+                <Input />
+                {error?.message ? (
+                  <FieldError>{error.message}</FieldError>
+                ) : (
+                  <Text slot="description">A name to identify the key</Text>
+                )}
+              </TextField>
             )}
           />
           <Controller
@@ -99,16 +113,21 @@ export function CreateAPIKeyDialog(props: {
               fieldState: { invalid, error },
             }) => (
               <TextField
-                label="Expires At"
-                type="datetime-local"
-                name={name}
-                description={`The date at which the key will expire. Optional`}
-                errorMessage={error?.message}
-                validationState={invalid ? "invalid" : "valid"}
+                isInvalid={invalid}
                 onChange={onChange}
                 onBlur={onBlur}
-                defaultValue={value}
-              />
+                value={value.toString()}
+              >
+                <Label>Expires At</Label>
+                <Input type="datetime-local" name={name} />
+                {error?.message ? (
+                  <FieldError>{error.message}</FieldError>
+                ) : (
+                  <Text slot="description">
+                    {"The date at which the key will expire. Optional"}
+                  </Text>
+                )}
+              </TextField>
             )}
           />
         </View>

diff --git a/app/src/components/index.tsx b/app/src/components/index.tsx
@@ -1,10 +1,10 @@
-import type {
-  FieldErrorProps,
+// Re-export parts of react-aria-components
+export { FieldError, Input, Label } from "react-aria-components";
+export type {
   InputProps,
   LabelProps,
+  FieldErrorProps,
 } from "react-aria-components";
-// eslint-disable-next-line no-duplicate-imports
-import { FieldError, Input, Label } from "react-aria-components";
 
 export * from "./Link";
 export * from "./LinkButton";
@@ -22,7 +22,3 @@ export * from "./view";
 export * from "./layout";
 export * from "./content";
 export * from "./textfield";
-
-// Re-export parts of react-aria-components
-export { Input, Label, FieldError };
-export type { InputProps, LabelProps, FieldErrorProps };