UBER-327: Sub issues/Related issues allow to create from category header (#3317)

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

plugins/tracker-resources/src/components/issues/edit/SubIssueList.svelte

@@ -14,12 +14,13 @@
 -->
 <script lang="ts">
   import { Doc, DocumentQuery, Ref } from '@hcengineering/core'
+  import { IntlString } from '@hcengineering/platform'
+  import { ActionContext } from '@hcengineering/presentation'
   import { Issue, Project } from '@hcengineering/tracker'
-  import { registerFocus } from '@hcengineering/ui'
+  import { AnyComponent, AnySvelteComponent, registerFocus } from '@hcengineering/ui'
   import { ViewOptions, Viewlet } from '@hcengineering/view'
   import { List, ListSelectionProvider, SelectDirection, selectionStore } from '@hcengineering/view-resources'
   import tracker from '../../../plugin'
-  import { ActionContext } from '@hcengineering/presentation'
 
   export let query: DocumentQuery<Issue> | undefined = undefined
   export let issues: Issue[] | undefined = undefined
@@ -57,6 +58,10 @@
     },
     isFocus: () => focused
   })
+
+  export let createItemDialog: AnySvelteComponent | AnyComponent | undefined = undefined
+  export let createItemLabel: IntlString | undefined = undefined
+  export let createItemDialogProps: Record<string, any> | undefined = undefined
 </script>
 
 <ActionContext
@@ -77,6 +82,9 @@
     flatHeaders={true}
     props={{ projects }}
     {disableHeader}
+    {createItemDialog}
+    {createItemDialogProps}
+    {createItemLabel}
     selectedObjectIds={$selectionStore ?? []}
     on:row-focus={(event) => {
       listProvider.updateFocus(event.detail ?? undefined)

plugins/tracker-resources/src/components/issues/edit/SubIssues.svelte

@@ -39,6 +39,7 @@
   import tracker from '../../../plugin'
   import SubIssueList from './SubIssueList.svelte'
   import { afterUpdate } from 'svelte'
+  import CreateIssue from '../../CreateIssue.svelte'
 
   export let issue: Issue
   export let projects: Map<Ref<Project>, Project>
@@ -149,6 +150,9 @@
       <ExpandCollapse isExpanded={!isCollapsed}>
         <div class="list" class:collapsed={isCollapsed}>
           <SubIssueList
+            createItemDialog={CreateIssue}
+            createItemLabel={tracker.string.AddIssueTooltip}
+            createItemDialogProps={{ space: issue.space, parentIssue: issue, shouldSaveDraft }}
             focusIndex={focusIndex === -1 ? -1 : focusIndex + 1}
             projects={_projects}
             {viewlet}

plugins/tracker-resources/src/components/issues/related/RelatedIssues.svelte

@@ -20,6 +20,7 @@
   import { ViewOptions, Viewlet } from '@hcengineering/view'
   import { createEventDispatcher } from 'svelte'
   import tracker from '../../../plugin'
+  import CreateIssue from '../../CreateIssue.svelte'
   import AddIssueDuo from '../../icons/AddIssueDuo.svelte'
   import SubIssueList from '../edit/SubIssueList.svelte'
 
@@ -52,7 +53,16 @@
 
 {#if subIssues !== undefined && viewlet !== undefined}
   {#if projects && subIssues.length > 0}
-    <SubIssueList bind:viewOptions {viewlet} issues={subIssues} {projects} {disableHeader} />
+    <SubIssueList
+      bind:viewOptions
+      {viewlet}
+      issues={subIssues}
+      {projects}
+      {disableHeader}
+      createItemDialog={CreateIssue}
+      createItemLabel={tracker.string.AddIssueTooltip}
+      createItemDialogProps={{ relatedTo: object }}
+    />
   {:else}
     <div class="antiSection-empty solid flex-col mt-3">
       <div class="flex-center content-color">

plugins/view-resources/src/components/list/List.svelte

@@ -16,7 +16,7 @@
   import { Class, Doc, DocumentQuery, FindOptions, Ref, Space } from '@hcengineering/core'
   import { IntlString, getResource } from '@hcengineering/platform'
   import { createQuery, getClient } from '@hcengineering/presentation'
-  import { AnyComponent } from '@hcengineering/ui'
+  import { AnyComponent, AnySvelteComponent } from '@hcengineering/ui'
   import { BuildModelKey, ViewOptionModel, ViewOptions, ViewQueryOption } from '@hcengineering/view'
   import { createEventDispatcher } from 'svelte'
   import { buildConfigLookup } from '../../utils'
@@ -29,7 +29,8 @@
   export let baseMenuClass: Ref<Class<Doc>> | undefined = undefined
   export let config: (string | BuildModelKey)[]
   export let selectedObjectIds: Doc[] = []
-  export let createItemDialog: AnyComponent | undefined = undefined
+  export let createItemDialog: AnyComponent | AnySvelteComponent | undefined = undefined
+  export let createItemDialogProps: Record<string, any> | undefined = undefined
   export let createItemLabel: IntlString | undefined = undefined
   export let viewOptionsConfig: ViewOptionModel[] | undefined = undefined
   export let viewOptions: ViewOptions
@@ -128,6 +129,7 @@
     level={0}
     groupPersistKey={''}
     {createItemDialog}
+    {createItemDialogProps}
     {createItemLabel}
     on:check
     on:uncheckAll={uncheckAll}

plugins/view-resources/src/components/list/ListCategories.svelte

@@ -16,18 +16,18 @@
   import { CategoryType, Class, Doc, DocumentQuery, generateId, Lookup, Ref, Space } from '@hcengineering/core'
   import { getResource, IntlString } from '@hcengineering/platform'
   import { getClient, statusStore } from '@hcengineering/presentation'
-  import { AnyComponent } from '@hcengineering/ui'
+  import { AnyComponent, AnySvelteComponent } from '@hcengineering/ui'
   import { AttributeModel, BuildModelKey, CategoryOption, ViewOptionModel, ViewOptions } from '@hcengineering/view'
   import { createEventDispatcher, onDestroy, SvelteComponentTyped } from 'svelte'
   import {
     buildModel,
     concatCategories,
+    fixedWidthStore,
     getAdditionalHeader,
     getCategories,
     getGroupByValues,
     getPresenter,
-    groupBy,
+    groupBy
-    fixedWidthStore
   } from '../../utils'
   import { CategoryQuery, noCategory } from '../../viewOptions'
   import ListCategory from './ListCategory.svelte'
@@ -40,7 +40,8 @@
   export let baseMenuClass: Ref<Class<Doc>> | undefined
   export let config: (string | BuildModelKey)[]
   export let selectedObjectIds: Doc[] = []
-  export let createItemDialog: AnyComponent | undefined
+  export let createItemDialog: AnyComponent | AnySvelteComponent | undefined
+  export let createItemDialogProps: Record<string, any> | undefined
   export let createItemLabel: IntlString | undefined
   export let viewOptions: ViewOptions
   export let flatHeaders = false
@@ -306,6 +307,7 @@
     {items}
     {newObjectProps}
     {createItemDialog}
+    {createItemDialogProps}
     {createItemLabel}
     {viewOptionsConfig}
     on:check

plugins/view-resources/src/components/list/ListCategory.svelte

@@ -19,6 +19,7 @@
   import { DocWithRank, calcRank } from '@hcengineering/task'
   import {
     AnyComponent,
+    AnySvelteComponent,
     ExpandCollapse,
     Spinner,
     getEventPositionElement,
@@ -42,7 +43,8 @@
   export let space: Ref<Space> | undefined
   export let baseMenuClass: Ref<Class<Doc>> | undefined
   export let items: Doc[]
-  export let createItemDialog: AnyComponent | undefined
+  export let createItemDialog: AnyComponent | AnySvelteComponent | undefined
+  export let createItemDialogProps: Record<string, any> | undefined
   export let createItemLabel: IntlString | undefined
   export let selectedObjectIds: Doc[]
   export let itemModels: AttributeModel[]
@@ -367,6 +369,7 @@
       {items}
       {headerComponent}
       {createItemDialog}
+      {createItemDialogProps}
       {createItemLabel}
       {extraHeaders}
       newObjectProps={_newObjectProps}

plugins/view-resources/src/components/list/ListHeader.svelte

@@ -18,6 +18,7 @@
   import ui, {
     ActionIcon,
     AnyComponent,
+    AnySvelteComponent,
     Button,
     ColorDefinition,
     Component,
@@ -49,7 +50,8 @@
   export let lastCat = false
   export let level: number
 
-  export let createItemDialog: AnyComponent | undefined
+  export let createItemDialog: AnyComponent | AnySvelteComponent | undefined
+  export let createItemDialogProps: Record<string, any> | undefined
   export let createItemLabel: IntlString | undefined
   export let extraHeaders: AnyComponent[] | undefined
   export let props: Record<string, any> = {}
@@ -71,7 +73,11 @@
 
   const handleCreateItem = (event: MouseEvent) => {
     if (createItemDialog === undefined) return
-    showPopup(createItemDialog, newObjectProps(items[0]), eventToHTMLElement(event))
+    showPopup(
+      createItemDialog,
+      { ...(createItemDialogProps ?? {}), ...newObjectProps(items[0]) },
+      eventToHTMLElement(event)
+    )
   }
   let mouseOver = false