@deephaven/dashboard-core-plugins 0.43.0 → 0.44.1-beta.0

package/dist/panels/FilterSetManager.js

@@ -0,0 +1,689 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+// background click is just a convenience method, not an actual a11y issue
+
+import React, { Component } from 'react';
+import memoizeOne from 'memoize-one';
+import shortid from 'shortid';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { vsEdit, vsGear, vsSave, vsCircleSlash, vsTrash, vsDeviceCamera, dhRefresh, dhNewCircleLargeFilled, vsCircleLargeFilled, vsArrowSmallUp } from '@deephaven/icons';
+import Log from '@deephaven/log';
+import { Button, CardFlip, RadioGroup, RadioItem } from '@deephaven/components';
+import "./FilterSetManager.css";
+var log = Log.module('FilterSetManager');
+var NAME_INPUT_PLACEHOLDER = 'Enter name...';
+var EMPTY_LIST_PLACEHOLDER = 'No Available Filter Sets';
+class FilterSetManager extends Component {
+  static animateScreenFlash() {
+    var _document$querySelect;
+    var overlay = document.createElement('div');
+    overlay.classList.add('screen-flash-overlay');
+    overlay.addEventListener('animationend', () => {
+      // Removing the element removes its event listeners
+      overlay.remove();
+    });
+    (_document$querySelect = document.querySelector('body')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.appendChild(overlay);
+  }
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "renameInputRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "dropdownRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "editDropdownRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "isRenamingExistingSet", memoizeOne((filterSets, renameSet) => renameSet !== undefined && filterSets.some(_ref => {
+      var {
+        id
+      } = _ref;
+      return id === renameSet.id;
+    })));
+    this.handleSettingsCancel = this.handleSettingsCancel.bind(this);
+    this.handleSettingsClick = this.handleSettingsClick.bind(this);
+    this.handleSettingsSave = this.handleSettingsSave.bind(this);
+    this.handleBackgroundClick = this.handleBackgroundClick.bind(this);
+    this.handleEditDropdownChange = this.handleEditDropdownChange.bind(this);
+    this.handleFilterChange = this.handleFilterChange.bind(this);
+    this.handleFilterApply = this.handleFilterApply.bind(this);
+    this.handleCaptureNewSet = this.handleCaptureNewSet.bind(this);
+    this.handleNameInputChange = this.handleNameInputChange.bind(this);
+    this.handleNameInputKeyPress = this.handleNameInputKeyPress.bind(this);
+    this.handleRenameConfirm = this.handleRenameConfirm.bind(this);
+    this.handleRenameCancel = this.handleRenameCancel.bind(this);
+    this.handleRestoreFullStateChange = this.handleRestoreFullStateChange.bind(this);
+    this.handleSetDelete = this.handleSetDelete.bind(this);
+    this.handleSetEdit = this.handleSetEdit.bind(this);
+    this.handleSetUpdate = this.handleSetUpdate.bind(this);
+    this.state = {
+      editId: undefined,
+      renameSet: undefined,
+      nameInputValue: '',
+      nameInputError: undefined,
+      modifiedFilterSets: [],
+      restoreFullState: false
+    };
+  }
+  componentDidMount() {
+    var {
+      isValueShown
+    } = this.props;
+    if (isValueShown) {
+      this.updateSelectedId();
+    } else {
+      this.initSettingsScreen();
+    }
+  }
+  componentDidUpdate(prevProps, prevState) {
+    var {
+      isValueShown,
+      filterSets
+    } = this.props;
+    var {
+      modifiedFilterSets
+    } = this.state;
+    if (prevProps.isValueShown && !isValueShown) {
+      this.initSettingsScreen();
+    }
+    if (this.isNameInputScreen() && !this.isNameInputScreen(prevState)) {
+      this.focusRenameInput();
+    }
+    if (filterSets !== prevProps.filterSets) {
+      if (!isValueShown && filterSets.length > 0 && prevProps.filterSets.length === 0 && modifiedFilterSets.length === 0) {
+        // Filter set added from another panel, flip from the settings side/initial screen to the value side
+        var {
+          onChange: _onChange
+        } = this.props;
+        _onChange({
+          isValueShown: true,
+          selectedId: filterSets[0].id
+        });
+      } else {
+        this.updateSelectedId();
+      }
+    }
+  }
+  initSettingsScreen() {
+    var {
+      filterSets,
+      selectedId
+    } = this.props;
+    log.debug('initSettingsScreen', filterSets, selectedId);
+    this.setState({
+      modifiedFilterSets: [...filterSets],
+      editId: selectedId
+    });
+  }
+
+  // Update selected id without applying the new set on filterSets change
+  updateSelectedId() {
+    var {
+      isValueShown,
+      filterSets,
+      selectedId,
+      onChange
+    } = this.props;
+    log.debug('updateSelectedId', filterSets, selectedId);
+    if (!isValueShown) {
+      return;
+    }
+    if (!filterSets.some(_ref2 => {
+      var {
+        id
+      } = _ref2;
+      return id === selectedId;
+    })) {
+      // Update the selection if selectedId doesn't exist in the list
+      // Flip to the settings side for empty list to show the initial screen
+      var isEmptyList = filterSets.length === 0;
+      onChange({
+        isValueShown: !isEmptyList,
+        selectedId: isEmptyList ? undefined : filterSets[0].id
+      });
+    }
+  }
+  handleEditDropdownChange(event) {
+    var {
+      value: editId
+    } = event.target;
+    this.setState({
+      editId
+    });
+  }
+  handleFilterChange(event) {
+    var {
+      value: selectedId
+    } = event.target;
+    var {
+      isValueShown,
+      onChange
+    } = this.props;
+    this.applyFilterSet(selectedId);
+    onChange({
+      isValueShown,
+      selectedId
+    });
+  }
+  handleFilterApply() {
+    var {
+      selectedId
+    } = this.props;
+    this.applyFilterSet(selectedId);
+  }
+  handleSettingsCancel() {
+    var {
+      onChange,
+      selectedId,
+      filterSets
+    } = this.props;
+    this.setState({
+      modifiedFilterSets: []
+    });
+    // Flip the card to the filter set selection screen if the sets list isn't empty
+    // Otherwise show the initial screen
+    if (filterSets.length > 0) {
+      onChange({
+        isValueShown: true,
+        selectedId
+      });
+    }
+  }
+  handleSettingsSave() {
+    var {
+      onChange,
+      onUpdateSets
+    } = this.props;
+    var {
+      modifiedFilterSets,
+      editId
+    } = this.state;
+    this.setState({
+      modifiedFilterSets: []
+    });
+    log.debug('Update sets', modifiedFilterSets, editId);
+    onUpdateSets(modifiedFilterSets);
+    // Don't flip the card to the filter set selection screen if the updated sets list is empty
+    if (modifiedFilterSets.length > 0) {
+      onChange({
+        isValueShown: true,
+        selectedId: editId
+      });
+    }
+  }
+  handleCaptureNewSet() {
+    var {
+      getFilterState
+    } = this.props;
+    FilterSetManager.animateScreenFlash();
+    var id = shortid();
+    var panels = getFilterState();
+    var renameSet = {
+      id,
+      title: '',
+      panels
+    };
+    log.debug('handleSetCreate', renameSet);
+    this.setState({
+      nameInputValue: '',
+      nameInputError: undefined,
+      renameSet
+    });
+  }
+  handleRenameCancel() {
+    this.setState({
+      renameSet: undefined
+    });
+  }
+  handleRestoreFullStateChange(event) {
+    this.setState({
+      restoreFullState: event.target.value === 'true'
+    });
+  }
+  getNameError(nameInputValue) {
+    var _nameInputValue$trim;
+    var {
+      renameSet,
+      modifiedFilterSets
+    } = this.state;
+    var trimmedName = (_nameInputValue$trim = nameInputValue === null || nameInputValue === void 0 ? void 0 : nameInputValue.trim()) !== null && _nameInputValue$trim !== void 0 ? _nameInputValue$trim : '';
+    if (trimmedName.length === 0) {
+      log.debug('Name cannot be empty', trimmedName);
+      return 'Name cannot be empty';
+    }
+    if (renameSet !== undefined && modifiedFilterSets.some(_ref3 => {
+      var {
+        title,
+        id
+      } = _ref3;
+      return title === trimmedName && id !== renameSet.id;
+    })) {
+      log.debug('Set with this name already exists', trimmedName);
+      return 'Set with this name already exists';
+    }
+    return undefined;
+  }
+  handleRenameConfirm() {
+    var _nameInputValue$trim2;
+    var {
+      nameInputValue,
+      renameSet,
+      modifiedFilterSets,
+      restoreFullState
+    } = this.state;
+    if (renameSet === undefined) {
+      log.error('Renamed set undefined.');
+      return;
+    }
+    var nameInputError = this.getNameError(nameInputValue);
+    log.debug('handleRenameConfirm', nameInputValue, nameInputError);
+    if (nameInputError !== undefined) {
+      this.setState({
+        nameInputError
+      });
+      return;
+    }
+    var trimmedName = (_nameInputValue$trim2 = nameInputValue === null || nameInputValue === void 0 ? void 0 : nameInputValue.trim()) !== null && _nameInputValue$trim2 !== void 0 ? _nameInputValue$trim2 : '';
+    var namedFilterSet = _objectSpread(_objectSpread({}, renameSet), {}, {
+      title: trimmedName,
+      restoreFullState
+    });
+    var selectedIndex = modifiedFilterSets.findIndex(_ref4 => {
+      var {
+        id
+      } = _ref4;
+      return id === renameSet.id;
+    });
+    var updatedModifiedFilterSets = [...modifiedFilterSets];
+    if (selectedIndex >= 0) {
+      updatedModifiedFilterSets[selectedIndex] = namedFilterSet;
+      log.debug('Renamed existing set', updatedModifiedFilterSets);
+    } else {
+      updatedModifiedFilterSets.push(namedFilterSet);
+      log.debug('Added new set to modified sets', updatedModifiedFilterSets);
+    }
+    this.setState({
+      editId: namedFilterSet.id,
+      modifiedFilterSets: updatedModifiedFilterSets,
+      renameSet: undefined
+    });
+  }
+  handleSetDelete() {
+    this.setState(state => {
+      var {
+        editId,
+        modifiedFilterSets: prevFilterSets
+      } = state;
+      var selectedIndex = prevFilterSets.findIndex(_ref5 => {
+        var {
+          id
+        } = _ref5;
+        return id === editId;
+      });
+      if (selectedIndex < 0) {
+        log.error('Unable to find selected filterSet index', prevFilterSets, editId);
+        return null;
+      }
+      var modifiedFilterSets = prevFilterSets.filter(_ref6 => {
+        var {
+          id
+        } = _ref6;
+        return id !== editId;
+      });
+      var newSelectedIndex = Math.max(0, Math.min(modifiedFilterSets.length - 1, selectedIndex - 1));
+      var newSelectedId = modifiedFilterSets.length > 0 ? modifiedFilterSets[newSelectedIndex].id : undefined;
+      log.debug('Deleted selected set', editId, prevFilterSets, modifiedFilterSets);
+      log.debug('New selection', newSelectedIndex, newSelectedId);
+      return {
+        modifiedFilterSets,
+        editId: newSelectedId
+      };
+    });
+  }
+  handleSetUpdate() {
+    var {
+      getFilterState
+    } = this.props;
+    FilterSetManager.animateScreenFlash();
+    var panels = getFilterState();
+    this.setState(_ref7 => {
+      var {
+        modifiedFilterSets: prevFilterSets,
+        editId
+      } = _ref7;
+      if (editId === undefined) {
+        log.error('Filter for update not selected.');
+        return null;
+      }
+      var modifiedFilterSets = [...prevFilterSets];
+      var selectedSetIndex = modifiedFilterSets.findIndex(_ref8 => {
+        var {
+          id
+        } = _ref8;
+        return id === editId;
+      });
+      if (selectedSetIndex < 0) {
+        log.error('Selected set for update not found.');
+        return null;
+      }
+      // Clone selected set to avoid mutation of the props
+      modifiedFilterSets[selectedSetIndex] = _objectSpread(_objectSpread({}, modifiedFilterSets[selectedSetIndex]), {}, {
+        panels
+      });
+      log.debug('Update set', modifiedFilterSets, panels);
+      return {
+        modifiedFilterSets
+      };
+    });
+  }
+  handleSetEdit() {
+    this.setState(_ref9 => {
+      var {
+        editId,
+        modifiedFilterSets
+      } = _ref9;
+      var selectedSet = modifiedFilterSets.find(_ref10 => {
+        var {
+          id
+        } = _ref10;
+        return id === editId;
+      });
+      if (selectedSet === undefined) {
+        log.error('Could not find selected set', editId, modifiedFilterSets);
+        return null;
+      }
+      var {
+        title,
+        restoreFullState = false
+      } = selectedSet;
+      return {
+        nameInputValue: title,
+        nameInputError: undefined,
+        renameSet: selectedSet,
+        restoreFullState
+      };
+    });
+  }
+  handleSettingsClick(event) {
+    event.stopPropagation();
+    var {
+      onChange,
+      selectedId
+    } = this.props;
+    onChange({
+      isValueShown: false,
+      selectedId
+    });
+  }
+  handleBackgroundClick(event) {
+    log.debug('handleBackgroundClick');
+    // allow clicking anywhere in the background to select and focus the input
+    if (event.target !== this.dropdownRef.current) {
+      this.focusInput();
+    }
+  }
+  handleNameInputChange(event) {
+    var {
+      value: nameInputValue
+    } = event.target;
+    var nameInputError = this.getNameError(nameInputValue);
+    this.setState({
+      nameInputValue,
+      nameInputError
+    });
+  }
+  handleNameInputKeyPress(event) {
+    var {
+      key
+    } = event;
+    if (key === 'Enter') {
+      event.preventDefault();
+      this.handleRenameConfirm();
+    }
+  }
+  isNameInputScreen() {
+    var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state;
+    var {
+      renameSet
+    } = state;
+    return renameSet !== undefined;
+  }
+  applyFilterSet(selectedId) {
+    var {
+      onApply,
+      filterSets
+    } = this.props;
+    if (selectedId === undefined) {
+      log.debug('No filter selected');
+      return;
+    }
+    var filterSet = filterSets.find(_ref11 => {
+      var {
+        id
+      } = _ref11;
+      return id === selectedId;
+    });
+    if (filterSet === undefined) {
+      log.debug('Selected id not found in filterSets', selectedId, filterSets);
+      return;
+    }
+    log.debug('Apply filterSet', filterSet);
+    onApply(filterSet);
+  }
+  focusInput() {
+    var _this$dropdownRef$cur;
+    (_this$dropdownRef$cur = this.dropdownRef.current) === null || _this$dropdownRef$cur === void 0 ? void 0 : _this$dropdownRef$cur.focus();
+  }
+  focusRenameInput() {
+    var _this$renameInputRef$;
+    (_this$renameInputRef$ = this.renameInputRef.current) === null || _this$renameInputRef$ === void 0 ? void 0 : _this$renameInputRef$.focus();
+  }
+  render() {
+    var {
+      nameInputValue,
+      nameInputError,
+      editId,
+      renameSet,
+      modifiedFilterSets,
+      restoreFullState
+    } = this.state;
+    var {
+      isValueShown,
+      filterSets,
+      selectedId
+    } = this.props;
+    var isNameInputScreen = this.isNameInputScreen();
+    var isRenamingExistingSet = this.isRenamingExistingSet(modifiedFilterSets, renameSet);
+    var isEmptyEditList = modifiedFilterSets.length === 0;
+    var isInitialScreen = !isNameInputScreen && isEmptyEditList && filterSets.length === 0;
+    var isEditListScreen = !isNameInputScreen && !isInitialScreen;
+    var captureSetIcon = /*#__PURE__*/React.createElement("div", {
+      className: "fa-layers mr-3"
+    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: vsCircleLargeFilled,
+      mask: vsDeviceCamera,
+      transform: "shrink-1 down-5 right-7"
+    }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: dhNewCircleLargeFilled,
+      className: "text-primary",
+      transform: "shrink-6 down-5 right-7"
+    }));
+    var updateSetIcon = /*#__PURE__*/React.createElement("div", {
+      className: "fa-layers"
+    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: vsCircleLargeFilled,
+      mask: vsDeviceCamera,
+      transform: "shrink-1 down-5 right-7"
+    }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: vsArrowSmallUp,
+      transform: "shrink-1 down-5 right-7"
+    }));
+    return /*#__PURE__*/React.createElement("div", {
+      className: "filter-set-manager fill-parent-absolute"
+    }, /*#__PURE__*/React.createElement(CardFlip, {
+      className: "w-100 h-100",
+      isFlipped: isValueShown
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "filter-set-manager-settings-card fill-parent-absolute",
+      key: "front"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "filter-set-manager-card-content"
+    }, isInitialScreen && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+      kind: "ghost",
+      className: "btn btn-link no-underline",
+      onClick: this.handleCaptureNewSet,
+      icon: captureSetIcon
+    }, "Capture filter set"), /*#__PURE__*/React.createElement("div", {
+      className: "py-3  text-muted small"
+    }, "Takes a snapshot of the currently applied filters on all panels, allowing you to restore saved filter sets later.")), isNameInputScreen && /*#__PURE__*/React.createElement("div", {
+      className: "d-flex flex-column justify-content-center",
+      "data-testid": "edit-filter-set-container"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "form-group"
+    }, /*#__PURE__*/React.createElement("label", null, isRenamingExistingSet ? 'Edit set' : 'Name captured set'), /*#__PURE__*/React.createElement("div", {
+      className: "name-input-container"
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "text",
+      className: "input-set-name form-control",
+      placeholder: NAME_INPUT_PLACEHOLDER,
+      value: nameInputValue,
+      ref: this.renameInputRef,
+      onChange: this.handleNameInputChange,
+      onKeyPress: this.handleNameInputKeyPress,
+      spellCheck: "false"
+    }), /*#__PURE__*/React.createElement(Button, {
+      "data-testid": "rename-confirm-button",
+      kind: "ghost",
+      className: "btn btn-link no-underline pt-2 pb-2",
+      onClick: this.handleRenameConfirm,
+      tooltip: "Save",
+      "test-id": "button-save",
+      icon: vsSave
+    }), /*#__PURE__*/React.createElement(Button, {
+      "data-testid": "rename-cancel-button",
+      kind: "ghost",
+      className: "btn btn-link no-underline pt-2 pb-2",
+      onClick: this.handleRenameCancel,
+      tooltip: "Cancel",
+      icon: vsCircleSlash
+    })), nameInputError !== undefined && /*#__PURE__*/React.createElement("div", {
+      className: "error-message"
+    }, nameInputError)), /*#__PURE__*/React.createElement("div", {
+      className: "form-group"
+    }, /*#__PURE__*/React.createElement(RadioGroup, {
+      onChange: this.handleRestoreFullStateChange,
+      value: "".concat(restoreFullState)
+    }, /*#__PURE__*/React.createElement(RadioItem, {
+      value: "false"
+    }, "Restore only filters"), /*#__PURE__*/React.createElement(RadioItem, {
+      value: "true"
+    }, "Restore full table state")))), isEditListScreen && /*#__PURE__*/React.createElement("div", {
+      className: "filter-set-manager-settings-grid-1"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "form-group"
+    }, /*#__PURE__*/React.createElement("label", null, "Edit filter sets"), /*#__PURE__*/React.createElement("div", {
+      className: "filter-select-container"
+    }, /*#__PURE__*/React.createElement("select", {
+      "data-testid": "settings-card-filter-select",
+      ref: this.editDropdownRef,
+      value: editId !== null && editId !== void 0 ? editId : '-1',
+      className: "custom-select filter-value-select",
+      onChange: this.handleEditDropdownChange,
+      disabled: isEmptyEditList
+    }, isEmptyEditList && /*#__PURE__*/React.createElement("option", {
+      value: "-1",
+      disabled: true
+    }, EMPTY_LIST_PLACEHOLDER), modifiedFilterSets.map(_ref12 => {
+      var {
+        id,
+        title
+      } = _ref12;
+      return /*#__PURE__*/React.createElement("option", {
+        key: id,
+        value: id
+      }, title);
+    })), /*#__PURE__*/React.createElement(Button, {
+      kind: "ghost",
+      onClick: this.handleSetUpdate,
+      disabled: isEmptyEditList,
+      icon: updateSetIcon,
+      tooltip: "Update"
+    }), /*#__PURE__*/React.createElement(Button, {
+      kind: "ghost",
+      onClick: this.handleSetEdit,
+      disabled: isEmptyEditList,
+      icon: vsEdit,
+      tooltip: "Edit"
+    }), /*#__PURE__*/React.createElement(Button, {
+      kind: "ghost",
+      onClick: this.handleSetDelete,
+      disabled: isEmptyEditList,
+      icon: vsTrash,
+      tooltip: "Delete"
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+      kind: "ghost",
+      className: "btn btn-link no-underline",
+      onClick: this.handleCaptureNewSet,
+      icon: captureSetIcon
+    }, "Capture new filter set")), /*#__PURE__*/React.createElement("div", {
+      className: "py-3 text-right"
+    }, /*#__PURE__*/React.createElement(Button, {
+      kind: "secondary",
+      onClick: this.handleSettingsCancel
+    }, "Cancel"), "\xA0", /*#__PURE__*/React.createElement(Button, {
+      kind: "primary",
+      onClick: this.handleSettingsSave
+    }, "Save"))))), /*#__PURE__*/React.createElement("div", {
+      className: "filter-set-manager-value-card fill-parent-absolute",
+      key: "back",
+      onClick: this.handleBackgroundClick
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "filter-set-manager-column"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "filter-set-manager-column-title"
+    }, "Filter sets")), /*#__PURE__*/React.createElement("div", {
+      className: "filter-set-manager-card-content"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "filter-set-manager-value-input"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "filter-select-container"
+    }, /*#__PURE__*/React.createElement("select", {
+      "data-testid": "value-card-filter-select",
+      ref: this.dropdownRef,
+      value: selectedId,
+      className: "custom-select filter-value-select",
+      onChange: this.handleFilterChange
+    }, filterSets.length === 0 && /*#__PURE__*/React.createElement("option", {
+      value: "-1",
+      disabled: true
+    }, EMPTY_LIST_PLACEHOLDER), filterSets.map(_ref13 => {
+      var {
+        id,
+        title
+      } = _ref13;
+      return /*#__PURE__*/React.createElement("option", {
+        key: id,
+        value: id
+      }, title);
+    })), /*#__PURE__*/React.createElement(Button, {
+      "data-testid": "filter-apply-button",
+      kind: "ghost",
+      onClick: this.handleFilterApply,
+      icon: dhRefresh,
+      tooltip: "Apply Filter Set"
+    })))), /*#__PURE__*/React.createElement("div", {
+      className: "filter-set-manager-menu"
+    }, /*#__PURE__*/React.createElement(Button, {
+      kind: "ghost",
+      className: "btn btn-link btn-link-icon m-2 px-2",
+      onClick: this.handleSettingsClick,
+      tooltip: "Settings",
+      icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+        icon: vsGear,
+        transform: "grow-4"
+      })
+    })))));
+  }
+}
+export default FilterSetManager;
+//# sourceMappingURL=FilterSetManager.js.map