@reltio/sources 1.4.1585 → 1.4.1586-mui5

package/src/hooks/__tests__/useCrosswalksDisplay.specs.tsx

@@ -0,0 +1,213 @@
+import * as mdmSdk from '@reltio/mdm-sdk';
+import {LegendMode} from '../../types';
+import {useCrosswalksDisplay} from '../useCrosswalksDisplay';
+import {renderHook, act} from '@testing-library/react-hooks';
+
+jest.mock('@reltio/mdm-sdk', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/mdm-sdk'),
+    getSourceColor: jest.fn(),
+    getContributorColor: jest.fn(),
+    getCrosswalkColor: jest.fn(),
+    getCrosswalkId: jest.fn(),
+    findContributorForCrosswalk: jest.fn(),
+    debounce: (x) => x
+}));
+
+describe('useCrosswalksDisplay behaviour', () => {
+    const getCrosswalksDisplay = (initialProps) => {
+        return renderHook(useCrosswalksDisplay, {initialProps}).result.current;
+    };
+
+    const contrCrosswalks = [{uri: 'testContrCrosswalk', type: 'test', value: 'test'}];
+
+    const getSourceColorMock = jest.spyOn(mdmSdk, 'getSourceColor').mockReturnValue('#111111');
+    const getCrosswalkColorMock = jest.spyOn(mdmSdk, 'getCrosswalkColor').mockReturnValue('#000000');
+    const getCrosswalkIdMock = jest.spyOn(mdmSdk, 'getCrosswalkId').mockReturnValue('testId');
+    const getContributorColorMock = jest.spyOn(mdmSdk, 'getContributorColor').mockReturnValue('#FFFFFF');
+    const findContributorForCrosswalkMock = jest
+        .spyOn(mdmSdk, 'findContributorForCrosswalk')
+        .mockReturnValue({uri: 'testContrId', crosswalks: contrCrosswalks});
+
+    const contributors = [{uri: 'test'}];
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should return correct getCrosswalkColor function for LegendMode.Crosswalk', () => {
+        const {getCrosswalkColor} = getCrosswalksDisplay({
+            activeMode: LegendMode.Crosswalk,
+            contributors: contributors
+        });
+
+        const crosswalk = {uri: 'testCrosswalk', type: 'testType', value: 'testValue'};
+
+        const color = getCrosswalkColor(crosswalk);
+        expect(getCrosswalkIdMock).toBeCalledWith(crosswalk);
+        expect(getCrosswalkColorMock).toBeCalledWith('testId');
+        expect(color).toBe('#000000');
+    });
+
+    it('should return correct getCrosswalkColor function for LegendMode.Source', () => {
+        const {getCrosswalkColor} = getCrosswalksDisplay({
+            activeMode: LegendMode.Source,
+            contributors: contributors
+        });
+
+        const crosswalk = {uri: 'testCrosswalk', type: 'testType', value: 'testValue'};
+
+        const color = getCrosswalkColor(crosswalk);
+        expect(getSourceColorMock).toBeCalledWith(crosswalk.type);
+        expect(color).toBe('#111111');
+    });
+
+    it('should return correct getCrosswalkColor function for LegendMode.Contributor', () => {
+        const {getCrosswalkColor} = getCrosswalksDisplay({
+            activeMode: LegendMode.Contributor,
+            contributors: contributors
+        });
+
+        const crosswalk = {uri: 'testCrosswalk', type: 'testType', value: 'testValue'};
+
+        const color = getCrosswalkColor(crosswalk);
+        expect(findContributorForCrosswalkMock).toBeCalledWith(contributors, crosswalk);
+        expect(getContributorColorMock).toBeCalledWith('testContrId');
+        expect(color).toBe('#FFFFFF');
+    });
+
+    it('should return empty array of highlighted crosswalks by default', () => {
+        const {highlightedCrosswalks} = getCrosswalksDisplay({
+            activeMode: LegendMode.Contributor,
+            contributors: contributors
+        });
+
+        expect(highlightedCrosswalks).toEqual([]);
+    });
+
+    it('should return empty array of focused crosswalks by default', () => {
+        const {focusedCrosswalks} = getCrosswalksDisplay({
+            activeMode: LegendMode.Contributor,
+            contributors: contributors
+        });
+
+        expect(focusedCrosswalks).toEqual([]);
+    });
+
+    it('should return correct setCrosswalkHighlighted function', () => {
+        const initialProps = {
+            activeMode: LegendMode.Crosswalk,
+            contributors: contributors
+        };
+        const {result, rerender} = renderHook(useCrosswalksDisplay, {initialProps});
+
+        const crosswalk = {uri: 'testCrosswalk', type: 'testType', value: 'testValue'};
+
+        result.current.setCrosswalkHighlighted(undefined, true);
+        expect(result.current.highlightedCrosswalks).toEqual([]);
+
+        act(() => {
+            result.current.setCrosswalkHighlighted(crosswalk, true);
+        });
+        expect(result.current.highlightedCrosswalks).toEqual([crosswalk]);
+
+        act(() => {
+            result.current.setCrosswalkHighlighted(crosswalk, false);
+        });
+        expect(result.current.highlightedCrosswalks).toEqual([]);
+
+        initialProps.activeMode = LegendMode.Contributor;
+        rerender();
+        act(() => {
+            result.current.setCrosswalkHighlighted(crosswalk, true);
+        });
+        expect(findContributorForCrosswalkMock).toBeCalledWith(contributors, crosswalk);
+        expect(result.current.highlightedCrosswalks).toEqual([crosswalk, ...contrCrosswalks]);
+    });
+
+    it('should return correct toggleCrosswalkFocus function', () => {
+        const initialProps = {
+            activeMode: LegendMode.Crosswalk,
+            contributors: contributors
+        };
+        const {result, rerender} = renderHook(useCrosswalksDisplay, {initialProps});
+
+        const crosswalk = {uri: 'testCrosswalk', type: 'testType', value: 'testValue'};
+
+        result.current.toggleCrosswalkFocus(undefined);
+        expect(result.current.highlightedCrosswalks).toEqual([]);
+        expect(result.current.focusedCrosswalks).toEqual([]);
+
+        act(() => {
+            result.current.toggleCrosswalkFocus(crosswalk);
+        });
+        expect(result.current.highlightedCrosswalks).toEqual([crosswalk]);
+        expect(result.current.focusedCrosswalks).toEqual([crosswalk]);
+
+        act(() => {
+            result.current.toggleCrosswalkFocus(crosswalk);
+        });
+        expect(result.current.highlightedCrosswalks).toEqual([]);
+        expect(result.current.focusedCrosswalks).toEqual([]);
+
+        initialProps.activeMode = LegendMode.Contributor;
+        rerender();
+        act(() => {
+            result.current.toggleCrosswalkFocus(crosswalk);
+        });
+        expect(findContributorForCrosswalkMock).toBeCalledWith(contributors, crosswalk);
+        expect(result.current.highlightedCrosswalks).toEqual([crosswalk, ...contrCrosswalks]);
+        expect(result.current.focusedCrosswalks).toEqual([crosswalk, ...contrCrosswalks]);
+
+        act(() => {
+            result.current.toggleCrosswalkFocus(crosswalk);
+        });
+        expect(result.current.highlightedCrosswalks).toEqual([]);
+    });
+
+    it('should return correct highlightedCrosswalks when crosswalks focused and highlighted', () => {
+        const initialProps = {
+            activeMode: LegendMode.Crosswalk,
+            contributors: contributors
+        };
+        const {result} = renderHook(useCrosswalksDisplay, {initialProps});
+
+        const crosswalk = {uri: 'testCrosswalk', type: 'testType', value: 'testValue'};
+        const crosswalkHighlighted = {uri: 'testCrosswalk1', type: 'testType1', value: 'testValue1'};
+
+        act(() => {
+            result.current.toggleCrosswalkFocus(crosswalk);
+            result.current.setCrosswalkHighlighted(crosswalkHighlighted, true);
+        });
+        expect(result.current.highlightedCrosswalks).toEqual([crosswalkHighlighted, crosswalk]);
+    });
+
+    it('should reset focusedCrosswalks on entity change if focusedCrosswalks not empty', () => {
+        const initialProps = {
+            activeMode: LegendMode.Crosswalk,
+            contributors: contributors,
+            entity: {
+                uri: 'entities/uri1',
+                type: 'configuration/entityTypes/HCO'
+            }
+        };
+        const {result, rerender} = renderHook(useCrosswalksDisplay, {initialProps});
+        const crosswalk = {uri: 'testCrosswalk', type: 'testType', value: 'testValue'};
+
+        act(() => {
+            result.current.toggleCrosswalkFocus(crosswalk);
+        });
+
+        expect(result.current.focusedCrosswalks).toEqual([crosswalk]);
+
+        rerender(initialProps);
+        expect(result.current.focusedCrosswalks).toEqual([crosswalk]);
+
+        initialProps.entity = {
+            uri: 'entities/uri2',
+            type: 'configuration/entityTypes/HCO2'
+        };
+
+        rerender(initialProps);
+        expect(result.current.focusedCrosswalks).toEqual([]);
+    });
+});

package/src/hooks/__tests__/useEntityWithSurvivorshipGroups.specs.ts

@@ -0,0 +1,160 @@
+import {act, renderHook} from '@testing-library/react-hooks';
+import * as reactRedux from 'react-redux';
+import * as mdmSdk from '@reltio/mdm-sdk';
+import {useEntityWithSurvivorshipGroups} from '../useEntityWithSurvivorshipGroups';
+
+jest.mock('@reltio/mdm-sdk', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/mdm-sdk'),
+    getEntityBySurvivorshipGroupUri: jest.fn()
+}));
+
+const survivorshipGroups = [
+    {
+        uri: 'configuration/entityTypes/HCP/survivorshipGroups/survivorshipGroups2cwLEgWAo',
+        label: 'tests45',
+        description: 'rerere',
+        default: true,
+        mapping: []
+    },
+    {
+        uri: 'configuration/entityTypes/HCP/survivorshipGroups/survivorshipGroups3aGSPnPlj',
+        label: 'l1',
+        description: 'd1',
+        default: false,
+        mapping: []
+    }
+];
+
+const store = {
+    tenant: {
+        id: 'sokol'
+    },
+    metadata: {
+        sokol: {
+            entityTypes: [{uri: 'configuration/entityTypes/HCP', survivorshipGroups}]
+        }
+    }
+};
+
+const defaultEntity = {
+    uri: 'entities/1',
+    type: 'configuration/entityTypes/HCP',
+    attributes: {
+        CountryCode: [
+            {
+                lookupCode: 'IT',
+                lookupRawValue: 'IT',
+                ov: true,
+                type: 'configuration/entityTypes/HCP/attributes/CountryCode',
+                uri: 'entities/1864oxoO/attributes/CountryCode/3TFgmPUK5',
+                value: 'Italy'
+            }
+        ]
+    }
+};
+
+const loadedEntity = {
+    uri: 'entities/1',
+    type: 'configuration/entityTypes/HCP',
+    attributes: {
+        CountryCode: [
+            {
+                lookupCode: 'IT',
+                lookupRawValue: 'IT',
+                ov: false,
+                type: 'configuration/entityTypes/HCP/attributes/CountryCode',
+                uri: 'entities/1864oxoO/attributes/CountryCode/3TFgmPUK5',
+                value: 'Italy'
+            }
+        ]
+    }
+};
+
+describe('useEntityWithSurvivorshipGroups behaviour', () => {
+    const getEntityBySurvivorshipGroupUriSpy = jest.spyOn(mdmSdk, 'getEntityBySurvivorshipGroupUri');
+
+    beforeEach(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+        getEntityBySurvivorshipGroupUriSpy.mockResolvedValue(loadedEntity);
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should return survivorshipGroups correctly', () => {
+        const {result} = renderHook(useEntityWithSurvivorshipGroups, {initialProps: defaultEntity});
+        expect(result.current.survivorshipGroups).toEqual(survivorshipGroups);
+    });
+
+    it('should return survivorshipGroups as empty array by default if entity is null', () => {
+        const {result} = renderHook(useEntityWithSurvivorshipGroups, {initialProps: null});
+        expect(result.current.survivorshipGroups).toEqual([]);
+    });
+
+    it('should set default entity and default currentSurvivorshipGroupUri correctly', () => {
+        const {result} = renderHook(useEntityWithSurvivorshipGroups, {initialProps: defaultEntity});
+        expect(result.current.currentSurvivorshipGroupUri).toBe(
+            'configuration/entityTypes/HCP/survivorshipGroups/survivorshipGroups2cwLEgWAo'
+        );
+        expect(result.current.entity).toEqual(defaultEntity);
+    });
+
+    it('onChangeSurvivorshipGroup handler should work correctly with not default uri param ', async () => {
+        const {result} = renderHook(useEntityWithSurvivorshipGroups, {initialProps: defaultEntity});
+        expect(result.current.currentSurvivorshipGroupUri).toBe(
+            'configuration/entityTypes/HCP/survivorshipGroups/survivorshipGroups2cwLEgWAo'
+        );
+        expect(result.current.entity).toEqual(defaultEntity);
+        expect(result.current.isLoading).toBe(false);
+        act(() => {
+            result.current.onChangeSurvivorshipGroup(
+                'configuration/entityTypes/HCP/survivorshipGroups/survivorshipGroups3aGSPnPlj'
+            );
+        });
+        expect(result.current.currentSurvivorshipGroupUri).toBe(
+            'configuration/entityTypes/HCP/survivorshipGroups/survivorshipGroups3aGSPnPlj'
+        );
+        expect(result.current.isLoading).toBe(true);
+        expect(getEntityBySurvivorshipGroupUriSpy).toHaveBeenCalledWith(
+            'entities/1',
+            'configuration/entityTypes/HCP/survivorshipGroups/survivorshipGroups3aGSPnPlj'
+        );
+        await act(async () => {
+            return Promise.resolve();
+        });
+        expect(result.current.isLoading).toBe(false);
+        expect(result.current.entity).toEqual(loadedEntity);
+    });
+
+    it('onChangeSurvivorshipGroup handler should work correctly with default uri param ', async () => {
+        const {result} = renderHook(useEntityWithSurvivorshipGroups, {initialProps: defaultEntity});
+        await act(async () => {
+            result.current.onChangeSurvivorshipGroup(
+                'configuration/entityTypes/HCP/survivorshipGroups/survivorshipGroups3aGSPnPlj'
+            );
+            return Promise.resolve();
+        });
+        expect(getEntityBySurvivorshipGroupUriSpy).toHaveBeenCalledTimes(1);
+        expect(result.current.entity).toEqual(loadedEntity);
+        act(() => {
+            result.current.onChangeSurvivorshipGroup(
+                'configuration/entityTypes/HCP/survivorshipGroups/survivorshipGroups2cwLEgWAo'
+            );
+        });
+        expect(getEntityBySurvivorshipGroupUriSpy).toHaveBeenCalledTimes(1);
+        expect(result.current.entity).toEqual(defaultEntity);
+    });
+
+    it('should return isDefaultSurvivorshipGroupUri correctly', async () => {
+        const {result} = renderHook(useEntityWithSurvivorshipGroups, {initialProps: defaultEntity});
+        expect(result.current.isDefaultSurvivorshipGroupUri).toBe(true);
+        await act(async () => {
+            result.current.onChangeSurvivorshipGroup(
+                'configuration/entityTypes/HCP/survivorshipGroups/survivorshipGroups3aGSPnPlj'
+            );
+            return Promise.resolve();
+        });
+        expect(result.current.isDefaultSurvivorshipGroupUri).toBe(false);
+    });
+});

package/src/hooks/useCrosswalkTree.ts

@@ -0,0 +1,38 @@
+import {useCallback, useEffect, useState} from 'react';
+import {getCrosswalkTree, CrosswalkTree} from '@reltio/mdm-sdk';
+import {noop, useSafePromise} from '@reltio/components';
+
+type Props = {
+    entityUri?: string;
+    onSuccess?: () => void;
+};
+
+export const useCrosswalkTree = ({entityUri, onSuccess = noop}: Props) => {
+    const [crosswalkTree, setCrosswalkTree] = useState<CrosswalkTree>(null);
+    const safePromise = useSafePromise();
+
+    const onError = (e) => {
+        console.warn('Failed to load crosswalk tree', e);
+        setCrosswalkTree(null);
+    };
+
+    const loadData = useCallback(() => {
+        if (entityUri) {
+            safePromise(getCrosswalkTree({entityUri}))
+                .then((results) => {
+                    setCrosswalkTree(results);
+                })
+                .catch(onError)
+                .finally(onSuccess);
+        } else {
+            setCrosswalkTree(null);
+            onSuccess();
+        }
+    }, [entityUri, onSuccess]);
+
+    useEffect(() => {
+        loadData();
+    }, [loadData]);
+
+    return {crosswalkTree, reload: loadData};
+};

package/src/hooks/useCrosswalkTreeActions.ts

@@ -0,0 +1,83 @@
+import {useCallback} from 'react';
+import {useSelector} from 'react-redux';
+import {andThen, pipe} from 'ramda';
+import i18n from 'ui-i18n';
+import mdm from '@reltio/mdm-module';
+import {
+    Entity,
+    unmergeContributor as unmergeContributorRequest,
+    unsubscribeEntityFromDataTenantEntity
+} from '@reltio/mdm-sdk';
+import {useCrosswalkActions, noop} from '@reltio/components';
+import {UnmergeContributorEvent, UnsubscribeContributorEvent} from '../types';
+
+type Props = {
+    onLoad?: () => void;
+    onSuccess?: () => void;
+    onError?: (error: unknown) => void;
+    onShowMessage?: (message: string, entity?: Entity) => void;
+};
+
+export const useCrosswalkTreeActions = ({
+    onLoad = noop,
+    onSuccess = noop,
+    onError = noop,
+    onShowMessage = noop
+}: Props) => {
+    const {addCrosswalk, editCrosswalk, deleteCrosswalk} = useCrosswalkActions({onLoad, onSuccess, onError});
+    const dtssPath = useSelector(mdm.selectors.getDtssPath);
+    const tenant = useSelector(mdm.selectors.getTenant);
+
+    const handleAction = useCallback(
+        (request: Promise<unknown>) => {
+            onLoad();
+            request
+                .then(() => {
+                    onSuccess();
+                })
+                .catch(onError);
+        },
+        [onLoad, onError, onSuccess]
+    );
+
+    const unmergeContributor = useCallback(
+        (event: UnmergeContributorEvent) =>
+            pipe(
+                unmergeContributorRequest,
+                andThen((response) => {
+                    onShowMessage(i18n.text('has been unmerged'), response.b);
+                    return response;
+                }),
+                handleAction
+            )(event),
+        [handleAction, onShowMessage]
+    );
+
+    const unsubscribeContributor = useCallback(
+        ({crosswalk, dataTenant}: UnsubscribeContributorEvent) =>
+            pipe(
+                unsubscribeEntityFromDataTenantEntity,
+                andThen((response) => {
+                    if (!response.successful) throw new Error(i18n.text('Failed to unsubscribe contributor'));
+                    return response;
+                }),
+                handleAction
+            )({
+                dtssPath,
+                value: crosswalk.value,
+                type: crosswalk.type,
+                sourceTable: crosswalk.sourceTable,
+                dataTenant: dataTenant.id,
+                customerTenant: tenant
+            }),
+        [handleAction, dtssPath, tenant]
+    );
+
+    return {
+        addCrosswalk,
+        editCrosswalk,
+        deleteCrosswalk,
+        unmergeContributor,
+        unsubscribeContributor
+    };
+};

package/src/hooks/useCrosswalksDisplay.ts

@@ -0,0 +1,110 @@
+import {useCallback, useEffect, useMemo, useState, useRef} from 'react';
+import {any, concat} from 'ramda';
+import {LegendMode} from '../types';
+import {
+    Contributor,
+    CrosswalkBase,
+    debounce,
+    Entity,
+    eqCrosswalks,
+    findContributorForCrosswalk,
+    getContributorColor,
+    getCrosswalkColor,
+    getCrosswalkId,
+    getSourceColor
+} from '@reltio/mdm-sdk';
+
+type Props = {
+    activeMode: LegendMode;
+    contributors: Contributor[];
+    entity: Entity;
+};
+
+export const useCrosswalksDisplay = ({activeMode, contributors, entity}: Props) => {
+    const getCrosswalkColorForActiveMode = useCallback(
+        (crosswalk: CrosswalkBase) => {
+            switch (activeMode) {
+                case LegendMode.Source:
+                    return getSourceColor(crosswalk.type);
+                case LegendMode.Contributor:
+                    return getContributorColor(findContributorForCrosswalk(contributors, crosswalk)?.uri || '');
+                case LegendMode.Crosswalk:
+                    return getCrosswalkColor(getCrosswalkId(crosswalk));
+            }
+        },
+        [activeMode, contributors]
+    );
+    const [highlightedCrosswalks, setHighlightedCrosswalks] = useState<CrosswalkBase[]>([]);
+    const highlightedCrosswalksCache = useRef([]);
+    const applyHighlightedCrosswalks = useCallback(
+        debounce(() => {
+            setHighlightedCrosswalks([...highlightedCrosswalksCache.current]);
+        }, 50),
+        []
+    );
+    const cacheHighlightedCrosswalks = useCallback(
+        (arr) => {
+            highlightedCrosswalksCache.current = arr;
+            applyHighlightedCrosswalks(arr);
+        },
+        [applyHighlightedCrosswalks]
+    );
+
+    const setCrosswalkHighlighted = useCallback(
+        (crosswalk: CrosswalkBase, highlighted: boolean) => {
+            if (!crosswalk) return;
+            if (highlighted) {
+                if (activeMode === LegendMode.Contributor) {
+                    const contributor = findContributorForCrosswalk(contributors, crosswalk);
+                    cacheHighlightedCrosswalks([crosswalk, ...(contributor?.crosswalks || [])]);
+                } else {
+                    cacheHighlightedCrosswalks([crosswalk]);
+                }
+            } else {
+                cacheHighlightedCrosswalks([]);
+            }
+        },
+        [activeMode, cacheHighlightedCrosswalks, contributors]
+    );
+
+    const [focusedCrosswalks, setFocusedCrosswalks] = useState<CrosswalkBase[]>([]);
+    const calculateFocusedCrosswalks = useCallback(
+        (prev: CrosswalkBase[], next: CrosswalkBase[]) =>
+            concat(
+                prev.filter((prevCrosswalk) => !any(eqCrosswalks(prevCrosswalk), next)),
+                next.filter((nextCrosswalk) => !any(eqCrosswalks(nextCrosswalk), prev))
+            ),
+        []
+    );
+    const toggleCrosswalkFocus = useCallback(
+        (crosswalk: CrosswalkBase) => {
+            if (!crosswalk) return;
+            if (activeMode === LegendMode.Contributor) {
+                const contributor = findContributorForCrosswalk(contributors, crosswalk);
+                setFocusedCrosswalks((prevValue) =>
+                    calculateFocusedCrosswalks([crosswalk, ...(contributor?.crosswalks || [])], prevValue)
+                );
+            } else {
+                setFocusedCrosswalks((prevValue) => calculateFocusedCrosswalks([crosswalk], prevValue));
+            }
+        },
+        [activeMode, calculateFocusedCrosswalks, contributors]
+    );
+
+    useEffect(() => {
+        if (focusedCrosswalks.length) {
+            setFocusedCrosswalks([]);
+        }
+    }, [activeMode, entity]);
+
+    return {
+        getCrosswalkColor: getCrosswalkColorForActiveMode,
+        highlightedCrosswalks: useMemo(
+            () => [...highlightedCrosswalks, ...focusedCrosswalks],
+            [highlightedCrosswalks, focusedCrosswalks]
+        ),
+        focusedCrosswalks,
+        toggleCrosswalkFocus,
+        setCrosswalkHighlighted
+    };
+};

package/src/hooks/useEntityWithSurvivorshipGroups.tsx

@@ -0,0 +1,51 @@
+import {useCallback, useEffect, useState} from 'react';
+import {useSelector} from 'react-redux';
+import {pipe, propOr, find, propEq, prop} from 'ramda';
+import {getEntityType, getEntityBySurvivorshipGroupUri, Entity} from '@reltio/mdm-sdk';
+import mdmModule from '@reltio/mdm-module';
+import {useSafePromise} from '@reltio/components';
+
+export const useEntityWithSurvivorshipGroups = (defaultEntity: Entity) => {
+    const entityTypeUri = defaultEntity?.type;
+    const metadata = useSelector(mdmModule.selectors.getMetadata);
+    const survivorshipGroups = pipe(getEntityType(metadata), propOr([], 'survivorshipGroups'))(entityTypeUri);
+    const defaultSurvivorshipGroupUri = pipe(find(propEq('default', true)), prop('uri'))(survivorshipGroups);
+    const [currentSurvivorshipGroupUri, setCurrentSurvivorshipGroupUri] = useState(null);
+    const [entity, setEntity] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const safePromise = useSafePromise();
+
+    useEffect(() => {
+        if (defaultEntity) {
+            setEntity(defaultEntity);
+            setCurrentSurvivorshipGroupUri(defaultSurvivorshipGroupUri);
+        }
+    }, [defaultEntity, defaultSurvivorshipGroupUri]);
+
+    const onChangeSurvivorshipGroup = useCallback(
+        (survivorshipGroupUri: string) => {
+            setCurrentSurvivorshipGroupUri(survivorshipGroupUri);
+            const isDefaultSurvivorshipGroupUri = defaultSurvivorshipGroupUri === survivorshipGroupUri;
+            if (!isDefaultSurvivorshipGroupUri) {
+                setIsLoading(true);
+                safePromise(getEntityBySurvivorshipGroupUri(entity.uri, survivorshipGroupUri))
+                    .then(setEntity)
+                    .finally(() => setIsLoading(false));
+            } else {
+                setEntity(defaultEntity);
+            }
+        },
+        [defaultEntity, defaultSurvivorshipGroupUri, entity, safePromise]
+    );
+
+    const isDefaultSurvivorshipGroupUri = defaultSurvivorshipGroupUri === currentSurvivorshipGroupUri;
+
+    return {
+        survivorshipGroups,
+        currentSurvivorshipGroupUri,
+        onChangeSurvivorshipGroup,
+        entity,
+        isLoading,
+        isDefaultSurvivorshipGroupUri
+    };
+};

package/src/icons/notMatch.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Icon / Not a match</title>
+    <defs>
+        <path d="M17,13.1383198 L21.5,17.6383198 L17,22.1383198 L17,18.5003198 L15.753258,18.5 L12.265,15.021 L13.678,13.607 L16.579,16.5003198 L17,16.5003198 L17,13.1383198 Z M17,1.5 L21.5,6 L17,10.5 L17,7.138 L16.579,7.138 L5.5497951,18.1383198 L2,18.1383198 L2,16.1383198 L4.723,16.138 L15.753258,5.13831978 L17,5.138 L17,1.5 Z M5.5497951,5.5 L8.844,8.786 L7.43,10.199 L4.723,7.50031978 L2,7.5 L2,5.5 L5.5497951,5.5 Z" id="path-1"></path>
+    </defs>
+    <g id="Icon-/-Not-a-match" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="Combined-Shape" fill-rule="nonzero"></g>
+        <rect id="Icon-Color" fill-opacity="0.54" fill="#000000" mask="url(#mask-2)" x="0" y="0" width="24" height="24"></rect>
+    </g>
+</svg>

package/src/index.ts

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

package/src/services/errors.ts

@@ -0,0 +1,11 @@
+import {ErrorPopup} from '@reltio/components';
+import i18n from 'ui-i18n';
+import {getRequestErrorMessage} from '@reltio/mdm-sdk';
+
+export const showErrorMessage = (error: unknown) => {
+    console.error(error); // eslint-disable-line
+    ErrorPopup.addError({
+        title: i18n.text('Error'),
+        message: getRequestErrorMessage(error, i18n.text('Something went wrong'))
+    });
+};