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

package/src/View/CustomSort/CustomSortEntityRow.js

@@ -11,13 +11,13 @@ const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Exten
 const Helper_1 = require("../../Utilities/Helpers/Helper");
 class CustomSortEntityRow extends React.Component {
     render() {
+        var _a;
         let customSort = this.props.adaptableObject;
         const columnSortComparer = this.props.api.internalApi.getCustomSortComparer(this.props.column);
         let colItems = Helper_1.cloneObject(this.props.colItems);
-        colItems[0].Content = React.createElement(EntityRowItem_1.EntityRowItem, { Content: this.props.column.friendlyName });
+        colItems[0].Content = this.props.column ? (React.createElement(EntityRowItem_1.EntityRowItem, { Content: this.props.column.friendlyName })) : this.props.scope ? (React.createElement(EntityRowItem_1.EntityRowItem, { Content: this.props.api.scopeApi.getScopeToString(this.props.scope) })) : (React.createElement("p", null, "Nothing"));
         colItems[1].Content = (React.createElement(EntityRowItem_1.EntityRowItem, { Content: customSort ? this.getCustomSortedValues(customSort) : 'Custom Sort Function' }));
-        colItems[2].Content = (React.createElement(EntityListActionButtons_1.EntityListActionButtons, { showSuspend: true, suspendableObject: customSort, confirmDeleteAction: this.props.onDeleteConfirm, editClick: () => this.props.onEdit(customSort), shareClick: (config) => this.props.onShare(config), showShare: this.props.teamSharingActivated, overrideDisableEdit: columnSortComparer != undefined ||
-                this.props.column.friendlyName.includes(GeneralConstants.MISSING_COLUMN), entityType: this.props.moduleInfo.FriendlyName, accessLevel: this.props.accessLevel, onSuspend: this.props.onSuspend, onUnSuspend: this.props.onUnSuspend }));
+        colItems[2].Content = (React.createElement(EntityListActionButtons_1.EntityListActionButtons, { showSuspend: true, suspendableObject: customSort, confirmDeleteAction: this.props.onDeleteConfirm, editClick: () => this.props.onEdit(customSort), shareClick: (config) => this.props.onShare(config), showShare: this.props.teamSharingActivated, overrideDisableEdit: columnSortComparer != undefined || ((_a = this.props.column) === null || _a === void 0 ? void 0 : _a.friendlyName.includes(GeneralConstants.MISSING_COLUMN)), entityType: this.props.moduleInfo.FriendlyName, accessLevel: this.props.accessLevel, onSuspend: this.props.onSuspend, onUnSuspend: this.props.onUnSuspend }));
         return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { isSuspended: customSort.IsSuspended, colItems: colItems });
     }
     getCustomSortedValues(customSort) {

package/src/View/CustomSort/CustomSortPopup.js

@@ -82,7 +82,7 @@ class CustomSortPopupComponent extends React.Component {
         const columnSortComparers = (_a = this.props.api.internalApi
             .getAdaptableOptions()
             .generalOptions.customSortComparers) === null || _a === void 0 ? void 0 : _a.map((comparer, index) => {
-            return (React.createElement(CustomSortEntityRow_1.CustomSortEntityRow, { colItems: colItems, api: this.props.api, adaptableObject: comparer, moduleInfo: this.props.moduleInfo, key: comparer.columnId + index, teamSharingActivated: this.props.teamSharingActivated, onShare: null, onEdit: null, onDeleteConfirm: null, column: this.props.api.columnApi.getColumnFromId(comparer.columnId), accessLevel: 'ReadOnly' }));
+            return (React.createElement(CustomSortEntityRow_1.CustomSortEntityRow, { colItems: colItems, api: this.props.api, adaptableObject: comparer, moduleInfo: this.props.moduleInfo, key: 'columnValuesComparer' + index, teamSharingActivated: this.props.teamSharingActivated, onShare: null, onEdit: null, onDeleteConfirm: null, scope: comparer.scope, accessLevel: 'ReadOnly' }));
         });
         let newButton = (React.createElement(ButtonNew_1.ButtonNew, { onClick: () => this.onNew(), tooltip: "Create Custom Sort", accessLevel: this.props.accessLevel, style: {
                 color: 'var(--ab-color-text-on-add)',

package/src/View/CustomSort/Wizard/CustomSortColumnWizardSection.js

@@ -30,7 +30,7 @@ exports.CustomSortColumnWizardSection = (props) => {
         const columnSortComparers = ((_b = (_a = api.internalApi.getAdaptableOptions()) === null || _a === void 0 ? void 0 : _a.generalOptions) === null || _b === void 0 ? void 0 : _b.customSortComparers) || [];
         const usedColumnIds = [
             ...customSorts.map((customSort) => customSort.ColumnId),
-            ...columnSortComparers.map((comparer) => comparer.columnId),
+            ...columnSortComparers.map((comparer) => api.scopeApi.getColumnIdsInScope(comparer.scope)),
         ];
         // filter out used colum ids, but include the current one
         return sortableColumns.filter((column) => {

package/src/View/Dashboard/Dashboard.js

@@ -84,7 +84,8 @@ const DashboardComponent = (props) => {
     };
     const renderDashboardButtons = () => {
         var _a;
-        let dashboardButtonsArray = (_a = props.api.dashboardApi.getCustomDashboardButtons()) === null || _a === void 0 ? void 0 : _a.filter((c) => c);
+        let dashboardButtonsArray = (_a = props.api.dashboardApi
+            .getCustomDashboardButtons()) === null || _a === void 0 ? void 0 : _a.filter((c) => c);
         let customDashboardButtons = null;
         if (dashboardButtonsArray) {
             customDashboardButtons = dashboardButtonsArray.map((button) => {
@@ -140,8 +141,7 @@ const DashboardComponent = (props) => {
                 label: menuItem.label,
             };
         });
-        let dashboardOptions = props.api.internalApi.getAdaptableOptions()
-            .dashboardOptions;
+        let dashboardOptions = props.api.internalApi.getAdaptableOptions().dashboardOptions;
         if (dashboardAccessLevel == 'Full' || dashboardAccessLevel == 'ReadOnly') {
             menuItems.unshift(dashboardAccessLevel == 'Full'
                 ? {

package/src/View/DataChangeHistory/DataChangeHistoryGrid.d.ts

@@ -2,7 +2,7 @@
 import { DataChangedInfo } from '../../PredefinedConfig/Common/DataChangedInfo';
 export interface DataChangeHistoryGridProps {
     adaptableContainerId: string;
-    vendorContainerId: string;
+    agGridContainerId: string;
     changeHistoryLog: Record<string, DataChangedInfo>;
     onUndoChange: (changeKey: string) => void;
 }

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -9,7 +9,7 @@ const react_1 = require("react");
 const usePrevious_1 = tslib_1.__importDefault(require("../../components/utils/usePrevious"));
 const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
 exports.DataChangeHistoryGrid = (props) => {
-    const { changeHistoryLog, adaptableContainerId, vendorContainerId, onUndoChange } = props;
+    const { changeHistoryLog, adaptableContainerId, agGridContainerId, onUndoChange } = props;
     const mainAdaptableInstance = AdaptableContext_1.useAdaptable();
     const [_adaptableApi, setAdaptableApi] = react_1.useState(null);
     const adaptableApiRef = react_1.useRef(null);
@@ -22,7 +22,7 @@ exports.DataChangeHistoryGrid = (props) => {
     react_1.useEffect(() => {
         const initializeAdaptableGrid = async () => {
             const gridOptions = buildGridOptions(mainAdaptableInstance, changeHistoryLog);
-            const adaptableOptions = buildAdaptableOptions(mainAdaptableInstance, gridOptions, adaptableContainerId, vendorContainerId, undoChangeEnabled, onUndoChange);
+            const adaptableOptions = buildAdaptableOptions(mainAdaptableInstance, gridOptions, adaptableContainerId, agGridContainerId, undoChangeEnabled, onUndoChange);
             // to avoid direct dependency to Adaptable.ts and thus creating a circular dependency;
             const adaptableInitFn = Object.getPrototypeOf(mainAdaptableInstance).constructor.init;
             const dataChangeHistoryAdaptableApi = await adaptableInitFn(adaptableOptions);
@@ -71,7 +71,7 @@ exports.DataChangeHistoryGrid = (props) => {
     }, [changeHistoryLog]);
     return React.createElement(React.Fragment, null);
 };
-const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableContainerId, vendorContainerId, undoChangeEnabled, onUndoChange) => {
+const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableContainerId, agGridContainerId, undoChangeEnabled, onUndoChange) => {
     var _a, _b;
     const mainAdaptableOptions = mainAdaptableInstance.adaptableOptions;
     const mainAdaptableTheme = mainAdaptableInstance.api.themeApi.getCurrentTheme();
@@ -88,7 +88,7 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
         adaptableId: `${mainAdaptableOptions.adaptableId}::DataChangeHistory`,
         containerOptions: {
             adaptableContainer: adaptableContainerId,
-            vendorContainer: vendorContainerId,
+            agGridContainer: agGridContainerId,
         },
         entitlementOptions: {
             defaultAccessLevel: 'Hidden',
@@ -188,7 +188,8 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
         const layoutColumns = options.predefinedConfig.Layout.Layouts[0].Columns;
         if (layoutColumns.includes('undoActionColumn')) {
             // remove action column from layout
-            options.predefinedConfig.Layout.Layouts[0].Columns = layoutColumns.filter((columnId) => columnId !== 'undoActionColumn');
+            options.predefinedConfig.Layout.Layouts[0].Columns =
+                layoutColumns.filter((columnId) => columnId !== 'undoActionColumn');
         }
     }
     return options;

package/src/View/DataChangeHistory/DataChangeHistoryPopup.js

@@ -21,8 +21,8 @@ class DataChangeHistoryPopupComponent extends React.Component {
     }
     render() {
         const { changeHistoryMode, activationTime, suspensionTime, onChangeHistoryEnable, onChangeHistoryDisable, onChangeHistorySuspend, onChangeHistoryResume, } = this.props;
-        const adaptableContainerId = 'dataChangeHistoryAdaptableGrid';
-        const vendorContainerId = 'dataChangeHistoryVendorGrid';
+        const adaptableContainerId = 'dataChangeHistoryAdaptableContainer';
+        const agGridContainerId = 'dataChangeHistoryAgGridContainer';
         const enabled = changeHistoryMode === 'ACTIVE';
         const disabled = changeHistoryMode === 'INACTIVE';
         const suspended = changeHistoryMode === 'SUSPENDED';
@@ -53,9 +53,9 @@ class DataChangeHistoryPopupComponent extends React.Component {
                 this.props.api.dataChangeHistoryApi.undoDataChangeHistoryEntry(changeToBeUndone);
             }
         };
-        const currentVendorTheme = this.props.api.internalApi
+        const currentAgGridTheme = this.props.api.internalApi
             .getAdaptableInstance()
-            .getVendorGridCurrentThemeName();
+            .getAgGridCurrentThemeName();
         return (React.createElement(PanelWithButton_1.PanelWithButton, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), border: "none", bodyProps: { padding: 0 } },
             React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPopup", flexDirection: "column", style: { height: '100%' } },
                 React.createElement(rebass_1.Flex, { style: {
@@ -67,8 +67,8 @@ class DataChangeHistoryPopupComponent extends React.Component {
                         statusPanel)),
                 React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPopup--grid", "data-name": 'data-change-history--grid', flex: 1, alignSelf: 'stretch', flexDirection: 'column' },
                     React.createElement("div", { id: adaptableContainerId }),
-                    React.createElement("div", { id: vendorContainerId, className: currentVendorTheme, style: { height: '100%', width: '1000px' } }),
-                    React.createElement(DataChangeHistoryGrid_1.DataChangeHistoryGrid, { adaptableContainerId: adaptableContainerId, vendorContainerId: vendorContainerId, changeHistoryLog: this.props.changeHistoryLog, onUndoChange: handleChangeUndo })))));
+                    React.createElement("div", { id: agGridContainerId, className: currentAgGridTheme, style: { height: '100%', width: '1000px' } }),
+                    React.createElement(DataChangeHistoryGrid_1.DataChangeHistoryGrid, { adaptableContainerId: adaptableContainerId, agGridContainerId: agGridContainerId, changeHistoryLog: this.props.changeHistoryLog, onUndoChange: handleChangeUndo })))));
     }
 }
 function mapStateToProps(state, ownProps) {

package/src/View/Export/ExportViewPanel.js

@@ -92,12 +92,12 @@ class ExportViewPanelComponent extends React.Component {
             }
         };
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Export__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-            React.createElement(rebass_1.Flex, null,
-                React.createElement(DropdownButton_1.default, { disabled: allReportNames.length == 0, style: { minWidth: 168, fontSize: 'small' }, items: reportItems, columns: ['label'], className: `ab-${elementType}__Export__select`, onClear: () => this.onSelectedReportChanged(null), showClearButton: !!currentReport, variant: "outlined", marginRight: 2 }, currentReportId)),
-            React.createElement(rebass_1.Flex, null,
-                React.createElement(DropdownButton_1.default, { disabled: currentReportId === SELECT_REPORT_STRING, style: { minWidth: 168, fontSize: 'small' }, items: destinationItems, columns: ['label'], className: `ab-${elementType}__Export__export`, onClear: () => this.onSelectedDestinationChanged(null), showClearButton: !!currentDestination, variant: "outlined", marginRight: 2 }, currentDestinationId)),
-            React.createElement(rebass_1.Flex, { className: join_1.default(accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Export__controls`), style: { minWidth: '168px' } },
+        return (React.createElement(rebass_1.Flex, { style: { gap: 5 }, flexDirection: "row", className: `ab-${elementType}__Export__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+            React.createElement(rebass_1.Flex, { flex: 1 },
+                React.createElement(DropdownButton_1.default, { disabled: allReportNames.length == 0, style: { width: '100%', fontSize: 'small' }, items: reportItems, columns: ['label'], className: `ab-${elementType}__Export__select`, onClear: () => this.onSelectedReportChanged(null), showClearButton: !!currentReport, variant: "outlined", marginRight: 2 }, currentReportId)),
+            React.createElement(rebass_1.Flex, { flex: 1 },
+                React.createElement(DropdownButton_1.default, { disabled: currentReportId === SELECT_REPORT_STRING, style: { width: '100%', fontSize: 'small' }, items: destinationItems, columns: ['label'], className: `ab-${elementType}__Export__export`, onClear: () => this.onSelectedDestinationChanged(null), showClearButton: !!currentDestination, variant: "outlined", marginRight: 2 }, currentDestinationId)),
+            React.createElement(rebass_1.Flex, { className: join_1.default(accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Export__controls`), style: { width: '100%' } },
                 React.createElement(ButtonExport_1.ButtonExport, { onClick: () => onApplyExport(), tooltip: "Export Report", className: `ab-${elementType}__Export__export`, disabled: currentReport == null || currentDestination == null }),
                 React.createElement(ButtonEdit_1.ButtonEdit, { onClick: () => this.props.onEditReport(this.props.moduleInfo.Popup), tooltip: "Edit Report", className: `ab-${elementType}__Export__edit`, disabled: currentReport == null || currentReport.ReportColumnScope == 'CustomColumns', accessLevel: accessLevel }),
                 React.createElement(ButtonNew_1.ButtonNew, { variant: "text", className: `ab-${elementType}__Export__new`, tone: "neutral", children: null, onClick: () => this.props.onNewReport(this.props.moduleInfo.Popup), tooltip: "Create New Report", accessLevel: accessLevel }),

package/src/View/GridInfo/GridOptionsComponent.js

@@ -9,7 +9,7 @@ const CheckBox_1 = require("../../components/CheckBox");
 class GridOptionsComponent extends React.Component {
     constructor(props) {
         super(props);
-        const gridOptions = props.api.internalApi.getVendorGridInstance();
+        const gridOptions = props.api.internalApi.getAgGridInstance();
         this.state = {
             testString: 'Hello world',
             showTotalFooter: gridOptions.groupIncludeTotalFooter,

package/src/View/Layout/LayoutViewPanel.js

@@ -30,8 +30,8 @@ class LayoutViewPanelComponent extends React.Component {
         });
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-            React.createElement(rebass_1.Flex, null,
-                React.createElement(DropdownButton_1.default, { marginRight: 2, columns: ['label'], style: { minWidth: 168, fontSize: 'small' }, className: `ab-${elementType}__Layout__select`, items: availableLayoutOptions, disabled: availableLayoutOptions.length == 0 }, layoutEntity ? layoutEntity.Name : null)),
+            React.createElement(rebass_1.Flex, { flex: 1 },
+                React.createElement(DropdownButton_1.default, { marginRight: 2, columns: ['label'], style: { width: '100%', fontSize: 'small' }, className: `ab-${elementType}__Layout__select`, items: availableLayoutOptions, disabled: availableLayoutOptions.length == 0 }, layoutEntity ? layoutEntity.Name : null)),
             React.createElement(rebass_1.Flex, { flexDirection: "row", className: join_1.default(this.props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Layout__wrap`) },
                 isManualSaveLayout && (React.createElement(ButtonSave_1.ButtonSave, { className: `ab-${elementType}__Layout__save`, onClick: () => this.onSaveLayout(), tooltip: "Save Changes to Current Layout", disabled: !this.props.CanSave, accessLevel: accessLevel })),
                 React.createElement(ButtonEdit_1.ButtonEdit, { onClick: () => this.props.onEditLayout(this.props.moduleInfo.Popup), tooltip: "Edit Layout", className: `ab-${elementType}__Layout__edit`, accessLevel: accessLevel }),

package/src/View/Query/QueryViewPanel.js

@@ -88,7 +88,7 @@ class QueryViewPanelComponent extends React.Component {
                     } }),
                 isExpressionValid ? (React.createElement(ButtonPlay_1.ButtonPlay, { onClick: () => this.runQuery(), tooltip: '', accessLevel: 'Full', variant: "text", tone: "neutral", disabled: this.state.expression == '' || this.state.expression == this.props.CurrentQuery, marginRight: 1 })) : (React.createElement(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Query", marginRight: 1 })),
                 ' ',
-                this.props.CurrentQuery !== '' && (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => this.props.onRunQuery(''), tooltip: "Clear Query", accessLevel: 'Full' })))) : (React.createElement(Input_1.default, { type: "text", placeholder: "Query", spellCheck: false, value: this.state.expression, onChange: (x) => this.setState({ expression: x.target.value }), style: { width: '100%', minWidth: 168 } }));
+                this.props.CurrentQuery !== '' && (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => this.props.onRunQuery(''), tooltip: "Clear Query", accessLevel: 'Full' })))) : (React.createElement(Input_1.default, { type: "text", placeholder: "Query", spellCheck: false, value: this.state.expression, onChange: (x) => this.setState({ expression: x.target.value }), style: { width: '100%' } }));
         };
         const queryModuleAccessLevel = this.props.api.internalApi
             .getEntitlementService()

package/src/View/QuickSearch/useQuickSearchDebounced.js

@@ -4,12 +4,11 @@ exports.useQuickSearchDebounced = void 0;
 const tslib_1 = require("tslib");
 const react_1 = require("react");
 const debounce_1 = tslib_1.__importDefault(require("lodash-es/debounce"));
+const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 exports.useQuickSearchDebounced = (props) => {
     var _a;
     const [searchText, setSearchText] = react_1.useState((_a = props.QuickSearchText) !== null && _a !== void 0 ? _a : '');
-    const debouncedRunQuickSearch = react_1.useMemo(() => debounce_1.default(props.onRunQuickSearch, 350), [
-        props.onRunQuickSearch,
-    ]);
+    const debouncedRunQuickSearch = react_1.useMemo(() => debounce_1.default(props.onRunQuickSearch, GeneralConstants_1.QUICK_SEARCH_DEBOUNCE_TIME), [props.onRunQuickSearch]);
     react_1.useEffect(() => {
         setSearchText(props.QuickSearchText);
     }, [props.QuickSearchText]);

package/src/View/Schedule/SchedulePopup.js

@@ -156,15 +156,15 @@ class SchedulePopupComponent extends React.Component {
         if (exportModuleAccessLevel !== 'Hidden') {
             allSchedules.push(...this.props.ReportSchedules);
         }
-        const ippApi = this.props.api.pluginsApi.getPluginApi('ipushpull');
+        const ippApi = this.props.api.pluginsApi.getipushpullPluginApi();
         if (ippApi && ippApi.isIPushPullRunning()) {
             allSchedules.push(...this.props.IPushPullSchedules);
         }
-        const glue42Api = this.props.api.pluginsApi.getPluginApi('glue42');
+        const glue42Api = this.props.api.pluginsApi.getGlue42PluginApi();
         if (glue42Api && glue42Api.isGlue42Running()) {
             allSchedules.push(...this.props.Glue42Schedules);
         }
-        const openFinApi = this.props.api.pluginsApi.getPluginApi('openfin');
+        const openFinApi = this.props.api.pluginsApi.getOpenFinPluginApi();
         if (openFinApi && openFinApi.isOpenFinRunning()) {
             allSchedules.push(...this.props.OpenFinSchedules);
         }

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

@@ -21,7 +21,7 @@ exports.ScheduleSettingsWizard = (props) => {
         return (React.createElement(ScheduleSettingsReport_1.ScheduleSettingsReport, { allReports: allReports !== null && allReports !== void 0 ? allReports : [], customDestinations: customDestinations || [], report: data, onChange: props.onChange }));
     }
     if ((data === null || data === void 0 ? void 0 : data.ScheduleType) === Enums_1.ScheduleType.ipushpull) {
-        const ippApi = api.pluginsApi.getPluginApi('ipushpull');
+        const ippApi = api.pluginsApi.getipushpullPluginApi();
         const allFolders = ippApi && ippApi.getIPushPullDomains();
         const folderName = data.IPushPullReport.Folder;
         const availablePages = ippApi && folderName && ippApi.getPagesForIPushPullDomain(folderName);

package/src/View/SmartEdit/SmartEditPopup.js

@@ -29,7 +29,7 @@ class SmartEditPopupComponent extends React.Component {
     render() {
         let col;
         if (this.props.PreviewInfo) {
-            col = this.props.api.columnApi.getColumnFromId(this.props.PreviewInfo.columnId);
+            col = this.props.PreviewInfo.column;
         }
         let globalValidationMessage = PreviewHelper_1.PreviewHelper.GetValidationMessage(this.props.PreviewInfo, `${this.props.SmartEditValue}`);
         let showPanel = this.props.PreviewInfo && StringExtensions_1.StringExtensions.IsNotNullOrEmpty(`${this.props.SmartEditValue}`);

package/src/View/StateManagement/StateManagementPopup.d.ts

@@ -1,16 +1,6 @@
 import * as React from 'react';
 import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
-interface StateManagementPopupProps extends ModuleViewPopupProps<StateManagementPopupComponent> {
+interface StateManagementPopupProps extends ModuleViewPopupProps<typeof StateManagementPopup> {
 }
-declare class StateManagementPopupComponent extends React.Component<StateManagementPopupProps, {}> {
-    constructor(props: StateManagementPopupProps);
-    render(): JSX.Element;
-    onClearLocalStorage(): void;
-    onLoadPredefinedConfig(e: any): void;
-    onExportAllState(type: any): void;
-    onExportUserState(type: any): void;
-    onExportPredefinedConfig(type: any): void;
-    onExportState(type: any, name: string, state: any): void;
-}
-export declare let StateManagementPopup: import("react-redux").ConnectedComponent<typeof StateManagementPopupComponent, any>;
+export declare const StateManagementPopup: React.FunctionComponent<StateManagementPopupProps>;
 export {};

package/src/View/StateManagement/StateManagementPopup.js

@@ -3,120 +3,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StateManagementPopup = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const react_redux_1 = require("react-redux");
 const PanelWithButton_1 = require("../Components/Panels/PanelWithButton");
-const UIHelper_1 = require("../UIHelper");
 const rebass_1 = require("rebass");
-const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
-const Dropdown_1 = tslib_1.__importDefault(require("../../components/Dropdown"));
-const Helper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/Helper"));
-const LoggingHelper_1 = require("../../Utilities/Helpers/LoggingHelper");
-const FileDroppable_1 = require("../../components/FileDroppable");
-class StateManagementPopupComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = UIHelper_1.UIHelper.getEmptyConfigState();
-    }
-    render() {
-        // sort out actions
-        let destinationOptions = [
-            {
-                value: 'Clipboard',
-                label: 'Clipboard',
-            },
-            {
-                value: 'Console',
-                label: 'Console',
-            },
-            {
-                value: 'JSON',
-                label: 'JSON',
-            },
-        ];
-        let clearButton = (React.createElement(SimpleButton_1.default, { onClick: () => this.onClearLocalStorage(), tooltip: "Clear User State", tone: "error", variant: "raised", marginTop: 2, accessLevel: this.props.accessLevel }, "Clear User State"));
-        let loadButton = (React.createElement(SimpleButton_1.default, { marginTop: 2, tone: "info", variant: "raised", accessLevel: this.props.accessLevel },
-            React.createElement("input", { type: "file", onChange: (json) => this.onLoadPredefinedConfig(json), accept: '.json', style: {
-                    opacity: 0,
-                    position: 'absolute',
-                    cursor: 'pointer',
-                    fontSize: 0,
-                    lineHeight: 0,
-                    top: 0,
-                    left: 0,
-                    width: '100%',
-                    height: '100%',
-                    zIndex: 1,
-                } }),
-            ' ',
-            "Load Predefined Config"));
-        return (React.createElement(rebass_1.Flex, { flex: 1, flexDirection: "column" },
-            React.createElement(PanelWithButton_1.PanelWithButton, { headerText: this.props.moduleInfo.FriendlyName, button: null, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
-                React.createElement(rebass_1.Box, null,
-                    React.createElement(HelpBlock_1.default, null, 'Clear all current user state that has been applied.   When you restart / refresh Adaptable any state that you have previously created will be lost.  However your Predefined Config will then be re-applied.'),
-                    clearButton,
-                    React.createElement(HelpBlock_1.default, { marginTop: 3 }, 'Load Predefined Config (from a .json file).  This will cause this window to close.'),
-                    ' ',
-                    loadButton,
-                    React.createElement(HelpBlock_1.default, { marginTop: 3, marginBottom: 2 }, 'Export All Adaptable State'),
-                    React.createElement(Dropdown_1.default, { key: 'exportAllState', placeholder: "Select Export Destination", style: { flex: 1, maxWidth: 'none' }, value: undefined, onChange: (x) => this.onExportAllState(x), marginRight: 3, options: destinationOptions }),
-                    React.createElement(HelpBlock_1.default, { marginTop: 3, marginBottom: 2 }, 'Export User State'),
-                    ' ',
-                    React.createElement(Dropdown_1.default, { key: 'exportUserState', placeholder: "Select Export Destination", style: { flex: 1, maxWidth: 'none' }, value: undefined, onChange: (x) => this.onExportUserState(x), marginRight: 3, options: destinationOptions }),
-                    React.createElement(HelpBlock_1.default, { marginTop: 3, marginBottom: 2 }, 'Export Initial Predefined Config'),
-                    ' ',
-                    React.createElement(Dropdown_1.default, { key: 'exportPredefinedConfig', placeholder: "Select Export Destination", style: { flex: 1, maxWidth: 'none' }, value: undefined, onChange: (x) => this.onExportPredefinedConfig(x), marginRight: 3, options: destinationOptions })))));
-    }
-    onClearLocalStorage() {
-        this.props.api.configApi.reloadPredefinedConfig();
-    }
-    onLoadPredefinedConfig(e) {
-        let nativeEvent = e.nativeEvent;
-        let files;
-        if (nativeEvent && nativeEvent.dataTransfer) {
-            files = nativeEvent.dataTransfer.files;
-        }
-        else {
-            files = e.target.files;
-        }
-        const file = files[0];
-        FileDroppable_1.readJSONFile(file).then((json) => {
-            this.props.api.configApi.reloadPredefinedConfig(json);
-        });
-    }
-    onExportAllState(type) {
-        let allState = this.props.api.configApi.getAllState();
-        this.onExportState(type, 'allState', allState);
-    }
-    onExportUserState(type) {
-        let userState = this.props.api.configApi.getAllUserState();
-        this.onExportState(type, 'userState', userState);
-    }
-    onExportPredefinedConfig(type) {
-        let predefinedConfig = this.props.api.configApi.getPredefinedConfig();
-        this.onExportState(type, 'predefinedConfig', predefinedConfig);
-    }
-    onExportState(type, name, state) {
-        switch (type) {
-            case 'Clipboard':
-                let stringifiedState = JSON.stringify(state);
-                Helper_1.default.copyToClipboard(stringifiedState);
-                break;
-            case 'Console':
-                LoggingHelper_1.ConsoleLog(state);
-                break;
-            case 'JSON':
-                const jsonFileName = name + '.json';
-                const jsonContent = JSON.stringify(state);
-                Helper_1.default.createDownloadedFile(jsonContent, jsonFileName, 'application/json');
-                break;
-        }
-    }
-}
-function mapStateToProps(state, ownProps) {
-    return {};
-}
-function mapDispatchToProps(dispatch) {
-    return {};
-}
-exports.StateManagementPopup = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(StateManagementPopupComponent);
+const LoadButton_1 = require("./components/LoadButton");
+const ClearButton_1 = require("./components/ClearButton");
+const ExportDropdown_1 = require("./components/ExportDropdown");
+exports.StateManagementPopup = (props) => {
+    return (React.createElement(rebass_1.Flex, { flex: 1, flexDirection: "column" },
+        React.createElement(PanelWithButton_1.PanelWithButton, { headerText: props.moduleInfo.FriendlyName, button: null, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed() },
+            React.createElement(rebass_1.Box, null,
+                React.createElement(HelpBlock_1.default, null, 'Clear all current user state that has been applied.   When you restart / refresh Adaptable any state that you have previously created will be lost.  However your Predefined Config will then be re-applied.'),
+                React.createElement(ClearButton_1.ClearButton, { tone: "error", variant: "raised", marginTop: 2, accessLevel: props.accessLevel, onClick: () => props.api.configApi.reloadPredefinedConfig() }, "Clear User State"),
+                React.createElement(HelpBlock_1.default, { marginTop: 3 }, '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(HelpBlock_1.default, { marginTop: 3, marginBottom: 2 }, 'Export All Adaptable State'),
+                React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "allState", marginRight: 3, style: { flex: 1, maxWidth: 'none' } }, "Select Export Destination"),
+                React.createElement(HelpBlock_1.default, { marginTop: 3, marginBottom: 2 }, 'Export User State'),
+                ' ',
+                React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "userState", marginRight: 3, style: { flex: 1, maxWidth: 'none' } }, "Select Export Destination"),
+                React.createElement(HelpBlock_1.default, { marginTop: 3, marginBottom: 2 }, 'Export Initial Predefined Config'),
+                ' ',
+                React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "predefinedConfig", marginRight: 3, style: { flex: 1, maxWidth: 'none' } }, "Select Export Destination")))));
+};

package/src/View/StateManagement/StateManagementViewPanel.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
+export interface ThemeViewPanelComponentProps extends ViewPanelProps {
+}
+export declare const StateManagementViewPanel: React.FunctionComponent<ThemeViewPanelComponentProps>;

package/src/View/StateManagement/StateManagementViewPanel.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StateManagementViewPanel = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
+const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants/GeneralConstants"));
+const LoadButton_1 = require("./components/LoadButton");
+const ClearButton_1 = require("./components/ClearButton");
+const rebass_1 = require("rebass");
+const ExportDropdown_1 = require("./components/ExportDropdown");
+exports.StateManagementViewPanel = (props) => {
+    const isToolbar = props.viewType === 'Toolbar';
+    const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
+    return (React.createElement(rebass_1.Flex, { flexDirection: isToolbar ? 'row' : 'column', className: join_1.default(props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__StateManagement__wrap`) },
+        React.createElement(rebass_1.Flex, { flexDirection: "row" },
+            React.createElement(LoadButton_1.LoadButton, { tooltip: "Load Predefined Config", variant: "text", icon: "upload", onLoad: (json) => props.api.configApi.reloadPredefinedConfig(json), accessLevel: props.accessLevel }, !isToolbar && 'Load'),
+            React.createElement(ClearButton_1.ClearButton, { icon: "trash", tooltip: "Clear User State", variant: "text", onClick: () => props.api.configApi.reloadPredefinedConfig(), accessLevel: props.accessLevel }, !isToolbar && 'Clear')),
+        React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "allState" }, "All State"),
+        React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "userState" }, "User State"),
+        React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "predefinedConfig" }, "Predefined Config")));
+};

package/src/View/StateManagement/components/ClearButton.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { SimpleButtonProps } from '../../../components/SimpleButton';
+interface ClearButtonProps extends SimpleButtonProps {
+}
+export declare const ClearButton: React.FunctionComponent<ClearButtonProps>;
+export {};

package/src/View/StateManagement/components/ClearButton.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClearButton = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+exports.ClearButton = (props) => {
+    return (React.createElement(SimpleButton_1.default, Object.assign({}, props, { className: "ab-StateManagement__Clear-Button", tooltip: "Clear User State" }), props.children));
+};

package/src/View/StateManagement/components/ExportDropdown.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { AdaptableApi } from '../../../../types';
+import { DropdownButtonProps } from '../../../components/DropdownButton';
+export interface ExportDropdownProps extends Omit<DropdownButtonProps, 'options' | 'value'> {
+    api: AdaptableApi;
+    type: 'allState' | 'userState' | 'predefinedConfig';
+}
+export declare const ExportDropdown: React.FunctionComponent<ExportDropdownProps>;

package/src/View/StateManagement/components/ExportDropdown.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExportDropdown = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
+const handleExportState_1 = require("../handleExportState");
+exports.ExportDropdown = (props) => {
+    const handleChange = (destination) => {
+        switch (props.type) {
+            case 'allState':
+                const allState = props.api.configApi.getAllState();
+                handleExportState_1.handleExportState(destination, 'allState', allState);
+                break;
+            case 'userState':
+                const userState = props.api.configApi.getAllUserState();
+                handleExportState_1.handleExportState(destination, 'userState', userState);
+                break;
+            case 'predefinedConfig':
+                const predefinedConfig = props.api.configApi.getPredefinedConfig();
+                handleExportState_1.handleExportState(destination, 'predefinedConfig', predefinedConfig);
+                break;
+        }
+    };
+    const destinationOptions = [
+        {
+            value: 'Clipboard',
+            label: 'Clipboard',
+            onClick: () => handleChange('Clipboard'),
+        },
+        {
+            value: 'Console',
+            label: 'Console',
+            onClick: () => handleChange('Console'),
+        },
+        {
+            value: 'JSON',
+            label: 'JSON',
+            onClick: () => handleChange('JSON'),
+        },
+    ];
+    return (React.createElement(DropdownButton_1.default, Object.assign({ className: "ab-StateManagement__Export-Dropdown" }, props, { items: destinationOptions, value: undefined })));
+};

package/src/View/StateManagement/components/LoadButton.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { SimpleButtonProps } from '../../../components/SimpleButton';
+interface LoadButtonProps extends SimpleButtonProps {
+    onLoad: (json: any) => void;
+}
+export declare const LoadButton: React.FunctionComponent<LoadButtonProps>;
+export {};

package/src/View/StateManagement/components/LoadButton.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadButton = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const FileDroppable_1 = require("../../../components/FileDroppable");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+exports.LoadButton = (props) => {
+    const onLoadPredefinedConfig = (e) => {
+        const nativeEvent = e.nativeEvent;
+        let files;
+        if (nativeEvent && nativeEvent.dataTransfer) {
+            files = nativeEvent.dataTransfer.files;
+        }
+        else {
+            files = e.target.files;
+        }
+        const file = files[0];
+        FileDroppable_1.readJSONFile(file).then((json) => {
+            props.onLoad(json);
+        });
+    };
+    return (React.createElement(SimpleButton_1.default, Object.assign({}, props, { className: "ab-StateManagement__Load-Button" }),
+        React.createElement("input", { type: "file", onChange: (json) => onLoadPredefinedConfig(json), accept: '.json', style: {
+                opacity: 0,
+                position: 'absolute',
+                cursor: 'pointer',
+                fontSize: 0,
+                lineHeight: 0,
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                zIndex: 1,
+            } }),
+        ' ',
+        props.children));
+};

package/src/View/StateManagement/handleExportState.d.ts

@@ -0,0 +1 @@
+export declare const handleExportState: (type: 'Clipboard' | 'Console' | 'JSON', name: string, state: any) => void;

package/src/View/StateManagement/handleExportState.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleExportState = void 0;
+const tslib_1 = require("tslib");
+const Helper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/Helper"));
+const LoggingHelper_1 = require("../../Utilities/Helpers/LoggingHelper");
+exports.handleExportState = (type, name, state) => {
+    switch (type) {
+        case 'Clipboard':
+            let stringifiedState = JSON.stringify(state);
+            Helper_1.default.copyToClipboard(stringifiedState);
+            break;
+        case 'Console':
+            LoggingHelper_1.ConsoleLog(state);
+            break;
+        case 'JSON':
+            const jsonFileName = name + '.json';
+            const jsonContent = JSON.stringify(state);
+            Helper_1.default.createDownloadedFile(jsonContent, jsonFileName, 'application/json');
+            break;
+    }
+};