Add testIds for some components

app/ide-desktop/lib/dashboard/src/components/AriaComponents/Button/Button.tsx

@@ -63,6 +63,8 @@ export interface BaseButtonProps {
    * @default 'start'
    */
   readonly iconPosition?: IconPosition
+
+  readonly testId?: string
 }
 
 /**
@@ -155,6 +157,7 @@ export const Button = React.forwardRef(function Button(
     fullWidth = false,
     rounding = 'large',
     tooltip,
+    testId,
     ...ariaProps
   } = props
   const focusChildProps = focusHooks.useFocusChild()
@@ -163,7 +166,9 @@ export const Button = React.forwardRef(function Button(
 
   const Tag = isLink ? aria.Link : aria.Button
 
-  const goodDefaults = isLink ? { rel: 'noopener noreferrer' } : { type: 'button' }
+  const goodDefaults = isLink
+    ? { rel: 'noopener noreferrer', 'data-testid': testId ?? 'link' }
+    : { type: 'button', 'data-testid': testId ?? 'button' }
 
   const tooltipElement = tooltip === false ? null : tooltip ?? ariaProps['aria-label']
 

app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx

@@ -50,6 +50,7 @@ export function Dialog(props: types.DialogProps) {
     className,
     onOpenChange = () => {},
     modalProps,
+    testId = 'dialog',
     ...ariaDialogProps
   } = props
   const cleanupRef = React.useRef(() => {})
@@ -80,6 +81,11 @@ export function Dialog(props: types.DialogProps) {
             cleanupRef.current = () => {
               element.removeEventListener('click', onClick)
             }
+
+            // This is a workaround for the fact that the Dialog component does not support the testid prop
+            // We need to set the testid on the Dialog element itself, so that we can test the Dialog component
+            // This is a temporary solution until the Dialog component is refatored to use `useDialog` hook
+            element.dataset.testid = testId
           }
         }}
       >

app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/types.ts

@@ -15,6 +15,8 @@ export interface DialogProps extends aria.DialogProps {
   readonly onOpenChange?: (isOpen: boolean) => void
   readonly isKeyboardDismissDisabled?: boolean
   readonly modalProps?: Pick<aria.ModalOverlayProps, 'className' | 'defaultOpen' | 'isOpen'>
+
+  readonly testId?: string
 }
 
 /** The props for the DialogTrigger component. */

app/ide-desktop/lib/dashboard/src/components/AriaComponents/Form/Form.tsx

@@ -43,6 +43,7 @@ export const Form = React.forwardRef(function Form<
     onSubmitSuccess = () => {},
     onSubmitFailed = () => {},
     id = formId,
+    testId,
     schema,
     ...formProps
   } = props
@@ -59,7 +60,7 @@ export const Form = React.forwardRef(function Form<
   React.useImperativeHandle(formRef, () => innerForm, [innerForm])
 
   const formMutation = reactQuery.useMutation({
-    mutationKey: ['FormSubmit', id],
+    mutationKey: ['FormSubmit', testId, id],
     mutationFn: async (fieldValues: TFieldValues) => {
       try {
         await onSubmit(fieldValues, innerForm)
@@ -102,6 +103,7 @@ export const Form = React.forwardRef(function Form<
       className={typeof className === 'function' ? className(formStateRenderProps) : className}
       style={typeof style === 'function' ? style(formStateRenderProps) : style}
       noValidate
+      data-testid={testId}
       {...formProps}
     >
       <reactHookForm.FormProvider {...innerForm}>

app/ide-desktop/lib/dashboard/src/components/AriaComponents/Form/components/Submit.tsx

@@ -38,7 +38,12 @@ export type SubmitProps = Omit<ariaComponents.ButtonProps, 'loading' | 'variant'
  * Manages the form state and displays a loading spinner when the form is submitting.
  */
 export function Submit(props: SubmitProps): React.JSX.Element {
-  const { form = reactHookForm.useFormContext(), variant = 'submit', size = 'medium' } = props
+  const {
+    form = reactHookForm.useFormContext(),
+    variant = 'submit',
+    size = 'medium',
+    testId = 'form-submit-button',
+  } = props
   const { formState } = form
 
   return (
@@ -48,6 +53,7 @@ export function Submit(props: SubmitProps): React.JSX.Element {
       variant={variant}
       size={size}
       loading={formState.isSubmitting}
+      testId={testId}
     />
   )
 }

app/ide-desktop/lib/dashboard/src/components/AriaComponents/Form/types.ts

@@ -3,6 +3,8 @@
  * Types for the Form component.
  */
 
+import type * as React from 'react'
+
 import type * as reactHookForm from 'react-hook-form'
 import type * as z from 'zod'
 
@@ -51,6 +53,8 @@ interface BaseFormProps<
   readonly onSubmitFailed?: (error: unknown) => Promise<void> | void
   readonly onSubmitSuccess?: () => Promise<void> | void
   readonly onSubmitted?: () => Promise<void> | void
+
+  readonly testId?: string
 }
 
 /**

app/ide-desktop/lib/dashboard/src/modals/TermsOfServiceModal.tsx

@@ -79,8 +79,10 @@ export function TermsOfServiceModal() {
           isDismissable={false}
           hideCloseButton
           modalProps={{ isOpen: true }}
+          testId="terms-of-service-modal"
         >
           <ariaComponents.Form
+            testId="terms-of-service-form"
             schema={ariaComponents.Form.schema.object({
               agree: ariaComponents.Form.schema
                 .boolean()
@@ -113,6 +115,7 @@ export function TermsOfServiceModal() {
                             onInput={event => {
                               void checkboxRegister.onChange(event)
                             }}
+                            data-testid="terms-of-service-checkbox"
                           />
                         </div>