"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = exports.GroupByExpression = void 0; var _react = _interopRequireWildcard(require("react")); var _i18nReact = require("@kbn/i18n-react"); var _react2 = require("@emotion/react"); var _i18n = require("@kbn/i18n"); var _eui = require("@elastic/eui"); var _constants = require("../constants"); var _components = require("./components"); function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ const GroupByExpression = ({ groupBy, errors, onChangeSelectedTermSize, onChangeSelectedTermField, onChangeSelectedGroupBy, display = 'inline', fields, termSize, termField, customGroupByTypes, popupPosition }) => { const groupByTypes = customGroupByTypes !== null && customGroupByTypes !== void 0 ? customGroupByTypes : _constants.builtInGroupByTypes; const [groupByPopoverOpen, setGroupByPopoverOpen] = (0, _react.useState)(false); const MIN_TERM_SIZE = 1; const MAX_TERM_SIZE = 1000; const firstFieldOption = { text: _i18n.i18n.translate('xpack.triggersActionsUI.common.expressionItems.groupByType.timeFieldOptionLabel', { defaultMessage: 'Select a field' }), value: '' }; const availableFieldOptions = fields.reduce((options, field) => { if (groupByTypes[groupBy].validNormalizedTypes.includes(field.normalizedType)) { options.push({ text: field.name, value: field.name }); } return options; }, [firstFieldOption]); (0, _react.useEffect)(() => { // if current field set doesn't contain selected field, clear selection if (termField && termField.length > 0 && fields.length > 0 && !fields.find(field => field.name === termField)) { onChangeSelectedTermField(''); } }, [termField, fields, onChangeSelectedTermField]); return /*#__PURE__*/_react.default.createElement(_eui.EuiPopover, { button: /*#__PURE__*/_react.default.createElement(_eui.EuiExpression, { description: `${groupByTypes[groupBy].sizeRequired ? _i18n.i18n.translate('xpack.triggersActionsUI.common.expressionItems.groupByType.groupedOverLabel', { defaultMessage: 'grouped over' }) : _i18n.i18n.translate('xpack.triggersActionsUI.common.expressionItems.groupByType.overLabel', { defaultMessage: 'over' })}`, "data-test-subj": "groupByExpression", value: `${groupByTypes[groupBy].text} ${groupByTypes[groupBy].sizeRequired ? `${termSize} ${termField ? `'${termField}'` : ''}` : ''}`, isActive: groupByPopoverOpen || groupBy === 'top' && !(termSize && termField), onClick: () => { setGroupByPopoverOpen(true); }, display: display === 'inline' ? 'inline' : 'columns', isInvalid: !(groupBy === 'all' || termSize && termField) }), isOpen: groupByPopoverOpen, closePopover: () => { setGroupByPopoverOpen(false); }, ownFocus: true, display: display === 'fullWidth' ? 'block' : 'inline-block', anchorPosition: popupPosition !== null && popupPosition !== void 0 ? popupPosition : 'downRight', repositionOnScroll: true }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_components.ClosablePopoverTitle, { onClose: () => setGroupByPopoverOpen(false) }, /*#__PURE__*/_react.default.createElement(_i18nReact.FormattedMessage, { id: "xpack.triggersActionsUI.common.expressionItems.groupByType.overButtonLabel", defaultMessage: "over" })), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, { justifyContent: "spaceBetween" }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, { grow: false }, /*#__PURE__*/_react.default.createElement(_eui.EuiSelect, { "data-test-subj": "overExpressionSelect", value: groupBy, onChange: e => { if (groupByTypes[e.target.value].sizeRequired) { onChangeSelectedTermSize(MIN_TERM_SIZE); onChangeSelectedTermField(''); } else { onChangeSelectedTermSize(undefined); onChangeSelectedTermField(undefined); } onChangeSelectedGroupBy(e.target.value); }, options: Object.values(groupByTypes).map(({ text, value }) => { return { text, value }; }) })), groupByTypes[groupBy].sizeRequired ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, { grow: false }, /*#__PURE__*/_react.default.createElement(_eui.EuiFormRow, { isInvalid: errors.termSize.length > 0, error: errors.termSize }, /*#__PURE__*/_react.default.createElement(_eui.EuiFieldNumber, { "data-test-subj": "fieldsNumberSelect", css: (0, _react2.css)` min-width: 50px; `, isInvalid: errors.termSize.length > 0, value: termSize || '', onChange: e => { const { value } = e.target; const termSizeVal = value !== '' ? parseFloat(value) : undefined; onChangeSelectedTermSize(termSizeVal); }, min: MIN_TERM_SIZE, max: MAX_TERM_SIZE }))), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, { grow: false }, /*#__PURE__*/_react.default.createElement(_eui.EuiFormRow, { isInvalid: errors.termField.length > 0 && termField !== undefined, error: errors.termField }, /*#__PURE__*/_react.default.createElement(_eui.EuiSelect, { "data-test-subj": "fieldsExpressionSelect", value: termField, isInvalid: errors.termField.length > 0 && termField !== undefined, onChange: e => { onChangeSelectedTermField(e.target.value); }, options: availableFieldOptions, onBlur: () => { if (termField === undefined) { onChangeSelectedTermField(''); } } })))) : null))); }; // eslint-disable-next-line import/no-default-export exports.default = exports.GroupByExpression = GroupByExpression;