@iobroker/adapter-react-v5 4.6.6 → 4.6.8

package/Components/JsonConfigComponent/ConfigTable.js

@@ -30,6 +30,9 @@ var _ConfigGeneric2 = _interopRequireDefault(require("./ConfigGeneric"));
 var _ConfigPanel = _interopRequireDefault(require("./ConfigPanel"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } // eslint-disable-next-line import/no-cycle
 var MAX_SIZE = 1024 * 1024; // 1MB
@@ -375,10 +378,16 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
     });
     return _this;
   }
+
+  /**
+   * React lifecycle hook, called once component is mounted
+   * @return {Promise<void>}
+   */
   (0, _createClass2["default"])(ConfigTable, [{
     key: "componentDidMount",
     value: function () {
       var _componentDidMount = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+        var _this2 = this;
         var value;
         return _regenerator["default"].wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -398,6 +407,8 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
                 order: 'asc',
                 iteration: 0,
                 filterOn: []
+              }, function () {
+                return _this2.validateUniqueProps();
               });
             case 5:
             case "end":
@@ -420,7 +431,7 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
   }, {
     key: "itemTable",
     value: function itemTable(attrItem, data, idx) {
-      var _this2 = this;
+      var _this3 = this;
       var value = this.state.value;
       var schema = this.props.schema;
       var schemaForAttribute = schema.items && schema.items.find(function (el) {
@@ -454,21 +465,68 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
         onChange: function onChange(attr, valueChange) {
           var newObj = JSON.parse(JSON.stringify(value));
           newObj[idx][attr] = valueChange;
-          _this2.setState({
+          _this3.setState({
             value: newObj
           }, function () {
-            return _this2.onChangeWrapper(newObj, true);
+            _this3.validateUniqueProps();
+            _this3.onChangeWrapper(newObj, true);
           });
         },
         onError: function onError(error, attr) {
-          return _this2.onError(error, attr);
+          return _this3.onError(error, attr);
         }
       });
     }
+
+    /**
+     * Validate that columns configured in `uniqueColumns` have unique values
+     */
+  }, {
+    key: "validateUniqueProps",
+    value: function validateUniqueProps() {
+      var _this4 = this;
+      if (!this.props.schema.uniqueColumns) {
+        return;
+      }
+      var _iterator = _createForOfIteratorHelper(this.props.schema.uniqueColumns),
+        _step;
+      try {
+        var _loop = function _loop() {
+          var uniqueCol = _step.value;
+          /** @type {string[]} */
+          var allVals = [];
+          var found = _this4.state.value.find(function (entry) {
+            var val = entry[uniqueCol];
+            if (allVals.includes(val)) {
+              _this4.onError(uniqueCol, 'is not unique');
+              _this4.setState({
+                errorMessage: _i18n["default"].t('Non-allowed duplicate entry "%s" in column "%s"', val, uniqueCol)
+              });
+              return true;
+            }
+            allVals.push(val);
+            return false;
+          });
+          if (!found) {
+            _this4.onError(uniqueCol, null);
+            _this4.setState({
+              errorMessage: ''
+            });
+          }
+        };
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          _loop();
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
   }, {
     key: "enhancedTableHead",
     value: function enhancedTableHead(buttonsWidth, doAnyFilterSet) {
-      var _this3 = this;
+      var _this5 = this;
       var _this$props = this.props,
         schema = _this$props.schema,
         classes = _this$props.classes;
@@ -476,7 +534,7 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
         order = _this$state2.order,
         orderBy = _this$state2.orderBy;
       return /*#__PURE__*/_react["default"].createElement(_material.TableHead, null, /*#__PURE__*/_react["default"].createElement(_material.TableRow, null, schema.items && schema.items.map(function (headCell, i) {
-        var _this3$filterRefs$hea;
+        var _this5$filterRefs$hea;
         return /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
           style: {
             width: typeof headCell.width === 'string' && headCell.width.endsWith('%') ? headCell.width : headCell.width
@@ -494,58 +552,58 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
         }, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
           size: "small",
           color: "primary",
-          disabled: !!doAnyFilterSet && !_this3.props.schema.allowAddByFilter,
-          onClick: _this3.onAdd
+          disabled: !!doAnyFilterSet && !_this5.props.schema.allowAddByFilter,
+          onClick: _this5.onAdd
         }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Add, null)))) : null, headCell.sort && /*#__PURE__*/_react["default"].createElement(_material.TableSortLabel, {
           active: true,
           className: _Utils["default"].clsx(orderBy !== headCell.attr && classes.silver),
           direction: orderBy === headCell.attr ? order : 'asc',
           onClick: function onClick() {
-            return _this3.handleRequestSort(headCell.attr);
+            return _this5.handleRequestSort(headCell.attr);
           }
-        }), headCell.filter && _this3.state.filterOn.includes(headCell.attr) ? /*#__PURE__*/_react["default"].createElement(_material.TextField, {
+        }), headCell.filter && _this5.state.filterOn.includes(headCell.attr) ? /*#__PURE__*/_react["default"].createElement(_material.TextField, {
           variant: "standard",
-          ref: _this3.filterRefs[headCell.attr],
+          ref: _this5.filterRefs[headCell.attr],
           onChange: function onChange() {
-            return _this3.applyFilter();
+            return _this5.applyFilter();
           },
           title: _i18n["default"].t('ra_You can filter entries by entering here some text'),
           InputProps: {
-            endAdornment: ((_this3$filterRefs$hea = _this3.filterRefs[headCell.attr]) === null || _this3$filterRefs$hea === void 0 || (_this3$filterRefs$hea = _this3$filterRefs$hea.current) === null || _this3$filterRefs$hea === void 0 || (_this3$filterRefs$hea = _this3$filterRefs$hea.children[0]) === null || _this3$filterRefs$hea === void 0 || (_this3$filterRefs$hea = _this3$filterRefs$hea.children[0]) === null || _this3$filterRefs$hea === void 0 ? void 0 : _this3$filterRefs$hea.value) && /*#__PURE__*/_react["default"].createElement(_material.InputAdornment, {
+            endAdornment: ((_this5$filterRefs$hea = _this5.filterRefs[headCell.attr]) === null || _this5$filterRefs$hea === void 0 || (_this5$filterRefs$hea = _this5$filterRefs$hea.current) === null || _this5$filterRefs$hea === void 0 || (_this5$filterRefs$hea = _this5$filterRefs$hea.children[0]) === null || _this5$filterRefs$hea === void 0 || (_this5$filterRefs$hea = _this5$filterRefs$hea.children[0]) === null || _this5$filterRefs$hea === void 0 ? void 0 : _this5$filterRefs$hea.value) && /*#__PURE__*/_react["default"].createElement(_material.InputAdornment, {
               position: "end"
             }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
               size: "small",
               onClick: function onClick() {
-                _this3.filterRefs[headCell.attr].current.children[0].children[0].value = '';
-                _this3.applyFilter();
+                _this5.filterRefs[headCell.attr].current.children[0].children[0].value = '';
+                _this5.applyFilter();
               }
             }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Close, null)))
           },
           fullWidth: true,
-          placeholder: _this3.getText(headCell.title)
+          placeholder: _this5.getText(headCell.title)
         }) : /*#__PURE__*/_react["default"].createElement("span", {
-          className: _this3.props.classes.headerText
-        }, _this3.getText(headCell.title)), headCell.filter ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
+          className: _this5.props.classes.headerText
+        }, _this5.getText(headCell.title)), headCell.filter ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
           title: _i18n["default"].t('ra_Show/hide filter input'),
           size: "small",
           onClick: function onClick() {
-            var filterOn = (0, _toConsumableArray2["default"])(_this3.state.filterOn);
-            var pos = _this3.state.filterOn.indexOf(headCell.attr);
+            var filterOn = (0, _toConsumableArray2["default"])(_this5.state.filterOn);
+            var pos = _this5.state.filterOn.indexOf(headCell.attr);
             if (pos === -1) {
               filterOn.push(headCell.attr);
             } else {
               filterOn.splice(pos, 1);
             }
-            _this3.setState({
+            _this5.setState({
               filterOn: filterOn
             }, function () {
-              if (pos && _this3.filterRefs[headCell.attr].current.children[0].children[0].value) {
-                _this3.filterRefs[headCell.attr].current.children[0].children[0].value = '';
-                _this3.applyFilter();
+              if (pos && _this5.filterRefs[headCell.attr].current.children[0].children[0].value) {
+                _this5.filterRefs[headCell.attr].current.children[0].children[0].value = '';
+                _this5.applyFilter();
               }
             });
           }
-        }, _this3.state.filterOn.includes(headCell.attr) ? /*#__PURE__*/_react["default"].createElement(_iconsMaterial.FilterAltOff, null) : /*#__PURE__*/_react["default"].createElement(_iconsMaterial.FilterAlt, null)) : null));
+        }, _this5.state.filterOn.includes(headCell.attr) ? /*#__PURE__*/_react["default"].createElement(_iconsMaterial.FilterAltOff, null) : /*#__PURE__*/_react["default"].createElement(_iconsMaterial.FilterAlt, null)) : null));
       }), !schema.noDelete && /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
         style: {
           paddingLeft: 20,
@@ -560,7 +618,7 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
         },
         size: "small",
         onClick: function onClick() {
-          return _this3.setState({
+          return _this5.setState({
             showImportDialog: true
           });
         },
@@ -571,7 +629,7 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
         },
         size: "small",
         onClick: function onClick() {
-          return _this3.onExport();
+          return _this5.onExport();
         },
         title: _i18n["default"].t('ra_Export data to %s file', 'CSV')
       }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Download, null)) : null, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
@@ -611,7 +669,7 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
   }, {
     key: "onImport",
     value: function onImport(text) {
-      var _this4 = this;
+      var _this6 = this;
       var lines = text.split('\n').map(function (line) {
         return line.replace('\r', '').trim();
       });
@@ -626,7 +684,7 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
       lines.forEach(function (line) {
         var parts = line.split(';');
         var obj = {};
-        var _loop = function _loop(_p) {
+        var _loop2 = function _loop2(_p) {
           var value = parts[_p];
           if (value.startsWith('"')) {
             value = value.substring(1);
@@ -641,7 +699,7 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
             parts[_p] = false;
             // eslint-disable-next-line no-restricted-properties
           } else if (window.isFinite(parts[_p])) {
-            var attr = _this4.props.schema.items.find(function (it) {
+            var attr = _this6.props.schema.items.find(function (it) {
               return it.attr === header[_p];
             });
             if (attr && attr.type === 'number') {
@@ -653,7 +711,7 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
           p = _p;
         };
         for (var p = 0; p < parts.length; p++) {
-          _loop(p);
+          _loop2(p);
         }
         values.push(obj);
       });
@@ -677,16 +735,16 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
   }, {
     key: "isAnyFilterSet",
     value: function isAnyFilterSet() {
-      var _this5 = this;
+      var _this7 = this;
       return Object.keys(this.filterRefs).find(function (attr) {
-        var _this5$filterRefs$att;
-        return (_this5$filterRefs$att = _this5.filterRefs[attr].current) === null || _this5$filterRefs$att === void 0 ? void 0 : _this5$filterRefs$att.children[0].children[0].value;
+        var _this7$filterRefs$att;
+        return (_this7$filterRefs$att = _this7.filterRefs[attr].current) === null || _this7$filterRefs$att === void 0 ? void 0 : _this7$filterRefs$att.children[0].children[0].value;
       });
     }
   }, {
     key: "onMoveUp",
     value: function onMoveUp(idx) {
-      var _this6 = this;
+      var _this8 = this;
       var newValue = JSON.parse(JSON.stringify(this.state.value));
       var item = newValue[idx];
       newValue.splice(idx, 1);
@@ -695,15 +753,15 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
         value: newValue,
         iteration: this.state.iteration + 10000
       }, function () {
-        return _this6.applyFilter(false, null, function () {
-          return _this6.onChangeWrapper(newValue);
+        return _this8.applyFilter(false, null, function () {
+          return _this8.onChangeWrapper(newValue);
         });
       });
     }
   }, {
     key: "onMoveDown",
     value: function onMoveDown(idx) {
-      var _this7 = this;
+      var _this9 = this;
       var newValue = JSON.parse(JSON.stringify(this.state.value));
       var item = newValue[idx];
       newValue.splice(idx, 1);
@@ -712,15 +770,15 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
         value: newValue,
         iteration: this.state.iteration + 10000
       }, function () {
-        return _this7.applyFilter(false, null, function () {
-          return _this7.onChangeWrapper(newValue);
+        return _this9.applyFilter(false, null, function () {
+          return _this9.onChangeWrapper(newValue);
         });
       });
     }
   }, {
     key: "onDrop",
     value: function onDrop(acceptedFiles) {
-      var _this8 = this;
+      var _this10 = this;
       var file = acceptedFiles[0];
       var reader = new FileReader();
       reader.onabort = function () {
@@ -737,21 +795,21 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
         var text = new Uint8Array(reader.result).reduce(function (data, _byte) {
           return data + String.fromCharCode(_byte);
         }, '');
-        _this8.onImport(text);
+        _this10.onImport(text);
       };
       reader.readAsArrayBuffer(file);
     }
   }, {
     key: "showTypeOfImportDialog",
     value: function showTypeOfImportDialog() {
-      var _this9 = this;
+      var _this11 = this;
       if (!this.state.showTypeOfImportDialog) {
         return null;
       }
       return /*#__PURE__*/_react["default"].createElement(_material.Dialog, {
         open: !0,
         onClose: function onClose() {
-          return _this9.setState({
+          return _this11.setState({
             showTypeOfImportDialog: false
           });
         },
@@ -761,17 +819,17 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
         color: "primary",
         autoFocus: true,
         onClick: function onClick() {
-          var value = JSON.parse(JSON.stringify(_this9.state.value));
-          _this9.state.showTypeOfImportDialog.forEach(function (obj) {
+          var value = JSON.parse(JSON.stringify(_this11.state.value));
+          _this11.state.showTypeOfImportDialog.forEach(function (obj) {
             return value.push(obj);
           });
-          _this9.setState({
+          _this11.setState({
             value: value,
-            iteration: _this9.state.iteration + 10000,
+            iteration: _this11.state.iteration + 10000,
             showTypeOfImportDialog: false
           }, function () {
-            return _this9.applyFilter(false, null, function () {
-              return _this9.onChangeWrapper(value);
+            return _this11.applyFilter(false, null, function () {
+              return _this11.onChangeWrapper(value);
             });
           });
         }
@@ -780,14 +838,14 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
         color: "secondary",
         autoFocus: true,
         onClick: function onClick() {
-          var value = _this9.state.showTypeOfImportDialog;
-          _this9.setState({
+          var value = _this11.state.showTypeOfImportDialog;
+          _this11.setState({
             value: value,
-            iteration: _this9.state.iteration + 10000,
+            iteration: _this11.state.iteration + 10000,
             showTypeOfImportDialog: false
           }, function () {
-            return _this9.applyFilter(false, null, function () {
-              return _this9.onChangeWrapper(value);
+            return _this11.applyFilter(false, null, function () {
+              return _this11.onChangeWrapper(value);
             });
           });
         }
@@ -796,14 +854,14 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
   }, {
     key: "showImportDialog",
     value: function showImportDialog() {
-      var _this10 = this;
+      var _this12 = this;
       if (!this.state.showImportDialog) {
         return null;
       }
       return /*#__PURE__*/_react["default"].createElement(_material.Dialog, {
         open: !0,
         onClose: function onClose() {
-          return _this10.setState({
+          return _this12.setState({
             showImportDialog: false
           });
         },
@@ -816,43 +874,43 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
         },
         maxSize: MAX_SIZE,
         onDragEnter: function onDragEnter() {
-          return _this10.setState({
+          return _this12.setState({
             uploadFile: 'dragging'
           });
         },
         onDragLeave: function onDragLeave() {
-          return _this10.setState({
+          return _this12.setState({
             uploadFile: true
           });
         },
         onDrop: function onDrop(acceptedFiles, errors) {
-          _this10.setState({
+          _this12.setState({
             uploadFile: false
           });
           if (!acceptedFiles.length) {
             window.alert(errors && errors[0] && errors[0].errors && errors[0].errors[0] && errors[0].errors[0].message || _i18n["default"].t('ra_Cannot upload'));
           } else {
-            _this10.onDrop(acceptedFiles);
+            _this12.onDrop(acceptedFiles);
           }
         }
       }, function (_ref) {
         var getRootProps = _ref.getRootProps,
           getInputProps = _ref.getInputProps;
         return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
-          className: _Utils["default"].clsx(_this10.props.classes.uploadDiv, _this10.state.uploadFile === 'dragging' && _this10.props.classes.uploadDivDragging, _this10.props.classes.dropZone, !_this10.state.icon && _this10.props.classes.dropZoneEmpty)
+          className: _Utils["default"].clsx(_this12.props.classes.uploadDiv, _this12.state.uploadFile === 'dragging' && _this12.props.classes.uploadDivDragging, _this12.props.classes.dropZone, !_this12.state.icon && _this12.props.classes.dropZoneEmpty)
         }, getRootProps()), /*#__PURE__*/_react["default"].createElement("input", getInputProps()), /*#__PURE__*/_react["default"].createElement("div", {
-          className: _Utils["default"].clsx(_this10.props.classes.uploadCenterDiv)
+          className: _Utils["default"].clsx(_this12.props.classes.uploadCenterDiv)
         }, /*#__PURE__*/_react["default"].createElement("div", {
-          className: _this10.props.classes.uploadCenterTextAndIcon
+          className: _this12.props.classes.uploadCenterTextAndIcon
         }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.UploadFile, {
-          className: _this10.props.classes.uploadCenterIcon
+          className: _this12.props.classes.uploadCenterIcon
         }), /*#__PURE__*/_react["default"].createElement("div", {
-          className: _this10.props.classes.uploadCenterText
-        }, _this10.state.uploadFile === 'dragging' ? _i18n["default"].t('ra_Drop file here') : _i18n["default"].t('ra_Place your files here or click here to open the browse dialog')))));
+          className: _this12.props.classes.uploadCenterText
+        }, _this12.state.uploadFile === 'dragging' ? _i18n["default"].t('ra_Drop file here') : _i18n["default"].t('ra_Place your files here or click here to open the browse dialog')))));
       })), /*#__PURE__*/_react["default"].createElement(_material.DialogActions, null, /*#__PURE__*/_react["default"].createElement(_material.Button, {
         variant: "contained",
         onClick: function onClick() {
-          return _this10.setState({
+          return _this12.setState({
             showImportDialog: false
           });
         },
@@ -864,7 +922,7 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
     key: "renderItem",
     value: function renderItem( /* error, disabled, defaultValue */
     ) {
-      var _this11 = this;
+      var _this13 = this;
       var _this$props2 = this.props,
         classes = _this$props2.classes,
         schema = _this$props2.schema;
@@ -899,25 +957,25 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
           return /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
             key: "".concat(headCell.attr, "_").concat(idx),
             align: "left"
-          }, _this11.itemTable(headCell.attr, _this11.state.value[idx], idx));
+          }, _this13.itemTable(headCell.attr, _this13.state.value[idx], idx));
         }), !schema.noDelete && /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
           align: "left",
           className: classes.buttonCell
-        }, !doAnyFilterSet && !_this11.state.orderBy ? i ? /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
+        }, !doAnyFilterSet && !_this13.state.orderBy ? i ? /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
           title: _i18n["default"].t('ra_Move up')
         }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
           size: "small",
           onClick: function onClick() {
-            return _this11.onMoveUp(idx);
+            return _this13.onMoveUp(idx);
           }
         }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.ArrowUpward, null))) : /*#__PURE__*/_react["default"].createElement("div", {
           className: classes.buttonEmpty
-        }) : null, !doAnyFilterSet && !_this11.state.orderBy ? i < visibleValue.length - 1 ? /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
+        }) : null, !doAnyFilterSet && !_this13.state.orderBy ? i < visibleValue.length - 1 ? /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
           title: _i18n["default"].t('ra_Move down')
         }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
           size: "small",
           onClick: function onClick() {
-            return _this11.onMoveDown(idx);
+            return _this13.onMoveDown(idx);
           }
         }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.ArrowDownward, null))) : /*#__PURE__*/_react["default"].createElement("div", {
           className: classes.buttonEmpty
@@ -925,12 +983,12 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
           title: _i18n["default"].t('ra_Delete current row')
         }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
           size: "small",
-          onClick: _this11.onDelete(idx)
-        }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Delete, null))), _this11.props.schema.clone ? /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
+          onClick: _this13.onDelete(idx)
+        }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Delete, null))), _this13.props.schema.clone ? /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
           title: _i18n["default"].t('ra_Clone current row')
         }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
           size: "small",
-          onClick: _this11.onClone(idx)
+          onClick: _this13.onClone(idx)
         }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.ContentCopy, null))) : null));
       }), !schema.noDelete && visibleValue.length >= (schema.showSecondAddAt || 5) ? /*#__PURE__*/_react["default"].createElement(_material.TableRow, null, /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
         colSpan: schema.items.length + 1
@@ -951,9 +1009,21 @@ var ConfigTable = /*#__PURE__*/function (_ConfigGeneric) {
       }, _i18n["default"].t('ra_All items are filtered out'), /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         size: "small",
         onClick: function onClick() {
-          return _this11.applyFilter(true);
+          return _this13.applyFilter(true);
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Close, null)))) : null), schema.help ? /*#__PURE__*/_react["default"].createElement(_material.FormHelperText, null, this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)) : null, this.state.errorMessage ? /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex',
+          padding: '5px'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Warning, {
+        color: "error"
+      }), /*#__PURE__*/_react["default"].createElement("span", {
+        style: {
+          color: 'red',
+          alignSelf: 'center'
         }
-      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Close, null)))) : null), schema.help ? /*#__PURE__*/_react["default"].createElement(_material.FormHelperText, null, this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)) : null);
+      }, this.state.errorMessage)) : null);
     }
   }], [{
     key: "descendingComparator",