@adaptabletools/adaptable 10.0.0-canary.0

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/useSelection.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const useSelection = (columns, defaultValue, fieldName, changeListeners) => {
+    changeListeners = changeListeners || {};
+    const onChange = changeListeners.onChange || ((column, flag) => { });
+    const onBatchChange = changeListeners.onBatchChange || ((flag) => { });
+    const [selected, setSelected] = react_1.useState(columns.reduce((acc, col) => {
+        acc[col.field] = fieldName ? col[fieldName] : defaultValue;
+        return acc;
+    }, {}));
+    const getColumn = (field) => columns.filter((c) => c.field === field)[0];
+    const result = {
+        selected,
+        isSelected: (field) => !!selected[field],
+        isAllSelected: () => Object.keys(selected).length === columns.length,
+        isNoneSelected: () => Object.keys(selected).length === 0,
+        selectColumn: (field) => {
+            if (!selected[field]) {
+                setSelected(Object.assign(Object.assign({}, selected), { [field]: true }));
+                onChange(getColumn(field), true);
+            }
+        },
+        deselectColumn: (field) => {
+            if (selected[field]) {
+                const newSelected = Object.assign({}, selected);
+                delete newSelected[field];
+                setSelected(newSelected);
+                onChange(getColumn(field), false);
+            }
+        },
+        toggleColumn: (field) => {
+            if (result.isSelected(field)) {
+                result.deselectColumn(field);
+            }
+            else {
+                result.selectColumn(field);
+            }
+        },
+        deselectAll: () => {
+            setSelected({});
+            columns.forEach((col) => {
+                onChange(col, false);
+            });
+            onBatchChange(false);
+        },
+        selectAll: () => {
+            setSelected(columns.reduce((acc, col) => {
+                acc[col.field] = true;
+                return acc;
+            }, {}));
+            onBatchChange(true);
+        },
+    };
+    return result;
+};
+exports.default = useSelection;

package/src/View/AdaptableWizardView/helper.d.ts

@@ -0,0 +1,19 @@
+import { GridOptions } from '@ag-grid-community/all-modules';
+export interface WizardDataSourceInfo {
+    columns: string[];
+    data: any[];
+    primaryKey?: string;
+}
+/**
+ * There are two ways in which the datasource can be dropped in the wizard:
+ *
+ * 1. array of objects - eg: [{"lastName":"John","firstName":"Bobson"},{"lastName":"Mike","firstName":"Richardson"},...]
+ * 2. array of arrays - eg: [["lastName","firstName"],["John","Bobson"],["Mike","Richardson"],...]
+ *
+ * Although the second one is more compact, the first one is what we need for the datasource of the grid,
+ * so if we receive v2, we transform it to 1
+ * @param json
+ */
+export declare const prepareDataSource: (json: any, _file?: File) => WizardDataSourceInfo;
+export declare const getColTypeFromValue: (value: any) => string;
+export declare const prepareGridOptions: (dataSourceInfo: WizardDataSourceInfo) => GridOptions;

package/src/View/AdaptableWizardView/helper.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prepareGridOptions = exports.getColTypeFromValue = exports.prepareDataSource = void 0;
+/**
+ * There are two ways in which the datasource can be dropped in the wizard:
+ *
+ * 1. array of objects - eg: [{"lastName":"John","firstName":"Bobson"},{"lastName":"Mike","firstName":"Richardson"},...]
+ * 2. array of arrays - eg: [["lastName","firstName"],["John","Bobson"],["Mike","Richardson"],...]
+ *
+ * Although the second one is more compact, the first one is what we need for the datasource of the grid,
+ * so if we receive v2, we transform it to 1
+ * @param json
+ */
+exports.prepareDataSource = (json, _file) => {
+    if (!Array.isArray(json) || !json.length) {
+        return {
+            primaryKey: undefined,
+            columns: [],
+            data: [],
+        };
+    }
+    let columns = [];
+    let data = [];
+    let primaryKey;
+    if (Array.isArray(json[0])) {
+        // we are in v2, as described above, so this is the list of columns
+        columns = json[0];
+        for (let i = 1, len = json.length; i < len; i++) {
+            const it = json[i];
+            const obj = {};
+            for (let j = 0; j < columns.length; j++) {
+                obj[columns[j]] = it[j];
+            }
+            data.push(obj);
+        }
+    }
+    else {
+        columns = Object.keys(json[0]);
+        data = json;
+    }
+    primaryKey = columns[0];
+    return {
+        primaryKey,
+        columns,
+        data,
+    };
+};
+const typeToColType = {
+    string: 'abColDefString',
+    number: 'abColDefNumber',
+    boolean: 'abColDefBoolean',
+    date: 'abColDefDate',
+};
+const abColDefNumberArray = 'abColDefNumberArray';
+exports.getColTypeFromValue = (value) => {
+    const dataType = typeof value;
+    let columnType = typeToColType[dataType] || typeToColType.string;
+    if (value instanceof Date) {
+        columnType = typeToColType.date;
+    }
+    if (Array.isArray(value) && value.length && typeof value[0] === 'number') {
+        columnType = abColDefNumberArray;
+    }
+    return columnType;
+};
+exports.prepareGridOptions = (dataSourceInfo) => {
+    const firstItem = dataSourceInfo.data[0];
+    const columnDefs = dataSourceInfo.columns.map((columnName) => {
+        const firstItemValue = firstItem[columnName];
+        const columnType = exports.getColTypeFromValue(firstItemValue);
+        return {
+            headerName: columnName,
+            field: columnName,
+            type: columnType,
+            filter: true,
+            sortable: true,
+            enableRowGroup: true,
+            resizable: true,
+            editable: true,
+        };
+    });
+    const gridOptions = {
+        rowData: dataSourceInfo.data,
+        columnDefs,
+        floatingFilter: true,
+        enableRangeSelection: true,
+        rowSelection: 'multiple',
+        rowHeight: 30,
+    };
+    return gridOptions;
+};

package/src/View/AdaptableWizardView/index.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { AdaptableOptions } from '../../AdaptableOptions/AdaptableOptions';
+interface AdaptableWizardViewProps {
+    adaptableOptions?: Omit<AdaptableOptions, 'primaryKey'> & {
+        primaryKey?: string;
+    };
+    onInit: (adaptableOptions: AdaptableOptions) => any;
+    fileContentsToJSON?: (str: string) => Promise<any> | any;
+    readFile?: (file: File) => Promise<any>;
+    fileAccept?: string;
+    helpText?: React.ReactNode;
+    loadingMessage?: ReactNode;
+    defaultActionMessage?: ReactNode;
+    dragOverActionMessage?: ReactNode;
+    fetchData?: () => Promise<Record<string, any>[]>;
+    showFetchDataWizard?: boolean;
+    prepareData?: (data: any, file?: File) => {
+        columns: string[];
+        data: any[];
+        primaryKey?: string;
+    };
+}
+declare const AdaptableWizardView: React.FunctionComponent<AdaptableWizardViewProps>;
+export default AdaptableWizardView;

package/src/View/AdaptableWizardView/index.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const styled_components_1 = require("styled-components");
+const react_1 = require("react");
+const theme_1 = tslib_1.__importDefault(require("../../theme"));
+const FileDroppable_1 = tslib_1.__importDefault(require("../../components/FileDroppable"));
+const helper_1 = require("./helper");
+const rebass_1 = require("rebass");
+const AdaptableConfigurationDialog_1 = tslib_1.__importDefault(require("./AdaptableConfigurationDialog"));
+const AdaptableWizardView = (props) => (React.createElement(styled_components_1.ThemeProvider, { theme: theme_1.default },
+    React.createElement(Wizard, Object.assign({}, props))));
+const initialState = {
+    dropped: false,
+};
+const reducer = (state, action) => {
+    if (action.type === 'DROPPED') {
+        return Object.assign(Object.assign({}, state), { adaptableOptions: action.payload, dropped: true, error: null });
+    }
+    if (action.type === 'ERROR') {
+        return Object.assign(Object.assign({}, state), { dropped: false, error: action.payload });
+    }
+    if (action.type === 'CANCEL') {
+        return Object.assign(Object.assign({}, state), { error: null, dropped: false });
+    }
+    return state;
+};
+const validDataSource = (dataSourceInfo) => {
+    if (!dataSourceInfo || !Array.isArray(dataSourceInfo.columns)) {
+        throw `We can't find any columns in your configuration`;
+    }
+    if (!dataSourceInfo.columns.length) {
+        throw 'You should have at least one column';
+    }
+    const allStringColumns = dataSourceInfo.columns.reduce((acc, col) => {
+        if (!col || typeof col !== 'string') {
+            return false;
+        }
+        return acc;
+    }, true);
+    if (!allStringColumns) {
+        throw `Some of your columns are not strings`;
+    }
+    if (!Array.isArray(dataSourceInfo.data)) {
+        throw `We can't find the data array in your configuration`;
+    }
+    return true;
+};
+const Wizard = (props) => {
+    const [state, dispatch] = react_1.useReducer(reducer, Object.assign(Object.assign({}, initialState), { adaptableOptions: props.adaptableOptions }));
+    const [droppableKey, setDroppableKey] = react_1.useState(Date.now());
+    const [isDataLoading, setIsDataLoading] = react_1.useState(false);
+    const handleDataSource = (array, file) => {
+        const dataSourceInfo = (props.prepareData || helper_1.prepareDataSource)(array, file);
+        try {
+            validDataSource(dataSourceInfo);
+        }
+        catch (err) {
+            return dispatch({
+                type: 'ERROR',
+                payload: `Invalid adaptable configuration - ${err}`,
+            });
+        }
+        const gridOptions = helper_1.prepareGridOptions(dataSourceInfo);
+        const adaptableOptions = Object.assign({}, props.adaptableOptions);
+        adaptableOptions.adaptableId = adaptableOptions.adaptableId || (file ? file.name : '');
+        adaptableOptions.vendorGrid = gridOptions;
+        if (dataSourceInfo.primaryKey) {
+            adaptableOptions.primaryKey = dataSourceInfo.primaryKey;
+        }
+        const shouldShowWizard = props.fetchData ? Boolean(props.showFetchDataWizard) : true;
+        if (shouldShowWizard) {
+            dispatch({
+                type: 'DROPPED',
+                payload: adaptableOptions,
+            });
+        }
+        else {
+            props.onInit(adaptableOptions);
+        }
+    };
+    let wizard;
+    if (state.dropped) {
+        wizard = (React.createElement(AdaptableConfigurationDialog_1.default, { adaptableOptions: state.adaptableOptions, onCancel: () => {
+                // change the file droppable component key
+                // so it's remounted and it's in the initial state
+                setDroppableKey(Date.now());
+                dispatch({
+                    type: 'CANCEL',
+                });
+            }, onFinish: (adaptableOptions) => {
+                props.onInit(adaptableOptions);
+            } }));
+    }
+    react_1.useEffect(() => {
+        if (props.fetchData) {
+            setIsDataLoading(true);
+            props.fetchData().then((data) => {
+                handleDataSource(data);
+                setIsDataLoading(false);
+            });
+        }
+    }, []);
+    const ddEnabled = !props.fetchData;
+    return (React.createElement(React.Fragment, null,
+        ddEnabled && (React.createElement(FileDroppable_1.default, { key: droppableKey, className: 'ab-nocode-wizard', toJSON: props.fileContentsToJSON, readFile: props.readFile, fileAccept: props.fileAccept, helpText: props.helpText, message: state.error, defaultText: props.defaultActionMessage, dragOverText: props.dragOverActionMessage, loadingText: props.loadingMessage, onDropSuccess: handleDataSource })),
+        isDataLoading && (React.createElement(rebass_1.Flex, { className: 'ab-nocode-wizard', alignItems: "center", justifyContent: "center", flexDirection: "column" }, props.loadingMessage || 'Loading ...')),
+        wizard));
+};
+exports.default = AdaptableWizardView;

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { SharedEntityRowProps } from '../Components/SharedProps/ConfigEntityRowProps';
+import { AlertDefinition } from '../../PredefinedConfig/AlertState';
+import { AdaptableMessageType } from '../../PredefinedConfig/Common/AdaptableMessageType';
+export interface AlertEntityRowProps extends SharedEntityRowProps<AlertEntityRow> {
+    onChangeMessageType: (alertDefinition: AlertDefinition, Type: AdaptableMessageType) => void;
+}
+export declare class AlertEntityRow extends React.Component<AlertEntityRowProps, {}> {
+    render(): any;
+    onMessageTypeChanged(alertDefinition: AlertDefinition, value: AdaptableMessageType): void;
+}

package/src/View/Alert/AlertEntityRow.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertEntityRow = 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 DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
+const Helper_1 = require("../../Utilities/Helpers/Helper");
+class AlertEntityRow extends React.Component {
+    render() {
+        let alertDefinition = this.props.adaptableObject;
+        let messageTypes = ['Info', 'Success', 'Warning', 'Error'];
+        let colItems = Helper_1.cloneObject(this.props.colItems);
+        colItems[0].Content = (React.createElement(EntityRowItem_1.EntityRowItem, { Content: this.props.api.scopeApi.getScopeToString(alertDefinition.Scope) }));
+        colItems[1].Content = (React.createElement(EntityRowItem_1.EntityRowItem, { Content: this.props.api.alertApi.getAlertRuleDescription(alertDefinition) }));
+        colItems[2].Content = (React.createElement("div", null,
+            React.createElement(DropdownButton_1.default, { showClearButton: false, items: messageTypes.map((item) => ({
+                    value: item,
+                    label: item,
+                    onClick: () => this.onMessageTypeChanged(alertDefinition, item),
+                })), columns: ['label'], accessLevel: this.props.accessLevel }, alertDefinition.MessageType)));
+        colItems[3].Content = (React.createElement(EntityListActionButtons_1.EntityListActionButtons, { showSuspend: true, suspendableObject: alertDefinition, confirmDeleteAction: this.props.onDeleteConfirm, showShare: this.props.teamSharingActivated, editClick: () => this.props.onEdit(alertDefinition), shareClick: (config) => this.props.onShare(config), 
+            //overrideDisableEdit={!this.props.Column}
+            entityType: this.props.moduleInfo.FriendlyName, accessLevel: this.props.accessLevel, onSuspend: this.props.onSuspend, onUnSuspend: this.props.onUnSuspend }));
+        return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { isSuspended: alertDefinition.IsSuspended, colItems: colItems });
+    }
+    onMessageTypeChanged(alertDefinition, value) {
+        this.props.onChangeMessageType(alertDefinition, value);
+    }
+}
+exports.AlertEntityRow = AlertEntityRow;

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

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
+import * as AlertRedux from '../../Redux/ActionsReducers/AlertRedux';
+import * as TeamSharingRedux from '../../Redux/ActionsReducers/TeamSharingRedux';
+import * as QueryRedux from '../../Redux/ActionsReducers/QueryRedux';
+import { EditableExpressionConfigEntityState } from '../Components/SharedProps/EditableConfigEntityState';
+import { AlertDefinition, FlashingAlertDefinition, BaseAlertDefinition } from '../../PredefinedConfig/AlertState';
+import { AdaptableObject } from '../../PredefinedConfig/Common/AdaptableObject';
+import { NamedQuery } from '../../PredefinedConfig/QueryState';
+import { AdaptableMessageType } from '../../PredefinedConfig/Common/AdaptableMessageType';
+import { SharedEntityConfig } from '../../PredefinedConfig/TeamSharingState';
+interface AlertPopupProps extends ModuleViewPopupProps<AlertPopupComponent> {
+    AlertDefinitions: AlertDefinition[];
+    FlashingAlertDefinitions: FlashingAlertDefinition[];
+    onAddAlert: (Alert: AlertDefinition) => AlertRedux.AlertDefinitionAddAction;
+    onEditAlert: (Alert: AlertDefinition) => AlertRedux.AlertDefinitionEditAction;
+    onAddFlashingAlert: (FlashingAlert: FlashingAlertDefinition) => AlertRedux.FlashingAlertDefinitionAddAction;
+    onEditFlashingAlert: (FlashingAlert: FlashingAlertDefinition) => AlertRedux.FlashingAlertDefinitionEditAction;
+    onAddNamedQuery: (namedQuery: NamedQuery) => QueryRedux.NamedQueryAddAction;
+    onShare: (entity: AdaptableObject, config: SharedEntityConfig) => TeamSharingRedux.TeamSharingShareAction;
+    onFlashingAlertSuspend: (entity: AlertDefinition) => void;
+    onFlashingAlertUnSuspend: (entity: AlertDefinition) => void;
+}
+declare type AlertPopupState = EditableExpressionConfigEntityState & {
+    editingFlashingAlert: boolean;
+};
+declare class AlertPopupComponent extends React.Component<AlertPopupProps, AlertPopupState> {
+    state: AlertPopupState;
+    constructor(props: AlertPopupProps);
+    componentDidMount(): void;
+    render(): JSX.Element;
+    createAlertDefinition(): void;
+    createFlashingAlertDefinition(): void;
+    onMessageTypeChanged(alertDefinition: AlertDefinition, messageType: AdaptableMessageType): void;
+    onEdit(alert: AlertDefinition): void;
+    onFlashingAlertEdit(alert: FlashingAlertDefinition): void;
+    onCloseWizard(): void;
+    onFinishWizard: (alertDefinition: BaseAlertDefinition) => void;
+    resetState(): void;
+}
+export declare let AlertPopup: import("react-redux").ConnectedComponent<typeof AlertPopupComponent, Pick<React.ClassAttributes<AlertPopupComponent> & AlertPopupProps, never> & ModuleViewPopupProps<AlertPopupComponent>>;
+export {};

package/src/View/Alert/AlertPopup.js

@@ -0,0 +1,205 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertPopup = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
+const AlertRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/AlertRedux"));
+const TeamSharingRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/TeamSharingRedux"));
+const QueryRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/QueryRedux"));
+const Helper_1 = require("../../Utilities/Helpers/Helper");
+const PanelWithButton_1 = require("../Components/Panels/PanelWithButton");
+const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
+const ObjectFactory_1 = require("../../Utilities/ObjectFactory");
+const AdaptableObjectCollection_1 = require("../Components/AdaptableObjectCollection");
+const AlertEntityRow_1 = require("./AlertEntityRow");
+const EditableConfigEntityState_1 = require("../Components/SharedProps/EditableConfigEntityState");
+const UIHelper_1 = require("../UIHelper");
+const EmptyContent_1 = tslib_1.__importDefault(require("../../components/EmptyContent"));
+const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
+const Uuid_1 = require("../../PredefinedConfig/Uuid");
+const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/AdaptableHelper"));
+const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
+const icons_1 = require("../../components/icons");
+const FlashingAlertEntityRow_1 = require("./FlashingAlertEntityRow");
+const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
+const FlashingAlertWizard_1 = require("./Wizard/FlashingAlertWizard/FlashingAlertWizard");
+const AlertWizard_1 = require("./Wizard/AlertWizard");
+class AlertPopupComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.onFinishWizard = (alertDefinition) => {
+            if (StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.state.newNamedQuery)) {
+                const NamedQueryId = Uuid_1.createUuid();
+                this.props.onAddNamedQuery({
+                    Uuid: NamedQueryId,
+                    Name: this.state.newNamedQuery,
+                    BooleanExpression: alertDefinition.Rule.BooleanExpression,
+                });
+            }
+            if (this.state.wizardStatus == EditableConfigEntityState_1.WizardStatus.New) {
+                if (this.state.editingFlashingAlert) {
+                    this.props.onAddFlashingAlert(alertDefinition);
+                }
+                else {
+                    this.props.onAddAlert(alertDefinition);
+                }
+            }
+            else if (this.state.wizardStatus == EditableConfigEntityState_1.WizardStatus.Edit) {
+                if (this.state.editingFlashingAlert) {
+                    this.props.onEditFlashingAlert(alertDefinition);
+                }
+                else {
+                    this.props.onEditAlert(alertDefinition);
+                }
+            }
+            this.resetState();
+        };
+        this.state = Object.assign(Object.assign({}, UIHelper_1.UIHelper.getEmptyConfigState()), { editingFlashingAlert: false });
+    }
+    componentDidMount() {
+        if (this.props.popupParams) {
+            if (this.props.popupParams.action && this.props.popupParams.column) {
+                if (this.props.popupParams.action == 'New') {
+                    let alertDefinition = ObjectFactory_1.ObjectFactory.CreateEmptyAlertDefinition();
+                    alertDefinition.Scope = {
+                        ColumnIds: [this.props.popupParams.column.ColumnId],
+                    };
+                    this.setState({
+                        editedAdaptableObject: alertDefinition,
+                        wizardStartIndex: 1,
+                        wizardStatus: EditableConfigEntityState_1.WizardStatus.New,
+                    });
+                }
+            }
+        }
+    }
+    render() {
+        let colItems = [
+            { Content: 'Scope', Size: 8 },
+            { Content: 'Rule', Size: 8 },
+            { Content: 'Type', Size: 4 },
+            { Content: '', Size: 5 },
+        ];
+        let alertEntities = this.props.AlertDefinitions.map((alertDefinition, index) => {
+            let accessLevel = AdaptableHelper_1.default.getAppropriateAccessLevel(alertDefinition, this.props.accessLevel);
+            return (React.createElement(AlertEntityRow_1.AlertEntityRow, { key: index, colItems: colItems, api: this.props.api, moduleInfo: this.props.moduleInfo, adaptableObject: alertDefinition, onEdit: () => this.onEdit(alertDefinition), onShare: (config) => this.props.onShare(alertDefinition, config), teamSharingActivated: this.props.teamSharingActivated, onDeleteConfirm: AlertRedux.AlertDefinitionDelete(alertDefinition), onChangeMessageType: (alertDef, messageType) => this.onMessageTypeChanged(alertDef, messageType), accessLevel: accessLevel, onSuspend: this.props.onSuspend, onUnSuspend: this.props.onUnSuspend }));
+        });
+        let flashingAlertEntities = this.props.FlashingAlertDefinitions.map((alertDefinition, index) => {
+            let accessLevel = AdaptableHelper_1.default.getAppropriateAccessLevel(alertDefinition, this.props.accessLevel);
+            return (React.createElement(FlashingAlertEntityRow_1.FlashingAlertEntityRow, { key: index, colItems: colItems, api: this.props.api, moduleInfo: this.props.moduleInfo, adaptableObject: alertDefinition, onEdit: () => this.onFlashingAlertEdit(alertDefinition), onShare: (config) => this.props.onShare(alertDefinition, config), teamSharingActivated: this.props.teamSharingActivated, onDeleteConfirm: AlertRedux.FlashingAlertDefinitionDelete(alertDefinition), accessLevel: accessLevel, onSuspend: this.props.onFlashingAlertSuspend, onUnSuspend: this.props.onFlashingAlertUnSuspend }));
+        });
+        let newButton = (React.createElement(DropdownButton_1.default, { variant: "raised", tone: "accent", tooltip: "Create Alert", tooltipAnchor: "horizontal", columns: ['label'], "data-name": "new", accessLevel: this.props.accessLevel, items: [
+                {
+                    label: 'Alert',
+                    onClick: () => this.createAlertDefinition(),
+                },
+                {
+                    label: 'Flashing Alert',
+                    onClick: () => this.createFlashingAlertDefinition(),
+                },
+            ], style: {
+                color: 'var(--ab-color-text-on-add)',
+                fill: 'var(--ab-color-text-on-add)',
+                background: 'var(--ab-color-action-add)',
+            } },
+            React.createElement(icons_1.Icon, { name: "plus" }),
+            " New"));
+        const startWizardText = this.props.accessLevel == 'ReadOnly'
+            ? 'You have no Alert Definitions.'
+            : "Click 'New' to start creating Alert Definitions. An alert will be triggered whenever an edit - or external data change - matches the condition in the Alert Definition.";
+        const totalAlerts = alertEntities.length + flashingAlertEntities.length;
+        const alertWizardProps = {
+            moduleInfo: this.props.moduleInfo,
+            data: this.state.editedAdaptableObject,
+            configEntities: null,
+            wizardStartIndex: this.state.wizardStartIndex,
+            onCloseWizard: () => this.onCloseWizard(),
+            onFinishWizard: this.onFinishWizard,
+        };
+        const wizard = this.state.wizardStatus != EditableConfigEntityState_1.WizardStatus.None ? (this.state.editingFlashingAlert ? (React.createElement(FlashingAlertWizard_1.FlashingAlertWizard, Object.assign({}, alertWizardProps))) : (React.createElement(AlertWizard_1.AlertWizard, Object.assign({}, alertWizardProps)))) : null;
+        return (React.createElement(PanelWithButton_1.PanelWithButton, { bodyProps: { padding: 0 }, headerText: this.props.moduleInfo.FriendlyName, button: newButton, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
+            totalAlerts > 0 ? (React.createElement(React.Fragment, null,
+                alertEntities.length ? (React.createElement(React.Fragment, null,
+                    React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { colItems: colItems, items: alertEntities }))) : null,
+                flashingAlertEntities.length ? (React.createElement(React.Fragment, null,
+                    React.createElement(HelpBlock_1.default, { backgroundColor: "secondary", color: "text-on-secondary", style: { borderRadius: 0 } }, "Flashing Alerts"),
+                    React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { colItems: [
+                            { Content: 'Scope', Size: 8 },
+                            { Content: 'Definition', Size: 8 },
+                            { Content: '', Size: 4 },
+                            { Content: '', Size: 4 },
+                        ], items: flashingAlertEntities }))) : null)) : (React.createElement(EmptyContent_1.default, null, startWizardText)),
+            wizard));
+    }
+    createAlertDefinition() {
+        this.setState({
+            editingFlashingAlert: false,
+            editedAdaptableObject: ObjectFactory_1.ObjectFactory.CreateEmptyAlertDefinition(),
+            wizardStartIndex: 0,
+            wizardStatus: EditableConfigEntityState_1.WizardStatus.New,
+        });
+    }
+    createFlashingAlertDefinition() {
+        this.setState({
+            editingFlashingAlert: true,
+            editedAdaptableObject: ObjectFactory_1.ObjectFactory.CreateEmptyFlashingAlertDefinition(),
+            wizardStartIndex: 0,
+            wizardStatus: EditableConfigEntityState_1.WizardStatus.New,
+        });
+    }
+    onMessageTypeChanged(alertDefinition, messageType) {
+        alertDefinition.MessageType = messageType;
+        this.props.onEditAlert(alertDefinition);
+    }
+    onEdit(alert) {
+        this.setState({
+            editingFlashingAlert: false,
+            editedAdaptableObject: Helper_1.Helper.cloneObject(alert),
+            wizardStartIndex: 0,
+            wizardStatus: EditableConfigEntityState_1.WizardStatus.Edit,
+        });
+    }
+    onFlashingAlertEdit(alert) {
+        this.setState({
+            editingFlashingAlert: true,
+            editedAdaptableObject: Helper_1.Helper.cloneObject(alert),
+            wizardStartIndex: 0,
+            wizardStatus: EditableConfigEntityState_1.WizardStatus.Edit,
+        });
+    }
+    onCloseWizard() {
+        this.props.onClearPopupParams();
+        this.resetState();
+    }
+    resetState() {
+        this.setState({
+            editedAdaptableObject: null,
+            wizardStartIndex: 0,
+            wizardStatus: EditableConfigEntityState_1.WizardStatus.None,
+            newNamedQuery: GeneralConstants_1.EMPTY_STRING,
+        });
+    }
+}
+function mapStateToProps(state, ownProps) {
+    return {
+        AlertDefinitions: state.Alert.AlertDefinitions,
+        FlashingAlertDefinitions: ownProps.api.alertApi.getFlashingAlertDefinitions(),
+    };
+}
+function mapDispatchToProps(dispatch) {
+    return {
+        onAddAlert: (alert) => dispatch(AlertRedux.AlertDefinitionAdd(alert)),
+        onAddFlashingAlert: (flashingAlert) => dispatch(AlertRedux.FlashingAlertDefinitionAdd(flashingAlert)),
+        onEditAlert: (alert) => dispatch(AlertRedux.AlertDefinitionEdit(alert)),
+        onEditFlashingAlert: (flashingAlert) => dispatch(AlertRedux.FlashingAlertDefinitionEdit(flashingAlert)),
+        onAddNamedQuery: (namedQuery) => dispatch(QueryRedux.NamedQueryAdd(namedQuery)),
+        onShare: (entity, config) => dispatch(TeamSharingRedux.TeamSharingShare(entity, ModuleConstants.AlertModuleId, config)),
+        onSuspend: (entity) => dispatch(AlertRedux.AlertDefinitionSuspend(entity)),
+        onUnSuspend: (entity) => dispatch(AlertRedux.AlertDefinitionUnSuspend(entity)),
+        onFlashingAlertSuspend: (entity) => dispatch(AlertRedux.FlashingAlertDefinitionSuspend(entity)),
+        onFlashingAlertUnSuspend: (entity) => dispatch(AlertRedux.FlashingAlertDefinitionUnSuspend(entity)),
+    };
+}
+exports.AlertPopup = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(AlertPopupComponent);

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

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

package/src/View/Alert/AlertSharedEntity.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertSharedEntity = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const CodeBlock_1 = require("../../components/CodeBlock");
+class AlertSharedEntity extends React.Component {
+    render() {
+        let alertDefinition = this.props.entity;
+        return (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center" },
+            React.createElement(rebass_1.Flex, { flex: 4 }, this.props.api.scopeApi.getScopeToString(alertDefinition.Scope)),
+            React.createElement(rebass_1.Flex, { flex: 8 },
+                React.createElement(CodeBlock_1.CodeBlock, null,
+                    this.props.api.alertApi.getAlertRuleDescription(alertDefinition),
+                    " "))));
+    }
+}
+exports.AlertSharedEntity = AlertSharedEntity;

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import * as SystemRedux from '../../Redux/ActionsReducers/SystemRedux';
+import { AlertDefinition } from '../../PredefinedConfig/AlertState';
+import { AdaptableAlert } from '../../PredefinedConfig/Common/AdaptableAlert';
+import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
+interface AlertViewPanelComponentProps extends ViewPanelProps {
+    AlertDefinitions: AlertDefinition[];
+    AdaptableAlerts: AdaptableAlert[];
+    onDeleteAlert: (alert: AdaptableAlert) => SystemRedux.SystemAlertDeleteAction;
+    onDeleteAllAlert: (alerts: AdaptableAlert[]) => SystemRedux.SystemAlertDeleteAllAction;
+}
+interface AlertViewState {
+    ShowMessage: boolean;
+    Alerts: AdaptableAlert[];
+}
+declare class AlertViewPanelComponent extends React.Component<AlertViewPanelComponentProps, AlertViewState> {
+    constructor(props: AlertViewPanelComponentProps);
+    componentDidUpdate(): void;
+    render(): JSX.Element;
+}
+export declare const AlertViewPanelControl: import("react-redux").ConnectedComponent<typeof AlertViewPanelComponent, any>;
+export {};