@adaptabletools/adaptable 13.0.0-canary.9 → 13.0.0

package/src/View/QuickSearch/QuickSearchViewPanel.d.ts

@@ -5,4 +5,4 @@ export interface QuickSearchViewPanelComponentProps extends ViewPanelProps {
     onRunQuickSearch: (quickSearchText: string) => QuickSearchRedux.QuickSearchRunAction;
     QuickSearchText: string;
 }
-export declare const QuickSearchViewPanelControl: import("react-redux").ConnectedComponent<(props: QuickSearchViewPanelComponentProps) => JSX.Element, import("react-redux").Omit<QuickSearchViewPanelComponentProps, "api" | "QuickSearchText" | "moduleInfo" | "accessLevel" | "onRunQuickSearch" | "viewType">>;
+export declare const QuickSearchViewPanelControl: import("react-redux").ConnectedComponent<(props: QuickSearchViewPanelComponentProps) => JSX.Element, import("react-redux").Omit<QuickSearchViewPanelComponentProps, "api" | "accessLevel" | "moduleInfo" | "QuickSearchText" | "onRunQuickSearch" | "viewType">>;

package/src/View/Schedule/Wizard/ScheduleScheduleWizard.js

@@ -99,14 +99,14 @@ const ScheduleScheduleWizard = (props) => {
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Frequency" },
-                        React.createElement(Radio_1.default, { mr: 2, value: "recurring", checked: !props.isOneOff, onChange: (checked) => checked && handleIsOneOfChange(false) }, "Recurring Days"),
-                        React.createElement(Radio_1.default, { checked: props.isOneOff, value: "oneoff", onChange: (checked) => checked && handleIsOneOfChange(true) }, "One-Off Date")),
+                        React.createElement(Radio_1.default, { "data-name": "frequency-recurring", mr: 2, value: "recurring", checked: !props.isOneOff, onChange: (checked) => checked && handleIsOneOfChange(false) }, "Recurring Days"),
+                        React.createElement(Radio_1.default, { "data-name": "frequency-one-off", checked: props.isOneOff, value: "oneoff", onChange: (checked) => checked && handleIsOneOfChange(true) }, "One-Off Date")),
                     props.isOneOff ? (React.createElement(FormLayout_1.FormRow, { label: "Date" },
-                        React.createElement(AdaptableInput_1.default, { width: 300, type: "date", placeholder: "Date", onChange: handleOneOfDateChange, value: ((_e = data.Schedule) === null || _e === void 0 ? void 0 : _e.OneOffDate) || '' }))) : (React.createElement(FormLayout_1.FormRow, { label: "Days" }, daysMap.map((day) => {
+                        React.createElement(AdaptableInput_1.default, { "data-name": "one-off-date", width: 300, type: "date", placeholder: "Date", onChange: handleOneOfDateChange, value: ((_e = data.Schedule) === null || _e === void 0 ? void 0 : _e.OneOffDate) || '' }))) : (React.createElement(FormLayout_1.FormRow, { label: "Days" }, daysMap.map((day) => {
                         var _a, _b;
-                        return (React.createElement(CheckBox_1.CheckBox, { width: "33%", ml: 2, value: day.value, checked: (_b = (_a = data.Schedule) === null || _a === void 0 ? void 0 : _a.DaysOfWeek) === null || _b === void 0 ? void 0 : _b.includes(day.value), key: day.value, onChange: (checked) => handleDayChange(checked, day.value) }, day.label));
+                        return (React.createElement(CheckBox_1.CheckBox, { "data-name": `day-${day.value}`, width: "33%", ml: 2, value: day.value, checked: (_b = (_a = data.Schedule) === null || _a === void 0 ? void 0 : _a.DaysOfWeek) === null || _b === void 0 ? void 0 : _b.includes(day.value), key: day.value, onChange: (checked) => handleDayChange(checked, day.value) }, day.label));
                     }))),
                     React.createElement(FormLayout_1.FormRow, { label: "Time" },
-                        React.createElement(AdaptableInput_1.default, { width: 300, value: timeValue, type: "time", onChange: handleTimeChange })))))));
+                        React.createElement(AdaptableInput_1.default, { "data-name": "time", width: 300, value: timeValue, type: "time", onChange: handleTimeChange })))))));
 };
 exports.ScheduleScheduleWizard = ScheduleScheduleWizard;

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsGlue42.js

@@ -20,6 +20,6 @@ const ScheduleSettingsGlue42 = (props) => {
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Select Report" },
-                        React.createElement(DropdownButton_1.default, { width: 300, disabled: props.allReports.length == 0, items: reportOptions }, ((_b = (_a = props === null || props === void 0 ? void 0 : props.glue42) === null || _a === void 0 ? void 0 : _a.Glue42Report) === null || _b === void 0 ? void 0 : _b.ReportName) || 'Select Report')))))));
+                        React.createElement(DropdownButton_1.default, { "data-name": "select-report", width: 300, disabled: props.allReports.length == 0, items: reportOptions }, ((_b = (_a = props === null || props === void 0 ? void 0 : props.glue42) === null || _a === void 0 ? void 0 : _a.Glue42Report) === null || _b === void 0 ? void 0 : _b.ReportName) || 'Select Report')))))));
 };
 exports.ScheduleSettingsGlue42 = ScheduleSettingsGlue42;

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsIPushPull.js

@@ -33,14 +33,14 @@ const ScheduleSettingsIPushPull = (props) => {
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Select Report" },
-                        React.createElement(DropdownButton_1.default, { disabled: props.allReports.length == 0, items: reportOptions, style: { width: 300 } }, ((_b = (_a = props === null || props === void 0 ? void 0 : props.iPushPull) === null || _a === void 0 ? void 0 : _a.IPushPullReport) === null || _b === void 0 ? void 0 : _b.ReportName) || 'Select Report')),
+                        React.createElement(DropdownButton_1.default, { "data-name": "report-name", disabled: props.allReports.length == 0, items: reportOptions, style: { width: 300 } }, ((_b = (_a = props === null || props === void 0 ? void 0 : props.iPushPull) === null || _a === void 0 ? void 0 : _a.IPushPullReport) === null || _b === void 0 ? void 0 : _b.ReportName) || 'Select Report')),
                     React.createElement(FormLayout_1.FormRow, { label: "Select Folder" },
-                        React.createElement(DropdownButton_1.default, { disabled: props.allFolders.length == 0, items: folderOptions, style: { width: 300 } }, ((_d = (_c = props === null || props === void 0 ? void 0 : props.iPushPull) === null || _c === void 0 ? void 0 : _c.IPushPullReport) === null || _d === void 0 ? void 0 : _d.Folder) || 'Select Folder')),
+                        React.createElement(DropdownButton_1.default, { "data-name": "folder-name", disabled: props.allFolders.length == 0, items: folderOptions, style: { width: 300 } }, ((_d = (_c = props === null || props === void 0 ? void 0 : props.iPushPull) === null || _c === void 0 ? void 0 : _c.IPushPullReport) === null || _d === void 0 ? void 0 : _d.Folder) || 'Select Folder')),
                     React.createElement(FormLayout_1.FormRow, { label: "Select Page" },
-                        React.createElement(DropdownButton_1.default, { disabled: props.allFolders.length == 0, items: pagesOptions, style: { width: 300 } }, ((_f = (_e = props === null || props === void 0 ? void 0 : props.iPushPull) === null || _e === void 0 ? void 0 : _e.IPushPullReport) === null || _f === void 0 ? void 0 : _f.Page) || 'Select Page')),
+                        React.createElement(DropdownButton_1.default, { "data-name": "page-name", disabled: props.allFolders.length == 0, items: pagesOptions, style: { width: 300 } }, ((_f = (_e = props === null || props === void 0 ? void 0 : props.iPushPull) === null || _e === void 0 ? void 0 : _e.IPushPullReport) === null || _f === void 0 ? void 0 : _f.Page) || 'Select Page')),
                     React.createElement(FormLayout_1.FormRow, { label: "Data Type" },
-                        React.createElement(Radio_1.default, { mr: 3, value: "Snapshot", checked: props.iPushPull.Transmission === 'Snapshot', onChange: (checked) => checked && handleDataTypeChange('Snapshot') }, "Snapshot (one off report)"),
-                        React.createElement(Radio_1.default, { value: "Live Data", checked: props.iPushPull.Transmission === 'Live Data', onChange: (checked) => checked && handleDataTypeChange('Live Data') }, "Live Data (real-time updates)")),
+                        React.createElement(Radio_1.default, { "data-name": "data-type", mr: 3, value: "Snapshot", checked: props.iPushPull.Transmission === 'Snapshot', onChange: (checked) => checked && handleDataTypeChange('Snapshot') }, "Snapshot (one off report)"),
+                        React.createElement(Radio_1.default, { "data-name": "data-live", value: "Live Data", checked: props.iPushPull.Transmission === 'Live Data', onChange: (checked) => checked && handleDataTypeChange('Live Data') }, "Live Data (real-time updates)")),
                     React.createElement(FormLayout_1.FormRow, { label: "" },
                         React.createElement(OnePageAdaptableWizard_1.FormDescriptionText, null, "Choose whether to send ipushpull Data as 'Snapshot' (One-off report) or 'Live Data' (updating as Grid updates)")))))));
 };

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsOpenFin.js

@@ -20,6 +20,6 @@ const ScheduleSettingsOpenFin = (props) => {
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Select Report" },
-                        React.createElement(DropdownButton_1.default, { columns: ['label'], style: { width: 300 }, disabled: props.allReports.length == 0, items: reportOptions }, ((_b = (_a = props === null || props === void 0 ? void 0 : props.openFin) === null || _a === void 0 ? void 0 : _a.OpenFinReport) === null || _b === void 0 ? void 0 : _b.ReportName) || 'Select Report')))))));
+                        React.createElement(DropdownButton_1.default, { "data-name": "select-report", columns: ['label'], style: { width: 300 }, disabled: props.allReports.length == 0, items: reportOptions }, ((_b = (_a = props === null || props === void 0 ? void 0 : props.openFin) === null || _a === void 0 ? void 0 : _a.OpenFinReport) === null || _b === void 0 ? void 0 : _b.ReportName) || 'Select Report')))))));
 };
 exports.ScheduleSettingsOpenFin = ScheduleSettingsOpenFin;

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsReminder.js

@@ -39,14 +39,14 @@ const ScheduleSettingsReminder = (props) => {
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Header" },
-                        React.createElement(Input_1.default, { width: 300, onChange: handleHeaderChange, placeholder: "Enter Reminder Header (optional)", type: "string", value: (_a = props.reminderSchedule) === null || _a === void 0 ? void 0 : _a.Header })),
+                        React.createElement(Input_1.default, { "data-name": "header", width: 300, onChange: handleHeaderChange, placeholder: "Enter Reminder Header (optional)", type: "string", value: (_a = props.reminderSchedule) === null || _a === void 0 ? void 0 : _a.Header })),
                     React.createElement(FormLayout_1.FormRow, { label: "Message" },
-                        React.createElement(Input_1.default, { width: 300, onChange: handleMessageChange, placeholder: "Enter Reminder Message", type: "string", value: (_b = props.reminderSchedule) === null || _b === void 0 ? void 0 : _b.Message })),
+                        React.createElement(Input_1.default, { "data-name": "message", width: 300, onChange: handleMessageChange, placeholder: "Enter Reminder Message", type: "string", value: (_b = props.reminderSchedule) === null || _b === void 0 ? void 0 : _b.Message })),
                     React.createElement(FormLayout_1.FormRow, { label: "Type" },
-                        React.createElement(DropdownButton_1.default, { style: { width: 300 }, columns: ['label'], placeholder: "Select Option", items: messageTypes }, ((_c = props.reminderSchedule) === null || _c === void 0 ? void 0 : _c.MessageType) || 'Select Option')),
+                        React.createElement(DropdownButton_1.default, { "data-name": "message-type", style: { width: 300 }, columns: ['label'], placeholder: "Select Option", items: messageTypes }, ((_c = props.reminderSchedule) === null || _c === void 0 ? void 0 : _c.MessageType) || 'Select Option')),
                     React.createElement(FormLayout_1.FormRow, { label: "" },
-                        React.createElement(CheckBox_1.CheckBox, { checked: (_d = props.reminderSchedule) === null || _d === void 0 ? void 0 : _d.DisplayNotification, onChange: handleDisplayNotificationChange }, "Show the Reminder as an Alert")),
+                        React.createElement(CheckBox_1.CheckBox, { "data-name": "display-notification", checked: (_d = props.reminderSchedule) === null || _d === void 0 ? void 0 : _d.DisplayNotification, onChange: handleDisplayNotificationChange }, "Show the Reminder as an Alert")),
                     React.createElement(FormLayout_1.FormRow, { label: "" },
-                        React.createElement(CheckBox_1.CheckBox, { checked: (_e = props.reminderSchedule) === null || _e === void 0 ? void 0 : _e.DisplaySystemStatusMessage, onChange: handleDisplaySystemStatusChange }, "Display a System Status Message")))))));
+                        React.createElement(CheckBox_1.CheckBox, { "data-name": "display-system-status", checked: (_e = props.reminderSchedule) === null || _e === void 0 ? void 0 : _e.DisplaySystemStatusMessage, onChange: handleDisplaySystemStatusChange }, "Display a System Status Message")))))));
 };
 exports.ScheduleSettingsReminder = ScheduleSettingsReminder;

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsReport.js

@@ -29,8 +29,8 @@ const ScheduleSettingsReport = (props) => {
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Export" },
-                        React.createElement(DropdownButton_1.default, { columns: ['label'], style: { width: 300 }, items: reportOptions }, ((_a = props === null || props === void 0 ? void 0 : props.report) === null || _a === void 0 ? void 0 : _a.ReportName) || 'Select Report')),
+                        React.createElement(DropdownButton_1.default, { "data-name": "select-report", columns: ['label'], style: { width: 300 }, items: reportOptions }, ((_a = props === null || props === void 0 ? void 0 : props.report) === null || _a === void 0 ? void 0 : _a.ReportName) || 'Select Report')),
                     React.createElement(FormLayout_1.FormRow, { label: "Destination" },
-                        React.createElement(DropdownButton_1.default, { columns: ['label'], style: { width: 300 }, items: destinationOptions }, ((_b = props === null || props === void 0 ? void 0 : props.report) === null || _b === void 0 ? void 0 : _b.ExportDestination) || 'Select Destination')))))));
+                        React.createElement(DropdownButton_1.default, { "data-name": "select-destination", columns: ['label'], style: { width: 300 }, items: destinationOptions }, ((_b = props === null || props === void 0 ? void 0 : props.report) === null || _b === void 0 ? void 0 : _b.ExportDestination) || 'Select Destination')))))));
 };
 exports.ScheduleSettingsReport = ScheduleSettingsReport;

package/src/View/Shortcut/Wizard/ShortcutSettingsWizard.js

@@ -65,17 +65,17 @@ const ShortcutSettingsWizard = (props) => {
                 React.createElement(FormLayout_1.default, { width: 400 },
                     React.createElement(FormLayout_1.FormRow, { label: "Key" },
                         React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                            React.createElement(DropdownButton_1.default, { style: { flex: 1 }, marginRight: 3, items: optionKeys, columns: ['label'] }, shortcut.ShortcutKey || 'Select Key'),
+                            React.createElement(DropdownButton_1.default, { "data-name": "shortcut-key", style: { flex: 1 }, marginRight: 3, items: optionKeys, columns: ['label'] }, shortcut.ShortcutKey || 'Select Key'),
                             React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: "Shortcut: Key", bodyText: ['The keyboard key that, when pressed, triggers the shortcut.'] }))),
                     React.createElement(FormLayout_1.FormRow, { label: "Operation" },
                         React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                            React.createElement(DropdownButton_1.default, { style: { flex: 1 }, marginRight: 3, items: optionActions, columns: ['label'] }, shortcut.ShortcutOperation || 'Select Operation'),
+                            React.createElement(DropdownButton_1.default, { "data-name": "shortcut-operation", style: { flex: 1 }, marginRight: 3, items: optionActions, columns: ['label'] }, shortcut.ShortcutOperation || 'Select Operation'),
                             React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: 'Shortcut: Operation', bodyText: [
                                     "The mathematical operation that is performed on the cell's current value - using the shortcut's 'value' - in order to calculate the new total for the cell.",
                                 ] }))),
                     React.createElement(FormLayout_1.FormRow, { label: "Value" },
                         React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                            React.createElement(Input_1.default, { flex: 1, marginRight: 3, onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: (_a = shortcut.ShortcutValue) !== null && _a !== void 0 ? _a : '' }),
+                            React.createElement(Input_1.default, { "data-name": "shortcut-value", flex: 1, marginRight: 3, onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: (_a = shortcut.ShortcutValue) !== null && _a !== void 0 ? _a : '' }),
                             React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: 'Shortcut: Value', bodyText: [
                                     "The number that is used - together with the shortcut's mathematical 'operation' and the current cell value - in order to calculate the new total for the cell.",
                                 ] }))))))));

package/src/View/SmartEdit/SmartEditPopup.js

@@ -59,11 +59,11 @@ class SmartEditPopupComponent extends React.Component {
                 }
             } },
             React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2, "data-name": "smart-edit-operation" },
-                React.createElement(DropdownButton_1.default, { items: operationMenuItems, columns: ['label'], onMouseDown: preventDefault }, typeof this.props.SmartEditOperation === 'object'
+                React.createElement(DropdownButton_1.default, { "data-name": "smart-edit-operation-dropdown", items: operationMenuItems, columns: ['label'], onMouseDown: preventDefault }, typeof this.props.SmartEditOperation === 'object'
                     ? this.props.SmartEditOperation.name
                     : this.props.SmartEditOperation),
-                React.createElement(Input_1.default, { value: this.props.SmartEditValue.toString(), marginLeft: 2, marginRight: 2, type: "number", placeholder: "Enter a Number", onChange: (e) => this.onSmartEditValueChange(e) }),
-                React.createElement(SimpleButton_1.default, { tone: this.getButtonStyle(), variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(`${this.props.SmartEditValue}`) ||
+                React.createElement(Input_1.default, { "data-name": "smart-edit-value", value: this.props.SmartEditValue.toString(), marginLeft: 2, marginRight: 2, type: "number", placeholder: "Enter a Number", onChange: (e) => this.onSmartEditValueChange(e) }),
+                React.createElement(SimpleButton_1.default, { "data-name": "smart-edit-apply-button", tone: this.getButtonStyle(), variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(`${this.props.SmartEditValue}`) ||
                         (this.props.PreviewInfo &&
                             this.props.PreviewInfo.previewValidationSummary.validationResult == 'All'), onClick: () => {
                         this.submit();

package/src/View/SpecialColumnSettingsWizardStep.js

@@ -38,17 +38,17 @@ const SpecialColumnSettingsWizardStep = (props) => {
                             { size: '30%', name: 'third' },
                         ] },
                         React.createElement(FormLayout_1.FormRow, null,
-                            React.createElement(CheckBox_1.CheckBox, { checked: Filterable, onChange: (Filterable) => onSettingsChange({ Filterable }), disabled: !adaptable.api.internalApi.getAdaptableOptions().filterOptions
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "filterable", checked: Filterable, onChange: (Filterable) => onSettingsChange({ Filterable }), disabled: !adaptable.api.internalApi.getAdaptableOptions().filterOptions
                                     .enableFilterOnSpecialColumns }, "Filterable"),
-                            React.createElement(CheckBox_1.CheckBox, { checked: Resizable, onChange: (Resizable) => onSettingsChange({ Resizable }) }, "Resizable"),
-                            React.createElement(CheckBox_1.CheckBox, { checked: Groupable, onChange: (Groupable) => onSettingsChange({ Groupable }) }, "Groupable")),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "resizable", checked: Resizable, onChange: (Resizable) => onSettingsChange({ Resizable }) }, "Resizable"),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "groupable", checked: Groupable, onChange: (Groupable) => onSettingsChange({ Groupable }) }, "Groupable")),
                         React.createElement(FormLayout_1.FormRow, null,
-                            React.createElement(CheckBox_1.CheckBox, { checked: Sortable, onChange: (Sortable) => onSettingsChange({ Sortable }) }, "Sortable"),
-                            React.createElement(CheckBox_1.CheckBox, { checked: Pivotable, onChange: (Pivotable) => onSettingsChange({ Pivotable }) }, "Pivotable"),
-                            React.createElement(CheckBox_1.CheckBox, { checked: Aggregatable, onChange: (Aggregatable) => onSettingsChange({ Aggregatable }) }, "Aggregatable")),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "sortable", checked: Sortable, onChange: (Sortable) => onSettingsChange({ Sortable }) }, "Sortable"),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "pivotable", checked: Pivotable, onChange: (Pivotable) => onSettingsChange({ Pivotable }) }, "Pivotable"),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "aggregatable", checked: Aggregatable, onChange: (Aggregatable) => onSettingsChange({ Aggregatable }) }, "Aggregatable")),
                         React.createElement(FormLayout_1.FormRow, null,
-                            React.createElement(CheckBox_1.CheckBox, { checked: SuppressMenu, onChange: (SuppressMenu) => onSettingsChange({ SuppressMenu }) }, "Suppress Menu"),
-                            React.createElement(CheckBox_1.CheckBox, { checked: SuppressMovable, onChange: (SuppressMovable) => onSettingsChange({ SuppressMovable }) }, "Suppress Movable"),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "suppres-smenu", checked: SuppressMenu, onChange: (SuppressMenu) => onSettingsChange({ SuppressMenu }) }, "Suppress Menu"),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "suppres-movable", checked: SuppressMovable, onChange: (SuppressMovable) => onSettingsChange({ SuppressMovable }) }, "Suppress Movable"),
                             React.createElement(CheckBox_1.CheckBox, { disabled: true, checked: props.isEditable }, "Editable")))))),
         Boolean(possibleColumnTypes === null || possibleColumnTypes === void 0 ? void 0 : possibleColumnTypes.length) && (React.createElement(Tabs_1.Tabs, { marginTop: 2, autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Column Types"),
@@ -56,8 +56,8 @@ const SpecialColumnSettingsWizardStep = (props) => {
                 React.createElement(FormLayout_1.default, { columns: [{ name: 'first', size: '30%' }, { name: 'second' }] }, (_b = (0, chunk_1.default)(possibleColumnTypes !== null && possibleColumnTypes !== void 0 ? possibleColumnTypes : [], 2)) === null || _b === void 0 ? void 0 : _b.map(([first, second]) => {
                     var _a, _b, _c, _d, _e, _f;
                     return (React.createElement(FormLayout_1.FormRow, { key: first },
-                        first && (React.createElement(CheckBox_1.CheckBox, { onChange: (checked) => handleColumnTypeChange(first, checked), checked: (_c = (_b = (_a = props.settings) === null || _a === void 0 ? void 0 : _a.ColumnTypes) === null || _b === void 0 ? void 0 : _b.includes) === null || _c === void 0 ? void 0 : _c.call(_b, first) }, first)),
-                        second && (React.createElement(CheckBox_1.CheckBox, { onChange: (checked) => handleColumnTypeChange(second, checked), checked: (_f = (_e = (_d = props.settings) === null || _d === void 0 ? void 0 : _d.ColumnTypes) === null || _e === void 0 ? void 0 : _e.includes) === null || _f === void 0 ? void 0 : _f.call(_e, second) }, second))));
+                        first && (React.createElement(CheckBox_1.CheckBox, { "data-name": first, onChange: (checked) => handleColumnTypeChange(first, checked), checked: (_c = (_b = (_a = props.settings) === null || _a === void 0 ? void 0 : _a.ColumnTypes) === null || _b === void 0 ? void 0 : _b.includes) === null || _c === void 0 ? void 0 : _c.call(_b, first) }, first)),
+                        second && (React.createElement(CheckBox_1.CheckBox, { "data-name": second, onChange: (checked) => handleColumnTypeChange(second, checked), checked: (_f = (_e = (_d = props.settings) === null || _d === void 0 ? void 0 : _d.ColumnTypes) === null || _e === void 0 ? void 0 : _e.includes) === null || _f === void 0 ? void 0 : _f.call(_e, second) }, second))));
                 })))))));
 };
 exports.SpecialColumnSettingsWizardStep = SpecialColumnSettingsWizardStep;

package/src/View/StateManagement/StateManagementPopup.js

@@ -15,18 +15,18 @@ const StateManagementPopup = (props) => {
         React.createElement(Panel_1.default, { className: `${baseClassName}__panel`, "data-name": "user-state", header: 'User State', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginRight: 2, mb: 2 },
             React.createElement(HelpBlock_1.default, { marginBottom: 2 }, 'Clear all current user state that has been persisted.'),
             React.createElement(HelpBlock_1.default, null, 'This will cause this window to close and any state you have previously created will be lost and the initial Predefined Config will then be reapplied.'),
-            React.createElement(ClearButton_1.ClearButton, { tone: "error", variant: "raised", marginTop: 2, accessLevel: props.accessLevel, onClick: () => props.api.configApi.reloadPredefinedConfig() }, "Clear User State")),
+            React.createElement(ClearButton_1.ClearButton, { "data-name": "clear-user-state-button", tone: "error", variant: "raised", marginTop: 2, accessLevel: props.accessLevel, onClick: () => props.api.configApi.reloadPredefinedConfig() }, "Clear User State")),
         React.createElement(Panel_1.default, { className: `${baseClassName}__panel`, "data-name": "predefined-config", header: 'Load Predefined Config', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2, mb: 2 },
             React.createElement(HelpBlock_1.default, { marginTop: 2 }, 'Load Predefined Config (from a .json file).  This will cause this window to close.'),
             ' ',
-            React.createElement(LoadButton_1.LoadButton, { tone: "info", variant: "raised", marginTop: 2, accessLevel: props.accessLevel, onLoad: (json) => props.api.configApi.reloadPredefinedConfig(json) }, "Load Predefined Config")),
+            React.createElement(LoadButton_1.LoadButton, { tone: "info", variant: "raised", marginTop: 2, accessLevel: props.accessLevel, onLoad: (json) => props.api.configApi.reloadPredefinedConfig(json), "data-name": "load-predefined-config-button" }, "Load Predefined Config")),
         React.createElement(Panel_1.default, { className: `${baseClassName}__panel`, "data-name": "adaptable-state", header: 'Export Adaptable State', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2, mb: 2 },
             React.createElement(HelpBlock_1.default, { marginTop: 2, marginBottom: 2 }, 'Exports the currently persisted Adaptable state.'),
             ' ',
-            React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "adaptableState", marginRight: 3, style: { flex: 1, maxWidth: 'none' }, columns: ['label'] }, "Select Export Destination")),
+            React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "adaptableState", marginRight: 3, style: { flex: 1, maxWidth: 'none' }, columns: ['label'], "data-name": "export-adaptable-state-dropdown" }, "Select Export Destination")),
         React.createElement(Panel_1.default, { className: `${baseClassName}__panel`, "data-name": "initial-predefined-config", header: 'Export Initial Predefined Config', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2, mb: 2 },
             React.createElement(HelpBlock_1.default, { marginTop: 2, marginBottom: 2 }, 'Exports the Predefined Config which was provided at design time.'),
             ' ',
-            React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "predefinedConfig", marginRight: 3, style: { flex: 1, maxWidth: 'none' }, columns: ['label'] }, "Select Export Destination"))));
+            React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "predefinedConfig", marginRight: 3, style: { flex: 1, maxWidth: 'none' }, columns: ['label'], "data-name": "export-initial-predefined-config-dropdown" }, "Select Export Destination"))));
 };
 exports.StateManagementPopup = StateManagementPopup;

package/src/View/StyledColumn/Wizard/StyledColumnWizard.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { AdaptableOnePageWizardProps } from '../../Wizard/Interface/IAdaptableWizard';
+import { StyledColumn } from '../../../PredefinedConfig/StyledColumnState';
+export interface StyledColumnWizardProps extends AdaptableOnePageWizardProps<StyledColumn> {
+    isNew: boolean;
+}
+export declare const StyledColumnWizard: (props: StyledColumnWizardProps) => JSX.Element;

package/src/View/StyledColumn/Wizard/StyledColumnWizard.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnWizard = 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 react_redux_1 = require("react-redux");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
+const StyledColumnRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/StyledColumnRedux"));
+const StyledColumnWizardTypeSection_1 = require("./StyledColumnWizardTypeSection");
+const StyledColumnWizardColumnSection_1 = require("./StyledColumnWizardColumnSection");
+const StyledColumnWizardStyleSection_1 = require("./StyledColumnWizardStyleSection");
+const Helper_1 = require("../../../Utilities/Helpers/Helper");
+const StyledColumnWizard = (props) => {
+    var _a;
+    const data = (_a = props.data) !== null && _a !== void 0 ? _a : props.popupParams.value;
+    const [styledColumn, setStyledColumn] = (0, react_1.useState)(() => {
+        if (data) {
+            return (0, Helper_1.cloneObject)(data);
+        }
+        const newData = ObjectFactory_1.default.CreateEmptyStyledColumn();
+        newData.GradientStyle = {};
+        return newData;
+    });
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const handleFinish = () => {
+        if (data) {
+            dispatch(StyledColumnRedux.StyledColumnEdit(styledColumn));
+        }
+        else {
+            dispatch(StyledColumnRedux.StyledColumnAdd(styledColumn));
+        }
+        props.onFinishWizard(styledColumn);
+    };
+    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: styledColumn, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
+            {
+                details: 'Select a Styled Column Type',
+                renderSummary: StyledColumnWizardTypeSection_1.renderStyledColumnTypeSummary,
+                render: () => {
+                    return (React.createElement(rebass_1.Box, { padding: 2 },
+                        React.createElement(StyledColumnWizardTypeSection_1.StyledColumnWizardTypeSection, { onChange: setStyledColumn })));
+                },
+                title: 'Type',
+            },
+            {
+                isValid: StyledColumnWizardColumnSection_1.isValidStyledColumnColumn,
+                renderSummary: StyledColumnWizardColumnSection_1.renderStyledColumnColumnSummary,
+                details: 'Select column to apply the style to',
+                render: () => {
+                    return (React.createElement(rebass_1.Box, { padding: 2, style: { height: '100%' } },
+                        React.createElement(StyledColumnWizardColumnSection_1.StyledColumnWizardColumnSection, { isNew: props.isNew, onChange: setStyledColumn })));
+                },
+                title: 'Column',
+            },
+            {
+                details: 'Select the style to apply',
+                renderSummary: StyledColumnWizardStyleSection_1.renderStyledColumnStyleSummary,
+                render: () => {
+                    return (React.createElement(rebass_1.Box, { padding: 2 },
+                        React.createElement(StyledColumnWizardStyleSection_1.StyledColumnWizardStyleSection, { onChange: setStyledColumn })));
+                },
+                title: 'Style',
+            },
+            '-',
+            {
+                title: 'Summary',
+                details: 'Review your Styled Column',
+                render: () => {
+                    return (React.createElement(rebass_1.Box, { padding: 2 },
+                        React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null)));
+                },
+            },
+        ] }));
+};
+exports.StyledColumnWizard = StyledColumnWizard;

package/src/View/StyledColumn/Wizard/StyledColumnWizardColumnSection.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { StyledColumn } from '../../../PredefinedConfig/StyledColumnState';
+export declare const renderStyledColumnColumnSummary: (data: StyledColumn) => JSX.Element;
+export declare const isValidStyledColumnColumn: (data: StyledColumn) => true | string;
+export declare type StyledColumnWizardColumnSectionProps = {
+    onChange: (data: StyledColumn) => void;
+    isNew: boolean;
+};
+export declare const StyledColumnWizardColumnSection: (props: StyledColumnWizardColumnSectionProps) => JSX.Element;

package/src/View/StyledColumn/Wizard/StyledColumnWizardColumnSection.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnWizardColumnSection = exports.isValidStyledColumnColumn = exports.renderStyledColumnColumnSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const Tabs_1 = require("../../../components/Tabs");
+const Tag_1 = require("../../../components/Tag");
+const ColumnSelector_1 = require("../../Components/ColumnSelector");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const renderStyledColumnColumnSummary = (data) => {
+    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    return (React.createElement(rebass_1.Text, { pr: 2, py: 2 },
+        "Styled Column column:",
+        ' ',
+        React.createElement(Tag_1.Tag, null, data.ColumnId
+            ? api.columnApi.getFriendlyNameFromColumnId(data.ColumnId)
+            : 'No Column Selected')));
+};
+exports.renderStyledColumnColumnSummary = renderStyledColumnColumnSummary;
+const isValidStyledColumnColumn = (data) => {
+    if (!data.ColumnId) {
+        return 'You have to select a Column for Styled Column';
+    }
+    return true;
+};
+exports.isValidStyledColumnColumn = isValidStyledColumnColumn;
+const StyledColumnWizardColumnSection = (props) => {
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const sortableCols = React.useMemo(() => {
+        const sortableColumns = data.CheckBoxStyle
+            ? api.columnApi.getBooleanColumns()
+            : api.columnApi.getNumericColumns();
+        const styledColumns = api.styledColumnApi.getAllStyledColumn();
+        const usedColumnIds = styledColumns.map((StyledColumn) => StyledColumn.ColumnId);
+        // filter out used colum ids, but include the current one
+        return sortableColumns.filter((column) => {
+            if (!props.isNew && column.columnId === (data === null || data === void 0 ? void 0 : data.ColumnId)) {
+                return true;
+            }
+            return usedColumnIds.every((usedColumnId) => {
+                return column.columnId !== usedColumnId;
+            });
+        });
+    }, []);
+    const handleColumnsChange = (columnIds) => {
+        const columnId = columnIds[0];
+        const emptyRanges = api.scopeApi.createCellColorRangesForScope({
+            ColumnIds: [columnId], // TODO: refactor to not use scope
+        });
+        const newStyledColumn = Object.assign(Object.assign({}, data), { ColumnId: columnId });
+        if (newStyledColumn.PercentBarStyle) {
+            newStyledColumn.PercentBarStyle = Object.assign(Object.assign({}, newStyledColumn.PercentBarStyle), { CellRanges: emptyRanges });
+        }
+        if (newStyledColumn.GradientStyle) {
+            newStyledColumn.GradientStyle = Object.assign(Object.assign({}, newStyledColumn.GradientStyle), { CellRanges: emptyRanges });
+        }
+        props.onChange(newStyledColumn);
+    };
+    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs_1.Tabs.Tab, null, "Column"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(ColumnSelector_1.NewColumnSelector, { availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: handleColumnsChange, allowReorder: false }))));
+};
+exports.StyledColumnWizardColumnSection = StyledColumnWizardColumnSection;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { StyledColumn } from '../../../PredefinedConfig/StyledColumnState';
+import { AdaptableApi } from '../../../types';
+export declare const renderFormatColumnStyleWizardSummary: (data: StyledColumn) => JSX.Element;
+export declare const renderStyledColumnStyleSummary: (data: StyledColumn, api: AdaptableApi) => JSX.Element;
+export interface StyledColumnWizardStyleSectionProps {
+    onChange: (styledColumn: StyledColumn) => void;
+}
+export declare const StyledColumnWizardStyleSection: React.FunctionComponent<StyledColumnWizardStyleSectionProps>;