@adaptabletools/adaptable 10.0.0-canary.0

package/src/View/Alert/AlertViewPanel.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertViewPanelControl = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const SystemRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/SystemRedux"));
+const AdaptablePopover_1 = require("../AdaptablePopover");
+const AlertsPanel_1 = require("./AlertsPanel");
+const rebass_1 = require("rebass");
+const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
+class AlertViewPanelComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            ShowMessage: false,
+            Alerts: this.props.AdaptableAlerts,
+        };
+    }
+    componentDidUpdate() {
+        if (this.state.Alerts.length != this.props.AdaptableAlerts.length) {
+            this.setState({ ShowMessage: true, Alerts: this.props.AdaptableAlerts });
+        }
+    }
+    render() {
+        let messageType = UIHelper_1.default.getMessageTypeFromAdaptableAlerts(this.props.AdaptableAlerts);
+        let messageTypeColor = UIHelper_1.default.getColorByMessageType(messageType);
+        let alertsPanel = (React.createElement(AlertsPanel_1.AlertsPanel, { Alerts: this.props.AdaptableAlerts, ShowPanel: true, ShowHeader: false, onClearAlert: this.props.onDeleteAlert, onRender: () => this.setState({ ShowMessage: false }), onClearAllAlerts: this.props.onDeleteAllAlert }));
+        let collapsedText = this.props.AdaptableAlerts.length == 0
+            ? '0 Alerts'
+            : this.props.AdaptableAlerts.length == 1
+                ? '1 Alert'
+                : this.props.AdaptableAlerts.length + ' Alerts';
+        let buttonColor = UIHelper_1.default.getButtonColourForAdaptableAlerts(this.props.AdaptableAlerts, messageTypeColor);
+        let buttonTextColor = UIHelper_1.default.getButtonTextColourForArrayandMessageType(this.props.AdaptableAlerts, messageType);
+        const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
+        return (React.createElement(rebass_1.Flex, { alignItems: "stretch", className: `ab-${elementType}__Alert__wrap` },
+            React.createElement(rebass_1.Flex, { style: { borderRadius: 'var(--ab__border-radius)' }, className: `ab-${elementType}__Alert__text`, marginRight: 2, padding: 2, color: buttonTextColor, backgroundColor: buttonColor, fontSize: 'var( --ab-font-size-2)', alignItems: "center" }, collapsedText),
+            this.props.AdaptableAlerts.length > 0 && (React.createElement(rebass_1.Flex, { alignItems: "center" },
+                React.createElement(AdaptablePopover_1.AdaptablePopover, { className: `ab-${elementType}__Alert__info`, headerText: "", 
+                    // tooltipText="Alerts"
+                    bodyText: [alertsPanel], MessageType: messageType, useButton: true, showEvent: 'focus', hideEvent: "blur" })))));
+    }
+}
+function mapStateToProps(state, ownProps) {
+    return {
+        AlertDefinitions: state.Alert.AlertDefinitions,
+        AdaptableAlerts: state.System.AdaptableAlerts,
+    };
+}
+function mapDispatchToProps(dispatch) {
+    return {
+        onDeleteAlert: (alert) => dispatch(SystemRedux.SystemAlertDelete(alert)),
+        onDeleteAllAlert: (alerts) => dispatch(SystemRedux.SystemAlertDeleteAll(alerts)),
+    };
+}
+exports.AlertViewPanelControl = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(AlertViewPanelComponent);

package/src/View/Alert/AlertsPanel.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { AdaptableAlert } from '../../PredefinedConfig/Common/AdaptableAlert';
+export interface AlertsPanelProps extends React.ClassAttributes<AlertsPanel> {
+    Alerts: AdaptableAlert[];
+    ShowPanel: boolean;
+    ShowHeader: boolean;
+    onClearAlert: (alert: AdaptableAlert) => void;
+    onClearAllAlerts: (alerts: AdaptableAlert[]) => void;
+    onRender: () => void;
+}
+export declare class AlertsPanel extends React.Component<AlertsPanelProps, {}> {
+    componentWillUnmount(): void;
+    render(): any;
+}

package/src/View/Alert/AlertsPanel.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertsPanel = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const UIHelper_1 = require("../UIHelper");
+const ButtonPreviewDelete_1 = tslib_1.__importDefault(require("../Components/Buttons/ButtonPreviewDelete"));
+const PanelWithButton_1 = require("../Components/Panels/PanelWithButton");
+const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
+const rebass_1 = require("rebass");
+const icons_1 = tslib_1.__importDefault(require("../../components/icons"));
+const ListGroupItem_1 = tslib_1.__importDefault(require("../../components/List/ListGroupItem"));
+const ListGroup_1 = tslib_1.__importDefault(require("../../components/List/ListGroup"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+class AlertsPanel extends React.Component {
+    componentWillUnmount() {
+        this.props.onRender();
+    }
+    render() {
+        let alerts = this.props.Alerts.map((alert, index) => {
+            let alertHasheader = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(alert.header);
+            const textColor = UIHelper_1.UIHelper.getColorByMessageType(alert.alertDefinition.MessageType);
+            const textStyle = {
+                color: textColor,
+                fill: textColor,
+            };
+            const iconName = UIHelper_1.UIHelper.getGlyphByMessageType(alert.alertDefinition.MessageType);
+            const IconCmp = icons_1.default[iconName];
+            const icon = IconCmp ? React.createElement(IconCmp, null) : null;
+            let alertText = (React.createElement("div", { key: alert.Uuid, style: { maxWidth: '600px', width: '100%' } },
+                React.createElement(rebass_1.Flex, { alignItems: "center", width: "100%" },
+                    React.createElement(rebass_1.Text, { style: textStyle }, icon),
+                    alertHasheader ? (React.createElement("b", { style: { flex: 1 } }, alert.header)) : (React.createElement("div", { style: { fontSize: 10, flex: 1, display: 'inline-block' } }, alert.message)),
+                    React.createElement(ButtonPreviewDelete_1.default, { onClick: () => this.props.onClearAlert(alert), tooltip: "Clear Alert", disabled: false, style: { float: 'left' }, accessLevel: 'Full' })),
+                React.createElement("div", null, alertHasheader && React.createElement("span", { style: { fontSize: 10 } }, alert.message))));
+            return (React.createElement(ListGroupItem_1.default, { factory: "div", key: alert.Uuid || index }, alertText));
+        });
+        let clearAllButton = (React.createElement(SimpleButton_1.default, { onClick: () => this.props.onClearAllAlerts(this.props.Alerts), variant: "raised", tone: "neutral", accessLevel: 'Full' }, "Clear All"));
+        return (React.createElement(PanelWithButton_1.PanelWithButton, { variant: "default", bodyProps: { padding: 0 }, headerText: 'Alerts', button: clearAllButton },
+            React.createElement(ListGroup_1.default, null, alerts)));
+    }
+}
+exports.AlertsPanel = AlertsPanel;

package/src/View/Alert/FlashingAlertEntityRow.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { SharedEntityRowProps } from '../Components/SharedProps/ConfigEntityRowProps';
+export interface FlashingAlertEntityRowProps extends SharedEntityRowProps<FlashingAlertEntityRow> {
+}
+export declare class FlashingAlertEntityRow extends React.Component<FlashingAlertEntityRowProps, {}> {
+    render(): any;
+}

package/src/View/Alert/FlashingAlertEntityRow.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlashingAlertEntityRow = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const EntityListActionButtons_1 = require("../Components/Buttons/EntityListActionButtons");
+const AdaptableObjectRow_1 = require("../Components/AdaptableObjectRow");
+const EntityRowItem_1 = require("../Components/EntityRowItem");
+const Helper_1 = require("../../Utilities/Helpers/Helper");
+class FlashingAlertEntityRow extends React.Component {
+    render() {
+        let flashingAlertDefinition = this.props
+            .adaptableObject;
+        let colItems = Helper_1.cloneObject(this.props.colItems);
+        colItems[0].Content = (React.createElement(EntityRowItem_1.EntityRowItem, { Content: this.props.api.scopeApi.getScopeToString(flashingAlertDefinition.Scope) }));
+        colItems[1].Content = (React.createElement(EntityRowItem_1.EntityRowItem, { Content: this.props.api.alertApi.getAlertRuleDescription(flashingAlertDefinition) }));
+        colItems[2].Content = null;
+        colItems[3].Content = (React.createElement(EntityListActionButtons_1.EntityListActionButtons, { showSuspend: true, suspendableObject: flashingAlertDefinition, confirmDeleteAction: this.props.onDeleteConfirm, showShare: this.props.teamSharingActivated, editClick: () => this.props.onEdit(flashingAlertDefinition), shareClick: (config) => this.props.onShare(config), entityType: this.props.moduleInfo.FriendlyName, accessLevel: this.props.accessLevel, onSuspend: this.props.onSuspend, onUnSuspend: this.props.onUnSuspend }));
+        return (React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { isSuspended: flashingAlertDefinition.IsSuspended, colItems: colItems }));
+    }
+}
+exports.FlashingAlertEntityRow = FlashingAlertEntityRow;

package/src/View/Alert/Wizard/AlertBehaviourWizardSection.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
+declare type AlertBehaviourWizardSectionProps = {
+    onChange: (data: AlertDefinition) => void;
+};
+export declare const renderAlertBehaviourSummary: (alert: AlertDefinition) => JSX.Element;
+export declare const AlertBehaviourWizardSection: (props: AlertBehaviourWizardSectionProps) => JSX.Element;
+export {};

package/src/View/Alert/Wizard/AlertBehaviourWizardSection.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertBehaviourWizardSection = exports.renderAlertBehaviourSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const Tabs_1 = require("../../../components/Tabs");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const CheckBox_1 = require("../../../components/CheckBox");
+const CodeBlock_1 = require("../../../components/CodeBlock");
+const rebass_1 = require("rebass");
+const ValueSelector_1 = require("../../Components/ValueSelector");
+exports.renderAlertBehaviourSummary = (alert) => {
+    const { AlertProperties = {} } = alert;
+    const values = [
+        AlertProperties.PreventEdit ? { label: 'Prevent Cell Edit', id: 'preventCellEdit' } : null,
+        AlertProperties.HighlightCell ? { label: 'Highlight Cell', id: 'highlightCell' } : null,
+        AlertProperties.JumpToCell ? { label: 'Jump To Cell', id: 'jumptocell' } : null,
+        AlertProperties.ShowInDiv
+            ? {
+                label: (React.createElement(React.Fragment, null,
+                    "Show in ",
+                    React.createElement(CodeBlock_1.CodeBlock, null, `<div />`))),
+                id: 'showInDiv',
+            }
+            : null,
+        AlertProperties.LogToConsole ? { label: 'Log To Console', id: 'logtoconsole' } : null,
+    ].filter(Boolean);
+    if (!values.length) {
+        values.push({ label: 'No behaviour selected', id: 'none' });
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ValueSelector_1.ValueOptionsTags, { options: values, value: values.map((v) => v.id), readOnly: true, toIdentifier: (x) => x.id, toLabel: (x) => React.createElement(rebass_1.Text, { fontSize: 2 }, x.label) })));
+};
+exports.AlertBehaviourWizardSection = (props) => {
+    const { data } = OnePageAdaptableWizard_1.useOnePageWizardContext();
+    const { AlertProperties = {} } = data;
+    const onChange = (AlertProperties) => {
+        props.onChange(Object.assign(Object.assign({}, data), { AlertProperties: Object.assign(Object.assign({}, data.AlertProperties), AlertProperties) }));
+    };
+    return (React.createElement(Tabs_1.Tabs, null,
+        React.createElement(Tabs_1.Tabs.Tab, null, "Behaviour"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(CheckBox_1.CheckBox, { style: { alignItems: 'flex-start' }, checked: AlertProperties.PreventEdit, onChange: (PreventEdit) => {
+                    onChange({
+                        PreventEdit,
+                    });
+                } },
+                "Prevent Cell Edit",
+                React.createElement(rebass_1.Text, { fontSize: 2, mt: 1 }, "(automatically undo data change which triggered Alert)")),
+            React.createElement(CheckBox_1.CheckBox, { style: { alignItems: 'flex-start' }, checked: AlertProperties.HighlightCell, onChange: (HighlightCell) => {
+                    onChange({ HighlightCell });
+                } },
+                "Highlight Cell",
+                React.createElement(rebass_1.Text, { fontSize: 2, mt: 1 }, "(using the Alert message type)")),
+            React.createElement(CheckBox_1.CheckBox, { checked: AlertProperties.JumpToCell, onChange: (JumpToCell) => {
+                    onChange({ JumpToCell });
+                } }, "Jump To Cell"),
+            React.createElement(CheckBox_1.CheckBox, { checked: AlertProperties.ShowInDiv, onChange: (ShowInDiv) => {
+                    onChange({ ShowInDiv });
+                } },
+                "Show in separate ",
+                React.createElement(CodeBlock_1.CodeBlock, null, `<div />`),
+                " element"),
+            React.createElement(CheckBox_1.CheckBox, { checked: AlertProperties.LogToConsole, onChange: (LogToConsole) => {
+                    onChange({ LogToConsole });
+                } }, "Log To Console"))));
+};

package/src/View/Alert/Wizard/AlertButtonsEditor.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { AlertButton } from '../../../PredefinedConfig/AlertState';
+import { AdaptableAlert } from '../../../PredefinedConfig/Common/AdaptableAlert';
+import { AdaptableApi } from '../../../Api/AdaptableApi';
+import { AlertButtonContext } from '../../../AdaptableOptions/AlertOptions';
+declare type AlertButtonsEditorProps = {
+    AlertButtons: AlertButton<AlertButtonContext>[];
+    onChange: (buttons: AlertButton<AlertButtonContext>[]) => void;
+    api: AdaptableApi;
+    adaptableAlert: AdaptableAlert;
+};
+export declare const AlertButtonsEditor: (props: AlertButtonsEditorProps) => JSX.Element;
+export {};

package/src/View/Alert/Wizard/AlertButtonsEditor.js

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertButtonsEditor = void 0;
+const tslib_1 = require("tslib");
+const rebass_1 = require("rebass");
+const React = tslib_1.__importStar(require("react"));
+const sentence_case_1 = require("sentence-case");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const CheckBox_1 = require("../../../components/CheckBox");
+const Helper_1 = require("../../../Utilities/Helpers/Helper");
+const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
+const BUTTON_ACTIONS = ['highlight-cell', 'jump-to-cell', 'undo', 'suspend'];
+exports.AlertButtonsEditor = (props) => {
+    const onChange = (newButtons) => {
+        props.onChange(newButtons);
+    };
+    const AlertButtons = Helper_1.cloneObject(props.AlertButtons || []) || [];
+    return (React.createElement(React.Fragment, null,
+        React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
+            React.createElement(rebass_1.Text, { fontSize: 2, mt: 3, mb: 2 }, "Add buttons to Alert, and Actions to perform when button is clicked"),
+            React.createElement(SimpleButton_1.default, { icon: "add", onClick: () => {
+                    onChange([
+                        ...(AlertButtons || []),
+                        {
+                            Label: 'OK',
+                            ButtonStyle: {
+                                variant: 'raised',
+                            },
+                        },
+                    ]);
+                } }, "Add")),
+        AlertButtons.map((button, index) => {
+            var _a, _b;
+            let buttonStyle = button.ButtonStyle;
+            let buttonLabel = button.Label;
+            const btnActions = button.Action
+                ? !Array.isArray(button.Action)
+                    ? [button.Action]
+                    : button.Action
+                : [];
+            // filter out the adaptable standard actions
+            const btnUserFunctions = btnActions.filter((action) => !BUTTON_ACTIONS.includes(action));
+            const setVariant = (variant) => {
+                onChange(AlertButtons.map((btn, i) => {
+                    if (i === index) {
+                        const buttonStyle = Object.assign({}, btn.ButtonStyle);
+                        buttonStyle.variant = variant;
+                        return Object.assign(Object.assign({}, btn), { ButtonStyle: buttonStyle });
+                    }
+                    return btn;
+                }));
+            };
+            const setTone = (tone) => {
+                onChange(AlertButtons.map((btn, i) => {
+                    if (i === index) {
+                        const buttonStyle = Object.assign({}, btn.ButtonStyle);
+                        if (tone == null) {
+                            delete buttonStyle.tone;
+                        }
+                        else {
+                            buttonStyle.tone = tone;
+                        }
+                        return Object.assign(Object.assign({}, btn), { ButtonStyle: buttonStyle });
+                    }
+                    return btn;
+                }));
+            };
+            return (React.createElement(rebass_1.Box, { key: index, marginLeft: 3, style: {
+                    borderTop: index ? '1px dashed var(--ab-color-inputborder)' : '',
+                } },
+                React.createElement(FormLayout_1.default, { marginBottom: 2, paddingTop: 2 },
+                    React.createElement(FormLayout_1.FormRow, { label: React.createElement(rebass_1.Text, { fontSize: 2, style: { whiteSpace: 'nowrap' } }, "Button text") },
+                        React.createElement(rebass_1.Flex, { flexDirection: "row" },
+                            React.createElement(Input_1.default, { value: buttonLabel, style: { width: 80 }, onChange: (e) => {
+                                    onChange(AlertButtons.map((btn, i) => {
+                                        if (i === index) {
+                                            return Object.assign(Object.assign({}, btn), { Label: e.target.value });
+                                        }
+                                        return btn;
+                                    }));
+                                } }),
+                            React.createElement(DropdownButton_1.default, { marginLeft: 2, columns: ['label'], style: { minWidth: 110 }, items: ['text', 'outlined', 'raised'].map((variant) => {
+                                    return {
+                                        label: StringExtensions_1.default.CapitaliseFirstLetter(variant),
+                                        value: variant,
+                                        onClick: () => setVariant(variant),
+                                    };
+                                }) },
+                                React.createElement(rebass_1.Text, { fontSize: 2 },
+                                    "Variant:",
+                                    ' ',
+                                    StringExtensions_1.default.CapitaliseFirstLetter((_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _a !== void 0 ? _a : 'raised'))),
+                            React.createElement(DropdownButton_1.default, { columns: ['label'], marginLeft: 2, style: { minWidth: 120 }, items: [
+                                    { label: 'Use Alert Tone', value: 'text', onClick: () => setTone(null) },
+                                    ...['success', 'info', 'error', 'warning', 'accent', 'neutral'].map((tone) => {
+                                        return {
+                                            label: StringExtensions_1.default.CapitaliseFirstLetter(tone),
+                                            value: tone,
+                                            onClick: () => setTone(tone),
+                                        };
+                                    }),
+                                ] },
+                                React.createElement(rebass_1.Text, { fontSize: 2 },
+                                    "Tone:",
+                                    ' ',
+                                    StringExtensions_1.default.CapitaliseFirstLetter((_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _b !== void 0 ? _b : 'Use alert tone'))),
+                            React.createElement(SimpleButton_1.default, { icon: "clear", tone: "error", disabled: AlertButtons.length <= 1, marginLeft: 1, variant: "text", tooltip: AlertButtons.length <= 1 ? 'Cannot remove last button' : 'Remove button', onClick: () => {
+                                    onChange(AlertButtons.filter((btn) => btn !== button));
+                                } }))),
+                    React.createElement(FormLayout_1.FormRow, { label: React.createElement(rebass_1.Text, { fontSize: 2 }, "Actions") },
+                        BUTTON_ACTIONS.map((actionName) => {
+                            return (React.createElement(CheckBox_1.CheckBox, { key: actionName, marginRight: 3, onChange: (checked) => {
+                                    let actions = btnActions;
+                                    if (!checked) {
+                                        // remove current action
+                                        actions = actions.filter((a) => a !== actionName);
+                                    }
+                                    else {
+                                        actions = [...actions, actionName];
+                                    }
+                                    onChange(AlertButtons.map((btn, i) => {
+                                        if (i === index) {
+                                            return Object.assign(Object.assign({}, btn), { Action: actions.length ? actions : undefined });
+                                        }
+                                        return btn;
+                                    }));
+                                }, checked: button.Action === actionName ||
+                                    (Array.isArray(button.Action) && button.Action.includes(actionName)) },
+                                React.createElement(rebass_1.Text, { fontSize: 2 }, sentence_case_1.sentenceCase(actionName))));
+                        }),
+                        btnUserFunctions.length ? (React.createElement(CheckBox_1.CheckBox, { checked: true, disabled: true },
+                            React.createElement(rebass_1.Text, { fontSize: 2 },
+                                "User function",
+                                btnUserFunctions.length > 1 ? 's' : '',
+                                ":",
+                                ' ',
+                                btnUserFunctions.join(', ')))) : null))));
+        })));
+};

package/src/View/Alert/Wizard/AlertDisplayWizardSection.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
+declare type AlertDisplayWizardSectionProps = {
+    onChange: (data: AlertDefinition) => void;
+};
+export declare const renderAlertDisplaySummary: () => JSX.Element;
+export declare const AlertDisplayWizardSection: (props: AlertDisplayWizardSectionProps) => JSX.Element;
+export {};

package/src/View/Alert/Wizard/AlertDisplayWizardSection.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertDisplayWizardSection = exports.renderAlertDisplaySummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const Tabs_1 = require("../../../components/Tabs");
+const Radio_1 = tslib_1.__importStar(require("../../../components/Radio"));
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const CheckBox_1 = require("../../../components/CheckBox");
+const rebass_1 = require("rebass");
+const AdaptablePopupAlert_1 = require("../../Components/Popups/AdaptablePopupAlert");
+const AlertButtonsEditor_1 = require("./AlertButtonsEditor");
+const CodeBlock_1 = require("../../../components/CodeBlock");
+const DEFAULT_BUTTONS = [
+    {
+        Label: 'OK',
+        ButtonStyle: {
+            variant: 'raised',
+        },
+    },
+];
+exports.renderAlertDisplaySummary = () => {
+    var _a;
+    const { data, api } = OnePageAdaptableWizard_1.useOnePageWizardContext();
+    if (!((_a = data.AlertProperties) === null || _a === void 0 ? void 0 : _a.DisplayNotification)) {
+        return (React.createElement(rebass_1.Text, { fontSize: 2 },
+            "Alert type ",
+            React.createElement(CodeBlock_1.CodeBlock, null, data.MessageType),
+            ". No alert popup will be displayed"));
+    }
+    return React.createElement(AlertPreview, { api: api, alertDefinition: data });
+};
+const AlertPreview = ({ alertDefinition, api, }) => {
+    const mapButtons = React.useCallback((button) => {
+        let buttonStyle = button.ButtonStyle;
+        if (buttonStyle && buttonStyle.tone == null && (alertDefinition === null || alertDefinition === void 0 ? void 0 : alertDefinition.MessageType)) {
+            return Object.assign(Object.assign({}, button), { ButtonStyle: Object.assign({ tone: alertDefinition.MessageType.toLowerCase() }, buttonStyle) });
+        }
+        return button;
+    }, [alertDefinition === null || alertDefinition === void 0 ? void 0 : alertDefinition.MessageType]);
+    const alertToPreview = React.useMemo(() => {
+        var _a;
+        const alertForm = alertDefinition.AlertForm || {};
+        const Buttons = (((_a = alertForm === null || alertForm === void 0 ? void 0 : alertForm.Buttons) === null || _a === void 0 ? void 0 : _a.length) ? alertForm.Buttons : DEFAULT_BUTTONS).map(mapButtons);
+        const result = {
+            header: alertDefinition.MessageType,
+            message: api.alertApi.getAlertDescription(alertDefinition),
+            alertDefinition: Object.assign(Object.assign({}, alertDefinition), { AlertForm: Object.assign(Object.assign({}, alertForm), { Buttons }) }),
+        };
+        return result;
+    }, [alertDefinition]);
+    return (React.createElement(rebass_1.Box, { style: {
+            border: '1px solid var(--ab-color-inputborder)',
+        } },
+        React.createElement(AdaptablePopupAlert_1.AdaptablePopupAlert, { headless: true, adaptableAlert: alertToPreview, api: api, onClose: () => { } })));
+};
+exports.AlertDisplayWizardSection = (props) => {
+    var _a, _b, _c, _d;
+    const { data, api } = OnePageAdaptableWizard_1.useOnePageWizardContext();
+    const messageType = data.MessageType;
+    const adaptableAlert = {
+        header: data.MessageType,
+        message: '',
+        alertDefinition: data,
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Tabs_1.Tabs, null,
+            React.createElement(Tabs_1.Tabs.Tab, null, "Message Type"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(Radio_1.RadioGroup, { value: messageType, name: "messageType", orientation: "vertical", onRadioChange: (MessageType) => {
+                        props.onChange(Object.assign(Object.assign({}, data), { MessageType }));
+                    } },
+                    React.createElement(Radio_1.default, { value: "Info" }, "Info"),
+                    React.createElement(Radio_1.default, { value: "Success" }, "Success"),
+                    React.createElement(Radio_1.default, { value: "Warning" }, "Warning"),
+                    React.createElement(Radio_1.default, { value: "Error" }, "Error")))),
+        React.createElement(Tabs_1.Tabs, { mt: 2, mb: 3, autoFocus: false },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Display options"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(CheckBox_1.CheckBox, { checked: (_a = data.AlertProperties) === null || _a === void 0 ? void 0 : _a.DisplayNotification, onChange: (DisplayNotification) => {
+                        const newAlertDefinition = Object.assign(Object.assign({}, data), { AlertProperties: Object.assign(Object.assign({}, data.AlertProperties), { DisplayNotification }) });
+                        if (!DisplayNotification && typeof newAlertDefinition.AlertForm === 'object') {
+                            delete newAlertDefinition.AlertForm.Buttons;
+                        }
+                        props.onChange(newAlertDefinition);
+                    } }, "Show a Notification when Alert is triggered (with action buttons)"),
+                ((_b = data.AlertProperties) === null || _b === void 0 ? void 0 : _b.DisplayNotification) ? (typeof data.AlertForm === 'string' ? (React.createElement(rebass_1.Text, { fontSize: 2 }, "Alert buttons cannot be customized because form is dynamically driven")) : (React.createElement(AlertButtonsEditor_1.AlertButtonsEditor, { AlertButtons: ((_c = data.AlertForm) === null || _c === void 0 ? void 0 : _c.Buttons) || DEFAULT_BUTTONS, api: api, adaptableAlert: adaptableAlert, onChange: (buttons) => {
+                        props.onChange(Object.assign(Object.assign({}, data), { AlertForm: Object.assign(Object.assign({}, data.AlertForm), { Buttons: buttons }) }));
+                    } }))) : null)),
+        ((_d = data.AlertProperties) === null || _d === void 0 ? void 0 : _d.DisplayNotification) ? (React.createElement(Tabs_1.Tabs, { autoFocus: false },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Alert preview"),
+            React.createElement(Tabs_1.Tabs.Content, null, typeof data.AlertForm === 'string' ? (React.createElement(rebass_1.Text, { fontSize: 2 }, "Preview not available because form is dynamically driven")) : (React.createElement(AlertPreview, { alertDefinition: data, api: api }))))) : null));
+};

package/src/View/Alert/Wizard/AlertRulesWizardSection.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
+declare type AlertRulesWizardSectionProps = {
+    onChange: (data: AlertDefinition) => void;
+};
+export declare const AlertRulesWizardSection: (props: AlertRulesWizardSectionProps) => JSX.Element;
+export declare const renderAlertRulesSummary: (alertDefinition: AlertDefinition) => JSX.Element;
+export {};

package/src/View/Alert/Wizard/AlertRulesWizardSection.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderAlertRulesSummary = exports.AlertRulesWizardSection = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const BaseAlertRulesWizardSection_1 = require("./BaseAlertRulesWizardSection");
+const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
+const CodeBlock_1 = require("../../../components/CodeBlock");
+exports.AlertRulesWizardSection = (props) => {
+    return React.createElement(BaseAlertRulesWizardSection_1.BaseAlertRulesWizardSection, Object.assign({}, props));
+};
+exports.renderAlertRulesSummary = (alertDefinition) => {
+    return (React.createElement(EntityRulesEditor_1.EntityRulesSummary, { data: alertDefinition, renderPredicate: (contents) => {
+            return (React.createElement(React.Fragment, null,
+                "Alert condition ",
+                React.createElement(CodeBlock_1.CodeBlock, null, contents)));
+        }, renderQueryExpression: (contents) => {
+            return (React.createElement(React.Fragment, null,
+                "Alert when",
+                ' ',
+                React.createElement("b", null,
+                    React.createElement(CodeBlock_1.CodeBlock, null, contents))));
+        } }));
+};

package/src/View/Alert/Wizard/AlertScopeWizardSection.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
+declare type AlertScopeWizardSectionProps = {
+    onChange: (data: AlertDefinition) => void;
+};
+export declare const AlertScopeWizardSection: (props: AlertScopeWizardSectionProps) => JSX.Element;
+export {};

package/src/View/Alert/Wizard/AlertScopeWizardSection.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertScopeWizardSection = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const BaseAlertScopeWizardSection_1 = require("./BaseAlertScopeWizardSection");
+exports.AlertScopeWizardSection = (props) => {
+    return React.createElement(BaseAlertScopeWizardSection_1.BaseAlertScopeWizardSection, Object.assign({}, props));
+};

package/src/View/Alert/Wizard/AlertSelectQueryWizard.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { AdaptableWizardStep, AdaptableWizardStepProps } from '../../Wizard/Interface/IAdaptableWizard';
+import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
+export interface AlertSelectQueryWizardProps extends AdaptableWizardStepProps<AlertDefinition> {
+}
+export interface AlertSelectQueryWizardState {
+    HasExpression: boolean;
+}
+export declare class AlertSelectQueryWizard extends React.Component<AlertSelectQueryWizardProps, AlertSelectQueryWizardState> implements AdaptableWizardStep {
+    constructor(props: AlertSelectQueryWizardProps);
+    render(): any;
+    private onOtherExpressionOptionChanged;
+    canNext(): boolean;
+    canBack(): boolean;
+    next(): void;
+    back(): void;
+    getIndexStepIncrement(): 1 | 2;
+    getIndexStepDecrement(): number;
+}

package/src/View/Alert/Wizard/AlertSelectQueryWizard.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertSelectQueryWizard = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const AdaptablePopover_1 = require("../../AdaptablePopover");
+const WizardPanel_1 = tslib_1.__importDefault(require("../../../components/WizardPanel"));
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
+const CheckBox_1 = require("../../../components/CheckBox");
+const rebass_1 = require("rebass");
+const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
+class AlertSelectQueryWizard extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            HasExpression: StringExtensions_1.default.IsNotNullOrEmpty(this.props.data.Rule.BooleanExpression),
+        };
+    }
+    render() {
+        return (React.createElement("div", { "data-name": 'alert-query' },
+            React.createElement(WizardPanel_1.default, null,
+                React.createElement(HelpBlock_1.default, null,
+                    "A Query is used if the alert triggering is dependent on value in other columns in the row.",
+                    React.createElement("br", null),
+                    React.createElement("br", null),
+                    "If so, then alert will only be triggered if the Query evaluates as true."),
+                React.createElement(rebass_1.Flex, { alignItems: "center", flexDirection: "row", marginTop: 2 },
+                    React.createElement(CheckBox_1.CheckBox, { marginRight: 3, marginLeft: 2, onChange: (checked) => this.onOtherExpressionOptionChanged(checked), checked: this.state.HasExpression }, "Use Query"),
+                    ' ',
+                    React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: 'Alert: Query', bodyText: [
+                            'Create a query (in next step) which will stipulate other cell values required for the Alert to be triggered.',
+                        ] })))));
+    }
+    onOtherExpressionOptionChanged(checked) {
+        this.setState({ HasExpression: checked }, () => this.props.updateGoBackState());
+    }
+    canNext() {
+        return true;
+    }
+    canBack() {
+        return true;
+    }
+    next() {
+        // if we have an expression and its null then create an empty one
+        if (!this.state.HasExpression) {
+            this.props.data.Rule.BooleanExpression = undefined;
+        }
+    }
+    back() {
+        /* no implementation */
+    }
+    getIndexStepIncrement() {
+        return this.state.HasExpression ? 1 : 2;
+    }
+    getIndexStepDecrement() {
+        return 1;
+    }
+}
+exports.AlertSelectQueryWizard = AlertSelectQueryWizard;

package/src/View/Alert/Wizard/AlertWizard.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { AdaptableOnePageWizardProps } from '../../Wizard/Interface/IAdaptableWizard';
+import { AlertDefinition } from '../../../types';
+export interface AlertWizardProps extends AdaptableOnePageWizardProps<AlertDefinition> {
+}
+export declare const AlertWizard: (props: AlertWizardProps) => JSX.Element;