@reltio/profile 1.4.1585 → 1.4.1586-mui5

package/src/components/DCRReviewPerspectiveView/index.ts

@@ -0,0 +1 @@
+export {DCRReviewPerspectiveView as default} from './DCRReviewPerspectiveView';

package/src/components/DCRReviewPerspectiveView/styles.ts

@@ -0,0 +1,33 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+    perspectiveView: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: theme.palette.background.default
+    },
+    perspectiveContainer: {
+        display: 'flex',
+        flexGrow: 1,
+        overflow: 'hidden'
+    },
+    attributesWrapper: {
+        margin: '15px',
+        flexGrow: 1,
+        overflowY: 'auto',
+        backgroundColor: '#FAFAFA'
+    },
+    contentWrapper: {
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        flexGrow: 1
+    }
+}));

package/src/components/EntityMapView/EntityMapView.tsx

@@ -0,0 +1,64 @@
+import React, {useMemo} from 'react';
+import {useSelector} from 'react-redux';
+import classnames from 'classnames';
+import mdm from '@reltio/mdm-module';
+import FullscreenIcon from '@mui/icons-material/Fullscreen';
+import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
+import {BasicView, LinearLoadIndicator, ReltioMap} from '@reltio/components';
+import {SmallIconButton} from '@reltio/components';
+
+import {AttributeViewConfig} from '@reltio/mdm-sdk';
+import {useMarkers} from './useMarkers';
+import useStyles from './styles';
+
+type EntityMapViewProps = {
+    config: AttributeViewConfig;
+    className?: string;
+    isFullscreen: boolean;
+    onToggleFullscreen: (id: string) => void;
+};
+
+export const EntityMapView = ({config, isFullscreen, onToggleFullscreen, className}: EntityMapViewProps) => {
+    const styles = useStyles();
+    const metadata = useSelector(mdm.selectors.getMetadata);
+    const entity = useSelector(mdm.selectors.getEntity);
+    const mapKey = useSelector(mdm.selectors.getGoogleMapKey);
+    const {markers, loading} = useMarkers(entity, metadata, mapKey);
+    const loadingElement = useMemo(
+        () => (
+            <div className={styles.fullHeight}>
+                <LinearLoadIndicator />
+            </div>
+        ),
+        [styles]
+    );
+
+    const defaultCenter = useMemo(() => ({lat: 0, lng: 0}), []);
+    const mapOptions = useMemo(() => ({mapTypeControl: true}), []);
+
+    return (
+        mapKey && (
+            <BasicView className={classnames(styles.root, className)}>
+                {loading && <LinearLoadIndicator />}
+                <SmallIconButton
+                    size="S"
+                    icon={isFullscreen ? FullscreenExitIcon : FullscreenIcon}
+                    onClick={() => onToggleFullscreen(config.id)}
+                    className={styles.fullscreenBtn}
+                />
+
+                <ReltioMap
+                    loadingElement={loadingElement}
+                    defaultZoom={1}
+                    defaultCenter={defaultCenter}
+                    markers={markers}
+                    mapContainerClassName={styles.fullHeight}
+                    mapKey={mapKey}
+                    mapOptions={mapOptions}
+                />
+            </BasicView>
+        )
+    );
+};
+
+export default EntityMapView;

package/src/components/EntityMapView/__tests__/EntityMapView.spec.js

@@ -0,0 +1,121 @@
+import React from 'react';
+import * as reactRedux from 'react-redux';
+import {shallow, mount} from 'enzyme';
+import {ReltioMap, LinearLoadIndicator, BasicView} from '@reltio/components';
+import {resolve} from '@reltio/mdm-sdk';
+import {asyncCheck} from '../../../../../../__mocks__/test-utils';
+import {EntityMapView} from '../EntityMapView';
+
+jest.mock('@reltio/components', () => ({
+    ...jest.requireActual('@reltio/components'),
+    ReltioMap: jest.fn()
+}));
+
+jest.mock('@reltio/mdm-sdk', () => ({
+    ...jest.requireActual('@reltio/mdm-sdk'),
+    resolve: jest.fn()
+}));
+
+describe('EntityMapView tests', () => {
+    let store, dispatch;
+    beforeEach(() => {
+        dispatch = jest.fn();
+        store = {
+            tenant: {
+                id: 't1'
+            },
+            metadata: {
+                t1: {a: 1}
+            },
+            profile: {
+                entity: {
+                    uri: 'entities/19e2Jbym',
+                    type: 'configuration/entityTypes/HCP',
+                    attributes: {}
+                }
+            },
+            ui: {
+                keys: {
+                    googleMapKey: 'someKey'
+                }
+            }
+        };
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+        jest.spyOn(reactRedux, 'useDispatch').mockImplementation(() => dispatch);
+        ReltioMap.mockImplementation(() => <div />);
+    });
+
+    it('should render ReltioMap Component with props', () => {
+        const component = shallow(<EntityMapView />);
+        const map = component.find(ReltioMap);
+        expect(map.length).toBe(1);
+        expect(map.prop('mapKey')).toBe('someKey');
+        expect(map.prop('defaultZoom')).toBe(1);
+        expect(map.prop('defaultCenter')).toEqual({lat: 0, lng: 0});
+        expect(map.prop('mapContainerClassName')).toBe('fullHeight');
+        expect(map.prop('mapOptions')).toEqual({mapTypeControl: true});
+    });
+
+    it('should not render ReltioMap if mapKey is not specified ', () => {
+        store.ui.keys.googleMapKey = undefined;
+        const component = shallow(<EntityMapView />);
+        const map = component.find(ReltioMap);
+        expect(map.length).toBe(0);
+    });
+
+    it('should load markers and show loading indicator during loading', (done) => {
+        const resolvedMarkers = [
+            {
+                entity: {
+                    uri: 'entities/19e2Jbym'
+                },
+                point: {lat: 50, lng: 50}
+            }
+        ];
+
+        resolve.mockImplementation(() => {
+            return Promise.resolve(resolvedMarkers);
+        });
+        const component = mount(<EntityMapView />);
+
+        expect(component.find(LinearLoadIndicator).length).toBe(1);
+        asyncCheck(() => {
+            component.update();
+            expect(component.find(LinearLoadIndicator).length).toBe(0);
+            expect(component.find(ReltioMap).prop('markers')).toEqual(resolvedMarkers);
+        }, done);
+    });
+
+    it('should filter markers with wrong latitude', (done) => {
+        const marker = {entity: {uri: '123'}, point: {lat: 50, lng: 50}};
+        const wrongMarker = {entity: {uri: '456'}, point: {lat: 91, lng: 170}};
+        const resolvedMarkers = [marker, wrongMarker];
+        resolve.mockImplementation(() => {
+            return Promise.resolve(resolvedMarkers);
+        });
+        const component = mount(<EntityMapView />);
+
+        asyncCheck(() => {
+            component.update();
+            expect(component.find(ReltioMap).prop('markers')).toEqual([marker]);
+        }, done);
+    });
+
+    it('should reset loading and markers if markers resolving was unsuccessful', (done) => {
+        resolve.mockReturnValue(Promise.reject());
+        const component = mount(<EntityMapView />);
+
+        expect(component.find(LinearLoadIndicator).length).toBe(1);
+        asyncCheck(() => {
+            component.update();
+            expect(component.find(LinearLoadIndicator).length).toBe(0);
+            expect(component.find(ReltioMap).prop('markers')).toEqual([]);
+        }, done);
+    });
+
+    it('should provide className to BasicView component', () => {
+        const classname = 'TestClassname';
+        const component = shallow(<EntityMapView className={classname} />);
+        expect(component.find(BasicView).prop('className')).toBe(`root ${classname}`);
+    });
+});

package/src/components/EntityMapView/styles.ts

@@ -0,0 +1,20 @@
+import {makeStyles} from '@mui/styles';
+
+const useStyles = makeStyles(() => ({
+    root: {
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column'
+    },
+    fullHeight: {
+        height: '100%'
+    },
+    fullscreenBtn: {
+        position: 'absolute',
+        right: '5px',
+        top: '5px',
+        zIndex: 100
+    }
+}));
+
+export default useStyles;

package/src/components/EntityMapView/useMarkers.ts

@@ -0,0 +1,27 @@
+import {useEffect, useState} from 'react';
+import {both, gt, lt, path, pipe} from 'ramda';
+import {Entity, GeoPoint, Metadata, resolve} from '@reltio/mdm-sdk';
+import {useSafePromise} from '@reltio/components';
+
+const filterWrongLat = pipe(path(['point', 'lat']), both(gt(90), lt(-90)));
+
+export const useMarkers = (entity: Entity, metadata: Metadata, mapKey: string) => {
+    const [markers, setMarkers] = useState<GeoPoint[]>([]);
+    const [loading, setLoading] = useState(true);
+    const safePromise = useSafePromise();
+    useEffect(() => {
+        setLoading(true);
+        safePromise(resolve(metadata, [entity], mapKey))
+            .then((markers) => {
+                setMarkers(markers.filter(filterWrongLat));
+            })
+            .catch(() => {
+                setMarkers([]);
+            })
+            .finally(() => {
+                setLoading(false);
+            });
+    }, [entity, metadata, mapKey, safePromise]);
+
+    return {markers, loading};
+};

package/src/components/HierarchyPathsView/ConfigContext.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import {HierarchyPathsViewConfig} from '@reltio/mdm-sdk';
+
+export const ConfigContext = React.createContext<HierarchyPathsViewConfig>(null);

package/src/components/HierarchyPathsView/HierarchyPathsHeader.tsx

@@ -0,0 +1,32 @@
+import React, {useContext} from 'react';
+import i18n from 'ui-i18n';
+import {FacetViewHeader, FeaturesContext, SmallIconButtonWithTooltip} from '@reltio/components';
+import ShowGraphIcon from './icons/ShowGraph.svg';
+import {useStyles} from './styles';
+
+type Props = {
+    title?: string;
+    onGraphOpen: () => void;
+};
+
+const HierarchyPathsHeader = ({title, onGraphOpen}: Props) => {
+    const styles = useStyles();
+    const {showNavigateToGraph} = useContext(FeaturesContext);
+    return (
+        <FacetViewHeader title={title} className={styles.header}>
+            {showNavigateToGraph && (
+                <div className={styles.buttonsContainer}>
+                    <SmallIconButtonWithTooltip
+                        className={styles.button}
+                        tooltipTitle={i18n.text('Show Graph')}
+                        icon={ShowGraphIcon}
+                        onClick={onGraphOpen}
+                        size="L"
+                    />
+                </div>
+            )}
+        </FacetViewHeader>
+    );
+};
+
+export default HierarchyPathsHeader;

package/src/components/HierarchyPathsView/HierarchyPathsView.tsx

@@ -0,0 +1,90 @@
+import React, {useCallback, useContext, useEffect, useMemo} from 'react';
+import ReactResizeDetector from 'react-resize-detector';
+import {useDispatch, useSelector} from 'react-redux';
+import {BasicView, FeaturesContext, LinearLoadIndicator, ReactSortableTree} from '@reltio/components';
+import mdmModule, {ui} from '@reltio/mdm-module';
+import Typography from '@mui/material/Typography';
+import {useLoadPaths} from './hooks/useLoadPaths';
+import {Node} from './Node';
+import {useStyles} from './styles';
+import {ConfigContext} from './ConfigContext';
+import {HierarchyPathsViewConfig} from '@reltio/mdm-sdk';
+import {getNodeKey} from './helpers';
+import {theme} from './theme';
+import HierarchyPathsHeader from './HierarchyPathsHeader';
+import {useDynamicNodesHeights} from './hooks/useDynamicNodesHeights';
+
+type Props = {
+    className?: string;
+    config: HierarchyPathsViewConfig;
+};
+
+export const HierarchyPathsView = ({config, className}: Props) => {
+    const {id, caption, graph, _showNavigateToGraph} = config;
+    const graphType = graph?.type;
+
+    const styles = useStyles();
+    const dispatch = useDispatch();
+    const entityUri = useSelector(mdmModule.selectors.getEntityUri);
+
+    const {treeData, setTreeData, errorMessage, isLoading} = useLoadPaths(entityUri, graphType);
+    const {onResize, getRowHeight, clearHeightsCache} = useDynamicNodesHeights();
+
+    const featuresContext = useContext(FeaturesContext);
+    const showNavigateToGraph =
+        _showNavigateToGraph !== undefined ? _showNavigateToGraph : featuresContext.showNavigateToGraph;
+    const features = useMemo(() => ({...featuresContext, showNavigateToGraph}), [showNavigateToGraph, featuresContext]);
+
+    const openGraph = useCallback(() => {
+        dispatch(ui.actions.openGraph({viewId: id, graphType, entityUri}));
+    }, [dispatch, id, graphType, entityUri]);
+
+    const generateNodeProps = useCallback(
+        (rowInfo) => ({
+            title: (
+                <ReactResizeDetector
+                    handleHeight
+                    refreshMode="debounce"
+                    refreshRate={100}
+                    onResize={onResize(rowInfo.node)}
+                >
+                    <Node node={rowInfo.node} />
+                </ReactResizeDetector>
+            )
+        }),
+        [onResize]
+    );
+
+    useEffect(() => {
+        clearHeightsCache();
+    }, [clearHeightsCache, entityUri]);
+
+    return (
+        <FeaturesContext.Provider value={features}>
+            <BasicView className={className}>
+                <HierarchyPathsHeader onGraphOpen={openGraph} title={caption} />
+                {isLoading && <LinearLoadIndicator className={styles.linearIndicator} />}
+                <ConfigContext.Provider value={config}>
+                    <div className={styles.treeContainer}>
+                        <div className={styles.tree}>
+                            {!errorMessage ? (
+                                <ReactSortableTree
+                                    isVirtualized={false}
+                                    treeData={treeData}
+                                    canDrag={false}
+                                    theme={theme}
+                                    generateNodeProps={generateNodeProps}
+                                    onChange={setTreeData}
+                                    getNodeKey={getNodeKey}
+                                    rowHeight={getRowHeight}
+                                />
+                            ) : (
+                                <Typography className={styles.errorMessage}>{errorMessage}</Typography>
+                            )}
+                        </div>
+                    </div>
+                </ConfigContext.Provider>
+            </BasicView>
+        </FeaturesContext.Provider>
+    );
+};

package/src/components/HierarchyPathsView/Node.tsx

@@ -0,0 +1,62 @@
+import React, {memo, useContext, useState} from 'react';
+import classnames from 'classnames';
+import {useSelector} from 'react-redux';
+import {HierarchyNodeTitle} from '@reltio/components';
+import {getAbsoluteImageUrl, getEntityType, getPropWithInheritance, getLabel} from '@reltio/mdm-sdk';
+import mdm from '@reltio/mdm-module';
+import Avatar from '@mui/material/Avatar';
+import {useStyles} from './styles';
+import DEFAULT_ICON from './defaultTypeIcon.png';
+import {ConfigContext} from './ConfigContext';
+import {Node as NodeType} from './types';
+
+const onImageLoadFail = (e) => {
+    e.target.src = DEFAULT_ICON;
+};
+
+type Props = {
+    node?: NodeType;
+};
+
+export const Node = ({node}: Props) => {
+    const {
+        entity: {uri},
+        nodeId
+    } = node;
+    const title = getLabel(node.entity.label);
+
+    const styles = useStyles();
+    const absoluteImagePath = useSelector(mdm.selectors.getAbsoluteImagePath);
+    const metadata = useSelector(mdm.selectors.getMetadata);
+    const {uri: currentEntityUri} = useSelector(mdm.selectors.getEntity);
+
+    const [popperAnchor, setPopperAnchor] = useState<HTMLElement>();
+    const config = useContext(ConfigContext);
+
+    const isSelected = uri === currentEntityUri;
+    const entityType = getEntityType(metadata, node.entity.type);
+    const entityTypeGraphIcon = entityType ? getPropWithInheritance(metadata, entityType, 'typeGraphIcon') : null;
+    const icon = entityTypeGraphIcon && getAbsoluteImageUrl(absoluteImagePath, entityTypeGraphIcon);
+
+    return (
+        <div className={styles.wrapper} data-node-id={nodeId}>
+            <div ref={setPopperAnchor} className={styles.container}>
+                <Avatar
+                    alt="Node icon"
+                    className={classnames(styles.avatar)}
+                    src={icon || DEFAULT_ICON}
+                    onError={onImageLoadFail}
+                />
+                <HierarchyNodeTitle
+                    isSelected={isSelected}
+                    title={title}
+                    entityUri={uri}
+                    viewId={config.id}
+                    anchorEl={popperAnchor}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default memo(Node);