feat: option to sign out all workspaces (#1005)

* feat: option to sign out all workspaces

* style: prettier width 120

* chore: bump snjs

app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx

@@ -64,7 +64,8 @@ export const WorkspaceMenuItem: FunctionComponent<Props> = ({
           <div>
             <button
               className="w-5 h-5 p-0 mr-3 border-0 bg-transparent hover:bg-contrast cursor-pointer"
-              onClick={() => {
+              onClick={(e) => {
+                e.stopPropagation()
                 setIsRenaming((isRenaming) => !isRenaming)
               }}
             >
@@ -72,7 +73,10 @@ export const WorkspaceMenuItem: FunctionComponent<Props> = ({
             </button>
             <button
               className="w-5 h-5 p-0 border-0 bg-transparent hover:bg-contrast cursor-pointer"
-              onClick={onDelete}
+              onClick={(e) => {
+                e.stopPropagation()
+                onDelete()
+              }}
             >
               <Icon type="trash" className="sn-icon--mid color-danger" />
             </button>

app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx

@@ -1,9 +1,9 @@
 import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
 import { AppState } from '@/UIModels/AppState'
-import { ApplicationDescriptor } from '@standardnotes/snjs'
+import { ApplicationDescriptor, ButtonType } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
-import { useEffect, useState } from 'preact/hooks'
+import { useCallback, useEffect, useState } from 'preact/hooks'
 import { Icon } from '@/Components/Icon'
 import { Menu } from '@/Components/Menu/Menu'
 import { MenuItem, MenuItemSeparator, MenuItemType } from '@/Components/Menu/MenuItem'
@@ -18,9 +18,7 @@ type Props = {
 
 export const WorkspaceSwitcherMenu: FunctionComponent<Props> = observer(
   ({ mainApplicationGroup, appState, isOpen, hideWorkspaceOptions = false }) => {
-    const [applicationDescriptors, setApplicationDescriptors] = useState<ApplicationDescriptor[]>(
-      [],
-    )
+    const [applicationDescriptors, setApplicationDescriptors] = useState<ApplicationDescriptor[]>([])
 
     useEffect(() => {
       const removeAppGroupObserver = mainApplicationGroup.addApplicationChangeObserver(() => {
@@ -33,6 +31,19 @@ export const WorkspaceSwitcherMenu: FunctionComponent<Props> = observer(
       }
     }, [mainApplicationGroup])
 
+    const signoutAll = useCallback(async () => {
+      const confirmed = await appState.application.alertService.confirm(
+        'Are you sure you want to sign out of all workspaces on this device?',
+        undefined,
+        'Sign out all',
+        ButtonType.Danger,
+      )
+      if (!confirmed) {
+        return
+      }
+      mainApplicationGroup.signOutAllWorkspaces().catch(console.error)
+    }, [mainApplicationGroup, appState.application.alertService])
+
     return (
       <Menu a11yLabel="Workspace switcher menu" className="px-0 focus:shadow-none" isOpen={isOpen}>
         {applicationDescriptors.map((descriptor) => (
@@ -43,23 +54,29 @@ export const WorkspaceSwitcherMenu: FunctionComponent<Props> = observer(
               appState.accountMenu.setSigningOut(true)
             }}
             onClick={() => {
-              mainApplicationGroup.loadApplicationForDescriptor(descriptor).catch(console.error)
+              mainApplicationGroup.loadApplicationForDescriptor(descriptor)
             }}
-            renameDescriptor={(label: string) =>
-              mainApplicationGroup.renameDescriptor(descriptor, label)
-            }
+            renameDescriptor={(label: string) => mainApplicationGroup.renameDescriptor(descriptor, label)}
           />
         ))}
         <MenuItemSeparator />
+
         <MenuItem
           type={MenuItemType.IconButton}
           onClick={() => {
-            mainApplicationGroup.addNewApplication().catch(console.error)
+            mainApplicationGroup.addNewApplication()
           }}
         >
           <Icon type="user-add" className="color-neutral mr-2" />
           Add another workspace
         </MenuItem>
+
+        {!hideWorkspaceOptions && (
+          <MenuItem type={MenuItemType.IconButton} onClick={signoutAll}>
+            <Icon type="signOut" className="color-neutral mr-2" />
+            Sign out all workspaces
+          </MenuItem>
+        )}
       </Menu>
     )
   },