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

Signed-off-by: Ruslan Bayandinov <wazsone@ya.ru>
2025-04-13 03:40:48 +00:00 · 2023-06-16 12:10:34 +07:00 · 2023-06-16 12:10:34 +07:00 · f1509df325
commit f1509df325
parent 9f26dab1f8
13 changed files with 850 additions and 319 deletions
--- a/plugins/tracker-assets/lang/en.json
+++ b/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...",
--- a/plugins/tracker-assets/lang/ru.json
+++ b/plugins/tracker-assets/lang/ru.json
@ -150,7 +150,14 @@

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

    "Relations": "Зависимости",
    "RemoveRelation": "Удалить зависимость...",
--- a/plugins/tracker-resources/src/components/ComponentSelector.svelte
+++ b/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 (
--- a/plugins/tracker-resources/src/components/issues/Move.svelte
+++ b/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 { SpaceSelect, createQuery, getClient } from '@hcengineering/presentation'
-  import { Component, Issue, Project } from '@hcengineering/tracker'
-  import ui, { Button, Label, Spinner } from '@hcengineering/ui'
+  import { createEventDispatcher } from 'svelte'
+
+  import { Ref, Status } from '@hcengineering/core'
+  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) {
-    for (const c of toMove) {
-      const upd = issueToUpdate.get(c._id) ?? {}
+  $: if (keepOriginalAttribytes) {
+    setOriginalAttributes()
+  } 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) {
-        const cur = components.find((it) => it._id === c.component)
+      if (issue.component !== undefined) {
+        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">
-    <Label label={tracker.string.MoveIssues} />
-  </div>
-  <div class="caption-color mt-4 mb-4">
-    <Label label={tracker.string.MoveIssuesDescription} />
-  </div>
-  <div class="spaceSelect">
-    {#if currentSpace && _class}
-      <SpaceSelect _class={currentSpace._class} label={_class} bind:value={space} />
+  {#if !showManageAttributes}
+    <div class="space-between">
+      <span class="fs-title aligned-text">
+        <Label label={tracker.string.MoveIssues} />
+      </span>
+      <Button icon={IconClose} iconProps={{ size: 'medium' }} kind="transparent" on:click={() => dispatch('close')} />
+    </div>
+
+    <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>
-  <div class="mt-2">
-    <Label label={tracker.string.Issues} />
-  </div>
-  <div class="issues-move flex-col">
-    {#if loading}
-      <Spinner />
-    {:else if toMove.length > 0 && currentSpace}
-      {#each toMove as issue}
-        {@const upd = issueToUpdate.get(issue._id) ?? {}}
-        <div class="issue-move p-3">
-          <div class="flex-row-center p-1">
-            <IssuePresenter value={issue} disabled kind={'list'} />
-            <div class="ml-2 max-w-30">
-              <TitlePresenter disabled value={issue} showParent={false} />
-            </div>
-          </div>
-          {#if issue.space !== currentSpace._id}
-            {#key upd.status}
-              <StatusMovePresenter {issue} {issueToUpdate} currentProject={currentSpace} />
-            {/key}
-            {#key upd.component}
-              <ComponentMovePresenter {issue} {issueToUpdate} currentProject={currentSpace} {components} />
-            {/key}
-            {#if upd.attachedTo === tracker.ids.NoParent && issue.attachedTo !== tracker.ids.NoParent}
-              <div class="p-1 unset-parent">
-                <Label label={tracker.string.SetParent} />
+  {:else}
+    <div class="space-between pb-4">
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <span
+        class="fs-title aligned-text"
+        on:click|stopPropagation={() => (showManageAttributes = !showManageAttributes)}
+      >
+        <Label label={getEmbeddedLabel('<    Manage attributes')} />
+      </span>
+      <Button icon={IconClose} iconProps={{ size: 'medium' }} kind="transparent" on:click={() => dispatch('close')} />
+    </div>
+    <div class="divider" />
+
+    <div class="issues-move flex-col">
+      {#if loading}
+        <Spinner />
+      {:else if toMove.length > 0 && currentSpace}
+        {#each toMove as issue}
+          {@const upd = issueToUpdate.get(issue._id) ?? {}}
+          {@const originalComponent = components.find((it) => it._id === issue.component)}
+          {@const targetComponent = components.find(
+            (it) => it.space === currentSpace?._id && it.label === originalComponent?.label
+          )}
+          {#key keepOriginalAttribytes}
+            {#if issue.space !== currentSpace._id && (upd.status !== undefined || upd.component !== undefined)}
+              <div class="issue-move pb-2">
+                <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}
-        </div>
-      {/each}
-    {/if}
-  </div>
-
-  {#if currentSpace !== undefined}
-    <StatusMove issues={toMove} targetProject={currentSpace} />
-    <ComponentMove issues={toMove} targetProject={currentSpace} {components} />
+          {/key}
+        {/each}
+      {/if}
+    </div>
  {/if}

-  <div class="footer">
-    <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')
+  <div class="space-between mt-4">
+    <div
+      class="aligned-text"
+      use:tooltip={{
+        component: Label,
+        props: { label: tracker.string.KeepOriginalAttributesTooltip }
      }}
-      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;
-    width: 55rem;
+    padding: 1.25rem 1.5rem 1rem;
+    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 {
-      padding: 0.75rem;
-      background-color: var(--body-color);
-      border: 1px solid var(--popup-divider);
-      border-radius: 0.75rem;
+    .aligned-text {
+      display: flex;
+      justify-content: center;
+      align-items: center;
    }

-    .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);
-    }
-
-    .status-option {
-      border: 1px solid var(--popup-divider);
+      border-bottom: 1px solid var(--popup-divider);
    }
  }

-  .unset-parent {
-    background-color: var(--accent-bg-color);
+  .divider {
+    border-bottom: 1px solid var(--theme-divider-color);
+  }
+
+  .disabled {
+    cursor: not-allowed;
+    color: var(--dark-color);
  }
 </style>
--- a/plugins/tracker-resources/src/components/issues/move/ComponentMove.svelte
+++ b/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}
--- a/plugins/tracker-resources/src/components/issues/move/ComponentMovePresenter.svelte
+++ b/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 { issueToAttachedData } from '../../../utils'
-  import ComponentEditor from '../../components/ComponentEditor.svelte'
+
+  import { IssueToUpdate } from '../../../utils'
  import ComponentPresenter from '../../components/ComponentPresenter.svelte'
+  import ComponentReplacementPopup from './ComponentReplacementPopup.svelte'

  export let issue: Issue
-  export let currentProject: Project
-  export let issueToUpdate: Map<Ref<Issue>, DocumentUpdate<Issue>> = new Map()
+  export let targetProject: Project
+  export let issueToUpdate: Map<Ref<Issue>, IssueToUpdate> = new Map()
  export let components: Component[]

-  $: currentComponent = components.find((it) => it._id === issue.component)
-
-  $: targetComponent = components.find((it) => it.space === currentProject._id && it.label === currentComponent?.label)
+  $: current = components.find((it) => it._id === issue.component)
+  $: replace = components.find((it) => it._id === issueToUpdate.get(issue._id)?.component)
 </script>

-{#if currentComponent !== undefined}
-  <div class="flex-row-center p-1" class:no-component={targetComponent === undefined}>
-    <div class="p-1">
-      <ComponentPresenter value={currentComponent} />
+{#if current !== undefined}
+  <div class="flex-row-center p-1">
+    <div class="side-columns aligned-text">
+      <ComponentPresenter value={current} disabled />
    </div>
-
-    <div class="p-1 flex-row-center">
-      <span class="p-1"> => </span>
-      <!--Find appropriate status in target Project -->
-      {#if targetComponent === undefined}
-        <div class="flex-row-center">
-          <div class="mr-2">
-            <Label label={tracker.string.NoComponent} />
-          </div>
-          <span class="p-1"> => </span>
-        </div>
-      {/if}
-      <ComponentEditor
-        shouldShowLabel={true}
-        space={currentProject._id}
-        value={{
-          ...issueToAttachedData(issue),
-          component: issueToUpdate.get(issue._id)?.component || null,
-          space: currentProject._id
+    <span class="middle-column aligned-text">-></span>
+    <div class="side-columns">
+      <Button
+        on:click={(event) => {
+          showPopup(
+            ComponentReplacementPopup,
+            {
+              components: components.filter((it) => it.space === targetProject._id),
+              original: current,
+              selected: replace
+            },
+            eventToHTMLElement(event),
+            (value) => {
+              if (value) {
+                const createComponent = typeof value === 'object'
+                const c = createComponent ? value.create : value
+                issueToUpdate.set(issue._id, {
+                  ...issueToUpdate.get(issue._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 {
-    background-color: var(--accent-bg-color);
+  .side-columns {
+    width: 45%;
+  }
+  .middle-column {
+    width: 10%;
+  }
+  .aligned-text {
+    display: flex;
+    align-items: center;
  }
 </style>
--- a/plugins/tracker-resources/src/components/issues/move/ComponentReplacementPopup.svelte
+++ b/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>
--- a/plugins/tracker-resources/src/components/issues/move/SelectReplacement.svelte
+++ b/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>
--- a/plugins/tracker-resources/src/components/issues/move/StatusMove.svelte
+++ b/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}
--- a/plugins/tracker-resources/src/components/issues/move/StatusMovePresenter.svelte
+++ b/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 { Issue, Project } from '@hcengineering/tracker'
-  import { Label } from '@hcengineering/ui'
-  import { statusStore } from '@hcengineering/view-resources'
-  import tracker from '../../../plugin'
-  import { findTargetStatus, issueToAttachedData } from '../../../utils'
-  import StatusEditor from '../StatusEditor.svelte'
+  import { Ref } from '@hcengineering/core'
+  import { Issue, IssueStatus, Project } from '@hcengineering/tracker'
+  import { Button, eventToHTMLElement, showPopup } from '@hcengineering/ui'
+
+  import { IssueToUpdate } from '../../../utils'
  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 issueToUpdate: Map<Ref<Issue>, DocumentUpdate<Issue>> = new Map()
+  export let targetProject: Project
+  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="p-1">
+<div class="flex-row-center p-1">
+  <div class="side-columns aligned-text">
    <StatusRefPresenter value={issue.status} size={'small'} />
  </div>
-
-  <div class="p-1 flex-row-center">
-    <span class="p-1"> => </span>
-    <!--Find appropriate status in target Project -->
-    {#if targetStatus === undefined}
-      <div class="flex-row-center">
-        <Label label={tracker.string.NoStatusFound} />
-        <span class="p-1"> => </span>
-      </div>
-    {/if}
-    <StatusEditor
-      iconSize={'small'}
-      shouldShowLabel={true}
-      value={{
-        ...issueToAttachedData(issue),
-        status: issueToUpdate.get(issue._id)?.status ?? currentProject.defaultIssueStatus,
-        space: currentProject._id
+  <span class="middle-column aligned-text">-></span>
+  <div class="side-columns">
+    <Button
+      on:click={(event) => {
+        showPopup(
+          StatusReplacementPopup,
+          { statuses, original, selected: replace },
+          eventToHTMLElement(event),
+          (value) => {
+            if (value) {
+              const createStatus = typeof value === 'object'
+              const s = createStatus ? value.create : value
+              issueToUpdate.set(issue._id, {
+                ...issueToUpdate.get(issue._id),
+                status: s,
+                useStatus: true,
+                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 {
-    background-color: var(--accent-bg-color);
+  .side-columns {
+    width: 45%;
+  }
+  .middle-column {
+    width: 10%;
+  }
+  .aligned-text {
+    display: flex;
+    align-items: center;
  }
 </style>
--- a/plugins/tracker-resources/src/components/issues/move/StatusReplacementPopup.svelte
+++ b/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>
--- a/plugins/tracker-resources/src/plugin.ts
+++ b/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,
--- a/plugins/tracker-resources/src/utils.ts
+++ b/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
+}