@adaptabletools/adaptable 10.0.4-canary.4 → 11.0.0-canary.2

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

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlashingAlertSettingsWizardSection = exports.renderFlashingAlertSettingsSummary = 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 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 FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+exports.renderFlashingAlertSettingsSummary = (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,
+            "Flashing is removed after ",
+            React.createElement(CodeBlock_1.CodeBlock, null, flashingAlert.FlashDuration),
+            ' ',
+            "milliseconds")))));
+};
+exports.FlashingAlertSettingsWizardSection = (props) => {
+    var _a;
+    let { data: flashingCell } = OnePageAdaptableWizard_1.useOnePageWizardContext();
+    flashingCell = flashingCell !== null && flashingCell !== void 0 ? flashingCell : props.flashingCell;
+    const setDuration = (FlashDuration) => {
+        props.onChange(Object.assign(Object.assign({}, flashingCell), { FlashDuration: FlashDuration }));
+    };
+    const duration = (_a = flashingCell.FlashDuration) !== null && _a !== void 0 ? _a : 500;
+    const numberDuration = React.useRef(typeof duration === 'number' ? duration : 500);
+    const inputRef = react_1.useRef(null);
+    const oldDuration = usePrevious_1.default(duration, duration);
+    React.useEffect(() => {
+        var _a;
+        if (oldDuration === 'always' && duration != oldDuration) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [duration, oldDuration]);
+    const handleTypeChange = (type) => {
+        setDuration(type === 'number' ? numberDuration.current : 'always');
+    };
+    const handleTargetChange = (type) => {
+        props.onChange(Object.assign(Object.assign({}, flashingCell), { FlashTarget: type }));
+    };
+    return (React.createElement(rebass_1.Flex, { height: "100%", flexDirection: "column", "data-name": "plus-minus-column-settings" },
+        React.createElement(Tabs_1.Tabs, { autoFocus: false, padding: 2 },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Flashing Cell Settings"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(FormLayout_1.default, null,
+                    React.createElement(FormLayout_1.FormRow, { label: "Duration Type" },
+                        React.createElement(Radio_1.default, { mr: 3, checked: duration == 'always', tabIndex: -1, onChange: () => handleTypeChange('always') }, "Always"),
+                        React.createElement(Radio_1.default, { checked: duration !== 'always', tabIndex: -1, onChange: () => handleTypeChange('number') }, "Limited (ms)")),
+                    React.createElement(FormLayout_1.FormRow, { label: "" },
+                        duration !== 'always' && (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "baseline" },
+                            React.createElement(rebass_1.Text, { fontSize: 2, mr: 2 }, "After"),
+                            React.createElement(Input_1.default, { readOnly: props.readOnly, type: "text", name: "value", ref: inputRef, mt: 2, mr: 1, value: duration, onChange: (event) => {
+                                    const value = event.target.value;
+                                    setDuration(isNaN(Number(value)) ? 500 : Number(value));
+                                } }),
+                            React.createElement(rebass_1.Text, { fontSize: 2 }, "milliseconds"))),
+                        duration === 'always' && (React.createElement(rebass_1.Text, { height: 43, fontSize: 3 }, "Persists the flashing style indeterminately - can be removed manually"))),
+                    React.createElement(FormLayout_1.FormRow, { label: "Flash Target" },
+                        React.createElement(Radio_1.default, { onChange: () => handleTargetChange('cell'), mr: 3, checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) == 'cell', tabIndex: -1 }, "Cell"),
+                        React.createElement(Radio_1.default, { onChange: () => handleTargetChange('row'), checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) == 'row', tabIndex: -1 }, "Row")))))));
+};

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,97 @@
+"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 FlashingCellSettingsWizardSection_1 = require("./FlashingCellSettingsWizardSection");
+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(() => {
+        let flashingCell = props.data
+            ? Helper_1.cloneObject(props.data)
+            : ObjectFactory_1.default.CreateEmptyFlashingCellDefinition();
+        flashingCell = api.flashingCellApi.mergeFlashingCellDefinitionWithDefaults(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(FlashingCellSettingsWizardSection_1.FlashingAlertSettingsWizardSection, { onChange: setFlashingCell }))),
+                renderSummary: FlashingCellSettingsWizardSection_1.renderFlashingAlertSettingsSummary,
+                title: 'Settings',
+            },
+            {
+                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 Rule 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;

package/src/View/FreeTextColumn/Wizard/FreeTextColumnSettingsWizardSection.js

@@ -14,9 +14,10 @@ const react_1 = require("react");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
 const CheckBox_1 = require("../../../components/CheckBox");
-const CodeBlock_1 = require("../../../components/CodeBlock");
 const FormatHelper_1 = require("../../../Utilities/Helpers/FormatHelper");
 const DateHelper_1 = require("../../../Utilities/Helpers/DateHelper");
+const Tag_1 = require("../../../components/Tag");
+const SpecialColumnSettingsWizardStep_1 = require("../../SpecialColumnSettingsWizardStep");
 const options = [
     { value: Enums_1.DataType.Number, label: Enums_1.DataType.Number },
     { value: Enums_1.DataType.String, label: Enums_1.DataType.String },
@@ -28,19 +29,19 @@ exports.renderFreeTextColumnSummary = (data) => {
     return (React.createElement(rebass_1.Box, { fontSize: 2 },
         React.createElement(rebass_1.Box, null,
             "Column Identifier: ",
-            React.createElement(CodeBlock_1.CodeBlock, null, data.ColumnId)),
+            React.createElement(Tag_1.Tag, null, data.ColumnId)),
         data.FriendlyName ? (React.createElement(rebass_1.Box, { mt: 3 },
             "Column Name: ",
-            React.createElement(CodeBlock_1.CodeBlock, null, (_a = data.FriendlyName) !== null && _a !== void 0 ? _a : data.ColumnId))) : null,
+            React.createElement(Tag_1.Tag, null, (_a = data.FriendlyName) !== null && _a !== void 0 ? _a : data.ColumnId))) : null,
         React.createElement(rebass_1.Box, { mt: 3 },
             "Data Type: ",
-            React.createElement(CodeBlock_1.CodeBlock, null, data.DataType)),
+            React.createElement(Tag_1.Tag, null, data.DataType)),
         data.DefaultValue !== undefined ? (React.createElement(rebass_1.Box, { mt: 3 },
             "Default Value: ",
-            React.createElement(CodeBlock_1.CodeBlock, null, `${data.DefaultValue}`))) : null,
+            React.createElement(Tag_1.Tag, null, data.DefaultValue))) : null,
         data.TextEditor !== undefined ? (React.createElement(rebass_1.Box, { mt: 3 },
             "Editor Type: ",
-            React.createElement(CodeBlock_1.CodeBlock, null, data.TextEditor))) : null));
+            React.createElement(Tag_1.Tag, null, data.TextEditor))) : null));
 };
 exports.isValidFreeTextColumn = (data, api) => {
     const columns = api.columnApi.getColumns();
@@ -59,10 +60,9 @@ exports.isValidFreeTextColumn = (data, api) => {
 };
 exports.FreeTextColumnSettingsWizardSection = (props) => {
     const { data, api } = OnePageAdaptableWizard_1.useOnePageWizardContext();
-    const Pattern = api.internalApi.getAdaptableOptions().userInterfaceOptions.dateInputOptions
-        .dateFormat;
+    const Pattern = api.internalApi.getAdaptableOptions().userInterfaceOptions.dateInputOptions.dateFormat;
     const [ColumnNameFocused, setColumnNameFocused] = react_1.useState(false);
-    const inEdit = !!data.Uuid;
+    const inEdit = props.isEdit;
     const validCheck = exports.isValidFreeTextColumn(data, api);
     const ErrorMessage = validCheck === true ? null : validCheck;
     const handleColumnIdChange = (event) => {
@@ -98,6 +98,9 @@ exports.FreeTextColumnSettingsWizardSection = (props) => {
         }
         props.onChange(Object.assign(Object.assign({}, data), { DefaultValue }));
     };
+    const handleSpecialColumnSettingsChange = (settings) => {
+        props.onChange(Object.assign(Object.assign({}, data), { FreeTextColumnSettings: Object.assign(Object.assign({}, data === null || data === void 0 ? void 0 : data.FreeTextColumnSettings), settings) }));
+    };
     return (React.createElement(React.Fragment, null,
         React.createElement(FormLayout_1.default, null,
             React.createElement(FormLayout_1.FormRow, { label: "ColumnId" },
@@ -127,5 +130,7 @@ exports.FreeTextColumnSettingsWizardSection = (props) => {
             data.DataType == 'String' && (React.createElement(FormLayout_1.FormRow, { label: "Editor Type" },
                 React.createElement(Radio_1.default, { value: "Inline", checked: data.TextEditor == 'Inline', onChange: (_, e) => onDynamicSelectChanged(e), marginRight: 2 }, "Inline Editor"),
                 React.createElement(Radio_1.default, { value: "Large", checked: data.TextEditor == 'Large', onChange: (_, e) => onDynamicSelectChanged(e) }, "Large Editor")))),
-        ErrorMessage ? React.createElement(ErrorBox_1.default, { marginTop: 2 }, ErrorMessage) : null));
+        ErrorMessage ? (React.createElement(ErrorBox_1.default, { mt: 2, mb: 2 }, ErrorMessage)) : null,
+        React.createElement(rebass_1.Box, { mt: 2 },
+            React.createElement(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: true, settings: data.FreeTextColumnSettings, onChange: handleSpecialColumnSettingsChange }))));
 };

package/src/View/FreeTextColumn/Wizard/FreeTextColumnWizard.js

@@ -5,23 +5,37 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const rebass_1 = require("rebass");
-const AdaptableContext_1 = require("../../AdaptableContext");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Helper_1 = require("../../../Utilities/Helpers/Helper");
 const FreeTextColumnSettingsWizardSection_1 = require("./FreeTextColumnSettingsWizardSection");
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
+const FreeTextColumnRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/FreeTextColumnRedux"));
+const react_redux_1 = require("react-redux");
 exports.FreeTextColumnWizard = (props) => {
-    const { api } = AdaptableContext_1.useAdaptable();
     const [freeTextColumn, setFreeTextColumn] = react_1.useState(() => {
-        const freeTextColumn = Helper_1.cloneObject(props.data);
+        const freeTextColumn = props.data
+            ? Helper_1.cloneObject(props.data)
+            : ObjectFactory_1.default.CreateEmptyFreeTextColumn(false);
         return freeTextColumn;
     });
-    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { moduleInfo: props.moduleInfo, data: freeTextColumn, onHide: props.onCloseWizard, onFinish: props.onFinishWizard, sections: [
+    const dispatch = react_redux_1.useDispatch();
+    const handleFinish = () => {
+        if (props.data) {
+            dispatch(FreeTextColumnRedux.FreeTextColumnEdit(freeTextColumn));
+        }
+        else {
+            dispatch(FreeTextColumnRedux.FreeTextColumnAdd(freeTextColumn));
+        }
+        props.onFinishWizard(freeTextColumn);
+    };
+    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: freeTextColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
                 details: 'Configure the Free Text Column',
+                isValid: FreeTextColumnSettingsWizardSection_1.isValidFreeTextColumn,
                 render: () => {
                     return (React.createElement(rebass_1.Box, { padding: 2 },
-                        React.createElement(FreeTextColumnSettingsWizardSection_1.FreeTextColumnSettingsWizardSection, { onChange: setFreeTextColumn })));
+                        React.createElement(FreeTextColumnSettingsWizardSection_1.FreeTextColumnSettingsWizardSection, { isEdit: Boolean(props.data), onChange: setFreeTextColumn })));
                 },
             },
             '-',

package/src/View/GridInfo/AdaptableOptionsComponent.js

@@ -70,7 +70,7 @@ exports.AdaptableOptionsComponent = (props) => {
         return (React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { colItems: getAdaptableOptionsColItems(), items: gridInfoOptionComponents }));
     };
     const [gridInfoOptions, setGridInfoOptions] = react_1.useState();
-    const [gridInfoContainerComponents, setGridInfoContainerComponents,] = react_1.useState();
+    const [gridInfoContainerComponents, setGridInfoContainerComponents] = react_1.useState();
     react_1.useEffect(() => {
         const gridInfoOptions = api.internalApi.getMetamodelService().getGridInfoOptions();
         const gridInfoContainerComponentMap = new Map();
@@ -81,7 +81,7 @@ exports.AdaptableOptionsComponent = (props) => {
         setGridInfoOptions(gridInfoOptions);
     }, []);
     const [expandedComponentContainer, setExpandedComponentContainer] = react_1.useState('');
-    return (React.createElement(rebass_1.Box, { margin: 2, "data-name": "gridInfo-adaptableOptions-content" }, gridInfoOptions &&
+    return (React.createElement(rebass_1.Box, { className: "ab-AdaptableOptions", padding: 2, "data-name": "gridInfo-adaptableOptions-content" }, gridInfoOptions &&
         Array.from(gridInfoOptions.entries()).map(([containerName, container]) => (React.createElement(OptionContainerComponent, { key: containerName, name: containerName, label: container.containerLabel, viewMode: containerName === expandedComponentContainer ? 'expanded' : 'collapsed', onViewModeChange: (newViewMode) => setExpandedComponentContainer(newViewMode === 'expanded' ? containerName : '') }, gridInfoContainerComponents.get(containerName))))));
 };
 const OptionContainerComponent = (props) => {

package/src/View/GridInfo/GridInfoPopup.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
 import { AdaptableColumn } from '../../types';
+import { GridInfoSection } from '../../AdaptableOptions/UserInterfaceOptions';
 interface GridInfoPopupProps extends ModuleViewPopupProps<any> {
 }
 export interface AdaptableGridInfoState {
-    ActiveTab: 'GridSummary' | 'GridProperties' | 'AdaptableOptions' | 'Column';
+    ActiveTab: GridInfoSection;
     CurrentColumn: AdaptableColumn | undefined;
     IsBaseOptionsMinimised: boolean;
     IsContainerOptionsMinimised: boolean;