@adaptabletools/adaptable-cjs 23.0.0-canary.3 → 23.0.0-canary.5

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

@@ -6,7 +6,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const Loader_1 = require("../../../components/Loader");
-const Tabs_1 = require("../../../components/Tabs");
 const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
 const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
 const ValueSelector_1 = require("../../Components/ValueSelector");
@@ -14,6 +13,8 @@ const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../.././Utilities/Extensions/ArrayExtensions"));
 const DateHelper_1 = require("../../../Utilities/Helpers/DateHelper");
 const Tag_1 = require("../../../components/Tag");
+const Flex_1 = require("../../../components/Flex");
+const Card_1 = require("../../../components/Card");
 const isValidCustomSortOrder = (data) => {
     if (!data.SortedValues || !data.SortedValues.length) {
         return 'At least one value is required for the Custom Sort order.';
@@ -33,7 +34,6 @@ const CustomSortValuesWizardSection = (props) => {
     (0, react_1.useEffect)(() => {
         let isMounted = true;
         (async () => {
-            // for sync and very fast resolving promises does not make sense to show a loader
             setDistinctValues([]);
             const newValues = (await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(api.gridApi.internalApi.getDistinctValuesForColumn(data.ColumnId), () => isMounted && setIsDistinctValuesLoading(true))) ?? [];
             if (!isMounted) {
@@ -76,11 +76,11 @@ const CustomSortValuesWizardSection = (props) => {
     }, [allowReorder, distinctValues, data.SortedValues]);
     const baseClassName = 'ab-CustomSortWizard__SortOrder';
     const className = (0, join_1.default)(baseClassName, isDistinctValuesLoading && `${baseClassName}--loading`);
-    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { style: { height: '100%' }, className: className, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Sort Order" }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Content, { children: [isDistinctValuesLoading && (0, jsx_runtime_1.jsx)(Loader_1.Loader, { children: "Loading" }), (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { toIdentifier: toIdentifier, toLabel: toLabel, options: options, value: data.SortedValues, allowReorder: allowReorder, onChange: (SortedValues) => {
-                            props.onChange({
-                                ...data,
-                                SortedValues,
-                            });
-                        } })] })] }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full twa:p-3", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: (0, join_1.default)('twa:flex-1 twa:min-h-0', className), children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Sort Order" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Specify the custom sort order \u2014 drag selected items to modify order" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0", children: [isDistinctValuesLoading && (0, jsx_runtime_1.jsx)(Loader_1.Loader, { children: "Loading" }), (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { toIdentifier: toIdentifier, toLabel: toLabel, options: options, value: data.SortedValues, allowReorder: allowReorder, onChange: (SortedValues) => {
+                                props.onChange({
+                                    ...data,
+                                    SortedValues,
+                                });
+                            } })] })] }) }));
 };
 exports.CustomSortValuesWizardSection = CustomSortValuesWizardSection;

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -198,7 +198,7 @@ const buildGridOptions = (mainAdaptableInstance, changeHistoryLog) => {
     const mainPrimaryKeyColumnHeader = mainAdaptableInstance.api.columnApi.getPrimaryKeyColumn()?.friendlyName ?? 'Row ID';
     const options = {
         loading: false,
-        overlayNoRowsTemplate: '<div style="font-size: var(--ab-font-size-2);color: var(--ab-color-text-on-primary);">No Data Changes</div>',
+        overlayNoRowsTemplate: '<div style="font-size: var(--ab-font-size-2);color: var(--ab-color-primary-foreground);">No Data Changes</div>',
         defaultColDef: {
             floatingFilter: true,
             filter: true,

package/src/View/DataImport/DataImportWizard/sections/ColumnsSection.js

@@ -9,12 +9,12 @@ const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
 const icons_1 = require("../../../../components/icons");
 const InfiniteTable_1 = require("../../../../components/InfiniteTable");
-const Tabs_1 = require("../../../../components/Tabs");
 const Tag_1 = require("../../../../components/Tag");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const AdaptablePopover_1 = require("../../../AdaptablePopover");
 const UIHelper_1 = tslib_1.__importDefault(require("../../../UIHelper"));
 const Flex_1 = require("../../../../components/Flex");
+const Card_1 = require("../../../../components/Card");
 const tableDOMProps = {
     style: {
         height: '100%',
@@ -66,7 +66,6 @@ const ColumnsSection = (props) => {
             abColumn: {
                 header: 'AdapTable Column',
                 render: (params) => {
-                    // filter out used columns
                     const availableColumns = allColumns
                         .filter((c) => !props.columnsMap?.find((cm) => cm.abColumn === c.value))
                         .map((col) => {
@@ -108,17 +107,17 @@ const ColumnsSection = (props) => {
         };
     }, [props.columnsMap]);
     if (!props.columnsMap) {
-        return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { className: "twa:text-error", children: ["No Data has been Imported. Go to ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Upload" }), " step and provide Data"] }) }));
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-3", children: (0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { className: "twa:text-error", children: ["No data has been imported. Go to the ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Upload" }), " step and provide data."] }) }));
     }
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mb-2 twa:h-full", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Columns" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.DataSource, { data: props.columnsMap, primaryKey: 'field', children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.InfiniteTableGrid, { columnPinning: {
-                                valid: 'end',
-                                type: 'end',
-                            }, columnTypes: {
-                                default: {
-                                    minWidth: 100,
-                                    defaultFlex: 1,
-                                },
-                            }, domProps: tableDOMProps, columns: columns }) }) })] }) }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium", children: "Columns" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Map imported fields to AdapTable columns and choose which to include" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:p-3", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:h-full twa:min-h-[300px]", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Column Mapping" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Match each data field to an AdapTable column. The primary key column cannot be excluded." })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0", children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.DataSource, { data: props.columnsMap, primaryKey: 'field', children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.InfiniteTableGrid, { columnPinning: {
+                                        valid: 'end',
+                                        type: 'end',
+                                    }, columnTypes: {
+                                        default: {
+                                            minWidth: 100,
+                                            defaultFlex: 1,
+                                        },
+                                    }, domProps: tableDOMProps, columns: columns }) }) })] }) })] }));
 };
 exports.ColumnsSection = ColumnsSection;
 exports.ColumnsSection.displayName = 'ColumnsSection';

package/src/View/DataImport/DataImportWizard/sections/UploadSection/UploadSection.js

@@ -1,14 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UploadSection = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const index_1 = tslib_1.__importDefault(require("../../../../../components/Radio/index"));
-const index_2 = require("../../../../../components/Tabs/index");
 const UploadFileSection_1 = require("./UploadFileSection");
 const UploadTextSection_1 = require("./UploadTextSection");
 const Flex_1 = require("../../../../../components/Flex");
+const Card_1 = require("../../../../../components/Card");
+const TypeRadio_1 = require("../../../../Wizard/TypeRadio");
 const UploadSection = (props) => {
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full", children: [(0, jsx_runtime_1.jsxs)(index_2.Tabs, { className: "twa:mb-2", children: [(0, jsx_runtime_1.jsx)(index_2.Tabs.Tab, { children: "Import Type" }), (0, jsx_runtime_1.jsx)(index_2.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(index_1.default, { onClick: () => props.onImportTypeChange('file'), checked: props.importType === 'file', children: "File" }), (0, jsx_runtime_1.jsx)(index_1.default, { onClick: () => props.onImportTypeChange('text'), checked: props.importType === 'text', children: "Text" })] }) })] }), (0, jsx_runtime_1.jsxs)(index_2.Tabs, { className: "twa:flex-1", children: [(0, jsx_runtime_1.jsx)(index_2.Tabs.Tab, { children: props.importType === 'file' ? 'File Upload' : 'Text' }), (0, jsx_runtime_1.jsx)(index_2.Tabs.Content, { children: props.importType === 'file' ? ((0, jsx_runtime_1.jsx)(UploadFileSection_1.ImportFileSection, { readFile: props.readFile, supportedFileFormats: props.supportedFileFormats, message: props.fileMessage })) : ((0, jsx_runtime_1.jsx)(UploadTextSection_1.ImportTextSection, { message: props.textMessage, text: props.text, onTextChange: props.onTextChange })) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full twa:gap-3 twa:p-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Import Type" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether to import from a file or pasted text" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "File", description: "Upload a file in a supported format", checked: props.importType === 'file', onClick: () => props.onImportTypeChange('file') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "Text", description: "Paste CSV, JSON, or other supported text directly", checked: props.importType === 'text', onClick: () => props.onImportTypeChange('text') })] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:flex-1 twa:min-h-0", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: props.importType === 'file' ? 'File Upload' : 'Paste Text' }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: props.importType === 'file'
+                                    ? 'Select or drag a file to load the data for import'
+                                    : 'Paste your data below — CSV or JSON is detected automatically' })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0", children: props.importType === 'file' ? ((0, jsx_runtime_1.jsx)(UploadFileSection_1.ImportFileSection, { readFile: props.readFile, supportedFileFormats: props.supportedFileFormats, message: props.fileMessage })) : ((0, jsx_runtime_1.jsx)(UploadTextSection_1.ImportTextSection, { message: props.textMessage, text: props.text, onTextChange: props.onTextChange })) })] })] }));
 };
 exports.UploadSection = UploadSection;

package/src/View/DataImport/DataImportWizard/sections/UploadSection/UploadTextSection.js

@@ -5,7 +5,8 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const index_1 = tslib_1.__importDefault(require("../../../../../components/HelpBlock/index"));
 const index_2 = tslib_1.__importDefault(require("../../../../../components/Textarea/index"));
+const Flex_1 = require("../../../../../components/Flex");
 const ImportTextSection = (props) => {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_2.default, { value: props.text, onChange: (event) => props.onTextChange(event.target.value), className: "twa:h-full" }), props.message && (0, jsx_runtime_1.jsx)(index_1.default, { children: props.message })] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full twa:min-h-[200px]", children: [(0, jsx_runtime_1.jsx)(index_2.default, { value: props.text, onChange: (event) => props.onTextChange(event.target.value), className: "twa:flex-1 twa:min-h-[200px]" }), props.message ? (0, jsx_runtime_1.jsx)(index_1.default, { className: "twa:mt-2", children: props.message }) : null] }));
 };
 exports.ImportTextSection = ImportTextSection;

package/src/View/DataImport/DataImportWizard/sections/ValidationSection.js

@@ -1,25 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ValidationSection = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const CheckBox_1 = require("../../../../components/CheckBox");
-const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
-const Tabs_1 = require("../../../../components/Tabs");
 const DataPreview_1 = require("./DataPreview");
 const Flex_1 = require("../../../../components/Flex");
-const getRowErrors = (errors, primaryKeyValue) => {
-    if (!errors) {
-        return null;
-    }
-    if (!errors[primaryKeyValue]) {
-        return null;
-    }
-    return errors[primaryKeyValue];
-};
+const Card_1 = require("../../../../components/Card");
 const ValidationSection = (props) => {
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full", children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mb-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Import Options" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Exclude Invalid Rows", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { onChange: () => {
-                                        props.onSkipInvalidRowsChange(!props.skipInvalidRows);
-                                    }, checked: props.skipInvalidRows }) }) }) })] }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:flex-1", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Preview" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(DataPreview_1.DataPreview, { columnsMap: props.columnsMap, data: props.data, errors: props.errors, editable: true, onDataChange: props.onDataChange }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full twa:gap-3 twa:p-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Import Options" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose how rows that fail validation should be handled" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { onChange: () => {
+                                props.onSkipInvalidRowsChange(!props.skipInvalidRows);
+                            }, checked: props.skipInvalidRows, children: "Exclude invalid rows from import" }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:flex-1 twa:min-h-0", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Preview" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Review imported data and fix any validation errors before importing" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0", children: (0, jsx_runtime_1.jsx)(DataPreview_1.DataPreview, { columnsMap: props.columnsMap, data: props.data, errors: props.errors, editable: true, onDataChange: props.onDataChange }) })] })] }));
 };
 exports.ValidationSection = ValidationSection;

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

@@ -1,13 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReportColumnsWizardSection = exports.renderReportColumnsSummary = exports.isValidReportColumnsScope = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
-const Tabs_1 = require("../../../components/Tabs");
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Flex_1 = require("../../../components/Flex");
+const Card_1 = require("../../../components/Card");
+const TypeRadio_1 = require("../../Wizard/TypeRadio");
 const isValidReportColumnsScope = (report) => {
     if (report.ReportColumnScope === 'ScopeColumns') {
         return report.Scope != null ? true : 'Column scope is not defined';
@@ -24,29 +23,27 @@ const renderReportColumnsSummary = (report) => {
 };
 exports.renderReportColumnsSummary = renderReportColumnsSummary;
 const ReportColumnsWizardSection = (props) => {
-    const { api, data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full", children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:m-2", value: data.ReportColumnScope, onValueChange: (ReportColumnScope) => {
-                    const report = {
-                        ...data,
-                        ReportColumnScope,
-                    };
-                    if (report.ReportColumnScope !== 'ScopeColumns') {
-                        delete report.Scope;
-                    }
-                    else {
-                        if (!report.Scope) {
-                            report.Scope = {
-                                ColumnIds: [],
-                            };
-                        }
-                    }
-                    props.onChange(report);
-                }, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "AllColumns", children: (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:m-0", checked: data.ReportColumnScope == 'AllColumns', tabIndex: -1, children: "All Columns" }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "VisibleColumns", children: (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:m-0", checked: data.ReportColumnScope == 'VisibleColumns', tabIndex: -1, children: "Visible Columns" }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "ScopeColumns", children: (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:m-0", checked: data.ReportColumnScope == 'ScopeColumns', tabIndex: -1, children: "Bespoke Columns" }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "AllColumns", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:text-2", children: "All Columns in the datasource will be included in the Report, whether visible or not at time of export" }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "VisibleColumns", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:text-2", children: "Only Columns that are visible at the time the Report is exported will be included" }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "BespokeColumns", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:text-2", children: "Only selected Columns (which you will choose in the next step) will be exported - whether visible or not" }) })] }), data.ReportColumnScope === 'ScopeColumns' ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:flex-1 twa:overflow-auto", children: (0, jsx_runtime_1.jsx)(NewScopeComponent_1.NewScopeComponent, { hideWholeRow: true, isColumnAvailable: (column) => Boolean(column.exportable), descriptions: {
-                        rowScope: 'Apply Scope for: Row, or one or more Columns, or one or more Data Types',
-                        columnScope: 'Selected columns will be included in the report',
-                    }, scope: data.Scope, updateScope: (Scope) => {
-                        const report = { ...data, Scope };
-                        props.onChange(report);
-                    } }) })) : null] }));
+    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const handleColumnScopeChange = (ReportColumnScope) => {
+        const report = {
+            ...data,
+            ReportColumnScope,
+        };
+        if (report.ReportColumnScope !== 'ScopeColumns') {
+            delete report.Scope;
+        }
+        else if (!report.Scope) {
+            report.Scope = {
+                ColumnIds: [],
+            };
+        }
+        props.onChange(report);
+    };
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3 twa:shrink-0", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Columns" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose which columns to include in the Report" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "All Columns", description: "All columns in the datasource will be included, whether visible or not at time of export", checked: data.ReportColumnScope === 'AllColumns', onClick: () => handleColumnScopeChange('AllColumns') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "Visible Columns", description: "Only columns that are visible at the time the Report is exported will be included", checked: data.ReportColumnScope === 'VisibleColumns', onClick: () => handleColumnScopeChange('VisibleColumns') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "Bespoke Columns", description: "Only selected columns will be exported \u2014 whether visible or not", checked: data.ReportColumnScope === 'ScopeColumns', onClick: () => handleColumnScopeChange('ScopeColumns') })] }) })] }) }), data.ReportColumnScope === 'ScopeColumns' ? ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium", children: "Column Selection" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Select the columns to include in the Report" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:p-2", children: (0, jsx_runtime_1.jsx)(NewScopeComponent_1.NewScopeComponent, { hideWholeRow: true, isColumnAvailable: (column) => Boolean(column.exportable), descriptions: {
+                                rowScope: 'Apply Scope for: Row, or one or more Columns, or one or more Data Types',
+                                columnScope: 'Selected columns will be included in the report',
+                            }, scope: data.Scope, updateScope: (Scope) => {
+                                props.onChange({ ...data, Scope });
+                            } }) })] })) : null] }));
 };
 exports.ReportColumnsWizardSection = ReportColumnsWizardSection;

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

@@ -3,12 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReportNameWizardSection = exports.isValidReportName = exports.renderReportNameSummary = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const Tag_1 = require("../../../components/Tag");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Flex_1 = require("../../../components/Flex");
+const Card_1 = require("../../../components/Card");
 const renderReportNameSummary = (report) => {
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2", children: [' ', "Report Name: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: report.Name })] }));
 };
@@ -27,14 +26,12 @@ const isValidReportName = (report, api) => {
 };
 exports.isValidReportName = isValidReportName;
 const ReportNameWizardSection = (props) => {
-    const { api, data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const validCheck = (0, exports.isValidReportName)(data, api);
-    const ErrorMessage = validCheck === true ? null : validCheck;
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { columns: [1, 2], children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-2", children: "Name:" }), (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "export-name", className: "twa:w-full", type: "text", autoFocus: true, placeholder: "Name", value: data.Name, onChange: (e) => {
-                                props.onChange({
-                                    ...data,
-                                    Name: e.target.value,
-                                });
-                            } })] }), (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), ErrorMessage ? (0, jsx_runtime_1.jsx)(ErrorBox_1.default, { children: ErrorMessage }) : null] })] }) }));
+    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Name" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Report" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "export-name", className: "twa:max-w-[300px] twa:w-full", type: "text", autoFocus: true, placeholder: "Enter Name", value: data.Name, onChange: (e) => {
+                            props.onChange({
+                                ...data,
+                                Name: e.target.value,
+                            });
+                        } }) })] }) }));
 };
 exports.ReportNameWizardSection = ReportNameWizardSection;

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

@@ -1,16 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReportRowsWizardSection = exports.renderReportRowsSummary = exports.isValidReportRowsQuery = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ExpressionEditor_1 = require("../../../components/ExpressionEditor");
 const ExpressionPreview_1 = require("../../../components/ExpressionEditor/ExpressionPreview");
-const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
-const Tabs_1 = require("../../../components/Tabs");
 const Tag_1 = require("../../../components/Tag");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Flex_1 = require("../../../components/Flex");
+const Card_1 = require("../../../components/Card");
+const TypeRadio_1 = require("../../Wizard/TypeRadio");
 const isValidReportRowsQuery = (report) => {
     if (report.ReportRowScope === 'ExpressionRows' && !report.Query?.BooleanExpression) {
         return 'Rows query cannot be empty';
@@ -19,36 +18,34 @@ const isValidReportRowsQuery = (report) => {
 };
 exports.isValidReportRowsQuery = isValidReportRowsQuery;
 const renderReportRowsSummary = (report) => {
-    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2", children: [report.ReportRowScope === 'AllRows' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Include ", (0, jsx_runtime_1.jsx)("b", { children: "all Rows" }), " in the Report"] })) : null, report.ReportRowScope === 'VisibleRows' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Include ", (0, jsx_runtime_1.jsx)("b", { children: "only visible Rows" }), " in the Report"] })) : null, report.ReportRowScope === 'ExpressionRows' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Include Rows matching the query:", ' ', (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, jsx_runtime_1.jsx)(ExpressionPreview_1.ExpressionPreview, { query: report.Query }) })] })) : null] }));
 };
 exports.renderReportRowsSummary = renderReportRowsSummary;
 const ReportRowsWizardSection = (props) => {
     const { api, data, moduleInfo } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const initialData = (0, react_1.useMemo)(() => api.internalApi.getQueryPreviewData(), []);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:m-2", value: data.ReportRowScope, onValueChange: (ReportRowScope) => {
-                const report = {
-                    ...data,
-                    ReportRowScope,
-                };
-                if (report.ReportRowScope !== 'ExpressionRows') {
-                    delete report.Query;
-                }
-                else {
-                    if (!report.Query) {
-                        report.Query = {
-                            BooleanExpression: '',
-                        };
-                    }
-                }
-                props.onChange(report);
-            }, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "AllRows", children: (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:m-0", checked: data.ReportRowScope == 'AllRows', tabIndex: -1, children: "All Rows" }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "VisibleRows", children: (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:m-0", checked: data.ReportRowScope == 'VisibleRows', tabIndex: -1, children: "Visible Rows" }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "ExpressionRows", children: (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:m-0", checked: data.ReportRowScope == 'ExpressionRows', tabIndex: -1, children: "By Query" }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "AllRows", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:text-2", children: "All Rows in the datasource will be included in the report, whether visible or not at time of export." }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "VisibleRows", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:text-2", children: "Only Rows that are visible at the time the Report is exported will be included in the Export" }) }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Content, { value: "ExpressionRows", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:pl-0 twa:text-2", children: "Only the Rows which match the Query will be exported - whether visible or not." }), (0, jsx_runtime_1.jsx)(ExpressionEditor_1.ExpressionEditor, { allowSaveNamedQuery: true, type: 'boolean', module: moduleInfo.ModuleName, style: { paddingLeft: 0 }, value: data.Query?.BooleanExpression ?? '', onChange: (BooleanExpression) => {
+    const handleRowScopeChange = (ReportRowScope) => {
+        const report = {
+            ...data,
+            ReportRowScope,
+        };
+        if (report.ReportRowScope !== 'ExpressionRows') {
+            delete report.Query;
+        }
+        else if (!report.Query) {
+            report.Query = {
+                BooleanExpression: '',
+            };
+        }
+        props.onChange(report);
+    };
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full twa:gap-3 twa:p-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Rows" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose which rows to include in the Report" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "All Rows", description: "All rows in the datasource will be included, whether visible or not at time of export", checked: data.ReportRowScope === 'AllRows', onClick: () => handleRowScopeChange('AllRows') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "Visible Rows", description: "Only rows that are visible at the time the Report is exported will be included", checked: data.ReportRowScope === 'VisibleRows', onClick: () => handleRowScopeChange('VisibleRows') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "By Query", description: "Only rows matching the query will be exported \u2014 whether visible or not", checked: data.ReportRowScope === 'ExpressionRows', onClick: () => handleRowScopeChange('ExpressionRows') })] }) })] }), data.ReportRowScope === 'ExpressionRows' ? ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:flex-1 twa:min-h-0", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Query" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Build a boolean expression to filter which rows are included" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0", children: (0, jsx_runtime_1.jsx)(ExpressionEditor_1.ExpressionEditor, { allowSaveNamedQuery: true, type: 'boolean', module: moduleInfo.ModuleName, className: "twa:pl-0", value: data.Query?.BooleanExpression ?? '', onChange: (BooleanExpression) => {
                                 props.onChange({
                                     ...data,
                                     Query: {
                                         BooleanExpression,
                                     },
                                 });
-                            }, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api })] })] }) }));
+                            }, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }) })] })) : null] }));
 };
 exports.ReportRowsWizardSection = ReportRowsWizardSection;

package/src/View/Export/Wizard/ScheduledReportSettings.d.ts

@@ -8,6 +8,8 @@ interface ScheduledReportSettingsProps {
     allDestinations: ExportDestinationType[];
     /** When set, the user picks which report this schedule exports (Export popup → New Schedule). */
     allReportNames?: ReportNameType[];
+    /** When set, the report is fixed (schedule created from a specific report). */
+    fixedReportName?: ReportNameType;
 }
 export declare const ScheduledReportSettings: React.FunctionComponent<ScheduledReportSettingsProps>;
 export {};

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

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScheduledReportSettings = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-const Tabs_1 = require("../../../components/Tabs");
 const Flex_1 = require("../../../components/Flex");
 const NewSelect_1 = require("../../../components/NewSelect");
+const Card_1 = require("../../../components/Card");
+const Tag_1 = require("../../../components/Tag");
 const ScheduledReportSettings = (props) => {
     const handleNameChange = (event) => {
         props.onChange({
@@ -27,15 +27,15 @@ const ScheduledReportSettings = (props) => {
         label: reportName,
         value: reportName,
     }));
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "scheduled-report-settings", children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { autoFocus: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Settings" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [props.allReportNames && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Report", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[300px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", "data-name": "select-report", items: reportOptions, value: props.reportSchedule?.ReportName || undefined, placeholder: "Select Report", onValueChange: (value) => props.onChange({
-                                            ...props.reportSchedule,
-                                            ReportName: value,
-                                        }) }) }) })), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Name", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "schedule-name", className: "twa:w-[300px]", onChange: handleNameChange, placeholder: "Enter Schedule Name", type: "string", value: props.reportSchedule?.Name ?? '' }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Format", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[300px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", "data-name": "select-format", items: formatOptions, value: props.reportSchedule?.ReportFormat, placeholder: "Select Format", onValueChange: (value) => props.onChange({
-                                            ...props.reportSchedule,
-                                            ReportFormat: value,
-                                        }) }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Destination", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[300px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", "data-name": "select-destination", items: destinationOptions, value: props.reportSchedule?.ExportDestination, placeholder: "Select Destination", onValueChange: (value) => props.onChange({
-                                            ...props.reportSchedule,
-                                            ExportDestination: value,
-                                        }) }) }) })] }) })] }) }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", "data-name": "scheduled-report-settings", children: [props.fixedReportName ? ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Report" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "The report that will be exported on this schedule" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: props.fixedReportName }) })] })) : null, props.allReportNames ? ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Report" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose which report to export on this schedule" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:max-w-[300px]", "data-name": "select-report", items: reportOptions, value: props.reportSchedule?.ReportName || undefined, placeholder: "Select Report", onValueChange: (value) => props.onChange({
+                                ...props.reportSchedule,
+                                ReportName: value,
+                            }) }) })] })) : null, (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Name" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for this scheduled export" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "schedule-name", className: "twa:max-w-[300px] twa:w-full", onChange: handleNameChange, placeholder: "Enter Schedule Name", type: "string", value: props.reportSchedule?.Name ?? '' }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Format" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose the export file format" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:max-w-[300px]", "data-name": "select-format", items: formatOptions, value: props.reportSchedule?.ReportFormat, placeholder: "Select Format", onValueChange: (value) => props.onChange({
+                                ...props.reportSchedule,
+                                ReportFormat: value,
+                            }) }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Destination" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose where the exported report is sent" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:max-w-[300px]", "data-name": "select-destination", items: destinationOptions, value: props.reportSchedule?.ExportDestination, placeholder: "Select Destination", onValueChange: (value) => props.onChange({
+                                ...props.reportSchedule,
+                                ExportDestination: value,
+                            }) }) })] })] }));
 };
 exports.ScheduledReportSettings = ScheduledReportSettings;

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

@@ -8,7 +8,6 @@ const react_redux_1 = require("react-redux");
 const ExportRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ExportRedux"));
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const Tag_1 = require("../../../components/Tag");
 const ScheduleScheduleWizard_1 = require("../../Schedule/Wizard/ScheduleScheduleWizard");
 const ScheduleScheduleSummary_1 = require("../../Schedule/Wizard/ScheduleScheduleSummary");
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
@@ -50,7 +49,7 @@ const ScheduledReportWizard = (props) => {
                 title: 'Settings',
                 isValid: (data, api) => (0, isReportScheduledSettingsValid_1.isReportScheduleSettingsValid)(data, api),
                 renderSummary: () => (0, jsx_runtime_1.jsx)(ScheduledReportSettingsSummary_1.ScheduledReportSettingsSummary, {}),
-                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-3", children: (0, jsx_runtime_1.jsx)(ScheduledReportSettingsSection, { onChange: setReportSchedule, reportName: reportName }) })),
+                render: () => ((0, jsx_runtime_1.jsx)(ScheduledReportSettingsSection, { onChange: setReportSchedule, reportName: reportName })),
             },
             {
                 title: 'Schedule',
@@ -81,5 +80,5 @@ const ScheduledReportSettingsSection = (props) => {
     const allReportNames = fixedReportName
         ? undefined
         : api.exportApi.internalApi.getAllAvailableReportNames();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [fixedReportName && ((0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_1.SummaryText, { children: ["Report: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: fixedReportName })] })), (0, jsx_runtime_1.jsx)(ScheduledReportSettings_1.ScheduledReportSettings, { reportSchedule: data, onChange: props.onChange, allFormats: allFormats ?? [], allDestinations: allDestinations ?? [], allReportNames: allReportNames })] }));
+    return ((0, jsx_runtime_1.jsx)(ScheduledReportSettings_1.ScheduledReportSettings, { reportSchedule: data, onChange: props.onChange, allFormats: allFormats ?? [], allDestinations: allDestinations ?? [], allReportNames: allReportNames, fixedReportName: fixedReportName }));
 };

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

@@ -5,6 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const CodeBlock_1 = require("../../../components/CodeBlock");
 const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
+const Flex_1 = require("../../../components/Flex");
+const Card_1 = require("../../../components/Card");
 const renderFlashingAlertRulesSummary = (flashingAlert) => {
     const { api: { flashingCellApi }, } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const FlashTarget = flashingAlert.FlashTarget ?? flashingCellApi.getFlashingCellFlashTarget(flashingAlert);
@@ -18,11 +20,11 @@ exports.renderFlashingAlertRulesSummary = renderFlashingAlertRulesSummary;
 const FlashingAlertRulesWizardSection = (props) => {
     const { data, api, moduleInfo } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const predicateDefs = api.flashingCellApi.getFlashingCellPredicateDefsForScope(data.Scope);
-    return ((0, jsx_runtime_1.jsx)(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: "AnyChange", data: data, predicateDefs: predicateDefs, getPredicateDefsForColId: (colId) => api.flashingCellApi.getFlashingCellPredicateDefsForScope({ ColumnIds: [colId] }), onChange: props.onChange, showAggregation: false, showObservable: false, showBoolean: true, showPredicate: true, descriptions: {
-            selectPredicate: 'Select an Flashing Cell Rule - to be applied when data changes',
-            useBooleanQuery: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Use an BooleanQuery if ", (0, jsx_runtime_1.jsx)("i", { children: "Scope" }), " is 'All Columns' - so any data change may be evaluated in a complex BooleanExpression"] })),
-            useObservableQuery: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Use an ObservableQuery if ", (0, jsx_runtime_1.jsx)("i", { children: "Scope" }), " is 'All Columns' - so any data change may be evaluated in a complex ObservableExpression"] })),
-            useAggregationQuery: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Use an AggregatedBooleanQuery if ", (0, jsx_runtime_1.jsx)("i", { children: "Scope" }), " is 'All Columns' - so any data change may be evaluated in a complex AggregatedBooleanExpression"] })),
-        } }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full twa:gap-3 twa:p-3", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:flex-1 twa:min-h-0", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Rule" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Build the rule that determines when cells should flash on a data change" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0", children: (0, jsx_runtime_1.jsx)(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: "AnyChange", data: data, predicateDefs: predicateDefs, getPredicateDefsForColId: (colId) => api.flashingCellApi.getFlashingCellPredicateDefsForScope({ ColumnIds: [colId] }), onChange: props.onChange, showAggregation: false, showObservable: false, showBoolean: true, showPredicate: true, descriptions: {
+                            selectPredicate: 'Select a Flashing Cell Rule - to be applied when data changes',
+                            useBooleanQuery: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Use an BooleanQuery if ", (0, jsx_runtime_1.jsx)("i", { children: "Scope" }), " is 'All Columns' - so any data change may be evaluated in a complex BooleanExpression"] })),
+                            useObservableQuery: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Use an ObservableQuery if ", (0, jsx_runtime_1.jsx)("i", { children: "Scope" }), " is 'All Columns' - so any data change may be evaluated in a complex ObservableExpression"] })),
+                            useAggregationQuery: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Use an AggregatedBooleanQuery if ", (0, jsx_runtime_1.jsx)("i", { children: "Scope" }), " is 'All Columns' - so any data change may be evaluated in a complex AggregatedBooleanExpression"] })),
+                        } }) })] }) }));
 };
 exports.FlashingAlertRulesWizardSection = FlashingAlertRulesWizardSection;

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

@@ -10,26 +10,27 @@ const Flex_1 = require("../../../components/Flex");
 const ColumnScope_1 = require("../../../AdaptableState/Common/ColumnScope");
 const FlashingAlertScopeWizardSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const availableColumns = React.useMemo(() => api.columnApi.getNonSpecialColumns(), []);
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(NewScopeComponent_1.NewScopeComponent, { descriptions: {
-                rowScope: 'Changes anywhere in the row will trigger an Flashing Cell',
-                columnScope: 'Changes in selected columns will trigger an Flashing Cell',
-            }, scopeColumns: availableColumns, scope: data.Scope, updateScope: (Scope) => {
-                const newData = { ...data, Scope };
-                if (newData.Rule.Predicates) {
-                    const validPredicateIds = new Set(api.flashingCellApi.getFlashingCellPredicateDefsForScope(Scope).map((def) => def.id));
-                    newData.Rule = {
-                        Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
-                            // if there are more than 1 column, then we must eliminate the IN/NotIn predicates
-                            // TODO: this should NOT be required, but the ColumnValueSelector does NOT support creatable values right now
-                            if ((0, ColumnScope_1.isScopeColumnIds)(Scope) && Scope.ColumnIds.length > 1) {
-                                return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
-                            }
-                            return true;
-                        }),
-                    };
-                }
-                props.onChange(newData);
-            } }) }));
+    const availableColumns = React.useMemo(() => api.columnApi
+        .getUIAvailableColumns()
+        .filter((column) => !column.isActionColumn && !api.columnApi.isFdc3Column(column.columnId)), [api]);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium", children: "Columns" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Specify which data changes should trigger cell flashing" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:p-2", children: (0, jsx_runtime_1.jsx)(NewScopeComponent_1.NewScopeComponent, { descriptions: {
+                        rowScope: 'Changes anywhere in the row will trigger a Flashing Cell',
+                        columnScope: 'Changes in selected columns will trigger a Flashing Cell',
+                        dataTypeScope: 'Changes in columns with these Data Types will trigger a Flashing Cell',
+                    }, scopeColumns: availableColumns, scope: data.Scope, updateScope: (Scope) => {
+                        const newData = { ...data, Scope };
+                        if (newData.Rule.Predicates) {
+                            const validPredicateIds = new Set(api.flashingCellApi.getFlashingCellPredicateDefsForScope(Scope).map((def) => def.id));
+                            newData.Rule = {
+                                Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
+                                    if ((0, ColumnScope_1.isScopeColumnIds)(Scope) && Scope.ColumnIds.length > 1) {
+                                        return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
+                                    }
+                                    return true;
+                                }),
+                            };
+                        }
+                        props.onChange(newData);
+                    } }) })] }));
 };
 exports.FlashingAlertScopeWizardSection = FlashingAlertScopeWizardSection;