fix(xo-web/pool/advanced): show backup/migration network even when deleted

CHANGELOG.unreleased.md

@@ -11,6 +11,8 @@
 
 > Users must be able to say: “I had this issue, happy to know it's fixed”
 
+- [Pool/Advanced] Show pool backup/migration network even if they no longer exist (PR [#7303](https://github.com/vatesfr/xen-orchestra/pull/7303))
+
 ### Packages to release
 
 > When modifying a package, add it here with its release type.
@@ -27,4 +29,6 @@
 
 <!--packages-start-->
 
+- xo-web minor
+
 <!--packages-end-->

packages/xo-web/src/common/intl/messages.js

@@ -903,6 +903,7 @@ const messages = {
   // ----- Pool advanced tab -----
   backupNetwork: 'Backup network',
   crashDumpSr: 'Crash dump SR',
+  defaultMigrationNetwork: 'Default migration network',
   poolEditAll: 'Edit all',
   poolHaStatus: 'High Availability',
   poolHaEnabled: 'Enabled',
@@ -921,9 +922,9 @@ const messages = {
 
   setpoolMaster: 'Master',
   syslogRemoteHost: 'Remote syslog host',
-  defaultMigrationNetwork: 'Default migration network',
   syncNetbox: 'Synchronize with Netbox',
   syncNetboxWarning: 'Are you sure you want to synchronize with Netbox?',
+  updateMissingNetwork: '{networkID} not found, please select a new one',
   // ----- Pool host tab -----
   hostNameLabel: 'Name',
   hostDescription: 'Description',

packages/xo-web/src/xo-app/pool/tab-advanced.js

@@ -4,6 +4,7 @@ import _, { messages } from 'intl'
 import ActionButton from 'action-button'
 import ActionRowButton from 'action-row-button'
 import Component from 'base-component'
+import Copiable from 'copiable'
 import Icon from 'icon'
 import renderXoItem, { Network, Sr } from 'render-xo-item'
 import SelectFiles from 'select-files'
@@ -452,13 +453,22 @@ export default class TabAdvanced extends Component {
                         value={migrationNetwork}
                         xoType='network'
                       >
-                        {migrationNetwork !== undefined ? <Network id={migrationNetwork.id} /> : _('noValue')}
+                        {pool.otherConfig['xo:migrationNetwork'] === undefined ? (
+                          _('noValue')
+                        ) : migrationNetwork !== undefined ? (
+                          <Network id={migrationNetwork.id} />
+                        ) : (
+                          <span className='text-danger'>
+                            {_('updateMissingNetwork', {
+                              networkID: (
+                                <Copiable data={pool.otherConfig['xo:migrationNetwork']}>
+                                  <strong>{pool.otherConfig['xo:migrationNetwork']}</strong>
+                                </Copiable>
+                              ),
+                            })}
+                          </span>
+                        )}
                       </XoSelect>{' '}
-                      {migrationNetwork !== undefined && (
-                        <a role='button' onClick={this._removeMigrationNetwork}>
-                          <Icon icon='remove' />
-                        </a>
-                      )}
                     </td>
                   </tr>
                   <tr>
@@ -470,13 +480,22 @@ export default class TabAdvanced extends Component {
                         value={backupNetwork}
                         xoType='network'
                       >
-                        {backupNetwork !== undefined ? <Network id={backupNetwork.id} /> : _('noValue')}
+                        {pool.otherConfig['xo:backupNetwork'] === undefined ? (
+                          _('noValue')
+                        ) : backupNetwork !== undefined ? (
+                          <Network id={backupNetwork.id} />
+                        ) : (
+                          <span className='text-danger'>
+                            {_('updateMissingNetwork', {
+                              networkID: (
+                                <Copiable data={pool.otherConfig['xo:backupNetwork']}>
+                                  <strong>{pool.otherConfig['xo:backupNetwork']}</strong>
+                                </Copiable>
+                              ),
+                            })}
+                          </span>
+                        )}
                       </XoSelect>{' '}
-                      {backupNetwork !== undefined && (
-                        <a role='button' onClick={this._removeBackupNetwork}>
-                          <Icon icon='remove' />
-                        </a>
-                      )}
                     </td>
                   </tr>
                 </tbody>