Tracker: split "edit issue" dialog to preview / edit (#1731)

2024-11-22 21:50:34 +03:00 · 2022-05-18 11:04:54 +07:00 · 2022-05-18 11:04:54 +07:00 · fb0340eb24
commit fb0340eb24
parent beb009acab
20 changed files with 644 additions and 298 deletions
--- a/models/tracker/src/index.ts
+++ b/models/tracker/src/index.ts
@ -327,6 +327,10 @@ export function createModel (builder: Builder): void {
    presenter: tracker.component.StatusPresenter
  })

+  builder.mixin(tracker.class.Project, core.class.Class, view.mixin.AttributePresenter, {
+    presenter: tracker.component.ProjectTitlePresenter
+  })
+
  builder.createDoc(
    workbench.class.Application,
    core.space.Model,
--- a/packages/text-editor/src/components/StyledTextArea.svelte
+++ b/packages/text-editor/src/components/StyledTextArea.svelte
@ -0,0 +1,84 @@
+<script lang="ts">
+  import { IntlString } from '@anticrm/platform'
+  import { Label } from '@anticrm/ui'
+  import { createEventDispatcher } from 'svelte'
+  import textEditorPlugin from '../plugin'
+  import StyledTextEditor from './StyledTextEditor.svelte'
+
+  export let label: IntlString | undefined = undefined
+  export let content: string
+  export let placeholder: IntlString = textEditorPlugin.string.EditorPlaceholder
+
+  export let showButtons = true
+  export let focus = false
+
+  let rawValue: string
+  let oldContent = ''
+
+  $: if (oldContent !== content) {
+    oldContent = content
+    rawValue = content
+  }
+
+  let textEditor: StyledTextEditor
+
+  export function submit (): void {
+    textEditor.submit()
+  }
+  const dispatch = createEventDispatcher()
+  let focused = false
+
+  let needFocus = focus
+
+  $: if (textEditor && needFocus) {
+    textEditor.focus()
+    needFocus = false
+  }
+</script>
+
+<div
+  class="antiComponent styled-box"
+  on:click={() => {
+    if (focused) {
+      textEditor?.focus()
+    }
+  }}
+>
+  {#if label}
+    <div class="label"><Label {label} /></div>
+  {/if}
+  <StyledTextEditor
+    {placeholder}
+    {showButtons}
+    isScrollable={false}
+    bind:content={rawValue}
+    bind:this={textEditor}
+    on:focus={() => {
+      focused = true
+    }}
+    on:blur={() => {
+      focused = false
+      dispatch('value', rawValue)
+      content = rawValue
+    }}
+    on:value={(evt) => {
+      rawValue = evt.detail
+    }}
+  />
+</div>
+
+<style lang="scss">
+  .styled-box {
+    flex-grow: 1;
+
+    .label {
+      padding-bottom: 0.25rem;
+      font-size: 0.75rem;
+      color: var(--theme-caption-color);
+      opacity: 0.3;
+      transition: top 200ms;
+      pointer-events: none;
+      user-select: none;
+    }
+  }
+</style>
--- a/packages/text-editor/src/components/StyledTextEditor.svelte
+++ b/packages/text-editor/src/components/StyledTextEditor.svelte
@ -28,6 +28,7 @@
  export let content: string = ''
  export let placeholder: IntlString = textEditorPlugin.string.EditorPlaceholder
  export let showButtons = true
+  export let isScrollable = true

  let textEditor: TextEditor

@ -42,7 +43,24 @@
 <div class="ref-container">
  <div class="textInput">
    <div class="inputMsg">
-      <ScrollBox bothScroll stretch>
+      {#if isScrollable}
+        <ScrollBox bothScroll stretch>
+          <TextEditor
+            bind:content
+            {placeholder}
+            bind:this={textEditor}
+            on:value
+            on:content={(ev) => {
+              dispatch('message', ev.detail)
+              content = ''
+              textEditor.clear()
+            }}
+            on:blur
+            on:focus
+            supportSubmit={false}
+          />
+        </ScrollBox>
+      {:else}
        <TextEditor
          bind:content
          {placeholder}
@ -57,7 +75,7 @@
          on:focus
          supportSubmit={false}
        />
-      </ScrollBox>
+      {/if}
    </div>
  </div>
  {#if showButtons}
--- a/packages/text-editor/src/index.ts
+++ b/packages/text-editor/src/index.ts
@ -20,6 +20,7 @@ import { textEditorId } from './plugin'
 export * from '@anticrm/presentation/src/types'
 export { default as ReferenceInput } from './components/ReferenceInput.svelte'
 export { default as StyledTextBox } from './components/StyledTextBox.svelte'
+export { default as StyledTextArea } from './components/StyledTextArea.svelte'
 export { default as StyledTextEditor } from './components/StyledTextEditor.svelte'
 export { default as TextEditor } from './components/TextEditor.svelte'
 export { default } from './plugin'
--- a/plugins/tracker-assets/lang/en.json
+++ b/plugins/tracker-assets/lang/en.json
@ -96,6 +96,7 @@
    "PastMonth": "Past month",
    "CopyIssueUrl": "Copy Issue URL to clipboard",
    "CopyIssueId": "Copy Issue ID to clipboard",
+    "CopyIssueBranch": "Copy Git branch name to clipboard",
    "AssetLabel": "Asset",
    "AddToProject": "Add to project\u2026",
    "MoveToProject": "Move to project\u2026",
@ -113,7 +114,9 @@
    "FilterIs": "is",
    "FilterIsNot": "is not",
    "FilterIsEither": "is either of",
-    "FilterStatesCount": "{value, plural, =1 {1 state} other {# states}}"
+    "FilterStatesCount": "{value, plural, =1 {1 state} other {# states}}",
+
+    "EditIssue": "Edit {title}"
  },
  "status": {}
 }
--- a/plugins/tracker-assets/lang/ru.json
+++ b/plugins/tracker-assets/lang/ru.json
@ -73,7 +73,9 @@
    "GotoBacklog": "Перейти к пулу задач",
    "GotoBoard": "Перейти к канбану",
    "GotoProjects": "Перейти к проекту",
-    "GotoTrackerApplication": "Перейти к приложению Трекер"
+    "GotoTrackerApplication": "Перейти к приложению Трекер",
+
+    "EditIssue": "Редактирование {title}"
  },
  "status": {}
 }
--- a/plugins/tracker-resources/package.json
+++ b/plugins/tracker-resources/package.json
@ -49,6 +49,7 @@
    "@anticrm/view-resources": "~0.6.0",
    "@anticrm/text-editor": "~0.6.0",
    "@anticrm/panel": "~0.6.0",
-    "@anticrm/kanban": "~0.6.0"
+    "@anticrm/kanban": "~0.6.0",
+    "@anticrm/attachment-resources": "~0.6.0"
  }
 }
--- a/plugins/tracker-resources/src/components/issues/AssigneeEditor.svelte
+++ b/plugins/tracker-resources/src/components/issues/AssigneeEditor.svelte
@ -0,0 +1,53 @@
+<!--
+// 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 { Employee } from '@anticrm/contact'
+  import { Ref } from '@anticrm/core'
+  import { getClient, UserBox } from '@anticrm/presentation'
+  import { Issue } from '@anticrm/tracker'
+  import { Tooltip } from '@anticrm/ui'
+  import contact from '@anticrm/contact'
+  import tracker from '../../plugin'
+
+  export let value: Issue
+
+  const client = getClient()
+
+  const handleAssigneeChanged = async (newAssignee: Ref<Employee> | undefined) => {
+    if (newAssignee === undefined || value.assignee === newAssignee) {
+      return
+    }
+
+    await client.update(value, { assignee: newAssignee })
+  }
+</script>
+
+{#if value}
+  <Tooltip label={tracker.string.AssignTo} fill>
+    <UserBox
+      _class={contact.class.Employee}
+      label={tracker.string.Assignee}
+      placeholder={tracker.string.Assignee}
+      value={value.assignee}
+      allowDeselect
+      titleDeselect={tracker.string.Unassigned}
+      size="large"
+      kind="link"
+      width="100%"
+      justify="left"
+      on:change={({ detail }) => handleAssigneeChanged(detail)}
+    />
+  </Tooltip>
+{/if}
--- a/plugins/tracker-resources/src/components/issues/DueDateEditor.svelte
+++ b/plugins/tracker-resources/src/components/issues/DueDateEditor.svelte
@ -0,0 +1,49 @@
+<!--
+// 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 { getClient } from '@anticrm/presentation'
+  import { Issue } from '@anticrm/tracker'
+  import { DatePresenter, getDaysDifference } from '@anticrm/ui'
+  import { getDueDateIconModifier } from '../../utils'
+
+  export let value: Issue
+
+  const client = getClient()
+
+  const handleDueDateChanged = async (newDueDate: number | undefined) => {
+    if (newDueDate === undefined || value.dueDate === newDueDate) {
+      return
+    }
+
+    await client.update(value, { dueDate: newDueDate })
+  }
+
+  $: today = new Date(new Date(Date.now()).setHours(0, 0, 0, 0))
+  $: isOverdue = value.dueDate !== null && value.dueDate < today.getTime()
+  $: dueDate = value.dueDate === null ? null : new Date(value.dueDate)
+  $: daysDifference = dueDate === null ? null : getDaysDifference(today, dueDate)
+  $: iconModifier = getDueDateIconModifier(isOverdue, daysDifference)
+</script>
+
+{#if value}
+  <!-- TODO: fix button style and alignment -->
+  <DatePresenter
+    kind="transparent"
+    value={value.dueDate}
+    icon={iconModifier}
+    editable
+    on:change={({ detail }) => handleDueDateChanged(detail)}
+  />
+{/if}
--- a/plugins/tracker-resources/src/components/issues/DueDatePresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/DueDatePresenter.svelte
@ -19,10 +19,10 @@
  import { getClient } from '@anticrm/presentation'
  import DueDatePopup from './DueDatePopup.svelte'
  import tracker from '../../plugin'
+  import { getDueDateIconModifier } from '../../utils'

  export let value: WithLookup<Issue>

-  const WARNING_DAYS = 7
  const client = getClient()

  $: today = new Date(new Date(Date.now()).setHours(0, 0, 0, 0))
@ -30,7 +30,7 @@
  $: isOverdue = dueDateMs !== null && dueDateMs < today.getTime()
  $: dueDate = dueDateMs === null ? null : new Date(dueDateMs)
  $: daysDifference = dueDate === null ? null : getDaysDifference(today, dueDate)
-  $: iconModifier = getIconModifier(isOverdue, daysDifference)
+  $: iconModifier = getDueDateIconModifier(isOverdue, daysDifference)
  $: formattedDate = !dueDateMs ? '' : new Date(dueDateMs).toLocaleString('default', { month: 'short', day: 'numeric' })

  const handleDueDateChanged = async (event: CustomEvent<Timestamp>) => {
@ -43,20 +43,6 @@
    await client.update(value, { dueDate: newDate })
  }

-  const getIconModifier = (isOverdue: boolean, daysDifference: number | null) => {
-    if (isOverdue) {
-      return 'overdue' as 'overdue' // Fixes `DatePresenter` icon type issue
-    }
-
-    if (daysDifference === 0) {
-      return 'critical' as 'critical'
-    }
-
-    if (daysDifference !== null && daysDifference <= WARNING_DAYS) {
-      return 'warning' as 'warning'
-    }
-  }
-
  $: shouldRenderPresenter =
    dueDateMs &&
    value.$lookup?.status?.category !== tracker.issueStatusCategory.Completed &&
--- a/plugins/tracker-resources/src/components/issues/EditIssue.svelte
+++ b/plugins/tracker-resources/src/components/issues/EditIssue.svelte
@ -1,258 +0,0 @@
-<!--
-// 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 contact from '@anticrm/contact'
-  import { Class, Ref, SortingOrder, WithLookup } from '@anticrm/core'
-  import { Panel } from '@anticrm/panel'
-  import { createQuery, getClient, UserBox } from '@anticrm/presentation'
-  import { StyledTextBox } from '@anticrm/text-editor'
-  import type { Issue, IssueStatus, Team } from '@anticrm/tracker'
-  import {
-    Button,
-    DatePresenter,
-    EditBox,
-    IconDownOutline,
-    IconEdit,
-    IconMoreH,
-    IconUpOutline,
-    Label
-  } from '@anticrm/ui'
-  import { createEventDispatcher, onMount } from 'svelte'
-  import tracker from '../../plugin'
-  import IssuePresenter from './IssuePresenter.svelte'
-  import PriorityEditor from './PriorityEditor.svelte'
-  import ProjectEditor from './ProjectEditor.svelte'
-  import StatusEditor from './StatusEditor.svelte'
-
-  export let _id: Ref<Issue>
-  export let _class: Ref<Class<Issue>>
-
-  const dispatch = createEventDispatcher()
-  const client = getClient()
-  const query = createQuery()
-  const statusesQuery = createQuery()
-
-  let issue: Issue | undefined
-  let currentTeam: Team | undefined
-  let issueStatuses: WithLookup<IssueStatus>[] | undefined
-  let innerWidth: number
-
-  $: _id &&
-    _class &&
-    query.query(_class, { _id }, async (result) => {
-      issue = result[0]
-    })
-
-  $: if (issue !== undefined) {
-    client.findOne(tracker.class.Team, { _id: issue.space }).then((r) => {
-      currentTeam = r
-    })
-  }
-
-  $: currentTeam &&
-    statusesQuery.query(
-      tracker.class.IssueStatus,
-      { attachedTo: currentTeam._id },
-      (statuses) => {
-        issueStatuses = statuses
-      },
-      {
-        lookup: { category: tracker.class.IssueStatusCategory },
-        sort: { rank: SortingOrder.Ascending }
-      }
-    )
-
-  $: issueLabel = currentTeam && issue && `${currentTeam.identifier}-${issue.number}`
-
-  function change (field: string, value: any) {
-    if (issue !== undefined) {
-      client.update(issue, { [field]: value })
-    }
-  }
-
-  function copy (text: string): void {
-    navigator.clipboard.writeText(text)
-  }
-
-  onMount(() => {
-    dispatch('open', { ignoreKeys: ['comments', 'name', 'description', 'number'] })
-  })
-</script>
-
-{#if issue !== undefined}
-  <Panel
-    object={issue}
-    isHeader
-    isAside={true}
-    isSub={false}
-    bind:innerWidth
-    on:close={() => {
-      dispatch('close')
-    }}
-  >
-    <svelte:fragment slot="custom-title">Custom Title</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-      <div class="flex-between flex-grow">
-        {#if currentTeam}
-          <IssuePresenter value={issue} {currentTeam} />
-        {/if}
-        <div class="buttons-group xsmall-gap">
-          <Button icon={IconEdit} kind={'transparent'} size={'medium'} />
-          {#if innerWidth < 900}
-            <Button icon={IconMoreH} kind={'transparent'} size={'medium'} />
-          {/if}
-        </div>
-      </div>
-    </svelte:fragment>
-    <svelte:fragment slot="navigator">
-      <Button icon={IconDownOutline} kind={'secondary'} size={'medium'} />
-      <Button icon={IconUpOutline} kind={'secondary'} size={'medium'} />
-    </svelte:fragment>
-    <svelte:fragment slot="header">
-      <span class="fs-title">{issueLabel}</span>
-    </svelte:fragment>
-    <svelte:fragment slot="tools">
-      <Button icon={IconEdit} kind={'transparent'} size={'medium'} />
-      <Button icon={IconMoreH} kind={'transparent'} size={'medium'} />
-    </svelte:fragment>
-
-    <div class="mt-6">
-      <EditBox
-        label={tracker.string.Title}
-        bind:value={issue.title}
-        placeholder={tracker.string.IssueTitlePlaceholder}
-        maxWidth={'16rem'}
-        focus
-        on:change={() => change('title', issue?.title)}
-      />
-    </div>
-    <div class="mt-6 mb-6">
-      <StyledTextBox
-        alwaysEdit
-        bind:content={issue.description}
-        placeholder={tracker.string.IssueDescriptionPlaceholder}
-        on:value={(evt) => evt.detail !== issue?.description && change('description', evt.detail)}
-      />
-    </div>
-
-    <span slot="actions-label">{issueLabel}</span>
-    <svelte:fragment slot="actions">
-      <Button
-        icon={tracker.icon.Issue}
-        title={tracker.string.CopyIssueUrl}
-        width="min-content"
-        size="small"
-        kind="transparent"
-        on:click={() => copy(window.location.href)}
-      />
-      <Button
-        icon={tracker.icon.Views}
-        title={tracker.string.CopyIssueId}
-        width="min-content"
-        size="small"
-        kind="transparent"
-        on:click={() => issueLabel && copy(issueLabel)}
-      />
-    </svelte:fragment>
-
-    <svelte:fragment slot="custom-attributes" let:direction>
-      {#if issue && currentTeam && issueStatuses && direction === 'column'}
-        <div class="content">
-          <span class="label">
-            <Label label={tracker.string.Status} />
-          </span>
-          <StatusEditor value={issue} statuses={issueStatuses} shouldShowLabel />
-          <span class="label">
-            <Label label={tracker.string.Priority} />
-          </span>
-          <PriorityEditor value={issue} shouldShowLabel />
-          <span class="label">
-            <Label label={tracker.string.Assignee} />
-          </span>
-          <UserBox
-            _class={contact.class.Employee}
-            label={tracker.string.Assignee}
-            placeholder={tracker.string.Assignee}
-            bind:value={issue.assignee}
-            allowDeselect
-            titleDeselect={tracker.string.Unassigned}
-            size={'large'}
-            kind={'link'}
-            width={'100%'}
-            justify={'left'}
-            on:change={() => change('assignee', issue?.assignee)}
-          />
-
-          <span class="label">
-            <Label label={tracker.string.Labels} />
-          </span>
-          <Button
-            label={tracker.string.Labels}
-            icon={tracker.icon.Labels}
-            size={'large'}
-            kind={'link'}
-            width={'100%'}
-            justify={'left'}
-          />
-
-          <div class="divider" />
-
-          <span class="label">
-            <Label label={tracker.string.Project} />
-          </span>
-          <ProjectEditor value={issue} />
-          {#if issue.dueDate !== null}
-            <div class="divider" />
-            <span class="label">
-              <Label label={tracker.string.DueDate} />
-            </span>
-            <DatePresenter bind:value={issue.dueDate} editable on:change={({ detail }) => change('dueDate', detail)} />
-          {/if}
-        </div>
-      {:else}
-        <div class="buttons-group small-gap">
-          <Button
-            label={tracker.string.Labels}
-            icon={tracker.icon.Labels}
-            width="min-content"
-            size="small"
-            kind="no-border"
-          />
-          <ProjectEditor value={issue} size={'small'} kind={'no-border'} width={'min-content'} />
-        </div>
-      {/if}
-    </svelte:fragment>
-  </Panel>
-{/if}
-
-<style lang="scss">
-  .content {
-    display: grid;
-    grid-template-columns: 1fr 1.5fr;
-    grid-auto-flow: row;
-    justify-content: start;
-    align-items: center;
-    gap: 1rem;
-    margin-top: 1rem;
-    width: 100%;
-    height: min-content;
-  }
-
-  .divider {
-    grid-column: 1 / 3;
-    height: 1px;
-    background-color: var(--divider-color);
-  }
-</style>
--- a/plugins/tracker-resources/src/components/issues/IssuePresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuePresenter.svelte
@ -27,13 +27,13 @@

  $: issueName = `${currentTeam.identifier}-${value.number}`

-  const handleIssueEditorOpened = () => {
+  const handleIssuePreviewOpened = () => {
    showPanel(tracker.component.EditIssue, value._id, value._class, 'content')
  }
 </script>

 {#if value && shortLabel}
-  <div class="flex-presenter issuePresenterRoot" class:inline-presenter={inline} on:click={handleIssueEditorOpened}>
+  <div class="flex-presenter issuePresenterRoot" class:inline-presenter={inline} on:click={handleIssuePreviewOpened}>
    <div class="icon">
      <Icon icon={tracker.icon.Issue} size={'small'} />
    </div>
--- a/plugins/tracker-resources/src/components/issues/edit/ControlPanel.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/ControlPanel.svelte
@ -0,0 +1,93 @@
+<!--
+// 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 { WithLookup } from '@anticrm/core'
+  import type { Issue, IssueStatus } from '@anticrm/tracker'
+  import { Button, Label } from '@anticrm/ui'
+  import tracker from '../../../plugin'
+  import PriorityEditor from '../PriorityEditor.svelte'
+  import StatusEditor from '../StatusEditor.svelte'
+  import ProjectEditor from '../../projects/ProjectEditor.svelte'
+  import AssigneeEditor from '../AssigneeEditor.svelte'
+  import DueDateEditor from '../DueDateEditor.svelte'
+
+  export let issue: Issue
+  export let issueStatuses: WithLookup<IssueStatus>[]
+</script>
+
+<div class="content">
+  <span class="label">
+    <Label label={tracker.string.Status} />
+  </span>
+  <StatusEditor value={issue} statuses={issueStatuses} shouldShowLabel />
+
+  <span class="label">
+    <Label label={tracker.string.Priority} />
+  </span>
+  <PriorityEditor value={issue} shouldShowLabel />
+
+  <span class="label">
+    <Label label={tracker.string.Assignee} />
+  </span>
+  <AssigneeEditor value={issue} />
+
+  <span class="label">
+    <Label label={tracker.string.Labels} />
+  </span>
+  <Button
+    label={tracker.string.Labels}
+    icon={tracker.icon.Labels}
+    size={'large'}
+    kind={'link'}
+    width={'100%'}
+    justify={'left'}
+  />
+
+  <div class="divider" />
+
+  <span class="label">
+    <Label label={tracker.string.Project} />
+  </span>
+  <ProjectEditor value={issue} />
+
+  {#if issue.dueDate !== null}
+    <div class="divider" />
+
+    <span class="label">
+      <Label label={tracker.string.DueDate} />
+    </span>
+    <DueDateEditor value={issue} />
+  {/if}
+</div>
+
+<style lang="scss">
+  .content {
+    display: grid;
+    grid-template-columns: 1fr 1.5fr;
+    grid-auto-flow: row;
+    justify-content: start;
+    align-items: center;
+    gap: 1rem;
+    margin-top: 1rem;
+    width: 100%;
+    height: min-content;
+  }
+
+  .divider {
+    grid-column: 1 / 3;
+    height: 1px;
+    background-color: var(--divider-color);
+  }
+</style>
--- a/plugins/tracker-resources/src/components/issues/edit/CopyToClipboard.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/CopyToClipboard.svelte
@ -0,0 +1,61 @@
+<!--
+// 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 { Button } from '@anticrm/ui'
+  import tracker from '../../../plugin'
+
+  export let issueUrl: string | undefined = undefined
+  export let issueId: string | undefined = undefined
+  export let issueBranch: string | undefined = undefined
+
+  function copy (text?: string): void {
+    if (text) {
+      navigator.clipboard.writeText(text)
+    }
+  }
+</script>
+
+{#if issueUrl}
+  <Button
+    icon={tracker.icon.Issue}
+    title={tracker.string.CopyIssueUrl}
+    width="min-content"
+    size="small"
+    kind="transparent"
+    on:click={() => copy(issueUrl)}
+  />
+{/if}
+
+{#if issueId}
+  <Button
+    icon={tracker.icon.Views}
+    title={tracker.string.CopyIssueId}
+    width="min-content"
+    size="small"
+    kind="transparent"
+    on:click={() => copy(issueId)}
+  />
+{/if}
+
+{#if issueBranch}
+  <Button
+    icon={tracker.icon.TrackerApplication}
+    title={tracker.string.CopyIssueBranch}
+    width="min-content"
+    size="small"
+    kind="transparent"
+    on:click={() => issueBranch}
+  />
+{/if}
--- a/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte
@ -0,0 +1,197 @@
+<!--
+// 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 { Class, Data, Ref, SortingOrder, WithLookup } from '@anticrm/core'
+  import { AttachmentDocList } from '@anticrm/attachment-resources'
+  import { Panel } from '@anticrm/panel'
+  import presentation, { createQuery, getClient, MessageViewer } from '@anticrm/presentation'
+  import type { Issue, IssueStatus, Team } from '@anticrm/tracker'
+  import { Button, EditBox, IconDownOutline, IconEdit, IconMoreH, IconUpOutline, Scroller } from '@anticrm/ui'
+  import { StyledTextArea } from '@anticrm/text-editor'
+  import { createEventDispatcher, onMount } from 'svelte'
+  import tracker from '../../../plugin'
+  import ControlPanel from './ControlPanel.svelte'
+  import CopyToClipboard from './CopyToClipboard.svelte'
+
+  export let _id: Ref<Issue>
+  export let _class: Ref<Class<Issue>>
+
+  const query = createQuery()
+  const statusesQuery = createQuery()
+  const dispatch = createEventDispatcher()
+  const client = getClient()
+
+  let issue: Issue | undefined
+  let currentTeam: Team | undefined
+  let issueStatuses: WithLookup<IssueStatus>[] | undefined
+  let title = ''
+  let description = ''
+  let innerWidth: number
+  let isEditing = false
+
+  $: _id &&
+    _class &&
+    query.query(_class, { _id }, async (result) => {
+      ;[issue] = result
+      title = issue.title
+      description = issue.description
+    })
+
+  $: if (issue) {
+    client.findOne(tracker.class.Team, { _id: issue.space }).then((r) => (currentTeam = r))
+  }
+
+  $: currentTeam &&
+    statusesQuery.query(
+      tracker.class.IssueStatus,
+      { attachedTo: currentTeam._id },
+      (statuses) => (issueStatuses = statuses),
+      {
+        lookup: { category: tracker.class.IssueStatusCategory },
+        sort: { rank: SortingOrder.Ascending }
+      }
+    )
+
+  $: issueId = currentTeam && issue && `${currentTeam.identifier}-${issue.number}`
+  $: canSave = title.trim().length > 0
+
+  function edit (ev: MouseEvent) {
+    ev.preventDefault()
+
+    isEditing = true
+  }
+
+  function cancelEditing (ev: MouseEvent) {
+    ev.preventDefault()
+
+    isEditing = false
+
+    if (issue) {
+      title = issue.title
+      description = issue.description
+    }
+  }
+
+  async function save (ev: MouseEvent) {
+    ev.preventDefault()
+
+    if (!issue || !canSave) {
+      return
+    }
+
+    const updates: Partial<Data<Issue>> = {}
+    const trimmedTitle = title.trim()
+
+    if (trimmedTitle.length > 0 && trimmedTitle !== issue.title) {
+      updates.title = trimmedTitle
+    }
+
+    if (description !== issue.description) {
+      updates.description = description
+    }
+
+    if (Object.keys(updates).length > 0) {
+      await client.update(issue, updates)
+    }
+
+    isEditing = false
+  }
+
+  onMount(() => {
+    dispatch('open', { ignoreKeys: ['comments', 'name', 'description', 'number'] })
+  })
+</script>
+
+{#if issue !== undefined}
+  <Panel
+    object={issue}
+    isHeader
+    isAside={true}
+    isSub={false}
+    withoutActivity={isEditing}
+    bind:innerWidth
+    on:close={() => dispatch('close')}
+  >
+    <svelte:fragment slot="subtitle">
+      <div class="flex-between flex-grow">
+        <div class="buttons-group xsmall-gap">
+          <Button icon={IconEdit} kind={'transparent'} size="medium" on:click={edit} />
+          {#if innerWidth < 900}
+            <Button icon={IconMoreH} kind={'transparent'} size="medium" />
+          {/if}
+        </div>
+      </div>
+    </svelte:fragment>
+    <svelte:fragment slot="navigator">
+      <Button icon={IconDownOutline} kind="secondary" size="medium" />
+      <Button icon={IconUpOutline} kind="secondary" size="medium" />
+    </svelte:fragment>
+    <svelte:fragment slot="header">
+      <span class="fs-title">
+        {#if issueId}{issueId}{/if}
+      </span>
+    </svelte:fragment>
+    <svelte:fragment slot="tools">
+      {#if isEditing}
+        <Button kind="transparent" label={presentation.string.Cancel} on:click={cancelEditing} />
+        <Button disabled={!canSave} label={presentation.string.Save} on:click={save} />
+      {:else}
+        <Button icon={IconEdit} kind="transparent" size="medium" on:click={edit} />
+      {/if}
+    </svelte:fragment>
+
+    {#if isEditing}
+      <Scroller>
+        <div class="popupPanel-body__main-content py-10 clear-mins content">
+          <EditBox bind:value={title} placeholder={tracker.string.IssueTitlePlaceholder} kind="large-style" />
+          <div class="mt-6">
+            <StyledTextArea bind:content={description} placeholder={tracker.string.IssueDescriptionPlaceholder} focus />
+          </div>
+        </div>
+      </Scroller>
+    {:else}
+      <span class="title">{title}</span>
+      <div class="mt-6">
+        <MessageViewer message={issue.description} />
+      </div>
+    {/if}
+    <AttachmentDocList value={issue} />
+
+    <span slot="actions-label">
+      {#if issueId}{issueId}{/if}
+    </span>
+    <svelte:fragment slot="actions">
+      <CopyToClipboard issueUrl={window.location.href} {issueId} />
+    </svelte:fragment>
+
+    <svelte:fragment slot="custom-attributes">
+      {#if issue && currentTeam && issueStatuses}
+        <ControlPanel {issue} {issueStatuses} />
+      {/if}
+    </svelte:fragment>
+  </Panel>
+{/if}
+
+<style lang="scss">
+  .title {
+    font-weight: 500;
+    font-size: 1.125rem;
+    color: var(--theme-caption-color);
+  }
+
+  .content {
+    height: auto;
+  }
+</style>
--- a/plugins/tracker-resources/src/components/projects/ProjectEditor.svelte
+++ b/plugins/tracker-resources/src/components/projects/ProjectEditor.svelte
@ -16,10 +16,10 @@
  import { Ref } from '@anticrm/core'
  import { Issue, Project } from '@anticrm/tracker'
  import { getClient } from '@anticrm/presentation'
-  import type { ButtonKind, ButtonShape, ButtonSize } from '@anticrm/ui'
+  import { ButtonKind, ButtonShape, ButtonSize, Tooltip } from '@anticrm/ui'
+  import { IntlString } from '@anticrm/platform'
  import tracker from '../../plugin'
  import ProjectSelector from '../ProjectSelector.svelte'
-  import { IntlString } from '@anticrm/platform'

  export let value: Issue
  export let isEditable: boolean = true
@ -44,16 +44,18 @@
 </script>

 {#if value.project || shouldShowPlaceholder}
-  <ProjectSelector
-    {kind}
-    {size}
-    {shape}
-    {width}
-    {justify}
-    {isEditable}
-    {shouldShowLabel}
-    {popupPlaceholder}
-    value={value.project}
-    onProjectIdChange={handleProjectIdChanged}
-  />
+  <Tooltip label={value.project ? tracker.string.MoveToProject : tracker.string.AddToProject} fill>
+    <ProjectSelector
+      {kind}
+      {size}
+      {shape}
+      {width}
+      {justify}
+      {isEditable}
+      {shouldShowLabel}
+      {popupPlaceholder}
+      value={value.project}
+      onProjectIdChange={handleProjectIdChanged}
+    />
+  </Tooltip>
 {/if}
--- a/plugins/tracker-resources/src/components/projects/ProjectTitlePresenter.svelte
+++ b/plugins/tracker-resources/src/components/projects/ProjectTitlePresenter.svelte
@ -0,0 +1,25 @@
+<!--
+// 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 { Project } from '@anticrm/tracker'
+
+  export let value: Project | undefined
+</script>
+
+{#if value}
+  <span class="overflow-label">
+    {value.label}
+  </span>
+{/if}
--- a/plugins/tracker-resources/src/index.ts
+++ b/plugins/tracker-resources/src/index.ts
@ -25,12 +25,13 @@ import Issues from './components/issues/Issues.svelte'
 import MyIssues from './components/myissues/MyIssues.svelte'
 import Projects from './components/projects/Projects.svelte'
 import ProjectPresenter from './components/projects/ProjectPresenter.svelte'
+import ProjectTitlePresenter from './components/projects/ProjectTitlePresenter.svelte'
 import Views from './components/views/Views.svelte'
 import IssuePresenter from './components/issues/IssuePresenter.svelte'
 import TitlePresenter from './components/issues/TitlePresenter.svelte'
 import PriorityPresenter from './components/issues/PriorityPresenter.svelte'
 import PriorityEditor from './components/issues/PriorityEditor.svelte'
-import ProjectEditor from './components/issues/ProjectEditor.svelte'
+import ProjectEditor from './components/projects/ProjectEditor.svelte'
 import StatusPresenter from './components/issues/StatusPresenter.svelte'
 import StatusEditor from './components/issues/StatusEditor.svelte'
 import DueDatePresenter from './components/issues/DueDatePresenter.svelte'
@ -38,7 +39,7 @@ import AssigneePresenter from './components/issues/AssigneePresenter.svelte'
 import ViewOptionsPopup from './components/issues/ViewOptionsPopup.svelte'

 import ModificationDatePresenter from './components/issues/ModificationDatePresenter.svelte'
-import EditIssue from './components/issues/EditIssue.svelte'
+import EditIssue from './components/issues/edit/EditIssue.svelte'
 import NewIssueHeader from './components/NewIssueHeader.svelte'

 export default async (): Promise<Resources> => ({
@ -54,6 +55,7 @@ export default async (): Promise<Resources> => ({
    Views,
    IssuePresenter,
    ProjectPresenter,
+    ProjectTitlePresenter,
    TitlePresenter,
    ModificationDatePresenter,
    PriorityPresenter,
--- a/plugins/tracker-resources/src/plugin.ts
+++ b/plugins/tracker-resources/src/plugin.ts
@ -127,11 +127,14 @@ export default mergeIds(trackerId, tracker, {

    CopyIssueUrl: '' as IntlString,
    CopyIssueId: '' as IntlString,
+    CopyIssueBranch: '' as IntlString,

    FilterIs: '' as IntlString,
    FilterIsNot: '' as IntlString,
    FilterIsEither: '' as IntlString,
-    FilterStatesCount: '' as IntlString
+    FilterStatesCount: '' as IntlString,
+
+    EditIssue: '' as IntlString
  },
  component: {
    NopeComponent: '' as AnyComponent,
@ -144,6 +147,7 @@ export default mergeIds(trackerId, tracker, {
    Board: '' as AnyComponent,
    Projects: '' as AnyComponent,
    IssuePresenter: '' as AnyComponent,
+    ProjectTitlePresenter: '' as AnyComponent,
    ProjectPresenter: '' as AnyComponent,
    TitlePresenter: '' as AnyComponent,
    ModificationDatePresenter: '' as AnyComponent,
--- a/plugins/tracker-resources/src/utils.ts
+++ b/plugins/tracker-resources/src/utils.ts
@ -228,3 +228,22 @@ export const getArraysUnion = (a: any[], b: any[]): any[] => {

  return Array.from(union)
 }
+
+const WARNING_DAYS = 7
+
+export const getDueDateIconModifier = (
+  isOverdue: boolean,
+  daysDifference: number | null
+): 'overdue' | 'critical' | 'warning' | undefined => {
+  if (isOverdue) {
+    return 'overdue'
+  }
+
+  if (daysDifference === 0) {
+    return 'critical'
+  }
+
+  if (daysDifference !== null && daysDifference <= WARNING_DAYS) {
+    return 'warning'
+  }
+}