@dxos/shell 0.3.11-main.1caa3af

package/src/composites/SpaceDialog/SpaceDialog.tsx

@@ -0,0 +1,37 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { Dialog, type DialogContentProps, useId } from '@dxos/react-ui';
+
+import { ClipboardProvider } from '../../components';
+import { SpacePanel, type SpacePanelProps } from '../../panels';
+
+export interface SpaceDialogProps
+  extends Omit<DialogContentProps, 'children'>,
+    Omit<SpacePanelProps, 'doneActionParent'> {}
+
+export const SpaceDialog = (spacePanelProps: SpaceDialogProps) => {
+  const titleId = useId('spaceDialog__title');
+  return (
+    <Dialog.Root defaultOpen onOpenChange={(open) => open || spacePanelProps.onDone?.()}>
+      <Dialog.Portal>
+        <Dialog.Overlay>
+          <Dialog.Content aria-labelledby={titleId}>
+            <ClipboardProvider>
+              <SpacePanel
+                {...{
+                  ...spacePanelProps,
+                  titleId,
+                  doneActionParent: <Dialog.Close asChild />,
+                }}
+              />
+            </ClipboardProvider>
+          </Dialog.Content>
+        </Dialog.Overlay>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};

package/src/composites/SpaceDialog/index.ts

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

package/src/composites/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './IdentityDialog';
+export * from './JoinDialog';
+export * from './Shell';
+export * from './SpaceDialog';

package/src/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+export { runShell } from './composites';

package/src/panels/IdentityPanel/IdentityPanel.stories.tsx

@@ -0,0 +1,113 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { faker } from '@faker-js/faker';
+import React from 'react';
+
+import { PublicKey } from '@dxos/react-client';
+import { Invitation } from '@dxos/react-client/invitations';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { IdentityPanelImpl } from './IdentityPanel';
+import type { IdentityPanelImplProps } from './IdentityPanelProps';
+import { IdentityActionChooserImpl } from './steps';
+import { StorybookDialog } from '../../components/StorybookDialog';
+import { InvitationManager, type InvitationManagerProps } from '../../steps';
+
+faker.seed(1234);
+
+const noOpProps: IdentityPanelImplProps = {
+  titleId: 'storybookIdentityPanel',
+  send: () => {},
+  activeView: 'identity action chooser',
+  createInvitationUrl: (code) => code,
+  identity: {
+    identityKey: PublicKey.random(),
+    profile: {
+      displayName: faker.person.firstName(),
+    },
+  },
+};
+
+export default {
+  title: 'Panels/Identity',
+  decorators: [withTheme],
+  parameters: { chromatic: { disableSnapshot: false } },
+};
+
+export const IdentityActionChooser = () => {
+  return (
+    <StorybookDialog inOverlayLayout>
+      <IdentityPanelImpl
+        {...noOpProps}
+        activeView='identity action chooser'
+        IdentityActionChooser={IdentityActionChooserImpl}
+      />
+    </StorybookDialog>
+  );
+};
+
+const DeviceInvitationManagerWithState = (extraProps: InvitationManagerProps) => (
+  <StorybookDialog inOverlayLayout>
+    <IdentityPanelImpl
+      {...noOpProps}
+      activeView='device invitation manager'
+      IdentityActionChooser={IdentityActionChooserImpl}
+      InvitationManager={(props) => <InvitationManager {...props} {...extraProps} />}
+    />
+  </StorybookDialog>
+);
+
+export const DeviceInvitationManager = () =>
+  DeviceInvitationManagerWithState({ status: Invitation.State.INIT, id: '0' });
+
+export const DeviceInvitationManagerConnecting = () =>
+  DeviceInvitationManagerWithState({
+    status: Invitation.State.CONNECTING,
+    id: '1',
+  });
+
+export const DeviceInvitationManagerConnected = () =>
+  DeviceInvitationManagerWithState({
+    status: Invitation.State.CONNECTED,
+    id: '2',
+  });
+
+export const DeviceInvitationManagerReady = () =>
+  DeviceInvitationManagerWithState({
+    status: Invitation.State.READY_FOR_AUTHENTICATION,
+    authCode: '123123',
+    id: '3',
+  });
+
+export const DeviceInvitationManagerAuthenticating = () =>
+  DeviceInvitationManagerWithState({
+    status: Invitation.State.AUTHENTICATING,
+    id: '4',
+  });
+
+export const DeviceInvitationManagerSuccess = () =>
+  DeviceInvitationManagerWithState({ status: Invitation.State.SUCCESS });
+
+export const DeviceInvitationManagerError = () => DeviceInvitationManagerWithState({ status: Invitation.State.ERROR });
+
+export const DeviceInvitationManagerTimeout = () =>
+  DeviceInvitationManagerWithState({ status: Invitation.State.TIMEOUT });
+
+export const DeviceInvitationManagerCancelled = () =>
+  DeviceInvitationManagerWithState({
+    status: Invitation.State.CANCELLED,
+  });
+
+// export const IdentityActionChooser = {
+//   decorators: [ClientDecorator()],
+//   args: { activeView: 'identity action chooser' },
+// };
+
+// export const DeviceManager = {
+//   decorators: [ClientDecorator()],
+//   args: { activeView: 'device manager' },
+// };

package/src/panels/IdentityPanel/IdentityPanel.tsx

@@ -0,0 +1,158 @@
+//
+// Copyright 2023 DXOS.org
+//
+import React, { useEffect, useMemo } from 'react';
+
+import { generateName } from '@dxos/display-name';
+import { log } from '@dxos/log';
+import { useClient } from '@dxos/react-client';
+import { type Identity, useIdentity } from '@dxos/react-client/halo';
+import { useInvitationStatus } from '@dxos/react-client/invitations';
+import type { CancellableInvitationObservable } from '@dxos/react-client/invitations';
+import { Avatar, DensityProvider, useId, useJdenticonHref, useTranslation } from '@dxos/react-ui';
+
+import {
+  type IdentityPanelHeadingProps,
+  type IdentityPanelImplProps,
+  type IdentityPanelProps,
+} from './IdentityPanelProps';
+import { useIdentityMachine } from './identityMachine';
+import { IdentityActionChooser, ProfileForm } from './steps';
+import { Viewport, Heading, CloseButton } from '../../components';
+import { InvitationManager } from '../../steps';
+
+const viewStyles = 'pbs-1 pbe-3 pli-3';
+
+const IdentityHeading = ({ titleId, title, identity, onDone }: IdentityPanelHeadingProps) => {
+  const fallbackHref = useJdenticonHref(identity.identityKey.toHex(), 12);
+  return (
+    <Heading titleId={titleId} title={title} corner={<CloseButton onDone={onDone} />}>
+      <Avatar.Root size={12} variant='circle' status='active'>
+        <Avatar.Frame classNames='block mbs-4 mbe-2 mli-auto chromatic-ignore'>
+          <Avatar.Fallback href={fallbackHref} />
+        </Avatar.Frame>
+        <Avatar.Label classNames='block text-center font-light text-xl'>
+          {identity.profile?.displayName ?? generateName(identity.identityKey.toHex())}
+        </Avatar.Label>
+      </Avatar.Root>
+    </Heading>
+  );
+};
+
+export const IdentityPanelImpl = (props: IdentityPanelImplProps) => {
+  const {
+    identity,
+    titleId,
+    activeView,
+    onUpdateProfile,
+    IdentityActionChooser: IdentityActionChooserComponent = IdentityActionChooser,
+    InvitationManager: InvitationManagerComponent = InvitationManager,
+    onDone,
+    ...rest
+  } = props;
+  const { t } = useTranslation('os');
+  const title = useMemo(() => {
+    switch (activeView) {
+      case 'device manager':
+      case 'device invitation manager':
+        return t('choose devices label');
+      default:
+        return t('identity heading');
+    }
+  }, [activeView, t]);
+  return (
+    <DensityProvider density='fine'>
+      <IdentityHeading {...{ identity, titleId, title, onDone }} />
+      <Viewport.Root activeView={activeView}>
+        <Viewport.Views>
+          <Viewport.View id='identity action chooser' classNames={viewStyles}>
+            <IdentityActionChooserComponent active={activeView === 'identity action chooser'} {...rest} />
+          </Viewport.View>
+          <Viewport.View id='device invitation manager' classNames={viewStyles}>
+            <InvitationManagerComponent
+              active={activeView === 'device invitation manager'}
+              {...rest}
+              invitationUrl={rest.createInvitationUrl(rest.invitationCode!)}
+            />
+          </Viewport.View>
+          <Viewport.View classNames={viewStyles} id='update profile form'>
+            <ProfileForm
+              send={rest.send}
+              active={activeView === 'update profile form'}
+              profile={identity.profile}
+              onUpdateProfile={onUpdateProfile}
+            />
+          </Viewport.View>
+          {/* <Viewport.View id='signing out'></Viewport.View> */}
+        </Viewport.Views>
+      </Viewport.Root>
+    </DensityProvider>
+  );
+};
+
+const IdentityPanelWithInvitationImpl = ({
+  invitation,
+  ...props
+}: IdentityPanelImplProps & { invitation: CancellableInvitationObservable }) => {
+  const invitationStatus = useInvitationStatus(invitation);
+  return <IdentityPanelImpl {...props} {...invitationStatus} />;
+};
+
+export const IdentityPanel = ({
+  titleId: propsTitleId,
+  createInvitationUrl = (code) => code,
+  ...props
+}: IdentityPanelProps) => {
+  const titleId = useId('identityPanel__heading', propsTitleId);
+  const client = useClient();
+  const identity = useIdentity();
+  if (!identity) {
+    console.error('IdentityPanel rendered with no active identity.');
+    return null;
+  }
+  const [identityState, identitySend, identityService] = useIdentityMachine(client);
+
+  useEffect(() => {
+    const subscription = identityService.subscribe((state) => {
+      log('[state]', state);
+    });
+
+    return subscription.unsubscribe;
+  }, [identityService]);
+
+  const activeView = useMemo(() => {
+    switch (true) {
+      case identityState.matches('choosingAction'):
+        return 'identity action chooser';
+      case identityState.matches('managingDeviceInvitation'):
+        return 'device invitation manager';
+      case [{ managingProfile: 'idle' }, { managingProfile: 'pending' }].some(identityState.matches):
+        return 'update profile form';
+      // case identityState.matches('signingOut'):
+      //   return 'identity exit';
+      default:
+        return 'identity action chooser';
+    }
+  }, [identityState]);
+
+  const onUpdateProfile = async (profile: NonNullable<Identity['profile']>) => {
+    identitySend({ type: 'updateProfile' });
+    await client.halo.updateProfile(profile);
+  };
+
+  const implProps = {
+    ...props,
+    identity,
+    activeView,
+    send: identitySend,
+    titleId,
+    createInvitationUrl,
+    onUpdateProfile,
+  } satisfies IdentityPanelImplProps;
+
+  return identityState.context.invitation ? (
+    <IdentityPanelWithInvitationImpl {...implProps} invitation={identityState.context.invitation} />
+  ) : (
+    <IdentityPanelImpl {...implProps} />
+  );
+};

package/src/panels/IdentityPanel/IdentityPanelProps.ts

@@ -0,0 +1,36 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type cloneElement } from 'react';
+import { type Event, type SingleOrArray } from 'xstate';
+
+import type { Identity } from '@dxos/react-client/halo';
+import { type InvitationStatus } from '@dxos/react-client/invitations';
+
+import { type IdentityEvent } from './identityMachine';
+import { type InvitationManagerProps } from '../../steps';
+
+export type IdentityPanelImplProps = {
+  titleId: string;
+  activeView: 'device manager' | 'update profile form' | 'device invitation manager' | 'identity action chooser';
+  identity: Identity;
+  onUpdateProfile?: (profile: NonNullable<Identity['profile']>) => Promise<void>;
+  createInvitationUrl: (invitationCode: string) => string;
+  send?: (event: SingleOrArray<Event<IdentityEvent>>) => void;
+  onDone?: () => void;
+  doneActionParent?: Parameters<typeof cloneElement>[0];
+  invitationUrl?: string;
+  IdentityActionChooser?: React.FC<IdentityPanelStepProps>;
+  InvitationManager?: React.FC<InvitationManagerProps>;
+} & Partial<InvitationStatus>;
+
+export type IdentityPanelProps = Partial<Omit<IdentityPanelImplProps, 'send' | 'activeView' | 'identity'>>;
+
+export type IdentityPanelHeadingProps = Pick<IdentityPanelImplProps, 'titleId' | 'identity' | 'onDone'> & {
+  title: string;
+};
+
+export type IdentityPanelStepProps = Pick<IdentityPanelImplProps, 'send' | 'onDone' | 'doneActionParent'> & {
+  active?: boolean;
+};

package/src/panels/IdentityPanel/identityMachine.ts

@@ -0,0 +1,131 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useMachine } from '@xstate/react';
+import { assign, createMachine, type InterpreterFrom, type StateFrom, type Subscribable } from 'xstate';
+
+import { log } from '@dxos/log';
+import { type Client } from '@dxos/react-client';
+import { type Identity } from '@dxos/react-client/halo';
+import { type CancellableInvitationObservable } from '@dxos/react-client/invitations';
+
+import { type StepEvent } from '../../steps';
+
+type IdentityMachineContext = {
+  invitation?: CancellableInvitationObservable;
+  identity: Identity | null;
+  identitySubscribable: Subscribable<SetIdentityEvent> | null;
+};
+
+type IdentityChooseActionEvent = {
+  type: 'chooseDevices' | 'chooseProfile' | /* 'chooseSignOut' | */ 'unchooseAction';
+};
+
+type IdentitySelectDeviceInvitationEvent = {
+  type: 'selectInvitation';
+  invitation: CancellableInvitationObservable;
+};
+
+export type SetIdentityEvent = {
+  type: 'setIdentity';
+  identity: Identity | null;
+};
+
+export type UpdateProfileEvent = {
+  type: 'updateProfile';
+};
+
+type IdentityEvent =
+  | SetIdentityEvent
+  | UpdateProfileEvent
+  | IdentitySelectDeviceInvitationEvent
+  | IdentityChooseActionEvent
+  | StepEvent;
+
+const identityMachine = createMachine<IdentityMachineContext, IdentityEvent>(
+  {
+    id: 'identity',
+    predictableActionArguments: true,
+    context: {
+      identity: null,
+      identitySubscribable: null,
+    },
+    initial: 'choosingAction',
+    invoke: {
+      src: (context) => context.identitySubscribable!,
+    },
+    states: {
+      choosingAction: {},
+      managingDeviceInvitation: {},
+      managingProfile: {
+        initial: 'idle',
+        states: {
+          idle: {},
+          pending: {},
+        },
+        on: {
+          setIdentity: { target: 'choosingAction', actions: ['setIdentity', 'log'] },
+          updateProfile: { target: '.pending', actions: 'log' },
+        },
+      },
+      // signingOut: {},
+    },
+    on: {
+      unchooseAction: { target: '.choosingAction', actions: ['unsetInvitation', 'log'] },
+      chooseDevices: { target: '.managingDeviceInvitation', actions: ['unsetInvitation', 'log'] },
+      deselectInvitation: { target: '.choosingAction', actions: ['unsetInvitation', 'log'] },
+      selectInvitation: { target: '.managingDeviceInvitation', actions: ['setInvitation', 'log'] },
+      chooseProfile: { target: '.managingProfile', actions: 'log' },
+      // chooseSignOut: { target: '.signingOut', actions: 'log' },
+    },
+  },
+  {
+    actions: {
+      setIdentity: assign<IdentityMachineContext, IdentityEvent>({
+        identity: (context, event) => (event as SetIdentityEvent)?.identity ?? null,
+      }),
+      setInvitation: assign<IdentityMachineContext, IdentityEvent>({
+        invitation: (context, event) => (event as IdentitySelectDeviceInvitationEvent)?.invitation ?? null,
+      }),
+      unsetInvitation: assign<IdentityMachineContext, IdentityEvent>({
+        invitation: () => undefined,
+      }),
+      log: (context, event) => {
+        log('[transition]', {
+          event,
+          context,
+        });
+      },
+    },
+  },
+);
+
+type IdentityMachine = typeof identityMachine;
+
+type IdentityState = StateFrom<IdentityMachine>;
+type IdentitySend = InterpreterFrom<IdentityMachine>['send'];
+
+const useIdentityMachine = (client: Client, options?: Parameters<typeof useMachine<IdentityMachine>>[1]) => {
+  return useMachine(identityMachine, {
+    ...options,
+    context: {
+      ...options?.context,
+      identity: client.halo.identity.get(),
+      identitySubscribable: client.halo.identity.map((identity) => ({
+        type: 'setIdentity',
+        identity,
+      })) satisfies Subscribable<SetIdentityEvent>,
+    },
+  });
+};
+
+export type {
+  IdentityMachine,
+  IdentityEvent,
+  IdentityMachineContext,
+  IdentityChooseActionEvent,
+  IdentityState,
+  IdentitySend,
+};
+export { identityMachine, useIdentityMachine };

package/src/panels/IdentityPanel/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './IdentityPanel';
+export * from './IdentityPanelProps';

package/src/panels/IdentityPanel/steps/IdentityActionChooser.tsx

@@ -0,0 +1,96 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CaretRight, Plus, Power, UserGear } from '@phosphor-icons/react';
+import React, { useCallback } from 'react';
+
+import { useClient } from '@dxos/react-client';
+import { useHaloInvitations } from '@dxos/react-client/halo';
+import { Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
+import { DensityProvider, useTranslation } from '@dxos/react-ui';
+import { getSize } from '@dxos/react-ui-theme';
+
+import { Action } from '../../../components';
+import { type IdentityPanelStepProps } from '../IdentityPanelProps';
+
+export type IdentityActionChooserProps = IdentityPanelStepProps;
+
+export const IdentityActionChooser = (props: IdentityPanelStepProps) => {
+  const { send } = props;
+  const client = useClient();
+  const invitations = useHaloInvitations();
+  const onInvitationEvent = useCallback((invitation: Invitation) => {
+    const invitationCode = InvitationEncoder.encode(invitation);
+    if (invitation.state === Invitation.State.CONNECTING) {
+      console.log(JSON.stringify({ invitationCode, authCode: invitation.authCode }));
+    }
+  }, []);
+  const createInvitation = (e: React.MouseEvent) => {
+    const testing = e.altKey && e.shiftKey;
+    invitations.forEach((invitation) => invitation.cancel());
+    const invitation = client.halo.share(
+      testing ? { type: Invitation.Type.MULTIUSE, authMethod: Invitation.AuthMethod.NONE } : undefined,
+    );
+    // TODO(wittjosiah): Don't depend on NODE_ENV.
+    if (process.env.NODE_ENV !== 'production') {
+      invitation.subscribe(onInvitationEvent);
+    }
+    send?.({ type: 'selectInvitation', invitation });
+  };
+  return <IdentityActionChooserImpl {...props} onCreateInvitationClick={(e) => createInvitation(e)} />;
+};
+
+export type IdentityActionChooserImplProps = IdentityActionChooserProps & {
+  onCreateInvitationClick?: (e: React.MouseEvent) => void;
+};
+
+export const IdentityActionChooserImpl = ({
+  onCreateInvitationClick,
+  active,
+  send,
+  onDone,
+  doneActionParent,
+}: IdentityActionChooserImplProps) => {
+  const { t } = useTranslation('os');
+
+  // const doneAction = (
+  //   <PanelAction aria-label={t('done label')} onClick={onDone} disabled={!active} data-testid='identity-panel-done'>
+  //     <Check weight='light' className={getSize(6)} />
+  //   </PanelAction>
+  // );
+  return (
+    <div role='none' className='grow flex flex-col gap-1'>
+      <DensityProvider density='coarse'>
+        <div className='grow justify-center flex flex-col gap-1'>
+          <Action
+            disabled={!active}
+            data-testid='devices-panel.create-invitation'
+            onClick={onCreateInvitationClick}
+            classNames='plb-4'
+          >
+            <Plus className={getSize(6)} />
+            <span className='grow mli-3'>{t('choose devices label')}</span>
+            <CaretRight weight='bold' className={getSize(4)} />
+          </Action>
+          <Action data-testid='manage-profile' onClick={() => send?.({ type: 'chooseProfile' })} classNames='plb-4'>
+            <UserGear className={getSize(6)} />
+            <span className='grow mli-3'>{t('choose profile label')}</span>
+            <CaretRight weight='bold' className={getSize(4)} />
+          </Action>
+          <Action
+            disabled
+            data-testid='sign-out'
+            onClick={() => {} /* send({ type: 'chooseSignOut' }) */}
+            classNames='plb-4'
+          >
+            <Power className={getSize(6)} />
+            <span className='grow mli-3'>{t('choose sign out label')}</span>
+            <CaretRight weight='bold' className={getSize(4)} />
+          </Action>
+        </div>
+      </DensityProvider>
+      {/* <PanelActions>{doneActionParent ? cloneElement(doneActionParent, {}, doneAction) : doneAction}</PanelActions> */}
+    </div>
+  );
+};

package/src/panels/IdentityPanel/steps/ProfileForm.tsx

@@ -0,0 +1,79 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useState } from 'react';
+import { type Event, type SingleOrArray } from 'xstate';
+
+import { log } from '@dxos/log';
+import { type Identity } from '@dxos/react-client/halo';
+import { useTranslation } from '@dxos/react-ui';
+
+import { Action, Actions, StepHeading, Input } from '../../../components';
+import { type IdentityPanelStepProps } from '../IdentityPanelProps';
+import { type IdentityEvent } from '../identityMachine';
+
+export interface ProfileFormProps extends Omit<IdentityPanelStepProps, 'send'> {
+  send?: (event: SingleOrArray<Event<IdentityEvent>>) => void;
+  onUpdateProfile?: (profile: NonNullable<Identity['profile']>) => Promise<void>;
+  profile?: Identity['profile'];
+}
+
+export type ProfileFormImplProps = ProfileFormProps & {
+  validationMessage?: string;
+};
+
+export const ProfileForm = (props: ProfileFormProps) => {
+  const { onUpdateProfile } = props;
+  const { t } = useTranslation('os');
+  const [validationMessage, setValidationMessage] = useState('');
+  const handleUpdateProfile = async (profile: NonNullable<Identity['profile']>) => {
+    await onUpdateProfile?.(profile).catch((error) => {
+      log.catch(error);
+      setValidationMessage(t('failed to update profile message'));
+    });
+  };
+  return <ProfileFormImpl {...props} onUpdateProfile={handleUpdateProfile} validationMessage={validationMessage} />;
+};
+
+// TODO(zhenyasav): impl shouldn't need send()
+export const ProfileFormImpl = (props: ProfileFormImplProps) => {
+  const { active, profile, send, onUpdateProfile, validationMessage } = props;
+  const disabled = !active;
+  const { t } = useTranslation('os');
+  const [inputValue, setInputValue] = useState(profile?.displayName ?? '');
+  return (
+    <>
+      <div role='none' className='grow flex flex-col justify-center'>
+        <Input
+          {...{ validationMessage }}
+          label={<StepHeading>{t('display name input label')}</StepHeading>}
+          disabled={disabled}
+          data-testid='display-name-input'
+          placeholder={t('display name input placeholder')}
+          value={inputValue}
+          onChange={({ target: { value } }) => setInputValue(value)}
+          onKeyDown={({ key }) => key === 'Enter' && onUpdateProfile?.({ displayName: inputValue })}
+        />
+      </div>
+      <Actions>
+        <Action
+          variant='ghost'
+          disabled={disabled}
+          onClick={() => send?.({ type: 'unchooseAction' })}
+          data-testid={'update-profile-form-back'}
+        >
+          {t('back label')}
+        </Action>
+        <Action
+          variant='primary'
+          disabled={disabled}
+          onClick={() => onUpdateProfile?.({ displayName: inputValue })}
+          data-testid={'update-profile-form-continue'}
+        >
+          {t('done label')}
+        </Action>
+      </Actions>
+    </>
+  );
+};