fix(xo-web/editable): notify user when undo fails (#4157)

Fixes #3799

CHANGELOG.unreleased.md

@@ -8,6 +8,7 @@
 - [Backup reports] Support metadata backups (PR [#4084](https://github.com/vatesfr/xen-orchestra/pull/4084))
 - [Attach disk] Display warning message when VDI SR is on different host from the other disks [#3911](https://github.com/vatesfr/xen-orchestra/issues/3911) (PR [#4117](https://github.com/vatesfr/xen-orchestra/pull/4117))
 - [Self/New VM] Add network config box to custom cloud-init [#3872](https://github.com/vatesfr/xen-orchestra/issues/3872) (PR [#4150](https://github.com/vatesfr/xen-orchestra/pull/4150))
+- [Editable] Notify user when editable undo fails [#3799](https://github.com/vatesfr/xen-orchestra/issues/3799) (PR [#4150](https://github.com/vatesfr/xen-orchestra/pull/4157))
 
 ### Bug fixes
 

packages/xo-web/src/common/editable/index.js

@@ -150,6 +150,17 @@ class Editable extends Component {
 
   render() {
     const { state, props } = this
+    const { error, saving } = state
+
+    const ErrorTooltip = props =>
+      props.error != null && (
+        <span>
+          {' '}
+          <Tooltip content={error}>
+            <Icon icon='error' />
+          </Tooltip>
+        </span>
+      )
 
     if (!state.editing) {
       const { onUndo, previous } = state
@@ -184,12 +195,11 @@ class Editable extends Component {
             ) : (
               success
             ))}
+          <ErrorTooltip error={error} />
         </span>
       )
     }
 
-    const { error, saving } = state
-
     return (
       <span>
         {this._renderEdition()}
@@ -199,14 +209,7 @@ class Editable extends Component {
             <Icon icon='loading' />
           </span>
         )}
-        {error != null && (
-          <span>
-            {' '}
-            <Tooltip content={error}>
-              <Icon icon='error' />
-            </Tooltip>
-          </span>
-        )}
+        <ErrorTooltip error={error} />
       </span>
     )
   }
@@ -340,7 +343,9 @@ class SimpleSelect_ extends Editable {
     return this.state.value === undefined ? this.props.value : this.state.value
   }
 
-  _onChange = value => this.setState({ value }, this._save)
+  _onChange = value => {
+    this.setState({ value }, this._save)
+  }
 
   _renderDisplay() {
     const { children, optionRenderer, value } = this.props
@@ -450,7 +455,9 @@ export class XoSelect extends Editable {
     )
   }
 
-  _onChange = object => this.setState({ value: object }, object && this._save)
+  _onChange = object => {
+    this.setState({ value: object }, object && this._save)
+  }
 
   _renderEdition() {
     const { saving, xoType, ...props } = this.props