From 64da6b95c8ad858259a436507c42aeb1e1ebcc5d Mon Sep 17 00:00:00 2001 From: Mikyo King Date: Mon, 23 Dec 2024 10:09:45 -0700 Subject: [PATCH 01/14] add an eslint rule for the button --- app/.eslintrc.js | 11 ++++++++++- app/package.json | 1 + app/pnpm-lock.yaml | 12 ++++++++++++ 3 files changed, 23 insertions(+), 1 deletion(-) diff --git a/app/.eslintrc.js b/app/.eslintrc.js index 68c0375f57..294b96f305 100644 --- a/app/.eslintrc.js +++ b/app/.eslintrc.js @@ -8,7 +8,7 @@ module.exports = { "eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended", - "plugin:storybook/recommended" + "plugin:storybook/recommended", ], overrides: [], parser: "@typescript-eslint/parser", @@ -22,6 +22,7 @@ module.exports = { "simple-import-sort", "@typescript-eslint", "eslint-plugin-react-compiler", + "deprecate", ], rules: { "react/no-unknown-property": ["error", { ignore: ["css"] }], @@ -51,6 +52,14 @@ module.exports = { ], }, ], + "deprecate/import": [ + "warn", + { + name: "Button", + module: "@arizeai/components", + use: "@phoenix/components/button", + }, + ], }, settings: { react: { diff --git a/app/package.json b/app/package.json index fa7af4e0d4..078a743fdf 100644 --- a/app/package.json +++ b/app/package.json @@ -92,6 +92,7 @@ "chromatic": "^11.20.0", "cpy-cli": "^5.0.0", "eslint": "^8.57.0", + "eslint-plugin-deprecate": "^0.8.5", "eslint-plugin-react": "^7.34.4", "eslint-plugin-react-compiler": "0.0.0-experimental-42acc6a-20241001", "eslint-plugin-react-hooks": "^4.6.2", diff --git a/app/pnpm-lock.yaml b/app/pnpm-lock.yaml index 47e5b6f2bf..5d5556058e 100644 --- a/app/pnpm-lock.yaml +++ b/app/pnpm-lock.yaml @@ -264,6 +264,9 @@ importers: eslint: specifier: ^8.57.0 version: 8.57.0 + eslint-plugin-deprecate: + specifier: ^0.8.5 + version: 0.8.5(eslint@8.57.0) eslint-plugin-react: specifier: ^7.34.4 version: 7.34.4(eslint@8.57.0) @@ -3055,6 +3058,11 @@ packages: peerDependencies: eslint: '>=7.0.0' + eslint-plugin-deprecate@0.8.5: + resolution: {integrity: sha512-nBH14smi2O1qsQY/deVf1xg1XPMB5ADPPcXWpUDp5ptGrWuNGD7Ghe0mIQKmsoFr6VjjDxJZ5tt78hb5GaCScA==} + peerDependencies: + eslint: '>=2.x' + eslint-plugin-react-compiler@0.0.0-experimental-42acc6a-20241001: resolution: {integrity: sha512-pzkTsWowlHK4yKHsK1d9tTKOUtApZzL7wI6jT5iN31d00DhI9JGDD0pkLohQ6Wfkll+2aiqTPGj9esJoGYmRaw==} engines: {node: ^14.17.0 || ^16.0.0 || >= 18.0.0} @@ -8851,6 +8859,10 @@ snapshots: dependencies: eslint: 8.57.0 + eslint-plugin-deprecate@0.8.5(eslint@8.57.0): + dependencies: + eslint: 8.57.0 + eslint-plugin-react-compiler@0.0.0-experimental-42acc6a-20241001(eslint@8.57.0): dependencies: '@babel/core': 7.24.9 From 9c453ecc8c32bd9adf3a708d9092dea087396429 Mon Sep 17 00:00:00 2001 From: Mikyo King Date: Mon, 23 Dec 2024 10:30:05 -0700 Subject: [PATCH 02/14] migrate copy to clipboard button --- app/.eslintrc.js | 2 +- app/src/components/CopyToClipboardButton.tsx | 41 +++++++++----------- app/src/components/button/index.tsx | 1 + app/src/components/index.tsx | 3 ++ 4 files changed, 23 insertions(+), 24 deletions(-) create mode 100644 app/src/components/button/index.tsx diff --git a/app/.eslintrc.js b/app/.eslintrc.js index 294b96f305..ec93a7489d 100644 --- a/app/.eslintrc.js +++ b/app/.eslintrc.js @@ -53,7 +53,7 @@ module.exports = { }, ], "deprecate/import": [ - "warn", + "error", { name: "Button", module: "@arizeai/components", diff --git a/app/src/components/CopyToClipboardButton.tsx b/app/src/components/CopyToClipboardButton.tsx index c769f56c83..e5b24a6852 100644 --- a/app/src/components/CopyToClipboardButton.tsx +++ b/app/src/components/CopyToClipboardButton.tsx @@ -1,33 +1,30 @@ import React, { useCallback, useState } from "react"; import copy from "copy-to-clipboard"; -import { - Button, - ButtonProps, - Icon, - Icons, - Tooltip, - TooltipTrigger, -} from "@arizeai/components"; +import { Icon, Icons, Tooltip, TooltipTrigger } from "@arizeai/components"; const SHOW_COPIED_TIMEOUT_MS = 2000; +import { Button, ButtonProps } from "@phoenix/components"; + +export type CopyToClipboardButtonProps = Omit< + ButtonProps, + "icon" | "onPress" +> & { + /** + * The text to copy to the clipboard + */ + text: string; +}; + /** * An Icon button that copies the given text to the clipboard when clicked. */ -export function CopyToClipboardButton({ - text, - size = "compact", - disabled = false, -}: { - text: string; - - size?: ButtonProps["size"]; - disabled?: boolean; -}) { +export function CopyToClipboardButton(props: CopyToClipboardButtonProps) { + const { text, ...otherProps } = props; const [isCopied, setIsCopied] = useState(false); - const onClick = useCallback(() => { + const onPress = useCallback(() => { copy(text); setIsCopied(true); setTimeout(() => { @@ -38,15 +35,13 @@ export function CopyToClipboardButton({
From 67ea282663a426771afce914ab02aad0dfe546a0 Mon Sep 17 00:00:00 2001 From: Mikyo King Date: Mon, 23 Dec 2024 10:58:50 -0700 Subject: [PATCH 04/14] migrate src/pages/trace/SpanToDatasetExampleDialog.tsx: --- .../trace/SpanToDatasetExampleDialog.tsx | 21 ++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/app/src/pages/trace/SpanToDatasetExampleDialog.tsx b/app/src/pages/trace/SpanToDatasetExampleDialog.tsx index e442d0da10..de1d23dcee 100644 --- a/app/src/pages/trace/SpanToDatasetExampleDialog.tsx +++ b/app/src/pages/trace/SpanToDatasetExampleDialog.tsx @@ -1,11 +1,10 @@ -import React, { useCallback, useState } from "react"; +import React, { BaseSyntheticEvent, useCallback, useState } from "react"; import { Controller, useForm } from "react-hook-form"; import { graphql, useLazyLoadQuery, useMutation } from "react-relay"; import { css } from "@emotion/react"; import { Alert, - Button, Card, CardProps, Dialog, @@ -15,6 +14,7 @@ import { View, } from "@arizeai/components"; +import { Button } from "@phoenix/components"; import { JSONEditor } from "@phoenix/components/code"; import { DatasetPicker, NewDatasetButton } from "@phoenix/components/dataset"; import { isJSONObjectString } from "@phoenix/utils/jsonUtils"; @@ -141,11 +141,18 @@ export function SpanToDatasetExampleDialog({ extra={ From 5c32203941b063a067270b9c66ef1e35748e88aa Mon Sep 17 00:00:00 2001 From: Mikyo King Date: Mon, 23 Dec 2024 11:08:12 -0700 Subject: [PATCH 05/14] migrate modified: src/pages/settings/UsersCard.tsx modified: src/pages/trace/EditSpanAnnotationsButton.tsx modified: src/pages/trace/SpanAnnotationsEmpty.tsx modified: src/pages/trace/SpanToDatasetExampleDialog.tsx --- app/src/pages/settings/UsersCard.tsx | 15 ++++----------- .../pages/trace/EditSpanAnnotationsButton.tsx | 16 +++++----------- app/src/pages/trace/SpanAnnotationsEmpty.tsx | 8 ++++---- .../pages/trace/SpanToDatasetExampleDialog.tsx | 2 +- 4 files changed, 14 insertions(+), 27 deletions(-) diff --git a/app/src/pages/settings/UsersCard.tsx b/app/src/pages/settings/UsersCard.tsx index 8c80baa0bd..362ad23381 100644 --- a/app/src/pages/settings/UsersCard.tsx +++ b/app/src/pages/settings/UsersCard.tsx @@ -1,15 +1,9 @@ import React, { ReactNode, Suspense, useState } from "react"; import { graphql, useLazyLoadQuery } from "react-relay"; -import { - Button, - Card, - DialogContainer, - Icon, - Icons, - View, -} from "@arizeai/components"; +import { Card, DialogContainer, Icon, Icons, View } from "@arizeai/components"; +import { Button } from "@phoenix/components"; import { Loading } from "@phoenix/components"; import { useNotifyError, useNotifySuccess } from "@phoenix/contexts"; @@ -44,7 +38,7 @@ export function UsersCard() { bodyStyle={{ padding: 0, overflowX: "auto" }} extra={ diff --git a/app/src/components/auth/OneTimeAPIKeyDialog.tsx b/app/src/components/auth/OneTimeAPIKeyDialog.tsx index a85b3b86d9..16b648cea1 100644 --- a/app/src/components/auth/OneTimeAPIKeyDialog.tsx +++ b/app/src/components/auth/OneTimeAPIKeyDialog.tsx @@ -37,7 +37,7 @@ export function OneTimeAPIKeyDialog(props: { jwt: string }) { - + diff --git a/app/src/components/code/styles.tsx b/app/src/components/code/styles.tsx index c8c3293326..c54de5f3d0 100644 --- a/app/src/components/code/styles.tsx +++ b/app/src/components/code/styles.tsx @@ -9,6 +9,10 @@ export const readOnlyCodeMirrorCSS = css` export const codeBlockWithCopyCSS = css` position: relative; + min-height: 53px; + display: flex; + flex-direction: row; + align-items: center; .copy-to-clipboard-button { position: absolute; top: var(--ac-global-dimension-size-100); From e5f613a17ed04910bf81a9700f531701aea83855 Mon Sep 17 00:00:00 2001 From: Mikyo King Date: Mon, 23 Dec 2024 11:41:06 -0700 Subject: [PATCH 07/14] fix span image --- app/src/components/CopyToClipboardButton.tsx | 10 ++++++++-- app/src/components/code/styles.tsx | 2 +- app/src/pages/trace/SpanImage.tsx | 8 +++++--- cspell.json | 1 + 4 files changed, 15 insertions(+), 6 deletions(-) diff --git a/app/src/components/CopyToClipboardButton.tsx b/app/src/components/CopyToClipboardButton.tsx index e5b24a6852..15ee613fdf 100644 --- a/app/src/components/CopyToClipboardButton.tsx +++ b/app/src/components/CopyToClipboardButton.tsx @@ -9,8 +9,13 @@ import { Button, ButtonProps } from "@phoenix/components"; export type CopyToClipboardButtonProps = Omit< ButtonProps, - "icon" | "onPress" + "icon" | "onPress" | "size" > & { + /** + * The size of the button + * @default S + */ + size?: ButtonProps["size"]; /** * The text to copy to the clipboard */ @@ -21,7 +26,7 @@ export type CopyToClipboardButtonProps = Omit< * An Icon button that copies the given text to the clipboard when clicked. */ export function CopyToClipboardButton(props: CopyToClipboardButtonProps) { - const { text, ...otherProps } = props; + const { text, size = "S", ...otherProps } = props; const [isCopied, setIsCopied] = useState(false); const onPress = useCallback(() => { @@ -35,6 +40,7 @@ export function CopyToClipboardButton(props: CopyToClipboardButtonProps) {
From e30a6f7ff386c66c0a9f450f55be998ea66e1e70 Mon Sep 17 00:00:00 2001 From: Mikyo King Date: Mon, 23 Dec 2024 14:00:20 -0700 Subject: [PATCH 09/14] migrate more --- .../playground/PlaygroundDatasetSection.tsx | 95 ++++++------------- .../playground/PlaygroundOutputMoveButton.tsx | 15 +-- .../playground/PlaygroundResponseFormat.tsx | 7 +- app/src/pages/playground/PlaygroundTool.tsx | 8 +- .../pages/playground/SpanPlaygroundPage.tsx | 7 +- app/src/pages/profile/ViewerAPIKeys.tsx | 14 +-- app/src/pages/profile/ViewerProfileCard.tsx | 13 ++- .../project/DatasetSelectorPopoverContent.tsx | 5 +- app/src/pages/project/ProjectTableEmpty.tsx | 6 +- app/src/pages/project/SessionsTableEmpty.tsx | 7 +- .../project/SpanFilterConditionField.tsx | 6 +- .../pages/project/SpanSelectionToolbar.tsx | 25 +++-- app/src/pages/projects/NewProjectButton.tsx | 5 +- app/src/pages/projects/ProjectActionMenu.tsx | 7 +- .../pages/projects/RemoveProjectDataForm.tsx | 13 ++- app/src/pages/settings/APIKeysCard.tsx | 8 +- app/src/pages/settings/DeleteUserDialog.tsx | 9 +- .../pages/settings/ResetPasswordDialog.tsx | 14 +-- 18 files changed, 111 insertions(+), 153 deletions(-) diff --git a/app/src/pages/playground/PlaygroundDatasetSection.tsx b/app/src/pages/playground/PlaygroundDatasetSection.tsx index cd4046d600..19cb8135ce 100644 --- a/app/src/pages/playground/PlaygroundDatasetSection.tsx +++ b/app/src/pages/playground/PlaygroundDatasetSection.tsx @@ -1,56 +1,16 @@ import React, { useMemo } from "react"; import { graphql, useLazyLoadQuery } from "react-relay"; import { useNavigate } from "react-router"; -import { css } from "@emotion/react"; -import { Button, Flex, Icon, Icons, Text, View } from "@arizeai/components"; +import { Flex, Icon, Icons, Text, View } from "@arizeai/components"; +import { Button } from "@phoenix/components"; import { usePlaygroundContext } from "@phoenix/contexts/PlaygroundContext"; import { PlaygroundDatasetSectionQuery } from "./__generated__/PlaygroundDatasetSectionQuery.graphql"; import { PlaygroundDatasetExamplesTable } from "./PlaygroundDatasetExamplesTable"; import { PlaygroundDatasetExamplesTableProvider } from "./PlaygroundDatasetExamplesTableContext"; -function RunInProgressText() { - return ( - - Run in progress - - - ); -} - export function PlaygroundDatasetSection({ datasetId }: { datasetId: string }) { const instances = usePlaygroundContext((state) => state.instances); const isRunning = instances.some((instance) => instance.activeRunId != null); @@ -79,14 +39,16 @@ export function PlaygroundDatasetSection({ datasetId }: { datasetId: string }) { return ( - - + + {data.dataset.name ?? "Dataset"} results {data.dataset.exampleCount != null ? ( @@ -94,27 +56,30 @@ export function PlaygroundDatasetSection({ datasetId }: { datasetId: string }) { ) : null} - - {isRunning && } - {experimentIds.length > 0 && ( - - )} - + {experimentIds.length > 0 && ( + + )} diff --git a/app/src/pages/playground/PlaygroundOutputMoveButton.tsx b/app/src/pages/playground/PlaygroundOutputMoveButton.tsx index 4aa41f0cf0..3a70ffe28f 100644 --- a/app/src/pages/playground/PlaygroundOutputMoveButton.tsx +++ b/app/src/pages/playground/PlaygroundOutputMoveButton.tsx @@ -1,13 +1,8 @@ import React from "react"; -import { - Button, - Icon, - Icons, - Tooltip, - TooltipTrigger, -} from "@arizeai/components"; +import { Icon, Icons, Tooltip, TooltipTrigger } from "@arizeai/components"; +import { Button } from "@phoenix/components"; import { usePlaygroundContext } from "@phoenix/contexts/PlaygroundContext"; import { ChatMessage, @@ -36,12 +31,10 @@ export const PlaygroundOutputMoveButton = ({ return ( } diff --git a/app/src/pages/project/ProjectTableEmpty.tsx b/app/src/pages/project/ProjectTableEmpty.tsx index f02ea2a8d3..2cc57e9701 100644 --- a/app/src/pages/project/ProjectTableEmpty.tsx +++ b/app/src/pages/project/ProjectTableEmpty.tsx @@ -2,7 +2,6 @@ import React, { ReactNode, useState } from "react"; import { css } from "@emotion/react"; import { - Button, Dialog, DialogContainer, Flex, @@ -11,6 +10,7 @@ import { View, } from "@arizeai/components"; +import { Button } from "@phoenix/components"; import { CodeLanguage, CodeLanguageRadioGroup } from "@phoenix/components/code"; import { PythonProjectGuide } from "@phoenix/components/project/PythonProjectGuide"; import { TypeScriptProjectGuide } from "@phoenix/components/project/TypeScriptProjectGuide"; @@ -35,7 +35,7 @@ function SetupProjectDialog({ projectName }: { projectName: string }) { export function ProjectTableEmpty({ projectName }: { projectName: string }) { const [dialog, setDialog] = useState(null); - const onGettingStartedClick = () => { + const onGettingStartedPress = () => { setDialog(); }; return ( @@ -53,7 +53,7 @@ export function ProjectTableEmpty({ projectName }: { projectName: string }) { diff --git a/app/src/pages/project/SessionsTableEmpty.tsx b/app/src/pages/project/SessionsTableEmpty.tsx index a6162ff1d2..263f1ff188 100644 --- a/app/src/pages/project/SessionsTableEmpty.tsx +++ b/app/src/pages/project/SessionsTableEmpty.tsx @@ -2,7 +2,6 @@ import React, { ReactNode, useState } from "react"; import { css } from "@emotion/react"; import { - Button, Dialog, DialogContainer, Flex, @@ -11,6 +10,7 @@ import { View, } from "@arizeai/components"; +import { Button } from "@phoenix/components"; import { CodeLanguage, CodeLanguageRadioGroup } from "@phoenix/components/code"; import { PythonSessionsGuide } from "./PythonSessionsGuide"; @@ -36,7 +36,7 @@ function SetupSessionsDialog() { export function SessionsTableEmpty() { const [dialog, setDialog] = useState(null); - const onGettingStartedClick = () => { + const onGettingStartedPress = () => { setDialog(); }; @@ -53,9 +53,8 @@ export function SessionsTableEmpty() { No sessions found for this project diff --git a/app/src/pages/project/SpanFilterConditionField.tsx b/app/src/pages/project/SpanFilterConditionField.tsx index ebf39711ab..da866e9916 100644 --- a/app/src/pages/project/SpanFilterConditionField.tsx +++ b/app/src/pages/project/SpanFilterConditionField.tsx @@ -18,7 +18,6 @@ import { css } from "@emotion/react"; import { AddonBefore, - Button, Field, Flex, Form, @@ -32,6 +31,7 @@ import { View, } from "@arizeai/components"; +import { Button } from "@phoenix/components"; import { useTheme } from "@phoenix/contexts"; import environment from "@phoenix/RelayEnvironment"; @@ -477,9 +477,9 @@ function FilterConditionSnippet(props: { />
- + { diff --git a/app/src/pages/projects/NewProjectButton.tsx b/app/src/pages/projects/NewProjectButton.tsx index 0253eac06b..0b688a4556 100644 --- a/app/src/pages/projects/NewProjectButton.tsx +++ b/app/src/pages/projects/NewProjectButton.tsx @@ -1,7 +1,6 @@ import React, { ReactNode, useState } from "react"; import { - Button, Dialog, DialogContainer, Icon, @@ -10,6 +9,7 @@ import { View, } from "@arizeai/components"; +import { Button } from "@phoenix/components"; import { ExternalLink } from "@phoenix/components"; import { CodeLanguage, CodeLanguageRadioGroup } from "@phoenix/components/code"; import { TypeScriptProjectGuide } from "@phoenix/components/project/TypeScriptProjectGuide"; @@ -24,9 +24,8 @@ export function NewProjectButton() { return (
diff --git a/app/src/pages/settings/DeleteUserDialog.tsx b/app/src/pages/settings/DeleteUserDialog.tsx index 5329cda4d6..dfcaf1cb83 100644 --- a/app/src/pages/settings/DeleteUserDialog.tsx +++ b/app/src/pages/settings/DeleteUserDialog.tsx @@ -1,8 +1,9 @@ import React, { useCallback } from "react"; import { graphql, useMutation } from "react-relay"; -import { Button, Dialog, Flex, Text, View } from "@arizeai/components"; +import { Dialog, Flex, Text, View } from "@arizeai/components"; +import { Button } from "@phoenix/components"; import { useNotifyError, useNotifySuccess } from "@phoenix/contexts"; export function DeleteUserDialog({ @@ -61,15 +62,15 @@ export function DeleteUserDialog({ borderTopWidth="thin" > - diff --git a/app/src/pages/settings/ResetPasswordDialog.tsx b/app/src/pages/settings/ResetPasswordDialog.tsx index 6f2d893da6..7948a6b7a3 100644 --- a/app/src/pages/settings/ResetPasswordDialog.tsx +++ b/app/src/pages/settings/ResetPasswordDialog.tsx @@ -2,15 +2,9 @@ import React, { useCallback } from "react"; import { Controller, useForm } from "react-hook-form"; import { graphql, useMutation } from "react-relay"; -import { - Button, - Dialog, - Flex, - Form, - TextField, - View, -} from "@arizeai/components"; +import { Dialog, Flex, Form, TextField, View } from "@arizeai/components"; +import { Button } from "@phoenix/components"; import { useNotifyError, useNotifySuccess } from "@phoenix/contexts"; import { ResetPasswordDialogMutation } from "./__generated__/ResetPasswordDialogMutation.graphql"; @@ -144,8 +138,8 @@ export function ResetPasswordDialog({ From 35320e9b31c3e3e267d334a2d690f90f3c3e09cb Mon Sep 17 00:00:00 2001 From: Mikyo King Date: Mon, 23 Dec 2024 14:53:00 -0700 Subject: [PATCH 10/14] convert more buttons: src/components/table/CellWithControlsWrapper.tsx modified: src/components/trace/TraceTree.tsx modified: src/pages/ErrorElement.tsx modified: src/pages/auth/OAuth2Login.tsx modified: src/pages/auth/ResetPasswordForm.tsx modified: src/pages/auth/ResetPasswordWithTokenForm.tsx modified: src/pages/dataset/DatasetHistoryButton.tsx modified: src/pages/embedding/ExportSelectionButton.tsx modified: src/pages/embedding/PointSelectionPanelContent.tsx modified: src/pages/example/EditExampleDialog.tsx modified: src/pages/experiment/ExperimentCompareTable.tsx modified: src/pages/experiments/ExperimentSelectionToolbar.tsx modified: src/pages/playground/ModelConfigButton.tsx modified: src/pages/playground/PlaygroundDatasetExamplesTable.tsx modified: src/pages/playground/PlaygroundRunButton.tsx modified: src/pages/playground/PlaygroundRunTraceDialog.tsx modified: src/pages/playground/PlaygroundTemplate.tsx modified: src/pages/playground/RunMetadataFooter.tsx --- .../table/CellWithControlsWrapper.tsx | 2 +- app/src/components/trace/TraceTree.tsx | 90 ++++++++++--------- app/src/pages/ErrorElement.tsx | 8 +- app/src/pages/auth/OAuth2Login.tsx | 3 +- app/src/pages/auth/ResetPasswordForm.tsx | 8 +- .../pages/auth/ResetPasswordWithTokenForm.tsx | 5 +- .../pages/dataset/DatasetHistoryButton.tsx | 6 +- .../pages/embedding/ExportSelectionButton.tsx | 26 +++--- .../embedding/PointSelectionPanelContent.tsx | 7 +- app/src/pages/example/EditExampleDialog.tsx | 18 ++-- .../experiment/ExperimentCompareTable.tsx | 22 ++--- .../ExperimentSelectionToolbar.tsx | 31 ++++--- .../pages/playground/ModelConfigButton.tsx | 14 ++- .../PlaygroundDatasetExamplesTable.tsx | 24 ++--- .../pages/playground/PlaygroundRunButton.tsx | 30 ++----- .../playground/PlaygroundRunTraceDialog.tsx | 6 +- .../pages/playground/PlaygroundTemplate.tsx | 8 +- .../pages/playground/RunMetadataFooter.tsx | 20 ++--- 18 files changed, 156 insertions(+), 172 deletions(-) diff --git a/app/src/components/table/CellWithControlsWrapper.tsx b/app/src/components/table/CellWithControlsWrapper.tsx index 0d5fa72309..2bfe78920c 100644 --- a/app/src/components/table/CellWithControlsWrapper.tsx +++ b/app/src/components/table/CellWithControlsWrapper.tsx @@ -14,7 +14,7 @@ const cellWithControlsWrapCSS = css` opacity: 1; display: flex; // make them stand out - .ac-button { + button { border-color: var(--ac-global-color-primary); } } diff --git a/app/src/components/trace/TraceTree.tsx b/app/src/components/trace/TraceTree.tsx index 7682876d65..a432b00d86 100644 --- a/app/src/components/trace/TraceTree.tsx +++ b/app/src/components/trace/TraceTree.tsx @@ -7,16 +7,17 @@ import React, { import { css } from "@emotion/react"; import { - Button, classNames, Flex, Icon, Icons, Tooltip, TooltipTrigger, + TriggerWrap, View, } from "@arizeai/components"; +import { Button } from "@phoenix/components"; import { TokenCount } from "@phoenix/components/trace/TokenCount"; import { usePreferencesContext } from "@phoenix/contexts/PreferencesContext"; @@ -89,25 +90,27 @@ function TraceTreeToolbar() { - -
diff --git a/app/src/pages/auth/ResetPasswordWithTokenForm.tsx b/app/src/pages/auth/ResetPasswordWithTokenForm.tsx index 8ae00b82d2..1f825863c7 100644 --- a/app/src/pages/auth/ResetPasswordWithTokenForm.tsx +++ b/app/src/pages/auth/ResetPasswordWithTokenForm.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, TextField, View } from "@arizeai/components"; +import { Button } from "@phoenix/components"; import { prependBasename } from "@phoenix/utils/routingUtils"; const MIN_PASSWORD_LENGTH = 4; @@ -145,7 +146,7 @@ export function ResetPasswordWithTokenForm({ diff --git a/app/src/pages/dataset/DatasetHistoryButton.tsx b/app/src/pages/dataset/DatasetHistoryButton.tsx index 116cd3cea9..ea9141e994 100644 --- a/app/src/pages/dataset/DatasetHistoryButton.tsx +++ b/app/src/pages/dataset/DatasetHistoryButton.tsx @@ -1,7 +1,6 @@ import React, { ReactNode, Suspense, useState } from "react"; import { - Button, DialogContainer, Icon, Icons, @@ -9,6 +8,8 @@ import { TooltipTrigger, } from "@arizeai/components"; +import { Button } from "@phoenix/components"; + import { DatasetHistoryDialog } from "./DatasetHistoryDialog"; export function DatasetHistoryButton(props: { datasetId: string }) { @@ -18,10 +19,9 @@ export function DatasetHistoryButton(props: { datasetId: string }) { <> @@ -108,8 +112,8 @@ export function ExportSelectionButton() { extra={
diff --git a/app/src/pages/example/EditExampleDialog.tsx b/app/src/pages/example/EditExampleDialog.tsx index 412f4ae217..b12f53f8b9 100644 --- a/app/src/pages/example/EditExampleDialog.tsx +++ b/app/src/pages/example/EditExampleDialog.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"; @@ -108,10 +110,16 @@ export function EditExampleDialog(props: EditExampleDialogProps) { extra={ diff --git a/app/src/pages/experiment/ExperimentCompareTable.tsx b/app/src/pages/experiment/ExperimentCompareTable.tsx index b1108fca4c..4f2015e067 100644 --- a/app/src/pages/experiment/ExperimentCompareTable.tsx +++ b/app/src/pages/experiment/ExperimentCompareTable.tsx @@ -20,7 +20,6 @@ import { css } from "@emotion/react"; import { ActionMenu, - Button, Card, CardProps, Dialog, @@ -36,6 +35,7 @@ import { View, } from "@arizeai/components"; +import { Button } from "@phoenix/components"; import { CopyToClipboardButton, ViewSummaryAside } from "@phoenix/components"; import { AnnotationLabel, @@ -245,11 +245,10 @@ export function ExperimentCompareTable(props: ExampleCompareTableProps) { controls={ diff --git a/app/src/pages/experiments/ExperimentSelectionToolbar.tsx b/app/src/pages/experiments/ExperimentSelectionToolbar.tsx index ec42a40ce8..6d9883d952 100644 --- a/app/src/pages/experiments/ExperimentSelectionToolbar.tsx +++ b/app/src/pages/experiments/ExperimentSelectionToolbar.tsx @@ -4,7 +4,6 @@ import { useNavigate } from "react-router"; import { css } from "@emotion/react"; import { - Button, Dialog, DialogContainer, Flex, @@ -14,6 +13,7 @@ import { View, } from "@arizeai/components"; +import { Button } from "@phoenix/components"; import { useNotifyError, useNotifySuccess } from "@phoenix/contexts"; interface SelectedExperiment { @@ -84,7 +84,7 @@ export function ExperimentSelectionToolbar( selectedExperiments, ]); - const onClickDelete = useCallback(() => { + const onPressDelete = useCallback(() => { setDialog( @@ -102,7 +102,7 @@ export function ExperimentSelectionToolbar( diff --git a/app/src/pages/playground/PlaygroundTemplate.tsx b/app/src/pages/playground/PlaygroundTemplate.tsx index d07043664a..8b3bbb0595 100644 --- a/app/src/pages/playground/PlaygroundTemplate.tsx +++ b/app/src/pages/playground/PlaygroundTemplate.tsx @@ -1,7 +1,6 @@ import React, { Suspense } from "react"; import { - Button, Card, Content, Flex, @@ -12,7 +11,7 @@ import { TriggerWrap, } from "@arizeai/components"; -import { Loading } from "@phoenix/components"; +import { Button, Loading } from "@phoenix/components"; import { AlphabeticIndexIcon } from "@phoenix/components/AlphabeticIndexIcon"; import { usePlaygroundContext } from "@phoenix/contexts/PlaygroundContext"; @@ -80,10 +79,9 @@ function DeleteButton(props: PlaygroundInstanceProps) { diff --git a/app/src/components/pointcloud/PointCloud.tsx b/app/src/components/pointcloud/PointCloud.tsx index a58e49cde8..9586776a87 100644 --- a/app/src/components/pointcloud/PointCloud.tsx +++ b/app/src/components/pointcloud/PointCloud.tsx @@ -5,11 +5,11 @@ import { ThemeContext as EmotionThemeContext } from "@emotion/react"; import { ActionTooltip, - Button, Heading, Icon, InfoOutline, TooltipTrigger, + TriggerWrap, } from "@arizeai/components"; import { Axes, @@ -21,6 +21,7 @@ import { ThreeDimensionalControls, } from "@arizeai/point-cloud"; +import { Button } from "@phoenix/components"; import { UNKNOWN_COLOR } from "@phoenix/constants/pointCloudConstants"; import { InferencesContext, @@ -184,12 +185,13 @@ function CanvasTools() { function CanvasInfo() { return ( - diff --git a/app/src/pages/example/EditExampleButton.tsx b/app/src/pages/example/EditExampleButton.tsx index 9c2764d885..bf21009772 100644 --- a/app/src/pages/example/EditExampleButton.tsx +++ b/app/src/pages/example/EditExampleButton.tsx @@ -1,6 +1,8 @@ import React, { ReactNode, useState } from "react"; -import { Button, DialogContainer, Icon, Icons } from "@arizeai/components"; +import { DialogContainer, Icon, Icons } from "@arizeai/components"; + +import { Button } from "@phoenix/components"; import { EditExampleDialog, EditExampleDialogProps } from "./EditExampleDialog"; @@ -11,10 +13,9 @@ export function EditExampleButton(props: EditExampleButtonProps) { return ( <> diff --git a/app/src/components/dataset/NewDatasetButton.tsx b/app/src/components/dataset/NewDatasetButton.tsx index 813f00ce13..2442c736d3 100644 --- a/app/src/components/dataset/NewDatasetButton.tsx +++ b/app/src/components/dataset/NewDatasetButton.tsx @@ -2,7 +2,6 @@ import React, { useState } from "react"; import { Alert, - Button, Card, Icon, Icons, @@ -10,6 +9,7 @@ import { 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 index 625565d112..1724565320 100644 --- 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 ( - diff --git a/app/src/components/pointcloud/PointCloudParameterSettings.tsx b/app/src/components/pointcloud/PointCloudParameterSettings.tsx index f7413fcdad..d91a057334 100644 --- 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 index 1a72c8a54a..a3020f5399 100644 --- 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({ diff --git a/app/src/components/trace/EditSpanAnnotationsDialog.tsx b/app/src/components/trace/EditSpanAnnotationsDialog.tsx index b0757bc320..f7472a34f3 100644 --- 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,8 +131,8 @@ function NewAnnotationButton(props: NewAnnotationButtonProps) { setIsPopoverOpen(isOpen); }} > - + New Annotation + diff --git a/app/src/pages/auth/ForgotPasswordForm.tsx b/app/src/pages/auth/ForgotPasswordForm.tsx index b191eb41ad..da9e367d12 100644 --- 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({ } `} > - diff --git a/app/src/pages/auth/LoginForm.tsx b/app/src/pages/auth/LoginForm.tsx index a120fe74f3..6c827dc2df 100644 --- 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) { > diff --git a/app/src/pages/dataset/AddDatasetExampleButton.tsx b/app/src/pages/dataset/AddDatasetExampleButton.tsx index d872657340..4bf3335786 100644 --- 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) { <> diff --git a/app/src/pages/dataset/AddDatasetExampleDialog.tsx b/app/src/pages/dataset/AddDatasetExampleDialog.tsx index a2a0f89d71..025e37d260 100644 --- 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) { diff --git a/app/src/pages/dataset/DatasetPage.tsx b/app/src/pages/dataset/DatasetPage.tsx index ccb5051919..122aea84bc 100644 --- a/app/src/pages/dataset/DatasetPage.tsx +++ b/app/src/pages/dataset/DatasetPage.tsx @@ -4,7 +4,6 @@ import { css } from "@emotion/react"; import { ActionMenu, - Button, Counter, Flex, Icon, @@ -16,7 +15,7 @@ import { View, } from "@arizeai/components"; -import { Loading } from "@phoenix/components"; +import { Button, Loading } from "@phoenix/components"; import { useNotifySuccess } from "@phoenix/contexts"; import { DatasetProvider, @@ -164,9 +163,8 @@ function DatasetPageContent({ diff --git a/app/src/pages/datasets/DatasetFromCSVForm.tsx b/app/src/pages/datasets/DatasetFromCSVForm.tsx index 316e55d6bf..635d9026bf 100644 --- a/app/src/pages/datasets/DatasetFromCSVForm.tsx +++ b/app/src/pages/datasets/DatasetFromCSVForm.tsx @@ -3,7 +3,6 @@ import { Controller, useForm } from "react-hook-form"; import { css } from "@emotion/react"; import { - Button, Dropdown, DropdownProps, Field, @@ -17,6 +16,8 @@ import { View, } from "@arizeai/components"; +import { Button } from "@phoenix/components"; + type CreateDatasetFromCSVParams = { file: FileList; input_keys: string[]; @@ -263,8 +264,7 @@ export function DatasetFromCSVForm(props: CreateDatasetFromCSVFormProps) { type="submit" isDisabled={!isValid} variant={isDirty ? "primary" : "default"} - size="compact" - loading={false} + size="S" > Create Dataset diff --git a/app/src/pages/example/ExampleDetailsDialog.tsx b/app/src/pages/example/ExampleDetailsDialog.tsx index 0e14919875..cf257c6af8 100644 --- a/app/src/pages/example/ExampleDetailsDialog.tsx +++ b/app/src/pages/example/ExampleDetailsDialog.tsx @@ -5,7 +5,6 @@ import { useNavigate } from "react-router"; import { css } from "@emotion/react"; import { - Button, Card, CardProps, Dialog, @@ -15,7 +14,7 @@ import { View, } from "@arizeai/components"; -import { CopyToClipboardButton } from "@phoenix/components"; +import { Button, CopyToClipboardButton } from "@phoenix/components"; import { JSONBlock } from "@phoenix/components/code"; import { resizeHandleCSS } from "@phoenix/components/resize"; import { useNotifySuccess } from "@phoenix/contexts"; @@ -94,9 +93,8 @@ export function ExampleDetailsDialog({ {sourceSpanInfo ? ( - + Compare + ); } diff --git a/app/src/pages/playground/PlaygroundChatTemplate.tsx b/app/src/pages/playground/PlaygroundChatTemplate.tsx index 49cee0d59f..0c12bcd573 100644 --- a/app/src/pages/playground/PlaygroundChatTemplate.tsx +++ b/app/src/pages/playground/PlaygroundChatTemplate.tsx @@ -16,7 +16,6 @@ import { CSS } from "@dnd-kit/utilities"; import { css } from "@emotion/react"; import { - Button, Card, Field, Flex, @@ -27,7 +26,7 @@ import { View, } from "@arizeai/components"; -import { CopyToClipboardButton } from "@phoenix/components"; +import { Button, CopyToClipboardButton } from "@phoenix/components"; import { CodeWrap, JSONEditor } from "@phoenix/components/code"; import { DragHandle } from "@phoenix/components/dnd/DragHandle"; import { TemplateEditor } from "@phoenix/components/templateEditor"; @@ -453,9 +452,8 @@ function SortableMessageItem({ ) : null} diff --git a/app/tests/admin-access.ts b/app/tests/admin-access.ts index 8319d731b4..4c2cec600b 100644 --- a/app/tests/admin-access.ts +++ b/app/tests/admin-access.ts @@ -6,7 +6,7 @@ test.beforeEach(async ({ page }) => { await page.getByLabel("Email").fill("admin@localhost"); await page.getByLabel("Password").fill("admin123"); - await page.getByRole("button", { name: "Login", exact: true }).click(); + await page.getByRole("button", { name: "Log In", exact: true }).click(); await page.waitForURL("**/projects"); }); diff --git a/app/tests/login.rate-limit.spec.ts b/app/tests/login.rate-limit.spec.ts index ab7f82e0a2..ba1c4ed61d 100644 --- a/app/tests/login.rate-limit.spec.ts +++ b/app/tests/login.rate-limit.spec.ts @@ -13,7 +13,7 @@ test("that login gets rate limited after too many attempts", async ({ const numberOfAttempts = 10; for (let i = 0; i < numberOfAttempts; i++) { - await page.getByRole("button", { name: "Login", exact: true }).click(); + await page.getByRole("button", { name: "Log In", exact: true }).click(); } await expect( page.getByText("Too many requests. Please try again later.") diff --git a/app/tests/member-access.spec.ts b/app/tests/member-access.spec.ts index e3ab8e6392..25bdf92c24 100644 --- a/app/tests/member-access.spec.ts +++ b/app/tests/member-access.spec.ts @@ -5,7 +5,7 @@ test.beforeEach(async ({ page }) => { page.goto(`/login`); await page.getByLabel("Email").fill("member@localhost.com"); await page.getByLabel("Password").fill("member123"); - await page.getByRole("button", { name: "Login", exact: true }).click(); + await page.getByRole("button", { name: "Log In", exact: true }).click(); await page.waitForURL("**/projects"); }); diff --git a/app/tests/user-management.spec.ts b/app/tests/user-management.spec.ts index 041a5cc776..df1f6423bb 100644 --- a/app/tests/user-management.spec.ts +++ b/app/tests/user-management.spec.ts @@ -6,7 +6,7 @@ test.beforeEach(async ({ page }) => { await page.getByLabel("Email").fill("admin@localhost"); await page.getByLabel("Password").fill("admin123"); - await page.getByRole("button", { name: "Login", exact: true }).click(); + await page.getByRole("button", { name: "Log In", exact: true }).click(); await page.waitForURL("**/projects"); }); From 1fcd2548276003b7fe6106d60e88aee8eb8c76e0 Mon Sep 17 00:00:00 2001 From: Mikyo King Date: Mon, 23 Dec 2024 16:44:33 -0700 Subject: [PATCH 14/14] fix types --- app/src/pages/dataset/DatasetCodeDropdown.tsx | 8 ++++---- app/src/pages/settings/SettingsPage.tsx | 2 +- app/src/pages/trace/SessionDetailsTraceList.tsx | 2 +- app/src/pages/trace/SpanCodeDropdown.tsx | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/app/src/pages/dataset/DatasetCodeDropdown.tsx b/app/src/pages/dataset/DatasetCodeDropdown.tsx index cd338421c6..740c980e53 100644 --- a/app/src/pages/dataset/DatasetCodeDropdown.tsx +++ b/app/src/pages/dataset/DatasetCodeDropdown.tsx @@ -72,7 +72,7 @@ export function DatasetCodeDropdown() { width="100%" > - + @@ -105,7 +105,7 @@ export function DatasetCodeDropdown() {
- +
diff --git a/app/src/pages/settings/SettingsPage.tsx b/app/src/pages/settings/SettingsPage.tsx index 0d36194c3b..7903436cc8 100644 --- a/app/src/pages/settings/SettingsPage.tsx +++ b/app/src/pages/settings/SettingsPage.tsx @@ -87,7 +87,7 @@ export function SettingsPage() { function CopyToClipboardButtonWithPadding(props: { text: string }) { return ( - + ); } diff --git a/app/src/pages/trace/SessionDetailsTraceList.tsx b/app/src/pages/trace/SessionDetailsTraceList.tsx index a90c76a84b..3b379833c6 100644 --- a/app/src/pages/trace/SessionDetailsTraceList.tsx +++ b/app/src/pages/trace/SessionDetailsTraceList.tsx @@ -170,7 +170,7 @@ function RootSpanDetails({ diff --git a/app/src/pages/trace/SpanCodeDropdown.tsx b/app/src/pages/trace/SpanCodeDropdown.tsx index e18129acb0..51dbf5111e 100644 --- a/app/src/pages/trace/SpanCodeDropdown.tsx +++ b/app/src/pages/trace/SpanCodeDropdown.tsx @@ -45,11 +45,11 @@ export function SpanCodeDropdown(props: SpanCodeDropdownProps) {
- + - +