Tracker: Add "Parent Issue" control to the "Edit Issue" dialog (#1857)

Signed-off-by: Sergei Ogorelkov <sergei.ogorelkov@xored.com>

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

@@ -28,7 +28,8 @@
     IconUpOutline,
     Label,
     Scroller,
-    showPopup
+    showPopup,
+    Spinner
   } from '@anticrm/ui'
   import { ContextMenu } from '@anticrm/view-resources'
   import { StyledTextArea } from '@anticrm/text-editor'
@@ -36,6 +37,7 @@
   import tracker from '../../../plugin'
   import ControlPanel from './ControlPanel.svelte'
   import CopyToClipboard from './CopyToClipboard.svelte'
+  import SubIssueSelector from './SubIssueSelector.svelte'
 
   export let _id: Ref<Issue>
   export let _class: Ref<Class<Issue>>
@@ -55,11 +57,16 @@
 
   $: _id &&
     _class &&
-    query.query(_class, { _id }, async (result) => {
-      ;[issue] = result
-      title = issue.title
-      description = issue.description
-    })
+    query.query(
+      _class,
+      { _id },
+      async (result) => {
+        ;[issue] = result
+        title = issue.title
+        description = issue.description
+      },
+      { lookup: { parentIssue: _class } }
+    )
 
   $: if (issue) {
     client.findOne(tracker.class.Team, { _id: issue.space }).then((r) => (currentTeam = r))
@@ -177,6 +184,15 @@
     {#if isEditing}
       <Scroller>
         <div class="popupPanel-body__main-content py-10 clear-mins content">
+          {#if issue?.parentIssue}
+            <div class="mb-6">
+              {#if currentTeam && issueStatuses}
+                <SubIssueSelector {issue} {issueStatuses} team={currentTeam} />
+              {:else}
+                <Spinner />
+              {/if}
+            </div>
+          {/if}
           <EditBox
             bind:value={title}
             maxWidth="53.75rem"
@@ -184,11 +200,26 @@
             kind="large-style"
           />
           <div class="mt-6">
-            <StyledTextArea bind:content={description} placeholder={tracker.string.IssueDescriptionPlaceholder} focus />
+            {#key description}
+              <StyledTextArea
+                bind:content={description}
+                placeholder={tracker.string.IssueDescriptionPlaceholder}
+                focus
+              />
+            {/key}
           </div>
         </div>
       </Scroller>
     {:else}
+      {#if issue?.parentIssue}
+        <div class="mb-6">
+          {#if currentTeam && issueStatuses}
+            <SubIssueSelector {issue} {issueStatuses} team={currentTeam} />
+          {:else}
+            <Spinner />
+          {/if}
+        </div>
+      {/if}
       <span class="title">{title}</span>
       <div class="mt-6 description-preview">
         {#if isDescriptionEmpty}
@@ -196,7 +227,7 @@
             <Label label={tracker.string.IssueDescriptionPlaceholder} />
           </div>
         {:else}
-          <MessageViewer message={issue.description} />
+          <MessageViewer message={description} />
         {/if}
       </div>
     {/if}
@@ -229,10 +260,7 @@
   }
 
   .description-preview {
-    line-height: 150%;
     color: var(--theme-content-color);
-    overflow: hidden;
-    word-wrap: break-word;
 
     .placeholder {
       color: var(--theme-content-trans-color);

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

@@ -0,0 +1,167 @@
+<!-- 
+// Copyright © 2022 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 { Ref, SortingOrder, WithLookup } from '@anticrm/core'
+  import { createQuery } from '@anticrm/presentation'
+  import { Team, Issue, IssueStatus } from '@anticrm/tracker'
+  import { Icon, Tooltip, showPanel, IconForward, IconDetails, showPopup, SelectPopup, closeTooltip } from '@anticrm/ui'
+  import tracker from '../../../plugin'
+
+  export let issue: WithLookup<Issue>
+  export let team: Team
+  export let issueStatuses: WithLookup<IssueStatus>[]
+
+  const subIssuesQeury = createQuery()
+
+  let subIssues: Issue[] | undefined
+  let subIssuesElement: Element
+
+  function getIssueStatusIcon (issue: Issue) {
+    return issueStatuses.find((s) => issue.status === s._id)?.$lookup?.category?.icon ?? null
+  }
+
+  function getIssueId (issue: Issue) {
+    return `${team.identifier}-${issue.number}`
+  }
+
+  function openIssue (target: Ref<Issue>) {
+    if (target !== issue._id) {
+      showPanel(tracker.component.EditIssue, target, issue._class, 'content')
+    }
+  }
+
+  function openParentIssue () {
+    if (issue.parentIssue) {
+      closeTooltip()
+      openIssue(issue.parentIssue)
+    }
+  }
+
+  function showSubIssues () {
+    if (subIssues) {
+      closeTooltip()
+      showPopup(
+        SelectPopup,
+        {
+          value: subIssues.map((iss) => ({
+            id: iss._id,
+            icon: getIssueStatusIcon(iss),
+            text: `${getIssueId(iss)} ${iss.title}`,
+            isSelected: iss._id === issue._id
+          })),
+          width: 'large'
+        },
+        {
+          getBoundingClientRect: () => {
+            const rect = subIssuesElement.getBoundingClientRect()
+            const offsetX = 5
+            const offsetY = -1
+
+            return DOMRect.fromRect({ width: 1, height: 1, x: rect.right + offsetX, y: rect.top + offsetY })
+          }
+        },
+        (selectedIssue) => selectedIssue !== undefined && openIssue(selectedIssue)
+      )
+    }
+  }
+
+  $: subIssuesQeury.query(
+    tracker.class.Issue,
+    { space: issue.space, parentIssue: issue.parentIssue },
+    (res) => (subIssues = res),
+    { sort: { modifiedOn: SortingOrder.Descending } }
+  )
+  $: parentIssue = issue.$lookup?.parentIssue ?? null
+</script>
+
+<div class="flex root">
+  <div class="clear-mins parent-issue item">
+    {#if parentIssue}
+      <Tooltip label={tracker.string.OpenParent} direction="bottom" fill>
+        {@const icon = getIssueStatusIcon(issue)}
+        <div class="flex-center" on:click={openParentIssue}>
+          {#if icon}
+            <div class="pr-2">
+              <Icon {icon} size="small" />
+            </div>
+          {/if}
+          <span class="overflow-label flex-no-shrink mr-2">{getIssueId(parentIssue)}</span>
+          <span class="overflow-label issue-title">{parentIssue.title}</span>
+        </div>
+      </Tooltip>
+    {/if}
+  </div>
+
+  <Tooltip label={tracker.string.OpenSub} direction="bottom">
+    <div bind:this={subIssuesElement} class="flex-center sub-issues item" on:click|preventDefault={showSubIssues}>
+      {#if subIssues?.length !== undefined}
+        <span class="overflow-label">{subIssues.length}</span>
+      {/if}
+      <div class="ml-2">
+        <!-- TODO: fix icon -->
+        <Icon icon={IconDetails} size="small" />
+      </div>
+      <div class="ml-1-5">
+        <Icon icon={IconForward} size="small" />
+      </div>
+    </div>
+  </Tooltip>
+</div>
+
+<style lang="scss">
+  .root {
+    max-width: fit-content;
+    line-height: 150%;
+    border: 1px solid var(--button-border-color);
+    border-radius: 0.25rem;
+    box-shadow: var(--primary-shadow);
+
+    .item {
+      padding: 0.375rem 0.75rem;
+    }
+  }
+
+  .parent-issue {
+    border-right: 1px solid var(--button-border-color);
+
+    .issue-title {
+      color: var(--theme-content-accent-color);
+      transition: color 0.15s;
+    }
+
+    &:hover {
+      .issue-title {
+        color: var(--theme-caption-color);
+      }
+    }
+    &:active {
+      .issue-title {
+        color: var(--theme-content-accent-color);
+      }
+    }
+  }
+
+  .sub-issues {
+    color: var(--theme-content-color);
+    transition: color 0.15s;
+
+    &:hover {
+      color: var(--theme-caption-color);
+    }
+    &:active {
+      color: var(--theme-content-accent-color);
+    }
+  }
+</style>