TSK-419: Update workspaces while open menu (#2413)

Signed-off-by: Anton Brechka <anton.brechka@xored.com>

plugins/workbench-resources/src/components/AccountPopup.svelte

@@ -16,14 +16,8 @@
   import contact, { Employee, EmployeeAccount, formatName } from '@hcengineering/contact'
   import { AccountRole, getCurrentAccount } from '@hcengineering/core'
   import login from '@hcengineering/login'
-  import {
+  import { getWorkspaces, Workspace } from '@hcengineering/login-resources'
-    getWorkspaces,
+  import { setMetadata } from '@hcengineering/platform'
-    selectWorkspace,
-    Workspace,
-    navigateToWorkspace,
-    setLoginInfo
-  } from '@hcengineering/login-resources'
-  import { setMetadata, getEmbeddedLabel } from '@hcengineering/platform'
   import { Avatar, createQuery } from '@hcengineering/presentation'
   import setting, { settingId, SettingsCategory } from '@hcengineering/setting'
   import { Action, fetchMetadataLocalStorage } from '@hcengineering/ui'
@@ -38,14 +32,17 @@
     locationToUrl
   } from '@hcengineering/ui'
   import view from '@hcengineering/view'
-  import { workbenchId } from '@hcengineering/workbench'
   import HelpAndSupport from './HelpAndSupport.svelte'
   import workbench from '../plugin'
+  import { onMount } from 'svelte'
+  import SelectWorkspaceMenu from './SelectWorkspaceMenu.svelte'
 
   let items: SettingsCategory[] = []
   let workspaces: Workspace[] = []
 
-  getWorkspaces().then((ws: Workspace[]) => (workspaces = ws))
+  onMount(() => {
+    getWorkspaces().then((ws: Workspace[]) => (workspaces = ws))
+  })
 
   const settingsQuery = createQuery()
   settingsQuery.query(
@@ -137,46 +134,8 @@
     return actions
   }
 
-  function getWorkspaceItems (): Action[] {
-    return [
-      ...workspaces.map((w) => ({
-        label: getEmbeddedLabel(w.workspace),
-        action: async () => {
-          const loginInfo = (await selectWorkspace(w.workspace))[1]
-          navigateToWorkspace(w.workspace, loginInfo)
-        },
-        isSubmenuRightClicking: true,
-        component: Menu,
-        props: {
-          actions: [
-            {
-              label: workbench.string.OpenInNewTab,
-              action: async () => {
-                const loginInfo = (await selectWorkspace(w.workspace))[1]
-
-                if (!loginInfo) {
-                  return
-                }
-                setLoginInfo(loginInfo)
-                const url = locationToUrl({ path: [workbenchId, w.workspace] })
-                window.open(url, '_blank')?.focus()
-              }
-            }
-          ]
-        }
-      })),
-      {
-        label: getEmbeddedLabel('...'),
-        action: async () => {
-          navigate({ path: [login.component.LoginApp, 'selectWorkspace'] })
-        },
-        isSubmenuRightClicking: false
-      }
-    ]
-  }
-
   let actions: Action[] = []
-  $: if (items && workspaces) {
+  $: {
     actions = []
     const subActions: Action[] = getMenu(items, ['settings', 'settings-editor'])
     actions.push({
@@ -192,8 +151,8 @@
         icon: setting.icon.SelectWorkspace,
         label: setting.string.SelectWorkspace,
         action: async () => {},
-        component: Menu,
+        component: SelectWorkspaceMenu,
-        props: { actions: getWorkspaceItems() },
+        props: { workspaces },
         group: 'end'
       },
       {

plugins/workbench-resources/src/components/SelectWorkspaceMenu.svelte

@@ -0,0 +1,75 @@
+<!--
+// Copyright © 2022 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import login from '@hcengineering/login'
+  import {
+    getWorkspaces,
+    selectWorkspace,
+    Workspace,
+    navigateToWorkspace,
+    setLoginInfo
+  } from '@hcengineering/login-resources'
+  import { getEmbeddedLabel } from '@hcengineering/platform'
+  import { navigate, Menu, locationToUrl } from '@hcengineering/ui'
+  import { workbenchId } from '@hcengineering/workbench'
+  import { onMount } from 'svelte'
+  import workbench from '../plugin'
+
+  export let workspaces: Workspace[]
+
+  onMount(() => {
+    if (workspaces.length === 0) {
+      getWorkspaces().then((ws: Workspace[]) => (workspaces = ws))
+    }
+  })
+
+  $: actions = [
+    ...workspaces.map((w) => ({
+      label: getEmbeddedLabel(w.workspace),
+      action: async () => {
+        const loginInfo = (await selectWorkspace(w.workspace))[1]
+        navigateToWorkspace(w.workspace, loginInfo)
+      },
+      isSubmenuRightClicking: true,
+      component: Menu,
+      props: {
+        actions: [
+          {
+            label: workbench.string.OpenInNewTab,
+            action: async () => {
+              const loginInfo = (await selectWorkspace(w.workspace))[1]
+
+              if (!loginInfo) {
+                return
+              }
+              setLoginInfo(loginInfo)
+              const url = locationToUrl({ path: [workbenchId, w.workspace] })
+              window.open(url, '_blank')?.focus()
+            }
+          }
+        ]
+      }
+    })),
+    {
+      label: getEmbeddedLabel('...'),
+      action: async () => {
+        navigate({ path: [login.component.LoginApp, 'selectWorkspace'] })
+      },
+      isSubmenuRightClicking: false
+    }
+  ]
+</script>
+
+<Menu {actions} on:close />