UBERF-8607: Fix inbox embedding (#7236)

+ Few minor cleanups

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

dev/docker-compose.yaml

@@ -406,7 +406,7 @@ services:
     restart: unless-stopped
     links:
       - elastic
-      - postgres    
+      - cockroach    
     ports:
       - 4702:4702
     environment:

packages/ui/src/components/PanelInstance.svelte

@@ -14,13 +14,13 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { getResource } from '@hcengineering/platform'
+  import { getResourceC } from '@hcengineering/platform'
   import { afterUpdate, onMount } from 'svelte'
 
+  import { deviceOptionsStore as deviceInfo, resizeObserver } from '..'
   import { closePanel, PanelProps, panelstore } from '../panelup'
   import { fitPopupElement, popupstore } from '../popups'
-  import { deviceOptionsStore as deviceInfo, resizeObserver } from '..'
-  import type { AnySvelteComponent, PopupOptions, DeviceOptions } from '../types'
+  import type { AnySvelteComponent, DeviceOptions, PopupOptions } from '../types'
   import Spinner from './Spinner.svelte'
 
   export let contentPanel: HTMLElement | undefined
@@ -51,7 +51,7 @@
   let keepSize: boolean = false
 
   let props: PanelProps | undefined
-  function _close () {
+  function _close (): void {
     closePanel()
   }
 
@@ -59,7 +59,7 @@
     if ($panelstore.panel.component === undefined) {
       props = $panelstore.panel
     } else {
-      getResource($panelstore.panel.component).then((r) => {
+      getResourceC($panelstore.panel.component, (r) => {
         component = r
         props = $panelstore.panel
       })
@@ -69,14 +69,14 @@
     props = undefined
   }
 
-  function escapeClose () {
+  function escapeClose (): void {
     // Check if there is popup visible, then ignore
     if ($popupstore.length > 0) {
       return
     }
 
-    if (componentInstance?.canClose) {
-      if (!componentInstance.canClose()) {
+    if (componentInstance?.canClose !== undefined) {
+      if (!(componentInstance as { canClose: () => boolean }).canClose()) {
         return
       }
     }
@@ -84,20 +84,20 @@
   }
 
   const fitPopup = (props: PanelProps, contentPanel: HTMLElement): void => {
-    if (modalHTML) {
+    if (modalHTML != null) {
       const device: DeviceOptions = $deviceInfo
       options = fitPopupElement(modalHTML, device, props.element, contentPanel)
     }
   }
 
-  function handleKeydown (ev: KeyboardEvent) {
+  function handleKeydown (ev: KeyboardEvent): void {
     if (ev.key === 'Escape') {
       escapeClose()
     }
   }
 
   function _open (): void {
-    if (modalHTML && props) {
+    if (modalHTML != null && props != null) {
       if (props.element === 'content') {
         modalHTML.classList.add('bg')
       } else {
@@ -107,28 +107,28 @@
   }
 
   const _update = (): void => {
-    if (props && contentPanel) {
+    if (props != null && contentPanel != null) {
       fitPopup(props, contentPanel)
     }
   }
 
-  const checkResize = (el: Element) => {
-    if (props && contentPanel) fitPopup(props, contentPanel)
+  const checkResize = (): void => {
+    if (props != null && contentPanel != null) fitPopup(props, contentPanel)
   }
 
   onMount(() => {
-    if (props && contentPanel) fitPopup(props, contentPanel)
+    if (props != null && contentPanel != null) fitPopup(props, contentPanel)
   })
 
   afterUpdate(() => {
-    if (props && contentPanel) fitPopup(props, contentPanel)
+    if (props != null && contentPanel != null) fitPopup(props, contentPanel)
   })
 
   $: if (contentPanel !== oldPanel) {
     oldPanel = contentPanel
     keepSize = false
   }
-  $: if (props && contentPanel !== undefined) {
+  $: if (props != null && contentPanel !== undefined) {
     fitPopup(props, contentPanel)
     if (!keepSize && props?.element === 'content') {
       keepSize = true
@@ -138,26 +138,26 @@
   }
 
   export function fitPopupInstance (): void {
-    if (props && contentPanel) fitPopup(props, contentPanel)
+    if (props != null && contentPanel != null) fitPopup(props, contentPanel)
   }
 </script>
 
 <svelte:window
   on:resize={() => {
-    if (props && contentPanel) fitPopup(props, contentPanel)
+    if (props != null && contentPanel != null) fitPopup(props, contentPanel)
   }}
   on:keydown={(evt) => {
-    if (props) handleKeydown(evt)
+    if (props != null) handleKeydown(evt)
   }}
   on:beforeprint={() => {
-    if (props && contentPanel) fitPopup(props, contentPanel)
+    if (props != null && contentPanel != null) fitPopup(props, contentPanel)
   }}
   on:afterprint={() => {
-    if (props && contentPanel) fitPopup(props, contentPanel)
+    if (props != null && contentPanel != null) fitPopup(props, contentPanel)
   }}
 />
 {#if props}
-  {#if !component}
+  {#if !(component != null)}
     <Spinner />
   {:else}
     <slot name="panel-header" />

packages/ui/src/panelup.ts

@@ -11,7 +11,9 @@ export interface PanelProps {
   refit?: () => void
 }
 
-export const panelstore = writable<{ panel?: PanelProps | undefined }>({ panel: undefined })
+export const panelstore = writable<{
+  panel?: PanelProps | undefined
+}>({ panel: undefined })
 let currentLocation: string | undefined
 
 export function getPanelURI (component: AnyComponent, _id: string, _class: string, element?: PopupAlignment): string {
@@ -27,17 +29,18 @@ export function showPanel (
   _id: string,
   _class: string,
   element?: PopupAlignment,
-  rightSection?: AnyComponent
+  rightSection?: AnyComponent,
+  doNavigate: boolean = true
 ): void {
   openPanel(component, _id, _class, element, rightSection)
   const loc = getLocation()
-  if (loc.fragment !== currentLocation) {
+  if (doNavigate && loc.fragment !== currentLocation) {
     loc.fragment = currentLocation
     navigate(loc)
   }
 }
 
-export function openPanel (
+function openPanel (
   component: AnyComponent,
   _id: string,
   _class: string,

plugins/guest-resources/src/components/Guest.svelte

@@ -33,7 +33,7 @@
     getCurrentLocation,
     getLocation,
     navigate,
-    openPanel,
+    showPanel,
     defineSeparators,
     setResolvedLocation,
     deviceOptionsStore as deviceInfo
@@ -207,12 +207,13 @@
           provider,
           focus: doc
         })
-        openPanel(
+        showPanel(
           props[0] as AnyComponent,
           _id,
           _class,
           (props[3] ?? undefined) as PopupAlignment,
-          (props[4] ?? undefined) as AnyComponent
+          (props[4] ?? undefined) as AnyComponent,
+          false
         )
       } else {
         closePanel(false)

plugins/notification-resources/src/components/inbox/Inbox.svelte

@@ -452,6 +452,7 @@
             ? urlObjectClass ?? selectedContext.objectClass
             : selectedContext.objectClass,
           autofocus: false,
+          embedded: true,
           context: selectedContext,
           activityMessage: selectedMessage,
           props: { context: selectedContext, autofocus: false }

plugins/tracker-resources/src/components/inbox/Inbox.svelte

@@ -1 +0,0 @@
-Some inbox stuff here.

plugins/tracker-resources/src/index.ts

@@ -51,7 +51,6 @@ import ProjectComponents from './components/components/ProjectComponents.svelte'
 import CreateIssue from './components/CreateIssue.svelte'
 import EditRelatedTargets from './components/EditRelatedTargets.svelte'
 import EditRelatedTargetsPopup from './components/EditRelatedTargetsPopup.svelte'
-import Inbox from './components/inbox/Inbox.svelte'
 import AssigneeEditor from './components/issues/AssigneeEditor.svelte'
 import DueDatePresenter from './components/issues/DueDatePresenter.svelte'
 import EditIssue from './components/issues/edit/EditIssue.svelte'
@@ -582,7 +581,6 @@ export default async (): Promise<Resources> => ({
   component: {
     NopeComponent,
     Issues,
-    Inbox,
     MyIssues,
     Components,
     IssuePresenter,

plugins/tracker-resources/src/plugin.ts

@@ -305,7 +305,6 @@ export default mergeIds(trackerId, tracker, {
   },
   component: {
     NopeComponent: '' as AnyComponent,
-    Inbox: '' as AnyComponent,
     MyIssues: '' as AnyComponent,
     Views: '' as AnyComponent,
     Issues: '' as AnyComponent,

plugins/workbench-resources/src/components/Workbench.svelte

@@ -63,7 +63,7 @@
     locationToUrl,
     mainSeparators,
     navigate,
-    openPanel,
+    showPanel,
     PanelInstance,
     Popup,
     PopupAlignment,
@@ -401,7 +401,6 @@
         const prevTabLoc = prevTab ? getTabLocation(prevTab) : undefined
         if (prevTabLoc === undefined || prevTabLoc.path[2] !== loc.path[2]) {
           clear(1)
-          clear(2)
         }
       }
       prevTabIdStore.set($tabIdStore)
@@ -529,12 +528,13 @@
           provider,
           focus: doc
         })
-        openPanel(
+        showPanel(
           props[0] as AnyComponent,
           _id,
           _class,
           (props[3] ?? undefined) as PopupAlignment,
-          (props[4] ?? undefined) as AnyComponent
+          (props[4] ?? undefined) as AnyComponent,
+          false
         )
       } else {
         accessDeniedStore.set(true)