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

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

packages/theme/styles/popups.scss

@@ -36,6 +36,9 @@
     max-width: 40rem !important;
     width: 40rem !important;
   }
+  &.max-width-40 {
+    max-width: 40rem !important;
+  }
   .header {
     border-bottom: 1px solid var(--popup-divider);
 

packages/ui/src/components/SelectPopup.svelte

@@ -16,12 +16,13 @@
   import type { Asset, IntlString } from '@anticrm/platform'
   import { translate } from '@anticrm/platform'
   import { createEventDispatcher } from 'svelte'
-  import { Icon, Label } from '..'
+  import { Icon, Label, IconCheck } from '..'
 
   export let placeholder: IntlString | undefined = undefined
   export let placeholderParam: any | undefined = undefined
   export let searchable: boolean = false
-  export let value: Array<{ id: number | string; icon: Asset; label?: IntlString; text?: string }>
+  export let value: Array<{ id: number | string; icon: Asset; label?: IntlString; text?: string; isSelected?: boolean }>
+  export let width: 'medium' | 'large' = 'medium'
 
   let search: string = ''
 
@@ -33,9 +34,11 @@
   }
 
   const dispatch = createEventDispatcher()
+
+  $: hasSelected = value.some((v) => v.isSelected)
 </script>
 
-<div class="selectPopup">
+<div class="selectPopup" class:max-width-40={width === 'large'}>
   {#if searchable}
     <div class="header">
       <input type="text" bind:value={search} placeholder={phTraslate} on:input={(ev) => {}} on:change />
@@ -50,6 +53,13 @@
             dispatch('close', item.id)
           }}
         >
+          {#if hasSelected}
+            <div class="icon">
+              {#if item.isSelected}
+                <Icon icon={IconCheck} size={'small'} />
+              {/if}
+            </div>
+          {/if}
           <div class="icon"><Icon icon={item.icon} size={'small'} /></div>
           <span class="label">
             {#if item.label}

packages/ui/src/components/Tooltip.svelte

@@ -14,6 +14,7 @@
 -->
 <script lang="ts">
   import type { IntlString } from '@anticrm/platform'
+  import { onDestroy } from 'svelte'
   import type { TooltipAlignment, AnySvelteComponent, AnyComponent } from '..'
   import { tooltipstore as tooltip, showTooltip } from '..'
 
@@ -30,6 +31,8 @@
   $: shown = !!($tooltip.label || $tooltip.component)
 
   let toHandler: number = -1
+
+  onDestroy(() => clearTimeout(toHandler))
 </script>
 
 <div

plugins/tracker-assets/lang/en.json

@@ -67,7 +67,9 @@
     "Parent": "Parent issue",
     "SetParent": "Set parent issue\u2026",
     "ChangeParent": "Change parent issue\u2026",
-    "RemoveParent": "Remove parent issue\u2026",
+    "RemoveParent": "Remove parent issue",
+    "OpenParent": "Open parent issue",
+    "OpenSub": "Open sub-issues",
     "BlockedBy": "",
     "RelatedTo": "",
     "Comments": "",

plugins/tracker-resources/src/components/issues/ParentIssue.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
   import { createQuery } from '@anticrm/presentation'
   import { Team, Issue } from '@anticrm/tracker'
-  import { Spinner, IconClose } from '@anticrm/ui'
+  import { Spinner, IconClose, Tooltip } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import tracker from '../../plugin'
 
@@ -37,9 +37,11 @@
     <Spinner size="small" />
   {/if}
   <span class="overflow-label issue-title">{issue.title}</span>
-  <div class="button-close" on:click={() => dispatch('close')}>
+  <Tooltip label={tracker.string.RemoveParent} direction="bottom">
-    <IconClose size="x-small" />
+    <div class="button-close" on:click={() => dispatch('close')}>
-  </div>
+      <IconClose size="x-small" />
+    </div>
+  </Tooltip>
 </div>
 
 <style lang="scss">
@@ -48,18 +50,22 @@
     line-height: 150%;
     max-width: fit-content;
     border: 1px solid var(--button-border-color);
+    border-radius: 0.25rem;
+    box-shadow: var(--primary-shadow);
   }
 
   .issue-title {
     margin: 0 0.75rem 0 0.5rem;
     padding-right: 0.75rem;
-    color: var(--theme-caption-color);
+    color: var(--theme-content-accent-color);
     border-right: 1px solid var(--button-border-color);
   }
 
   .button-close {
     cursor: pointer;
     position: relative;
+    color: var(--content-color);
+    transition: color 0.15s;
 
     &:hover {
       color: var(--theme-caption-color);

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) => {
+    query.query(
-      ;[issue] = result
+      _class,
-      title = issue.title
+      { _id },
-      description = issue.description
+      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>

plugins/tracker-resources/src/plugin.ts

@@ -90,6 +90,8 @@ export default mergeIds(trackerId, tracker, {
     SetParent: '' as IntlString,
     ChangeParent: '' as IntlString,
     RemoveParent: '' as IntlString,
+    OpenParent: '' as IntlString,
+    OpenSub: '' as IntlString,
     BlockedBy: '' as IntlString,
     RelatedTo: '' as IntlString,
     Comments: '' as IntlString,