@adaptabletools/adaptable 10.0.4-canary.1 → 10.0.4-canary.5

package/src/View/Export/ReportExportDropdown.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReportExportDropdown = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
+const icons_1 = require("../../components/icons");
+const Enums_1 = require("../../PredefinedConfig/Common/Enums");
+const ExportRedux_1 = require("../../Redux/ActionsReducers/ExportRedux");
+const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
+const AdaptableContext_1 = require("../AdaptableContext");
+exports.ReportExportDropdown = (props) => {
+    const report = props.data;
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const dispatch = react_redux_1.useDispatch();
+    const handleExport = (destination) => {
+        dispatch(ExportRedux_1.ExportApply(report, destination));
+    };
+    const destinationItems = [
+        ...adaptable.api.exportApi.getAvailableExportDestinations().map((destination) => ({
+            label: destination,
+            onClick: () => handleExport(destination),
+        })),
+        ...adaptable.api.exportApi.getAllCustomDestination().map((destination) => ({
+            label: destination.name,
+            onClick: () => {
+                handleExport(destination.name);
+            },
+        })),
+    ];
+    if ((report === null || report === void 0 ? void 0 : report.Name) === GeneralConstants_1.VISUAL_DATA_REPORT) {
+        destinationItems.forEach((item) => (item.disabled = item.label === Enums_1.ExportDestination.Excel ? false : true));
+    }
+    return (React.createElement(DropdownButton_1.default, { tooltip: "Export Report", variant: "text", items: destinationItems },
+        React.createElement(icons_1.Icon, { name: "export" })));
+};

package/src/View/Export/Wizard/NewReportWizard.js

@@ -10,11 +10,24 @@ const rebass_1 = require("rebass");
 const ReportColumnsWizardSection_1 = require("./ReportColumnsWizardSection");
 const ReportRowsWizardSection_1 = require("./ReportRowsWizardSection");
 const ReportNameWizardSection_1 = require("./ReportNameWizardSection");
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
+const react_redux_1 = require("react-redux");
+const ExportRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ExportRedux"));
 exports.NewReportWizard = (props) => {
     const [report, setReport] = react_1.useState(() => {
-        return Helper_1.cloneObject(props.data);
+        return props.data ? Helper_1.cloneObject(props.data) : ObjectFactory_1.default.CreateEmptyReport();
     });
-    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { moduleInfo: props.moduleInfo, data: report, onHide: props.onCloseWizard, onFinish: props.onFinishWizard, sections: [
+    const dispatch = react_redux_1.useDispatch();
+    const handleFinish = () => {
+        if (props.data) {
+            dispatch(ExportRedux.ReportDelete(report));
+        }
+        else {
+            dispatch(ExportRedux.ReportAdd(report));
+        }
+        props.onFinishWizard(report);
+    };
+    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: report, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Columns',
                 details: 'Choose the Columns you want to include in the Report',

package/src/View/Export/Wizard/ReportNameWizardSection.js

@@ -7,12 +7,13 @@ const rebass_1 = require("rebass");
 const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
+const Tag_1 = require("../../../components/Tag");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 exports.renderReportNameSummary = (report) => {
     return (React.createElement(rebass_1.Box, { fontSize: 2 },
         ' ',
         "Report Name: ",
-        React.createElement("b", null, report.Name)));
+        React.createElement(Tag_1.Tag, null, report.Name)));
 };
 exports.isValidReportName = (report, api) => {
     if (!report.Name) {

package/src/View/Export/Wizard/ReportRowsWizardSection.js

@@ -5,10 +5,10 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const rebass_1 = require("rebass");
-const CodeBlock_1 = require("../../../components/CodeBlock");
 const ExpressionEditor_1 = require("../../../components/ExpressionEditor");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const Tabs_1 = require("../../../components/Tabs");
+const Tag_1 = require("../../../components/Tag");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 exports.isValidReportRowsQuery = (report) => {
     var _a;
@@ -30,7 +30,7 @@ exports.renderReportRowsSummary = (report) => {
             " in the Report")) : null,
         report.ReportRowScope === 'ExpressionRows' ? (React.createElement(React.Fragment, null,
             "Include Rows matching the query: ",
-            React.createElement(CodeBlock_1.CodeBlock, null, (_a = report.Query) === null || _a === void 0 ? void 0 : _a.BooleanExpression))) : null));
+            React.createElement(Tag_1.Tag, null, (_a = report.Query) === null || _a === void 0 ? void 0 : _a.BooleanExpression))) : null));
 };
 exports.ReportRowsWizardSection = (props) => {
     var _a, _b;

package/src/View/FlashingCell/FlashingCellStyle.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { BoxProps } from 'rebass';
+import { FlashingCellDefinition } from '../../types';
+export interface FlashingCellStyleProps extends Omit<BoxProps, 'data'> {
+    data: FlashingCellDefinition;
+}
+export declare const FlashingCellStyle: React.FunctionComponent<FlashingCellStyleProps>;

package/src/View/FlashingCell/FlashingCellStyle.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlashingCellStyle = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const rebass_1 = require("rebass");
+const StylePreview_1 = require("../../components/StylePreview");
+exports.FlashingCellStyle = (props) => {
+    const { data } = props, boxProps = tslib_1.__rest(props, ["data"]);
+    return (react_1.default.createElement(rebass_1.Flex, Object.assign({ flexDirection: "row" }, boxProps),
+        react_1.default.createElement(StylePreview_1.StylePreview, { mr: 1, flex: 1, styleObject: props.data.UpChangeStyle },
+            "Up ",
+            !props.data.UpChangeStyle ? ' - no style' : ''),
+        react_1.default.createElement(StylePreview_1.StylePreview, { mr: 1, flex: 1, styleObject: props.data.DownChangeStyle },
+            "Down",
+            !props.data.DownChangeStyle ? ' - no style' : ''),
+        react_1.default.createElement(StylePreview_1.StylePreview, { flex: 1, styleObject: props.data.NeutralChangeStyle },
+            "Neutral ",
+            !props.data.NeutralChangeStyle ? ' - no style' : '')));
+};

package/src/View/{Alert/Wizard/FlashingAlertWizard/FlashingAlertDurationWizardSection.d.ts → FlashingCell/Wizard/FlashingCellDurationWizardSection.d.ts}

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { FlashingAlertDefinition } from '../../../../PredefinedConfig/AlertState';
+import { FlashingCellDefinition } from '../../../types';
 declare type FlashingAlertDurationWizardSectionProps = {
     readOnly?: boolean;
-    flashingAlert?: FlashingAlertDefinition;
-    onChange: (data: FlashingAlertDefinition) => void;
+    flashingAlert?: FlashingCellDefinition;
+    onChange: (data: FlashingCellDefinition) => void;
 };
-export declare const renderFlashingAlertDurationSummary: (flashingAlert: FlashingAlertDefinition) => JSX.Element;
+export declare const renderFlashingAlertDurationSummary: (flashingAlert: FlashingCellDefinition) => JSX.Element;
 export declare const FlashingAlertDurationWizardSection: (props: FlashingAlertDurationWizardSectionProps) => JSX.Element;
 export {};

package/src/View/{Alert/Wizard/FlashingAlertWizard/FlashingAlertDurationWizardSection.js → FlashingCell/Wizard/FlashingCellDurationWizardSection.js}

@@ -5,12 +5,12 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const rebass_1 = require("rebass");
-const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
-const usePrevious_1 = tslib_1.__importDefault(require("../../../../components/utils/usePrevious"));
-const Radio_1 = tslib_1.__importDefault(require("../../../../components/Radio"));
-const Tabs_1 = require("../../../../components/Tabs");
-const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
-const CodeBlock_1 = require("../../../../components/CodeBlock");
+const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
+const usePrevious_1 = tslib_1.__importDefault(require("../../../components/utils/usePrevious"));
+const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
+const Tabs_1 = require("../../../components/Tabs");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const CodeBlock_1 = require("../../../components/CodeBlock");
 exports.renderFlashingAlertDurationSummary = (flashingAlert) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(rebass_1.Text, { fontSize: 2 }, flashingAlert.FlashDuration === 'always' ? (React.createElement(React.Fragment, null, "Flashing is never removed")) : (React.createElement(React.Fragment, null,

package/src/View/{Alert/Wizard/FlashingAlertWizard/FlashingAlertRulesWizardSection.d.ts → FlashingCell/Wizard/FlashingCellRulesWizardSection.d.ts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { FlashingAlertDefinition } from '../../../../PredefinedConfig/AlertState';
+import { FlashingCellDefinition } from '../../../PredefinedConfig/FlashingCellState';
 export interface FlashingAlertRulesWizardSectionProps {
-    onChange: (data: FlashingAlertDefinition) => void;
+    onChange: (data: FlashingCellDefinition) => void;
 }
-export declare const renderFlashingAlertRulesSummary: (flashingAlert: FlashingAlertDefinition) => JSX.Element;
+export declare const renderFlashingAlertRulesSummary: (flashingAlert: FlashingCellDefinition) => JSX.Element;
 export declare const FlashingAlertRulesWizardSection: (props: FlashingAlertRulesWizardSectionProps) => JSX.Element;

package/src/View/{Alert/Wizard/FlashingAlertWizard/FlashingAlertRulesWizardSection.js → FlashingCell/Wizard/FlashingCellRulesWizardSection.js}

@@ -3,17 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlashingAlertRulesWizardSection = exports.renderFlashingAlertRulesSummary = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
-const Tabs_1 = require("../../../../components/Tabs");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const Tabs_1 = require("../../../components/Tabs");
 const rebass_1 = require("rebass");
-const Radio_1 = tslib_1.__importDefault(require("../../../../components/Radio"));
-const BaseAlertRulesWizardSection_1 = require("../BaseAlertRulesWizardSection");
-const CodeBlock_1 = require("../../../../components/CodeBlock");
-const EntityRulesEditor_1 = require("../../../Components/EntityRulesEditor");
+const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
+const BaseAlertRulesWizardSection_1 = require("../../Alert/Wizard/BaseAlertRulesWizardSection");
+const CodeBlock_1 = require("../../../components/CodeBlock");
+const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
 exports.renderFlashingAlertRulesSummary = (flashingAlert) => {
     var _a;
-    const { api: { alertApi, predicateApi }, } = OnePageAdaptableWizard_1.useOnePageWizardContext();
-    const FlashTarget = (_a = flashingAlert.FlashTarget) !== null && _a !== void 0 ? _a : alertApi.getFlashingAlertFlashTarget(flashingAlert);
+    const { api: { flashingCellApi }, } = OnePageAdaptableWizard_1.useOnePageWizardContext();
+    const FlashTarget = (_a = flashingAlert.FlashTarget) !== null && _a !== void 0 ? _a : flashingCellApi.getFlashingCellFlashTarget(flashingAlert);
     return (React.createElement(EntityRulesEditor_1.EntityRulesSummary, { data: flashingAlert, renderPredicate: (content) => {
             return (React.createElement(React.Fragment, null,
                 "Flash ",
@@ -34,8 +34,8 @@ exports.renderFlashingAlertRulesSummary = (flashingAlert) => {
 exports.FlashingAlertRulesWizardSection = (props) => {
     var _a;
     const { data: flashingAlert, api } = OnePageAdaptableWizard_1.useOnePageWizardContext();
-    const FlashTarget = (_a = flashingAlert.FlashTarget) !== null && _a !== void 0 ? _a : api.alertApi.getFlashingAlertFlashTarget(flashingAlert);
-    return (React.createElement(BaseAlertRulesWizardSection_1.BaseAlertRulesWizardSection, { onChange: props.onChange },
+    const FlashTarget = (_a = flashingAlert.FlashTarget) !== null && _a !== void 0 ? _a : api.flashingCellApi.getFlashingCellFlashTarget(flashingAlert);
+    return (React.createElement(BaseAlertRulesWizardSection_1.BaseAlertRulesWizardSection, { onChange: props.onChange, wholeRowScope: false },
         React.createElement(rebass_1.Text, { fontSize: 2, mb: 2, pl: 2, pt: 2 }, "Flash target"),
         React.createElement(Tabs_1.Tabs, { value: FlashTarget !== null && FlashTarget !== void 0 ? FlashTarget : 'row', pl: 2, onValueChange: (FlashTarget) => {
                 props.onChange(Object.assign(Object.assign({}, flashingAlert), { FlashTarget }));

package/src/View/{Alert/Wizard/FlashingAlertWizard/FlashingAlertScopeWizardSection.d.ts → FlashingCell/Wizard/FlashingCellScopeWizardSection.d.ts}

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

package/src/View/{Alert/Wizard/FlashingAlertWizard/FlashingAlertScopeWizardSection.js → FlashingCell/Wizard/FlashingCellScopeWizardSection.js}

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlashingAlertScopeWizardSection = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const BaseAlertScopeWizardSection_1 = require("../BaseAlertScopeWizardSection");
+const BaseAlertScopeWizardSection_1 = require("../../Alert/Wizard/BaseAlertScopeWizardSection");
 exports.FlashingAlertScopeWizardSection = (props) => {
     return React.createElement(BaseAlertScopeWizardSection_1.BaseAlertScopeWizardSection, Object.assign({}, props));
 };

package/src/View/FlashingCell/Wizard/FlashingCellStyleWizardSection.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { BoxProps } from 'rebass';
+import { AdaptableStyle } from '../../../types';
+import { FlashingCellDefinition } from '../../../../types';
+declare type FlashingAlertStyleWizardSectionProps = {
+    flashingAlert?: FlashingCellDefinition;
+    onStyleChange: (styleName: 'UpChangeStyle' | 'DownChangeStyle' | 'NeutralChangeStyle', style: AdaptableStyle) => void;
+};
+export declare const FlashingAlertStyleWizardSection: (props: FlashingAlertStyleWizardSectionProps) => JSX.Element;
+export interface FlashingCellStyleProps extends Omit<BoxProps, 'data'> {
+    data: FlashingCellDefinition;
+}
+export declare const FlashingCellStyle: React.FunctionComponent<FlashingCellStyleProps>;
+export declare const renderFlashingAlertStyleSummary: (flashingAlert: FlashingCellDefinition) => JSX.Element;
+export {};

package/src/View/{Alert/Wizard/FlashingAlertWizard/FlashingAlertStyleWizardSection.js → FlashingCell/Wizard/FlashingCellStyleWizardSection.js}

@@ -1,16 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderFlashingAlertStyleSummary = exports.FlashingAlertStyleWizardSection = void 0;
+exports.renderFlashingAlertStyleSummary = exports.FlashingCellStyle = exports.FlashingAlertStyleWizardSection = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
-const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
-const Tabs_1 = require("../../../../components/Tabs");
-const StyleComponent_1 = require("../../../Components/StyleComponent");
-const StyleHelper_1 = require("../../../../Utilities/Helpers/StyleHelper");
-const toStyle = (style) => {
-    return Object.assign(Object.assign({}, StyleHelper_1.convertAdaptableStyleToCSS(style !== null && style !== void 0 ? style : {})), { borderWidth: (style === null || style === void 0 ? void 0 : style.BorderColor) ? 2 : 0, borderStyle: 'solid' });
-};
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const Tabs_1 = require("../../../components/Tabs");
+const StyleComponent_1 = require("../../Components/StyleComponent");
+const StylePreview_1 = require("../../../components/StylePreview");
 const changeStyle = (React.createElement(rebass_1.Text, { fontSize: 2, style: { display: 'inline-block' } }, "Change style"));
 exports.FlashingAlertStyleWizardSection = (props) => {
     var _a, _b, _c;
@@ -34,15 +31,19 @@ exports.FlashingAlertStyleWizardSection = (props) => {
             React.createElement(Tabs_1.Tabs.Content, { value: "neutral" },
                 React.createElement(StyleComponent_1.StyleComponent, { headless: true, api: api, Style: (_c = flashingAlert.NeutralChangeStyle) !== null && _c !== void 0 ? _c : {}, UpdateStyle: (style) => props.onStyleChange('NeutralChangeStyle', style) })))));
 };
-exports.renderFlashingAlertStyleSummary = (flashingAlert) => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Text, { padding: 2, style: toStyle(flashingAlert.UpChangeStyle) },
+exports.FlashingCellStyle = (props) => {
+    const { data } = props, boxProps = tslib_1.__rest(props, ["data"]);
+    return (React.createElement(rebass_1.Box, Object.assign({}, boxProps),
+        React.createElement(StylePreview_1.StylePreview, { styleObject: props.data.UpChangeStyle },
             "Up change style ",
-            !flashingAlert.UpChangeStyle ? ' - no style' : ''),
-        React.createElement(rebass_1.Text, { mt: 2, padding: 2, style: toStyle(flashingAlert.DownChangeStyle) },
+            !props.data.UpChangeStyle ? ' - no style' : ''),
+        React.createElement(StylePreview_1.StylePreview, { mt: 2, styleObject: props.data.DownChangeStyle },
             "Down change style ",
-            !flashingAlert.DownChangeStyle ? ' - no style' : ''),
-        React.createElement(rebass_1.Text, { mt: 2, padding: 2, style: toStyle(flashingAlert.NeutralChangeStyle) },
+            !props.data.DownChangeStyle ? ' - no style' : ''),
+        React.createElement(StylePreview_1.StylePreview, { mt: 2, styleObject: props.data.NeutralChangeStyle },
             "Neutral change style ",
-            !flashingAlert.NeutralChangeStyle ? ' - no style' : '')));
+            !props.data.NeutralChangeStyle ? ' - no style' : '')));
+};
+exports.renderFlashingAlertStyleSummary = (flashingAlert) => {
+    return React.createElement(exports.FlashingCellStyle, { data: flashingAlert });
 };

package/src/View/FlashingCell/Wizard/FlashingCellWizard.d.ts

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

package/src/View/FlashingCell/Wizard/FlashingCellWizard.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlashingCellWizard = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const rebass_1 = require("rebass");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const FlashingCellDurationWizardSection_1 = require("./FlashingCellDurationWizardSection");
+const Helper_1 = require("../../../Utilities/Helpers/Helper");
+const FlashingCellRulesWizardSection_1 = require("./FlashingCellRulesWizardSection");
+const FlashingCellStyleWizardSection_1 = require("./FlashingCellStyleWizardSection");
+const FlashingCellScopeWizardSection_1 = require("./FlashingCellScopeWizardSection");
+const BaseAlertScopeWizardSection_1 = require("../../Alert/Wizard/BaseAlertScopeWizardSection");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
+const react_redux_1 = require("react-redux");
+const isValidFlashingCellRules_1 = require("./isValidFlashingCellRules");
+const FlashingCellRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/FlashingCellRedux"));
+exports.FlashingCellWizard = (props) => {
+    const { api } = AdaptableContext_1.useAdaptable();
+    const [flashingCell, setFlashingCell] = react_1.useState(() => {
+        var _a;
+        const defaults = (_a = api.internalApi.getAdaptableOptions().notificationsOptions.flashingCellDefaultProperties) !== null && _a !== void 0 ? _a : {};
+        let flashingCell = props.data
+            ? Helper_1.cloneObject(props.data)
+            : ObjectFactory_1.default.CreateEmptyFlashingCellDefinition();
+        flashingCell = Object.assign(Object.assign({ FlashDuration: 500 }, defaults), flashingCell);
+        if (!flashingCell.Rule.BooleanExpression && !flashingCell.Rule.Predicate) {
+            flashingCell.Rule.BooleanExpression = '';
+        }
+        return flashingCell;
+    });
+    const updateProperty = (propName) => {
+        return (value) => {
+            setFlashingCell((flashingCell) => {
+                flashingCell = Object.assign(Object.assign({}, flashingCell), { [propName]: value });
+                return flashingCell;
+            });
+        };
+    };
+    const updateStyles = {
+        DownChangeStyle: react_1.useCallback(updateProperty('DownChangeStyle'), []),
+        UpChangeStyle: react_1.useCallback(updateProperty('UpChangeStyle'), []),
+        NeutralChangeStyle: react_1.useCallback(updateProperty('NeutralChangeStyle'), []),
+    };
+    const flashStyleComponent = (React.createElement(FlashingCellStyleWizardSection_1.FlashingAlertStyleWizardSection, { onStyleChange: (styleName, style) => {
+            updateStyles[styleName](style);
+        } }));
+    const dispatch = react_redux_1.useDispatch();
+    const handleFinish = () => {
+        if (props.data) {
+            dispatch(FlashingCellRedux.FlashingCellDefinitionEdit(flashingCell));
+        }
+        else {
+            dispatch(FlashingCellRedux.FlashingCellDefinitionAdd(flashingCell));
+        }
+        props.onFinishWizard(flashingCell);
+    };
+    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: flashingCell, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+            {
+                details: 'Specify which data changes should trigger Cell Flashing',
+                isValid: NewScopeComponent_1.isScopeValid,
+                render: () => React.createElement(FlashingCellScopeWizardSection_1.FlashingAlertScopeWizardSection, { onChange: setFlashingCell }),
+                renderSummary: BaseAlertScopeWizardSection_1.renderBaseAlertScopeSummary,
+                title: 'Scope',
+            },
+            {
+                details: 'Build the rules for when Cells should Flash',
+                isValid: isValidFlashingCellRules_1.isValidFlashingCellRules,
+                render: () => React.createElement(FlashingCellRulesWizardSection_1.FlashingAlertRulesWizardSection, { onChange: setFlashingCell }),
+                renderSummary: FlashingCellRulesWizardSection_1.renderFlashingAlertRulesSummary,
+                title: 'Condition',
+            },
+            {
+                details: 'Select the Duration of the Flash',
+                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                    React.createElement(FlashingCellDurationWizardSection_1.FlashingAlertDurationWizardSection, { onChange: setFlashingCell }))),
+                renderSummary: FlashingCellDurationWizardSection_1.renderFlashingAlertDurationSummary,
+                title: 'Duration',
+            },
+            {
+                details: 'Choose the Flashing Styles',
+                render: () => React.createElement(rebass_1.Box, { padding: 2 }, flashStyleComponent),
+                renderSummary: FlashingCellStyleWizardSection_1.renderFlashingAlertStyleSummary,
+                title: 'Flash Styles',
+            },
+            '-',
+            {
+                details: 'Review the Flashing Cell Rule',
+                render: () => {
+                    return (React.createElement(rebass_1.Box, { padding: 2 },
+                        React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null)));
+                },
+                title: 'Summary',
+            },
+        ] }));
+};

package/src/View/FlashingCell/Wizard/isValidFlashingCellRules.d.ts

@@ -0,0 +1,3 @@
+import { AdaptableApi, FlashingCellDefinition } from '../../../types';
+import { OnePageAdaptableWizardContextType } from '../../Wizard/OnePageAdaptableWizard';
+export declare const isValidFlashingCellRules: (flashingCell: FlashingCellDefinition, api: AdaptableApi, context: OnePageAdaptableWizardContextType<FlashingCellDefinition>) => true | string;

package/src/View/FlashingCell/Wizard/isValidFlashingCellRules.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isValidFlashingCellRules = void 0;
+const ModuleConstants_1 = require("../../../Utilities/Constants/ModuleConstants");
+exports.isValidFlashingCellRules = (flashingCell, api, context) => {
+    let valid = true;
+    if (!flashingCell.Rule.Predicate && !flashingCell.Rule.BooleanExpression) {
+        return 'No condition defined for flashing cell';
+    }
+    if (valid && flashingCell.Rule.Predicate) {
+        valid = api.predicateApi.isValidPredicate(flashingCell.Rule.Predicate);
+        if (!valid) {
+            return 'Predicate is not valid';
+        }
+    }
+    if (valid && flashingCell.Rule.BooleanExpression) {
+        valid = api.queryLanguageApi.isValidBooleanExpression(flashingCell.Rule.BooleanExpression, ModuleConstants_1.FlashingCellModuleId);
+        if (!valid) {
+            return 'The query is not a valid boolean query';
+        }
+    }
+    // boolean expressions may also be saved as named queries
+    if (context.namedQuery != false) {
+        const isValidName = api.queryApi.isValidNamedQueryName(context.namedQuery);
+        if (!isValidName.valid) {
+            return isValidName.message;
+        }
+    }
+    return true;
+};

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.d.ts

@@ -10,6 +10,7 @@ export interface FormatColumnFormatWizardState {
     DisplayFormat: AdaptableFormat;
     NumericFormat?: 'Percent' | 'Thousand' | 'Million' | 'Dollar' | 'Sterling' | undefined;
 }
+export declare const getFormatColumnFormatSummaryValue: (data: FormatColumn) => string;
 export declare const renderFormatColumnFormatSummary: (data: FormatColumn) => JSX.Element;
 export declare const getFormatDisplayTypeForScope: (scope: AdaptableScope, api: AdaptableApi) => 'Number' | 'Date' | 'String' | undefined;
 export declare const FormatColumnFormatWizardSection: (props: FormatColumnFormatWizardSectionProps) => JSX.Element;

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormatColumnFormatWizardSection = exports.getFormatDisplayTypeForScope = exports.renderFormatColumnFormatSummary = void 0;
+exports.FormatColumnFormatWizardSection = exports.getFormatDisplayTypeForScope = exports.renderFormatColumnFormatSummary = exports.getFormatColumnFormatSummaryValue = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
@@ -16,8 +16,8 @@ const AdaptableObjectRow_1 = require("../../Components/AdaptableObjectRow");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Tabs_1 = require("../../../components/Tabs");
-const CodeBlock_1 = require("../../../components/CodeBlock");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
+const Tag_1 = require("../../../components/Tag");
 const DOLLAR_OPTIONS = {
     FractionDigits: 2,
     FractionSeparator: '.',
@@ -77,22 +77,26 @@ const DateFormatPresets = [
     'yyyyMMdd',
     'HH:mm:ss',
 ];
-exports.renderFormatColumnFormatSummary = (data) => {
+exports.getFormatColumnFormatSummaryValue = (data) => {
     let content = 'N/A';
     if (!data.DisplayFormat) {
-        return React.createElement(rebass_1.Text, { padding: 2 }, "N/A");
-    }
-    if (data.DisplayFormat.Formatter === 'NumberFormatter') {
-        content = FormatHelper_1.default.NumberFormatter(12345.6789, data.DisplayFormat.Options);
+        content = 'N/A';
     }
-    if (data.DisplayFormat.Formatter === 'DateFormatter') {
-        content = FormatHelper_1.default.DateFormatter(new Date(), data.DisplayFormat.Options);
-    }
-    if (data.DisplayFormat.Formatter === 'StringFormatter') {
-        content = FormatHelper_1.default.StringFormatter('Hello World ', data.DisplayFormat.Options);
+    else {
+        if (data.DisplayFormat.Formatter === 'NumberFormatter') {
+            content = FormatHelper_1.default.NumberFormatter(12345.6789, data.DisplayFormat.Options);
+        }
+        if (data.DisplayFormat.Formatter === 'DateFormatter') {
+            content = FormatHelper_1.default.DateFormatter(new Date(), data.DisplayFormat.Options);
+        }
+        if (data.DisplayFormat.Formatter === 'StringFormatter') {
+            content = FormatHelper_1.default.StringFormatter('Hello World ', data.DisplayFormat.Options);
+        }
     }
-    return (React.createElement(rebass_1.Text, { padding: 2 },
-        React.createElement(CodeBlock_1.CodeBlock, null, content)));
+    return content;
+};
+exports.renderFormatColumnFormatSummary = (data) => {
+    return React.createElement(Tag_1.Tag, null, exports.getFormatColumnFormatSummaryValue(data));
 };
 exports.getFormatDisplayTypeForScope = (scope, api) => {
     if (scope == undefined) {

package/src/View/FormatColumn/Wizard/FormatColumnScopeWizardSection.js

@@ -7,9 +7,9 @@ const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 exports.renderFormatColumnScopeSummary = (data) => {
     return NewScopeComponent_1.renderScopeSummary(data.Scope, {
-        scopeWholeRow: 'Matching rows will TODO',
+        scopeWholeRow: 'Matching rows will be formatted',
         scopeColumns: 'Cells in selected columns will be formatted',
-        scopeDataTypes: 'Cells in columns of the selected data-types will TODO',
+        scopeDataTypes: 'Cells in columns of the selected data-types will be formatted',
     });
 };
 exports.FormatColumnScopeWizardSection = (props) => {

package/src/View/FormatColumn/Wizard/FormatColumnSettingsWizardSection.js

@@ -10,10 +10,10 @@ const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const CheckBox_1 = require("../../../components/CheckBox");
 const Tabs_1 = require("../../../components/Tabs");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const CodeBlock_1 = require("../../../components/CodeBlock");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
 const react_1 = require("react");
 const LoggingHelper_1 = require("../../../Utilities/Helpers/LoggingHelper");
+const Tag_1 = require("../../../components/Tag");
 let alignmentOptions = [
     { value: 'Left', label: 'Left' },
     { value: 'Right', label: 'Right' },
@@ -24,13 +24,13 @@ exports.renderFormatColumnSettingsSummary = (data) => {
     return (React.createElement(rebass_1.Box, { padding: 2 },
         React.createElement(rebass_1.Text, null,
             "Cell alignment ",
-            React.createElement(CodeBlock_1.CodeBlock, null, (_a = data.CellAlignment) !== null && _a !== void 0 ? _a : 'default')),
+            React.createElement(Tag_1.Tag, null, (_a = data.CellAlignment) !== null && _a !== void 0 ? _a : 'default')),
         data.HeaderName ? (React.createElement(rebass_1.Text, { mt: 3 },
             "Header name ",
-            React.createElement(CodeBlock_1.CodeBlock, null, data.HeaderName))) : null,
+            React.createElement(Tag_1.Tag, null, data.HeaderName))) : null,
         React.createElement(rebass_1.Text, { mt: 3 },
             "Include grouped rows ",
-            React.createElement(CodeBlock_1.CodeBlock, null, data.IncludeGroupedRows ? 'yes' : 'no'))));
+            React.createElement(Tag_1.Tag, null, data.IncludeGroupedRows ? 'yes' : 'no'))));
 };
 exports.FormatColumnSettingsWizardSection = (props) => {
     const { data, api } = OnePageAdaptableWizard_1.useOnePageWizardContext();

package/src/View/FormatColumn/Wizard/FormatColumnWizard.js

@@ -13,6 +13,9 @@ const FormatColumnFormatWizardSection_1 = require("./FormatColumnFormatWizardSec
 const AdaptableContext_1 = require("../../AdaptableContext");
 const FormatColumnSettingsWizardSection_1 = require("./FormatColumnSettingsWizardSection");
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
+const react_redux_1 = require("react-redux");
+const FormatColumnRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/FormatColumnRedux"));
 const adjustDisplayFormat = (formatColumn, api) => {
     formatColumn = Object.assign({}, formatColumn);
     const formatDataType = FormatColumnFormatWizardSection_1.getFormatDisplayTypeForScope(formatColumn.Scope, api);
@@ -70,7 +73,9 @@ function FormatColumnWizard(props) {
     const { api } = AdaptableContext_1.useAdaptable();
     const [formatColumn, doSetFormatColumn] = react_1.useState(() => {
         var _a;
-        let formatColumn = Helper_1.cloneObject(props.data);
+        let formatColumn = props.data
+            ? Helper_1.cloneObject(props.data)
+            : ObjectFactory_1.default.CreateEmptyFormatColumn();
         formatColumn.Scope = (_a = formatColumn.Scope) !== null && _a !== void 0 ? _a : {
             ColumnIds: [],
         };
@@ -80,7 +85,17 @@ function FormatColumnWizard(props) {
     const setFormatColumn = React.useCallback((formatColumn) => {
         doSetFormatColumn(adjustFormatColumn(formatColumn, api));
     }, []);
-    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { moduleInfo: props.moduleInfo, data: formatColumn, onHide: props.onCloseWizard, onFinish: props.onFinishWizard, sections: [
+    const dispatch = react_redux_1.useDispatch();
+    const handleFinish = () => {
+        if (props.data) {
+            dispatch(FormatColumnRedux.FormatColumnEdit(formatColumn));
+        }
+        else {
+            dispatch(FormatColumnRedux.FormatColumnAdd(formatColumn));
+        }
+        props.onFinishWizard(formatColumn);
+    };
+    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: formatColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Scope',
                 details: 'Apply formatting to: one or more Columns or Data Types or the whole row',

package/src/View/FreeTextColumn/Wizard/FreeTextColumnSettingsWizardSection.d.ts

@@ -5,6 +5,7 @@ export declare const renderFreeTextColumnSummary: (data: FreeTextColumn) => JSX.
 export declare const isValidFreeTextColumn: (data: FreeTextColumn, api: AdaptableApi) => true | "Column id cannot be empty" | "No data type specified for column" | "A Column already exists with that id";
 export declare type FreeTextColumnSettingsWizardSectionProps = {
     onChange: (data: FreeTextColumn) => void;
+    isEdit: boolean;
 };
 export interface FreeTextColumnSettingsWizardState {
     ColumnId: string;