finish migration

Arize-ai · Dec 23, 2024 · 0b1fe16 · 0b1fe16
1 parent 23e612d
commit 0b1fe16
Show file tree

Hide file tree

Showing 22 changed files with 117 additions and 143 deletions.
diff --git a/app/src/components/ConfirmNavigation.tsx b/app/src/components/ConfirmNavigation.tsx
@@ -1,30 +1,21 @@
 import React, { ReactNode } from "react";
 import { Blocker } from "react-router";
 
-import {
-  Button,
-  Dialog,
-  DialogContainer,
-  Flex,
-  Text,
-  View,
-} from "@arizeai/components";
+import { Dialog, DialogContainer, Flex, Text, View } from "@arizeai/components";
+
+import { Button } from "@phoenix/components";
 
 function ConfirmNavigationDialogFooter({ blocker }: { blocker: Blocker }) {
   return (
     <View padding={"size-100"} borderTopColor={"dark"} borderTopWidth={"thin"}>
       <Flex justifyContent={"end"} gap={"size-100"}>
-        <Button
-          variant={"default"}
-          onClick={() => blocker.reset && blocker.reset()}
-          size={"compact"}
-        >
+        <Button onPress={() => blocker.reset && blocker.reset()} size="S">
           Cancel
         </Button>
         <Button
-          variant={"primary"}
-          onClick={() => blocker.proceed && blocker.proceed()}
-          size={"compact"}
+          variant="primary"
+          onPress={() => blocker.proceed && blocker.proceed()}
+          size="S"
         >
           Confirm
         </Button>

diff --git a/app/src/components/dataset/NewDatasetButton.tsx b/app/src/components/dataset/NewDatasetButton.tsx
@@ -2,14 +2,14 @@ import React, { useState } from "react";
 
 import {
   Alert,
-  Button,
   Card,
   Icon,
   Icons,
   PopoverTrigger,
   View,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { useNotifySuccess } from "@phoenix/contexts";
 
 import { CreateDatasetForm } from "./CreateDatasetForm";

diff --git a/app/src/components/pointcloud/CanvasDisplaySettingsDropdown.tsx b/app/src/components/pointcloud/CanvasDisplaySettingsDropdown.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 
+// eslint-disable-next-line deprecate/import
 import {
-  Button,
+  Button as LegacyButton,
   DropdownMenu,
   DropdownTrigger,
   Flex,
@@ -20,8 +21,8 @@ export function CanvasDisplaySettingsDropdown() {
   const pointSizeScale = usePointCloudContext((state) => state.pointSizeScale);
   return (
     <DropdownTrigger placement="bottom left">
-      <Button
-        variant={"default"}
+      <LegacyButton
+        variant="default"
         size="compact"
         icon={<Icon svg={<Icons.OptionsOutline />} />}
         aria-label="Display Settings"

diff --git a/app/src/components/pointcloud/ClusteringSettings.tsx b/app/src/components/pointcloud/ClusteringSettings.tsx
@@ -3,7 +3,6 @@ import { Controller, useForm } from "react-hook-form";
 import { css } from "@emotion/react";
 
 import {
-  Button,
   Content,
   ContextualHelp,
   Form,
@@ -12,6 +11,7 @@ import {
   TextField,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { MAX_32_BIT_INTEGER } from "@phoenix/constants/numberConstants";
 import {
   MIN_CLUSTER_MIN_SAMPLES,
@@ -243,15 +243,12 @@ export default function ClusteringSettings() {
           <Button
             variant={isDirty ? "primary" : "default"}
             type="submit"
-            isDisabled={!isValid}
-            loading={clustersLoading}
+            isDisabled={!isValid || clustersLoading}
             css={css`
               width: 100%;
             `}
           >
-            {clustersLoading
-              ? "Applying parameters"
-              : "Apply Clustering Config"}
+            {clustersLoading ? "Applying..." : "Apply Clustering Config"}
           </Button>
         </div>
       </Form>

diff --git a/app/src/components/pointcloud/PointCloudParameterSettings.tsx b/app/src/components/pointcloud/PointCloudParameterSettings.tsx
@@ -3,7 +3,6 @@ import { Controller, useForm } from "react-hook-form";
 import { css } from "@emotion/react";
 
 import {
-  Button,
   Content,
   ContextualHelp,
   Form,
@@ -12,6 +11,7 @@ import {
   TextField,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import {
   MAX_INFERENCES_SAMPLE_SIZE,
   MAX_MIN_DIST,

diff --git a/app/src/components/settings/UserForm.tsx b/app/src/components/settings/UserForm.tsx
@@ -2,8 +2,9 @@ import React from "react";
 import { Controller, useForm } from "react-hook-form";
 import { css } from "@emotion/react";
 
-import { Button, Flex, Form, TextField, View } from "@arizeai/components";
+import { Flex, Form, TextField, View } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { UserRole } from "@phoenix/constants";
 
 import { RolePicker } from "./RolePicker";
@@ -193,8 +194,8 @@ export function UserForm({
             <Button
               variant={isDirty ? "primary" : "default"}
               type="submit"
-              size="compact"
-              disabled={isSubmitting}
+              size="S"
+              isDisabled={isSubmitting}
             >
               {isSubmitting ? "Adding..." : "Add User"}
             </Button>

diff --git a/app/src/components/trace/EditSpanAnnotationsDialog.tsx b/app/src/components/trace/EditSpanAnnotationsDialog.tsx
@@ -13,9 +13,10 @@ import {
 } from "react-relay";
 import { css } from "@emotion/react";
 
+// eslint-disable-next-line deprecate/import
 import {
   Alert,
-  Button,
+  Button as LegacyButton,
   Card,
   Dialog,
   Flex,
@@ -29,6 +30,7 @@ import {
   View,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { Empty } from "@phoenix/components/Empty";
 import { useNotifySuccess } from "@phoenix/contexts";
 import { formatFloat } from "@phoenix/utils/numberFormatUtils";
@@ -129,17 +131,17 @@ function NewAnnotationButton(props: NewAnnotationButtonProps) {
         setIsPopoverOpen(isOpen);
       }}
     >
-      <Button
-        variant="default"
+      <LegacyButton
+        variant="primary"
         disabled={disabled}
         size="compact"
         icon={<Icon svg={<Icons.PlusCircleOutline />} />}
         onClick={() => {
           setIsPopoverOpen(true);
         }}
       >
-        New
-      </Button>
+        New Annotation
+      </LegacyButton>
       <NewAnnotationPopover
         projectId={projectId}
         spanNodeId={spanNodeId}
@@ -267,12 +269,11 @@ function NewSpanAnnotationCard(props: {
         <Flex direction="row" alignItems="center" gap="size-100">
           <AnnotatorKindLabel kind="HUMAN" />
           <Button
-            variant="default"
-            size="compact"
+            size="S"
             isDisabled
             aria-label="delete annotation"
             icon={<Icon svg={<Icons.CloseOutline />} />}
-            onClick={onDelete}
+            onPress={onDelete}
           />
         </Flex>
       }
@@ -477,7 +478,7 @@ function NewAnnotationPopoverContent(props: {
           />
           <Button
             variant="primary"
-            onClick={() => {
+            onPress={() => {
               onAnnotationNameSelect(newName);
             }}
           >

diff --git a/app/src/components/trace/SpanAnnotationActionMenu.tsx b/app/src/components/trace/SpanAnnotationActionMenu.tsx
@@ -6,16 +6,11 @@ import React, {
 } from "react";
 import { graphql, useMutation } from "react-relay";
 
-import {
-  Button,
-  Dialog,
-  DialogContainer,
-  Flex,
-  Text,
-  View,
-} from "@arizeai/components";
+import { Dialog, DialogContainer, Flex, Text, View } from "@arizeai/components";
 import { NoticeConfig } from "@arizeai/components/dist/notification/types";
 
+import { Button } from "@phoenix/components";
+
 import { SpanAnnotationActionMenuDeleteMutation } from "./__generated__/SpanAnnotationActionMenuDeleteMutation.graphql";
 import { AnnotationActionMenu } from "./AnnotationActionMenu";
 
@@ -101,7 +96,7 @@ export function SpanAnnotationActionMenu(props: SpanAnnotationActionMenuProps) {
           <Flex direction="row" justifyContent="end">
             <Button
               variant="danger"
-              onClick={() => {
+              onPress={() => {
                 handleDelete();
                 setConfirmDialog(null);
               }}

diff --git a/app/src/components/trace/SpanAnnotationForm.tsx b/app/src/components/trace/SpanAnnotationForm.tsx
@@ -2,15 +2,9 @@ import React, { useCallback } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { css } from "@emotion/react";
 
-import {
-  Button,
-  Flex,
-  Form,
-  TextArea,
-  TextField,
-  View,
-} from "@arizeai/components";
+import { Flex, Form, TextArea, TextField, View } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 export type AnnotationFormData = {
   name: string;
   score?: number | null;
@@ -189,8 +183,8 @@ export function SpanAnnotationForm(props: SpanAnnotationFormProps) {
               <Button
                 variant={isDirty ? "primary" : "default"}
                 type="submit"
-                size="compact"
-                disabled={!isValid || !isDirty || isSubmitting}
+                size="S"
+                isDisabled={!isValid || !isDirty || isSubmitting}
               >
                 {isSubmitting ? "Saving..." : "Save"}
               </Button>

diff --git a/app/src/pages/auth/ForgotPasswordForm.tsx b/app/src/pages/auth/ForgotPasswordForm.tsx
@@ -2,8 +2,9 @@ import React, { useCallback, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { css } from "@emotion/react";
 
-import { Alert, Button, Form, TextField, View } from "@arizeai/components";
+import { Alert, Form, TextField, View } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { prependBasename } from "@phoenix/utils/routingUtils";
 
 type ForgotPasswordFormParams = {
@@ -80,8 +81,8 @@ export function ForgotPasswordForm({
             }
           `}
         >
-          <Button variant="primary" type={"submit"} loading={isLoading}>
-            Send
+          <Button variant="primary" type={"submit"} isDisabled={isLoading}>
+            {isLoading ? "Sending..." : "Send"}
           </Button>
         </div>
       </Form>

diff --git a/app/src/pages/auth/LoginForm.tsx b/app/src/pages/auth/LoginForm.tsx
@@ -3,8 +3,9 @@ import { Controller, useForm } from "react-hook-form";
 import { useNavigate } from "react-router";
 import { css } from "@emotion/react";
 
-import { Alert, Button, Form, TextField, View } from "@arizeai/components";
+import { Alert, Form, Icon, Icons, TextField, View } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { Link } from "@phoenix/components";
 import { prependBasename } from "@phoenix/utils/routingUtils";
 import { getReturnUrl } from "@phoenix/utils/routingUtils";
@@ -129,10 +130,13 @@ export function LoginForm(props: LoginFormProps) {
         >
           <Button
             variant="primary"
-            loading={isLoading}
-            onClick={handleSubmit(onSubmit)}
+            isDisabled={isLoading}
+            icon={
+              isLoading ? <Icon svg={<Icons.LoadingOutline />} /> : undefined
+            }
+            onPress={() => handleSubmit(onSubmit)()}
           >
-            Login
+            {isLoading ? "Logging in" : "Log in"}
           </Button>
         </div>
       </Form>

diff --git a/app/src/pages/dataset/AddDatasetExampleButton.tsx b/app/src/pages/dataset/AddDatasetExampleButton.tsx
@@ -1,6 +1,8 @@
 import React, { ReactNode, useCallback, useState } from "react";
 
-import { Button, DialogContainer, Icon, Icons } from "@arizeai/components";
+import { DialogContainer, Icon, Icons } from "@arizeai/components";
+
+import { Button } from "@phoenix/components";
 
 import { AddDatasetExampleDialog } from "./AddDatasetExampleDialog";
 
@@ -28,9 +30,8 @@ export function AddDatasetExampleButton(props: AddDatasetExampleButtonProps) {
     <>
       <Button
         icon={<Icon svg={<Icons.PlusCircleOutline />} />}
-        size="compact"
-        variant="default"
-        onClick={onAddExample}
+        size="S"
+        onPress={onAddExample}
       >
         Add Example
       </Button>

diff --git a/app/src/pages/dataset/AddDatasetExampleDialog.tsx b/app/src/pages/dataset/AddDatasetExampleDialog.tsx
@@ -5,15 +5,17 @@ import { css } from "@emotion/react";
 
 import {
   Alert,
-  Button,
   Card,
   CardProps,
   Dialog,
   Flex,
+  Icon,
+  Icons,
   TextArea,
   View,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { JSONEditor } from "@phoenix/components/code";
 import { isJSONObjectString } from "@phoenix/utils/jsonUtils";
 
@@ -226,12 +228,12 @@ export function AddDatasetExampleDialog(props: AddDatasetExampleDialogProps) {
         <Flex direction="row" justifyContent="end" gap="size-100">
           <Button
             variant="primary"
-            size="compact"
-            disabled={!isValid || isCommitting}
-            loading={isCommitting}
-            onClick={handleSubmit(onSubmit)}
+            size="S"
+            isDisabled={!isValid || isCommitting}
+            icon={isCommitting ? <Icon svg={<Icons.LoadingOutline />} /> : null}
+            onPress={() => handleSubmit(onSubmit)()}
           >
-            Add Example
+            {isCommitting ? "Adding Example..." : "Add Example"}
           </Button>
         </Flex>
       </View>