@reltio/profile 1.4.1585 → 1.4.1586-mui5

package/src/components/RightSidePanel/styles.ts

@@ -0,0 +1,21 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    wrapper: {
+        display: 'flex',
+        overflow: 'hidden',
+        flexShrink: 0,
+        marginLeft: '3px',
+        height: '100%'
+    },
+    badge: {
+        fontSize: '12px',
+        height: '18px',
+        minWidth: '18px',
+        backgroundColor: '#FF4081',
+        color: '#FFF'
+    },
+    badgePosition: {
+        right: '5px'
+    }
+});

package/src/components/Sandbox/CustomView.tsx

@@ -0,0 +1,59 @@
+import React, {useRef, useEffect, useState} from 'react';
+import {useAPI} from '@reltio/components';
+import {CustomActionViewConfig} from '@reltio/mdm-sdk';
+import Tooltip from '@mui/material/Tooltip';
+import Dialog from '@mui/material/Dialog';
+import {isNil, reject} from 'ramda';
+import classnames from 'classnames';
+import {useStyles} from './styles';
+
+type Props = {
+    config: CustomActionViewConfig;
+    className?: string;
+};
+
+export const CustomView = ({config, className}: Props) => {
+    const basicViewRef = useRef<HTMLDivElement>();
+    const dialogRef = useRef<HTMLDivElement>();
+    const [showModal, setShowModal] = useState<boolean>(false);
+    const {height, width, tooltip: defaultTooltip} = config;
+    const {html, visible, tooltip: updatedTooltip, customStyles, popup} = useAPI(config);
+    const styles = useStyles();
+    const tooltip = updatedTooltip || defaultTooltip;
+    useEffect(() => {
+        if (basicViewRef.current && html) {
+            basicViewRef.current.innerHTML = '';
+            Array.from(html.childNodes).forEach((child) => {
+                basicViewRef.current.appendChild(child);
+            });
+        }
+    }, [html]);
+    useEffect(() => {
+        setShowModal(!!popup);
+    }, [popup]);
+
+    useEffect(() => {
+        if (showModal && dialogRef.current) {
+            dialogRef.current.innerHTML = '';
+            if (popup) {
+                Array.from(popup.childNodes).forEach((child) => {
+                    dialogRef.current.appendChild(child);
+                });
+            }
+        }
+    }, [showModal, popup]);
+
+    const style: {width?: number; height?: number} = reject(isNil, {width, height});
+    return visible ? (
+        <div className={styles.bodyWrapper}>
+            <Dialog ref={dialogRef} open={!!popup} />
+            <Tooltip title={tooltip || ''}>
+                <div
+                    ref={basicViewRef}
+                    style={{...style, ...customStyles}}
+                    className={classnames(styles.root, className)}
+                />
+            </Tooltip>
+        </div>
+    ) : null;
+};

package/src/components/Sandbox/__tests__/CustomView.test.tsx

@@ -0,0 +1,294 @@
+import React from 'react';
+import {act} from 'react-dom/test-utils';
+import * as reactRedux from 'react-redux';
+import {CustomAction, CustomActionTask, CustomActionViewConfig, initializeWebWorker} from '@reltio/mdm-sdk';
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {CustomView} from '../CustomView';
+
+jest.mock('@reltio/mdm-sdk', () => {
+    const mdmSdk = jest.requireActual('@reltio/mdm-sdk');
+    return {
+        ...mdmSdk,
+        initializeWebWorker: jest.fn()
+    };
+});
+
+const createStore = (withWorkflowPath = true) => {
+    return {
+        profile: {
+            entity: {uri: 'entities/mnGg0XB'}
+        },
+        metadata: {
+            alenat: {
+                uri: 'configuration',
+                description: 'some desc'
+            }
+        },
+        tenant: {
+            id: 'alenat'
+        },
+        ui: {
+            paths: {
+                apiPath: 'https://tst-01.reltio.com/reltio',
+                uiPath: 'https://tst-01.reltio.com/nui/alenat/',
+                workflowPath: withWorkflowPath ? 'https://tst-01-workflow.reltio.com/workflow-adapter' : null
+            }
+        },
+        user: {
+            username: 'alexey.starodubtsev'
+        },
+        search: {
+            searchProviderData: {
+                type: 'search',
+                data: {
+                    query: 'some search'
+                }
+            }
+        }
+    };
+};
+
+const createConfig = (tooltip?: string) =>
+    ({
+        point: 'com.reltio.plugins.ui.view',
+        id: 'com.reltio.plugins.entity.Anton03',
+        height: 200,
+        width: 400,
+        caption: 'Hey3!',
+        tooltip,
+        class: 'com.reltio.plugins.ui.CustomActionView',
+        action: {
+            files: ['https://reltio-ui-files.s3.amazonaws.com/custom-scripts/test/anton03.js']
+        }
+    } as CustomActionViewConfig);
+
+const mockStore = (store = createStore()) => {
+    jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+    jest.spyOn(reactRedux, 'useDispatch').mockImplementation(jest.fn());
+};
+
+const getStyles = (container) => {
+    const {getComputedStyle} = container.ownerDocument.defaultView;
+    return getComputedStyle(container);
+};
+
+describe('custom sandbox view', () => {
+    let postMessage;
+    let onmessageFromWorker: (task: CustomActionTask) => void;
+    beforeEach(() => {
+        jest.clearAllMocks();
+        postMessage = jest.fn();
+        (initializeWebWorker as jest.Mock).mockImplementation((workerUrl, process) => {
+            const worker = {
+                postMessage,
+                onmessageerror: jest.fn(),
+                onerror: jest.fn(),
+                onmessage: jest.fn(),
+                dispatchEvent: jest.fn(),
+                addEventListener: jest.fn(),
+                terminate: jest.fn(),
+                removeEventListener: jest.fn()
+            };
+            onmessageFromWorker = (task) => process({task, worker});
+            return worker;
+        });
+    });
+
+    it('should render custom html', () => {
+        mockStore();
+        const {container} = render(<CustomView config={createConfig()} />);
+        const html = '<div id="test">something</div>';
+        expect(container.querySelector('#test')).toBeNull();
+        act(() => {
+            onmessageFromWorker({action: CustomAction.SET_HTML, params: {html}});
+        });
+
+        expect(container.querySelector('#test')).not.toBeNull();
+        const {width, height} = getStyles(container.querySelector('div.root'));
+        expect(width).toBe('400px');
+        expect(height).toBe('200px');
+    });
+
+    it('should be wrapped in custom div', () => {
+        mockStore();
+        const {container} = render(<CustomView config={createConfig()} />);
+        expect(container.querySelector('div.bodyWrapper')).not.toBeNull();
+    });
+
+    it('should not render custom html if visible false', () => {
+        mockStore();
+        const {container} = render(<CustomView config={createConfig()} />);
+        const html = '<div id="test">something</div>';
+        act(() => {
+            onmessageFromWorker({action: CustomAction.SET_HTML, params: {html}});
+        });
+        act(() => {
+            onmessageFromWorker({action: CustomAction.SET_VISIBILITY, params: 'hidden'});
+        });
+        act(() => {
+            onmessageFromWorker({action: CustomAction.SET_VISIBILITY, params: 'visible'});
+        });
+        expect(container.querySelector('#test')).not.toBeNull();
+    });
+
+    it('should reset listeners correctly', async () => {
+        mockStore();
+        const user = userEvent.setup();
+        const {container} = render(<CustomView config={createConfig()} />);
+        const html = '<div ui-actions="click" id="test">something</div>';
+        act(() => {
+            onmessageFromWorker({action: CustomAction.SET_HTML, params: {html}});
+        });
+        act(() => {
+            onmessageFromWorker({action: CustomAction.SET_VISIBILITY, params: 'visible'});
+        });
+        act(() => {
+            onmessageFromWorker({action: CustomAction.SET_VISIBILITY, params: 'visible'});
+        });
+        await user.click(container.querySelector('#test'));
+        expect(postMessage).toHaveBeenLastCalledWith({
+            action: 'event',
+            type: 'uiAction',
+            data: expect.objectContaining({
+                id: 'test',
+                type: 'click'
+            })
+        });
+    });
+
+    it('should not render Tooltip by default', async () => {
+        mockStore();
+        const user = userEvent.setup();
+        const {container} = render(<CustomView config={createConfig()} />);
+        const html = '<div id="test">something</div>';
+        act(() => {
+            onmessageFromWorker({action: CustomAction.SET_HTML, params: {html}});
+        });
+
+        await user.hover(container.querySelector('#test'));
+        let error;
+        try {
+            await screen.findByRole('tooltip');
+        } catch (e) {
+            error = e;
+        }
+        expect(error).toBeDefined();
+    });
+
+    it('should render Tooltip if component has tooltip', async () => {
+        mockStore();
+        const user = userEvent.setup();
+        const {container} = render(<CustomView config={createConfig('tooltip')} />);
+        const html = '<div id="test">something</div>';
+        act(() => {
+            onmessageFromWorker({action: CustomAction.SET_HTML, params: {html}});
+        });
+
+        await user.hover(container.querySelector('#test'));
+        act(() => {
+            onmessageFromWorker({action: CustomAction.SET_TOOLTIP, params: 'new tooltip'});
+        });
+        const tooltip = await screen.findByText('new tooltip');
+        expect(tooltip).toBeDefined();
+    });
+
+    it('should render Tooltip if catch message with tooltip', async () => {
+        mockStore();
+        const user = userEvent.setup();
+        const {container} = render(<CustomView config={createConfig()} />);
+        const html = '<div id="test">something</div>';
+        act(() => {
+            onmessageFromWorker({action: CustomAction.SET_HTML, params: {html}});
+        });
+
+        await user.hover(container.querySelector('#test'));
+        act(() => {
+            onmessageFromWorker({action: CustomAction.SET_TOOLTIP, params: 'new tooltip'});
+        });
+        const tooltip = await screen.findByText('new tooltip');
+        expect(tooltip).toBeDefined();
+    });
+
+    it('should render styles from hook useAPI', () => {
+        mockStore();
+
+        const {container} = render(<CustomView config={createConfig()} />);
+        const html = '<div id="test">something</div>';
+        expect(container.querySelector('#test')).toBeNull();
+        act(() => {
+            onmessageFromWorker({action: CustomAction.SET_HTML, params: {html}});
+        });
+
+        expect(container.querySelector('#test')).not.toBeNull();
+        expect(getStyles(container.querySelector('div.root'))).toMatchObject({
+            width: '400px',
+            height: '200px'
+        });
+
+        act(() => {
+            onmessageFromWorker({action: CustomAction.SET_WIDTH, params: 600});
+        });
+        expect(getStyles(container.querySelector('div.root'))).toMatchObject({
+            width: '600px',
+            height: '200px'
+        });
+        act(() => {
+            onmessageFromWorker({action: CustomAction.SET_HEIGHT, params: 100});
+        });
+
+        expect(getStyles(container.querySelector('div.root'))).toMatchObject({
+            width: '600px',
+            height: '100px'
+        });
+        act(() => {
+            onmessageFromWorker({action: CustomAction.SET_ENABLED, params: false});
+        });
+        expect(getStyles(container.querySelector('div.root'))).toMatchObject({
+            width: '600px',
+            height: '100px',
+            'pointer-events': 'none'
+        });
+
+        act(() => {
+            onmessageFromWorker({action: CustomAction.SET_ENABLED, params: true});
+        });
+        expect(getStyles(container.querySelector('div.root'))).toMatchObject({
+            width: '600px',
+            height: '100px'
+        });
+    });
+
+    it('should show and hide custom dialog from api', () => {
+        mockStore();
+        const {baseElement} = render(<CustomView config={createConfig()} />);
+        const html = '<div id="testDialog">Popup</div>';
+        act(() => {
+            onmessageFromWorker({action: CustomAction.SHOW_POPUP, params: html});
+        });
+        expect(baseElement.querySelector('#testDialog')).not.toBeNull();
+        act(() => {
+            onmessageFromWorker({action: CustomAction.HIDE_POPUP, params: {}});
+        });
+        expect(baseElement.querySelector('#testDialog')).toBeNull();
+    });
+
+    it('should execute actions', async () => {
+        mockStore();
+        const user = userEvent.setup();
+        const {baseElement} = render(<CustomView config={createConfig()} />);
+        const html = '<div ui-actions="click" id="testDialog" >Popup</div>';
+        act(() => {
+            onmessageFromWorker({action: CustomAction.SHOW_POPUP, params: html});
+        });
+        await user.click(baseElement.querySelector('#testDialog'));
+        expect(postMessage).toHaveBeenCalledWith({
+            action: 'event',
+            type: 'uiAction',
+            data: expect.objectContaining({
+                id: 'testDialog',
+                type: 'click'
+            })
+        });
+    });
+});

package/src/components/Sandbox/styles.ts

@@ -0,0 +1,10 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles(() => ({
+    root: {
+        position: 'relative'
+    },
+    bodyWrapper: {
+        paddingTop: '21px'
+    }
+}));

package/src/components/TagPerspectiveView/TagPerspectiveView.tsx

@@ -0,0 +1,79 @@
+import React, {memo, useEffect, useRef, useState} from 'react';
+import {useSelector} from 'react-redux';
+import classnames from 'classnames';
+import mdmModule from '@reltio/mdm-module';
+import {GlobalSearchRequestOptions} from '@reltio/mdm-sdk';
+import {BasicTablePagination, BasicView, LinearLoadIndicator, ProfilesList} from '@reltio/components';
+import {TagListHeader} from './components/TagListHeader';
+import {TagProfileBand} from './components/TagProfileBand';
+import {useTag} from './hooks/useTag';
+
+import {useStyles} from './styles';
+
+const ROWS_PER_PAGE_OPTIONS = [25, 50, 100];
+
+type Props = {
+    tag?: string;
+    entityUri?: string;
+};
+
+const TagPerspectiveView = memo(({tag, entityUri}: Props) => {
+    const styles = useStyles();
+
+    const [rowsPerPage, setRowsPerPage] = useState(ROWS_PER_PAGE_OPTIONS[0]);
+    const [page, setPage] = useState(0);
+
+    const globalSearchRequestOptions: GlobalSearchRequestOptions = useSelector(
+        mdmModule.selectors.getGlobalSearchRequestOptions
+    );
+
+    useEffect(() => {
+        setPage(0);
+    }, [tag, entityUri, globalSearchRequestOptions]);
+
+    const {isLoading, total, entities} = useTag({tag, entityUri, page, rowsPerPage});
+    const refScrollBlock = useRef(null);
+
+    useEffect(() => {
+        if (refScrollBlock.current) {
+            refScrollBlock.current.scrollTop = 0;
+        }
+    }, [entities]);
+
+    const hasPagination = total > ROWS_PER_PAGE_OPTIONS[0];
+
+    return (
+        <div className={styles.perspectiveView}>
+            <TagProfileBand label={tag} />
+            <div className={classnames(styles.tagsContainer, {[styles.fullHeight]: hasPagination})}>
+                <BasicView className={styles.tagsView}>
+                    <TagListHeader total={total} />
+                    <div className={styles.listContainer}>
+                        {isLoading && <LinearLoadIndicator />}
+                        {total > 0 && (
+                            <div className={styles.entitiesList} ref={refScrollBlock}>
+                                <ProfilesList entities={entities} />
+                            </div>
+                        )}
+                        {hasPagination && (
+                            <div className={styles.pagination}>
+                                <BasicTablePagination
+                                    count={total}
+                                    rowsPerPageOptions={ROWS_PER_PAGE_OPTIONS}
+                                    rowsPerPage={rowsPerPage}
+                                    page={page}
+                                    onChangePage={setPage}
+                                    onChangeRowsPerPage={setRowsPerPage}
+                                />
+                            </div>
+                        )}
+                    </div>
+                </BasicView>
+            </div>
+        </div>
+    );
+});
+
+TagPerspectiveView.displayName = 'TagPerspectiveView';
+
+export {TagPerspectiveView};

package/src/components/TagPerspectiveView/__tests__/TagPerspectiveView.test.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import {act} from 'react-dom/test-utils';
+import * as reactRedux from 'react-redux';
+import mdmModule from '@reltio/mdm-module';
+import {ActivityFilter, Entity} from '@reltio/mdm-sdk';
+import {BasicTablePagination, BasicView, EmptyStub, LinearLoadIndicator, ProfilesList} from '@reltio/components';
+import {TagProfileBand} from '../components/TagProfileBand';
+import {TagListHeader} from '../components/TagListHeader';
+import * as tags from '../hooks/useTag';
+import {TagPerspectiveView} from '../TagPerspectiveView';
+import {useTag} from '../hooks/useTag';
+
+jest.mock('../components/TagProfileBand', () => ({
+    TagProfileBand: jest.fn()
+}));
+jest.mock('../components/TagListHeader', () => ({
+    TagListHeader: jest.fn()
+}));
+jest.mock('@reltio/components', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/components'),
+    BasicTablePagination: () => null,
+    ProfilesList: () => null
+}));
+
+describe('TagPerspectiveView tests', () => {
+    const props = {
+        tag: 'tagName',
+        entityUri: 'entities/entityUri'
+    };
+    const useTagMock = {
+        isLoading: false,
+        total: 100,
+        entities: [{uri: 'uri1'}, {uri: 'uri2'}, {uri: 'uri3'}] as Entity[]
+    };
+
+    const GLOBAL_SEARCH_OPTIONS = {activityFilter: ActivityFilter.ALL, globalFilter: '', searchOptions: ''};
+
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector({}));
+        jest.spyOn(mdmModule.selectors, 'getGlobalSearchRequestOptions').mockReturnValue(GLOBAL_SEARCH_OPTIONS);
+        (TagProfileBand as unknown as jest.Mock).mockImplementation(EmptyStub);
+        (TagListHeader as unknown as jest.Mock).mockImplementation(EmptyStub);
+    });
+
+    beforeEach(() => {
+        jest.spyOn(tags, 'useTag').mockReturnValue(useTagMock);
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should render main parts', () => {
+        const view = mount(<TagPerspectiveView {...props} />);
+
+        const tagProfileBand = view.find(TagProfileBand);
+        expect(tagProfileBand).toHaveLength(1);
+        expect(tagProfileBand.props()).toEqual({label: props.tag});
+
+        const entitiesView = view.find(BasicView);
+        expect(entitiesView).toHaveLength(1);
+
+        const tagListHeader = entitiesView.find(TagListHeader);
+        expect(tagListHeader).toHaveLength(1);
+        expect(tagListHeader.props()).toEqual({total: useTagMock.total});
+
+        expect(entitiesView.find(LinearLoadIndicator)).toHaveLength(0);
+
+        const profilesList = entitiesView.find(ProfilesList);
+        expect(profilesList).toHaveLength(1);
+        expect(profilesList.props()).toEqual({entities: useTagMock.entities});
+
+        const pagination = entitiesView.find(BasicTablePagination);
+        expect(pagination).toHaveLength(1);
+        expect(pagination.props()).toMatchObject({
+            count: useTagMock.total,
+            rowsPerPageOptions: [25, 50, 100],
+            rowsPerPage: 25,
+            page: 0
+        });
+    });
+
+    it('should render loading state', () => {
+        useTagMock.isLoading = true;
+        const view = mount(<TagPerspectiveView {...props} />);
+        expect(view.find(LinearLoadIndicator)).toHaveLength(1);
+    });
+
+    it('should not show ProfilesList and BasicTablePagination if total is 0', () => {
+        useTagMock.total = 0;
+        const view = mount(<TagPerspectiveView {...props} />);
+        expect(view.find(TagListHeader).prop('total')).toBe(0);
+        expect(view.find(ProfilesList)).toHaveLength(0);
+        expect(view.find(BasicTablePagination)).toHaveLength(0);
+    });
+
+    it('should not show BasicTablePagination if total less than rowsPerPage', () => {
+        useTagMock.total = 10;
+        const view = mount(<TagPerspectiveView {...props} />);
+        expect(view.find(TagListHeader).prop('total')).toBe(10);
+        expect(view.find(ProfilesList)).toHaveLength(1);
+        expect(view.find(BasicTablePagination)).toHaveLength(0);
+    });
+
+    it('should scroll to top when entities changes', () => {
+        useTagMock.total = 100;
+        const view = mount(<TagPerspectiveView {...props} />);
+        const scrollWrapper = view.find('.entitiesList').getDOMNode();
+        scrollWrapper.scrollTop = 1000;
+        useTagMock.entities = [{uri: 'newUri'}] as Entity[];
+        act(() => {
+            view.find(BasicTablePagination).prop('onChangePage')(1);
+        });
+        view.update();
+        expect(scrollWrapper.scrollTop).toBe(0);
+    });
+
+    it('should set page to 0 if tag was updated', () => {
+        const newTag = 'new name';
+        useTagMock.total = 100;
+        const view = mount(<TagPerspectiveView {...props} />);
+
+        act(() => {
+            view.find(BasicTablePagination).prop('onChangePage')(1);
+        });
+        expect(useTag).toHaveBeenCalledWith({tag: props.tag, entityUri: props.entityUri, page: 1, rowsPerPage: 25});
+
+        view.setProps({tag: newTag});
+        expect(useTag).toHaveBeenCalledWith({tag: newTag, entityUri: props.entityUri, page: 0, rowsPerPage: 25});
+    });
+
+    it('should set page to 0 if entityUri was updated', () => {
+        const newEntityUri = 'entities/newUri';
+        useTagMock.total = 100;
+        const view = mount(<TagPerspectiveView {...props} />);
+
+        act(() => {
+            view.find(BasicTablePagination).prop('onChangePage')(1);
+        });
+        expect(useTag).toHaveBeenCalledWith({tag: props.tag, entityUri: props.entityUri, page: 1, rowsPerPage: 25});
+
+        view.setProps({entityUri: newEntityUri});
+        expect(useTag).toHaveBeenCalledWith({tag: props.tag, entityUri: newEntityUri, page: 0, rowsPerPage: 25});
+    });
+});

package/src/components/TagPerspectiveView/components/TagListHeader/TagListHeader.tsx

@@ -0,0 +1,48 @@
+import React, {useCallback, useContext} from 'react';
+import {useDispatch} from 'react-redux';
+import i18n from 'ui-i18n';
+import {ui as mdmModuleUi} from '@reltio/mdm-module';
+import {FacetViewHeader, Spacer, ViewIdContext} from '@reltio/components';
+import Link from '@mui/material/Link';
+import ArrowForwardIosRoundedIcon from '@mui/icons-material/ArrowForwardIosRounded';
+import Typography from '@mui/material/Typography';
+
+import {useStyles} from './styles';
+
+type Props = {
+    total?: number;
+};
+
+export const TagListHeader = ({total = 0}: Props) => {
+    const styles = useStyles();
+    const dispatch = useDispatch();
+
+    const viewId = useContext(ViewIdContext);
+
+    const switchToProfile = useCallback(() => {
+        dispatch(mdmModuleUi.actions.openPerspective({perspectiveId: 'profile', viewId}));
+    }, [dispatch, viewId]);
+
+    return (
+        <FacetViewHeader title="">
+            <div className={styles.titleContainer}>
+                <Link
+                    component="button"
+                    variant="caption"
+                    className={styles.link}
+                    onClick={switchToProfile}
+                    underline="none"
+                >
+                    {i18n.text('Profile')}
+                </Link>
+                <ArrowForwardIosRoundedIcon className={styles.icon} />
+                {i18n.text('Tags')}
+            </div>
+            <Spacer />
+            <Typography className={styles.totalCaption} variant="caption">
+                <span className={styles.totalNumber}>{i18n.number(total, '0,0')}</span>
+                {i18n.text('total profiles')}
+            </Typography>
+        </FacetViewHeader>
+    );
+};