@dxos/react-ui 0.1.24 → 0.1.25-next.3c6b542

package/src/panels/DevicesPanel/DevicesPanel.tsx

@@ -0,0 +1,98 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { UserPlus, X } from 'phosphor-react';
+import React, { cloneElement, useReducer } from 'react';
+
+import { useClient, useDevices, useHaloInvitations, useIdentity } from '@dxos/react-client';
+import { Button, getSize, mx, Tooltip, useTranslation } from '@dxos/react-components';
+
+import { DeviceList, InvitationList, PanelSeparator } from '../../components';
+import { defaultSurface, subduedSurface } from '../../styles';
+
+export type DevicesPanelProps = {
+  titleId?: string;
+  createInvitationUrl: (invitationCode: string) => string;
+  doneActionParent?: Parameters<typeof cloneElement>[0];
+  onDone?: () => void;
+};
+
+export type DevicesView = 'device list';
+
+const DeviceListView = ({ createInvitationUrl, titleId, onDone, doneActionParent }: DevicesPanelProps) => {
+  const { t } = useTranslation('os');
+  const client = useClient();
+  const identity = useIdentity();
+  const devices = useDevices();
+  const invitations = useHaloInvitations();
+  const displayName = identity?.displayName;
+
+  if (!identity) {
+    return null;
+  }
+
+  const doneButton = (
+    <Button compact variant='ghost' onClick={() => onDone?.()} data-testid='show-all-spaces'>
+      <X className={getSize(4)} weight='bold' />
+    </Button>
+  );
+
+  return (
+    <div role='none' className='flex flex-col'>
+      <div role='none' className={mx(subduedSurface, 'rounded-bs-md flex items-center p-2 gap-2')}>
+        {/* TODO(wittjosiah): Label this as the identity panel. */}
+        <h2 id={titleId} className={mx('grow font-system-medium', !displayName && 'font-mono')}>
+          {displayName ?? identity.identityKey.truncate()}
+        </h2>
+        <Tooltip content={t('close label')} zIndex='z-50'>
+          {doneActionParent ? cloneElement(doneActionParent, {}, doneButton) : doneButton}
+        </Tooltip>
+      </div>
+      <div role='region' className={mx(defaultSurface, 'rounded-be-md p-2')}>
+        <InvitationList
+          invitations={invitations}
+          onClickRemove={({ invitation }) => invitation && client.halo.removeInvitation(invitation.invitationId!)}
+          createInvitationUrl={createInvitationUrl}
+        />
+        <Button
+          className='is-full flex gap-2 mbs-2'
+          compact
+          onClick={() => client.halo.createInvitation()}
+          data-testid='create-space-invitation'
+        >
+          <span>{t('create space invitation label')}</span>
+          <UserPlus className={getSize(4)} weight='bold' />
+        </Button>
+        <PanelSeparator />
+        <DeviceList devices={devices} />
+      </div>
+    </div>
+  );
+};
+
+type DevicesPanelState = {
+  activeView: DevicesView;
+};
+
+type DevicesPanelAction = {
+  type: null;
+};
+
+// TODO(wittjosiah): Rename identity panel and include other views?
+export const DevicesPanel = (props: DevicesPanelProps) => {
+  const reducer = (state: DevicesPanelState, action: DevicesPanelAction) => {
+    const nextState = { ...state };
+    switch (action.type) {
+      case null:
+    }
+    return nextState;
+  };
+
+  const [panelState] = useReducer(reducer, {
+    activeView: 'device list'
+  });
+
+  // TODO(wittjosiah): Use ViewState or similar.
+  return <>{panelState.activeView === 'device list' ? <DeviceListView {...props} /> : null}</>;
+};

package/src/panels/DevicesPanel/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './DevicesPanel';

package/src/panels/JoinPanel/JoinHeading.tsx

@@ -9,25 +9,41 @@ import { useSpace } from '@dxos/react-client';
 import { Avatar, Button, getSize, Heading, mx, Trans, useId, useTranslation } from '@dxos/react-components';
 
 import { subduedSurface } from '../../styles';
+import { JoinPanelMode } from './JoinPanelProps';
 
 export interface JoinSpaceHeadingProps {
+  mode?: JoinPanelMode;
   titleId: string;
   invitation?: AuthenticatingInvitationObservable;
   onExit?: () => void;
   exitActionParent?: Parameters<typeof cloneElement>[0];
+  preventExit?: boolean;
 }
 
 export const JoinHeading = forwardRef(
-  ({ titleId, invitation, onExit, exitActionParent }: JoinSpaceHeadingProps, ref: ForwardedRef<HTMLDivElement>) => {
+  (
+    { mode, titleId, invitation, onExit, exitActionParent, preventExit }: JoinSpaceHeadingProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
     const { t } = useTranslation('os');
 
     const space = useSpace(invitation?.invitation?.spaceKey);
-    const spaceTitle = space?.properties.name ?? '(Space not available)';
+    const name = mode === 'halo-only' ? '(Unknown identity)' : space?.properties.name ?? '(Space name not available)';
+    const nameId = useId(mode === 'halo-only' ? 'identityDisplayName' : 'spaceDisplayName');
 
-    const nameId = useId('spaceDisplayName');
+    const invitationKey =
+      mode === 'halo-only'
+        ? invitation?.invitation?.identityKey?.toHex()
+        : invitation?.invitation?.identityKey?.toHex();
 
     const exitButton = (
-      <Button compact variant='ghost' {...(onExit && { onClick: onExit })} className='grow-0 shrink-0'>
+      <Button
+        compact
+        variant='ghost'
+        {...(onExit && { onClick: onExit })}
+        className='grow-0 shrink-0'
+        data-testid='join-exit'
+      >
         <ProhibitInset className={getSize(5)} />
         <span className='sr-only'>{t('exit label')}</span>
       </Button>
@@ -36,20 +52,32 @@ export const JoinHeading = forwardRef(
     return (
       <div role='none' className={mx(subduedSurface, 'p-2 rounded-bs-md')} ref={ref}>
         <div role='group' className='flex items-center gap-2'>
-          <Avatar fallbackValue={invitation?.invitation?.spaceKey?.toHex() ?? ''} labelId={nameId} />
+          {invitationKey ? (
+            <Avatar fallbackValue={invitationKey} labelId={nameId} />
+          ) : (
+            <span role='none' className={mx(getSize(10), 'bg-neutral-300 dark:bg-neutral-700 rounded-full')} />
+          )}
           <Heading level={1} className='font-body font-normal text-base grow' id={titleId}>
-            <Trans
-              {...{
-                defaults: t('join space heading'),
-                components: {
-                  small: <span className='block leading-none mbe-1 font-system-medium text-sm' />,
-                  large: <span className='block leading-none' id={nameId} />
-                },
-                values: { spaceTitle }
-              }}
-            />
+            {invitation ? (
+              <Trans
+                {...{
+                  defaults: t('joining heading'),
+                  components: {
+                    small: <span className='block leading-none mbe-1 font-system-medium text-sm' />,
+                    large: <span className='block leading-none' id={nameId} />
+                  },
+                  values: { name }
+                }}
+              />
+            ) : (
+              <span className='block leading-none font-system-medium text-sm'>
+                {mode === 'halo-only' ? t('halo heading') : t('join space heading')}
+              </span>
+            )}
           </Heading>
-          {exitActionParent ? cloneElement(exitActionParent, {}, exitButton) : exitButton}
+          {!preventExit &&
+            mode !== 'halo-only' &&
+            (exitActionParent ? cloneElement(exitActionParent, {}, exitButton) : exitButton)}
         </div>
       </div>
     );

package/src/panels/JoinPanel/JoinPanel.tsx

@@ -1,7 +1,7 @@
 //
 // Copyright 2023 DXOS.org
 //
-import React, { useEffect, useReducer } from 'react';
+import React, { useEffect, useReducer, useState } from 'react';
 
 import { InvitationEncoder } from '@dxos/client';
 import { log } from '@dxos/log';
@@ -22,18 +22,20 @@ import {
 } from './view-states';
 
 export const JoinPanel = ({
+  mode,
   initialInvitationCode,
   titleId: propsTitleId,
   exitActionParent,
   onExit,
   doneActionParent,
-  onDone
+  onDone,
+  preventExit
 }: JoinPanelProps) => {
   const client = useClient();
   const internalTitleId = useId('joinPanel__title');
   const titleId = propsTitleId ?? internalTitleId;
   const identity = useIdentity();
-
+  const [prevIdentity, setPrevIdentity] = useState(identity);
   const availableIdentities = identity ? [identity] : [];
 
   const reducer = (state: JoinState, action: JoinAction) => {
@@ -50,7 +52,7 @@ export const JoinPanel = ({
         if (action.method === 'accept device invitation') {
           nextState.activeView = 'halo invitation acceptor';
           if (state.unredeemedHaloInvitationCode) {
-            nextState.haloInvitation = client.echo.acceptInvitation(
+            nextState.haloInvitation = client.halo.acceptInvitation(
               InvitationEncoder.decode(state.unredeemedHaloInvitationCode)
             );
             nextState.unredeemedHaloInvitationCode = undefined;
@@ -120,13 +122,14 @@ export const JoinPanel = ({
         nextState[action.from === 'halo' ? 'haloViewState' : 'spaceViewState'] = 'invitation input';
         break;
     }
-    log.debug('[join panel reducer]', { action, nextState });
+    log('[join panel reducer]', { action, nextState });
     return nextState;
   };
 
+  const unredeemedHaloInvitationCode = mode === 'halo-only' ? initialInvitationCode : undefined;
   const [joinState, dispatch] = useReducer(reducer, {
-    unredeemedHaloInvitationCode: undefined,
-    unredeemedSpaceInvitationCode: initialInvitationCode,
+    unredeemedHaloInvitationCode,
+    unredeemedSpaceInvitationCode: mode === 'halo-only' ? undefined : initialInvitationCode,
     spaceInvitation: undefined,
     haloInvitation: undefined,
     activeView: availableIdentities.length > 0 ? 'identity selector' : 'addition method selector',
@@ -136,6 +139,17 @@ export const JoinPanel = ({
     haloViewState: 'invitation input'
   });
 
+  if (identity !== prevIdentity) {
+    setPrevIdentity(identity);
+    identity && !prevIdentity && dispatch({ type: 'added identity', identity });
+  }
+
+  useEffect(() => {
+    if (unredeemedHaloInvitationCode) {
+      dispatch({ type: 'select addition method', method: 'accept device invitation' });
+    }
+  }, [unredeemedHaloInvitationCode]);
+
   useEffect(() => {
     // TODO (thure): Validate if this is sufficiently synchronous for iOS to move focus. It might not be!
     const attrValue =
@@ -146,7 +160,7 @@ export const JoinPanel = ({
         : joinState.activeView === 'halo invitation acceptor'
         ? `${joinState.activeView}; ${joinState.haloViewState}`
         : joinState.activeView;
-    log.debug('[autofocus value]', { attrValue });
+    log('[autofocus value]', { attrValue });
     const $nextAutofocus: HTMLElement | null = document.querySelector(`[data-autofocus="${attrValue}"]`);
     if ($nextAutofocus) {
       $nextAutofocus.focus();
@@ -177,7 +191,9 @@ export const JoinPanel = ({
 
   return (
     <>
-      <JoinHeading {...{ titleId, invitation: joinState.spaceInvitation, onExit, exitActionParent }} />
+      <JoinHeading
+        {...{ mode, titleId, invitation: joinState.spaceInvitation, onExit, exitActionParent, preventExit }}
+      />
       <div role='none' className='is-full overflow-hidden'>
         <div role='none' className='flex is-[1300%]' aria-live='polite'>
           <IdentitySelector
@@ -240,14 +256,19 @@ export const JoinPanel = ({
               active:
                 joinState.activeView === 'halo invitation acceptor' &&
                 joinState.haloViewState === 'invitation accepted',
-              invitationType: 'halo'
+              invitationType: 'halo',
+              doneActionParent,
+              onDone
             }}
           />
           <IdentityAdded
             {...{
+              mode,
               dispatch,
               addedIdentity: joinState.selectedIdentity,
-              active: joinState.activeView === 'identity added'
+              active: joinState.activeView === 'identity added',
+              doneActionParent,
+              onDone
             }}
           />
           <InvitationInput

package/src/panels/JoinPanel/JoinPanelProps.ts

@@ -4,22 +4,18 @@
 
 import { cloneElement, Dispatch } from 'react';
 
-import type {
-  AuthenticatingInvitationObservable,
-  Profile as NaturalProfile,
-  Space as NaturalSpace
-} from '@dxos/client';
+import type { AuthenticatingInvitationObservable, Profile } from '@dxos/client';
 import { InvitationResult } from '@dxos/react-client';
 
-export type Space = Pick<NaturalSpace, 'properties'>;
-
-export type Profile = Pick<NaturalProfile, 'displayName' | 'identityKey'>;
+export type JoinPanelMode = 'default' | 'halo-only';
 
 export interface JoinPanelProps {
+  mode?: JoinPanelMode;
   initialInvitationCode?: string;
   titleId?: string;
   exitActionParent?: Parameters<typeof cloneElement>[0];
   onExit?: () => void;
+  preventExit?: boolean;
   doneActionParent?: Parameters<typeof cloneElement>[0];
   onDone?: (result: InvitationResult | null) => void;
   parseInvitationCodeInput?: (invitationCodeInput: string) => string;

package/src/panels/JoinPanel/view-states/AdditionMethodSelector.tsx

@@ -5,9 +5,9 @@
 import { CaretLeft, CaretRight, Plus, QrCode, Textbox } from 'phosphor-react';
 import React from 'react';
 
+import type { Profile } from '@dxos/client';
 import { Button, CompoundButton, getSize, mx, useTranslation } from '@dxos/react-components';
 
-import { Profile } from '../JoinPanelProps';
 import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
 
 export interface AdditionMethodSelectorProps extends ViewStateProps {
@@ -36,6 +36,7 @@ export const AdditionMethodSelector = ({ availableIdentities, ...viewStateProps
           before={<Plus className={getSize(6)} />}
           onClick={() => dispatch({ type: 'select addition method', method: 'create identity' })}
           data-autofocus='addition method selector'
+          data-testid='create-identity'
         >
           {t('create identity label')}
         </CompoundButton>
@@ -44,6 +45,7 @@ export const AdditionMethodSelector = ({ availableIdentities, ...viewStateProps
           description={t('join identity description')}
           before={<QrCode className={getSize(6)} />}
           onClick={() => dispatch({ type: 'select addition method', method: 'accept device invitation' })}
+          data-testid='join-identity'
         >
           {t('join identity label')}
         </CompoundButton>
@@ -52,6 +54,7 @@ export const AdditionMethodSelector = ({ availableIdentities, ...viewStateProps
           description={t('recover identity description')}
           before={<Textbox className={getSize(6)} />}
           onClick={() => dispatch({ type: 'select addition method', method: 'recover identity' })}
+          data-testid='recover-identity'
         >
           {t('recover identity label')}
         </CompoundButton>
@@ -59,6 +62,7 @@ export const AdditionMethodSelector = ({ availableIdentities, ...viewStateProps
       <Button
         disabled={disabled || availableIdentities.length < 1}
         onClick={() => dispatch({ type: 'deselect identity' })}
+        data-testid='deselect-identity'
       >
         <CaretLeft className={getSize(4)} weight='bold' />
         <span className='grow'>{t('deselect identity label')}</span>

package/src/panels/JoinPanel/view-states/IdentityAdded.tsx

@@ -2,19 +2,54 @@
 // Copyright 2023 DXOS.org
 //
 
-import { CaretLeft, CaretRight } from 'phosphor-react';
-import React from 'react';
+import { CaretLeft, CaretRight, Check } from 'phosphor-react';
+import React, { cloneElement } from 'react';
 
 import type { Profile } from '@dxos/client';
+import { InvitationResult } from '@dxos/react-client';
 import { Avatar, Button, getSize, mx, useTranslation } from '@dxos/react-components';
 
+import { JoinPanelMode } from '../JoinPanelProps';
 import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
 
-export interface IdentityAddedProps extends ViewStateProps {
+export interface IdentityAddedProps extends ViewStateProps, DoneProps {
+  mode?: JoinPanelMode;
   addedIdentity?: Profile;
 }
 
-export const IdentityAdded = ({ addedIdentity, ...viewStateProps }: IdentityAddedProps) => {
+export interface DoneProps extends ViewStateProps {
+  doneActionParent?: Parameters<typeof cloneElement>[0];
+  onDone?: (result: InvitationResult | null) => void;
+}
+
+const Done = ({ onDone, doneActionParent, active }: DoneProps) => {
+  const disabled = !active;
+  const { t } = useTranslation('os');
+
+  const doneButton = (
+    <Button
+      {...(onDone && { onClick: () => onDone(null) })}
+      disabled={disabled}
+      className='grow flex items-center gap-2 pli-2'
+      data-autofocus='identity added'
+      data-testid='identity-added-done'
+    >
+      <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
+      <span className='grow'>{t('done label')}</span>
+      <Check weight='bold' className={getSize(4)} />
+    </Button>
+  );
+
+  return doneActionParent ? cloneElement(doneActionParent, {}, doneButton) : doneButton;
+};
+
+export const IdentityAdded = ({
+  mode,
+  addedIdentity,
+  onDone,
+  doneActionParent,
+  ...viewStateProps
+}: IdentityAddedProps) => {
   const disabled = !viewStateProps.active;
   const { dispatch } = viewStateProps;
   const { t } = useTranslation('os');
@@ -35,26 +70,30 @@ export const IdentityAdded = ({ addedIdentity, ...viewStateProps }: IdentityAdde
           status='active'
         />
       </div>
-      <div className='flex gap-2'>
-        <Button
-          disabled={disabled || !addedIdentity}
-          className='grow flex items-center gap-2 pli-2 order-2'
-          onClick={() => addedIdentity && dispatch({ type: 'select identity', identity: addedIdentity })}
-          data-autofocus='identity added'
-        >
-          <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
-          <span className='grow'>{t('continue label')}</span>
-          <CaretRight weight='bold' className={getSize(4)} />
-        </Button>
-        <Button
-          disabled={disabled}
-          onClick={() => dispatch({ type: 'deselect identity' })}
-          className='flex items-center gap-2 pis-2 pie-4'
-        >
-          <CaretLeft weight='bold' className={getSize(4)} />
-          <span>{t('deselect identity label')}</span>
-        </Button>
-      </div>
+      {mode === 'halo-only' ? (
+        <Done onDone={onDone} doneActionParent={doneActionParent} {...viewStateProps} />
+      ) : (
+        <div className='flex gap-2'>
+          <Button
+            disabled={disabled || !addedIdentity}
+            className='grow flex items-center gap-2 pli-2 order-2'
+            onClick={() => addedIdentity && dispatch({ type: 'select identity', identity: addedIdentity })}
+            data-autofocus='identity added'
+          >
+            <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
+            <span className='grow'>{t('continue label')}</span>
+            <CaretRight weight='bold' className={getSize(4)} />
+          </Button>
+          <Button
+            disabled={disabled}
+            onClick={() => dispatch({ type: 'deselect identity' })}
+            className='flex items-center gap-2 pis-2 pie-4'
+          >
+            <CaretLeft weight='bold' className={getSize(4)} />
+            <span>{t('deselect identity label')}</span>
+          </Button>
+        </div>
+      )}
     </ViewState>
   );
 };

package/src/panels/JoinPanel/view-states/IdentityInput.tsx

@@ -50,10 +50,16 @@ export const IdentityInput = ({ method, ...viewStateProps }: IdentityCreatorProp
           } as ComponentPropsWithoutRef<'input'>
         }}
         {...(validationMessage.length && { validationValence: 'error', validationMessage })}
+        data-testid='identity-input'
       />
       <div role='none' className='grow' />
       <div className='flex gap-2'>
-        <Button disabled={disabled} className='grow flex items-center gap-2 pli-2 order-2' onClick={handleNext}>
+        <Button
+          disabled={disabled}
+          className='grow flex items-center gap-2 pli-2 order-2'
+          onClick={handleNext}
+          data-testid={`${method === 'recover identity' ? 'recover' : 'create'}-identity-input-continue`}
+        >
           <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
           <span className='grow'>{t('continue label')}</span>
           <CaretRight weight='bold' className={getSize(4)} />
@@ -62,6 +68,7 @@ export const IdentityInput = ({ method, ...viewStateProps }: IdentityCreatorProp
           disabled={disabled}
           onClick={() => dispatch({ type: 'add identity' })}
           className='flex items-center gap-2 pis-2 pie-4'
+          data-testid={`${method === 'recover identity' ? 'recover' : 'create'}-identity-input-back`}
         >
           <CaretLeft weight='bold' className={getSize(4)} />
           <span>{t('back label')}</span>

package/src/panels/JoinPanel/view-states/IdentitySelector.tsx

@@ -6,9 +6,9 @@ import * as RadioGroup from '@radix-ui/react-radio-group';
 import { CaretLeft, CaretRight, UserPlus } from 'phosphor-react';
 import React, { useCallback, useState } from 'react';
 
+import type { Profile } from '@dxos/client';
 import { Avatar, Button, themeVariantFocus, getSize, mx, useTranslation } from '@dxos/react-components';
 
-import { Profile } from '../JoinPanelProps';
 import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
 
 export interface IdentitySelectorProps extends ViewStateProps {
@@ -57,6 +57,7 @@ export const IdentitySelector = ({ availableIdentities, ...viewStateProps }: Ide
                   'radix-state-unchecked:bg-neutral-100 dark:radix-state-unchecked:bg-neutral-900',
                   themeVariantFocus('os')
                 )}
+                data-testid='identity-selector-item'
               >
                 <RadioGroup.Indicator className='absolute inset-0 flex items-center justify-center leading-0'>
                   <div className='w-1.5 h-1.5 rounded-full bg-white' />
@@ -75,6 +76,7 @@ export const IdentitySelector = ({ availableIdentities, ...viewStateProps }: Ide
         compact
         onClick={() => dispatch({ type: 'add identity' })}
         className='flex items-center gap-2 pli-2'
+        data-testid='add-identity'
       >
         <span>{t('add identity label')}</span>
         <UserPlus weight='bold' className={getSize(3.5)} />
@@ -88,6 +90,7 @@ export const IdentitySelector = ({ availableIdentities, ...viewStateProps }: Ide
             identity: activeIdentity
           })
         }
+        data-testid='select-identity'
       >
         <CaretLeft weight='bold' className={mx(getSize(4), 'invisible')} />
         <span className='grow'>{t('continue label')}</span>

package/src/panels/JoinPanel/view-states/InvitationAccepted.tsx

@@ -33,6 +33,7 @@ const PureInvitationAcceptedContent = ({
       disabled={disabled}
       className='grow flex items-center gap-2 pli-2'
       data-autofocus={`${invitationType} invitation acceptor; invitation accepted`}
+      data-testid={`${invitationType}-invitation-accepted-done`}
     >
       <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
       <span className='grow'>{t('done label')}</span>

package/src/panels/JoinPanel/view-states/InvitationAuthenticator.tsx

@@ -37,7 +37,7 @@ const PureInvitationAuthenticatorContent = ({
   return (
     <>
       <Input
-        label={t('pin input label')}
+        label={t('auth code input label')}
         size='pin'
         length={pinLength}
         onChange={onChange}
@@ -57,6 +57,7 @@ const PureInvitationAuthenticatorContent = ({
           validationValence: 'error',
           validationMessage: t('failed to authenticate message')
         })}
+        data-testid='auth-code-input'
       />
       <div role='none' className='grow' />
       <div className='flex gap-2'>
@@ -65,6 +66,7 @@ const PureInvitationAuthenticatorContent = ({
           className='grow flex items-center gap-2 pli-2 order-2'
           onClick={onAuthenticate}
           data-autofocus-pinlength={invitationType}
+          data-testid={`${invitationType}-invitation-authenticator-next`}
         >
           <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
           <span className='grow'>{t('next label')}</span>
@@ -74,6 +76,7 @@ const PureInvitationAuthenticatorContent = ({
           disabled={disabled}
           className='flex items-center gap-2 pis-2 pie-4'
           onClick={() => dispatch({ type: 'cancel invitation', from: invitationType })}
+          data-testid={`${invitationType}-invitation-authenticator-cancel`}
         >
           <CaretLeft weight='bold' className={getSize(4)} />
           <span>{t('cancel label')}</span>

package/src/panels/JoinPanel/view-states/InvitationInput.tsx

@@ -46,10 +46,16 @@ export const InvitationInput = ({ invitationType, ...viewStateProps }: Invitatio
             onKeyUp: ({ key }) => key === 'Enter' && handleNext()
           } as ComponentPropsWithoutRef<'input'>
         }}
+        data-testid='invitation-input'
       />
       <div role='none' className='grow' />
       <div className='flex gap-2'>
-        <Button disabled={disabled} className='grow flex items-center gap-2 pli-2 order-2' onClick={handleNext}>
+        <Button
+          disabled={disabled}
+          className='grow flex items-center gap-2 pli-2 order-2'
+          onClick={handleNext}
+          data-testid={`${invitationType}-invitation-input-continue`}
+        >
           <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
           <span className='grow'>{t('continue label')}</span>
           <CaretRight weight='bold' className={getSize(4)} />
@@ -58,6 +64,7 @@ export const InvitationInput = ({ invitationType, ...viewStateProps }: Invitatio
           disabled={disabled}
           onClick={() => dispatch({ type: 'add identity' })}
           className='flex items-center gap-2 pis-2 pie-4'
+          data-testid={`${invitationType}-invitation-input-back`}
         >
           <CaretLeft weight='bold' className={getSize(4)} />
           <span>{t('back label')}</span>

package/src/panels/JoinPanel/view-states/InvitationRescuer.tsx

@@ -35,7 +35,7 @@ const InvitationActions = ({
         <>
           <div role='none' className='grow' />
           <div className='flex gap-2'>
-            <Button disabled className='grow flex items-center gap-2 pli-2 order-2'>
+            <Button disabled className='grow flex items-center gap-2 pli-2 order-2' data-testid='next'>
               <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
               <span className='grow'>{t('next label')}</span>
               <CaretRight weight='bold' className={getSize(4)} />
@@ -45,6 +45,7 @@ const InvitationActions = ({
               className='flex items-center gap-2 pis-2 pie-4'
               onClick={cancel}
               data-autofocus={`${invitationType} invitation acceptor; invitation rescuer`}
+              data-testid='invitation-rescuer-cancel'
             >
               <CaretLeft weight='bold' className={getSize(4)} />
               <span>{t('cancel label')}</span>
@@ -62,6 +63,7 @@ const InvitationActions = ({
           className='grow flex items-center gap-2 pli-2'
           onClick={() => dispatch({ type: 'reset invitation', from: invitationType })}
           data-autofocus={`${invitationType} invitation acceptor; invitation rescuer`}
+          data-testid='invitation-rescuer-reset'
         >
           <CaretLeft weight='bold' className={mx(getSize(5), 'invisible')} />
           <span className='grow'>{t('reset label')}</span>
@@ -82,6 +84,7 @@ export const InvitationRescuer = ({ invitationType, ...viewStateProps }: Invitat
           disabled={disabled}
           className='grow flex items-center gap-2 pli-2'
           data-autofocus='space invitation acceptor; invitation rescuer'
+          data-testid='invitation-rescuer-connect'
         >
           <CaretLeft weight='bold' className={mx(getSize(5), 'invisible')} />
           <span className='grow'>{t('connect label')}</span>