Use automatic Title for replicas with separate/VM

When multiple instances are selected and "Separate / VM" is checked, the
title ("notes" field) is set automatically based on each of the names of
the selected instances.

In this case, the "Title" field is disabled and can be re-enabled when
unchecking "Separate / VM".

src/components/organisms/WizardOptions/WizardOptions.tsx

@@ -224,7 +224,16 @@ class WizardOptions extends React.Component<Props> {
 
     if (this.props.wizardType === 'migration' || this.props.wizardType === 'replica'
       || this.props.wizardType === 'migration-destination-options-edit' || this.props.wizardType === 'replica-destination-options-edit') {
-      fieldsSchema.push({ name: 'title', type: 'string' })
+      let titleFieldSchema: Field = { name: 'title', type: 'string' }
+      if (this.props.showSeparatePerVm && this.getFieldValue('separate_vm', true)) {
+        titleFieldSchema = {
+          ...titleFieldSchema,
+          disabled: true,
+          description: 'When using \'Separate Migration/VM\', the title is automatically set based on the names of the selected instances',
+        }
+      }
+
+      fieldsSchema.push(titleFieldSchema)
     }
 
     if (this.props.wizardType === 'replica') {

src/components/pages/WizardPage/WizardPage.tsx

@@ -133,10 +133,15 @@ class WizardPage extends React.Component<Props, State> {
     const selectedInstance = wizardStore.data?.selectedInstances?.[0]
     let title = selectedInstance?.name || selectedInstance?.instance_name || selectedInstance?.id
     if (wizardStore.data?.selectedInstances && wizardStore.data.selectedInstances.length > 1) {
-      title += ` (+${wizardStore.data.selectedInstances.length - 1} more)`
+      const shouldSeparateVm = wizardStore.data.destOptions?.separate_vm || wizardStore.data.destOptions?.separate_vm === undefined
+      if (shouldSeparateVm) {
+        title = 'Automatically Set'
+      } else {
+        title += ` (+${wizardStore.data.selectedInstances.length - 1} more)`
+      }
     }
     this.title = title
-    wizardStore.updateData({ destOptions: { title } })
+    wizardStore.updateDestOptionsRaw('title', title)
   }
 
   @autobind
@@ -334,6 +339,9 @@ class WizardPage extends React.Component<Props, State> {
     wizardStore.updateData({ networks: null })
     wizardStore.clearStorageMap()
     wizardStore.updateDestOptions({ field, value, parentFieldName })
+    if (field.name === 'separate_vm') {
+      this.setTransferItemTitle()
+    }
     // If the field is a string and doesn't have an enum property,
     // we can't call destination options on "change" since too many calls will be made,
     // it also means a potential problem with the server not populating the "enum" prop.
@@ -414,7 +422,7 @@ class WizardPage extends React.Component<Props, State> {
   initializeState(match: any) {
     wizardStore.getUrlState()
     this.setTransferItemTitle()
-    const type = match && match.params && match.params.type
+    const type = match?.params?.type
     if (type === 'migration' || type === 'replica') {
       this.setState({ type })
     }
@@ -508,7 +516,7 @@ class WizardPage extends React.Component<Props, State> {
       }
       case 'dest-options': {
         if (!wizardStore.data?.destOptions?.title) {
-          wizardStore.updateData({ destOptions: { title: this.title } })
+          wizardStore.updateDestOptionsRaw('title', this.title)
         }
         break
       }

src/sources/WizardSource.ts

@@ -120,6 +120,10 @@ class WizardSource {
     const mainItems = await Promise.all(data.selectedInstances.map(async instance => {
       const newData = { ...data }
       newData.selectedInstances = [instance]
+      const newDestOptions: any = { ...newData.destOptions }
+      newDestOptions.title = instance.name || instance.instance_name || instance.id
+      newData.destOptions = newDestOptions
+
       let mainItem: TransferItem | null = null
       try {
         mainItem = await this.create(type, newData, defaultStorage, storageMap, uploadedUserScripts)

src/stores/WizardStore.ts

@@ -159,6 +159,14 @@ class WizardStore {
     this.data.sourceOptions = updateOptions(this.data.sourceOptions, data)
   }
 
+  @action updateDestOptionsRaw(fieldName: string, fieldValue: any) {
+    const currentData = { ...this.data }
+    const currentDestOptions: any = { ...currentData.destOptions }
+    currentDestOptions[fieldName] = fieldValue
+    currentData.destOptions = currentDestOptions
+    this.data = currentData
+  }
+
   @action updateDestOptions(data: {
     field: Field,
     value: any,