@reltio/components 1.4.2302-hotfix.0 → 1.4.2312

package/features/crosswalks/CrosswalkDateEditor/CrosswalkDateEditor.test.js

@@ -107,15 +107,14 @@ describe('CrosswalkDateEditor tests', function () {
             switch (_a.label) {
                 case 0:
                     user = setUp().user;
-                    newDate = '10/10/2021';
-                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), '01/01/2020')];
+                    newDate = '10/10/2021 01:01:00 AM';
+                    return [4 /*yield*/, user.clear(screen.getByRole('textbox'))];
                 case 1:
                     _a.sent();
-                    expect(screen.getByDisplayValue('01/01/2020 12:00:00 AM')).toBeInTheDocument();
-                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), newDate)];
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), newDate, { skipClick: true })];
                 case 2:
                     _a.sent();
-                    expect(screen.getByDisplayValue('10/10/2021 12:00:00 AM')).toBeInTheDocument();
+                    expect(screen.getByDisplayValue(newDate)).toBeInTheDocument();
                     expect(defaultProps.onChange).not.toHaveBeenCalled();
                     return [4 /*yield*/, user.tab()];
                 case 3:

package/features/history/HistoryRow/styles.d.ts

@@ -1,5 +1,5 @@
 type Type = {
     color?: string;
 };
-export declare const useStyles: (props: Type) => import("@mui/styles").ClassNameMap<"title" | "date" | "selected" | "user" | "historyRow" | "rowHeader" | "badge">;
+export declare const useStyles: (props: Type) => import("@mui/styles").ClassNameMap<"title" | "date" | "selected" | "user" | "badge" | "historyRow" | "rowHeader">;
 export {};

package/features/history/ProfileBandHistory/ProfileBandHistory.js

@@ -1,17 +1,15 @@
 import React from 'react';
 import i18n from 'ui-i18n';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
+import { Button, Text } from '@reltio/design/components';
 import { useMdmAction, useMdmHistoryEvent } from '../../../contexts/MdmModuleContext';
-import { useStyles } from './styles';
+import styles from './ProfileBandHistory.module.css';
 export var ProfileBandHistory = function () {
-    var styles = useStyles();
     var clearHistoryEvent = useMdmAction('clearHistoryEvent');
     var historyEvent = useMdmHistoryEvent();
     return historyEvent ? (React.createElement("div", { className: styles.root },
-        React.createElement(Typography, { component: 'div' },
+        React.createElement(Text, { className: styles.message },
             i18n.text('You are viewing a historic slice:'),
             ' ',
             React.createElement("span", { className: styles.slice }, i18n.date(historyEvent.aStamp, 'llll'))),
-        React.createElement(Button, { className: styles.cancelButton, variant: "contained", color: "primary", onClick: clearHistoryEvent }, i18n.text('Cancel')))) : null;
+        React.createElement(Button, { className: styles.cancelButton, design: "Emphasized", onClick: clearHistoryEvent }, i18n.text('Cancel')))) : null;
 };

package/features/history/ProfileBandHistory/ProfileBandHistory.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"root":"ProfileBandHistory-root--YvxgP","message":"ProfileBandHistory-message--pXCjS","slice":"ProfileBandHistory-slice--o9Udc","cancelButton":"ProfileBandHistory-cancelButton--mPVRW"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.ProfileBandHistory-root--YvxgP{align-items:flex-start;display:flex}.ProfileBandHistory-message--pXCjS{font-size:var(--sapFontLargeSize)}.ProfileBandHistory-slice--o9Udc{font-weight:600}.ProfileBandHistory-cancelButton--mPVRW{flex-shrink:0;margin-left:15px}`;
+    head.appendChild(style);
+}
+export default styles;

package/features/history/ProfileBandHistory/index.d.ts

@@ -1 +1,2 @@
-export { ProfileBandHistory } from './ProfileBandHistory';
+import React from 'react';
+export declare const ProfileBandHistory: () => React.JSX.Element;

package/features/history/ProfileBandHistory/index.js

@@ -1 +1,8 @@
-export { ProfileBandHistory } from './ProfileBandHistory';
+import React from 'react';
+import { useDesignMigration } from '../../../contexts/DesignMigrationContext';
+import { ProfileBandHistory as ProfileBandHistoryLegacy } from './legacy/ProfileBandHistory';
+import { ProfileBandHistory as ProfileBandHistoryMigrated } from './ProfileBandHistory';
+export var ProfileBandHistory = function () {
+    var designMigrationEnabled = useDesignMigration();
+    return designMigrationEnabled ? React.createElement(ProfileBandHistoryMigrated, null) : React.createElement(ProfileBandHistoryLegacy, null);
+};

package/features/history/ProfileBandHistory/legacy/ProfileBandHistory.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ProfileBandHistory: () => React.JSX.Element;

package/features/history/ProfileBandHistory/legacy/ProfileBandHistory.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import { useMdmAction, useMdmHistoryEvent } from '../../../../contexts/MdmModuleContext';
+import { useStyles } from './styles';
+export var ProfileBandHistory = function () {
+    var styles = useStyles();
+    var clearHistoryEvent = useMdmAction('clearHistoryEvent');
+    var historyEvent = useMdmHistoryEvent();
+    return historyEvent ? (React.createElement("div", { className: styles.root },
+        React.createElement(Typography, { component: 'div' },
+            i18n.text('You are viewing a historic slice:'),
+            ' ',
+            React.createElement("span", { className: styles.slice }, i18n.date(historyEvent.aStamp, 'llll'))),
+        React.createElement(Button, { className: styles.cancelButton, variant: "contained", color: "primary", onClick: clearHistoryEvent }, i18n.text('Cancel')))) : null;
+};

package/features/history/ProfileBandHistory/{ProfileBandHistory.test.js → legacy/ProfileBandHistory.test.js}

@@ -49,7 +49,7 @@ import React from 'react';
 import i18n from 'ui-i18n';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { MdmModuleProvider } from '../../../contexts/MdmModuleContext';
+import { MdmModuleProvider } from '../../../../contexts/MdmModuleContext';
 import { ProfileBandHistory } from './ProfileBandHistory';
 var defaultHistoryEvent = { aStamp: 123 };
 var clearHistoryEvent = jest.fn();

package/features/workflow/AddWorkflowButton/AddWorkflowButton.js

@@ -1,12 +1,11 @@
 import React, { useState } from 'react';
 import i18n from 'ui-i18n';
-import Button from '@mui/material/Button';
-import AddIcon from '@mui/icons-material/Add';
+import { Button } from '@reltio/design/components';
+import addIcon from '@reltio/design/icons/sap/add';
 import { useWorkflowCheckPermission } from '../hooks/useWorkflowCheckPermission';
 import { AddWorkflowDialog } from '../AddWorkflowDialog';
-import { useStyles } from './styles';
+import styles from './AddWorkflowButton.module.css';
 export var AddWorkflowButton = function () {
-    var styles = useStyles();
     var _a = useState(null), anchorEl = _a[0], setAnchorEl = _a[1];
     var checkWorkflowPermission = useWorkflowCheckPermission();
     var canStartProcess = checkWorkflowPermission('START_PROCESS_INSTANCE');
@@ -14,8 +13,6 @@ export var AddWorkflowButton = function () {
     var handleOpen = function (e) { return setAnchorEl(e.currentTarget); };
     var handleClose = function () { return setAnchorEl(null); };
     return canStartProcess && canViewProcessDefinitions ? (React.createElement(React.Fragment, null,
-        React.createElement(Button, { color: "primary", className: styles.button, onClick: handleOpen },
-            React.createElement(AddIcon, { className: styles.icon }),
-            React.createElement("div", { className: styles.buttonLabel }, i18n.text('Add'))),
+        React.createElement(Button, { design: "Transparent", className: styles.button, icon: addIcon, onClick: handleOpen }, i18n.text('Add')),
         React.createElement(AddWorkflowDialog, { anchorEl: anchorEl, onClose: handleClose }))) : null;
 };

package/features/workflow/AddWorkflowButton/AddWorkflowButton.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"button":"AddWorkflowButton-button--5MCcn"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.AddWorkflowButton-button--5MCcn{margin-left:auto;margin-right:8px}`;
+    head.appendChild(style);
+}
+export default styles;

package/helpers/errors.js

@@ -1,7 +1,10 @@
 import i18n from 'ui-i18n';
-import { getRequestErrorMessage } from '@reltio/mdm-sdk';
+import { getRequestErrorMessage, isAbortError } from '@reltio/mdm-sdk';
 import { ErrorPopup } from '../ErrorPopup';
 export var showErrorMessage = function (error, params) {
+    if (isAbortError(error)) {
+        return;
+    }
     var _a = params || {}, _b = _a.title, title = _b === void 0 ? i18n.text('Error') : _b, message = _a.message, defaultMessage = _a.defaultMessage;
     console.warn(error);
     ErrorPopup.addError({

package/helpers/errors.test.js

@@ -47,6 +47,10 @@ describe('showErrorMessage tests', function () {
             message: 'Error message'
         });
     });
+    it('should not show ErrorPopup for abort errors', function () {
+        showErrorMessage(Object.assign(new Error('The user aborted a request.'), { name: 'AbortError' }));
+        expect(ErrorPopup.addError).not.toHaveBeenCalled();
+    });
     describe('showDefaultErrorMessage tests', function () {
         it('should show default message if errorMessage is not provided', function () {
             showDefaultErrorMessage({

package/hooks/useReadableSearchState/useReadableSearchState.js

@@ -22,6 +22,12 @@ export var useReadableSearchState = function (searchState) {
             }), resolveLookupsList, andThen(lookupsListResolved))(unresolvedLookups);
         }
     }, [searchState]); // eslint-disable-line
+    if (!metadata) {
+        return {
+            readableQuery: [],
+            readableQueryString: ''
+        };
+    }
     return {
         readableQuery: buildReadableQuery(metadata, attributesPresentation, lookups, groups, keyword, map, formatOptions),
         readableQueryString: buildReadableQueryToString(metadata, attributesPresentation, lookups, groups, keyword, map, formatOptions)

package/hooks/useReadableSearchState/useReadableSearchState.test.js

@@ -60,10 +60,11 @@ var attributesPresentation = {
 };
 var lookups = {};
 var lookupsListResolved = jest.fn();
-var setUp = function (searchState) {
+var setUp = function (searchState, values) {
+    if (values === void 0) { values = { metadata: metadata, dataTenants: dataTenants, attributesPresentation: attributesPresentation, lookups: lookups }; }
     var Providers = function (_a) {
         var children = _a.children;
-        return (React.createElement(MdmModuleProvider, { values: { metadata: metadata, dataTenants: dataTenants, attributesPresentation: attributesPresentation, lookups: lookups }, actions: { lookupsListResolved: lookupsListResolved } }, children));
+        return (React.createElement(MdmModuleProvider, { values: values, actions: { lookupsListResolved: lookupsListResolved } }, children));
     };
     return renderHook(useReadableSearchState, { wrapper: Providers, initialProps: searchState });
 };
@@ -141,4 +142,31 @@ describe('useReadableSearchState tests', function () {
             }
         });
     }); });
+    it('should not build readable query if metadata is not loaded', function () {
+        var searchState = {
+            version: '2.0',
+            advanced: [
+                {
+                    attributes: [
+                        {
+                            data: { fieldName: 'sourceSystems' },
+                            operator: 'and',
+                            filter: 'equals',
+                            values: [['SupplierIntelligenceTesting']]
+                        }
+                    ],
+                    operator: 'or'
+                }
+            ]
+        };
+        getGroupsFromSearchState.mockReturnValueOnce([]);
+        getUnresolvedLookupsListFromSearchGroups.mockReturnValueOnce([]);
+        var result = setUp(searchState, { dataTenants: dataTenants, attributesPresentation: attributesPresentation, lookups: lookups }).result;
+        expect(buildReadableQuery).not.toHaveBeenCalled();
+        expect(buildReadableQueryToString).not.toHaveBeenCalled();
+        expect(result.current).toEqual({
+            readableQuery: [],
+            readableQueryString: ''
+        });
+    });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.2302-hotfix.0",
+  "version": "1.4.2312",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -11,7 +11,7 @@
     "@fluentui/react-context-selector": "^9.1.26",
     "@googlemaps/markerclusterer": "^2.5.3",
     "@react-sigma/core": "3.4.0",
-    "@reltio/mdm-sdk": "^1.4.2069-hotfix.0",
+    "@reltio/mdm-sdk": "^1.4.2070",
     "@vis.gl/react-google-maps": "^1.3.0",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",
@@ -35,7 +35,7 @@
     "react-virtualized": "^9.22.5",
     "react-window": "^1.8.10",
     "recharts": "^2.15.1",
-    "sanitize-html": "^2.17.5",
+    "sanitize-html": "^2.17.7",
     "sigma": "^2.4.0",
     "topojson-client": "^3.1.0"
   },

package/RelationEditor/styles.d.ts

@@ -1 +0,0 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"dense" | "title" | "item" | "editor" | "actionButtons">;

package/RelationEditor/styles.js

@@ -1,34 +0,0 @@
-import { makeStyles } from '@mui/styles';
-export var useStyles = makeStyles({
-    editor: {
-        display: 'flex',
-        flexDirection: 'column',
-        padding: '0 24px 5px',
-        overflowX: 'hidden'
-    },
-    title: {
-        color: 'rgba(0, 0, 0, 0.6)',
-        fontSize: '16px',
-        letterSpacing: '0.15px',
-        lineHeight: '24px',
-        margin: '17px 0 24px'
-    },
-    item: {
-        marginBottom: '20px'
-    },
-    dense: {
-        marginBottom: 0
-    },
-    actionButtons: {
-        display: 'flex',
-        justifyContent: 'flex-end',
-        margin: '0 8px 10px',
-        '& > button': {
-            fontSize: '14px',
-            lineHeight: '16px',
-            marginLeft: '8px',
-            padding: '10px 8px',
-            backgroundColor: 'rgba(98, 2, 238, 0)'
-        }
-    }
-});

package/cjs/RelationEditor/styles.d.ts

@@ -1 +0,0 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"dense" | "title" | "item" | "editor" | "actionButtons">;

package/cjs/RelationEditor/styles.js

@@ -1,37 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@mui/styles");
-exports.useStyles = (0, styles_1.makeStyles)({
-    editor: {
-        display: 'flex',
-        flexDirection: 'column',
-        padding: '0 24px 5px',
-        overflowX: 'hidden'
-    },
-    title: {
-        color: 'rgba(0, 0, 0, 0.6)',
-        fontSize: '16px',
-        letterSpacing: '0.15px',
-        lineHeight: '24px',
-        margin: '17px 0 24px'
-    },
-    item: {
-        marginBottom: '20px'
-    },
-    dense: {
-        marginBottom: 0
-    },
-    actionButtons: {
-        display: 'flex',
-        justifyContent: 'flex-end',
-        margin: '0 8px 10px',
-        '& > button': {
-            fontSize: '14px',
-            lineHeight: '16px',
-            marginLeft: '8px',
-            padding: '10px 8px',
-            backgroundColor: 'rgba(98, 2, 238, 0)'
-        }
-    }
-});

package/cjs/features/workflow/AddWorkflowButton/styles.d.ts

@@ -1 +0,0 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"button" | "icon" | "buttonLabel">;

package/cjs/features/workflow/AddWorkflowButton/styles.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@mui/styles");
-exports.useStyles = (0, styles_1.makeStyles)({
-    button: {
-        padding: '9px 16px 9px 12px',
-        marginLeft: 'auto',
-        marginRight: '8px'
-    },
-    buttonLabel: {
-        fontSize: '14px',
-        fontWeight: 500,
-        lineHeight: '16px'
-    },
-    icon: {
-        fontSize: '18px',
-        marginRight: '8px'
-    }
-});

package/features/workflow/AddWorkflowButton/styles.d.ts

@@ -1 +0,0 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"button" | "icon" | "buttonLabel">;

package/features/workflow/AddWorkflowButton/styles.js

@@ -1,17 +0,0 @@
-import { makeStyles } from '@mui/styles';
-export var useStyles = makeStyles({
-    button: {
-        padding: '9px 16px 9px 12px',
-        marginLeft: 'auto',
-        marginRight: '8px'
-    },
-    buttonLabel: {
-        fontSize: '14px',
-        fontWeight: 500,
-        lineHeight: '16px'
-    },
-    icon: {
-        fontSize: '18px',
-        marginRight: '8px'
-    }
-});