From 5642e6823eddaa60db9310300a206ecd356909ea Mon Sep 17 00:00:00 2001
From: Denis Bykhov <80476319+BykhovDenis@users.noreply.github.com>
Date: Mon, 26 Sep 2022 15:40:13 +0600
Subject: [PATCH] Open issue by name click (#2279)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
---
 .../issues/ParentNamesPresenter.svelte        | 24 +++++++++++++++++--
 .../components/issues/TitlePresenter.svelte   | 18 +++++++++++++-
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/plugins/tracker-resources/src/components/issues/ParentNamesPresenter.svelte b/plugins/tracker-resources/src/components/issues/ParentNamesPresenter.svelte
index 0d9441b4ba..b634df1013 100644
--- a/plugins/tracker-resources/src/components/issues/ParentNamesPresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/ParentNamesPresenter.svelte
@@ -13,18 +13,27 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import type { Issue } from '@hcengineering/tracker'
+  import type { Issue, IssueParentInfo } from '@hcengineering/tracker'
+  import { showPanel } from '@hcengineering/ui'
+  import tracker from '../../plugin'
 
   export let value: Issue | undefined
 
   export let maxWidth = ''
+
+  function handleIssueEditorOpened (parent: IssueParentInfo) {
+    if (value === undefined) return
+    showPanel(tracker.component.EditIssue, parent.parentId, value._class, 'content')
+  }
 </script>
 
 {#if value}
   <div class="root" style:max-width={maxWidth}>
     <span class="names">
       {#each value.parents as parentInfo}
-        <span class="name">{parentInfo.parentTitle}</span>
+        <span class="name cursor-pointer" on:click={() => handleIssueEditorOpened(parentInfo)}
+          >{parentInfo.parentTitle}</span
+        >
       {/each}
     </span>
   </div>
@@ -42,6 +51,17 @@
       color: var(--content-color);
     }
 
+    .name {
+      &:hover {
+        color: var(--caption-color);
+        text-decoration: underline;
+      }
+
+      &:active {
+        color: var(--accent-color);
+      }
+    }
+
     .name::before {
       content: '›';
       padding: 0 0.25rem;
diff --git a/plugins/tracker-resources/src/components/issues/TitlePresenter.svelte b/plugins/tracker-resources/src/components/issues/TitlePresenter.svelte
index 3eca287cfe..4066ce1e13 100644
--- a/plugins/tracker-resources/src/components/issues/TitlePresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/TitlePresenter.svelte
@@ -15,14 +15,20 @@
 <script lang="ts">
   import type { Issue } from '@hcengineering/tracker'
   import ParentNamesPresenter from './ParentNamesPresenter.svelte'
+  import tracker from '../../plugin'
+  import { showPanel } from '@hcengineering/ui'
 
   export let value: Issue
   export let shouldUseMargin: boolean = false
+
+  function handleIssueEditorOpened () {
+    showPanel(tracker.component.EditIssue, value._id, value._class, 'content')
+  }
 </script>
 
 {#if value}
   <span class="root" class:with-margin={shouldUseMargin} title={value.title}>
-    <span class="name">{value.title}</span>
+    <span class="name cursor-pointer" on:click={handleIssueEditorOpened}>{value.title}</span>
     <ParentNamesPresenter {value} />
   </span>
 {/if}
@@ -36,6 +42,16 @@
     overflow: hidden;
     flex-shrink: 10;
 
+    .name {
+      &:hover {
+        text-decoration: underline;
+      }
+
+      &:active {
+        color: var(--accent-color);
+      }
+    }
+
     &.with-margin {
       margin-left: 0.5rem;
     }