Fix create workspace region selector (#7212)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

packages/ui/src/components/Scroller.svelte

@@ -50,6 +50,7 @@
   export let onResize: (() => void) | undefined = undefined
   export let containerName: string | undefined = undefined
   export let containerType: 'size' | 'inline-size' | undefined = containerName !== undefined ? 'inline-size' : undefined
+  export let maxHeight: number | undefined = undefined
 
   export function scroll (top: number, left?: number, behavior: 'auto' | 'smooth' = 'auto') {
     if (divScroll) {
@@ -558,6 +559,7 @@
   style:--scroller-footer-height={`${(fade.multipler?.bottom ?? 0) * fz + (stickedScrollBars ? 0 : 2)}px`}
   style:--scroller-left-offset={`${(fade.multipler?.left ?? 0) * fz + 2}px`}
   style:--scroller-right-offset={`${(fade.multipler?.right ?? 0) * fz + (mask !== 'none' ? 12 : 2)}px`}
+  style:max-height={maxHeight !== undefined ? `${maxHeight}rem` : undefined}
 >
   <div bind:this={divHScroll} class="horizontalBox flex-col flex-shrink">
     <div

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

@@ -14,15 +14,15 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Status, Severity, OK } from '@hcengineering/platform'
+  import { OK, Severity, Status, getEmbeddedLabel } from '@hcengineering/platform'
 
-  import Form from './Form.svelte'
+  import { LoginInfo } from '@hcengineering/login'
-  import { createWorkspace, getAccount, getRegionInfo, goTo, setLoginInfo, type RegionInfo } from '../utils'
+  import { ButtonMenu, DropdownLabels, getCurrentLocation, navigate } from '@hcengineering/ui'
-  import { getCurrentLocation, navigate, DropdownLabels } from '@hcengineering/ui'
-  import login from '../plugin'
   import { workbenchId } from '@hcengineering/workbench'
   import { onMount } from 'svelte'
-  import { LoginInfo } from '@hcengineering/login'
+  import login from '../plugin'
+  import { createWorkspace, getAccount, getRegionInfo, goTo, setLoginInfo, type RegionInfo } from '../utils'
+  import Form from './Form.svelte'
 
   const fields = [
     {
@@ -45,7 +45,8 @@
 
   onMount(async () => {
     account = await getAccount()
-    regions = (await getRegionInfo()) ?? []
+    // Show only regions with specified name
+    regions = (await getRegionInfo())?.filter((it) => it.name.length > 0) ?? []
     selectedRegion = regions[0]?.region
     if (account?.confirmed === false) {
       const loc = getCurrentLocation()
@@ -72,12 +73,6 @@
   }
 </script>
 
-{#if regions.length > 1}
-  <div class="flex flex-reverse p-3">
-    <DropdownLabels bind:selected={selectedRegion} items={regions.map((it) => ({ id: it.region, label: it.name }))} />
-  </div>
-{/if}
-
 <Form
   caption={login.string.CreateWorkspace}
   {status}
@@ -95,4 +90,20 @@
       }
     }
   ]}
-/>
+>
+  <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>

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

@@ -21,11 +21,11 @@
 
   import { onMount } from 'svelte'
   import { BottomAction } from '..'
-  import login from '../plugin'
   import { makeSequential } from '../mutex'
+  import login from '../plugin'
+  import BottomActionComponent from './BottomAction.svelte'
   import Providers from './Providers.svelte'
   import Tabs from './Tabs.svelte'
-  import BottomActionComponent from './BottomAction.svelte'
 
   interface Field {
     id?: string
@@ -59,8 +59,6 @@
   export let subtitle: string | undefined = undefined
   export let signUpDisabled = false
 
-  $: $themeStore.language && validate($themeStore.language)
-
   const validate = makeSequential(async function validateAsync (language: string): Promise<boolean> {
     if (ignoreInitialValidation) return true
     for (const field of fields) {
@@ -97,7 +95,10 @@
     status = OK
     return true
   })
-  validate($themeStore.language)
+
+  $: if ($themeStore.language !== undefined) {
+    void validate($themeStore.language)
+  }
 
   let inAction = false
 
@@ -106,7 +107,7 @@
       trim(field.name)
     }
     inAction = true
-    action.func().finally(() => {
+    void action.func().finally(() => {
       inAction = false
     })
   }
@@ -120,6 +121,7 @@
   $: loginState = caption === login.string.LogIn ? 'login' : caption === login.string.SignUp ? 'signup' : 'none'
 </script>
 
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <form
   class="container"
   style:padding={$deviceInfo.docWidth <= 480 ? '.25rem 1.25rem' : '4rem 5rem'}
@@ -129,8 +131,8 @@
       evt.preventDefault()
       evt.stopPropagation()
       if (!inAction) {
-        validate($themeStore.language).then((res) => {
+        void validate($themeStore.language).then((res) => {
-          if (res) {
+          if (res != null) {
             performAction(action)
           }
         })
@@ -146,11 +148,14 @@
         {subtitle}
       </div>
     {/if}
+    <div class="flex-row-center">
       <div class="title"><Label label={caption} /></div>
+      <slot name="region-selector" />
+    </div>
   {/if}
   <div class="form">
     {#each fields as field (field.name)}
-      <div class={field.short && !($deviceInfo.docWidth <= 600) ? 'form-col' : 'form-row'}>
+      <div class={field.short !== undefined && !($deviceInfo.docWidth <= 600) ? 'form-col' : 'form-row'}>
         <StylishEdit
           label={field.i18n}
           name={field.id}
@@ -183,7 +188,7 @@
         }}
       />
     </div>
-    {#if secondaryButtonLabel && secondaryButtonAction}
+    {#if secondaryButtonLabel !== undefined && secondaryButtonAction}
       <div class="form-row">
         <Button
           label={secondaryButtonLabel}

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

@@ -107,7 +107,7 @@
     </div>
   {/if}
   {#await _getWorkspaces() then}
-    <Scroller padding={'.125rem 0'}>
+    <Scroller padding={'.125rem 0'} maxHeight={35}>
       <div class="form">
         {#each workspaces
           .slice(0, 500)

server/account/src/utils.ts

@@ -123,11 +123,11 @@ export const getRegions = (): RegionInfo[] => {
   if (process.env.REGION_INFO !== undefined) {
     return process.env.REGION_INFO.split(';')
       .map((it) => it.split('|'))
-      .map((it) => ({ region: it[0], name: it[1] }))
+      .map((it) => ({ region: it[0].trim(), name: it[1].trim() }))
   }
   return getEndpoints()
     .map(toTransactor)
-    .map((it) => ({ region: it.region, name: it.region }))
+    .map((it) => ({ region: it.region.trim(), name: '' }))
 }
 
 export const getEndpoint = (ctx: MeasureContext, workspaceInfo: WorkspaceInfo, kind: EndpointKind): string => {