@dxos/shell 0.6.14-staging.8758a12 → 0.6.14-staging.9b873ce

package/src/components/DeviceList/DeviceListItem.tsx

@@ -29,7 +29,6 @@ import {
   useTranslation,
   DropdownMenu,
   Button,
-  Tooltip,
 } from '@dxos/react-ui';
 import { getSize } from '@dxos/react-ui-theme';
 import { keyToFallback } from '@dxos/util';
@@ -58,7 +57,7 @@ export const DeviceListItem = forwardRef<
       onClickJoinExisting,
       classNames,
       connectionState,
-      onAgentDestroy,
+      onAgentDestroy: _,
       ...props
     },
     forwardedRef,
@@ -111,7 +110,8 @@ export const DeviceListItem = forwardRef<
           </Avatar.Frame>
           <Avatar.Label classNames='flex-1 text-sm truncate'>{displayName}</Avatar.Label>
           {isCurrent && <Tag color='primary'>{t('current device tag label')}</Tag>}
-          {device.profile?.type === DeviceType.AGENT_MANAGED ? (
+          {/* TODO(wittjosiah): EDGE agents cannot current be turned off. */}
+          {/* {device.profile?.type === DeviceType.AGENT_MANAGED && (
             <Tooltip.Root>
               <Tooltip.Trigger asChild>
                 <Button
@@ -130,46 +130,42 @@ export const DeviceListItem = forwardRef<
                 </Tooltip.Content>
               </Tooltip.Portal>
             </Tooltip.Root>
-          ) : (
-            device.kind === DeviceKind.CURRENT && (
-              <DropdownMenu.Root>
-                <DropdownMenu.Trigger asChild>
-                  <Button
-                    variant='ghost'
-                    classNames='pli-0 is-[--rail-action] bs-[--rail-action]'
-                    data-testid={`device-list-item${isCurrent ? '-current' : ''}.options`}
-                  >
-                    <span className='sr-only'>{t('more options label')}</span>
-                    <DotsThree className={getSize(5)} />
-                  </Button>
-                </DropdownMenu.Trigger>
-                <DropdownMenu.Content>
-                  <DropdownMenu.Viewport>
-                    {/* <DropdownMenu.Item disabled onClick={onClickEdit}> */}
-                    {/*  <PencilSimpleLine className={getSize(5)} /> */}
-                    {/*  {t('edit device label')} */}
-                    {/* </DropdownMenu.Item> */}
-                    <DropdownMenu.Item
-                      data-testid='device-list-item-current.join-existing'
-                      onClick={onClickJoinExisting}
-                    >
-                      <ShareFat className={getSize(5)} />
-                      {t('choose join new identity label')}
-                    </DropdownMenu.Item>
-                    {onClickRecover && (
-                      <DropdownMenu.Item data-testid='device-list-item-current.recover' onClick={onClickRecover}>
-                        <FirstAidKit className={getSize(5)} />
-                        {t('choose recover identity label')}
-                      </DropdownMenu.Item>
-                    )}
-                    <DropdownMenu.Item data-testid='device-list-item-current.reset' onClick={onClickReset}>
-                      <Power className={getSize(5)} />
-                      {t('reset device label')}
+          )} */}
+          {device.kind === DeviceKind.CURRENT && (
+            <DropdownMenu.Root>
+              <DropdownMenu.Trigger asChild>
+                <Button
+                  variant='ghost'
+                  classNames='pli-0 is-[--rail-action] bs-[--rail-action]'
+                  data-testid={`device-list-item${isCurrent ? '-current' : ''}.options`}
+                >
+                  <span className='sr-only'>{t('more options label')}</span>
+                  <DotsThree className={getSize(5)} />
+                </Button>
+              </DropdownMenu.Trigger>
+              <DropdownMenu.Content>
+                <DropdownMenu.Viewport>
+                  {/* <DropdownMenu.Item disabled onClick={onClickEdit}> */}
+                  {/*  <PencilSimpleLine className={getSize(5)} /> */}
+                  {/*  {t('edit device label')} */}
+                  {/* </DropdownMenu.Item> */}
+                  <DropdownMenu.Item data-testid='device-list-item-current.join-existing' onClick={onClickJoinExisting}>
+                    <ShareFat className={getSize(5)} />
+                    {t('choose join new identity label')}
+                  </DropdownMenu.Item>
+                  {onClickRecover && (
+                    <DropdownMenu.Item data-testid='device-list-item-current.recover' onClick={onClickRecover}>
+                      <FirstAidKit className={getSize(5)} />
+                      {t('choose recover identity label')}
                     </DropdownMenu.Item>
-                  </DropdownMenu.Viewport>
-                </DropdownMenu.Content>
-              </DropdownMenu.Root>
-            )
+                  )}
+                  <DropdownMenu.Item data-testid='device-list-item-current.reset' onClick={onClickReset}>
+                    <Power className={getSize(5)} />
+                    {t('reset device label')}
+                  </DropdownMenu.Item>
+                </DropdownMenu.Viewport>
+              </DropdownMenu.Content>
+            </DropdownMenu.Root>
           )}
         </Avatar.Root>
       </ListItem.Root>

package/src/components/Panel/Action.tsx

@@ -17,6 +17,7 @@ export type ActionMenuItem = {
   label: string;
   description: string;
   icon: FC<IconProps>;
+  testId?: string;
 } & Pick<ButtonProps, 'onClick'>;
 
 export type BifurcatedActionProps = {
@@ -24,6 +25,7 @@ export type BifurcatedActionProps = {
   activeAction?: string;
   onChangeActiveAction?: Dispatch<SetStateAction<string>>;
   defaultActiveAction?: string;
+  'data-testid'?: string;
 } & Omit<LargeButtonProps, 'children' | 'onClick'>;
 
 const defaultActions = {
@@ -44,9 +46,12 @@ export const BifurcatedAction = forwardRef<HTMLButtonElement, BifurcatedActionPr
     activeAction: propsActiveAction,
     onChangeActiveAction,
     defaultActiveAction,
+    'data-testid': testId,
     ...rest
   } = props;
 
+  const dropdownTestId = testId && `${testId}.more`;
+
   const [activeActionKey = Object.keys(actions)[0], setActiveAction] = useControllableState({
     prop: propsActiveAction,
     onChange: onChangeActiveAction,
@@ -64,6 +69,7 @@ export const BifurcatedAction = forwardRef<HTMLButtonElement, BifurcatedActionPr
         classNames={['bs-11 flex-1 min-is-0 flex gap-2 rounded-ie-none', classNames]}
         ref={forwardedRef}
         variant={variant}
+        data-testid={testId}
         onClick={activeAction.onClick}
       >
         {activeAction.icon && <activeAction.icon className={getSize(5)} />}
@@ -71,42 +77,45 @@ export const BifurcatedAction = forwardRef<HTMLButtonElement, BifurcatedActionPr
       </Button>
       <DropdownMenu.Root>
         <DropdownMenu.Trigger asChild>
-          <Button classNames={['bs-11 flex-none rounded-is-none', classNames]}>
+          <Button classNames={['bs-11 flex-none rounded-is-none', classNames]} data-testid={dropdownTestId}>
             <span className='sr-only'>{t('invite options label')}</span>
             <CaretDown className={getSize(4)} />
           </Button>
         </DropdownMenu.Trigger>
         {/* TODO(thure): Putting `DropdownMenu.Portal` here breaks highlighting and focus. Why? */}
-        <DropdownMenu.Content>
-          <DropdownMenu.Viewport>
-            {Object.entries(actions).map(([id, action]) => {
-              return (
-                <DropdownMenu.CheckboxItem
-                  key={id}
-                  aria-labelledby={`${id}__label`}
-                  aria-describedby={`${id}__description`}
-                  checked={activeActionKey === id}
-                  onCheckedChange={(checked) => checked && setActiveAction(id)}
-                  classNames='gap-2'
-                >
-                  {action.icon && <action.icon className={getSize(5)} />}
-                  <div role='none' className='flex-1 min-is-0 space-b-1'>
-                    <p id={`${id}__label`}>{action.label}</p>
-                    {action.description && (
-                      <p id={`${id}__description`} className={descriptionText}>
-                        {action.description}
-                      </p>
-                    )}
-                  </div>
-                  <DropdownMenu.ItemIndicator asChild>
-                    <Check weight='bold' className={getSize(4)} />
-                  </DropdownMenu.ItemIndicator>
-                </DropdownMenu.CheckboxItem>
-              );
-            })}
-          </DropdownMenu.Viewport>
-          <DropdownMenu.Arrow />
-        </DropdownMenu.Content>
+        <DropdownMenu.Portal>
+          <DropdownMenu.Content>
+            <DropdownMenu.Viewport>
+              {Object.entries(actions).map(([id, action]) => {
+                return (
+                  <DropdownMenu.CheckboxItem
+                    key={id}
+                    aria-labelledby={`${id}__label`}
+                    aria-describedby={`${id}__description`}
+                    checked={activeActionKey === id}
+                    onCheckedChange={(checked) => checked && setActiveAction(id)}
+                    classNames='gap-2'
+                    data-testid={action.testId}
+                  >
+                    {action.icon && <action.icon className={getSize(5)} />}
+                    <div role='none' className='flex-1 min-is-0 space-b-1'>
+                      <p id={`${id}__label`}>{action.label}</p>
+                      {action.description && (
+                        <p id={`${id}__description`} className={descriptionText}>
+                          {action.description}
+                        </p>
+                      )}
+                    </div>
+                    <DropdownMenu.ItemIndicator asChild>
+                      <Check weight='bold' className={getSize(4)} />
+                    </DropdownMenu.ItemIndicator>
+                  </DropdownMenu.CheckboxItem>
+                );
+              })}
+            </DropdownMenu.Viewport>
+            <DropdownMenu.Arrow />
+          </DropdownMenu.Content>
+        </DropdownMenu.Portal>
       </DropdownMenu.Root>
     </div>
   );

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

@@ -59,7 +59,9 @@ export const IdentityActionChooserImpl = ({
   onClickReset,
   ...agentProps
 }: IdentityActionChooserImplProps) => {
-  const managedDeviceAvailable = devices.find((device) => device.profile?.type === DeviceType.AGENT_MANAGED);
+  const edgeDeviceAvailable = devices.find(
+    (device) => device.profile?.type === DeviceType.AGENT_MANAGED && device.profile?.os?.toUpperCase() === 'EDGE',
+  );
   return (
     <div role='none' className='bs-40 grow overflow-y-auto overflow-x-hidden'>
       <DeviceList
@@ -71,7 +73,7 @@ export const IdentityActionChooserImpl = ({
         onClickReset={onClickReset}
         onAgentDestroy={agentProps.onAgentDestroy!}
       />
-      {!managedDeviceAvailable && agentHostingEnabled && <AgentConfig {...(agentProps as AgentFormProps)} />}
+      {!edgeDeviceAvailable && agentHostingEnabled && <AgentConfig {...(agentProps as AgentFormProps)} />}
     </div>
   );
 };

package/src/panels/SpacePanel/SpacePanel.tsx

@@ -39,6 +39,7 @@ export const SpacePanelImpl = (props: SpacePanelImplProps) => {
     titleId,
     activeView,
     space,
+    hideHeading,
     target,
     SpaceManager: SpaceManagerComponent = SpaceManager,
     InvitationManager: InvitationManagerComponent = InvitationManager,
@@ -47,7 +48,7 @@ export const SpacePanelImpl = (props: SpacePanelImplProps) => {
 
   return (
     <>
-      <SpacePanelHeading {...rest} {...{ titleId, space }} />
+      {!hideHeading && <SpacePanelHeading {...rest} {...{ titleId, space }} />}
       <Viewport.Root activeView={activeView}>
         <Viewport.Views>
           <Viewport.View id='space manager' classNames={stepStyles}>

package/src/panels/SpacePanel/SpacePanelProps.ts

@@ -16,6 +16,7 @@ export type SpacePanelImplProps = {
   titleId: string;
   activeView: string;
   send: (event: SingleOrArray<Event<any>>) => void;
+  hideHeading?: boolean;
   target?: string;
   createInvitationUrl: (invitationCode: string) => string;
   space: ErsatzSpace | Space;

package/src/panels/SpacePanel/steps/SpaceManager.tsx

@@ -56,6 +56,7 @@ export const SpaceManager = (props: SpaceManagerProps) => {
       label: t('invite one label'),
       description: t('invite one description'),
       icon: UserPlus,
+      testId: 'spaces-panel.invite-one',
       onClick: useCallback(() => {
         const invitation = space.share?.({
           type: Invitation.Type.INTERACTIVE,
@@ -68,12 +69,13 @@ export const SpaceManager = (props: SpaceManagerProps) => {
             handleInvitationEvent(invitation, subscription),
           );
         }
-      }, [space]),
+      }, [space, target]),
     },
     inviteMany: {
       label: t('invite many label'),
       description: t('invite many description'),
       icon: UsersThree,
+      testId: 'spaces-panel.invite-many',
       onClick: useCallback(() => {
         const invitation = space.share?.({
           type: Invitation.Type.DELEGATED,
@@ -86,7 +88,7 @@ export const SpaceManager = (props: SpaceManagerProps) => {
             handleInvitationEvent(invitation, subscription),
           );
         }
-      }, [space]),
+      }, [space, target]),
     },
   };
 
@@ -120,7 +122,7 @@ export const SpaceManagerImpl = (props: SpaceManagerImplProps) => {
       },
     } as Record<string, ActionMenuItem>);
 
-  const [activeAction, setInternalActiveAction] = useState(localStorage.getItem(activeActionKey) ?? 'inviteOne');
+  const [activeAction, setInternalActiveAction] = useState(localStorage.getItem(activeActionKey) ?? 'inviteMany');
 
   const setActiveAction = (nextAction: string) => {
     setInternalActiveAction(nextAction);

package/src/playwright/invitations-manager.ts

@@ -129,7 +129,14 @@ export class InvitationsManager extends ScopedShellManager {
 
     if (!options) {
       const peer = this.peer(id);
-      await peer.getByTestId(`${type}s-panel.create-invitation`).click();
+      if (type === 'space') {
+        await peer.getByTestId('spaces-panel.create-invitation.more').click();
+        // NOTE: This is a popper portal.
+        await this.page.getByTestId('spaces-panel.invite-one').click();
+        await peer.getByTestId('spaces-panel.create-invitation').click();
+      } else {
+        await peer.getByTestId(`${type}s-panel.create-invitation`).click();
+      }
       return this._invitationCode.wait();
     }
 

package/src/testing/shell-manager.ts

@@ -94,6 +94,8 @@ export class ShellManager extends ScopedShellManager {
   async createSpaceInvitation(): Promise<string> {
     this._invitationCode = new Trigger<string>();
     this._authCode = new Trigger<string>();
+    await this.shell.getByTestId('spaces-panel.create-invitation.more').click();
+    await this.shell.getByTestId('spaces-panel.invite-one').click();
     await this.shell.getByTestId('spaces-panel.create-invitation').click();
     return await this._invitationCode.wait();
   }