@reltio/profile 1.4.1585 → 1.4.1586-mui5

package/src/components/ProfilePerspectiveView/__tests__/data/entities.data.ts

@@ -0,0 +1,19 @@
+export const createEntities = () => {
+    return [
+        {
+            label: 'entity label 1',
+            type: 'configuration/entityTypes/HCP',
+            uri: 'entities/2qhASmd'
+        },
+        {
+            label: 'entity label 2',
+            type: 'configuration/entityTypes/HCP',
+            uri: 'entities/1fEU3PtH'
+        },
+        {
+            label: 'entity label 3',
+            type: 'configuration/entityTypes/HCP',
+            uri: 'entities/1fEUpfyR'
+        }
+    ];
+};

package/src/components/ProfilePerspectiveView/__tests__/data/entity.data.ts

@@ -0,0 +1,25 @@
+export const createEntity = () => {
+    return {
+        uri: 'entities/1ywlDdLM',
+        type: 'configuration/entityTypes/HCP',
+        label: 'Entity label',
+        attributes: {
+            SimpleRequiredString: [
+                {
+                    type: 'configuration/entityTypes/HCP/attributes/SimpleRequiredString',
+                    ov: true,
+                    value: '4444',
+                    uri: 'entities/1ywlDdLM/attributes/SimpleRequiredString/5sXNaNib2'
+                }
+            ],
+            SimpleString: [
+                {
+                    type: 'configuration/entityTypes/HCP/attributes/SimpleString',
+                    ov: true,
+                    value: '8888',
+                    uri: 'entities/1ywlDdLM/attributes/SimpleString/5sXNaNVoG'
+                }
+            ]
+        }
+    };
+};

package/src/components/ProfilePerspectiveView/__tests__/data/metadata.data.ts

@@ -0,0 +1,33 @@
+export const getMetadata = ({tenant}) => ({
+    [tenant]: {
+        uri: 'configuration',
+        entityTypes: [
+            {
+                uri: 'configuration/entityTypes/HCP',
+                attributes: [
+                    {
+                        label: 'SimpleRequiredString',
+                        name: 'SimpleRequiredString',
+                        uri: 'configuration/entityTypes/HCP/attributes/SimpleRequiredString',
+                        type: 'String',
+                        required: true
+                    },
+                    {
+                        label: 'SimpleRequiredString2',
+                        name: 'SimpleRequiredString2',
+                        uri: 'configuration/entityTypes/HCP/attributes/SimpleRequiredString2',
+                        type: 'String',
+                        required: true
+                    },
+                    {
+                        label: 'SimpleString',
+                        name: 'SimpleString',
+                        uri: 'configuration/entityTypes/HCP/attributes/SimpleString',
+                        type: 'String'
+                    }
+                ]
+            }
+        ],
+        relationTypes: []
+    }
+});

package/src/components/ProfilePerspectiveView/__tests__/data/profile.data.ts

@@ -0,0 +1,22 @@
+import {Mode} from '@reltio/mdm-sdk';
+import {createEntity} from './entity.data';
+
+export const createEmptyProfile = ({mode = Mode.Viewing} = {}) => {
+    return {
+        entity: {},
+        modifiedEntities: {},
+        views: [],
+        history: {},
+        mode
+    };
+};
+
+export const createProfile = ({mode = Mode.Viewing} = {}) => {
+    return {
+        entity: createEntity(),
+        modifiedEntities: {},
+        views: [],
+        history: {},
+        mode
+    };
+};

package/src/components/ProfilePerspectiveView/__tests__/data/store.data.ts

@@ -0,0 +1,51 @@
+import {Mode} from '@reltio/mdm-sdk';
+import {getMetadata} from './metadata.data';
+import {createEmptyProfile, createProfile} from './profile.data';
+
+export const createInitialState = ({mode = Mode.Viewing, isEmptyProfile = false} = {}) => {
+    const tenant = 't1';
+    const metadata = getMetadata({tenant});
+    const profile = isEmptyProfile ? createEmptyProfile({mode}) : createProfile({mode});
+
+    return {
+        metadata,
+        profile,
+        tenant: {
+            id: tenant
+        },
+        ui: {
+            paths: {
+                apiPath: '/nui/reltioAPI',
+                dtssPath: '/nui/dtss/'
+            },
+            newConfig: {
+                properties: {
+                    profileCheckUpdate: {
+                        autoUpdateInReadMode: ['configuration/entityTypes/HCO'],
+                        entityTypes: [
+                            'configuration/entityTypes/Company',
+                            'configuration/entityTypes/HCO',
+                            'configuration/entityTypes/HCP',
+                            'configuration/entityTypes/HCA'
+                        ]
+                    }
+                }
+            }
+        },
+        search: {
+            searchProviderData: {
+                type: 'search',
+                data: {
+                    query: "equals(type,'configuration/entityTypes/HCP')"
+                }
+            },
+            searchNavigationData: {
+                uri: 'entities/1ywlDdLM',
+                index: 25,
+                total: 483,
+                tenant,
+                cache: ['entities/1ywlDdLM', 'entities/2qhASmd']
+            }
+        }
+    };
+};

package/src/components/ProfilePerspectiveView/hooks/data/backgroundUpdateDalay.ts

@@ -0,0 +1,2 @@
+const BACKGROUND_UPDATE_DELAY = 6000;
+export const getBackgroundUpdateDelay = (delay?: number) => delay || BACKGROUND_UPDATE_DELAY;

package/src/components/ProfilePerspectiveView/hooks/useBackgroundProcessIndicator.ts

@@ -0,0 +1,121 @@
+import {useCallback, useContext, useEffect, useRef, useState} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
+import {isNil} from 'ramda';
+import {useActionsHook, useSafePromise, ViewIdContext} from '@reltio/components';
+import {getEntityUpdatedTime, ProfileCheckUpdate} from '@reltio/mdm-sdk';
+import mdm, {profile} from '@reltio/mdm-module';
+import {BackgroundUpdateStatus} from '../../BackgroundProcessIndicator/BackgroundProcessIndicator';
+import {getBackgroundUpdateDelay} from './data/backgroundUpdateDalay';
+
+const NUMBER_OF_RETRY = 5;
+
+const isEntityTypeInBackgroundProcess = (entityTypeList?: string[], entityType?: string) => {
+    if (entityTypeList?.[0] === '*') {
+        return true;
+    }
+    if (isNil(entityTypeList)) {
+        return false;
+    }
+    return entityTypeList.includes(entityType);
+};
+
+const checkEntityTypeInList = (entityTypeList: string[], entityType: string) =>
+    isEntityTypeInBackgroundProcess(entityTypeList, entityType);
+
+type Props = {
+    entityUri: string;
+    entityTypeUri: string;
+    entityUpdatedTime: number;
+};
+
+export const useBackgroundProcessIndicator = ({entityUri, entityTypeUri, entityUpdatedTime}: Props) => {
+    const dispatch = useDispatch();
+    const {autoUpdateInReadMode, entityTypes: entityTypesForUpdate}: ProfileCheckUpdate =
+        useSelector(mdm.selectors.getProfileCheckUpdate) || {};
+
+    const needBackgroundProcess = checkEntityTypeInList(entityTypesForUpdate, entityTypeUri);
+    const isAutoUpdated = checkEntityTypeInList(autoUpdateInReadMode, entityTypeUri);
+
+    const timerId = useRef(null);
+    const safePromise = useSafePromise();
+    const listenToActions = useActionsHook();
+    const viewId = useContext(ViewIdContext);
+
+    const [isOpenBackgroundProcessIndicator, setIsOpenBackgroundProcessIndicator] = useState(false);
+    const [backgroundUpdateStatus, setBackgroundUpdateStatus] = useState(BackgroundUpdateStatus.loading);
+    const backgroundUpdateDelay = getBackgroundUpdateDelay();
+
+    const onRefreshProfile = useCallback(() => {
+        // entity refreshing
+        dispatch(profile.entity.actions.loadEntity({viewId, uri: entityUri}));
+        setIsOpenBackgroundProcessIndicator(false);
+    }, [dispatch, entityUri, viewId]);
+
+    const onCloseBackgroundProcessIndicator = useCallback(() => {
+        setIsOpenBackgroundProcessIndicator(false);
+    }, []);
+
+    const cancelUpdateProcess = useCallback(() => {
+        clearTimeout(timerId.current);
+        setIsOpenBackgroundProcessIndicator(false);
+        safePromise(Promise.resolve());
+    }, [safePromise]);
+
+    const getUpdatedTime = useCallback(
+        (numberOfRetry) => {
+            safePromise(getEntityUpdatedTime(entityUri))
+                .then((result) => {
+                    if (result.updatedTime > entityUpdatedTime) {
+                        setBackgroundUpdateStatus(BackgroundUpdateStatus.success);
+                        if (isAutoUpdated) {
+                            onRefreshProfile();
+                        } else {
+                            setIsOpenBackgroundProcessIndicator(true);
+                        }
+                        numberOfRetry = -1;
+                    }
+                })
+                .catch(() => {})
+                .finally(() => {
+                    if (numberOfRetry < 0) {
+                        return;
+                    }
+                    if (!numberOfRetry) {
+                        setBackgroundUpdateStatus(BackgroundUpdateStatus.error);
+                        setIsOpenBackgroundProcessIndicator(true);
+                    } else {
+                        numberOfRetry = numberOfRetry - 1;
+                        timerId.current = setTimeout(getUpdatedTime, backgroundUpdateDelay, numberOfRetry);
+                    }
+                });
+        },
+        [entityUpdatedTime, entityUri, isAutoUpdated, onRefreshProfile, safePromise, backgroundUpdateDelay]
+    );
+
+    const runBackgroundUpdate = useCallback(() => {
+        if (needBackgroundProcess) {
+            setBackgroundUpdateStatus(BackgroundUpdateStatus.loading);
+            setIsOpenBackgroundProcessIndicator(true);
+            timerId.current = setTimeout(getUpdatedTime, backgroundUpdateDelay, NUMBER_OF_RETRY - 1);
+        }
+    }, [getUpdatedTime, needBackgroundProcess]);
+
+    useEffect(() => {
+        const stopListeningActions = listenToActions((action) => {
+            if (action.type === profile.constants.ProfileActions.PROFILE_SAVED) {
+                runBackgroundUpdate();
+            }
+        });
+        return () => {
+            stopListeningActions();
+        };
+    }, [listenToActions, safePromise, runBackgroundUpdate]);
+
+    return {
+        onRefreshProfile,
+        onCloseBackgroundProcessIndicator,
+        cancelUpdateProcess,
+        isOpenBackgroundProcessIndicator,
+        backgroundUpdateStatus
+    };
+};

package/src/components/ProfilePerspectiveView/hooks/useProfileLayout.ts

@@ -0,0 +1,101 @@
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import hash from 'object-hash';
+import {useSavedStateForEntityType, useConfigPermissions} from '@reltio/components';
+import {
+    debounce,
+    fixNonUniqViewsIds,
+    ProfilePerspectiveConfig,
+    ProfileViewConfig,
+    ReltioGridLayoutItem,
+    removeUnsupportedLayoutItems
+} from '@reltio/mdm-sdk';
+import {ProfileSavedState, Layout} from '../../../types';
+
+type Props = {
+    config: ProfilePerspectiveConfig;
+    entityTypeUri?: string;
+    saveState: (state: Record<string, ProfileSavedState>) => void;
+    getSavedState: () => Promise<Record<string, ProfileSavedState>>;
+};
+
+const SAVE_STATE_DEBOUNCE_DELAY = 1000;
+const emptyState = {} as ProfileSavedState;
+export const useProfileLayout = ({config: profileConfig, entityTypeUri, saveState, getSavedState}: Props) => {
+    const [layout, setLayout] = useState<Layout>([]);
+    const [views, setViews] = useState<ProfilePerspectiveConfig['views']>([]);
+
+    const {canRead} = useConfigPermissions();
+    const config: ProfilePerspectiveConfig = useMemo(() => {
+        const validatedViews = profileConfig.views.filter(canRead);
+        const validatedLayout = removeUnsupportedLayoutItems(profileConfig.layout, validatedViews);
+        return {...profileConfig, views: validatedViews, layout: validatedLayout};
+    }, [profileConfig, canRead]);
+
+    const configHash = useMemo(() => hash(config), [config]);
+    const nestedRoute = config?.nestedRoute ? `/${config.nestedRoute}` : '';
+    const savedStateKey = entityTypeUri && config ? entityTypeUri + nestedRoute : null;
+
+    const getSavedStateAndFix = useCallback(() => {
+        return getSavedState().then((state) => (state.layout ? {} : state));
+    }, [getSavedState]);
+    const debouncedSaveState = useCallback(debounce(saveState, SAVE_STATE_DEBOUNCE_DELAY), [saveState]) as (
+        state: Record<string, ProfileSavedState>
+    ) => void;
+    const {
+        isLoaded,
+        savedState = emptyState,
+        updateSavedState
+    } = useSavedStateForEntityType<ProfileSavedState>({
+        getSavedState: getSavedStateAndFix,
+        saveState: debouncedSaveState,
+        entityTypeUri: savedStateKey
+    });
+
+    const handleLayoutChange = useCallback(
+        (layout: Layout) => {
+            updateSavedState({layout, views, configHash});
+            setLayout(layout);
+        },
+        [updateSavedState, configHash, views]
+    );
+
+    const tempConfig = useRef<{views: ProfilePerspectiveConfig['views']; layout: Layout}>();
+    const handleResetUndo = useCallback(() => {
+        setViews(tempConfig.current.views);
+        handleLayoutChange(tempConfig.current.layout);
+    }, [handleLayoutChange]);
+
+    const handleLayoutReset = useCallback(() => {
+        tempConfig.current = {views, layout};
+        const {views: fixedViews, layout: fixedLayout} = fixNonUniqViewsIds<ProfileViewConfig, ReltioGridLayoutItem>({
+            views: config.views,
+            layout: config.layout
+        });
+        setViews(fixedViews);
+        handleLayoutChange(fixedLayout);
+    }, [config, layout, views, handleLayoutChange]);
+
+    useEffect(() => {
+        if (isLoaded) {
+            const isConfigChanged = configHash !== savedState.configHash;
+            const {views: fixedViews, layout: fixedLayout} = fixNonUniqViewsIds<
+                ProfileViewConfig,
+                ReltioGridLayoutItem
+            >({
+                views: isConfigChanged || !savedState.views ? config.views : savedState.views,
+                layout: isConfigChanged ? config.layout : savedState.layout
+            });
+            setViews(fixedViews);
+            setLayout(fixedLayout);
+        }
+    }, [isLoaded, savedState, savedStateKey]); // eslint-disable-line
+
+    return {
+        views,
+        layout,
+        isLoaded,
+        onLayoutReset: handleLayoutReset,
+        onResetUndo: handleResetUndo,
+        handleLayoutChange
+    };
+};

package/src/components/ProfilePerspectiveView/hooks/useProfileRightSidePanelElements.tsx

@@ -0,0 +1,167 @@
+import React, {useContext, useMemo} from 'react';
+import {useSelector} from 'react-redux';
+import {isTempUri, getEntityType, Metadata, Entity, calcTotalCommentItems} from '@reltio/mdm-sdk';
+import mdm, {HistoryEvent} from '@reltio/mdm-module';
+import {CollaborationContext, RightPanelTab, WorkflowTasksContext} from '@reltio/components';
+import {
+    AddWorkflowButton,
+    HistoryHeader,
+    HistoryPanelEmptyState,
+    HistoryView,
+    useHistory,
+    useHistoryEnabled
+} from '@reltio/components';
+import i18n from 'ui-i18n';
+import HistoryIcon from '@mui/icons-material/History';
+import {ActivePanel} from '../../RightSidePanel/RightSidePanel';
+import {DBConnectorsList} from '../../RightSidePanel/components/DBConnectorsList/DBConnectorsList';
+import {WorkflowButton} from '../../RightSidePanel/components/WorkflowButton/WorkflowButton';
+import {CollaborationButton} from '../../RightSidePanel/components/CollaborationButton/CollaborationButton';
+import ConnectorsIcon from '../../RightSidePanel/icons/ConnectorsIcon.svg';
+
+import {WorkflowList} from '../../RightSidePanel/components/WorkflowList/WorkflowList';
+import WorkflowPanelEmptyState from '../../RightSidePanel/components/WorkflowPanelEmptyState/WorkflowPanelEmptyState';
+import {CollaborationList} from '../../RightSidePanel/components/CollaborationList/CollaborationList';
+import CollaborationPanelEmptyState from '../../RightSidePanel/components/CollaborationPanelEmptyState/CollaborationPanelEmptyState';
+
+const getSecondTitle = (total: number): string => {
+    if (total) {
+        return total === 1 ? i18n.text('${total} item', {total}) : i18n.text('${total} items', {total});
+    }
+};
+
+type Props = {
+    perspectiveId: string;
+    commentId?: string;
+    hideHistory?: boolean;
+};
+
+export const useProfileRightSidePanelElements = ({
+    commentId,
+    hideHistory,
+    perspectiveId
+}: Props): {tabs: Array<RightPanelTab>; defaultTab?: number} => {
+    const isWorkflowSideViewEnabled = useSelector(mdm.selectors.isWorkflowSideViewEnabled) as boolean;
+    const isWorkflowEnabled = useSelector(mdm.selectors.isWorkflowEnabled) as boolean;
+    const isCollaborationSideViewEnabled = useSelector(mdm.selectors.isCollaborationSideViewEnabled) as boolean;
+    const isDBConnectorSideViewEnabled = useSelector(mdm.selectors.isDBConnectorSideViewEnabled) as boolean;
+    const isCollaborationEnabled = useSelector(mdm.selectors.isCollaborationEnabled) as boolean;
+
+    const defaultTab = commentId ? ActivePanel.Collaboration : undefined;
+
+    const historyEvent: HistoryEvent = useSelector(mdm.selectors.getHistoryEvent);
+    const metadata: Metadata = useSelector(mdm.selectors.getMetadata);
+    const entity: Entity = useSelector(mdm.selectors.getEntity);
+
+    const workflowTasksContext = useContext(WorkflowTasksContext);
+    const collaborationContext = useContext(CollaborationContext);
+
+    const {isHistoryEnabled, isProfilePersisted} = useHistoryEnabled({
+        perspectiveId,
+        entity,
+        historyButtonId: ActivePanel.History
+    });
+
+    const {historyFilter, onApplyFilter, isLoading, historicUris, historyWithTotal, canLoadMore, onLoadMore} =
+        useHistory({entity, enabled: isHistoryEnabled});
+
+    const enabledWorkflowButton = isWorkflowSideViewEnabled && isWorkflowEnabled && !isTempUri(entity?.uri);
+    const enabledCollaborationButton = isCollaborationSideViewEnabled && isCollaborationEnabled;
+    const collaborationTotal = calcTotalCommentItems(collaborationContext?.commentsMap);
+
+    const tabs = useMemo(
+        () => [
+            {
+                buttonProps: {
+                    id: ActivePanel.Workflow,
+                    icon: WorkflowButton,
+                    tooltipTitle: i18n.text('Workflow')
+                },
+                content: workflowTasksContext?.total ? <WorkflowList /> : <WorkflowPanelEmptyState />,
+                headerProps: {
+                    mainTitle: i18n.text('Workflow'),
+                    secondTitle: getSecondTitle(workflowTasksContext?.total),
+                    rightContent: <AddWorkflowButton />
+                },
+                hidden: !enabledWorkflowButton
+            },
+            {
+                buttonProps: {
+                    id: ActivePanel.Collaboration,
+                    icon: CollaborationButton,
+                    tooltipTitle: i18n.text('Collaboration')
+                },
+                content: collaborationTotal ? <CollaborationList /> : <CollaborationPanelEmptyState />,
+                headerProps: {
+                    mainTitle: i18n.text('Collaboration'),
+                    secondTitle: getSecondTitle(collaborationTotal)
+                },
+                hidden: !enabledCollaborationButton
+            },
+            {
+                buttonProps: {
+                    id: ActivePanel.History,
+                    icon: HistoryIcon,
+                    tooltipTitle: i18n.text('History')
+                },
+                content: isProfilePersisted ? (
+                    <HistoryView
+                        isLoading={isLoading}
+                        historyWithTotal={historyWithTotal}
+                        contributorsUris={historicUris}
+                        entityUri={entity?.uri}
+                        historyEvent={historyEvent}
+                        onLoadMore={onLoadMore}
+                        canLoadMore={canLoadMore}
+                    />
+                ) : (
+                    <HistoryPanelEmptyState />
+                ),
+                headerProps: {
+                    content: (
+                        <HistoryHeader
+                            total={isProfilePersisted ? (historicUris?.length || 0) + 1 : undefined}
+                            entityType={getEntityType(metadata, entity?.type)}
+                            filter={historyFilter}
+                            onApplyFilter={onApplyFilter}
+                        />
+                    )
+                },
+                hidden: hideHistory
+            },
+            {
+                buttonProps: {
+                    id: ActivePanel.DBConnector,
+                    icon: ConnectorsIcon,
+                    tooltipTitle: i18n.text('D&B Connector')
+                },
+                content: <DBConnectorsList />,
+                headerProps: {
+                    mainTitle: i18n.text('D&B Connector')
+                },
+                hidden: !isDBConnectorSideViewEnabled
+            }
+        ],
+        [
+            workflowTasksContext?.total,
+            enabledWorkflowButton,
+            collaborationTotal,
+            enabledCollaborationButton,
+            isProfilePersisted,
+            isLoading,
+            historyWithTotal,
+            historicUris,
+            entity?.uri,
+            entity?.type,
+            historyEvent,
+            onLoadMore,
+            canLoadMore,
+            metadata,
+            historyFilter,
+            onApplyFilter,
+            isDBConnectorSideViewEnabled
+        ]
+    );
+
+    return {tabs, defaultTab};
+};

package/src/components/ProfilePerspectiveView/hooks/useWorkflowTasks.ts

@@ -0,0 +1,15 @@
+import {useWorkflowDefaultActionSuccessHandler, useWorkflowTasks as useCommonWorkflowTasks} from '@reltio/components';
+import {useMemo} from 'react';
+
+export const useWorkflowTasks = (workflowConfig: Parameters<typeof useCommonWorkflowTasks>[0]) => {
+    const commonWorkflowTasks = useCommonWorkflowTasks(workflowConfig);
+    const defaultActionSuccessHandler = useWorkflowDefaultActionSuccessHandler();
+
+    return useMemo(
+        () => ({
+            ...commonWorkflowTasks,
+            onActionSuccess: defaultActionSuccessHandler
+        }),
+        [commonWorkflowTasks, defaultActionSuccessHandler]
+    );
+};

package/src/components/ProfilePerspectiveView/index.ts

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

package/src/components/ProfilePerspectiveView/styles.ts

@@ -0,0 +1,38 @@
+import {makeStyles} from '@mui/styles';
+
+type Props = {
+    maxWidth?: number;
+};
+
+export const useStyles = makeStyles((theme) => ({
+    perspectiveView: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
+        overflowX: 'hidden',
+        overflowY: 'auto',
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: theme.palette.background.default
+    },
+    emptyState: {
+        backgroundColor: '#FAFAFA',
+        height: '100%'
+    },
+    profileWrapper: ({maxWidth}: Props) => ({
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        flexGrow: 1,
+        maxWidth: maxWidth ? `${maxWidth}px` : '100%'
+    }),
+    '@global div[role=tooltip]': {
+        fontFamily: 'Roboto, Helvetica, Arial, sans-serif'
+    },
+    '@global div[role=presentation]': {
+        fontFamily: 'Roboto, Helvetica, Arial, sans-serif'
+    }
+}));

package/src/components/ProfilePotentialMatchesView/ActionButtons.tsx

@@ -0,0 +1,39 @@
+import {useDispatch, useSelector} from 'react-redux';
+import mdmModule, {profile} from '@reltio/mdm-module';
+import {getActionPermissionForMatch, Match, ProfilePotentialMatchesViewConfig} from '@reltio/mdm-sdk';
+import React, {useCallback, useContext, useMemo} from 'react';
+import {ActionButtonMode, MergeButton, NotMatchButton, ViewIdContext} from '@reltio/components';
+
+type Props = {
+    config: ProfilePotentialMatchesViewConfig;
+    match: Match;
+    onStartRequest: () => void;
+    onFinishRequest: () => void;
+};
+export const ActionButtons = ({config, match, onStartRequest, onFinishRequest}: Props) => {
+    const dispatch = useDispatch();
+    const metadata = useSelector(mdmModule.selectors.getMetadata);
+    const entity = useSelector(mdmModule.selectors.getEntity);
+    const {canMerge, canMark} = getActionPermissionForMatch(metadata, config, match.object, entity, match.matchRules);
+    const entities = useMemo(() => {
+        return [match.object];
+    }, [match.object]);
+
+    const actionButtonProps = {
+        entity,
+        entities,
+        mode: ActionButtonMode.iconButton,
+        onStartRequest
+    };
+    const viewId = useContext(ViewIdContext);
+    const onMergeFinish = useCallback(() => {
+        onFinishRequest();
+        dispatch(profile.entity.actions.loadEntity({viewId, uri: entity.uri}));
+    }, [dispatch, entity.uri, onFinishRequest, viewId]);
+    return (
+        <>
+            {canMerge && <MergeButton {...actionButtonProps} onFinishRequest={onMergeFinish} />}
+            {canMark && <NotMatchButton {...actionButtonProps} onFinishRequest={onFinishRequest} />}
+        </>
+    );
+};