[UBER-378] Redo 'Move to Project' dialog (#3432)

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

plugins/tracker-assets/lang/en.json

@@ -150,7 +150,14 @@
 
     "CreatedOne": "Created",
     "MoveIssues": "Move issues",
-    "MoveIssuesDescription": "Select the project you want to move issues to.",
+    "MoveIssuesDescription": "Select the project you want to move issues to",
+    "KeepOriginalAttributes": "Keep original attributes",
+    "KeepOriginalAttributesTooltip": "Original issue statuses and components will be kept in the new project",
+    "SelectReplacement": "The following items are not available in the new project. Select a replacement.",
+    "MissingItem": "MISSING ITEM",
+    "Replacement": "REPLACEMENT",
+    "Original": "ORIGINAL",
+    "OriginalDescription": "Items from this section will be created in the new project",
 
     "Relations": "Relations",
     "RemoveRelation": "Remove relation...",

plugins/tracker-assets/lang/ru.json

@@ -150,7 +150,14 @@
 
     "CreatedOne": "Создана",
     "MoveIssues": "Переместить задачи",
-    "MoveIssuesDescription": "Выберите проект, в который вы хотите переместить задачи.",
+    "MoveIssuesDescription": "Выберите проект, в который вы хотите переместить задачи",
+    "KeepOriginalAttributes": "Оставить оригинальные аттрибуты",
+    "KeepOriginalAttributesTooltip": "Оригинальные статусы и компоненты будут сохранены в новом проекте",
+    "SelectReplacement": "Следующие элементы не доступны в новом проекте. Выберите замену.",
+    "MissingItem": "ОТСУТСТВУЮЩИЙ ЭЛЕМЕНТ",
+    "Replacement": "ЗАМЕНА",
+    "Original": "ОРИГИНАЛ",
+    "OriginalDescription": "Элементы из этой секции будут созданы в новом проекте",
 
     "Relations": "Зависимости",
     "RemoveRelation": "Удалить зависимость...",

plugins/tracker-resources/src/components/ComponentSelector.svelte

@@ -57,7 +57,7 @@
 
   $: handleSelectedComponentIdUpdated(value, rawComponents)
 
-  $: translate(tracker.string.Component, {}).then((result) => (defaultComponentLabel = result))
+  $: translate(tracker.string.NoComponent, {}).then((result) => (defaultComponentLabel = result))
   $: componentText = shouldShowLabel ? selectedComponent?.label ?? defaultComponentLabel : undefined
 
   const handleSelectedComponentIdUpdated = async (

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

@@ -14,32 +14,44 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { DocumentUpdate, Ref } from '@hcengineering/core'
+  import { createEventDispatcher } from 'svelte'
-  import { SpaceSelect, createQuery, getClient } from '@hcengineering/presentation'
+
-  import { Component, Issue, Project } from '@hcengineering/tracker'
+  import { Ref, Status } from '@hcengineering/core'
-  import ui, { Button, Label, Spinner } from '@hcengineering/ui'
+  import { SpaceSelector, createQuery, getClient } from '@hcengineering/presentation'
+  import { Component, Issue, IssueStatus, Project } from '@hcengineering/tracker'
+  import ui, { Button, IconClose, Label, Spinner, Toggle, tooltip } from '@hcengineering/ui'
   import view from '@hcengineering/view'
   import { statusStore } from '@hcengineering/view-resources'
-  import { createEventDispatcher } from 'svelte'
+  import { getEmbeddedLabel } from '@hcengineering/platform'
+
   import tracker from '../../plugin'
-  import { collectIssues, findTargetStatus, moveIssueToSpace } from '../../utils'
+  import {
+    ComponentToUpdate,
+    IssueToUpdate,
+    StatusToUpdate,
+    collectIssues,
+    findTargetStatus,
+    moveIssueToSpace
+  } from '../../utils'
+  import { componentStore } from '../../component'
+  import ProjectPresenter from '../projects/ProjectPresenter.svelte'
   import IssuePresenter from './IssuePresenter.svelte'
   import TitlePresenter from './TitlePresenter.svelte'
-  import ComponentMove from './move/ComponentMove.svelte'
   import ComponentMovePresenter from './move/ComponentMovePresenter.svelte'
-  import StatusMove from './move/StatusMove.svelte'
   import StatusMovePresenter from './move/StatusMovePresenter.svelte'
+  import SelectReplacement from './move/SelectReplacement.svelte'
+  import PriorityEditor from './PriorityEditor.svelte'
 
   export let selected: Issue | Issue[]
   $: docs = Array.isArray(selected) ? selected : [selected]
 
-  let currentSpace: Project | undefined
   const client = getClient()
   const dispatch = createEventDispatcher()
   const hierarchy = client.getHierarchy()
+
+  let currentSpace: Project | undefined
   let space: Ref<Project>
 
-  $: _class = hierarchy.getClass(tracker.class.Project).label
   $: {
     const doc = docs[0]
     if (space === undefined) {
@@ -49,11 +61,79 @@
 
   let processing = false
 
+  async function createMissingStatus (st: Ref<Status>): Promise<void> {
+    const cur = $statusStore.get(st)
+    const statuses = $statusStore.filter((it) => it.space === currentSpace?._id)
+    if (cur === undefined || currentSpace === undefined || statuses.find((s) => s.name === cur.name) !== undefined) {
+      return
+    }
+    await client.createDoc(cur._class, currentSpace._id, {
+      name: cur.name,
+      ofAttribute: cur.ofAttribute,
+      category: cur.category,
+      color: cur.color,
+      description: cur.description,
+      rank: cur.rank
+    })
+  }
+
+  async function createMissingComponent (c: Ref<Component>): Promise<void> {
+    const cur = $componentStore.get(c)
+    const components = $componentStore.filter((it) => it.space === currentSpace?._id)
+    if (
+      cur === undefined ||
+      currentSpace === undefined ||
+      components.find((c) => c.label === cur.label) !== undefined
+    ) {
+      return
+    }
+    await client.createDoc(cur._class, currentSpace._id, {
+      label: cur.label,
+      attachments: 0,
+      description: cur.description,
+      comments: 0,
+      lead: cur.lead
+    })
+  }
+
   const moveAll = async () => {
     if (currentSpace === undefined) {
       return
     }
     processing = true
+    for (const issue of toMove) {
+      const upd = issueToUpdate.get(issue._id) ?? {}
+      if (issue.status !== undefined) {
+        if (!upd.useStatus) {
+          const newStatus = statusToUpdate[issue.status]
+          if (newStatus !== undefined) {
+            if (newStatus.create) {
+              await createMissingStatus(newStatus.ref)
+            }
+            upd.status = newStatus.ref
+          }
+        } else if (upd.createStatus) {
+          await createMissingStatus(issue.status)
+        }
+      }
+
+      if (issue.component !== undefined && issue.component !== null) {
+        if (!upd.useComponent) {
+          const newComponent = componentToUpdate[issue.component]
+          if (newComponent !== undefined) {
+            if (newComponent.create) {
+              await createMissingComponent(newComponent.ref)
+            }
+            upd.component = newComponent.ref
+          }
+        } else if (upd.createComponent) {
+          await createMissingComponent(issue.component)
+        }
+      }
+
+      issueToUpdate.set(issue._id, upd)
+    }
+
     await moveIssueToSpace(client, docs, currentSpace, issueToUpdate)
     processing = false
     dispatch('close')
@@ -61,7 +141,9 @@
 
   const targetSpaceQuery = createQuery()
 
-  let issueToUpdate: Map<Ref<Issue>, DocumentUpdate<Issue>> = new Map()
+  let issueToUpdate: Map<Ref<Issue>, IssueToUpdate> = new Map()
+  let statusToUpdate: Record<Ref<IssueStatus>, StatusToUpdate | undefined> = {}
+  let componentToUpdate: Record<Ref<Component>, ComponentToUpdate | undefined> = {}
 
   $: targetSpaceQuery.query(tracker.class.Project, { _id: space }, (res) => {
     ;[currentSpace] = res
@@ -76,20 +158,75 @@
     })
   }
 
-  $: if (currentSpace !== undefined) {
+  $: if (keepOriginalAttribytes) {
-    for (const c of toMove) {
+    setOriginalAttributes()
-      const upd = issueToUpdate.get(c._id) ?? {}
+  } else if (currentSpace !== undefined) {
+    statusToUpdate = {}
+    componentToUpdate = {}
+    setReplacementAttributres(currentSpace)
+  }
+
+  const componentQuery = createQuery()
+  let components: Component[] = []
+  $: componentQuery.query(tracker.class.Component, {}, (res) => {
+    components = res
+  })
+
+  $: statuses = $statusStore.filter((it) => it.space === currentSpace?._id)
+
+  let keepOriginalAttribytes: boolean = false
+  let showManageAttributes: boolean = false
+  $: isManageAttributesAvailable = issueToUpdate.size > 0 && docs[0]?.space !== currentSpace?._id
+
+  function setOriginalAttributes () {
+    for (const issue of toMove) {
+      const upd = issueToUpdate.get(issue._id) ?? {}
+      upd.createStatus = false
+      upd.useStatus = false
+      upd.createComponent = false
+      upd.useComponent = false
+      issueToUpdate.set(issue._id, upd)
+    }
+    for (const status in Object.keys(statusToUpdate)) {
+      statusToUpdate[status] = { ref: status, create: true }
+    }
+    for (const component in Object.keys(componentToUpdate)) {
+      componentToUpdate[component] = { ref: component, create: true }
+    }
+
+    for (const issue of toMove) {
+      let upd = issueToUpdate.get(issue._id) ?? {}
+      if (issue.status !== undefined) {
+        upd = {
+          ...upd,
+          status: issue.status
+        }
+      }
+
+      if (issue.component !== undefined && issue.component !== null) {
+        upd = {
+          ...upd,
+          component: issue.component
+        }
+      }
+      issueToUpdate.set(issue._id, upd)
+    }
+  }
+
+  function setReplacementAttributres (currentSpace: Project) {
+    for (const issue of toMove) {
+      const upd = issueToUpdate.get(issue._id) ?? {}
 
       // In case of target space change
-      if (upd.status !== undefined && $statusStore.get(upd.status)?.space !== currentSpace._id) {
+      if (upd.status !== undefined && $statusStore.get(upd.status)?.space !== currentSpace._id && !upd.createStatus) {
         upd.status = undefined
       }
       if (upd.status === undefined) {
-        upd.status = findTargetStatus($statusStore, c.status, space, true) ?? currentSpace.defaultIssueStatus
+        upd.status = findTargetStatus($statusStore, issue.status, space, true) ?? currentSpace.defaultIssueStatus
       }
 
-      if (c.component !== undefined) {
+      if (issue.component !== undefined) {
-        const cur = components.find((it) => it._id === c.component)
+        const cur = components.find((it) => it._id === issue.component)
 
         if (cur !== undefined) {
           if (
@@ -103,91 +240,148 @@
           }
         }
       }
-      if (c.attachedTo !== tracker.ids.NoParent && toMove.find((it) => it._id === c.attachedTo) === undefined) {
+      if (issue.attachedTo !== tracker.ids.NoParent && toMove.find((it) => it._id === issue.attachedTo) === undefined) {
         upd.attachedTo = tracker.ids.NoParent
         upd.attachedToClass = tracker.class.Issue
       }
-      issueToUpdate.set(c._id, upd)
+      issueToUpdate.set(issue._id, upd)
     }
-    issueToUpdate = issueToUpdate
   }
-
-  const componentQuery = createQuery()
-  let components: Component[] = []
-
-  $: componentQuery.query(tracker.class.Component, {}, (res) => {
-    components = res
-  })
 </script>
 
 <div class="container">
-  <div class="overflow-label fs-title">
+  {#if !showManageAttributes}
-    <Label label={tracker.string.MoveIssues} />
+    <div class="space-between">
-  </div>
+      <span class="fs-title aligned-text">
-  <div class="caption-color mt-4 mb-4">
+        <Label label={tracker.string.MoveIssues} />
-    <Label label={tracker.string.MoveIssuesDescription} />
+      </span>
-  </div>
+      <Button icon={IconClose} iconProps={{ size: 'medium' }} kind="transparent" on:click={() => dispatch('close')} />
-  <div class="spaceSelect">
+    </div>
-    {#if currentSpace && _class}
+
-      <SpaceSelect _class={currentSpace._class} label={_class} bind:value={space} />
+    <div>
+      <Label label={tracker.string.MoveIssuesDescription} />
+    </div>
+
+    <div class="space-between mt-6 mb-4">
+      {#if currentSpace !== undefined}
+        <SpaceSelector
+          _class={currentSpace._class}
+          label={hierarchy.getClass(tracker.class.Project).label}
+          bind:space
+          kind={'secondary'}
+          size={'small'}
+          component={ProjectPresenter}
+          iconWithEmojii={tracker.component.IconWithEmojii}
+          defaultIcon={tracker.icon.Home}
+        />
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <span
+          class="aligned-text"
+          class:disabled={!isManageAttributesAvailable}
+          on:click|stopPropagation={() => {
+            if (!isManageAttributesAvailable) {
+              return
+            }
+            showManageAttributes = !showManageAttributes
+          }}
+        >
+          Manage attributes >
+        </span>
+      {/if}
+    </div>
+
+    <div class="divider" />
+    {#if currentSpace !== undefined && !keepOriginalAttribytes}
+      <SelectReplacement
+        {statuses}
+        {components}
+        targetProject={currentSpace}
+        issues={toMove}
+        bind:statusToUpdate
+        bind:componentToUpdate
+      />
+      <div class="divider" />
     {/if}
-  </div>
+  {:else}
-  <div class="mt-2">
+    <div class="space-between pb-4">
-    <Label label={tracker.string.Issues} />
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
-  </div>
+      <span
-  <div class="issues-move flex-col">
+        class="fs-title aligned-text"
-    {#if loading}
+        on:click|stopPropagation={() => (showManageAttributes = !showManageAttributes)}
-      <Spinner />
+      >
-    {:else if toMove.length > 0 && currentSpace}
+        <Label label={getEmbeddedLabel('<    Manage attributes')} />
-      {#each toMove as issue}
+      </span>
-        {@const upd = issueToUpdate.get(issue._id) ?? {}}
+      <Button icon={IconClose} iconProps={{ size: 'medium' }} kind="transparent" on:click={() => dispatch('close')} />
-        <div class="issue-move p-3">
+    </div>
-          <div class="flex-row-center p-1">
+    <div class="divider" />
-            <IssuePresenter value={issue} disabled kind={'list'} />
+
-            <div class="ml-2 max-w-30">
+    <div class="issues-move flex-col">
-              <TitlePresenter disabled value={issue} showParent={false} />
+      {#if loading}
-            </div>
+        <Spinner />
-          </div>
+      {:else if toMove.length > 0 && currentSpace}
-          {#if issue.space !== currentSpace._id}
+        {#each toMove as issue}
-            {#key upd.status}
+          {@const upd = issueToUpdate.get(issue._id) ?? {}}
-              <StatusMovePresenter {issue} {issueToUpdate} currentProject={currentSpace} />
+          {@const originalComponent = components.find((it) => it._id === issue.component)}
-            {/key}
+          {@const targetComponent = components.find(
-            {#key upd.component}
+            (it) => it.space === currentSpace?._id && it.label === originalComponent?.label
-              <ComponentMovePresenter {issue} {issueToUpdate} currentProject={currentSpace} {components} />
+          )}
-            {/key}
+          {#key keepOriginalAttribytes}
-            {#if upd.attachedTo === tracker.ids.NoParent && issue.attachedTo !== tracker.ids.NoParent}
+            {#if issue.space !== currentSpace._id && (upd.status !== undefined || upd.component !== undefined)}
-              <div class="p-1 unset-parent">
+              <div class="issue-move pb-2">
-                <Label label={tracker.string.SetParent} />
+                <div class="flex-row-center pl-1">
+                  <PriorityEditor value={issue} isEditable={false} />
+                  <IssuePresenter value={issue} disabled kind={'list'} />
+                  <div class="ml-2 max-w-30">
+                    <TitlePresenter disabled value={issue} showParent={false} />
+                  </div>
+                </div>
+                <div class="pl-4">
+                  {#key upd.status}
+                    <StatusMovePresenter {issue} bind:issueToUpdate targetProject={currentSpace} {statuses} />
+                  {/key}
+                  {#if targetComponent === undefined}
+                    {#key upd.component}
+                      <ComponentMovePresenter {issue} bind:issueToUpdate targetProject={currentSpace} {components} />
+                    {/key}
+                  {/if}
+                </div>
               </div>
             {/if}
-          {/if}
+          {/key}
-        </div>
+        {/each}
-      {/each}
+      {/if}
-    {/if}
+    </div>
-  </div>
-
-  {#if currentSpace !== undefined}
-    <StatusMove issues={toMove} targetProject={currentSpace} />
-    <ComponentMove issues={toMove} targetProject={currentSpace} {components} />
   {/if}
 
-  <div class="footer">
+  <div class="space-between mt-4">
-    <Button
+    <div
-      label={view.string.Move}
+      class="aligned-text"
-      size={'small'}
+      use:tooltip={{
-      disabled={docs[0]?.space === currentSpace?._id}
+        component: Label,
-      kind={'primary'}
+        props: { label: tracker.string.KeepOriginalAttributesTooltip }
-      on:click={moveAll}
-      loading={processing}
-    />
-    <Button
-      size={'small'}
-      label={ui.string.Cancel}
-      on:click={() => {
-        dispatch('close')
       }}
-      disabled={processing}
+    >
-    />
+      <div class="mr-2"><Toggle disabled={!isManageAttributesAvailable} bind:on={keepOriginalAttribytes} /></div>
+      <Label label={tracker.string.KeepOriginalAttributes} />
+    </div>
+    <div class="buttons">
+      <Button
+        label={view.string.Move}
+        size={'small'}
+        disabled={docs[0]?.space === currentSpace?._id}
+        kind={'primary'}
+        on:click={moveAll}
+        loading={processing}
+      />
+      <Button
+        size={'small'}
+        label={ui.string.Cancel}
+        on:click={() => {
+          dispatch('close')
+        }}
+        disabled={processing}
+      />
+    </div>
   </div>
 </div>
 
@@ -195,45 +389,47 @@
   .container {
     display: flex;
     flex-direction: column;
-    padding: 2rem 1.75rem 1.75rem;
+    padding: 1.25rem 1.5rem 1rem;
-    width: 55rem;
+    width: 480px;
     max-width: 40rem;
     background: var(--popup-bg-color);
-    border-radius: 1.25rem;
+    border-radius: 8px;
     user-select: none;
-    box-shadow: var(--popup-shadow);
 
-    .spaceSelect {
+    .aligned-text {
-      padding: 0.75rem;
+      display: flex;
-      background-color: var(--body-color);
+      justify-content: center;
-      border: 1px solid var(--popup-divider);
+      align-items: center;
-      border-radius: 0.75rem;
     }
 
-    .footer {
+    .space-between {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .buttons {
       flex-shrink: 0;
       display: grid;
       grid-auto-flow: column;
       direction: rtl;
       justify-content: start;
       align-items: center;
-      margin-top: 1rem;
       column-gap: 0.5rem;
     }
     .issues-move {
-      height: 30rem;
       overflow: auto;
     }
     .issue-move {
-      border: 1px solid var(--popup-divider);
+      border-bottom: 1px solid var(--popup-divider);
-    }
-
-    .status-option {
-      border: 1px solid var(--popup-divider);
     }
   }
 
-  .unset-parent {
+  .divider {
-    background-color: var(--accent-bg-color);
+    border-bottom: 1px solid var(--theme-divider-color);
+  }
+
+  .disabled {
+    cursor: not-allowed;
+    color: var(--dark-color);
   }
 </style>

plugins/tracker-resources/src/components/issues/move/ComponentMove.svelte

@@ -1,67 +0,0 @@
-<!--
-// 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 { getClient } from '@hcengineering/presentation'
-  import { Component, Issue, Project } from '@hcengineering/tracker'
-  import { Button, Label } from '@hcengineering/ui'
-  import tracker from '../../../plugin'
-  import ComponentPresenter from '../../components/ComponentPresenter.svelte'
-
-  export let issues: Issue[]
-  export let targetProject: Project
-  export let components: Component[]
-
-  const client = getClient()
-
-  $: missingComponents = (
-    issues
-      .map((it) => it.component)
-      .filter((it) => it != null)
-      .map((it) => components.find((cit) => cit._id === it)) as Component[]
-  ).filter((it, idx, arr) => {
-    const targetComponent = components.find((it2) => it2.space === targetProject._id && it2.label === it.label)
-
-    return targetComponent === undefined && arr.indexOf(it) === idx
-  })
-
-  async function createMissingComponent (cur: Component): Promise<void> {
-    await client.createDoc(cur._class, targetProject._id, {
-      label: cur.label,
-      attachments: 0,
-      description: cur.description,
-      comments: 0,
-      lead: cur.lead
-    })
-  }
-</script>
-
-{#if missingComponents.length > 0}
-  <div class="mt-2">
-    <Label label={tracker.string.Component} />
-  </div>
-  <div class="flex-col">
-    {#each missingComponents as comp}
-      <div class="status-option p-1 flex-row-center flex-between">
-        <div class="flex-row-center">
-          <div class="mr-2">
-            <Label label={tracker.string.NoComponent} />
-          </div>
-          <ComponentPresenter value={comp} disabled />
-        </div>
-        <Button label={tracker.string.CreateComponent} on:click={() => createMissingComponent(comp)} />
-      </div>
-    {/each}
-  </div>
-{/if}

plugins/tracker-resources/src/components/issues/move/ComponentMovePresenter.svelte

@@ -13,57 +13,72 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { DocumentUpdate, Ref } from '@hcengineering/core'
+  import { Ref } from '@hcengineering/core'
+  import { Button, eventToHTMLElement, showPopup } from '@hcengineering/ui'
   import { Component, Issue, Project } from '@hcengineering/tracker'
-  import { Label } from '@hcengineering/ui'
+
-  import tracker from '../../../plugin'
+  import { IssueToUpdate } from '../../../utils'
-  import { issueToAttachedData } from '../../../utils'
-  import ComponentEditor from '../../components/ComponentEditor.svelte'
   import ComponentPresenter from '../../components/ComponentPresenter.svelte'
+  import ComponentReplacementPopup from './ComponentReplacementPopup.svelte'
 
   export let issue: Issue
-  export let currentProject: Project
+  export let targetProject: Project
-  export let issueToUpdate: Map<Ref<Issue>, DocumentUpdate<Issue>> = new Map()
+  export let issueToUpdate: Map<Ref<Issue>, IssueToUpdate> = new Map()
   export let components: Component[]
 
-  $: currentComponent = components.find((it) => it._id === issue.component)
+  $: current = components.find((it) => it._id === issue.component)
-
+  $: replace = components.find((it) => it._id === issueToUpdate.get(issue._id)?.component)
-  $: targetComponent = components.find((it) => it.space === currentProject._id && it.label === currentComponent?.label)
 </script>
 
-{#if currentComponent !== undefined}
+{#if current !== undefined}
-  <div class="flex-row-center p-1" class:no-component={targetComponent === undefined}>
+  <div class="flex-row-center p-1">
-    <div class="p-1">
+    <div class="side-columns aligned-text">
-      <ComponentPresenter value={currentComponent} />
+      <ComponentPresenter value={current} disabled />
     </div>
-
+    <span class="middle-column aligned-text">-></span>
-    <div class="p-1 flex-row-center">
+    <div class="side-columns">
-      <span class="p-1"> => </span>
+      <Button
-      <!--Find appropriate status in target Project -->
+        on:click={(event) => {
-      {#if targetComponent === undefined}
+          showPopup(
-        <div class="flex-row-center">
+            ComponentReplacementPopup,
-          <div class="mr-2">
+            {
-            <Label label={tracker.string.NoComponent} />
+              components: components.filter((it) => it.space === targetProject._id),
-          </div>
+              original: current,
-          <span class="p-1"> => </span>
+              selected: replace
-        </div>
+            },
-      {/if}
+            eventToHTMLElement(event),
-      <ComponentEditor
+            (value) => {
-        shouldShowLabel={true}
+              if (value) {
-        space={currentProject._id}
+                const createComponent = typeof value === 'object'
-        value={{
+                const c = createComponent ? value.create : value
-          ...issueToAttachedData(issue),
+                issueToUpdate.set(issue._id, {
-          component: issueToUpdate.get(issue._id)?.component || null,
+                  ...issueToUpdate.get(issue._id),
-          space: currentProject._id
+                  component: c,
+                  useComponent: true,
+                  createComponent
+                })
+              }
+            }
+          )
         }}
-        on:change={(evt) => issueToUpdate.set(issue._id, { ...issueToUpdate.get(issue._id), status: evt.detail })}
+      >
-      />
+        <span slot="content" class="flex-row-center pointer-events-none">
+          <ComponentPresenter value={replace} />
+        </span>
+      </Button>
     </div>
   </div>
 {/if}
 
 <style lang="scss">
-  .no-component {
+  .side-columns {
-    background-color: var(--accent-bg-color);
+    width: 45%;
+  }
+  .middle-column {
+    width: 10%;
+  }
+  .aligned-text {
+    display: flex;
+    align-items: center;
   }
 </style>

plugins/tracker-resources/src/components/issues/move/ComponentReplacementPopup.svelte

@@ -0,0 +1,101 @@
+<!--
+// 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 { createEventDispatcher } from 'svelte'
+
+  import { Component } from '@hcengineering/tracker'
+  import tracker from '../../../plugin'
+  import { Ref } from '@hcengineering/core'
+  import { Icon, IconCheck, Label, Scroller } from '@hcengineering/ui'
+  import ComponentPresenter from '../../components/ComponentPresenter.svelte'
+
+  export let components: Component[] | undefined
+  export let original: Component | undefined
+  export let selected: Ref<Component>
+
+  const dispatch = createEventDispatcher()
+</script>
+
+{#if components !== undefined}
+  <div class="selectPopup">
+    <div class="menu-space" />
+    <Scroller>
+      <span class="ml-4">
+        <Label label={tracker.string.Replacement} />
+      </span>
+      <div class="scroll">
+        <div class="box">
+          {#each components as component}
+            <button
+              class="menu-item no-focus content-pointer-events-none"
+              on:click={() => {
+                selected = component._id
+                dispatch('close', component._id)
+              }}
+            >
+              <div class="flex-between w-full">
+                <div class="flex-row-center">
+                  <ComponentPresenter value={component} />
+                </div>
+                <div class="pointer-events-none">
+                  {#if selected === component._id}
+                    <Icon icon={IconCheck} size={'small'} />
+                  {/if}
+                </div>
+              </div>
+            </button>
+          {/each}
+
+          {#if original !== undefined}
+            <div class="divider mb-4" />
+            <div class="ml-4">
+              <Label label={tracker.string.Original} />
+            </div>
+            <div class="min-width ml-4">
+              <Label label={tracker.string.OriginalDescription} />
+            </div>
+            <button
+              class="menu-item no-focus content-pointer-events-none"
+              on:click={() => {
+                if (original !== undefined) {
+                  selected = original._id
+                  dispatch('close', { create: original._id })
+                }
+              }}
+            >
+              <div class="flex-between w-full">
+                <div class="flex-row-center">
+                  <ComponentPresenter value={original} />
+                </div>
+                <div class="pointer-events-none">
+                  {#if selected === original._id}
+                    <Icon icon={IconCheck} size={'small'} />
+                  {/if}
+                </div>
+              </div>
+            </button>
+          {/if}
+        </div>
+      </div>
+    </Scroller>
+    <div class="menu-space" />
+  </div>
+{/if}
+
+<style lang="scss">
+  .divider {
+    border-bottom: 1px solid var(--theme-divider-color);
+  }
+</style>

plugins/tracker-resources/src/components/issues/move/SelectReplacement.svelte

@@ -0,0 +1,191 @@
+<!--
+// 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 { Ref, Status } from '@hcengineering/core'
+  import { Button, Label, eventToHTMLElement, showPopup } from '@hcengineering/ui'
+  import { Component, Issue, IssueStatus, Project } from '@hcengineering/tracker'
+  import { statusStore } from '@hcengineering/view-resources'
+
+  import tracker from '../../../plugin'
+  import { ComponentToUpdate, StatusToUpdate, findTargetStatus } from '../../../utils'
+  import ComponentPresenter from '../../components/ComponentPresenter.svelte'
+  import ComponentRefPresenter from '../../components/ComponentRefPresenter.svelte'
+  import StatusRefPresenter from '../StatusRefPresenter.svelte'
+  import StatusReplacementPopup from './StatusReplacementPopup.svelte'
+  import ComponentReplacementPopup from './ComponentReplacementPopup.svelte'
+
+  export let targetProject: Project
+  export let issues: Issue[]
+  export let statuses: IssueStatus[] = []
+  export let components: Component[] = []
+  export let statusToUpdate: Record<Ref<IssueStatus>, StatusToUpdate | undefined>
+  export let componentToUpdate: Record<Ref<Component>, ComponentToUpdate | undefined>
+
+  $: if (targetProject !== undefined) {
+    for (const i of issues) {
+      const status = statusToUpdate[i.status]
+      if (status !== undefined && !status.create) {
+        if ($statusStore.get(status.ref)?.space !== targetProject._id) {
+          statusToUpdate[i.status] = undefined
+        }
+      }
+      if (statusToUpdate[i.status] === undefined) {
+        const targetStatus = findTargetStatus($statusStore, i.status, targetProject._id, true)
+        statusToUpdate[i.status] = { ref: targetStatus ?? targetProject.defaultIssueStatus }
+      }
+
+      if (i.component !== undefined && i.component !== null) {
+        const cur = components.find((it) => it._id === i.component)
+        if (cur !== undefined) {
+          const component = componentToUpdate[i.component]
+          if (
+            component !== undefined &&
+            components.find((it) => it._id === component.ref)?.space !== targetProject._id
+          ) {
+            componentToUpdate[cur._id] = undefined
+          }
+          if (component === undefined) {
+            const componentRef = components.find((it) => it.space === targetProject?._id && it.label === cur.label)?._id
+            if (componentRef !== undefined) {
+              componentToUpdate[cur._id] = { ref: componentRef }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  $: missingComponents = (
+    issues
+      .filter((it) => it.component != null)
+      .map((it) => components.find((cit) => cit._id === it.component)) as Component[]
+  ).filter((it, idx, arr) => {
+    const targetComponent = components.find((it2) => it2.space === targetProject._id && it2.label === it.label)
+
+    return targetComponent === undefined && arr.indexOf(it) === idx
+  })
+
+  const getStatusRef = (status: string) => status as Ref<Status>
+</script>
+
+{#if issues[0]?.space !== targetProject._id && (Object.keys(statusToUpdate).length > 0 || missingComponents.length > 0)}
+  <div class="mt-4 mb-4">
+    <span class="caption-color">
+      <Label label={tracker.string.SelectReplacement} />
+    </span>
+
+    <div class="mt-4">
+      <div class="missing-items">
+        <span class="side-columns">
+          <Label label={tracker.string.MissingItem} />
+        </span>
+        <span class="middle-column" />
+        <span class="side-columns">
+          <Label label={tracker.string.Replacement} />
+        </span>
+      </div>
+      <div class="mt-4">
+        {#each Object.keys(statusToUpdate) as status}
+          {@const newStatus = statusToUpdate[status]}
+          <div class="missing-items mt-4">
+            <div class="side-columns aligned-text">
+              <StatusRefPresenter value={getStatusRef(status)} kind={'list-header'} />
+            </div>
+            <span class="middle-column aligned-text">-></span>
+            <div class="side-columns">
+              <Button
+                on:click={(event) => {
+                  showPopup(
+                    StatusReplacementPopup,
+                    {
+                      statuses,
+                      original: $statusStore.get(getStatusRef(status)),
+                      selected: getStatusRef(newStatus.ref)
+                    },
+                    eventToHTMLElement(event),
+                    (value) => {
+                      if (value) {
+                        const createStatus = typeof value === 'object'
+                        const s = createStatus ? value.create : value
+                        statusToUpdate = { ...statusToUpdate, [status]: { ref: s, create: createStatus } }
+                      }
+                    }
+                  )
+                }}
+              >
+                <span slot="content" class="flex-row-center pointer-events-none">
+                  <StatusRefPresenter value={getStatusRef(newStatus.ref)} />
+                </span>
+              </Button>
+            </div>
+          </div>
+        {/each}
+      </div>
+      <div class="mt-4">
+        {#each missingComponents as component}
+          {@const componentRef = componentToUpdate[component._id]?.ref}
+          <div class="missing-items mt-4">
+            <div class="side-columns aligned-text">
+              <ComponentPresenter value={component} disabled />
+            </div>
+            <span class="middle-column aligned-text">-></span>
+            <div class="side-columns aligned-text">
+              <Button
+                on:click={(event) => {
+                  showPopup(
+                    ComponentReplacementPopup,
+                    {
+                      components: components.filter((it) => it.space === targetProject._id),
+                      original: component,
+                      selected: componentRef
+                    },
+                    eventToHTMLElement(event),
+                    (value) => {
+                      if (value !== undefined) {
+                        const createComponent = typeof value === 'object'
+                        const c = createComponent ? value.create : value
+                        statusToUpdate = { ...statusToUpdate, [component._id]: { ref: c, create: createComponent } }
+                      }
+                    }
+                  )
+                }}
+              >
+                <span slot="content" class="flex-row-center pointer-events-none">
+                  <ComponentRefPresenter value={componentRef} />
+                </span>
+              </Button>
+            </div>
+          </div>
+        {/each}
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style lang="scss">
+  .missing-items {
+    display: flex;
+  }
+  .side-columns {
+    width: 40%;
+  }
+  .middle-column {
+    width: 10%;
+  }
+  .aligned-text {
+    display: flex;
+    align-items: center;
+  }
+</style>

plugins/tracker-resources/src/components/issues/move/StatusMove.svelte

@@ -1,71 +0,0 @@
-<!--
-// 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 { Ref, Status } from '@hcengineering/core'
-  import { getClient } from '@hcengineering/presentation'
-  import { Issue, Project } from '@hcengineering/tracker'
-  import { Button, Label } from '@hcengineering/ui'
-  import { statusStore } from '@hcengineering/view-resources'
-  import tracker from '../../../plugin'
-  import { findTargetStatus } from '../../../utils'
-  import StatusRefPresenter from '../StatusRefPresenter.svelte'
-
-  export let issues: Issue[]
-  export let targetProject: Project
-
-  const client = getClient()
-
-  $: missingStatuses = issues
-    .map((it) => it.status)
-    .filter((it, idx, arr) => {
-      const targetStatus = findTargetStatus($statusStore, it, targetProject._id)
-
-      return targetStatus === undefined && arr.indexOf(it) === idx
-    })
-
-  async function createMissingStatus (st: Ref<Status>): Promise<void> {
-    const cur = $statusStore.get(st)
-    if (cur === undefined) {
-      return
-    }
-    await client.createDoc(cur._class, targetProject._id, {
-      name: cur.name,
-      ofAttribute: cur.ofAttribute,
-      category: cur.category,
-      color: cur.color,
-      description: cur.description,
-      rank: cur.rank
-    })
-  }
-</script>
-
-{#if missingStatuses.length > 0}
-  <div class="mt-2">
-    <Label label={tracker.string.Status} />
-  </div>
-  <div class="flex-col">
-    {#each missingStatuses as st}
-      <div class="status-option p-1 flex-row-center flex-between">
-        <div class="flex-row-center">
-          <div class="mr-2">
-            <Label label={tracker.string.NoStatusFound} />
-          </div>
-          <StatusRefPresenter value={st} kind={'list-header'} />
-        </div>
-        <Button label={tracker.string.CreateMissingStatus} on:click={() => createMissingStatus(st)} />
-      </div>
-    {/each}
-  </div>
-{/if}

plugins/tracker-resources/src/components/issues/move/StatusMovePresenter.svelte

@@ -13,51 +13,67 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { DocumentUpdate, Ref } from '@hcengineering/core'
+  import { Ref } from '@hcengineering/core'
-  import { Issue, Project } from '@hcengineering/tracker'
+  import { Issue, IssueStatus, Project } from '@hcengineering/tracker'
-  import { Label } from '@hcengineering/ui'
+  import { Button, eventToHTMLElement, showPopup } from '@hcengineering/ui'
-  import { statusStore } from '@hcengineering/view-resources'
+
-  import tracker from '../../../plugin'
+  import { IssueToUpdate } from '../../../utils'
-  import { findTargetStatus, issueToAttachedData } from '../../../utils'
-  import StatusEditor from '../StatusEditor.svelte'
   import StatusRefPresenter from '../StatusRefPresenter.svelte'
+  import StatusReplacementPopup from './StatusReplacementPopup.svelte'
+  import { statusStore } from '@hcengineering/view-resources'
 
   export let issue: Issue
-  export let currentProject: Project
+  export let targetProject: Project
-  export let issueToUpdate: Map<Ref<Issue>, DocumentUpdate<Issue>> = new Map()
+  export let issueToUpdate: Map<Ref<Issue>, IssueToUpdate> = new Map()
+  export let statuses: IssueStatus[]
 
-  $: targetStatus = findTargetStatus($statusStore, issue.status, currentProject._id)
+  $: replace = issueToUpdate.get(issue._id)?.status ?? targetProject.defaultIssueStatus
+  $: original = $statusStore.get(issue.status)
 </script>
 
-<div class="flex-row-center p-1" class:no-status={targetStatus === undefined}>
+<div class="flex-row-center p-1">
-  <div class="p-1">
+  <div class="side-columns aligned-text">
     <StatusRefPresenter value={issue.status} size={'small'} />
   </div>
-
+  <span class="middle-column aligned-text">-></span>
-  <div class="p-1 flex-row-center">
+  <div class="side-columns">
-    <span class="p-1"> => </span>
+    <Button
-    <!--Find appropriate status in target Project -->
+      on:click={(event) => {
-    {#if targetStatus === undefined}
+        showPopup(
-      <div class="flex-row-center">
+          StatusReplacementPopup,
-        <Label label={tracker.string.NoStatusFound} />
+          { statuses, original, selected: replace },
-        <span class="p-1"> => </span>
+          eventToHTMLElement(event),
-      </div>
+          (value) => {
-    {/if}
+            if (value) {
-    <StatusEditor
+              const createStatus = typeof value === 'object'
-      iconSize={'small'}
+              const s = createStatus ? value.create : value
-      shouldShowLabel={true}
+              issueToUpdate.set(issue._id, {
-      value={{
+                ...issueToUpdate.get(issue._id),
-        ...issueToAttachedData(issue),
+                status: s,
-        status: issueToUpdate.get(issue._id)?.status ?? currentProject.defaultIssueStatus,
+                useStatus: true,
-        space: currentProject._id
+                createStatus
+              })
+            }
+          }
+        )
       }}
-      on:change={(evt) => issueToUpdate.set(issue._id, { ...issueToUpdate.get(issue._id), status: evt.detail })}
+    >
-    />
+      <span slot="content" class="flex-row-center pointer-events-none">
+        <StatusRefPresenter value={replace} />
+      </span>
+    </Button>
   </div>
 </div>
 
 <style lang="scss">
-  .no-status {
+  .side-columns {
-    background-color: var(--accent-bg-color);
+    width: 45%;
+  }
+  .middle-column {
+    width: 10%;
+  }
+  .aligned-text {
+    display: flex;
+    align-items: center;
   }
 </style>

plugins/tracker-resources/src/components/issues/move/StatusReplacementPopup.svelte

@@ -0,0 +1,109 @@
+<!--
+// 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 { createEventDispatcher } from 'svelte'
+
+  import { IssueStatus } from '@hcengineering/tracker'
+  import tracker from '../../../plugin'
+  import { StatusPresenter } from '@hcengineering/view-resources'
+  import { Ref } from '@hcengineering/core'
+  import { Icon, IconCheck, Label, Scroller } from '@hcengineering/ui'
+
+  import IssueStatusIcon from '../IssueStatusIcon.svelte'
+
+  export let statuses: IssueStatus[] | undefined
+  export let original: IssueStatus | undefined
+  export let selected: Ref<IssueStatus>
+
+  const dispatch = createEventDispatcher()
+</script>
+
+{#if statuses !== undefined}
+  <div class="selectPopup">
+    <div class="menu-space" />
+    <Scroller>
+      <span class="ml-4">
+        <Label label={tracker.string.Replacement} />
+      </span>
+      <div class="scroll">
+        <div class="box">
+          {#each statuses as status}
+            <button
+              class="menu-item no-focus content-pointer-events-none"
+              on:click={() => {
+                selected = status._id
+                dispatch('close', status._id)
+              }}
+            >
+              <div class="flex-between w-full">
+                <div class="flex-row-center">
+                  <div class="pr-2">
+                    <IssueStatusIcon value={status} size={'small'} />
+                  </div>
+                  <StatusPresenter value={status} />
+                </div>
+                <div class="pointer-events-none">
+                  {#if selected === status._id}
+                    <Icon icon={IconCheck} size={'small'} />
+                  {/if}
+                </div>
+              </div>
+            </button>
+          {/each}
+
+          {#if original !== undefined}
+            <div class="divider mb-4" />
+            <div class="ml-4">
+              <Label label={tracker.string.Original} />
+            </div>
+            <div class="min-width ml-4">
+              <Label label={tracker.string.OriginalDescription} />
+            </div>
+            <button
+              class="menu-item no-focus content-pointer-events-none"
+              on:click={() => {
+                if (original !== undefined) {
+                  selected = original._id
+                  dispatch('close', { create: original._id })
+                }
+              }}
+            >
+              <div class="flex-between w-full">
+                <div class="flex-row-center">
+                  <div class="pr-2">
+                    <IssueStatusIcon value={original} size={'small'} />
+                  </div>
+                  <StatusPresenter value={original} />
+                </div>
+                <div class="pointer-events-none">
+                  {#if selected === original._id}
+                    <Icon icon={IconCheck} size={'small'} />
+                  {/if}
+                </div>
+              </div>
+            </button>
+          {/if}
+        </div>
+      </div>
+    </Scroller>
+    <div class="menu-space" />
+  </div>
+{/if}
+
+<style lang="scss">
+  .divider {
+    border-bottom: 1px solid var(--theme-divider-color);
+  }
+</style>

plugins/tracker-resources/src/plugin.ts

@@ -180,6 +180,13 @@ export default mergeIds(trackerId, tracker, {
     Duplicate: '' as IntlString,
     MoveIssues: '' as IntlString,
     MoveIssuesDescription: '' as IntlString,
+    KeepOriginalAttributes: '' as IntlString,
+    KeepOriginalAttributesTooltip: '' as IntlString,
+    SelectReplacement: '' as IntlString,
+    MissingItem: '' as IntlString,
+    Replacement: '' as IntlString,
+    Original: '' as IntlString,
+    OriginalDescription: '' as IntlString,
 
     TypeIssuePriority: '' as IntlString,
     IssueTitlePlaceholder: '' as IntlString,

plugins/tracker-resources/src/utils.ts

@@ -40,11 +40,13 @@ import { Asset, IntlString } from '@hcengineering/platform'
 import { createQuery } from '@hcengineering/presentation'
 import { calcRank } from '@hcengineering/task'
 import {
+  Component,
   Issue,
   IssuePriority,
   IssuesDateModificationPeriod,
   IssuesGrouping,
   IssuesOrdering,
+  IssueStatus,
   Milestone,
   MilestoneStatus,
   Project,
@@ -653,3 +655,21 @@ export async function getVisibleFilters (filters: KeyFilter[], space?: Ref<Space
   // Removes the "Project" filter if a specific space is provided
   return space === undefined ? filters : filters.filter((f) => f.key !== 'space')
 }
+
+interface ManualUpdates {
+  useStatus: boolean
+  useComponent: boolean
+  createStatus: boolean
+  createComponent: boolean
+}
+export type IssueToUpdate = DocumentUpdate<Issue> & Partial<ManualUpdates>
+
+export interface StatusToUpdate {
+  ref: Ref<IssueStatus>
+  create?: boolean
+}
+
+export interface ComponentToUpdate {
+  ref: Ref<Component>
+  create?: boolean
+}