Add open parent issue button for a sub-issue edit panel (#2304)

* add open parent issue button for a sub-issue edit panel

Signed-off-by: Ruslan Bayandinov <wazsone@ya.ru>

* simplify getting reactive var value

Signed-off-by: Ruslan Bayandinov <wazsone@ya.ru>

* make UpDownNavigator more universal

Signed-off-by: Ruslan Bayandinov <wazsone@ya.ru>

Signed-off-by: Ruslan Bayandinov <wazsone@ya.ru>

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

@@ -108,6 +108,7 @@
   $: issueId = currentTeam && issue && getIssueId(currentTeam, issue)
   $: canSave = title.trim().length > 0
   $: isDescriptionEmpty = !new DOMParser().parseFromString(description, 'text/html').documentElement.innerText?.trim()
+  $: parentIssue = issue?.$lookup?.attachedTo
 
   function edit (ev: MouseEvent) {
     ev.preventDefault()
@@ -180,9 +181,8 @@
     bind:innerWidth
     on:close={() => dispatch('close')}
   >
-    {@const { attachedTo: parentIssue } = issue?.$lookup ?? {}}
     <svelte:fragment slot="navigator">
-      <UpDownNavigator element={issue} />
+      <UpDownNavigator element={issue} showBackButton={!!parentIssue} />
     </svelte:fragment>
     <svelte:fragment slot="header">
       <span class="fs-title">

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

@@ -1,11 +1,21 @@
 <script lang="ts">
   import { Doc } from '@hcengineering/core'
-  import { Button, IconDownOutline, IconUpOutline, panelstore, showPanel } from '@hcengineering/ui'
+  import {
+    Button,
+    IconNavPrev,
+    IconDownOutline,
+    IconUpOutline,
+    panelstore,
+    showPanel,
+    closeTooltip
+  } from '@hcengineering/ui'
   import { tick } from 'svelte'
   import { select } from '../actionImpl'
   import { focusStore } from '../selection'
+  import tracker from '../../../tracker-resources/src/plugin'
 
   export let element: Doc
+  export let showBackButton: boolean = false
 
   async function next (evt: Event, pn: boolean): Promise<void> {
     select(evt, pn ? 1 : -1, element, 'vertical')
@@ -21,8 +31,25 @@
     }
   }
 
+  function goBack () {
+    if (showBackButton) {
+      closeTooltip()
+      history.back()
+    }
+  }
+
   $: select(undefined, 0, element, 'vertical')
 </script>
 
 <Button icon={IconDownOutline} kind={'secondary'} size={'medium'} on:click={(evt) => next(evt, true)} />
 <Button icon={IconUpOutline} kind={'secondary'} size={'medium'} on:click={(evt) => next(evt, false)} />
+
+{#if showBackButton}
+  <Button
+    showTooltip={{ label: tracker.string.Back, direction: 'bottom' }}
+    icon={IconNavPrev}
+    kind={'secondary'}
+    size={'medium'}
+    on:click={goBack}
+  />
+{/if}