@reltio/sources 1.4.1585 → 1.4.1586-mui5

package/src/components/SourcesView/SourcesView.tsx

@@ -0,0 +1,318 @@
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import {Dispatch} from 'redux';
+import {connect} from 'react-redux';
+import i18n from 'ui-i18n';
+import {equals, pipe, pluck, propEq, reject} from 'ramda';
+import mdmModule, {HistoryEvent, profile} from '@reltio/mdm-module';
+import {
+    ApiError,
+    ApiErrorCode,
+    AttributeType,
+    collectContributorsFromTree,
+    Entity,
+    getEntityType,
+    Metadata,
+    SourcesPerspectiveConfig
+} from '@reltio/mdm-sdk';
+import {
+    AttributesTable,
+    CrosswalkDragLayer,
+    CrosswalksDisplayProvider,
+    ExpandedAttributesProvider,
+    HistoryHeader,
+    HistoryPanelEmptyState,
+    HistoryView,
+    ProfileResizablePanes,
+    ScreenProfileBand,
+    useDidUpdateEffect,
+    useHistory,
+    useHistoryEnabled,
+    useHistorySlice,
+    useModifiedEntity,
+    useSavedState,
+    useSnackbar
+} from '@reltio/components';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+import HistoryIcon from '@mui/icons-material/History';
+import {RightSidePanel} from '../RightSidePanel/RightSidePanel';
+import LegendView from '../LegendView/LegendView';
+import {LegendMode, SourcesSavedState} from '../../types';
+import {useCrosswalkTree} from '../../hooks/useCrosswalkTree';
+import LegendIcon from './icons/LegendIcon.svg';
+import {showErrorMessage} from '../../services/errors';
+import {useCrosswalkTreeActions} from '../../hooks/useCrosswalkTreeActions';
+import {useCrosswalksDisplay} from '../../hooks/useCrosswalksDisplay';
+import {useEntityWithSurvivorshipGroups} from '../../hooks/useEntityWithSurvivorshipGroups';
+import HTML5Backend from 'react-dnd-html5-backend';
+import {DndProvider} from 'react-dnd';
+import EmptyState from '../EmptyState/EmptyState';
+import TreeActionSnackbar from '../TreeActionSnackbar/TreeActionSnackbar';
+import {RulesetsSelector} from '../RulesestsSelector/RulesestsSelector';
+import {useStyles} from './styles';
+
+const perspectiveId = 'source';
+
+type Props = {
+    config: SourcesPerspectiveConfig;
+    entity: Entity;
+    metadata: Metadata;
+    saveState: (state: SourcesSavedState) => void;
+    getSavedState: () => Promise<SourcesSavedState>;
+    dispatch: Dispatch;
+    historyEvent: HistoryEvent;
+};
+
+enum ActivePanel {
+    Legend,
+    History
+}
+
+const SourcesView = ({
+    config,
+    entity: defaultEntity,
+    metadata,
+    getSavedState,
+    saveState,
+    dispatch,
+    historyEvent
+}: Props) => {
+    const styles = useStyles();
+    const [activeMode, setActiveMode] = useState(LegendMode.Crosswalk);
+    const [isCrosswalkTreeLoading, setIsCrosswalkTreeLoading] = useState(false);
+
+    const {
+        survivorshipGroups,
+        currentSurvivorshipGroupUri,
+        onChangeSurvivorshipGroup,
+        entity,
+        isDefaultSurvivorshipGroupUri,
+        isLoading: isEntityLoading
+    } = useEntityWithSurvivorshipGroups(defaultEntity);
+
+    const {isHistoryEnabled, isProfilePersisted} = useHistoryEnabled({
+        perspectiveId,
+        entity,
+        historyButtonId: ActivePanel.History
+    });
+
+    const persistedEntity = isProfilePersisted ? entity : null;
+
+    const entityUri = persistedEntity?.uri;
+    const entityType = getEntityType(metadata, entity?.type);
+
+    const {historySlice} = useHistorySlice({entity: persistedEntity, historyEvent});
+
+    const [selectedAttrTypes, setSelectedAttrTypes] = useState<AttributeType[]>();
+    useDidUpdateEffect(() => {
+        setSelectedAttrTypes(undefined);
+    }, [historySlice]);
+    useDidUpdateEffect(() => {
+        setSelectedAttrTypes(undefined);
+    }, [entityUri]);
+
+    const {SnackbarRenderer, showSnackbarMessage} = useSnackbar({
+        anchorOrigin: {vertical: 'top', horizontal: 'center'},
+        showDismiss: true
+    });
+    const {isLoaded, savedState} = useSavedState<SourcesSavedState>(getSavedState);
+    const [visibleColumns, setVisibleColumns] = useState<string[]>();
+    useEffect(() => {
+        if (isLoaded) {
+            setVisibleColumns(savedState.visibleColumns);
+        }
+    }, [isLoaded]); // eslint-disable-line
+    useEffect(() => {
+        const hasVisibleColumnsChanged = !equals(visibleColumns, savedState.visibleColumns);
+        if (isLoaded && hasVisibleColumnsChanged) {
+            saveState({visibleColumns});
+        }
+    }, [visibleColumns]); // eslint-disable-line
+
+    const onCrosswalkTreeLoaded = useCallback(() => {
+        setIsCrosswalkTreeLoading(false);
+    }, []);
+
+    const {crosswalkTree, reload: reloadCrosswalkTree} = useCrosswalkTree({
+        entityUri: historySlice?.aEntity.uri || entityUri,
+        onSuccess: onCrosswalkTreeLoaded
+    });
+    const contributors = useMemo(() => collectContributorsFromTree(crosswalkTree), [crosswalkTree]);
+
+    const refreshEntity = useCallback(() => {
+        entityUri &&
+            dispatch(
+                profile.entity.actions.loadEntity({
+                    viewId: config.id,
+                    uri: entityUri
+                })
+            );
+    }, [entityUri, config, dispatch]);
+
+    const refreshData = useCallback(pipe(refreshEntity, reloadCrosswalkTree), [refreshEntity, reloadCrosswalkTree]);
+
+    const {
+        modifiedEntity,
+        crosswalksMap,
+        newlyCreatedAttributes,
+        onDeleteAttribute,
+        onPinAttribute,
+        onIgnoreAttribute,
+        onEditAttribute,
+        onAddAttribute
+    } = useModifiedEntity({
+        entity: historySlice?.aEntity || persistedEntity,
+        onModify: refreshData,
+        onError: showErrorMessage
+    });
+
+    const displayProps = useCrosswalksDisplay({activeMode, contributors, entity});
+    const onShowMessage = useCallback((message: string, entity?: Entity) => {
+        showSnackbarMessage(entity ? <TreeActionSnackbar entity={entity} message={message} /> : message);
+    }, []);
+
+    const {addCrosswalk, deleteCrosswalk, editCrosswalk, unmergeContributor, unsubscribeContributor} =
+        useCrosswalkTreeActions({
+            onShowMessage,
+            onSuccess: refreshData,
+            onError: useCallback(
+                (error: ApiError) => {
+                    showErrorMessage(error);
+                    if (error.errorCode === ApiErrorCode.CROSSWALK_NOT_FOUND) {
+                        refreshData();
+                    }
+                },
+                [refreshData]
+            ),
+            onLoad: useCallback(() => setIsCrosswalkTreeLoading(true), [])
+        });
+
+    const {
+        historyFilter,
+        onApplyFilter,
+        isLoading: isHistoryLoading,
+        historicUris,
+        historyWithTotal,
+        canLoadMore,
+        onLoadMore
+    } = useHistory({entity: persistedEntity, enabled: isHistoryEnabled});
+
+    const tabs = [
+        {
+            buttonProps: {
+                id: ActivePanel.Legend,
+                icon: LegendIcon,
+                tooltipTitle: i18n.text('Legend')
+            },
+            title: <Typography variant="h6">{i18n.text('Legend')}</Typography>,
+            content: (
+                <LegendView
+                    activeMode={activeMode}
+                    onChangeMode={setActiveMode}
+                    entity={historySlice?.aEntity || persistedEntity}
+                    crosswalkTree={crosswalkTree}
+                    contributors={contributors}
+                    selectedAttributeTypes={selectedAttrTypes}
+                    readOnly={!!historySlice || isCrosswalkTreeLoading}
+                    onAddCrosswalk={addCrosswalk}
+                    onUnmergeContributor={unmergeContributor}
+                    onUnsubscribeContributor={unsubscribeContributor}
+                    onEditCrosswalk={editCrosswalk}
+                    onDeleteCrosswalk={deleteCrosswalk}
+                />
+            )
+        },
+        {
+            buttonProps: {
+                id: ActivePanel.History,
+                icon: HistoryIcon,
+                tooltipTitle: i18n.text('History')
+            },
+            title: (
+                <HistoryHeader
+                    total={(historicUris?.length || 0) + 1}
+                    entityType={entityType}
+                    filter={historyFilter}
+                    onApplyFilter={onApplyFilter}
+                />
+            ),
+            content: isProfilePersisted ? (
+                <HistoryView
+                    isLoading={isHistoryLoading}
+                    historyWithTotal={historyWithTotal}
+                    contributorsUris={historicUris}
+                    entityUri={entityUri}
+                    historyEvent={historyEvent}
+                    onLoadMore={onLoadMore}
+                    canLoadMore={canLoadMore}
+                />
+            ) : (
+                <HistoryPanelEmptyState />
+            )
+        }
+    ];
+    const additionalHeaderItems = (
+        <>
+            <RulesetsSelector
+                survivorshipGroups={survivorshipGroups}
+                currentSurvivorshipGroupUri={currentSurvivorshipGroupUri}
+                onChange={onChangeSurvivorshipGroup}
+            />
+            <Divider className={styles.headerDivider} orientation="vertical" />
+        </>
+    );
+
+    return (
+        <div className={styles.sourcesView}>
+            <CrosswalksDisplayProvider {...displayProps}>
+                <DndProvider backend={HTML5Backend}>
+                    <CrosswalkDragLayer />
+                    <ProfileResizablePanes
+                        perspectiveId={perspectiveId}
+                        buttonsProps={pipe(reject(propEq('hidden', true)), pluck('buttonProps'))(tabs)}
+                    >
+                        <>
+                            <ScreenProfileBand entity={entity} historySlice={historySlice} />
+                            {isProfilePersisted ? (
+                                <ExpandedAttributesProvider attributeUris={newlyCreatedAttributes}>
+                                    <AttributesTable
+                                        className={styles.attributesTable}
+                                        isLoading={isEntityLoading}
+                                        visibleColumns={visibleColumns}
+                                        onChangeVisibleColumns={setVisibleColumns}
+                                        entity={modifiedEntity}
+                                        crosswalksMap={crosswalksMap}
+                                        selectedAttributeTypes={selectedAttrTypes}
+                                        onSelectAttributeTypes={setSelectedAttrTypes}
+                                        readOnly={!!historySlice || !isDefaultSurvivorshipGroupUri}
+                                        onDelete={onDeleteAttribute}
+                                        onPin={onPinAttribute}
+                                        onIgnore={onIgnoreAttribute}
+                                        onEdit={onEditAttribute}
+                                        onAdd={onAddAttribute}
+                                        additionalHeaderItems={additionalHeaderItems}
+                                        activeSurvivorshipGroupUri={currentSurvivorshipGroupUri}
+                                    />
+                                </ExpandedAttributesProvider>
+                            ) : (
+                                <EmptyState />
+                            )}
+                        </>
+                        <RightSidePanel tabs={tabs} />
+                    </ProfileResizablePanes>
+                </DndProvider>
+            </CrosswalksDisplayProvider>
+            <SnackbarRenderer />
+        </div>
+    );
+};
+
+const mapStateToProps = (state) => {
+    return {
+        entity: mdmModule.selectors.getEntity(state),
+        metadata: mdmModule.selectors.getMetadata(state),
+        historyEvent: mdmModule.selectors.getHistoryEvent(state)
+    };
+};
+
+export default connect(mapStateToProps)(SourcesView);

package/src/components/SourcesView/__tests__/IntegrationSourcesView.spec.tsx

@@ -0,0 +1,199 @@
+import React, {ReactNode} from 'react';
+import {mockResizeObserver} from 'jsdom-testing-mocks';
+import {Provider} from 'react-redux';
+import * as mdmSdk from '@reltio/mdm-sdk';
+import {act, render, screen, within} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {ActionsHookProvider, PerspectivesSettingsContext} from '@reltio/components';
+import SourcesView from '../SourcesView';
+import {createTestStore} from '../../../../../../__mocks__/store-utils';
+import {SourcesSavedState} from '../../../types';
+import {createInitialState} from './data/store.data';
+
+jest.mock('@reltio/mdm-sdk', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/mdm-sdk'),
+    getAllUsersForTenant: jest.fn().mockReturnValue(Promise.resolve([])),
+    getEntityTimeSlice: jest.fn().mockReturnValue(Promise.resolve({})),
+    getCrosswalkTree: jest.fn(),
+    unmergeContributor: jest.fn()
+}));
+
+describe('SourcesView tests', () => {
+    const resizeObserver = mockResizeObserver();
+    const getCrosswalkTreeSpy = jest.spyOn(mdmSdk, 'getCrosswalkTree');
+    let resolveSavedState;
+
+    const defaultConfig = {
+        id: 'SourcesViewId'
+    };
+
+    const setUp = async ({config = defaultConfig, initialState = createInitialState()} = {}) => {
+        const user = userEvent.setup();
+        const store = createTestStore(initialState);
+        const saveState = jest.fn();
+        const getSavedState = jest.fn(
+            () =>
+                new Promise((_resolve) => {
+                    resolveSavedState = _resolve;
+                })
+        ) as () => Promise<SourcesSavedState>;
+        const settingsContext = {settings: {source: {active: 0, width: 480}}, onChange: () => {}};
+        const Providers = ({children}: {children: ReactNode}) => (
+            <Provider store={store}>
+                <PerspectivesSettingsContext.Provider value={settingsContext}>
+                    <ActionsHookProvider hook={() => () => {}}>{children}</ActionsHookProvider>
+                </PerspectivesSettingsContext.Provider>
+            </Provider>
+        );
+        const renderer = render(<SourcesView config={config} saveState={saveState} getSavedState={getSavedState} />, {
+            wrapper: Providers
+        });
+        const tree = await screen.findByTestId('reltio-crosswalk-tree');
+        resizeObserver.mockElementSize(tree, {contentBoxSize: {inlineSize: 400, blockSize: 400}});
+        act(() => {
+            resizeObserver.resize();
+        });
+        return {user, ...renderer};
+    };
+
+    const unmergeContributorSpy = jest.spyOn(mdmSdk, 'unmergeContributor');
+    unmergeContributorSpy.mockReturnValue(Promise.resolve({}));
+
+    describe('Legend behaviour', () => {
+        it('should open unmerge dialog after clicking on node in crosswalk tree', async () => {
+            getCrosswalkTreeSpy.mockReturnValue(
+                Promise.resolve({
+                    uri: 'entities/1mGpgPSC',
+                    crosswalks: [
+                        {
+                            ownerType: 'entity',
+                            type: 'configuration/sources/Reltio',
+                            uri: 'entities/1mGpgPSC/crosswalks/5JS297jHk',
+                            value: '1mGpgPSC'
+                        }
+                    ],
+                    merges: [
+                        {
+                            losers: [
+                                {
+                                    uri: 'entities/1OCFJIn5',
+                                    crosswalks: [
+                                        {
+                                            ownerType: 'entity',
+                                            type: 'configuration/sources/Reltio',
+                                            uri: 'entities/1mGpgPSC/crosswalks/4eQNj0MiJ',
+                                            value: '1OCFJIn5'
+                                        },
+                                        {
+                                            ownerType: 'relation',
+                                            type: 'configuration/sources/Reltio',
+                                            uri: 'relations/1Idz1R0t/crosswalks/5pO01Grhz',
+                                            value: '1Idz1R0t'
+                                        }
+                                    ]
+                                }
+                            ],
+                            time: 1678135069760
+                        }
+                    ]
+                })
+            );
+            const {user} = await setUp();
+            await act(async () => {
+                await resolveSavedState({
+                    visibleColumns: ['ovValues', 'name1', 'name2']
+                });
+            });
+            const nodes = await screen.findAllByTestId('reltio-sankey-chart-node');
+            await user.click(nodes[0]);
+            const popup = await screen.findByTestId('reltio-unmerge-popup');
+            const unmergePopup = within(popup).getByRole('button', {name: 'Unmerge'});
+            await user.click(unmergePopup);
+            await screen.findByRole('heading', {level: 2, name: 'Unmerge'});
+            const dialog = screen.getByRole('dialog');
+            await user.click(within(dialog).getByRole('button', {name: 'Unmerge'}));
+            expect(unmergeContributorSpy).toBeCalledWith({
+                entityUri: 'entities/1mGpgPSC',
+                contributorUri: 'entities/1mGpgPSC',
+                operationType: 'unmerge'
+            });
+        });
+
+        it('should not show unmerge option if there is no merges in crosswalk tree', async () => {
+            getCrosswalkTreeSpy.mockReturnValue(
+                Promise.resolve({
+                    uri: 'entities/1mGpgPSC',
+                    crosswalks: [
+                        {
+                            ownerType: 'entity',
+                            type: 'configuration/sources/Reltio',
+                            uri: 'entities/1mGpgPSC/crosswalks/5JS297jHk',
+                            value: '1mGpgPSC'
+                        }
+                    ]
+                })
+            );
+            const {user} = await setUp();
+            await act(async () => {
+                await resolveSavedState({
+                    visibleColumns: ['ovValues', 'name1', 'name2']
+                });
+            });
+            const nodes = await screen.findAllByTestId('reltio-sankey-chart-node');
+            await user.click(nodes[0]);
+            const popup = screen.queryByTestId('reltio-unmerge-popup');
+            expect(popup).not.toBeInTheDocument();
+        });
+
+        it('should not show unmerge option if user does not have permission to unmerge', async () => {
+            getCrosswalkTreeSpy.mockReturnValue(
+                Promise.resolve({
+                    uri: 'entities/1mGpgPSC',
+                    crosswalks: [
+                        {
+                            ownerType: 'entity',
+                            type: 'configuration/sources/Reltio',
+                            uri: 'entities/1mGpgPSC/crosswalks/5JS297jHk',
+                            value: '1mGpgPSC'
+                        }
+                    ],
+                    merges: [
+                        {
+                            losers: [
+                                {
+                                    uri: 'entities/1OCFJIn5',
+                                    crosswalks: [
+                                        {
+                                            ownerType: 'entity',
+                                            type: 'configuration/sources/Reltio',
+                                            uri: 'entities/1mGpgPSC/crosswalks/4eQNj0MiJ',
+                                            value: '1OCFJIn5'
+                                        },
+                                        {
+                                            ownerType: 'relation',
+                                            type: 'configuration/sources/Reltio',
+                                            uri: 'relations/1Idz1R0t/crosswalks/5pO01Grhz',
+                                            value: '1Idz1R0t'
+                                        }
+                                    ]
+                                }
+                            ],
+                            time: 1678135069760
+                        }
+                    ]
+                })
+            );
+            const initialState = createInitialState({access: 'READ'});
+            const {user} = await setUp({initialState});
+            await act(async () => {
+                await resolveSavedState({
+                    visibleColumns: ['ovValues', 'name1', 'name2']
+                });
+            });
+            const nodes = await screen.findAllByTestId('reltio-sankey-chart-node');
+            await user.click(nodes[0]);
+            const popup = screen.queryByTestId('reltio-unmerge-popup');
+            expect(popup).not.toBeInTheDocument();
+        });
+    });
+});