@reltio/components 1.4.2226 → 1.4.2228

package/cjs/features/crosswalks/AttributesTable/types.d.ts

@@ -1,14 +1,28 @@
 import React from 'react';
-import { AttributeType, AttributeValue, Crosswalk, SurvivorStrategy } from '@reltio/mdm-sdk';
+import { AttributeType, AttributeValue, Crosswalk, ParticipationStatus, SurvivorStrategy } from '@reltio/mdm-sdk';
 import { AddInlineAttributeEvent, DeleteInlineAttributeEvent, EditInlineAttributeEvent, IgnoreInlineAttributeEvent, PinInlineAttributeEvent } from '../../../types/inlineAttributes';
 import { ColumnData, RenderRowCellProps } from '../../../types/basicTable';
 import { CrosswalksMap } from '../../../types';
-export type RuleTypeValues = {
-    ruleType: SurvivorStrategy;
+export type StrategyAdditionalFields = {
     primaryAttributeUri?: string;
     comparisonAttributeUri?: string;
     sourcesUriOrder?: string[];
 };
+export type AppliedSurvivorshipStrategy = {
+    strategy: SurvivorStrategy;
+} & StrategyAdditionalFields;
+export type RuleTypeItem = {
+    type: 'rule';
+    data: AppliedSurvivorshipStrategy;
+    valueUri: string;
+} | {
+    type: 'status';
+    data: ParticipationStatus;
+    valueUri: string;
+};
+export type RuleTypeValues = {
+    ruleTypes: RuleTypeItem[];
+};
 export type OvValues = {
     attributeType: AttributeType;
     values: AttributeValue[];

package/cjs/features/crosswalks/contexts/SyncedValueHeightsContext.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type Props = {
+    reportHeight: (uri: string, height: number) => void;
+    getHeight: (key: string) => number | undefined;
+    clear: () => void;
+};
+export declare const SyncedValueHeightsProvider: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const useSyncedValueHeights: () => Props;
+export {};

package/cjs/features/crosswalks/contexts/SyncedValueHeightsContext.js

@@ -0,0 +1,66 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSyncedValueHeights = exports.SyncedValueHeightsProvider = void 0;
+var react_1 = __importStar(require("react"));
+var SyncedValueHeightsContext = (0, react_1.createContext)(null);
+var SyncedValueHeightsProvider = function (_a) {
+    var children = _a.children;
+    var _b = (0, react_1.useState)({}), heights = _b[0], setHeights = _b[1];
+    var reportHeight = (0, react_1.useCallback)(function (uri, height) {
+        if (!uri || !height || heights[uri] === height)
+            return;
+        setHeights(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[uri] = height, _a)));
+        });
+    }, [heights]);
+    var getHeight = (0, react_1.useCallback)(function (uri) { return (uri ? heights[uri] : 0); }, [heights]);
+    var clear = (0, react_1.useCallback)(function () {
+        setHeights({});
+    }, []);
+    var value = (0, react_1.useMemo)(function () { return ({ reportHeight: reportHeight, getHeight: getHeight, clear: clear }); }, [reportHeight, getHeight, clear]);
+    return react_1.default.createElement(SyncedValueHeightsContext.Provider, { value: value }, children);
+};
+exports.SyncedValueHeightsProvider = SyncedValueHeightsProvider;
+var useSyncedValueHeights = function () {
+    var context = (0, react_1.useContext)(SyncedValueHeightsContext);
+    if (!context) {
+        throw new Error('useSyncedValueHeights must be used within SyncedValueHeightsProvider');
+    }
+    return context;
+};
+exports.useSyncedValueHeights = useSyncedValueHeights;

package/features/crosswalks/AttributesTable/AttributesTable.js

@@ -25,6 +25,7 @@ import { COLUMNS_DATA, DEFAULT_VISIBLE_COLUMNS, getBasicTableColumnsData, getBas
 import { ConfirmEditIgnoredDialog } from './components/ConfirmEditIgnoredDialog';
 import { CommonRowCellRenderer } from './components/CommonRowCellRenderer';
 import { LazyRenderer } from '../../../LazyRenderer';
+import { SyncedValueHeightsProvider } from '../contexts/SyncedValueHeightsContext';
 import { useStyles } from './styles';
 var DEFAULT_ROW_HEIGHT = 68;
 var getIdFromRowValue = function (rowValue) { return rowValue.ovValues.attributeType.uri; };
@@ -119,7 +120,8 @@ var AttributesTable = function (_a) {
             React.createElement(ColumnsSettings, { columnsData: COLUMNS_DATA, selectedColumns: visibleColumns, onChangeColumns: onChangeVisibleColumns })),
         React.createElement("div", { className: styles.tableContent },
             isLoading && React.createElement(LinearLoadIndicator, null),
-            React.createElement(BasicTable, { ref: tableRef, fixFirstColumn: true, headRowHeight: 48, defaultColumnWidth: 250, defaultColumnMinWidth: 200, columnsData: visibleColumnsData, dndRowReorderingEnabled: false, dndRowReorderingHandler: handleReorderAttributeTypes, getIdFromRowValue: getIdFromRowValue, rowsData: rowsData, onScroll: debouncedNotifyLazyRenderer, renderRowCell: renderRowCell, getRowCellHeight: getRowCellHeight, context: tableContext })),
+            React.createElement(SyncedValueHeightsProvider, null,
+                React.createElement(BasicTable, { ref: tableRef, fixFirstColumn: true, headRowHeight: 48, defaultColumnWidth: 250, defaultColumnMinWidth: 200, columnsData: visibleColumnsData, dndRowReorderingEnabled: false, dndRowReorderingHandler: handleReorderAttributeTypes, getIdFromRowValue: getIdFromRowValue, rowsData: rowsData, onScroll: debouncedNotifyLazyRenderer, renderRowCell: renderRowCell, getRowCellHeight: getRowCellHeight, context: tableContext }))),
         React.createElement(ConfirmDeleteDialog, { open: !!pendingDeletion, onClose: function () { return setPendingDeletion(null); }, onConfirm: handleDelete }),
         React.createElement(ConfirmEditIgnoredDialog, { open: !!pendingIgnoredEditing, onClose: function () { return setPendingIgnoredEditing(null); }, onConfirmEditWithIgnore: function () { return pendingIgnoredEditing && onEdit(pendingIgnoredEditing); }, onConfirmEditWithoutIgnore: function () {
                 if (pendingIgnoredEditing)

package/features/crosswalks/AttributesTable/AttributesTable.test-data.d.ts

@@ -1,5 +1,8 @@
 import { Entity, Metadata } from '@reltio/mdm-sdk';
-export declare const createEntity: () => Entity;
+export declare const createEntity: ({ withAppliedSurvivorshipRules }?: {
+    withAppliedSurvivorshipRules?: boolean;
+}) => Entity;
+export declare const createEntityWithoutAppliedRule: () => Entity;
 export declare const createMetadata: () => Metadata;
 export declare const selectedAttributeTypes: ({
     description: string;

package/features/crosswalks/AttributesTable/AttributesTable.test-data.js

@@ -1,31 +1,45 @@
-export var createEntity = function () {
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { ParticipationStatus } from '@reltio/mdm-sdk';
+export var createEntity = function (_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.withAppliedSurvivorshipRules, withAppliedSurvivorshipRules = _c === void 0 ? false : _c;
     return {
         uri: 'entities/01L2n5z',
         type: 'configuration/entityTypes/HCP',
         label: 'entity label',
         attributes: {
             Boolean: [
-                {
-                    ov: true,
-                    type: 'configuration/entityTypes/HCP/attributes/Boolean',
-                    uri: 'entities/01L2n5z/attributes/Boolean/5nmc3Cp',
-                    value: 'true'
-                }
+                __assign({ ov: true, type: 'configuration/entityTypes/HCP/attributes/Boolean', uri: 'entities/01L2n5z/attributes/Boolean/5nmc3Cp', value: 'true' }, (withAppliedSurvivorshipRules && {
+                    ovDetails: {
+                        participationStatus: ParticipationStatus.Strategy,
+                        appliedSurvivorshipRules: 'Frequency'
+                    }
+                }))
             ],
             TextField: [
-                {
-                    ov: true,
-                    type: 'configuration/entityTypes/HCP/attributes/TextField',
-                    uri: 'entities/01L2n5z/attributes/TextField/5noU1aB',
-                    value: 'text field value'
-                },
-                {
-                    ov: false,
-                    type: 'configuration/entityTypes/HCP/attributes/TextField',
-                    uri: 'entities/01L2n5z/attributes/TextField/5noU1aB',
-                    value: 'another text value',
-                    ignored: true
-                }
+                __assign({ ov: true, type: 'configuration/entityTypes/HCP/attributes/TextField', uri: 'entities/01L2n5z/attributes/TextField/5noU1aB', value: 'text field value' }, (withAppliedSurvivorshipRules && {
+                    ovDetails: {
+                        participationStatus: ParticipationStatus.Strategy,
+                        appliedSurvivorshipRules: { SRC_SYS: [{ SRC_SYS: ['SRC_SYS', 'Aggregation'] }, 'Frequency'] }
+                    }
+                })),
+                __assign({ ov: false, type: 'configuration/entityTypes/HCP/attributes/TextField', uri: 'entities/01L2n5z/attributes/TextField/5noU1aB', value: 'another text value', ignored: true }, (withAppliedSurvivorshipRules && {
+                    ovDetails: {
+                        participationStatus: ParticipationStatus.Strategy,
+                        appliedSurvivorshipRules: {
+                            SRC_SYS: [{ SRC_SYS: ['SRC_SYS', 'SRC_SYS'] }, { SRC_SYS: ['SRC_SYS'] }, 'LUD']
+                        }
+                    }
+                }))
             ],
             DeepNested: [
                 {
@@ -103,6 +117,21 @@ export var createEntity = function () {
         ]
     };
 };
+export var createEntityWithoutAppliedRule = function () {
+    var entity = createEntity({ withAppliedSurvivorshipRules: true });
+    return __assign(__assign({}, entity), { attributes: __assign(__assign({}, entity.attributes), { Boolean: [
+                {
+                    ov: true,
+                    type: 'configuration/entityTypes/HCP/attributes/Boolean',
+                    uri: 'entities/01L2n5z/attributes/Boolean/5nmc3CpPinned',
+                    value: 'false',
+                    ovDetails: {
+                        participationStatus: ParticipationStatus.Pinned,
+                        appliedSurvivorshipRules: 'N/A'
+                    }
+                }
+            ] }) });
+};
 export var createMetadata = function () {
     return {
         entityTypes: [

package/features/crosswalks/AttributesTable/AttributesTable.test.js

@@ -60,9 +60,9 @@ import userEvent from '@testing-library/user-event';
 import { config } from 'react-transition-group';
 import { mockDndKit } from '../../../test-utils/dndKit';
 import { DndContext } from '@dnd-kit/core';
-import { mockBasicTableSizing } from '../../../test-utils';
+import { getMuiIconByName, getMuiIconsByName, mockBasicTableSizing } from '../../../test-utils';
 import { MdmModuleProvider } from '../../../contexts/MdmModuleContext';
-import { createEntity, createMetadata, selectedAttributeTypes } from './AttributesTable.test-data';
+import { createEntity, createEntityWithoutAppliedRule, createMetadata, selectedAttributeTypes } from './AttributesTable.test-data';
 import AttributesTable from './AttributesTable';
 jest.mock('@dnd-kit/core', function () { return mockDndKit; });
 jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { debounce: function (x) { return x; } })); });
@@ -446,6 +446,62 @@ describe('attribute table tests', function () {
             }
         });
     }); });
+    it('should render rule type column and fallback icons correctly according to applied survivorship rules', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var unmockTableSizing, entity, user, ruleTypeColumns, ovValuesColumns, fallbackIcon, tooltip;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    unmockTableSizing = mockBasicTableSizing();
+                    entity = createEntity({ withAppliedSurvivorshipRules: true });
+                    user = setUp(__assign(__assign({}, defaultProps), { visibleColumns: undefined, entity: entity })).user;
+                    expect(screen.getByText('Rule type')).toBeInTheDocument();
+                    ruleTypeColumns = screen.getAllByTestId('column-name-ruleType');
+                    expect(within(ruleTypeColumns[0]).getByText('Frequency')).toBeInTheDocument();
+                    ovValuesColumns = screen.getAllByTestId('column-name-ovValues');
+                    fallbackIcon = getMuiIconByName('Info', ovValuesColumns[0]);
+                    return [4 /*yield*/, user.hover(fallbackIcon)];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, screen.findByRole('tooltip')];
+                case 2:
+                    tooltip = _a.sent();
+                    expect(within(tooltip).getByText('OV decision path')).toBeInTheDocument();
+                    expect(within(tooltip).getAllByText('Source system').length).toBe(3);
+                    expect(within(tooltip).getByText('Aggregation')).toBeInTheDocument();
+                    expect(within(tooltip).getByText('Frequency')).toBeInTheDocument();
+                    expect(getMuiIconsByName('CancelOutlined', tooltip).length).toBe(4);
+                    expect(getMuiIconByName('CheckCircle', tooltip)).toBeInTheDocument();
+                    expect(within(ruleTypeColumns[1]).getByText('Frequency')).toBeInTheDocument();
+                    expect(getMuiIconByName('Info', ovValuesColumns[1])).not.toBeInTheDocument();
+                    unmockTableSizing();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should render N/A rule type and show tooltip in case of not participating value', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var unmockTableSizing, entity, user, ruleTypeColumns, infoIcon, tooltip;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    unmockTableSizing = mockBasicTableSizing();
+                    entity = createEntityWithoutAppliedRule();
+                    user = setUp(__assign(__assign({}, defaultProps), { visibleColumns: undefined, entity: entity })).user;
+                    ruleTypeColumns = screen.getAllByTestId('column-name-ruleType');
+                    expect(within(ruleTypeColumns[1]).getByText('N/A')).toBeInTheDocument();
+                    infoIcon = getMuiIconByName('Info', ruleTypeColumns[1]);
+                    expect(infoIcon).toBeInTheDocument();
+                    return [4 /*yield*/, user.hover(infoIcon)];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, screen.findByRole('tooltip')];
+                case 2:
+                    tooltip = _a.sent();
+                    expect(within(tooltip).getByText("Value survives because 'pin' flag is set. Survivorship not evaluated")).toBeInTheDocument();
+                    unmockTableSizing();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
     describe('Edit attributes', function () {
         it('should edit attributes', function () { return __awaiter(void 0, void 0, void 0, function () {
             var unmockTableSizing, entity, onEdit, props, user;

package/features/crosswalks/AttributesTable/components/FallbackIndicator/FallbackIndicator.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { OvDetails } from '@reltio/mdm-sdk';
+type Props = {
+    ovDetails: OvDetails;
+};
+export declare const FallbackIndicator: ({ ovDetails }: Props) => React.JSX.Element;
+export {};

package/features/crosswalks/AttributesTable/components/FallbackIndicator/FallbackIndicator.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import Typography from '@mui/material/Typography';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
+import InfoIcon from '@mui/icons-material/Info';
+import { useMdmMetadata } from '../../../../../contexts/MdmModuleContext';
+import { getFallbackLabels } from '../../helpers';
+import { withTooltip } from '../../../../../HOCs/withTooltip';
+import styles from './FallbackIndicator.module.css';
+var InfoIconWithTooltip = withTooltip(InfoIcon);
+export var FallbackIndicator = function (_a) {
+    var ovDetails = _a.ovDetails;
+    var metadata = useMdmMetadata();
+    var fallbackLabels = getFallbackLabels(metadata, ovDetails);
+    var renderTooltip = function () {
+        return (React.createElement("div", { className: styles.fallbackList },
+            React.createElement(Typography, { variant: "caption", className: styles.fallbackTitle }, i18n.text('OV decision path')),
+            fallbackLabels.map(function (label, index) { return (React.createElement("div", { key: index, className: styles.fallbackItem },
+                index === fallbackLabels.length - 1 ? (React.createElement(CheckCircleIcon, { className: styles.fallbackItemIcon })) : (React.createElement(CancelOutlinedIcon, { className: styles.fallbackItemIcon })),
+                React.createElement(Typography, { variant: "caption" }, label))); })));
+    };
+    return fallbackLabels.length > 0 ? (React.createElement(InfoIconWithTooltip, { tooltipTitle: renderTooltip(), className: styles.fallbackIcon })) : null;
+};

package/features/crosswalks/AttributesTable/components/FallbackIndicator/FallbackIndicator.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"fallbackItem":"FallbackIndicator-fallbackItem--6CBy-","fallbackItemIcon":"FallbackIndicator-fallbackItemIcon--8HsII","fallbackList":"FallbackIndicator-fallbackList--3JCCL","fallbackTitle":"FallbackIndicator-fallbackTitle--abWeO","fallbackIcon":"FallbackIndicator-fallbackIcon--ox4Ec"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.FallbackIndicator-fallbackItem--6CBy-{align-items:center;color:hsla(0,0%,100%,.6);display:flex;font-size:13px;padding-top:8px;position:relative}.FallbackIndicator-fallbackItem--6CBy-:last-child{color:#fff}.FallbackIndicator-fallbackItem--6CBy-:not(:last-child):after{background:hsla(0,0%,100%,.6);content:"";height:8px;left:7px;position:absolute;top:28px;width:2px}.FallbackIndicator-fallbackItemIcon--8HsII{height:16px;margin-right:4px;width:16px}.FallbackIndicator-fallbackList--3JCCL{min-width:150px;padding-bottom:8px;padding-top:8px}.FallbackIndicator-fallbackTitle--abWeO{font-weight:500;padding-bottom:4px}.FallbackIndicator-fallbackIcon--ox4Ec{color:var(--mui-palette-text-secondary);height:16px;margin-left:4px;vertical-align:middle;width:16px}`;
+    head.appendChild(style);
+}
+export default styles;

package/features/crosswalks/AttributesTable/components/FallbackIndicator/index.d.ts

@@ -0,0 +1 @@
+export { FallbackIndicator } from './FallbackIndicator';

package/features/crosswalks/AttributesTable/components/FallbackIndicator/index.js

@@ -0,0 +1 @@
+export { FallbackIndicator } from './FallbackIndicator';

package/features/crosswalks/AttributesTable/components/OvValuesRenderer/OvValuesRenderer.js

@@ -16,7 +16,9 @@ import { ReadOnlyAttributeValuesBlock } from '../../../../../ReadOnlyAttributeVa
 import { AttributeTitle } from '../../../../../AttributeTitle';
 import { EntityContext } from '../../../../../contexts/EntityContext';
 import { useMdmEntity } from '../../../../../contexts/MdmModuleContext';
+import { FallbackIndicator } from '../FallbackIndicator';
 import { useCommonStyles } from '../../styles';
+import { ValueHeightReporter } from '../SyncedValueHeight';
 import { useStyles } from './styles';
 export var OvValuesRenderer = function (_a) {
     var _b = _a.value, values = _b.values, attributeType = _b.attributeType, someRowIsDragging = _a.someRowIsDragging, draggableProps = _a.draggableProps;
@@ -28,5 +30,5 @@ export var OvValuesRenderer = function (_a) {
             React.createElement(DragIndicatorIcon, { className: styles.dragIndicatorIcon })),
         React.createElement(AttributeTitle, { className: styles.attributeTitle, label: attributeType.label }),
         !someRowIsDragging && (React.createElement(EntityContext.Provider, { value: entity },
-            React.createElement(ReadOnlyAttributeValuesBlock, { values: values, attributeType: attributeType, valueContainerClassName: styles.ovValue })))));
+            React.createElement(ReadOnlyAttributeValuesBlock, { values: values, attributeType: attributeType, valueContainerClassName: styles.ovValue, AttributeValueWrapper: ValueHeightReporter, FallbackSlot: FallbackIndicator })))));
 };

package/features/crosswalks/AttributesTable/components/RuleTypeInfoButton/RuleTypeInfoButton.js

@@ -64,7 +64,7 @@ export var RuleTypeInfoButton = function (_a) {
     var openPopup = function (event) { return setAnchorEl(event.currentTarget); };
     var closePopup = function () { return setAnchorEl(null); };
     return (React.createElement(React.Fragment, null,
-        React.createElement(SmallIconButtonWithTooltip, { icon: InfoIcon, tooltipTitle: i18n.text('View details'), size: 'XS', onClick: openPopup }),
+        React.createElement(SmallIconButtonWithTooltip, { icon: InfoIcon, tooltipTitle: i18n.text('View details'), size: 'XXS', onClick: openPopup }),
         React.createElement(Popover, { classes: { paper: styles.rulePopup }, open: !!anchorEl, anchorEl: anchorEl, onClose: closePopup, anchorOrigin: {
                 vertical: 'bottom',
                 horizontal: 'right'

package/features/crosswalks/AttributesTable/components/RuleTypeRenderer/RuleTypeRenderer.d.ts

@@ -3,5 +3,5 @@ import { RuleTypeValues } from '../../types';
 type Props = {
     value: RuleTypeValues;
 };
-export declare const RuleTypeRenderer: ({ value: { ruleType, sourcesUriOrder, primaryAttributeUri, comparisonAttributeUri } }: Props) => React.JSX.Element;
+export declare const RuleTypeRenderer: ({ value: { ruleTypes } }: Props) => React.JSX.Element;
 export {};

package/features/crosswalks/AttributesTable/components/RuleTypeRenderer/RuleTypeRenderer.js

@@ -1,18 +1,72 @@
+var _a;
 import React from 'react';
+import i18n from 'ui-i18n';
 import classnames from 'classnames';
+import InfoIcon from '@mui/icons-material/Info';
+import { ParticipationStatus } from '@reltio/mdm-sdk';
+import { withTooltip } from '../../../../../HOCs/withTooltip';
 import { RuleTypeInfoButton } from '../RuleTypeInfoButton';
 import { useCommonStyles } from '../../styles';
-import { useStyles } from './styles';
+import { ValueHeightConsumer } from '../SyncedValueHeight';
+import styles from './RuleTypeRenderer.module.css';
+var InfoIconWithTooltip = withTooltip(InfoIcon);
+var PARTICIPATION_STATUS_MAP = (_a = {},
+    Object.defineProperty(_a, ParticipationStatus.Pinned, {
+        get: function () {
+            return i18n.text("Value survives because 'pin' flag is set. Survivorship not evaluated");
+        },
+        enumerable: false,
+        configurable: true
+    }),
+    Object.defineProperty(_a, ParticipationStatus.Ignored, {
+        get: function () {
+            return i18n.text("Value did not participate in survivorship evaluation because 'ignore' flag is set");
+        },
+        enumerable: false,
+        configurable: true
+    }),
+    Object.defineProperty(_a, ParticipationStatus.EndDatedCrosswalk, {
+        get: function () {
+            return i18n.text("Value did not participate in survivorship evaluation because it's crosswalk is end-dated");
+        },
+        enumerable: false,
+        configurable: true
+    }),
+    Object.defineProperty(_a, ParticipationStatus.NotParticipating, {
+        get: function () {
+            return i18n.text('Value did not participate in survivorship evaluation because another value was pinned or the source was ignored');
+        },
+        enumerable: false,
+        configurable: true
+    }),
+    _a);
 export var RuleTypeRenderer = function (_a) {
-    var _b = _a.value, ruleType = _b.ruleType, sourcesUriOrder = _b.sourcesUriOrder, primaryAttributeUri = _b.primaryAttributeUri, comparisonAttributeUri = _b.comparisonAttributeUri;
-    var styles = useStyles();
+    var ruleTypes = _a.value.ruleTypes;
     var commonStyles = useCommonStyles();
-    var showInfoIcon = sourcesUriOrder || primaryAttributeUri || comparisonAttributeUri;
-    return (React.createElement("div", { className: classnames(styles.root, commonStyles.basicCell) },
-        React.createElement("div", { className: styles.label }, ruleType.label),
-        showInfoIcon && (React.createElement(RuleTypeInfoButton, { info: {
-                sourcesUriOrder: sourcesUriOrder,
-                primaryAttributeUri: primaryAttributeUri,
-                comparisonAttributeUri: comparisonAttributeUri
-            } }))));
+    var renderStrategy = function (data) {
+        var strategy = data.strategy, primaryAttributeUri = data.primaryAttributeUri, comparisonAttributeUri = data.comparisonAttributeUri, sourcesUriOrder = data.sourcesUriOrder;
+        if (!strategy)
+            return null;
+        var showInfoIcon = sourcesUriOrder || primaryAttributeUri || comparisonAttributeUri;
+        return (React.createElement("div", { className: styles.strategyItem },
+            React.createElement("div", { className: styles.label }, strategy.label),
+            showInfoIcon && (React.createElement(RuleTypeInfoButton, { info: {
+                    sourcesUriOrder: sourcesUriOrder,
+                    primaryAttributeUri: primaryAttributeUri,
+                    comparisonAttributeUri: comparisonAttributeUri
+                } }))));
+    };
+    var renderStatus = function (participationStatus) {
+        var description = PARTICIPATION_STATUS_MAP[participationStatus];
+        return (React.createElement("div", { className: styles.statusItem },
+            i18n.text('N/A'),
+            description && React.createElement(InfoIconWithTooltip, { className: styles.infoIcon, tooltipTitle: description })));
+    };
+    var renderRuleType = function (item) {
+        if (item.type === 'status') {
+            return renderStatus(item.data);
+        }
+        return renderStrategy(item.data);
+    };
+    return (React.createElement("div", { className: classnames(styles.list, commonStyles.basicCell) }, ruleTypes.map(function (item) { return (React.createElement(ValueHeightConsumer, { key: item.valueUri, uri: item.valueUri }, renderRuleType(item))); })));
 };

package/features/crosswalks/AttributesTable/components/RuleTypeRenderer/RuleTypeRenderer.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"list":"RuleTypeRenderer-list--IejtI","label":"RuleTypeRenderer-label--9oONL","strategyItem":"RuleTypeRenderer-strategyItem--yfhkv","statusItem":"RuleTypeRenderer-statusItem--R23Qz","infoIcon":"RuleTypeRenderer-infoIcon--LVMk6"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.RuleTypeRenderer-list--IejtI:before{content:"";display:block;height:20px}.RuleTypeRenderer-list--IejtI>div+div{margin-top:4px}.RuleTypeRenderer-label--9oONL{margin-right:5px}.RuleTypeRenderer-statusItem--R23Qz,.RuleTypeRenderer-strategyItem--yfhkv{align-items:center;display:flex}.RuleTypeRenderer-infoIcon--LVMk6{color:var(--mui-palette-text-secondary);height:16px;margin-left:4px;width:16px}`;
+    head.appendChild(style);
+}
+export default styles;

package/features/crosswalks/AttributesTable/components/SyncedValueHeight/ValueHeightConsumer.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactNode } from 'react';
+type Props = {
+    uri: string;
+    children: ReactNode;
+};
+export declare const ValueHeightConsumer: ({ uri, children }: Props) => React.JSX.Element;
+export {};

package/features/crosswalks/AttributesTable/components/SyncedValueHeight/ValueHeightConsumer.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { useSyncedValueHeights } from '../../../contexts/SyncedValueHeightsContext';
+export var ValueHeightConsumer = function (_a) {
+    var uri = _a.uri, children = _a.children;
+    var getHeight = useSyncedValueHeights().getHeight;
+    var height = getHeight(uri);
+    return React.createElement("div", { style: height ? { minHeight: height } : undefined }, children);
+};

package/features/crosswalks/AttributesTable/components/SyncedValueHeight/ValueHeightReporter.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactNode } from 'react';
+type Props = {
+    uri: string;
+    children: ReactNode;
+};
+export declare const ValueHeightReporter: ({ uri, children }: Props) => React.JSX.Element;
+export {};

package/features/crosswalks/AttributesTable/components/SyncedValueHeight/ValueHeightReporter.js

@@ -0,0 +1,23 @@
+import React, { useCallback, useLayoutEffect, useRef } from 'react';
+import ReactResizeDetector from 'react-resize-detector';
+import { useSyncedValueHeights } from '../../../contexts/SyncedValueHeightsContext';
+export var ValueHeightReporter = function (_a) {
+    var uri = _a.uri, children = _a.children;
+    var reportHeight = useSyncedValueHeights().reportHeight;
+    var contentRef = useRef(null);
+    var lastHeightRef = useRef();
+    var report = useCallback(function () {
+        var _a;
+        var height = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight;
+        if (!height || height === lastHeightRef.current)
+            return;
+        lastHeightRef.current = height;
+        reportHeight(uri, height);
+    }, [reportHeight, uri, lastHeightRef]);
+    useLayoutEffect(function () {
+        report();
+    }, [report]);
+    return (React.createElement("div", { ref: contentRef },
+        React.createElement(ReactResizeDetector, { handleHeight: true, onResize: report }),
+        children));
+};

package/features/crosswalks/AttributesTable/components/SyncedValueHeight/index.d.ts

@@ -0,0 +1,2 @@
+export { ValueHeightConsumer } from './ValueHeightConsumer';
+export { ValueHeightReporter } from './ValueHeightReporter';

package/features/crosswalks/AttributesTable/components/SyncedValueHeight/index.js

@@ -0,0 +1,2 @@
+export { ValueHeightConsumer } from './ValueHeightConsumer';
+export { ValueHeightReporter } from './ValueHeightReporter';

package/features/crosswalks/AttributesTable/helpers.d.ts

@@ -1,4 +1,4 @@
-import { AttributeType, AttributeValue, Crosswalk, Metadata, RecordAttributesType } from '@reltio/mdm-sdk';
+import { AppliedSurvivorshipRule, AttributeType, AttributeValue, Crosswalk, Metadata, OvDetails, RecordAttributesType } from '@reltio/mdm-sdk';
 import { CrosswalksMap } from '../../../types';
 import { CrosswalksByOwnerTypeMap } from '../types';
 import { AttributesTableRowValue, RuleTypeValues } from './types';
@@ -29,7 +29,9 @@ export declare const COLUMNS_DATA: ({
 })[];
 export declare const DEFAULT_VISIBLE_COLUMNS: string[];
 export declare const countAttributeValues: (type: string, values: AttributeValue[], crosswalksMap: CrosswalksMap) => number;
-export declare const getRuleTypeValues: (metadata: Metadata, attributeType: AttributeType, parentTypeUri: string, activeSurvivorshipGroupUri?: string) => RuleTypeValues;
+export declare const collectRuleNames: (rule: AppliedSurvivorshipRule | undefined) => string[];
+export declare const getFallbackLabels: (metadata: Metadata, ovDetails: OvDetails) => string[];
+export declare const getRuleTypeValues: (metadata: Metadata, attributeType: AttributeType, parentTypeUri: string, attributeValues: AttributeValue[], activeSurvivorshipGroupUri?: string) => RuleTypeValues;
 export declare const getWinnerCrosswalks: (attributeValues: AttributeValue[], crosswalksMap: CrosswalksMap) => Crosswalk[];
 export declare const getBasicTableColumnsData: any;
 export declare const getBasicTableRowsData: (metadata: Metadata, parentTypeUri: string, attrTypes: AttributeType[], columns: string[], crosswalksMap: CrosswalksByOwnerTypeMap, attributes: RecordAttributesType, activeSurvivorshipGroupUri?: string) => AttributesTableRowValue[];