@reltio/profile 1.4.1585 → 1.4.1586-mui5

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import * as reactRedux from 'react-redux';
+import Link from '@mui/material/Link';
+import {BasicViewHeader, ViewIdContext} from '@reltio/components';
+import {TagListHeader} from '../TagListHeader';
+import {act} from 'react-dom/test-utils';
+import {ui as mdmModuleUi} from '@reltio/mdm-module';
+
+describe('TagListHeader tets', () => {
+    const id = 'TestId';
+    let dispatch;
+    beforeEach(() => {
+        dispatch = jest.fn();
+        jest.spyOn(reactRedux, 'useDispatch').mockImplementation(() => dispatch);
+    });
+
+    it('should render main parts', () => {
+        const component = mount(
+            <ViewIdContext.Provider value={id}>
+                <TagListHeader />
+            </ViewIdContext.Provider>
+        );
+        expect(component.find(BasicViewHeader)).toHaveLength(1);
+        const profileButton = component.find(Link);
+        expect(profileButton).toHaveLength(1);
+        expect(profileButton.text()).toBe('Profile');
+        expect(component.find('.titleContainer').text()).toContain('Tags');
+        expect(component.find('.totalCaption').at(0).text()).toEqual('0total profiles');
+    });
+
+    it('should provide total', () => {
+        const total = 50;
+        const component = mount(
+            <ViewIdContext.Provider value={id}>
+                <TagListHeader total={total} />
+            </ViewIdContext.Provider>
+        );
+
+        expect(component.find('.totalNumber').text()).toEqual(`${total}`);
+    });
+
+    it('should dispatch openPerspective after click on Profile', () => {
+        const total = 50;
+        const component = mount(
+            <ViewIdContext.Provider value={id}>
+                <TagListHeader total={total} />
+            </ViewIdContext.Provider>
+        );
+
+        const profileButton = component.find(Link);
+        act(() => {
+            profileButton.find('button').simulate('click');
+        });
+
+        expect(dispatch).toHaveBeenCalledWith(
+            mdmModuleUi.actions.openPerspective({perspectiveId: 'profile', viewId: id})
+        );
+    });
+});

package/src/components/TagPerspectiveView/components/TagListHeader/index.ts

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

package/src/components/TagPerspectiveView/components/TagListHeader/styles.ts

@@ -0,0 +1,36 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+    titleContainer: {
+        overflow: 'hidden',
+        fontSize: '16px',
+        fontWeight: 'normal',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        alignItems: 'center',
+        display: 'flex',
+        minHeight: '48px',
+        color: theme.palette.text.secondary
+    },
+    link: {
+        fontSize: '16px',
+        fontWeight: 'normal'
+    },
+    icon: {
+        height: '18px',
+        color: theme.palette.text.secondary
+    },
+    totalCaption: {
+        lineHeight: 'inherit',
+        fontSize: '14px',
+        color: 'rgba(0,0,0,0.6)',
+        flexShrink: 0,
+        marginRight: '5px'
+    },
+    totalNumber: {
+        fontSize: '16px',
+        color: 'rgba(0,0,0,0.87)',
+        marginRight: '5px',
+        fontWeight: 500
+    }
+}));

package/src/components/TagPerspectiveView/components/TagProfileBand/TagProfileBand.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import TagIcon from '@mui/icons-material/LocalOffer';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import {useStyles} from './styles';
+
+type Props = {
+    label: string;
+};
+
+export const TagProfileBand = ({label}: Props) => {
+    const styles = useStyles();
+    return (
+        <Toolbar className={styles.toolbar}>
+            <TagIcon className={styles.avatar} />
+            <Typography variant="h6" className={styles.label}>
+                {label}
+            </Typography>
+        </Toolbar>
+    );
+};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import TagIcon from '@mui/icons-material/LocalOffer';
+import {TagProfileBand} from '../TagProfileBand';
+
+describe('TagProfileBand tests', () => {
+    it('should render main parts', () => {
+        const label = 'Tag label';
+        const component = shallow(<TagProfileBand label={label} />);
+
+        expect(component.find(TagIcon)).toHaveLength(1);
+        expect(component.find('.label').text()).toBe(label);
+    });
+});

package/src/components/TagPerspectiveView/components/TagProfileBand/index.ts

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

package/src/components/TagPerspectiveView/components/TagProfileBand/styles.ts

@@ -0,0 +1,24 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+    toolbar: {
+        display: 'flex',
+        flexShrink: 0,
+        background: 'white',
+        borderBottom: '1px solid rgba(0,0,0,0.1)',
+        boxSizing: 'border-box',
+        paddingLeft: '16px'
+    },
+    avatar: {
+        color: 'rgba(0, 0, 0, 0.38)',
+        marginRight: '12px'
+    },
+    label: {
+        fontSize: '20px',
+        letterSpacing: '0.25px',
+        lineHeight: '1.2',
+        fontWeight: 500,
+        color: theme.palette.text.primary,
+        wordBreak: 'break-word'
+    }
+}));

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

@@ -0,0 +1,166 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import * as reactRedux from 'react-redux';
+import {act} from 'react-dom/test-utils';
+import {ui} from '@reltio/mdm-module';
+import {getRequestErrorMessage} from '@reltio/mdm-sdk';
+import {useTag} from '../useTag';
+import * as useTagsProviderHook from '../useTagsProvider';
+
+describe('useTag tests', () => {
+    const TestComponent = ({
+        tag,
+        entityUri,
+        page,
+        rowsPerPage
+    }: {
+        tag: string;
+        entityUri: string;
+        page: number;
+        rowsPerPage: number;
+    }) => {
+        const {isLoading, total, entities} = useTag({tag, entityUri, page, rowsPerPage});
+        return <div data-test={{isLoading, total, entities}} />;
+    };
+    const getHookValues = (component) => component.find('div').prop('data-test');
+
+    const dispatch = jest.fn();
+    let useTagsProviderSpy, tagsProvider;
+    const entities = [{uri: 'entities/123'}, {uri: 'entities/12'}, {uri: 'entities/1'}];
+    const total = 3;
+
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useDispatch').mockImplementation(() => dispatch);
+
+        tagsProvider = {
+            requestEntities: jest.fn().mockReturnValue(Promise.resolve(entities)),
+            requestTotal: jest.fn().mockReturnValue(Promise.resolve(total))
+        };
+        useTagsProviderSpy = jest.spyOn(useTagsProviderHook, 'useTagsProvider').mockReturnValue(tagsProvider);
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    const props = {
+        tag: 'tagName',
+        entityUri: 'entities/entityUri',
+        page: 0,
+        rowsPerPage: 25
+    };
+
+    it('should call requestEntities and requestTotal on mount', async () => {
+        let component;
+        await act(async () => {
+            component = mount(<TestComponent {...props} />);
+        });
+        component.update();
+
+        expect(useTagsProviderSpy).toHaveBeenCalledWith({entityUri: props.entityUri, tag: props.tag});
+        expect(tagsProvider.requestTotal).toHaveBeenCalledWith();
+        expect(tagsProvider.requestEntities).toHaveBeenCalledWith(props.rowsPerPage, props.page * props.rowsPerPage);
+
+        expect(getHookValues(component).isLoading).toBe(false);
+        expect(getHookValues(component).total).toEqual(total);
+        expect(getHookValues(component).entities).toEqual(entities);
+    });
+
+    it('should call useTagsProvider when tag was changed', async () => {
+        let component;
+        await act(async () => {
+            component = mount(<TestComponent {...props} />);
+        });
+        component.update();
+
+        await act(async () => {
+            component.setProps({tag: 'newName'});
+        });
+        component.update();
+
+        expect(useTagsProviderSpy).toHaveBeenCalledWith({entityUri: props.entityUri, tag: 'newName'});
+    });
+
+    it('should call useTagsProvider when entityUri was changed', async () => {
+        let component;
+        await act(async () => {
+            component = mount(<TestComponent {...props} />);
+        });
+        component.update();
+        expect(useTagsProviderSpy).toHaveBeenCalledWith({entityUri: props.entityUri, tag: props.tag});
+
+        await act(async () => {
+            component.setProps({entityUri: 'DTSS/dataTenantName/entities/newEntityUri'});
+        });
+        component.update();
+
+        expect(useTagsProviderSpy).toHaveBeenCalledWith({
+            entityUri: 'DTSS/dataTenantName/entities/newEntityUri',
+            tag: props.tag
+        });
+    });
+
+    it('should call requestEntities if page was changed', async () => {
+        let component;
+        await act(async () => {
+            component = mount(<TestComponent {...props} />);
+        });
+        component.update();
+
+        await act(async () => {
+            component.setProps({page: 2});
+        });
+        component.update();
+
+        expect(useTagsProviderSpy).toHaveBeenCalledWith({entityUri: props.entityUri, tag: props.tag});
+        expect(tagsProvider.requestTotal).toHaveBeenCalledTimes(1);
+        expect(tagsProvider.requestEntities).toHaveBeenCalledTimes(2);
+        expect(tagsProvider.requestEntities).toHaveBeenCalledWith(props.rowsPerPage, 2 * props.rowsPerPage);
+    });
+
+    it('should call requestEntities if rowsPerPage was changed', async () => {
+        let component;
+        await act(async () => {
+            component = mount(<TestComponent {...props} />);
+        });
+        component.update();
+
+        await act(async () => {
+            component.setProps({rowsPerPage: 100});
+        });
+        component.update();
+
+        expect(useTagsProviderSpy).toHaveBeenCalledWith({entityUri: props.entityUri, tag: props.tag});
+        expect(tagsProvider.requestTotal).toHaveBeenCalledTimes(1);
+        expect(tagsProvider.requestEntities).toHaveBeenCalledTimes(2);
+        expect(tagsProvider.requestEntities).toHaveBeenCalledWith(100, props.page * 100);
+    });
+
+    it('should dispatch ui.actions.errorSet on requestEntities error', async () => {
+        tagsProvider.requestEntities = jest.fn().mockReturnValue(Promise.reject({error: 'error'}));
+
+        let component;
+        await act(async () => {
+            component = mount(<TestComponent {...props} />);
+        });
+        component.update();
+
+        expect(dispatch).toHaveBeenCalledWith(
+            ui.actions.errorSet(getRequestErrorMessage({error: 'error'}, 'Something went wrong'))
+        );
+    });
+
+    it('should dispatch ui.actions.errorSet on requestTotal error', async () => {
+        tagsProvider.requestTotal = jest.fn().mockReturnValue(Promise.reject({error: 'error'}));
+
+        let component;
+        await act(async () => {
+            component = mount(<TestComponent {...props} />);
+        });
+        component.update();
+
+        expect(dispatch).toHaveBeenCalledWith(
+            ui.actions.errorSet(getRequestErrorMessage({error: 'error'}, 'Something went wrong'))
+        );
+    });
+});

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

@@ -0,0 +1,208 @@
+import * as reactRedux from 'react-redux';
+import {renderHook} from '@testing-library/react-hooks';
+import {useTagsProvider} from '../useTagsProvider';
+import {
+    getFilteredEntities,
+    getFilteredEntitiesFromDataTenant,
+    getTotalFromDataTenant,
+    getTotals
+} from '@reltio/mdm-sdk';
+
+jest.mock('@reltio/mdm-sdk', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/mdm-sdk'),
+    getFilteredEntities: jest.fn(),
+    getFilteredEntitiesFromDataTenant: jest.fn(),
+    getTotals: jest.fn(),
+    getTotalFromDataTenant: jest.fn()
+}));
+
+describe('useTagsProvider tests', () => {
+    const getTagsProvider = (initialProps) => {
+        return renderHook((props) => useTagsProvider(props), {initialProps});
+    };
+    const store = {
+        ui: {
+            paths: {
+                dtssPath: 'dtssPath'
+            }
+        },
+        tenant: {
+            id: 'userTenant'
+        },
+        search: {
+            searchOptions: {
+                searchByOv: true,
+                ovOnly: true
+            },
+            activityFilter: 'active',
+            globalFilter: {
+                query: null,
+                savedSearchesUris: ['savedSearches/DpzIP8dM'],
+                isMuted: true
+            }
+        }
+    };
+    const filters = [
+        {
+            filter: 'equals',
+            fieldName: 'tags',
+            values: ['tagName']
+        }
+    ];
+    const globalOptions = {
+        activityFilter: 'active',
+        globalFilter: '',
+        searchOptions: 'searchByOv,ovOnly'
+    };
+
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+
+        const uri = 'uri1';
+        (getFilteredEntities as jest.Mock).mockReturnValue(Promise.resolve([{uri}]));
+        (getFilteredEntitiesFromDataTenant as jest.Mock).mockReturnValue(Promise.resolve([{uri}]));
+
+        const response = {total: 42};
+        (getTotals as jest.Mock).mockReturnValue(Promise.resolve(response));
+        (getTotalFromDataTenant as jest.Mock).mockReturnValue(Promise.resolve(response));
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should return functions for customer tenant', () => {
+        const {requestEntities, requestTotal} = getTagsProvider({
+            entityUri: 'entities/entityUri',
+            tag: 'tagName'
+        }).result.current;
+
+        requestEntities(25, 0);
+        expect(getFilteredEntities).toHaveBeenCalledWith(filters, {
+            ...globalOptions,
+            max: 25,
+            offset: 0,
+            select: 'uri,label,type,secondaryLabel,defaultProfilePicValue,startDate,endDate'
+        });
+        expect(getFilteredEntitiesFromDataTenant).not.toHaveBeenCalled();
+
+        requestTotal();
+        expect(getTotals).toHaveBeenCalledWith(filters, globalOptions);
+        expect(getTotalFromDataTenant).not.toHaveBeenCalled();
+    });
+
+    it('should return functions for DTSS tenant', () => {
+        const dataTenant = 'dataTenantName';
+        const {requestEntities, requestTotal} = getTagsProvider({
+            entityUri: `DTSS/${dataTenant}/entities/entityUri`,
+            tag: 'tagName'
+        }).result.current;
+
+        requestEntities(25, 0);
+        expect(getFilteredEntities).not.toHaveBeenCalled();
+        expect(getFilteredEntitiesFromDataTenant).toHaveBeenCalledWith({
+            filters,
+            options: {
+                ...globalOptions,
+                max: 25,
+                offset: 0,
+                select: 'uri,label,type,secondaryLabel,defaultProfilePicValue,startDate,endDate'
+            },
+            customerTenant: store.tenant.id,
+            dataTenant,
+            dtssPath: store.ui.paths.dtssPath
+        });
+
+        requestTotal();
+        expect(getTotals).not.toHaveBeenCalled();
+        expect(getTotalFromDataTenant).toHaveBeenCalledWith({
+            filters,
+            options: globalOptions,
+            customerTenant: store.tenant.id,
+            dataTenant,
+            dtssPath: store.ui.paths.dtssPath
+        });
+    });
+
+    it('should update filters if tag was changed', () => {
+        const newTagName = 'newTagName';
+        const newFilters = [
+            {
+                filter: 'equals',
+                fieldName: 'tags',
+                values: [newTagName]
+            }
+        ];
+        const initialProps = {entityUri: 'entities/entityUri', tag: 'tagName'};
+        const {result, rerender} = getTagsProvider(initialProps);
+
+        result.current.requestTotal();
+        expect(getTotals).toHaveBeenCalledWith(filters, globalOptions);
+
+        result.current.requestEntities(25, 0);
+        expect(getFilteredEntities).toHaveBeenCalledWith(filters, {
+            ...globalOptions,
+            max: 25,
+            offset: 0,
+            select: 'uri,label,type,secondaryLabel,defaultProfilePicValue,startDate,endDate'
+        });
+
+        initialProps.tag = newTagName;
+        rerender(initialProps);
+
+        result.current.requestTotal();
+        expect(getTotals).toHaveBeenCalledWith(newFilters, globalOptions);
+
+        result.current.requestEntities(25, 0);
+        expect(getFilteredEntities).toHaveBeenCalledWith(newFilters, {
+            ...globalOptions,
+            max: 25,
+            offset: 0,
+            select: 'uri,label,type,secondaryLabel,defaultProfilePicValue,startDate,endDate'
+        });
+    });
+
+    it('should call DTSS functions if entityUri was changed on DTSS entityUri', () => {
+        const initialProps = {entityUri: 'entities/entityUri', tag: 'tagName'};
+        const {result, rerender} = getTagsProvider(initialProps);
+
+        result.current.requestTotal();
+        expect(getTotals).toHaveBeenCalledWith(filters, globalOptions);
+        expect(getTotalFromDataTenant).not.toHaveBeenCalled();
+
+        result.current.requestEntities(25, 0);
+        expect(getFilteredEntities).toHaveBeenCalledWith(filters, {
+            ...globalOptions,
+            max: 25,
+            offset: 0,
+            select: 'uri,label,type,secondaryLabel,defaultProfilePicValue,startDate,endDate'
+        });
+        expect(getFilteredEntitiesFromDataTenant).not.toHaveBeenCalled();
+
+        initialProps.entityUri = 'DTSS/dataTenant/entities/entityUri';
+        rerender(initialProps);
+
+        result.current.requestTotal();
+        expect(getTotalFromDataTenant).toHaveBeenCalledWith({
+            filters,
+            options: globalOptions,
+            customerTenant: store.tenant.id,
+            dataTenant: 'dataTenant',
+            dtssPath: store.ui.paths.dtssPath
+        });
+
+        result.current.requestEntities(25, 0);
+        expect(getFilteredEntitiesFromDataTenant).toHaveBeenCalledWith({
+            filters,
+            options: {
+                ...globalOptions,
+                max: 25,
+                offset: 0,
+                select: 'uri,label,type,secondaryLabel,defaultProfilePicValue,startDate,endDate'
+            },
+            customerTenant: store.tenant.id,
+            dataTenant: 'dataTenant',
+            dtssPath: store.ui.paths.dtssPath
+        });
+    });
+});

package/src/components/TagPerspectiveView/hooks/useTag.ts

@@ -0,0 +1,48 @@
+import {useCallback, useEffect, useState} from 'react';
+import i18n from 'ui-i18n';
+import {useDispatch} from 'react-redux';
+import {useSafePromise} from '@reltio/components';
+import {ui} from '@reltio/mdm-module';
+import {Entity, getRequestErrorMessage} from '@reltio/mdm-sdk';
+import {useTagsProvider} from './useTagsProvider';
+
+type Props = {
+    tag: string;
+    entityUri: string;
+    page: number;
+    rowsPerPage: number;
+};
+
+export const useTag = ({tag, entityUri, page = 0, rowsPerPage = 50}: Props) => {
+    const dispatch = useDispatch();
+
+    const safeRequestTotalPromise = useSafePromise();
+    const safeRequestEntitiesPromise = useSafePromise();
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [total, setTotal] = useState<number>(0);
+    const [entities, setEntities] = useState<Entity[]>([]);
+
+    const {requestEntities, requestTotal} = useTagsProvider({entityUri, tag});
+
+    const onError = useCallback(
+        (e) => {
+            dispatch(ui.actions.errorSet(getRequestErrorMessage(e, i18n.text('Something went wrong'))));
+            setTotal(0);
+        },
+        [dispatch]
+    );
+
+    useEffect(() => {
+        safeRequestTotalPromise(requestTotal()).then(setTotal).catch(onError);
+    }, [requestTotal, safeRequestTotalPromise, onError]);
+
+    useEffect(() => {
+        setIsLoading(true);
+        safeRequestEntitiesPromise(requestEntities(rowsPerPage, page * rowsPerPage))
+            .then(setEntities)
+            .catch(onError)
+            .finally(() => setIsLoading(false));
+    }, [page, rowsPerPage, requestEntities, safeRequestEntitiesPromise, onError]);
+
+    return {isLoading, total, entities};
+};

package/src/components/TagPerspectiveView/hooks/useTagsProvider.ts

@@ -0,0 +1,83 @@
+import {useCallback, useMemo} from 'react';
+import {map} from 'ramda';
+import {useSelector} from 'react-redux';
+import {
+    Entity,
+    getFilteredEntities,
+    getFilteredEntitiesFromDataTenant,
+    getTotals,
+    getTotalFromDataTenant,
+    TotalResponse,
+    SearchFilter,
+    GlobalSearchRequestOptions,
+    getDataTenantFromEntityUri,
+    enrichEntityWithDataTenant
+} from '@reltio/mdm-sdk';
+import mdmModule from '@reltio/mdm-module';
+
+type Props = {
+    entityUri: string;
+    tag: string;
+};
+
+export const useTagsProvider = ({entityUri, tag}: Props) => {
+    const globalSearchRequestOptions: GlobalSearchRequestOptions = useSelector(
+        mdmModule.selectors.getGlobalSearchRequestOptions
+    );
+    const tenant: string = useSelector(mdmModule.selectors.getTenant);
+    const dtssPath: string = useSelector(mdmModule.selectors.getDtssPath);
+    const dataTenant = useMemo(() => getDataTenantFromEntityUri(entityUri), [entityUri]);
+    const filters: SearchFilter[] = useMemo(() => {
+        return [
+            {
+                filter: 'equals',
+                fieldName: 'tags',
+                values: [tag]
+            }
+        ];
+    }, [tag]);
+
+    const isDT = !!dataTenant;
+
+    const getEntities = useCallback(
+        (filters: SearchFilter[] = [], options = {}): Promise<Entity[]> => {
+            const requestOptions = {
+                select: 'uri,label,type,secondaryLabel,defaultProfilePicValue,startDate,endDate',
+                ...options
+            };
+            return isDT
+                ? getFilteredEntitiesFromDataTenant({
+                    filters,
+                    options: requestOptions,
+                    customerTenant: tenant,
+                    dataTenant,
+                    dtssPath
+                }).then(map(enrichEntityWithDataTenant(dataTenant)))
+                : getFilteredEntities(filters, requestOptions);
+        },
+        [isDT, dataTenant, tenant, dtssPath]
+    );
+
+    const requestEntities = useCallback(
+        (max, offset): Promise<Entity[]> => {
+            return getEntities(filters, {offset, max, ...globalSearchRequestOptions});
+        },
+        [filters, globalSearchRequestOptions, getEntities]
+    );
+
+    const requestTotal = useCallback((): Promise<number> => {
+        const options = globalSearchRequestOptions;
+        return (isDT
+            ? getTotalFromDataTenant({
+                filters,
+                options,
+                customerTenant: tenant,
+                dataTenant,
+                dtssPath
+            })
+            : getTotals(filters, options)
+        ).then((json) => (json as TotalResponse).total);
+    }, [filters, globalSearchRequestOptions, isDT, dataTenant, tenant, dtssPath]);
+
+    return {requestEntities, requestTotal};
+};

package/src/components/TagPerspectiveView/index.ts

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