Selec workspace popup links (#2590)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

dev/prod/src/platform.ts

@@ -99,7 +99,7 @@ export async function configurePlatform() {
 
   setMetadata(rekoni.metadata.RekoniUrl, process.env.REKONI_URL)
 
-  setMetadata(uiPlugin.metadata.DefaultApplication, workbench.component.WorkbenchApp)
+  setMetadata(uiPlugin.metadata.DefaultApplication, login.component.LoginApp)
 
   setMetadata(
     uiPlugin.metadata.Routes,

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

@@ -14,19 +14,19 @@
 -->
 <script lang="ts">
   import login, { loginId } from '@hcengineering/login'
+  import { getWorkspaces, selectWorkspace, Workspace } from '@hcengineering/login-resources'
   import {
-    getWorkspaces,
+    closePopup,
-    navigateToWorkspace,
+    fetchMetadataLocalStorage,
-    selectWorkspace,
+    getCurrentLocation,
-    setLoginInfo,
+    Loading,
-    Workspace,
+    Location,
-    WorkspaceLoginInfo
+    locationToUrl,
-  } from '@hcengineering/login-resources'
+    navigate,
-  import { getEmbeddedLabel } from '@hcengineering/platform'
+    setMetadataLocalStorage
-  import { fetchMetadataLocalStorage, Loading, locationToUrl, Menu, navigate } from '@hcengineering/ui'
+  } from '@hcengineering/ui'
   import { workbenchId } from '@hcengineering/workbench'
   import { onMount } from 'svelte'
-  import workbench from '../plugin'
   import { workspacesStore } from '../utils'
 
   onMount(() => {
@@ -35,63 +35,121 @@
     })
   })
 
-  async function getLoginIngo (ws: string): Promise<WorkspaceLoginInfo | undefined> {
+  $: doLogin($workspacesStore)
+
+  async function doLogin (ws: Workspace[]) {
     const tokens: Record<string, string> = fetchMetadataLocalStorage(login.metadata.LoginTokens) ?? {}
-    const endpoint = fetchMetadataLocalStorage(login.metadata.LoginEndpoint)
+    await Promise.all(
-    const email = fetchMetadataLocalStorage(login.metadata.LoginEmail)
+      ws.map(async (p) => {
-    const token = tokens[ws]
+        const ws = p.workspace
-    if (token && email && endpoint) {
+        const token = tokens[ws]
-      return {
+        if (!token) {
-        token,
+          const loginInfo = (await selectWorkspace(ws))[1]
-        endpoint,
+          if (loginInfo !== undefined) {
-        email,
+            tokens[ws] = loginInfo?.token
-        workspace: ws
+          }
+        }
+      })
+    )
+    setMetadataLocalStorage(login.metadata.LoginTokens, tokens)
+  }
+
+  const loginPath: Location = {
+    path: [loginId, 'selectWorkspace']
+  }
+
+  function getWorkspaceLink (ws: Workspace): string {
+    const loc: Location = {
+      path: [workbenchId, ws.workspace]
+    }
+    return locationToUrl(loc)
+  }
+
+  async function clickHandler (e: MouseEvent, ws: string) {
+    if (!e.metaKey && !e.ctrlKey) {
+      e.preventDefault()
+      closePopup()
+      closePopup()
+      if (ws !== getCurrentLocation().path[1]) {
+        navigate({ path: [workbenchId, ws] })
       }
-    } else {
-      const loginInfo = (await selectWorkspace(ws))[1]
-      return loginInfo
     }
   }
 
-  $: actions = [
+  let activeElement: HTMLElement
-    ...$workspacesStore.map((w) => ({
+  const btns: HTMLElement[] = []
-      label: getEmbeddedLabel(w.workspace),
-      action: async () => {
-        const loginInfo = await getLoginIngo(w.workspace)
-        navigateToWorkspace(w.workspace, loginInfo)
-      },
-      isSubmenuRightClicking: true,
-      component: Menu,
-      props: {
-        actions: [
-          {
-            label: workbench.string.OpenInNewTab,
-            action: async () => {
-              const loginInfo = await getLoginIngo(w.workspace)
 
-              if (!loginInfo) {
+  function focusTarget (target: HTMLElement): void {
-                return
+    activeElement = target
-              }
+  }
-              setLoginInfo(loginInfo)
+
-              const url = locationToUrl({ path: [workbenchId, w.workspace] })
+  const keyDown = (ev: KeyboardEvent): void => {
-              window.open(url, '_blank')?.focus()
+    if (ev.key === 'Tab') {
-            }
+      ev.preventDefault()
-          }
+      ev.stopPropagation()
-        ]
-      }
-    })),
-    {
-      label: getEmbeddedLabel('...'),
-      action: async () => {
-        navigate({ path: [loginId, 'selectWorkspace'] })
-      },
-      isSubmenuRightClicking: false
     }
-  ]
+    const n = btns.indexOf(activeElement) ?? 0
+    if (ev.key === 'ArrowDown') {
+      if (n < btns.length - 1) {
+        activeElement = btns[n + 1]
+      }
+      ev.preventDefault()
+      ev.stopPropagation()
+    }
+    if (ev.key === 'ArrowUp') {
+      if (n > 0) {
+        activeElement = btns[n - 1]
+      }
+      ev.preventDefault()
+      ev.stopPropagation()
+    }
+  }
+
+  function handleOther (e: MouseEvent) {
+    if (e.metaKey || e.ctrlKey) return
+    e.preventDefault()
+    closePopup()
+    navigate({ path: [loginId, 'selectWorkspace'] })
+  }
+
+  $: last = $workspacesStore.length
 </script>
 
 {#if $workspacesStore.length}
-  <Menu {actions} on:update on:close />
+  <div class="antiPopup" on:keydown={keyDown}>
+    <div class="ap-space" />
+    <div class="ap-scroll">
+      <div class="ap-box">
+        {#each $workspacesStore as ws, i}
+          <a class="stealth" href={getWorkspaceLink(ws)} on:click={(e) => clickHandler(e, ws.workspace)}>
+            <button
+              bind:this={btns[i]}
+              class="ap-menuItem flex-row-center withIcon w-full"
+              class:hover={btns[i] === activeElement}
+              on:mousemove={() => {
+                focusTarget(btns[i])
+              }}
+            >
+              <span class="overflow-label pr-1 flex-grow">{ws.workspace}</span>
+            </button>
+          </a>
+        {/each}
+        <a class="stealth" href={locationToUrl(loginPath)} on:click={handleOther}>
+          <button
+            bind:this={btns[last]}
+            class="ap-menuItem flex-row-center withIcon w-full"
+            class:hover={btns[last] === activeElement}
+            on:mousemove={() => {
+              focusTarget(btns[last])
+            }}
+          >
+            <span class="overflow-label pr-1 flex-grow">...</span>
+          </button>
+        </a>
+      </div>
+    </div>
+    <div class="ap-space" />
+  </div>
 {:else}
   <div class="antiPopup"><Loading /></div>
 {/if}