react-autoql 3.5.2 → 3.5.3

package/dist/autoql.esm.js

@@ -8300,7 +8300,8 @@ var ChataChart = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "renderStringColumnSelectorContent", function () {
       return /*#__PURE__*/React.createElement("div", {
-        className: "axis-selector-container"
+        className: "axis-selector-container",
+        id: "string-column-selector-content"
       }, /*#__PURE__*/React.createElement("ul", {
         className: "axis-selector-content"
       }, _this.props.dataConfig.stringColumnIndices.map(function (colIndex, i) {
@@ -8468,7 +8469,8 @@ var ChataChart = /*#__PURE__*/function (_Component) {
       }
 
       return /*#__PURE__*/React.createElement("div", {
-        className: "axis-selector-container"
+        className: "axis-selector-container",
+        id: "legend-selector-content"
       }, /*#__PURE__*/React.createElement("ul", {
         className: "axis-selector-content"
       }, _this.props.dataConfig.stringColumnIndices.map(function (colIndex, i) {
@@ -11601,7 +11603,7 @@ var fetchNotificationCount = function fetchNotificationCount(_ref2) {
       Authorization: "Bearer ".concat(token)
     }
   });
-  var url = "".concat(domain, "/autoql/api/v1/data-alerts/notifications/summary/poll?key=").concat(apiKey, "&unacknowledged=").concat(unacknowledged);
+  var url = "".concat(domain, "/autoql/api/v1/data-alerts/notifications/summary?key=").concat(apiKey, "&unacknowledged=").concat(unacknowledged);
   var config = {
     timeout: 180000
   };
@@ -12148,6 +12150,8 @@ var NotificationIcon = /*#__PURE__*/function (_React$Component) {
       count: 0
     });
 
+    _defineProperty(_assertThisInitialized(_this), "timerID", void 0);
+
     _defineProperty(_assertThisInitialized(_this), "componentDidMount", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -12177,6 +12181,7 @@ var NotificationIcon = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "componentWillUnmount", function () {
       _this._isMounted = false;
+      clearInterval(_this.timerID);
     });
 
     _defineProperty(_assertThisInitialized(_this), "getNotificationCount", function (currentCount) {
@@ -12202,35 +12207,46 @@ var NotificationIcon = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "subscribeToNotificationCount", function (count) {
       if (_this._isMounted) {
-        _this.getNotificationCount(count).then(function (newCount) {
-          // Got a new count, now we want to reconnect
-          _this.subscribeToNotificationCount(newCount);
+        /**
+         * For short polling notifications, we needed to set the interval on FE side.
+         * Interval set to trigger every 90 seconds. 
+         */
+        if (_this.timerID) {
+          clearInterval(_this.timerID);
+        }
 
-          _this.FAILED_POLL_ATTEMPTS = 0;
-        }).catch(function (error) {
-          if (_this.FAILED_POLL_ATTEMPTS === 5) {
-            var _error = new Error('There were 5 failed attempts to poll for notifications. Unsubscribing from notification count.');
+        _this.timerID = setInterval(function () {
+          _this.getNotificationCount(count).then(function (newCount) {
+            // Got a new count, now we want to reconnect
+            _this.subscribeToNotificationCount(newCount);
 
-            console.error(_error);
+            _this.FAILED_POLL_ATTEMPTS = 0;
+          }).catch(function (error) {
+            if (_this.FAILED_POLL_ATTEMPTS === 5) {
+              var _error = new Error('There were 5 failed attempts to poll for notifications. Unsubscribing from notification count.');
 
-            _this.props.onErrorCallback(_error);
+              console.error(_error);
 
-            return;
-          } else if (_get(error, 'response.status') == 504) {
-            // Timed out because there were no changes
-            // Let's connect again
-            _this.subscribeToNotificationCount();
-          } else {
-            // Something else went wrong, wait one second and reconnect
-            new Promise(function (resolve) {
-              return setTimeout(resolve, 1000);
-            }).then(function () {
+              _this.props.onErrorCallback(_error);
+
+              clearInterval(_this.timerID);
+              throw new Error(_error);
+            } else if (_get(error, 'response.status') == 504) {
+              // Timed out because there were no changes
+              // Let's connect again
               _this.subscribeToNotificationCount();
-            });
-          }
+            } else {
+              // Something else went wrong, wait one second and reconnect
+              new Promise(function (resolve) {
+                return setTimeout(resolve, 1000);
+              }).then(function () {
+                _this.subscribeToNotificationCount();
+              });
+            }
 
-          _this.FAILED_POLL_ATTEMPTS += 1;
-        });
+            _this.FAILED_POLL_ATTEMPTS += 1;
+          });
+        }, 90 * 1000);
       }
     });
 
@@ -18858,6 +18874,24 @@ _defineProperty(Cascader, "defaultProps", {
   onSeeMoreClick: undefined
 });
 
+function accentColorAssist(col, amt) {
+  var usePound = false;
+
+  if (col[0] == "#") {
+    col = col.slice(1);
+    usePound = true;
+  }
+
+  var num = parseInt(col, 16);
+  var r = (num >> 16) + amt;
+  if (r > 255) r = 255;else if (r < 0) r = 0;
+  var b = (num >> 8 & 0x00FF) + amt;
+  if (b > 255) b = 255;else if (b < 0) b = 0;
+  var g = (num & 0x0000FF) + amt;
+  if (g > 255) g = 255;else if (g < 0) g = 0;
+  return (usePound ? "#" : "") + (g | b << 8 | r << 16).toString(16);
+}
+
 var autoCompleteArray$1 = [];
 
 var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
@@ -18933,9 +18967,13 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
             }
           }
 
+          array.sort(function (a, b) {
+            return a.keyword.toUpperCase() < b.keyword.toUpperCase() ? -1 : a.keyword > b.keyword ? 1 : 0;
+          });
+
           if (_this.props.initFilterText && _this.props.initFilterText !== '') {
             _this.setState({
-              selectedConditions: array.sort(),
+              selectedConditions: array,
               isFetchingConditions: false
             });
 
@@ -18950,7 +18988,7 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
             _this.animateInputTextAndSubmit(_this.props.initFilterText);
           } else {
             _this.setState({
-              selectedConditions: array.sort(),
+              selectedConditions: array,
               inputValue: '',
               isFetchingConditions: false
             });
@@ -18961,9 +18999,14 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function (prevProps, predState) {
+      if (!_isEqual(getThemeConfig(_this.props.themeConfig), getThemeConfig(prevProps.themeConfig))) {
+        setCSSVars(getThemeConfig(_this.props.themeConfig));
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "getSuggestionValue", function (suggestion) {
       var array = _this.state.selectedConditions;
-      var tempId = uuid.v4();
 
       if (array.some(function (item) {
         return item.key === suggestion.name.canonical && item.value === suggestion.name.keyword;
@@ -18971,7 +19014,6 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
         _this.handleShowMessage('warning', 'This condition has already been applied.');
       } else {
         array.push({
-          id: tempId,
           keyword: suggestion.name.keyword,
           value: suggestion.name.keyword,
           show_message: suggestion.name.show_message,
@@ -18981,7 +19023,6 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
         });
 
         _this.setState({
-          selectedConditions: array,
           inputValue: ''
         });
 
@@ -18989,6 +19030,8 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
           conditions: array
         })).then(function () {
           _this.handleShowMessage('lock', "".concat(suggestion.name.keyword, " has been locked"));
+
+          _this.handleFetchFilteredList();
         });
       }
     });
@@ -19026,11 +19069,7 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
       }
 
       var array = _this.state.selectedConditions;
-      array.splice(index, 1);
-
-      _this.setState({
-        selectedConditions: array
-      });
+      array.splice(index, 1); // this.setState({ selectedConditions: array })
 
       _this.handleShowMessage('unlock', 'Filter removed.');
 
@@ -19050,7 +19089,9 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
         }, function () {
           setConditions(_objectSpread2(_objectSpread2({}, getAuthentication(_this.props.authentication)), {}, {
             conditions: _this.state.selectedConditions
-          }));
+          })).then(function () {
+            _this.handleFetchFilteredList();
+          });
 
           if (item.lock_flag === 0) {
             if (sessionConditions == null) sessionConditions = [];
@@ -19178,29 +19219,6 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
       }), " ", _this.state.showMessage.message);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "renderAcceptConditionsButton", function () {
-      return /*#__PURE__*/React.createElement("div", {
-        key: "accept-conditions-btn",
-        className: "react-autoql-accept-conditions-button"
-      }, /*#__PURE__*/React.createElement("span", {
-        onClick: function onClick() {
-          setConditions(_objectSpread2(_objectSpread2({}, getAuthentication(_this.props.authentication)), {}, {
-            conditions: _this.state.selectedConditions
-          })).then(function () {
-            _this.props.onClose(true);
-          }).catch(function (e) {
-            //WIP showErrorMessage
-            console.error(e);
-          });
-        }
-      }, /*#__PURE__*/React.createElement(Icon, {
-        type: "lock",
-        style: {
-          verticalAlign: 'middle'
-        }
-      }), " Save"));
-    });
-
     _defineProperty(_assertThisInitialized(_this), "render", function () {
       var containerWidth = _this.props.containerWidth;
       return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement("div", {
@@ -19247,19 +19265,25 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
         onSuggestionsClearRequested: _this.onSuggestionsClearRequested,
         getSuggestionValue: _this.getSuggestionValue,
         renderSuggestion: function renderSuggestion(suggestion) {
-          return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
-            id: "react-autoql-filter-table",
-            className: "autoql-condition-locking-menu-list"
-          }, /*#__PURE__*/React.createElement("tr", {
-            id: "react-autoql-filter-table-row"
-          }, /*#__PURE__*/React.createElement("td", {
-            id: "react-autoql-filter-table-data",
-            style: {
-              width: 300
-            }
-          }, suggestion.name.keyword), /*#__PURE__*/React.createElement("td", {
-            id: "react-autoql-filter-table-data"
-          }, suggestion.name.show_message))));
+          console.log(suggestion);
+
+          if (!suggestion) {
+            return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("i", null, "No Suggestion Found"));
+          } else {
+            return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
+              id: "react-autoql-filter-table",
+              className: "autoql-condition-locking-menu-list"
+            }, /*#__PURE__*/React.createElement("tr", {
+              id: "react-autoql-filter-table-row"
+            }, /*#__PURE__*/React.createElement("td", {
+              id: "react-autoql-filter-table-data",
+              style: {
+                width: 300
+              }
+            }, suggestion.name.keyword), /*#__PURE__*/React.createElement("td", {
+              id: "react-autoql-filter-table-data"
+            }, suggestion.name.show_message))));
+          }
         },
         inputProps: {
           onChange: _this.onInputChange,
@@ -19312,8 +19336,8 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
             return _this.handlePersistConditionToggle(item, index);
           },
           checked: item.lock_flag,
-          onColor: "#86d3ff",
-          onHandleColor: "#2693e6",
+          onColor: accentColorAssist(getThemeConfig(_this.props.themeConfig).accentColor, 180),
+          onHandleColor: getThemeConfig(getThemeConfig(_this.props.themeConfig)).accentColor,
           uncheckedIcon: false,
           checkedIcon: false,
           boxShadow: "0px 1px 5px rgba(0, 0, 0, 0.6)",
@@ -19363,6 +19387,60 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
   }
 
   _createClass(ConditionLockMenu, [{
+    key: "handleFetchFilteredList",
+    value: function handleFetchFilteredList() {
+      var _this2 = this;
+
+      fetchConditions(_objectSpread2({}, getAuthentication(this.props.authentication))).then(function (response) {
+        var conditions = _get(response, 'data.data.data');
+
+        var array = [];
+
+        for (var i = 0; i < conditions.length; i++) {
+          array.push({
+            id: conditions[i].id,
+            keyword: conditions[i].value,
+            value: conditions[i].value,
+            show_message: conditions[i].show_message,
+            key: conditions[i].key,
+            lock_flag: conditions[i].lock_flag
+          });
+        }
+
+        if (JSON.parse(sessionStorage.getItem("conditions")) !== null) {
+          var sessionConditions = JSON.parse(sessionStorage.getItem("conditions"));
+
+          for (var _i3 = 0; _i3 < sessionConditions.length; _i3++) {
+            array.push({
+              id: sessionConditions[_i3].id,
+              keyword: sessionConditions[_i3].value,
+              value: sessionConditions[_i3].value,
+              show_message: sessionConditions[_i3].show_message,
+              key: sessionConditions[_i3].key,
+              lock_flag: sessionConditions[_i3].lock_flag
+            });
+          }
+        }
+
+        array.sort(function (a, b) {
+          return a.keyword.toUpperCase() < b.keyword.toUpperCase() ? -1 : a.keyword > b.keyword ? 1 : 0;
+        });
+
+        _this2.setState({
+          selectedConditions: array,
+          inputValue: '',
+          isFetchingConditions: false
+        });
+      });
+    }
+    /**
+     * When suggestion is clicked, Autosuggest populates the input
+     * based on the clicked suggestion. Teach Autosuggest how to calculate the
+     * input value for every given suggestion.
+     * @param {*} suggestion
+     */
+
+  }, {
     key: "handleShowMessage",
     value: function handleShowMessage(type, message) {
       var el = document.getElementById('react-autoql-condition-show-message');
@@ -19404,7 +19482,8 @@ _defineProperty(ConditionLockMenu, "propTypes", {
   isOpen: PropTypes.bool,
   onClose: PropTypes.func,
   authentication: authenticationType,
-  initFilterText: PropTypes.string
+  initFilterText: PropTypes.string,
+  themeConfig: themeConfigType
 });
 
 _defineProperty(ConditionLockMenu, "defaultProps", {
@@ -19412,7 +19491,8 @@ _defineProperty(ConditionLockMenu, "defaultProps", {
   onClose: function onClose() {},
   isOpen: false,
   authentication: undefined,
-  initFilterText: undefined
+  initFilterText: undefined,
+  themeConfig: themeConfigDefault
 });
 
 var DataMessenger = /*#__PURE__*/function (_React$Component) {
@@ -19469,8 +19549,7 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
         _this.setState({
           hasError: true
         });
-      } // WIP
-
+      }
 
       try {
         fetchConditions(_objectSpread2({}, getAuthentication(_this.props.authentication))).then(function (response) {
@@ -20243,6 +20322,7 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
           authentication: getAuthentication(getAuthentication(_this.props.authentication)),
           containerWidth: _this.getDrawerWidth(),
           isOpen: _this.state.isFilterLockingMenuOpen,
+          themeConfig: getThemeConfig(getThemeConfig(_this.props.themeConfig)),
           initFilterText: _this.state.selectedValueLabel,
           onClose: function onClose() {
             _this.setState({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-autoql",
-  "version": "3.5.2",
+  "version": "3.5.3",
   "description": "React Widget Library",
   "main": "dist/autoql.cjs.js",
   "module": "dist/autoql.esm.js",