feat(xo-web/backup-ng/new): move VMs' selection to dedicated card (#3338)

See #2711

CHANGELOG.md

@@ -11,6 +11,7 @@
 - [Backup NG form] Display a tip when doing a CR on a thick-provisioned SR [#3291](https://github.com/vatesfr/xen-orchestra/issues/3291) (PR [#3333](https://github.com/vatesfr/xen-orchestra/pull/3333))
 - [SR/new] Add local ext SR type [#3332](https://github.com/vatesfr/xen-orchestra/issues/3332) (PR [#3335](https://github.com/vatesfr/xen-orchestra/pull/3335))
 - [Backup reports] Send report for the interrupted backup jobs on the server startup [#2998](https://github.com/vatesfr/xen-orchestra/issues/#2998) (PR [3164](https://github.com/vatesfr/xen-orchestra/pull/3164) [3154](https://github.com/vatesfr/xen-orchestra/pull/3154))
+- [Backup NG form] Move VMs' selection to a dedicated card [#2711](https://github.com/vatesfr/xen-orchestra/issues/2711) (PR [#3338](https://github.com/vatesfr/xen-orchestra/pull/3338))
 - [Backup NG smart mode] Exclude replicated VMs [#2338](https://github.com/vatesfr/xen-orchestra/issues/2338) (PR [#3312](https://github.com/vatesfr/xen-orchestra/pull/3312))
 
 ### Bug fixes

packages/xo-web/src/xo-app/backup-ng/new/index.js

@@ -584,51 +584,15 @@ export default [
           <Row>
             <Col mediumSize={6}>
               <Card>
-                <CardHeader>
+                <CardHeader>{_('backupName')}*</CardHeader>
-                  {_('backupName')}*
-                  <ActionButton
-                    className='pull-right'
-                    data-mode='smartMode'
-                    handler={effects.toggleMode}
-                    icon={state.smartMode ? 'toggle-on' : 'toggle-off'}
-                    iconColor={state.smartMode ? 'text-success' : undefined}
-                    size='small'
-                  >
-                    {_('smartBackupModeTitle')}
-                  </ActionButton>
-                </CardHeader>
                 <CardBlock>
-                  <FormGroup>
+                  <FormFeedback
-                    <label>
+                    component={Input}
-                      <strong>{_('backupName')}</strong>
+                    message={_('missingBackupName')}
-                    </label>
+                    onChange={effects.setName}
-                    <FormFeedback
+                    error={state.showErrors ? state.missingName : undefined}
-                      component={Input}
+                    value={state.name}
-                      message={_('missingBackupName')}
+                  />
-                      onChange={effects.setName}
-                      error={state.showErrors ? state.missingName : undefined}
-                      value={state.name}
-                    />
-                  </FormGroup>
-                  {state.smartMode ? (
-                    <Upgrade place='newBackup' required={3}>
-                      <SmartBackup />
-                    </Upgrade>
-                  ) : (
-                    <FormGroup>
-                      <label>
-                        <strong>{_('vmsToBackup')}</strong>
-                      </label>
-                      <FormFeedback
-                        component={SelectVm}
-                        message={_('missingVms')}
-                        multi
-                        onChange={effects.setVms}
-                        error={state.showErrors ? state.missingVms : undefined}
-                        value={state.vms}
-                      />
-                    </FormGroup>
-                  )}
                 </CardBlock>
               </Card>
               <FormFeedback
@@ -904,6 +868,37 @@ export default [
               </Card>
             </Col>
             <Col mediumSize={6}>
+              <Card>
+                <CardHeader>
+                  {_('vmsToBackup')}*
+                  <ActionButton
+                    className='pull-right'
+                    data-mode='smartMode'
+                    handler={effects.toggleMode}
+                    icon={state.smartMode ? 'toggle-on' : 'toggle-off'}
+                    iconColor={state.smartMode ? 'text-success' : undefined}
+                    size='small'
+                  >
+                    {_('smartBackupModeTitle')}
+                  </ActionButton>
+                </CardHeader>
+                <CardBlock>
+                  {state.smartMode ? (
+                    <Upgrade place='newBackup' required={3}>
+                      <SmartBackup />
+                    </Upgrade>
+                  ) : (
+                    <FormFeedback
+                      component={SelectVm}
+                      message={_('missingVms')}
+                      multi
+                      onChange={effects.setVms}
+                      error={state.showErrors ? state.missingVms : undefined}
+                      value={state.vms}
+                    />
+                  )}
+                </CardBlock>
+              </Card>
               <Schedules />
             </Col>
           </Row>