chore(components): deprecate button (#5816)

* add an eslint rule for the button * migrate copy to clipboard button * migrate span details * migrate src/pages/trace/SpanToDatasetExampleDialog.tsx: * 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 * migrate src/components/auth/CreateAPIKeyDialog.tsx src/components/auth/OneTimeAPIKeyDialog.tsx src/components/code/styles.tsx * fix span image * src/pages/settings/UserRoleChangeDialog.tsx * migrate more * 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 * WIP * finish migration * fix playwrite * fix types
Arize-ai · Dec 26, 2024 · 1fbd3a0 · 1fbd3a0
1 parent b7fe57c
commit 1fbd3a0
Show file tree

Hide file tree

Showing 91 changed files with 562 additions and 608 deletions.
diff --git 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": [
+      "error",
+      {
+        name: "Button",
+        module: "@arizeai/components",
+        use: "@phoenix/components/button",
+      },
+    ],
   },
   settings: {
     react: {

diff --git a/app/global-setup.ts b/app/global-setup.ts
@@ -7,20 +7,19 @@ async function globalSetup(config: FullConfig) {
   page.goto(`${baseURL}/login`);
   await page.getByLabel("Email").fill("admin@localhost");
   await page.getByLabel("Password").fill("admin");
-  await page.getByRole("button", { name: "Login", exact: true }).click();
+  await page.getByRole("button", { name: "Log In", exact: true }).click();
 
   // Reset admin password
   await page.waitForURL("**/reset-password");
   await page.getByLabel("Old Password").fill("admin");
   await page.getByLabel("New Password").fill("admin123");
   await page.getByLabel("Confirm Password").fill("admin123");
   await page.getByRole("button", { name: "Reset Password" }).click();
-
   await page.goto(`${baseURL}/login`);
 
   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");
   await page.goto(`${baseURL}/settings`);
   await page.waitForURL("**/settings");
@@ -46,7 +45,7 @@ async function globalSetup(config: FullConfig) {
   page.goto(`${baseURL}/login`);
   await page.getByLabel("Email").fill("[email protected]");
   await page.getByLabel("Password").fill("member");
-  await page.getByRole("button", { name: "Login", exact: true }).click();
+  await page.getByRole("button", { name: "Log In", exact: true }).click();
 
   // Reset member password
   await page.waitForURL("**/reset-password");

diff --git 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
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/CopyToClipboardButton.tsx b/app/src/components/CopyToClipboardButton.tsx
@@ -1,33 +1,35 @@
 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" | "size"
+> & {
+  /**
+   * The size of the button
+   * @default S
+   */
+  size?: ButtonProps["size"];
+  /**
+   * 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, size = "S", ...otherProps } = props;
   const [isCopied, setIsCopied] = useState(false);
 
-  const onClick = useCallback(() => {
+  const onPress = useCallback(() => {
     copy(text);
     setIsCopied(true);
     setTimeout(() => {
@@ -38,15 +40,14 @@ export function CopyToClipboardButton({
     <div className="copy-to-clipboard-button">
       <TooltipTrigger delay={0} offset={5}>
         <Button
-          variant="default"
-          disabled={disabled}
+          size={size}
           icon={
             <Icon
               svg={isCopied ? <Icons.Checkmark /> : <Icons.ClipboardCopy />}
             />
           }
-          size={size}
-          onClick={onClick}
+          onPress={onPress}
+          {...otherProps}
         />
         <Tooltip>Copy</Tooltip>
       </TooltipTrigger>

diff --git a/app/src/components/auth/CreateAPIKeyDialog.tsx b/app/src/components/auth/CreateAPIKeyDialog.tsx
@@ -3,14 +3,9 @@ import { Controller, useForm } from "react-hook-form";
 import { Form } from "react-router-dom";
 import { isValid as dateIsValid, parseISO } from "date-fns";
 
-import {
-  Button,
-  Dialog,
-  Flex,
-  TextArea,
-  TextField,
-  View,
-} from "@arizeai/components";
+import { Dialog, Flex, TextArea, TextField, View } from "@arizeai/components";
+
+import { Button } from "@phoenix/components";
 
 export type APIKeyFormParams = {
   name: string;
@@ -129,8 +124,8 @@ export function CreateAPIKeyDialog(props: {
             <Button
               variant={isDirty ? "primary" : "default"}
               type="submit"
-              size="compact"
-              disabled={!isValid || isCommitting}
+              size="S"
+              isDisabled={!isValid || isCommitting}
             >
               {isCommitting ? "Creating..." : "Create Key"}
             </Button>

diff --git a/app/src/components/auth/DeleteAPIKeyButton.tsx b/app/src/components/auth/DeleteAPIKeyButton.tsx
@@ -1,7 +1,6 @@
 import React, { ReactNode, useState } from "react";
 
 import {
-  Button,
   Dialog,
   DialogContainer,
   Flex,
@@ -11,6 +10,8 @@ import {
   View,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
+
 export function DeleteAPIKeyButton({
   handleDelete,
 }: {
@@ -36,7 +37,7 @@ export function DeleteAPIKeyButton({
           <Flex direction="row" justifyContent="end">
             <Button
               variant="danger"
-              onClick={() => {
+              onPress={() => {
                 handleDelete();
                 setDialog(null);
               }}
@@ -52,10 +53,10 @@ export function DeleteAPIKeyButton({
     <>
       <Button
         variant="danger"
-        size="compact"
+        size="S"
         icon={<Icon svg={<Icons.TrashOutline />} />}
         aria-label="Delete System Key"
-        onClick={onDelete}
+        onPress={onDelete}
       />
       <DialogContainer
         isDismissable

diff --git a/app/src/components/auth/OneTimeAPIKeyDialog.tsx b/app/src/components/auth/OneTimeAPIKeyDialog.tsx
@@ -37,7 +37,7 @@ export function OneTimeAPIKeyDialog(props: { jwt: string }) {
         <View padding="size-200">
           <Flex direction="row" gap="size-100" alignItems="end">
             <TextField label="API Key" isReadOnly value={jwt} minWidth="100%" />
-            <CopyToClipboardButton text={jwt} size="default" />
+            <CopyToClipboardButton text={jwt} />
           </Flex>
         </View>
         <View padding="size-200" borderTopColor="light" borderTopWidth="thin">

diff --git a/app/src/components/button/index.tsx b/app/src/components/button/index.tsx
@@ -0,0 +1 @@
+export * from "./Button";
diff --git 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: 47px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   .copy-to-clipboard-button {
     position: absolute;
     top: var(--ac-global-dimension-size-100);

diff --git a/app/src/components/dataset/DatasetForm.tsx b/app/src/components/dataset/DatasetForm.tsx
@@ -1,15 +1,9 @@
 import React from "react";
 import { Controller, useForm } from "react-hook-form";
 
-import {
-  Button,
-  Flex,
-  Form,
-  TextArea,
-  TextField,
-  View,
-} from "@arizeai/components";
+import { Flex, Form, TextArea, TextField, View } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { CodeEditorFieldWrapper, JSONEditor } from "@phoenix/components/code";
 import { isJSONObjectString } from "@phoenix/utils/jsonUtils";
 
@@ -129,11 +123,14 @@ export function DatasetForm({
           <Button
             // Only allow submission if the form is dirty for edits
             // When creating allow the user to click create without any changes as the form will be prefilled with valid values
-            disabled={formMode === "edit" ? !isDirty : false}
+            isDisabled={
+              (formMode === "edit" ? !isDirty : false) || isSubmitting
+            }
             variant={isDirty ? "primary" : "default"}
-            size="compact"
-            loading={isSubmitting}
-            onClick={handleSubmit(onSubmit)}
+            size="S"
+            onPress={() => {
+              handleSubmit(onSubmit)();
+            }}
           >
             {submitButtonText}
           </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/index.tsx b/app/src/components/index.tsx
@@ -5,4 +5,7 @@ export * from "./LoadingMask";
 export * from "./Loading";
 export * from "./ViewSummaryAside";
 export * from "./CopyToClipboardButton";
+
+// design system based components
 export * from "./combobox";
+export * from "./button";
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"