@reltio/profile 1.4.1584 → 1.4.1586-mui5

package/src/components/HierarchyPathsView/theme/node-content-renderer.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import {useStyles} from './styles';
+import classnames from 'classnames';
+import {omit} from 'ramda';
+import {Node} from '../types';
+
+type Props = {
+    treeIndex: number;
+    scaffoldBlockPxWidth: number;
+    node: Node;
+    path: Array<string | number>;
+    style?: Record<string, unknown>;
+    title: React.ReactElement;
+    toggleChildrenVisibility: (props) => void;
+};
+
+const NodeRendererDefault = (props: Props) => {
+    const {scaffoldBlockPxWidth, toggleChildrenVisibility, node, title, path, treeIndex, style, ...otherProps} = omit(
+        [
+            'connectDragPreview',
+            'connectDragSource',
+            'isDragging',
+            'canDrop',
+            'canDrag',
+            'draggedNode',
+            'isSearchMatch',
+            'isSearchFocus',
+            'buttons',
+            'didDrop',
+            'children',
+            'treeId',
+            'isOver',
+            'parentNode',
+            'rowDirection'
+        ],
+        props
+    );
+    const nodeTitle = title;
+
+    const showToggleChildrenButton =
+        toggleChildrenVisibility && !node.root && node.children && node.children.length > 0;
+
+    const onToggle = () => {
+        toggleChildrenVisibility({
+            node,
+            path,
+            treeIndex
+        });
+    };
+    const styles = useStyles();
+    return (
+        <div style={{height: '100%'}} {...otherProps} key={node.nodeId}>
+            {showToggleChildrenButton && node.expanded && (
+                <div style={{width: scaffoldBlockPxWidth - 2}} className={styles.lineChildren} />
+            )}
+            <div className={styles.row} style={style}>
+                <div className={styles.rowContents}>
+                    {showToggleChildrenButton && (
+                        <div className={styles.buttonWrapper} onClick={onToggle}>
+                            <div
+                                aria-label={node.expanded ? 'Collapse' : 'Expand'}
+                                className={classnames(
+                                    styles.button,
+                                    node.expanded ? styles.expandedButton : styles.collapsedButton
+                                )}
+                            />
+                        </div>
+                    )}
+                    <div className={styles.rowTitle}>
+                        {typeof nodeTitle === 'function'
+                            ? nodeTitle({
+                                node,
+                                path,
+                                treeIndex
+                            })
+                            : nodeTitle}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default NodeRendererDefault;

package/src/components/HierarchyPathsView/theme/styles.ts

@@ -0,0 +1,102 @@
+import {makeStyles} from '@mui/styles';
+import {theme as treeTheme} from '../theme';
+
+export const useStyles = makeStyles(() => ({
+    lineBlock: {
+        height: '100%',
+        position: 'relative',
+        display: 'inline-block'
+    },
+    lineChildren: {
+        height: '100%',
+        position: 'absolute',
+        display: 'inline-block',
+        '&:after': {
+            content: "''",
+            position: 'absolute',
+            backgroundColor: 'rgba(0,122,193,0.3)',
+            width: '1px',
+            left: '50%',
+            bottom: '0',
+            height: `calc(100% - ${treeTheme.rowHeight}px)`
+        }
+    },
+    rootIndex: {
+        display: 'flex',
+        alignItems: 'center',
+        color: 'rgba(0,0,0,0.54)',
+        height: '100%'
+    },
+    verticalLine: {
+        width: '1px',
+        left: 'calc(50% - 1px)',
+        top: 0,
+        height: `${treeTheme.rowHeight / 2}px`,
+        position: 'absolute',
+        backgroundColor: 'rgba(0,122,193,0.3)'
+    },
+    horizontalLineRight: {
+        height: '1px',
+        top: `${treeTheme.rowHeight / 2}px`,
+        left: 'calc(50% - 1px)',
+        width: '24%',
+        position: 'absolute',
+        backgroundColor: 'rgba(0,122,193,0.3)'
+    },
+    node: {
+        minWidth: '100%',
+        position: 'relative',
+        textAlign: 'left',
+        padding: '0 24px 0 18px',
+        boxSizing: 'border-box',
+        whiteSpace: 'normal',
+        '&:hover': {
+            backgroundColor: 'rgba(0,0,0,0.06)'
+        }
+    },
+    nodeContent: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        paddingLeft: '18px',
+        boxSizing: 'border-box'
+    },
+    row: {
+        display: 'flex'
+    },
+    rowContents: {
+        position: 'relative',
+        borderLeft: 'none',
+        paddingLeft: '4px',
+        flex: '1 1 auto',
+        width: 0,
+        display: 'flex',
+        verticalAlign: 'middle',
+        boxSizing: 'border-box'
+    },
+    buttonWrapper: {
+        display: 'flex',
+        paddingTop: '13px',
+        width: '12px',
+        cursor: 'pointer'
+    },
+    collapsedButton: {
+        transform: 'rotate(-90deg)'
+    },
+    expandedButton: {
+        transform: 'rotate(0deg)'
+    },
+    button: {
+        transition: 'transform .15s ease',
+        width: 0,
+        height: 0,
+        borderLeft: '4px solid transparent',
+        borderRight: '4px solid transparent',
+        borderTop: '4px solid rgba(0, 0, 0, 0.54)'
+    },
+    rowTitle: {
+        flex: '1 1 auto',
+        width: 0,
+        paddingRight: '11px'
+    }
+}));

package/src/components/HierarchyPathsView/theme/tree-node-data-renderer.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import {useStyles} from './styles';
+import {omit} from 'ramda';
+import {Node} from '../types';
+
+const MIN_NODE_CONTENT_WIDTH = 250;
+
+type Props = {
+    scaffoldBlockPxWidth: number;
+    lowerSiblingCounts: number[];
+
+    node: Node;
+    children: React.ReactElement;
+    style?: Record<string, unknown>;
+};
+
+const TreeNode = (props: Props) => {
+    const {children, scaffoldBlockPxWidth, lowerSiblingCounts, node, ...otherProps} = omit(
+        [
+            'listIndex',
+            'swapFrom',
+            'swapLength',
+            'swapDepth',
+            'draggedNode',
+            'getPrevRow',
+            'connectDropTarget',
+            'isOver',
+            'canDrop',
+            'treeIndex',
+            'treeId',
+            'path',
+            'rowDirection'
+        ],
+        props
+    );
+    const styles = useStyles();
+    // Construct the scaffold representing the structure of the tree
+    const scaffoldBlockCount = lowerSiblingCounts.length;
+    const scaffold = [];
+    lowerSiblingCounts.forEach((lowerSiblingCount, i) => {
+        scaffold.push(
+            <div key={`pre_${1 + i}`} style={{width: scaffoldBlockPxWidth}} className={styles.lineBlock}>
+                {node.root && <div className={styles.rootIndex}>{node.rootIndex}.</div>}
+                {i === scaffoldBlockCount - 1 && i !== 0 && (
+                    <>
+                        <div className={styles.verticalLine} />
+                        <div className={styles.horizontalLineRight} />
+                    </>
+                )}
+            </div>
+        );
+    });
+
+    const shift = node.root ? scaffoldBlockPxWidth - 4 : 0; //4px - shifting for rootIndex
+    const scaffoldWidth = scaffoldBlockPxWidth * scaffoldBlockCount - shift;
+    const style = {left: scaffoldWidth, width: `calc(100% - ${scaffoldWidth}px`};
+    const width = `${scaffoldWidth + MIN_NODE_CONTENT_WIDTH}px`;
+    const nodeStyle = {...otherProps.style, width};
+    return (
+        <div {...otherProps} className={styles.node} style={nodeStyle}>
+            {scaffold}
+
+            <div className={styles.nodeContent} style={style}>
+                {children}
+            </div>
+        </div>
+    );
+};
+
+export default TreeNode;

package/src/components/HierarchyPathsView/types.ts

@@ -0,0 +1,17 @@
+import {Entity} from '@reltio/mdm-sdk';
+
+export type Node = {
+    entity: Partial<Entity>;
+    children: Node[];
+    nodeId: number;
+    expanded: boolean;
+    root?: boolean;
+    rootIndex?: number;
+};
+
+export type Response = {
+    entities: {
+        [key: string]: Partial<Entity>;
+    };
+    parentPaths: Array<Array<{entityUri: string}>>;
+};

package/src/components/ImageAttributeView/ImageAttributeView.tsx

@@ -0,0 +1,87 @@
+import React, {useCallback} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
+import {pathOr, path} from 'ramda';
+import i18n from 'ui-i18n';
+import Typography from '@mui/material/Typography';
+import {BasicView, DescriptionIcon, FacetViewHeader, ImageAttributesLine} from '@reltio/components';
+import {findAttributeTypeByUri, isEditableMode, ImageAttributeViewConfig} from '@reltio/mdm-sdk';
+import mdmModule, {profile, RequestNextPageOfAttributeValuesPayload} from '@reltio/mdm-module';
+import {ImageAttributeViewEditableContent} from './ImageAttributeViewEditableContent/ImageAttributeViewEditableContent';
+import {ImageLineCaption} from './ImageLineCaption/ImageLineCaption';
+import useStyles from './styles';
+
+type ImageAttributeViewProps = {
+    config: ImageAttributeViewConfig;
+    className?: string;
+};
+
+export const IMAGE_SIZE = {
+    imageMargin: 4,
+    imageWidth: 162,
+    imageHeight: 162
+};
+
+export const ImageAttributeView = ({config, className}: ImageAttributeViewProps) => {
+    const {attributeUri} = config;
+    const styles = useStyles();
+    const dispatch = useDispatch();
+
+    const mode = useSelector(mdmModule.selectors.getMode);
+    const entity = useSelector(mdmModule.selectors.getEntityWithDiff);
+    const metadata = useSelector(mdmModule.selectors.getMetadata);
+
+    const attributeType = attributeUri ? findAttributeTypeByUri(metadata, attributeUri) : null;
+    const noDataText = config['text-empty'] || i18n.text('No data found');
+
+    const requestNextPageOfAttributeValues = useCallback(
+        (payload: RequestNextPageOfAttributeValuesPayload) =>
+            dispatch(profile.actions.requestNextPageOfAttributeValues(payload)),
+        [dispatch]
+    );
+
+    const renderContent = () => {
+        if (attributeType) {
+            const entityValues = pathOr([], ['attributes', attributeType.name], entity);
+            const paging = path(['attributes', 'paging', attributeUri], entity);
+            const totalValues = entityValues.length;
+
+            if (isEditableMode(mode)) {
+                const props = {
+                    attributeType,
+                    config,
+                    paging,
+                    requestNextPageOfAttributeValues
+                };
+                return <ImageAttributeViewEditableContent {...props} />;
+            }
+
+            if (totalValues > 0) {
+                const props = {
+                    attributeValues: entityValues,
+                    attributeType,
+                    imageSize: IMAGE_SIZE,
+                    paging,
+                    parentUri: entity.uri,
+                    requestNextPageOfAttributeValues
+                };
+                return (
+                    <>
+                        <ImageAttributesLine {...props} />
+                        <ImageLineCaption totalImages={totalValues} />
+                    </>
+                );
+            }
+        }
+
+        return <Typography className={styles.noData}>{noDataText}</Typography>;
+    };
+
+    return (
+        <BasicView className={className}>
+            <FacetViewHeader title={config.caption}>
+                <DescriptionIcon description={attributeType?.description} />
+            </FacetViewHeader>
+            <div className={styles.container}>{renderContent()}</div>
+        </BasicView>
+    );
+};

package/src/components/ImageAttributeView/ImageAttributeViewEditableContent/ImageAttributeViewEditableContent.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import {useDispatch, useSelector} from 'react-redux';
+import {pipe, pathOr} from 'ramda';
+import {EditableImageAttributesLine} from '@reltio/components';
+import {AttributeType, Entity, Paging, AttributeItem, ImageAttributeViewConfig} from '@reltio/mdm-sdk';
+import mdmModule, {profile, RequestNextPageOfAttributeValuesPayload} from '@reltio/mdm-module';
+import {IMAGE_SIZE} from '../ImageAttributeView';
+import {ImageLineCaption} from '../ImageLineCaption/ImageLineCaption';
+
+type ImageAttributeViewEditableContentProps = {
+    config: ImageAttributeViewConfig;
+    attributeType: AttributeType;
+    paging?: Paging;
+    requestNextPageOfAttributeValues?: (payload: RequestNextPageOfAttributeValuesPayload) => void;
+};
+
+export const ImageAttributeViewEditableContent = ({
+    config,
+    attributeType,
+    paging,
+    requestNextPageOfAttributeValues
+}: ImageAttributeViewEditableContentProps) => {
+    const dispatch = useDispatch();
+    const entity = useSelector(mdmModule.selectors.getEntity);
+    const modifiedEntity = useSelector(
+        (state) => mdmModule.selectors.getModifiedEntity(state, entity.uri) || ({} as Entity)
+    );
+    const modifiedEntityValues = pathOr([], ['attributes', attributeType.name], modifiedEntity);
+    const viewId = config.id;
+
+    const onChangeAttribute = (params: AttributeItem) =>
+        pipe(profile.actions.modifyAttribute, dispatch)({...params, viewId});
+
+    const onDeleteAttribute = (params: AttributeItem) =>
+        pipe(profile.actions.removeAttribute, dispatch)({...params, viewId});
+
+    return (
+        <>
+            <EditableImageAttributesLine
+                attributeValues={modifiedEntityValues}
+                attributeType={attributeType}
+                onDeleteAttribute={onDeleteAttribute}
+                parentUri={modifiedEntity.uri}
+                onChangeAttribute={onChangeAttribute}
+                imageSize={IMAGE_SIZE}
+                paging={paging}
+                requestNextPageOfAttributeValues={requestNextPageOfAttributeValues}
+            />
+            <ImageLineCaption totalImages={modifiedEntityValues.length} />
+        </>
+    );
+};

package/src/components/ImageAttributeView/ImageAttributeViewEditableContent/__tests__/ImageAttributeViewEditableContent.test.tsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import * as reactRedux from 'react-redux';
+import {Mode, ImageAttributeViewConfig} from '@reltio/mdm-sdk';
+import {profile} from '@reltio/mdm-module';
+import {EditableImageAttributesLine} from '@reltio/components';
+import {ImageLineCaption} from '../../ImageLineCaption/ImageLineCaption';
+import {ImageAttributeViewEditableContent} from '../../ImageAttributeViewEditableContent/ImageAttributeViewEditableContent';
+
+const attributeType = {
+    name: 'ImageGallery',
+    type: 'Image',
+    uri: 'configuration/entityTypes/HCP/attributes/ImageGallery'
+};
+
+const config = {
+    point: 'com.reltio.plugins.ui.view',
+    id: 'com.reltio.plugins.entity.SingleImageAttributeView',
+    class: 'com.reltio.plugins.entity.attributes.ImageAttributeView',
+    caption: 'Standalone Image Attribute View',
+    attributeUri: 'configuration/entityTypes/HCP/attributes/ImageGallery',
+    max: 5
+} as ImageAttributeViewConfig;
+
+let store;
+const attributes = {
+    ImageGallery: [
+        {
+            label: '',
+            value: {},
+            ov: true,
+            uri: 'entities/1TtEwdrh/attributes/ImageGallery/5d7kixVRn',
+            type: 'configuration/entityTypes/HCP/attributes/ImageGallery'
+        },
+        {
+            label: '',
+            value: {},
+            ov: true,
+            uri: 'entities/1TtEwdrh/attributes/ImageGallery/3sNdpRKCR',
+            type: 'configuration/entityTypes/HCP/attributes/ImageGallery'
+        },
+        {
+            label: '',
+            value: {},
+            ov: true,
+            uri: 'entities/1TtEwdrh/attributes/ImageGallery/3gmC5Kk2k',
+            type: 'configuration/entityTypes/HCP/attributes/ImageGallery'
+        }
+    ]
+};
+
+const props = {
+    attributeType: attributeType,
+    config: config,
+    paging: {
+        totalOvValues: 3,
+        totalValues: 3
+    },
+    requestNextPageOfAttributeValues: jest.fn()
+};
+
+describe('ImageAttributeViewEditableContent tests', () => {
+    const dispatch = jest.fn();
+    beforeEach(() => {
+        store = {
+            profile: {
+                mode: Mode.Editing,
+                entity: {
+                    uri: 'entities/1',
+                    type: 'configuration/entityTypes/HCP',
+                    attributes: attributes
+                },
+                modifiedEntities: {
+                    'entities/1': {
+                        uri: 'entities/1',
+                        type: 'configuration/entityTypes/HCP',
+                        attributes: attributes
+                    }
+                }
+            }
+        };
+    });
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+        jest.spyOn(reactRedux, 'useDispatch').mockImplementation(() => dispatch);
+    });
+
+    it('should render main parts with props', () => {
+        const component = shallow(<ImageAttributeViewEditableContent {...props} />);
+        const editableImageLine = component.find(EditableImageAttributesLine);
+        expect(editableImageLine).toHaveLength(1);
+        expect(editableImageLine.props()).toMatchObject({
+            attributeValues: attributes.ImageGallery,
+            attributeType: attributeType,
+            paging: props.paging,
+            parentUri: 'entities/1',
+            requestNextPageOfAttributeValues: props.requestNextPageOfAttributeValues
+        });
+
+        const imageLineCaption = component.find(ImageLineCaption);
+        expect(imageLineCaption).toHaveLength(1);
+        expect(imageLineCaption.props()).toMatchObject({
+            totalImages: attributes.ImageGallery.length
+        });
+    });
+
+    it('should call edit and delete image actions', () => {
+        const component = shallow(<ImageAttributeViewEditableContent {...props} />);
+        const editableImageLine = component.find(EditableImageAttributesLine);
+
+        editableImageLine.prop('onDeleteAttribute')({
+            attributeType: attributeType,
+            uri: 'entities/1TtEwdrh/attributes/ImageGallery/5d7kixVRn'
+        });
+        expect(dispatch).toHaveBeenCalledWith(
+            profile.actions.removeAttribute({
+                attributeType: attributeType,
+                uri: 'entities/1TtEwdrh/attributes/ImageGallery/5d7kixVRn',
+                viewId: config.id
+            })
+        );
+        editableImageLine.prop('onChangeAttribute')({
+            attributeType: attributeType,
+            uri: 'entities/1TtEwdrh/attributes/ImageGallery/uri$$1644409672963',
+            value: {}
+        });
+        expect(dispatch).toHaveBeenCalledWith(
+            profile.actions.modifyAttribute({
+                attributeType: attributeType,
+                uri: 'entities/1TtEwdrh/attributes/ImageGallery/uri$$1644409672963',
+                value: {},
+                viewId: config.id
+            })
+        );
+    });
+});

package/src/components/ImageAttributeView/ImageLineCaption/ImageLineCaption.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import Typography from '@mui/material/Typography';
+import useStyles from './styles';
+
+type ImageLineCaptionProps = {
+    totalImages: number;
+};
+
+export const ImageLineCaption = ({totalImages}: ImageLineCaptionProps) => {
+    const styles = useStyles();
+    const photoWord = totalImages > 1 ? i18n.text('photos') : i18n.text('photo');
+    return (
+        <Typography variant="caption" className={styles.caption}>
+            {`${totalImages} ${photoWord}`}
+        </Typography>
+    );
+};

package/src/components/ImageAttributeView/ImageLineCaption/__tests__/ImageLineCaption.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import {ImageLineCaption} from '../ImageLineCaption';
+
+describe('ImageLineCaption tests', () => {
+    it('should render main parts', () => {
+        const component = shallow(<ImageLineCaption totalImages={10} />);
+        expect(component.find('.caption').text()).toBe('10 photos');
+    });
+
+    it('should set correct photo word', () => {
+        const component = shallow(<ImageLineCaption totalImages={1} />);
+        expect(component.find('.caption').text()).toBe('1 photo');
+    });
+});

package/src/components/ImageAttributeView/ImageLineCaption/styles.ts

@@ -0,0 +1,10 @@
+import {makeStyles} from '@mui/styles';
+
+const useStyles = makeStyles((theme) => ({
+    caption: {
+        color: theme.palette.text.secondary,
+        fontSize: '13px'
+    }
+}));
+
+export default useStyles;