uberf-10308: adjust onboarding

Signed-off-by: Alexey Zinoviev <alexey.zinoviev@xored.com>

.vscode/launch.json

@@ -191,7 +191,8 @@
         "TRANSACTOR_URL": "ws://huly.local:3333,ws://huly.local:3332;;cockroach",
         "ACCOUNTS_URL": "http://localhost:3000",
         "ACCOUNT_PORT": "3000",
-        "FRONT_URL": "http://localhost:8080",
+        // "FRONT_URL": "http://huly.local:8080",
+        "FRONT_URL": "http://huly.local:8087",
         "STATS_URL": "http://huly.local:4900",
         "MAIL_URL": "",
         // "DB_NS": "account-2",

plugins/login-resources/src/components/CreateWorkspaceForm.svelte

@@ -78,7 +78,7 @@
   {fields}
   {object}
   {action}
-  subtitle={getAccountDisplayName(loginInfo ?? null)}
+  subtitle={getAccountDisplayName(loginInfo)}
   bottomActions={[
     {
       caption: login.string.HaveWorkspace,

plugins/login-resources/src/utils.ts

@@ -26,7 +26,6 @@ import { Analytics } from '@hcengineering/analytics'
 import {
   AccountRole,
   concatLink,
-  parseSocialIdString,
   type AccountUuid,
   type Person,
   type WorkspaceInfoWithStatus,
@@ -961,7 +960,7 @@ export function isWorkspaceLoginInfo (
   return (info as any)?.workspace !== undefined && (info as any)?.token !== undefined
 }
 
-export function getAccountDisplayName (loginInfo: LoginInfo | null): string {
+export function getAccountDisplayName (loginInfo: LoginInfo | null | undefined): string {
   if (loginInfo == null) {
     return ''
   }
@@ -970,10 +969,5 @@ export function getAccountDisplayName (loginInfo: LoginInfo | null): string {
     return loginInfo.name
   }
 
-  if (loginInfo.socialId != null) {
-    const { value } = parseSocialIdString(loginInfo.socialId)
-    return value
-  }
-
   return loginInfo.account
 }

plugins/onboard-resources/src/components/Form.svelte

@@ -141,7 +141,10 @@
       {subtitle}
     </div>
   {/if}
-  <div class="title"><Label label={caption} /></div>
+  <div class="flex-row-center">
+    <div class="title"><Label label={caption} /></div>
+    <slot name="region-selector" />
+  </div>
   <div class="form">
     {#each fields as field (field.name)}
       <div class={field.short && !($deviceInfo.docWidth <= 600) ? 'form-col' : 'form-row'}>

plugins/onboard-resources/src/components/OnboardForm.svelte

@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import { LoginInfo, WorkspaceLoginInfo } from '@hcengineering/login'
-  import { getAccount, getWorkspaces, navigateToWorkspace } from '@hcengineering/login-resources'
+  import { getAccount, getAccountDisplayName, getWorkspaces, navigateToWorkspace } from '@hcengineering/login-resources'
   import { OK } from '@hcengineering/platform'
   import { onMount } from 'svelte'
   import { Analytics } from '@hcengineering/analytics'
@@ -30,8 +30,7 @@
 
   const steps = Object.values(OnboardSteps)
 
-  let account: LoginInfo | undefined = undefined
-
+  let account: LoginInfo | null | undefined = undefined
   let step: OnboardSteps = OnboardSteps.Workspace
 
   function handleStepEvent (event: CustomEvent<LoginInfo | WorkspaceLoginInfo | undefined>): void {
@@ -69,9 +68,9 @@
   const action = {
     i18n: onboard.string.StartUsingHuly,
     func: async () => {
-      if (account !== undefined && isWorkspaceLoginInfo(account)) {
+      if (account != null && isWorkspaceLoginInfo(account)) {
         Analytics.handleEvent(OnboardEvents.StartHuly)
-        navigateToWorkspace(account.workspace, account)
+        navigateToWorkspace(account.workspaceUrl, account)
       }
     }
   }
@@ -86,7 +85,7 @@
     <Form
       status={OK}
       caption={onboard.string.SignUpCompleted}
-      subtitle={account.email}
+      subtitle={getAccountDisplayName(account)}
       fields={[]}
       object={{}}
       {action}

plugins/onboard-resources/src/components/OnboardWorkspaceForm.svelte

@@ -13,10 +13,11 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { LoginInfo } from '@hcengineering/login'
-  import { createWorkspace, setLoginInfo } from '@hcengineering/login-resources'
-  import { Status, Severity, OK } from '@hcengineering/platform'
-  import { createEventDispatcher } from 'svelte'
+  import { LoginInfo, RegionInfo } from '@hcengineering/login'
+  import { createWorkspace, getAccountDisplayName, getRegionInfo, setLoginInfo } from '@hcengineering/login-resources'
+  import { Status, Severity, OK, getEmbeddedLabel } from '@hcengineering/platform'
+  import { createEventDispatcher, onMount } from 'svelte'
+  import { ButtonMenu } from '@hcengineering/ui'
 
   import Form from './Form.svelte'
   import onboard from '../plugin'
@@ -32,13 +33,20 @@
   }
 
   let status: Status<any> = OK
+  let regions: RegionInfo[] = []
+  let selectedRegion: string = ''
+
+  onMount(async () => {
+    regions = (await getRegionInfo())?.filter((it) => it.name.length > 0) ?? []
+    selectedRegion = regions[0]?.region
+  })
 
   const action = {
     i18n: onboard.string.CreateWorkspace,
     func: async () => {
       status = new Status(Severity.INFO, onboard.status.ConnectingToServer, {})
 
-      const [loginStatus, result] = await createWorkspace(object.workspace)
+      const [loginStatus, result] = await createWorkspace(object.workspace, selectedRegion)
       status = loginStatus
 
       if (result != null) {
@@ -49,4 +57,27 @@
   }
 </script>
 
-<Form caption={onboard.string.CreateWorkspace} subtitle={account.email} {status} {fields} {object} {action} />
+<Form
+  caption={onboard.string.CreateWorkspace}
+  subtitle={getAccountDisplayName(account)}
+  {status}
+  {fields}
+  {object}
+  {action}
+>
+  <svelte:fragment slot="region-selector">
+    {#if regions.length > 1}
+      <div class="flex flex-grow flex-reverse">
+        <ButtonMenu
+          bind:selected={selectedRegion}
+          autoSelectionIfOne
+          title={regions.find((it) => it.region === selectedRegion)?.name}
+          items={regions.map((it) => ({ id: it.region, label: getEmbeddedLabel(it.name) }))}
+          on:selected={(it) => {
+            selectedRegion = it.detail
+          }}
+        />
+      </div>
+    {/if}
+  </svelte:fragment>
+</Form>