use new status icons for related issues (#3150)

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

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

@@ -0,0 +1,38 @@
+<!-- 
+// Copyright © 2023 Hardcore Engineering Inc.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import { Issue, Project } from '@hcengineering/tracker'
+  import { statusStore } from '@hcengineering/presentation'
+
+  import IssueStatusIcon from '../IssueStatusIcon.svelte'
+  import { getIssueId } from '../../../issues'
+
+  export let project: Project | undefined
+  export let issue: Issue
+  export let size: 'small' | 'medium' | 'large' = 'small'
+
+  $: status = $statusStore.byId.get(issue.status)
+  $: huge = size === 'medium' || size === 'large'
+  $: text = project ? `${getIssueId(project, issue)} ${issue.title}` : issue.title
+</script>
+
+{#if status}
+  <div class="icon mr-2">
+    <IssueStatusIcon value={status} {size} />
+  </div>
+{/if}
+<span class="label" class:text-base={huge}>
+  <span>{text}</span>
+</span>

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

@@ -15,22 +15,21 @@
 <script lang="ts">
   import { Doc, Ref, SortingOrder, WithLookup } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
-  import { Issue, IssueStatus, Project } from '@hcengineering/tracker'
+  import { Issue, Project } from '@hcengineering/tracker'
   import {
     Button,
     ButtonKind,
     ButtonSize,
     closeTooltip,
-    getPlatformColor,
     ProgressCircle,
     SelectPopup,
     showPanel,
     showPopup
   } from '@hcengineering/ui'
-  import { getIssueId } from '../../../issues'
   import tracker from '../../../plugin'
   import { subIssueListProvider } from '../../../utils'
   import { statusStore } from '@hcengineering/presentation'
+  import RelatedIssuePresenter from './RelatedIssuePresenter.svelte'
 
   export let object: WithLookup<Doc & { related: number }> | undefined
   export let value: WithLookup<Doc & { related: number }> | undefined
@@ -77,17 +76,6 @@
   }
   $: hasSubIssues = (subIssues?.length ?? 0) > 0
 
-  function getIssueStatusIcon (issue: Issue, statuses: Map<Ref<WithLookup<IssueStatus>>, WithLookup<IssueStatus>>) {
-    const status = statuses?.get(issue.status)
-    const category = status?.$lookup?.category
-    const color = status?.color ?? category?.color
-
-    return {
-      ...(category?.icon !== undefined ? { icon: category.icon } : {}),
-      ...(color !== undefined ? { iconColor: getPlatformColor(color) } : {})
-    }
-  }
-
   function openIssue (target: Ref<Issue>) {
     subIssueListProvider(subIssues, target)
     showPanel(tracker.component.EditIssue, target, tracker.class.Issue, 'content')
@@ -100,9 +88,12 @@
         SelectPopup,
         {
           value: subIssues.map((iss) => {
-            const text = currentProject ? `${getIssueId(currentProject, iss)} ${iss.title}` : iss.title
-
-            return { id: iss._id, text, isSelected: false, ...getIssueStatusIcon(iss, $statusStore.byId) }
+            return {
+              id: iss._id,
+              isSelected: false,
+              component: RelatedIssuePresenter,
+              props: { project: currentProject, issue: iss }
+            }
           }),
           width: 'large'
         },