feat(xo-web/new-vm): populate form with template in URL query (#4500)

Fixes #4494

packages/xo-web/src/xo-app/new-vm/index.js

@@ -237,6 +237,9 @@ class Vif extends BaseComponent {
   const getPool = createGetObject((_, props) => props.location.query.pool)
   const getPools = createGetObjectsOfType('pool')
   const getSrs = createGetObjectsOfType('SR')
+  const getTemplate = createGetObject(
+    (_, props) => props.location.query.template
+  )
   const getTemplates = createGetObjectsOfType('VM-template').sort()
   const getUserSshKeys = createSelector(
     (_, props) => {
@@ -257,6 +260,7 @@ class Vif extends BaseComponent {
       props.pool === undefined // to get objects as a self user
     ),
     srs: getSrs(state, props),
+    template: getTemplate(state, props),
     templates: getTemplates(state, props),
     userSshKeys: getUserSshKeys(state, props),
   })
@@ -280,6 +284,14 @@ export default class NewVm extends BaseComponent {
     this._reset()
   }
 
+  componentDidUpdate(prevProps) {
+    if (
+      get(() => prevProps.template.id) !== get(() => this.props.template.id)
+    ) {
+      this._initTemplate(this.props.template)
+    }
+  }
+
   _getResourceSet = createFinder(
     () => this.props.resourceSets,
     createSelector(
@@ -303,7 +315,7 @@ export default class NewVm extends BaseComponent {
   // Utils -----------------------------------------------------------------------
 
   get _isDiskTemplate() {
-    const { template } = this.state.state
+    const { template } = this.props
     return (
       template &&
       template.template_info.disks.length === 0 &&
@@ -352,13 +364,8 @@ export default class NewVm extends BaseComponent {
   }
 
   _selfCreate = () => {
-    const {
-      CPUs,
-      VDIs,
-      existingDisks,
-      memoryDynamicMax,
-      template,
-    } = this.state.state
+    const { CPUs, VDIs, existingDisks, memoryDynamicMax } = this.state.state
+    const { template } = this.props
     const disksSize = sumBy(VDIs, 'size') + sumBy(existingDisks, 'size')
     const templateDisksSize = sumBy(template.template_info.disks, 'size')
     const templateMemoryDynamicMax = template.memory.dynamic[1]
@@ -473,6 +480,7 @@ export default class NewVm extends BaseComponent {
     })
 
     const resourceSet = this._getResourceSet()
+    const { template } = this.props
 
     const data = {
       affinityHost: state.affinityHost && state.affinityHost.id,
@@ -480,7 +488,7 @@ export default class NewVm extends BaseComponent {
       existingDisks: state.existingDisks,
       installation,
       name_label: state.name_label,
-      template: state.template.id,
+      template: template.id,
       VDIs: state.VDIs,
       VIFs: _VIFs,
       resourceSet: resourceSet && resourceSet.id,
@@ -512,13 +520,19 @@ export default class NewVm extends BaseComponent {
       : createVm(data)
   }
 
+  _onChangeTemplate = template => {
+    const { pathname, query } = this.props.location
+    this.context.router.push({
+      pathname,
+      query: { ...query, template: template && template.id },
+    })
+  }
+
   _initTemplate = template => {
     if (!template) {
       return this._reset()
     }
 
-    this._setState({ template })
-
     const storeState = store.getState()
     const isInResourceSet = this._getIsInResourceSet()
     const { state } = this.state
@@ -571,7 +585,6 @@ export default class NewVm extends BaseComponent {
     this._setState({
       // infos
       name_label,
-      template,
       name_description,
       nameLabels: map(Array(+state.nbVms), (_, index) =>
         replacer({ name_label, name_description, template }, index + 1)
@@ -636,7 +649,7 @@ export default class NewVm extends BaseComponent {
   _getSrPredicate = createSelector(
     this._getIsInPool,
     this._getIsInResourceSet,
-    () => this.state.state.template,
+    () => this.props.template,
     () => this.props.pool === undefined,
     (isInPool, isInResourceSet, template, self) => disk =>
       (self ? isInResourceSet(disk.id) : isInPool(disk)) &&
@@ -654,7 +667,7 @@ export default class NewVm extends BaseComponent {
     this._getIsInPool,
     this._getIsInResourceSet,
     () => this.props.pool === undefined,
-    () => this.state.state.template,
+    () => this.props.template,
     (isInPool, isInResourceSet, self, template) => network =>
       (self ? isInResourceSet(network.id) : isInPool(network)) &&
       template !== undefined &&
@@ -753,12 +766,12 @@ export default class NewVm extends BaseComponent {
   )
 
   _isCoreOs = createSelector(
-    () => this.state.template,
+    () => this.props.template,
     template => template && template.name_label === 'CoreOS'
   )
 
   _isHvm = createSelector(
-    () => this.state.template,
+    () => this.props.template,
     template => template && template.virtualizationMode === 'hvm'
   )
 
@@ -846,6 +859,7 @@ export default class NewVm extends BaseComponent {
   }
   _addVdi = () => {
     const { state } = this.state
+    const { template } = this.props
 
     this._setState({
       VDIs: [
@@ -856,7 +870,7 @@ export default class NewVm extends BaseComponent {
             (state.name_label || 'disk') +
             '_' +
             generateReadableRandomString(5),
-          SR: this._getDefaultSr(state.template),
+          SR: this._getDefaultSr(template),
           type: 'system',
         },
       ],
@@ -870,12 +884,13 @@ export default class NewVm extends BaseComponent {
     })
   }
   _addInterface = () => {
+    const { template } = this.props
     const { state } = this.state
 
     this._setState({
       VIFs: [
         ...state.VIFs,
-        { network: this._getDefaultNetworkIds(state.template)[0] },
+        { network: this._getDefaultNetworkIds(template)[0] },
       ],
     })
   }
@@ -1002,7 +1017,8 @@ export default class NewVm extends BaseComponent {
   // INFO ------------------------------------------------------------------------
 
   _renderInfo = () => {
-    const { name_description, name_label, template } = this.state.state
+    const { name_description, name_label } = this.state.state
+    const { template } = this.props
     return (
       <Section
         icon='new-vm-infos'
@@ -1014,14 +1030,14 @@ export default class NewVm extends BaseComponent {
             <span className={styles.inlineSelect}>
               {this.props.pool ? (
                 <SelectVmTemplate
-                  onChange={this._initTemplate}
+                  onChange={this._onChangeTemplate}
                   placeholder={_('newVmSelectTemplate')}
                   predicate={this._getVmPredicate()}
                   value={template}
                 />
               ) : (
                 <SelectResourceSetsVmTemplate
-                  onChange={this._initTemplate}
+                  onChange={this._onChangeTemplate}
                   placeholder={_('newVmSelectTemplate')}
                   resourceSet={this._getResolvedResourceSet()}
                   value={template}
@@ -1048,17 +1064,14 @@ export default class NewVm extends BaseComponent {
     )
   }
   _isInfoDone = () => {
-    const { template, name_label } = this.state.state
+    const { name_label } = this.state.state
+    const { template } = this.props
     return name_label && template
   }
 
   _renderPerformances = () => {
-    const {
-      coresPerSocket,
-      CPUs,
-      memoryDynamicMax,
-      template,
-    } = this.state.state
+    const { coresPerSocket, CPUs, memoryDynamicMax } = this.state.state
+    const { template } = this.props
     const memoryThreshold = get(() => template.memory.static[0])
 
     return (
@@ -1136,7 +1149,8 @@ export default class NewVm extends BaseComponent {
   }
 
   _renderInstallSettings = () => {
-    const { template, coreOsDefaultTemplateError } = this.state.state
+    const { coreOsDefaultTemplateError } = this.state.state
+    const { template } = this.props
     if (!template) {
       return
     }
@@ -1380,8 +1394,8 @@ export default class NewVm extends BaseComponent {
       installMethod,
       installNetwork,
       sshKeys,
-      template,
     } = this.state.state
+    const { template } = this.props
     switch (installMethod) {
       case 'customConfig':
         return (