UBER-956 (#3768)

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

models/chunter/src/index.ts

@@ -192,6 +192,10 @@ export function createModel (builder: Builder, options = { addApplication: true
     builder.mixin(spaceClass, core.class.Class, view.mixin.ObjectEditor, {
       editor: chunter.component.EditChannel
     })
+
+    builder.mixin(spaceClass, core.class.Class, view.mixin.ObjectPanel, {
+      component: chunter.component.EditChannel
+    })
   })
 
   builder.mixin(chunter.class.DirectMessage, core.class.Class, view.mixin.SpaceName, {

packages/presentation/src/components/NavLink.svelte

@@ -46,6 +46,7 @@
 
         if (url.origin === window.location.origin) {
           e.preventDefault()
+          e.stopPropagation()
           navigate(parseLocation(url))
         }
       } catch {}

plugins/calendar-resources/src/components/PersonsPresenter.svelte

@@ -15,12 +15,11 @@
 -->
 <script lang="ts">
   import { getName, Person } from '@hcengineering/contact'
-  import { Hierarchy } from '@hcengineering/core'
   import { Avatar } from '@hcengineering/contact-resources'
-  import calendar from '../plugin'
-  import { showPanel, tooltip } from '@hcengineering/ui'
-  import view from '@hcengineering/view'
   import { getClient } from '@hcengineering/presentation'
+  import { tooltip } from '@hcengineering/ui'
+  import { openDoc } from '@hcengineering/view-resources'
+  import calendar from '../plugin'
 
   export let value: Person | Person[]
   export let inline: boolean = false
@@ -29,7 +28,7 @@
   $: persons = Array.isArray(value) ? value : [value]
 
   async function onClick (p: Person) {
-    showPanel(view.component.EditDoc, p._id, Hierarchy.mixinOrClass(p), 'content')
+    openDoc(getClient().getHierarchy(), p)
   }
   const client = getClient()
 </script>

plugins/chunter-resources/src/components/ChannelHeader.svelte

@@ -16,7 +16,7 @@
   import { Channel } from '@hcengineering/chunter'
   import type { Ref } from '@hcengineering/core'
   import { createQuery, getClient } from '@hcengineering/presentation'
-  import { showPanel } from '@hcengineering/ui'
+  import { openDoc } from '@hcengineering/view-resources'
   import chunter from '../plugin'
   import { classIcon } from '../utils'
   import Header from './Header.svelte'
@@ -34,7 +34,7 @@
 
   async function onSpaceEdit (): Promise<void> {
     if (channel === undefined) return
-    showPanel(chunter.component.EditChannel, channel._id, channel._class, 'content')
+    openDoc(client.getHierarchy(), channel)
   }
 </script>
 

plugins/chunter-resources/src/components/DmHeader.svelte

@@ -14,15 +14,16 @@
 -->
 <script lang="ts">
   import { DirectMessage } from '@hcengineering/chunter'
+  import contact, { PersonAccount } from '@hcengineering/contact'
+  import { CombineAvatars } from '@hcengineering/contact-resources'
   import type { Ref } from '@hcengineering/core'
   import { getCurrentAccount } from '@hcengineering/core'
   import { createQuery, getClient } from '@hcengineering/presentation'
-  import { CombineAvatars } from '@hcengineering/contact-resources'
-  import contact, { PersonAccount } from '@hcengineering/contact'
-  import { SearchEdit, showPanel } from '@hcengineering/ui'
+  import { SearchEdit } from '@hcengineering/ui'
+  import { openDoc } from '@hcengineering/view-resources'
+  import { userSearch } from '../index'
   import chunter from '../plugin'
   import { getDmName, navigateToSpecial } from '../utils'
-  import { userSearch } from '../index'
 
   export let spaceId: Ref<DirectMessage> | undefined
   export let withSearch: boolean = true
@@ -51,7 +52,7 @@
 
   async function onSpaceEdit (): Promise<void> {
     if (dm === undefined) return
-    showPanel(chunter.component.EditChannel, dm._id, dm._class, 'content')
+    openDoc(client.getHierarchy(), dm)
   }
 </script>
 

plugins/contact-resources/src/components/AssigneeBox.svelte

@@ -14,31 +14,31 @@
 -->
 <script lang="ts">
   import contact, { Contact, Employee, Person, getName } from '@hcengineering/contact'
-  import { Class, DocumentQuery, FindOptions, Hierarchy, Ref } from '@hcengineering/core'
-  import { getEmbeddedLabel, IntlString } from '@hcengineering/platform'
+  import { Class, DocumentQuery, FindOptions, Ref } from '@hcengineering/core'
+  import { IntlString, getEmbeddedLabel } from '@hcengineering/platform'
+  import presentation, { getClient } from '@hcengineering/presentation'
   import {
     ActionIcon,
     Button,
     ButtonKind,
     ButtonSize,
-    IconSize,
-    getEventPositionElement,
-    getFocusManager,
     Icon,
+    IconSize,
     Label,
     LabelAndProps,
-    showPanel,
+    getEventPositionElement,
+    getFocusManager,
     showPopup,
     tooltip
   } from '@hcengineering/ui'
   import view from '@hcengineering/view'
+  import { openDoc } from '@hcengineering/view-resources'
   import { createEventDispatcher } from 'svelte'
-  import presentation, { getClient } from '@hcengineering/presentation'
   import { PersonLabelTooltip, personByIdStore } from '..'
   import AssigneePopup from './AssigneePopup.svelte'
-  import IconPerson from './icons/Person.svelte'
-  import UserInfo from './UserInfo.svelte'
   import EmployeePresenter from './EmployeePresenter.svelte'
+  import UserInfo from './UserInfo.svelte'
+  import IconPerson from './icons/Person.svelte'
 
   export let _class: Ref<Class<Employee>> = contact.mixin.Employee
   export let excluded: Ref<Contact>[] | undefined = undefined
@@ -199,7 +199,7 @@
             size={'small'}
             action={() => {
               if (selected) {
-                showPanel(view.component.EditDoc, selected._id, Hierarchy.mixinOrClass(selected), 'content')
+                openDoc(client.getHierarchy(), selected)
               }
             }}
           />

plugins/contact-resources/src/components/UserBox.svelte

@@ -15,31 +15,30 @@
 -->
 <script lang="ts">
   import contact, { Contact, getName } from '@hcengineering/contact'
-  import { Class, DocumentQuery, FindOptions, Hierarchy, Ref, Doc } from '@hcengineering/core'
-  import { Asset, getEmbeddedLabel, IntlString } from '@hcengineering/platform'
-  import { getClient, ObjectCreate } from '@hcengineering/presentation'
+  import { Class, Doc, DocumentQuery, FindOptions, Ref } from '@hcengineering/core'
+  import { Asset, IntlString, getEmbeddedLabel } from '@hcengineering/platform'
+  import presentation, { ObjectCreate, getClient } from '@hcengineering/presentation'
   import {
     ActionIcon,
     AnySvelteComponent,
     Button,
     ButtonKind,
     ButtonSize,
-    IconSize,
-    getEventPositionElement,
-    getFocusManager,
     Icon,
+    IconSize,
     Label,
     LabelAndProps,
-    showPanel,
+    getEventPositionElement,
+    getFocusManager,
     showPopup,
     tooltip
   } from '@hcengineering/ui'
   import view from '@hcengineering/view'
+  import { openDoc } from '@hcengineering/view-resources'
   import { createEventDispatcher } from 'svelte'
-  import presentation from '@hcengineering/presentation'
-  import IconPerson from './icons/Person.svelte'
   import UserInfo from './UserInfo.svelte'
   import UsersPopup from './UsersPopup.svelte'
+  import IconPerson from './icons/Person.svelte'
 
   export let _class: Ref<Class<Contact>>
   export let _previewClass: Ref<Class<Contact>> = contact.class.Contact
@@ -185,7 +184,7 @@
             size={'small'}
             action={() => {
               if (selected) {
-                showPanel(view.component.EditDoc, selected._id, Hierarchy.mixinOrClass(selected), 'content')
+                openDoc(client.getHierarchy(), selected)
               }
             }}
           />

plugins/hr-resources/src/components/DepartmentCard.svelte

@@ -14,23 +14,20 @@
 -->
 <script lang="ts">
   import contact, { Employee } from '@hcengineering/contact'
-  import { EmployeePresenter } from '@hcengineering/contact-resources'
+  import { Avatar, EmployeePresenter, UsersPopup } from '@hcengineering/contact-resources'
   import { Ref, WithLookup } from '@hcengineering/core'
   import { Department, Staff } from '@hcengineering/hr'
   import { getClient } from '@hcengineering/presentation'
-  import { Avatar, UsersPopup } from '@hcengineering/contact-resources'
   import {
     Button,
+    IconAdd,
+    Label,
     closeTooltip,
     eventToHTMLElement,
     getEventPositionElement,
-    IconAdd,
-    Label,
-    showPanel,
     showPopup
   } from '@hcengineering/ui'
-  import view from '@hcengineering/view'
-  import { Menu } from '@hcengineering/view-resources'
+  import { Menu, openDoc } from '@hcengineering/view-resources'
   import hr from '../plugin'
   import { addMember } from '../utils'
   import CreateDepartment from './CreateDepartment.svelte'
@@ -84,7 +81,7 @@
   }
 
   function edit (e: MouseEvent): void {
-    showPanel(view.component.EditDoc, value._id, value._class, 'content')
+    openDoc(client.getHierarchy(), value)
   }
 
   export let dragPerson: WithLookup<Staff> | undefined

plugins/lead-resources/src/components/KanbanCard.svelte

@@ -20,13 +20,13 @@
   import { ContactPresenter } from '@hcengineering/contact-resources'
   import type { WithLookup } from '@hcengineering/core'
   import type { Lead } from '@hcengineering/lead'
-  import { ActionIcon, Component, DueDatePresenter, IconMoreH, showPanel, showPopup } from '@hcengineering/ui'
-  import view, { BuildModelKey } from '@hcengineering/view'
-  import { ContextMenu, enabledConfig } from '@hcengineering/view-resources'
-  import lead from '../plugin'
   import notification from '@hcengineering/notification'
   import { getClient } from '@hcengineering/presentation'
   import { AssigneePresenter } from '@hcengineering/task-resources'
+  import { ActionIcon, Component, DueDatePresenter, IconMoreH, showPopup } from '@hcengineering/ui'
+  import { BuildModelKey } from '@hcengineering/view'
+  import { ContextMenu, enabledConfig, openDoc } from '@hcengineering/view-resources'
+  import lead from '../plugin'
   import LeadPresenter from './LeadPresenter.svelte'
 
   export let object: WithLookup<Lead>
@@ -40,7 +40,7 @@
   }
 
   function showLead () {
-    showPanel(view.component.EditDoc, object._id, object._class, 'content')
+    openDoc(client.getHierarchy(), object)
   }
 </script>
 

plugins/recruit-resources/src/components/VacancyItemPresenter.svelte

@@ -14,8 +14,10 @@
 -->
 <script lang="ts">
   import { Ref } from '@hcengineering/core'
+  import { getClient } from '@hcengineering/presentation'
   import type { Vacancy } from '@hcengineering/recruit'
-  import { ActionIcon, Icon, IconEdit, showPanel } from '@hcengineering/ui'
+  import { ActionIcon, Icon, IconEdit } from '@hcengineering/ui'
+  import { openDoc } from '@hcengineering/view-resources'
   import recruit from '../plugin'
 
   export let value: Vacancy
@@ -23,7 +25,7 @@
   export let action: ((item: Ref<Vacancy>) => void) | undefined = undefined
 
   function editVacancy (): void {
-    showPanel(recruit.component.EditVacancy, value._id, value._class, 'content')
+    openDoc(getClient().getHierarchy(), value)
   }
 </script>
 

plugins/recruit-resources/src/components/review/EditReview.svelte

@@ -16,13 +16,11 @@
 <script lang="ts">
   import contact, { Contact } from '@hcengineering/contact'
   import { UserBox } from '@hcengineering/contact-resources'
-  import { Hierarchy } from '@hcengineering/core'
   import { getClient } from '@hcengineering/presentation'
   import type { Review } from '@hcengineering/recruit'
   import { FullDescriptionBox } from '@hcengineering/text-editor'
-  import { EditBox, Grid, showPanel } from '@hcengineering/ui'
-  import view from '@hcengineering/view'
-  import { ObjectPresenter } from '@hcengineering/view-resources'
+  import { EditBox, Grid } from '@hcengineering/ui'
+  import { ObjectPresenter, openDoc } from '@hcengineering/view-resources'
   import { createEventDispatcher, onMount } from 'svelte'
   import recruit from '../../plugin'
 
@@ -72,7 +70,7 @@
         class="clear-mins flex-row-center"
         on:click={() => {
           if (candidate !== undefined) {
-            showPanel(view.component.EditDoc, candidate._id, Hierarchy.mixinOrClass(candidate), 'content')
+            openDoc(client.getHierarchy(), candidate)
           }
         }}
       >

plugins/recruit-resources/src/components/review/PersonsPresenter.svelte

@@ -16,20 +16,20 @@
 <script lang="ts">
   import calendar from '@hcengineering/calendar'
   import { getName, Person } from '@hcengineering/contact'
-  import { Hierarchy } from '@hcengineering/core'
   import { Avatar } from '@hcengineering/contact-resources'
-  import { showPanel, tooltip } from '@hcengineering/ui'
-  import view from '@hcengineering/view'
   import { getClient } from '@hcengineering/presentation'
+  import { tooltip } from '@hcengineering/ui'
+  import { openDoc } from '@hcengineering/view-resources'
 
   export let value: Person | Person[]
   export let inline: boolean = false
 
   let persons: Person[] = []
   $: persons = Array.isArray(value) ? value : [value]
+  const hierarchy = getClient().getHierarchy()
 
   async function onClick (p: Person) {
-    showPanel(view.component.EditDoc, p._id, Hierarchy.mixinOrClass(p), 'content')
+    openDoc(hierarchy, p)
   }
   const client = getClient()
 </script>

plugins/tracker-resources/src/components/issues/Issues.svelte

@@ -13,12 +13,12 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte'
   import { DocumentQuery, Ref } from '@hcengineering/core'
-  import { Issue, Project } from '@hcengineering/tracker'
   import { IntlString } from '@hcengineering/platform'
   import { createQuery } from '@hcengineering/presentation'
+  import { Issue, Project } from '@hcengineering/tracker'
   import { resolvedLocationStore } from '@hcengineering/ui'
+  import { createEventDispatcher } from 'svelte'
 
   import { IModeSelector } from '@hcengineering/ui'
   import tracker from '../../plugin'
@@ -87,7 +87,5 @@
 </script>
 
 {#if query !== undefined && modeSelectorProps !== undefined}
-  {#key query && currentSpace}
-    <IssuesView {query} space={currentSpace} {title} {modeSelectorProps} />
-  {/key}
+  <IssuesView {query} space={currentSpace} {title} {modeSelectorProps} />
 {/if}

plugins/tracker-resources/src/components/issues/KanbanView.svelte

@@ -29,7 +29,7 @@
   import { Item, Kanban } from '@hcengineering/kanban'
   import notification from '@hcengineering/notification'
   import { getResource } from '@hcengineering/platform'
-  import { createQuery, getClient, ActionContext } from '@hcengineering/presentation'
+  import { ActionContext, createQuery, getClient } from '@hcengineering/presentation'
   import tags from '@hcengineering/tags'
   import { Issue, IssuesGrouping, IssuesOrdering, Project } from '@hcengineering/tracker'
   import {
@@ -41,7 +41,6 @@
     IconAdd,
     Label,
     Loading,
-    showPanel,
     showPopup,
     themeStore
   } from '@hcengineering/ui'
@@ -65,6 +64,7 @@
     ListSelectionProvider,
     Menu,
     noCategory,
+    openDoc,
     SelectDirection,
     selectionStore,
     setGroupByValues
@@ -348,7 +348,7 @@
         <div
           class="tracker-card"
           on:click={() => {
-            showPanel(tracker.component.EditIssue, object._id, object._class, 'content')
+            openDoc(hierarchy, issue)
           }}
         >
           <div class="card-header flex-between">

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

@@ -20,9 +20,9 @@
     Button,
     ButtonKind,
     ButtonSize,
-    closeTooltip,
     ProgressCircle,
     SelectPopup,
+    closeTooltip,
     showPanel,
     showPopup
   } from '@hcengineering/ui'

plugins/tracker-resources/src/components/myissues/MyIssues.svelte

@@ -13,13 +13,13 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte'
   import type { PersonAccount } from '@hcengineering/contact'
   import { Doc, DocumentQuery, getCurrentAccount, Ref } from '@hcengineering/core'
   import type { IntlString } from '@hcengineering/platform'
   import { createQuery } from '@hcengineering/presentation'
   import type { Issue, Project } from '@hcengineering/tracker'
   import { resolvedLocationStore } from '@hcengineering/ui'
+  import { createEventDispatcher } from 'svelte'
 
   import { IModeSelector } from '@hcengineering/ui'
   import tracker from '../../plugin'
@@ -81,7 +81,5 @@
 </script>
 
 {#if query !== undefined && modeSelectorProps !== undefined}
-  {#key query}
-    <IssuesView {query} space={undefined} title={tracker.string.MyIssues} {modeSelectorProps} />
-  {/key}
+  <IssuesView {query} space={undefined} title={tracker.string.MyIssues} {modeSelectorProps} />
 {/if}

plugins/view-resources/src/components/DocNavLink.svelte

@@ -44,7 +44,9 @@
       href = undefined
       return
     }
-    const loc = await getObjectLinkFragment(hierarchy, object, props, component)
+    const panelComponent = hierarchy.classHierarchyMixin(object._class, view.mixin.ObjectPanel)
+    const comp = panelComponent?.component ?? component
+    const loc = await getObjectLinkFragment(hierarchy, object, props, comp)
     href = `${window.location.origin}${locationToUrl(loc)}`
   }
 

plugins/view-resources/src/utils.ts

@@ -46,7 +46,8 @@ import {
   getCurrentResolvedLocation,
   getPanelURI,
   getPlatformColorForText,
-  locationToUrl
+  locationToUrl,
+  navigate
 } from '@hcengineering/ui'
 import type { BuildModelOptions, Viewlet, ViewletDescriptor } from '@hcengineering/view'
 import view, { AttributeModel, BuildModelKey } from '@hcengineering/view'
@@ -876,3 +877,10 @@ export function enabledConfig (config: Array<string | BuildModelKey>, key: strin
   }
   return false
 }
+
+export async function openDoc (hierarchy: Hierarchy, object: Doc): Promise<void> {
+  const panelComponent = hierarchy.classHierarchyMixin(object._class, view.mixin.ObjectPanel)
+  const comp = panelComponent?.component ?? view.component.EditDoc
+  const loc = await getObjectLinkFragment(hierarchy, object, {}, comp)
+  navigate(loc)
+}