@adaptabletools/adaptable 13.0.0-canary.17 → 13.0.0-canary.19

package/src/components/ExpressionEditor/BaseEditorInput.js

@@ -19,6 +19,7 @@ const DocumentationLinkConstants_1 = require("../../Utilities/Constants/Document
 const LoggingHelper_1 = require("../../Utilities/Helpers/LoggingHelper");
 const icons_1 = require("../icons");
 const AdaptableContext_1 = require("../../View/AdaptableContext");
+const join_1 = tslib_1.__importDefault(require("../utils/join"));
 const VarEditorButton = () => {
     var _a, _b;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -39,6 +40,7 @@ function BaseEditorInput(props) {
     let evaluationError;
     let expressionError;
     let selectedFunctionName;
+    const baseClassName = 'ab-ExpressionEditorInput';
     const buildParserExceptionMessage = (e) => {
         const parserExceptionSummary = 'Invalid expression is not parsable';
         if (!e.message) {
@@ -101,55 +103,34 @@ function BaseEditorInput(props) {
             props.onSelectedFunctionChange(selectedFunctionName ? expressionFunctions[selectedFunctionName] : null);
         }
     }, [selectedFunctionName]);
-    const functionsDropdown = (React.createElement(OverlayTrigger_1.default, { render: () => (React.createElement(rebass_1.Flex, { "data-name": "expression-dropdown-list", flexDirection: "column", p: 2, style: {
-                fontSize: 'var(--ab-font-size-2)',
-                border: '1px solid var(--ab-color-primarydark)',
-                borderRadius: 'var(--ab__border-radius)',
-                background: 'var(--ab-color-primarylight)',
-                zIndex: 1000,
-                maxHeight: 300,
-                overflow: 'auto',
-            } }, Object.keys(expressionFunctions)
+    const functionsDropdown = (React.createElement(OverlayTrigger_1.default, { render: () => (React.createElement(rebass_1.Flex, { className: `${baseClassName}__dropdown-functions-list`, "data-name": "expression-dropdown-fuctions-list", flexDirection: "column", p: 2 }, Object.keys(expressionFunctions)
             .filter((functionName) => !expressionFunctions[functionName].isHiddenFromMenu)
             .map((functionName) => functionName === 'VAR' ? (React.createElement(VarEditorButton, { key: functionName })) : (React.createElement(EditorButton_1.default, { data: `${functionName}()`, key: functionName, mr: 1 }, functionName))))), showEvent: "focus", hideEvent: "blur" },
         React.createElement(SimpleButton_1.default, { "data-name": "expression-dropdown", icon: "arrow-down", iconPosition: 'end', mr: 1 },
-            React.createElement(rebass_1.Flex, { marginRight: 1, style: { fontSize: 'var(--ab-font-size-2)' } },
-                React.createElement(icons_1.Icon, { name: 'equation', style: { marginTop: 0 } })))));
+            React.createElement(rebass_1.Flex, { marginRight: 1, fontSize: 2 },
+                React.createElement(icons_1.Icon, { name: "equation" })))));
     const operatorButtons = props.editorButtons
         .filter((editorButtonDef) => !!expressionFunctions[editorButtonDef.functionName])
         .map((editorButtonDef) => (React.createElement(EditorButton_1.default, { key: `${editorButtonDef.functionName}-operator`, data: editorButtonDef.data, icon: editorButtonDef.icon }, !editorButtonDef.icon && (editorButtonDef.text || editorButtonDef.functionName))));
     const showDocumentationLink = props.api.internalApi.isDocumentationLinksDisplayed();
     return (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Flex, { "data-name": "expression-toolbar", py: 2, mb: 2, flexWrap: "wrap", style: {
-                background: 'var(--ab-color-primarylight)',
-                borderRadius: 'var(--ab__border-radius)',
-                '--ab-overlay-horizontal-align': 'left',
-                width: '100%',
-                marginTop: 5,
-            } },
+        React.createElement(rebass_1.Flex, { className: baseClassName, "data-name": "expression-toolbar", py: 2, mb: 2, mt: 2, flexWrap: "wrap" },
             React.createElement(rebass_1.Flex, { style: { flex: 1, marginLeft: 5 }, flexWrap: "wrap" },
                 functionsDropdown,
                 operatorButtons),
             showDocumentationLink && (React.createElement(rebass_1.Flex, { alignItems: "flex-start" },
-                React.createElement(ButtonInfo_1.ButtonInfo, { style: {
-                        color: 'var(--ab-color-text-on-add)',
-                        fill: 'var(--ab-color-text-on-add)',
-                        background: 'var(--ab-color-action-add)',
-                        marginRight: 5,
-                    }, tooltip: 'Learn how to use the Expression Editor', onClick: () => window.open(DocumentationLinkConstants_1.ExpressionEditorDocsLink, '_blank') })))),
-        React.createElement(Textarea_1.default, { "data-name": `expression-input-${type}`, ref: textAreaRefCallback, value: props.value || '', placeholder: props.placeholder || 'Create Query', disabled: props.disabled || false, className: "ab-ExpressionEditor__textarea", autoFocus: true, spellCheck: "false", onChange: (event) => {
+                React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, tooltip: 'Learn how to use the Expression Editor', onClick: () => window.open(DocumentationLinkConstants_1.ExpressionEditorDocsLink, '_blank') })))),
+        React.createElement(Textarea_1.default, { "data-name": `expression-input-${type}`, ref: textAreaRefCallback, value: props.value || '', placeholder: props.placeholder || 'Create Query', disabled: props.disabled || false, className: (0, join_1.default)('ab-ExpressionEditor__textarea', // left for backwards compatibility
+            `${baseClassName}__textarea`), autoFocus: true, spellCheck: "false", onChange: (event) => {
                 props.onChange(event.target.value);
-            }, style: Object.assign({ width: '100%', minHeight: 100, fontFamily: 'monospace', resize: 'vertical', fontSize: '1rem', padding: 'var(--ab-space-2)' }, style) }),
-        props.isFullExpression !== true && (React.createElement(HelpBlock_1.default, { mt: 2, mb: 2, p: 2, style: { fontSize: 'var(--ab-font-size-3)' } },
+            }, style: style }),
+        props.isFullExpression !== true && (React.createElement(HelpBlock_1.default, { mt: 2, mb: 2, p: 2, fontSize: 3 },
             "This Query must resolve to a ",
             React.createElement("b", null, "boolean "),
             "(i.e. true / false) value")),
-        expressionError && (React.createElement(ErrorBox_1.default, { style: { whiteSpace: 'pre-wrap' }, mt: 2 }, expressionError)),
+        expressionError && (React.createElement(ErrorBox_1.default, { width: "100%", style: { whiteSpace: 'pre-wrap' }, mt: 2 }, expressionError)),
         evaluationError && (React.createElement(ErrorBox_1.default, { style: { whiteSpace: 'pre-wrap' }, mt: 2 }, `${evaluationError.expressionFnName} ${evaluationError.message}`)),
-        !props.hideResultPreview && result !== undefined && (React.createElement(rebass_1.Box, { "data-name": "expression-editor-feedback", mt: 2, p: 2, style: {
-                background: 'var(--ab-color-primarylight)',
-                borderRadius: 'var(--ab__border-radius)',
-            } },
+        !props.hideResultPreview && result !== undefined && (React.createElement(rebass_1.Box, { className: `${baseClassName}__editor-feedback`, "data-name": "expression-editor-feedback", mt: 2, p: 2 },
             React.createElement("pre", { style: { whiteSpace: 'pre-wrap', margin: 0 } },
                 "Result (using Test Data): ",
                 React.createElement("b", null, JSON.stringify(result)))))));

package/src/components/ExpressionEditor/index.js

@@ -31,6 +31,7 @@ function ExpressionEditor(props) {
     const [data, setData] = (0, react_1.useState)(props.initialData);
     const [showColumnIds, setShowColumnIds] = (0, react_1.useState)(false);
     const [showNamedQueries, setShowNamedQueries] = (0, react_1.useState)(false);
+    const baseClassName = `ab-ExpressionEditor`;
     const [selectedFunction, setSelectedFunction] = (0, react_1.useState)(null);
     const [expressionText, setExpressionText] = (0, react_1.useState)('');
     const { namedQuery, setNamedQuery } = (0, NamedQueryContext_1.useNamedQueryContext)();
@@ -102,7 +103,7 @@ function ExpressionEditor(props) {
     };
     const [searchInputValue, setSearchInputValue] = React.useState('');
     const dataTableEditor = (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start", style: { marginTop: 2 } },
+        React.createElement(rebass_1.Flex, { className: `${baseClassName}__columns-list`, flexDirection: "column", alignItems: "start", style: { marginTop: 2 } },
             React.createElement(CheckBox_1.CheckBox, { checked: showColumnIds, onChange: (checked) => setShowColumnIds(checked), style: {
                     float: 'right',
                     margin: 0,
@@ -157,28 +158,24 @@ function ExpressionEditor(props) {
             setSelectedFunction,
             textAreaRef,
         } },
-        React.createElement("div", { "data-name": "expression-editor", style: Object.assign({ flex: 1, overflow: 'auto', display: 'flex', paddingLeft: 'var(--ab-space-2)' }, props.style) },
+        React.createElement(rebass_1.Flex, { className: baseClassName, flex: 1, "data-name": "expression-editor-wrapper", pl: 2, style: props.style },
             React.createElement(rebass_1.Flex, { flex: 1, style: { minHeight: 0 }, flexDirection: "column", onFocus: (event) => {
                     if (event.target.tagName === 'TEXTAREA') {
                         textAreaRef.current = event.target;
                     }
                 } },
-                React.createElement(rebass_1.Flex, { flex: 1, flexDirection: "row", "data-name": "expression-editor", style: { fontSize: 'var(--ab-font-size-2)', minHeight: 0, flex: 1 } },
+                React.createElement(rebass_1.Flex, { flex: 1, flexDirection: "row", "data-name": "expression-editor", fontSize: 2, style: { minHeight: 0 } },
                     React.createElement(rebass_1.Flex, { flex: 1, paddingRight: 2, style: { overflow: 'auto' }, "data-name": "expression-builder", flexDirection: "column" },
                         editorInput,
                         StringExtensions_1.default.IsNotNullOrEmpty(expressionText === null || expressionText === void 0 ? void 0 : expressionText.trim()) && (React.createElement(ExpressionFunctionDocumentation_1.ExpressionFunctionDocumentation, { expressionFunction: selectedFunction })),
                         /* displayed for advanced queries (observable&Aggregation) to give the users a starting point */
                         StringExtensions_1.default.IsNullOrEmpty(expressionText === null || expressionText === void 0 ? void 0 : expressionText.trim()) && renderQueryHints(type),
-                        showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", mt: 2, mb: 2, style: { fontSize: 'var(--ab-font-size-3)' } },
-                            React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, style: {
-                                    color: 'var(--ab-color-text-on-add)',
-                                    fill: 'var(--ab-color-text-on-add)',
-                                    background: 'var(--ab-color-action-add)',
-                                }, onClick: () => window.open(queryDocumentationLink, '_blank') }),
+                        showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", mt: 2, mb: 2, fontSize: 3 },
+                            React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, onClick: () => window.open(queryDocumentationLink, '_blank') }),
                             "See ",
                             StringExtensions_1.default.CapitaliseFirstLetter(type),
                             " Query documentation for more details and examples")),
-                        React.createElement("div", { style: { flex: 1 } }),
+                        React.createElement(rebass_1.Box, { flex: 1 }),
                         allowSaveNamedQuery &&
                             props.api.internalApi
                                 .getModuleService()
@@ -202,13 +199,8 @@ function ExpressionEditor(props) {
                                         BooleanExpression: expressionText,
                                     });
                                 } })) : null))),
-                    React.createElement(rebass_1.Box, { "data-name": "expression-column-picker", pb: 2, paddingLeft: 2, style: {
-                            overflow: 'auto',
-                            minWidth: 220,
-                            height: '100%',
-                            paddingRight: 'var(--ab-space-2)',
-                        } },
-                        ArrayExtensions_1.default.IsNotNullOrEmpty(props.namedQueries) && (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "start", style: { padding: 3, marginTop: 5 }, backgroundColor: "primarylight" },
+                    React.createElement(rebass_1.Box, { className: `${baseClassName}__column-picker`, "data-name": "expression-column-picker", pb: 2, paddingLeft: 2, pr: 2 },
+                        ArrayExtensions_1.default.IsNotNullOrEmpty(props.namedQueries) && (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "start", p: 1, mt: 2, backgroundColor: "primarylight" },
                             React.createElement(Radio_1.default, { checked: !showNamedQueries, onChange: (checked) => setShowNamedQueries(!checked), style: { marginRight: 10 } }, "Columns"),
                             React.createElement(Radio_1.default, { checked: showNamedQueries, onChange: (checked) => setShowNamedQueries(checked), style: { marginLeft: 10, whiteSpace: 'nowrap' } }, "Named Queries"))),
                         showNamedQueries ? React.createElement("div", null, namedQueries) : React.createElement("div", null, dataTableEditor)))))));

package/src/components/FormLayout/index.js

@@ -73,7 +73,7 @@ const FormRow = (props) => {
         }
         if (props.as != null || column.component != null) {
             const Cmp = column.component;
-            value = (React.createElement(Cmp, { style: Object.assign(Object.assign({}, column.style), { gridColumn: columnIndex + 1, gridRow: rowIndex + 1 }), className: column.className }, value));
+            value = (React.createElement(Cmp, { "data-name": props.dataName, style: Object.assign(Object.assign({}, column.style), { gridColumn: columnIndex + 1, gridRow: rowIndex + 1 }), className: column.className }, value));
         }
         return typeof value === 'string' ? value : React.cloneElement(value, { key: columnName });
     });

package/src/components/StylePreview.js

@@ -5,8 +5,9 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
 const StyleHelper_1 = require("../Utilities/Helpers/StyleHelper");
+const join_1 = tslib_1.__importDefault(require("./utils/join"));
 const StylePreview = (props) => {
     var _a, _b, _c;
-    return (React.createElement(rebass_1.Box, Object.assign({}, props, { padding: (_a = props.padding) !== null && _a !== void 0 ? _a : 2, mt: (_b = props.mt) !== null && _b !== void 0 ? _b : 2, style: Object.assign(Object.assign({}, (0, StyleHelper_1.toStyle)(props.styleObject)), props.style) }), (_c = props.children) !== null && _c !== void 0 ? _c : 'Preview result'));
+    return (React.createElement(rebass_1.Box, Object.assign({}, props, { className: (0, join_1.default)('ab-StylePreview', props.className), padding: (_a = props.padding) !== null && _a !== void 0 ? _a : 2, mt: (_b = props.mt) !== null && _b !== void 0 ? _b : 2, style: Object.assign(Object.assign({}, (0, StyleHelper_1.toStyle)(props.styleObject)), props.style) }), (_c = props.children) !== null && _c !== void 0 ? _c : 'Preview result'));
 };
 exports.StylePreview = StylePreview;

package/src/metamodel/adaptable.metamodel.d.ts

@@ -1931,17 +1931,6 @@ export declare const ADAPTABLE_METAMODEL: {
         kind: string;
         description: string;
     };
-    CustomReport: {
-        name: string;
-        kind: string;
-        description: string;
-        properties: {
-            name: string;
-            kind: string;
-            description: string;
-            uiLabel: string;
-        }[];
-    };
     CustomSettingsPanel: {
         name: string;
         kind: string;
@@ -3050,6 +3039,11 @@ export declare const ADAPTABLE_METAMODEL: {
             uiLabel: string;
         }[];
     };
+    FormatColumnRule: {
+        name: string;
+        kind: string;
+        description: string;
+    };
     FormatColumnState: {
         name: string;
         kind: string;
@@ -4511,6 +4505,17 @@ export declare const ADAPTABLE_METAMODEL: {
             reference: string;
         }[];
     };
+    ServerReport: {
+        name: string;
+        kind: string;
+        description: string;
+        properties: {
+            name: string;
+            kind: string;
+            description: string;
+            uiLabel: string;
+        }[];
+    };
     SettingsPanelApi: {
         name: string;
         kind: string;