UBERF-6223 Smarter document creation button (#5088)

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>

plugins/document-resources/src/components/NewDocumentHeader.svelte

@@ -14,17 +14,29 @@
 -->
 <script lang="ts">
   import { Ref, Space } from '@hcengineering/core'
-  import { getClient } from '@hcengineering/presentation'
+  import { createQuery, getClient } from '@hcengineering/presentation'
-  import { Button, showPopup, IconAdd } from '@hcengineering/ui'
+  import { Button, showPopup, IconAdd, ButtonWithDropdown, SelectPopupValueType, IconDropdown } from '@hcengineering/ui'
   import { openDoc } from '@hcengineering/view-resources'
   import document from '../plugin'
   import { getDocumentIdFromFragment } from '../utils'
   import CreateDocument from './CreateDocument.svelte'
+  import CreateTeamspace from './teamspace/CreateTeamspace.svelte'
 
   export let currentSpace: Ref<Space> | undefined
   export let currentFragment: string | undefined
 
   const client = getClient()
+  const query = createQuery()
+
+  let hasTeamspace = false
+  query.query(
+    document.class.Teamspace,
+    { archived: false },
+    (res) => {
+      hasTeamspace = res.length > 0
+    },
+    { limit: 1, projection: { _id: 1 } }
+  )
 
   $: parent = getDocumentIdFromFragment(currentFragment ?? '')
 
@@ -38,16 +50,48 @@
       }
     })
   }
+
+  async function newTeamspace (): Promise<void> {
+    showPopup(CreateTeamspace, {}, 'top')
+  }
+
+  async function dropdownItemSelected (res?: SelectPopupValueType['id']): Promise<void> {
+    if (res === document.string.CreateDocument) {
+      await newDocument()
+    } else if (res === document.string.CreateTeamspace) {
+      await newTeamspace()
+    }
+  }
 </script>
 
 <div class="antiNav-subheader">
-  <Button
+  {#if hasTeamspace}
-    icon={IconAdd}
+    <ButtonWithDropdown
-    label={document.string.CreateDocument}
+      icon={IconAdd}
-    justify={'left'}
+      justify={'left'}
-    width={'100%'}
+      kind={'primary'}
-    kind={'primary'}
+      label={document.string.CreateDocument}
-    gap={'large'}
+      on:click={newDocument}
-    on:click={newDocument}
+      mainButtonId={'new-document'}
-  />
+      dropdownIcon={IconDropdown}
+      dropdownItems={[
+        { id: document.string.CreateDocument, label: document.string.CreateDocument },
+        { id: document.string.CreateTeamspace, label: document.string.CreateTeamspace }
+      ]}
+      on:dropdown-selected={(ev) => {
+        void dropdownItemSelected(ev.detail)
+      }}
+    />
+  {:else}
+    <Button
+      id={'new-document'}
+      icon={IconAdd}
+      label={document.string.CreateTeamspace}
+      justify={'left'}
+      width={'100%'}
+      kind={'primary'}
+      gap={'large'}
+      on:click={newTeamspace}
+    />
+  {/if}
 </div>

tests/sanity/tests/model/documents/documents-page.ts

@@ -27,7 +27,7 @@ export class DocumentsPage extends CommonPage {
     this.popupCreateDocument = new DocumentCreatePopup(page)
     this.popupMoveDocument = new DocumentMovePopup(page)
 
-    this.buttonCreateDocument = page.locator('div[data-float="navigator"] button[type="submit"]')
+    this.buttonCreateDocument = page.locator('div[data-float="navigator"] button[id="new-document"]')
     this.divTeamspacesParent = page.locator('div#tree-teamspaces').locator('xpath=..')
     this.buttonCreateTeamspace = page.locator('div#tree-teamspaces > button')
     this.inputModalNewTeamspaceTitle = page.locator(