@reltio/profile 1.4.1585 → 1.4.1586-mui5

package/src/components/ProfileLayout/__tests__/ProfileLayout.specs.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import {mount, shallow} from 'enzyme';
+import {ProfileLayout} from '../ProfileLayout';
+import {EmptyStub, PopupBoundariesContext, ReltioGridLayout} from '@reltio/components';
+import {ProfileViewTypes} from '@reltio/mdm-sdk';
+
+jest.mock('@reltio/components', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/components'),
+    PopupBoundariesContext: {Provider: jest.fn()},
+    ReltioGridLayout: jest.fn()
+}));
+
+describe('ProfileLayout tests', () => {
+    const props = {
+        entityUri: 'entities/A123bCd',
+        views: [{id: 'view1', class: ProfileViewTypes.Attributes, point: 'com.reltio.plugins.ui.view' as const}],
+        layout: [{id: 'view1', x: 0, y: 0, height: 1, width: 1}],
+        onLayoutChanged: () => {}
+    };
+
+    beforeAll(() => {
+        (ReltioGridLayout as unknown as jest.Mock).mockImplementation(EmptyStub);
+        (PopupBoundariesContext.Provider as unknown as jest.Mock).mockImplementation(({children}) => (
+            <div id="popupBoundariesContextMock">{children}</div>
+        ));
+    });
+
+    it('should render ReltioGridLayout with correct props', () => {
+        const wrapper = shallow(<ProfileLayout {...props} />);
+        const gridLayout = wrapper.find(ReltioGridLayout);
+        expect(gridLayout.prop('views')).toEqual(props.views);
+        expect(gridLayout.prop('layout')).toEqual(props.layout);
+        expect(gridLayout.prop('onLayoutChanged')).toEqual(props.onLayoutChanged);
+        expect(gridLayout.prop('draggableHandle')).toEqual('.viewDraggableHandle');
+        expect(wrapper.find('.scrollWrapper')).toHaveLength(1);
+        expect(wrapper.find('.scrollableContent')).toHaveLength(1);
+        expect(wrapper.find(PopupBoundariesContext.Provider)).toHaveLength(1);
+        expect(wrapper.find(PopupBoundariesContext.Provider).prop('value').priority).toEqual([
+            'left',
+            'right',
+            'top',
+            'bottom'
+        ]);
+    });
+
+    it('should scroll to top .scrollWrapper on entity uri changing', async () => {
+        const wrapper = mount(<ProfileLayout {...props} />);
+        const scrollWrapper = wrapper.find('.scrollWrapper').getDOMNode();
+        scrollWrapper.scrollTop = 1000;
+        wrapper.setProps({
+            entityUri: 'entities/another'
+        });
+        wrapper.update();
+        expect(scrollWrapper.scrollTop).toBe(0);
+    });
+});

package/src/components/ProfileLayout/index.ts

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

package/src/components/ProfileLayout/styles.ts

@@ -0,0 +1,19 @@
+import {makeStyles} from '@mui/styles';
+
+const DEFAULT_MIN_WIDTH = 1024;
+
+type Props = {
+    maxWidth?: number;
+    scrollbarWidth?: number;
+};
+
+export const useStyles = makeStyles({
+    scrollWrapper: {
+        flexGrow: 1,
+        overflow: 'auto'
+    },
+    scrollableContent: ({maxWidth, scrollbarWidth}: Props) => ({
+        minWidth: maxWidth && maxWidth < DEFAULT_MIN_WIDTH ? maxWidth - scrollbarWidth : DEFAULT_MIN_WIDTH,
+        height: '100%'
+    })
+});

package/src/components/ProfileLayoutItem/ProfileLayoutItem.tsx

@@ -0,0 +1,89 @@
+import React, {ReactChildren, ReactNode, useContext} from 'react';
+import {omit} from 'ramda';
+import {ReactReduxContext, useSelector} from 'react-redux';
+import {ReactGridLayoutItem} from '@reltio/components';
+import {CustomScript, CustomScriptPlatform, ProfileViewConfig, ProfileViewTypes} from '@reltio/mdm-sdk';
+import mdm from '@reltio/mdm-module';
+import {ViewComponent} from '../views/ViewComponent';
+import ViewsFactory from '../views/ViewsFactory';
+import classnames from 'classnames';
+import {useStyles} from './styles';
+
+type Props = {
+    layoutItemConfig: ReactGridLayoutItem;
+    views: ProfileViewConfig[];
+    className?: string;
+    children?: ReactChildren;
+    style?: Record<string, unknown>;
+    isFullscreen: boolean;
+    onToggleFullscreen: (id: string) => void;
+    AutosizeComponent?: ReactNode;
+};
+
+const omittingProps = ['onConfigChanged', 'onRemove'];
+
+const getViewTypeByClass = (className: string) =>
+    Object.entries(ProfileViewTypes).find(([_, value]) => className === value)?.[0];
+
+const ProfileLayoutItem = ({
+    layoutItemConfig,
+    views,
+    className,
+    children: ResizeComponent,
+    style,
+    isFullscreen,
+    onToggleFullscreen,
+    AutosizeComponent,
+    ...props
+}: Props) => {
+    const config = views.find(({id}) => layoutItemConfig.i === id);
+    const styles = useStyles();
+    const mapKey = useSelector(mdm.selectors.getGoogleMapKey);
+
+    const {store} = useContext(ReactReduxContext);
+    if (!config) {
+        return null;
+    }
+    const isCustomView = config.class === ViewsFactory.ViewTypes.Custom;
+    if (isCustomView && (config?.action as CustomScript)?.platform === CustomScriptPlatform.CLASSIC) {
+        return null;
+    }
+
+    const isMapView = config.class === ViewsFactory.ViewTypes.Map;
+    if (isMapView && !mapKey) {
+        return null;
+    }
+
+    const reltioClass = getViewTypeByClass(config.class);
+    return (
+        <div
+            {...omit(omittingProps, props)}
+            data-reltio-id={config.id}
+            data-reltio-class={reltioClass || ''}
+            style={style}
+            className={classnames(className, {
+                [styles.item]: !isCustomView,
+                customView: isCustomView
+            })}
+        >
+            <div className={styles.overflowContainer}>
+                <div
+                    data-reltio-id="profile-view-container"
+                    className={classnames({[styles.fixedSizeContainer]: !AutosizeComponent})}
+                >
+                    {AutosizeComponent}
+                    <ViewComponent
+                        store={store}
+                        config={config}
+                        isFullscreen={isFullscreen}
+                        onToggleFullscreen={onToggleFullscreen}
+                        isAutosize={Boolean(AutosizeComponent)}
+                    />
+                </div>
+                {ResizeComponent}
+            </div>
+        </div>
+    );
+};
+
+export {ProfileLayoutItem};

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

@@ -0,0 +1,165 @@
+import React from 'react';
+import {Provider} from 'react-redux';
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {CustomScriptPlatform, ProfileViewTypes} from '@reltio/mdm-sdk';
+import {createTestStore} from '../../../../../../__mocks__/store-utils';
+import {createInitialState} from './data/store.data';
+import {ProfileLayoutItem} from '../ProfileLayoutItem';
+
+describe('ProfileLayoutItem tests', () => {
+    const views = [
+        {
+            id: 'testId',
+            class: ProfileViewTypes.Attributes,
+            point: 'com.reltio.plugins.ui.view' as const
+        }
+    ];
+    const layoutItemConfig = {
+        i: 'testId',
+        x: 0,
+        y: 0,
+        w: 1,
+        h: 1
+    };
+    const setUp = ({initialState = createInitialState(), props = {}} = {}) => {
+        const defaultProps = {
+            views,
+            layoutItemConfig,
+            isFullscreen: false,
+            onToggleFullscreen: jest.fn()
+        };
+        const user = userEvent.setup();
+        const store = createTestStore(initialState);
+        const Providers = ({children}: {children: React.ReactNode}) => <Provider store={store}>{children}</Provider>;
+        return {user, ...render(<ProfileLayoutItem {...defaultProps} {...props} />, {wrapper: Providers})};
+    };
+
+    it('should render nothing if layout item config is not found in views', () => {
+        const layoutItemConfig = {
+            i: 'testUndefined',
+            x: 0,
+            y: 0,
+            w: 1,
+            h: 1
+        };
+
+        const {container} = setUp({props: {layoutItemConfig}});
+        expect(container).toBeEmptyDOMElement();
+    });
+
+    it('should render ViewComponent component', () => {
+        setUp();
+        const container = screen.getByTestId('testId');
+        expect(container).toBeInTheDocument();
+        expect(container).not.toHaveClass('customView');
+        expect(container).toHaveClass('item');
+        expect(container).toHaveAttribute('data-reltio-class', 'Attributes');
+        expect(screen.getByTestId('profile-view-container')).toHaveClass('fixedSizeContainer');
+    });
+
+    it('should pass correct fullscreen options', async () => {
+        const views = [
+            {
+                id: 'testId',
+                class: ProfileViewTypes.Map,
+                point: 'com.reltio.plugins.ui.view' as const,
+                action: {}
+            }
+        ];
+        const onToggleFullscreen = jest.fn();
+        const initialState = createInitialState({ui: {keys: {googleMapKey: 'googlemapkey'}}});
+        const {user} = setUp({initialState, props: {views, isFullscreen: true, onToggleFullscreen}});
+
+        await user.click(screen.getByRole('button'));
+        expect(onToggleFullscreen).toBeCalledTimes(1);
+    });
+
+    it('should render no style for custom view component', () => {
+        const views = [
+            {
+                id: 'testId',
+                class: ProfileViewTypes.Custom,
+                point: 'com.reltio.plugins.ui.view' as const,
+                files: ''
+            }
+        ];
+        setUp({props: {views}});
+        const container = screen.getByTestId('testId');
+        expect(container).toHaveClass('customView');
+        expect(container).toHaveAttribute('data-reltio-class', 'Custom');
+        expect(container).not.toHaveClass('item');
+    });
+
+    it('should render AutosizeComponent', () => {
+        setUp({props: {AutosizeComponent: <div data-reltio-id="autosize-component" />}});
+
+        const autosizeComponent = screen.getByTestId('autosize-component');
+        expect(autosizeComponent).toBeInTheDocument();
+        expect(screen.getByTestId('profile-view-container')).not.toHaveClass('fixedSizeContainer');
+    });
+
+    it('should not render ViewComponent if unsupported custom view', () => {
+        const views = [
+            {
+                id: 'testUnsupported',
+                class: ProfileViewTypes.Custom,
+                point: 'com.reltio.plugins.ui.view' as const,
+                action: {
+                    platform: CustomScriptPlatform.CLASSIC,
+                    files: []
+                }
+            }
+        ];
+        setUp({props: {views}});
+        expect(screen.queryByTestId('testUnsupported')).not.toBeInTheDocument();
+    });
+
+    it('should not render MapView if there is no GoogleMapKey', () => {
+        const views = [
+            {
+                id: 'testId',
+                class: ProfileViewTypes.Map,
+                point: 'com.reltio.plugins.ui.view' as const,
+                action: {}
+            }
+        ];
+
+        setUp({props: {views}});
+        expect(screen.queryByTestId('testId')).not.toBeInTheDocument();
+    });
+
+    it('should render MapView if GoogleMapKey is provided', async () => {
+        const views = [
+            {
+                id: 'testId',
+                class: ProfileViewTypes.Map,
+                point: 'com.reltio.plugins.ui.view' as const,
+                action: {}
+            }
+        ];
+
+        const initialState = createInitialState({ui: {keys: {googleMapKey: 'googlemapkey'}}});
+        setUp({initialState, props: {views}});
+        await screen.findByTestId('reltio-linear-load-indicator');
+        const container = screen.getByTestId('testId');
+        expect(container).toBeInTheDocument();
+        expect(container).toHaveAttribute('data-reltio-class', 'Map');
+    });
+
+    it('should not fail if class is not found', () => {
+        const views = [
+            {
+                id: 'testId',
+                class: 'someclass' as ProfileViewTypes,
+                point: 'com.reltio.plugins.ui.view' as const
+            }
+        ];
+
+        setUp({props: {views}});
+        const container = screen.getByTestId('testId');
+        expect(container).toBeInTheDocument();
+        expect(container).toHaveAttribute('data-reltio-class', '');
+        expect(screen.getByText('NOT IMPLEMENTED'));
+    });
+});

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

@@ -0,0 +1,29 @@
+export const createInitialState = ({ui = {}} = {}) => {
+    const tenant = 'tenantName';
+    return {
+        metadata: {
+            [tenant]: {
+                uri: 'configuration',
+                entityTypes: [
+                    {
+                        uri: 'configuration/entityTypes/HCP',
+                        attributes: [
+                            {
+                                label: 'SimpleString',
+                                name: 'SimpleString',
+                                uri: 'configuration/entityTypes/HCP/attributes/SimpleString',
+                                type: 'String',
+                                required: true
+                            }
+                        ]
+                    }
+                ],
+                relationTypes: []
+            }
+        },
+        tenant: {
+            id: tenant
+        },
+        ui
+    };
+};

package/src/components/ProfileLayoutItem/index.ts

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

package/src/components/ProfileLayoutItem/styles.ts

@@ -0,0 +1,13 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+    item: theme.basicView,
+    fixedSizeContainer: {
+        height: '100%'
+    },
+    overflowContainer: {
+        width: '100%',
+        height: '100%',
+        overflow: 'hidden'
+    }
+}));

package/src/components/ProfilePerspectiveResizablePanes/ProfilePerspectiveResizablePanes.tsx

@@ -0,0 +1,34 @@
+import React, {memo} from 'react';
+import {pipe, pluck, propEq, reject} from 'ramda';
+import {ProfileResizablePanes} from '@reltio/components';
+import {RightSidePanel} from '../RightSidePanel/RightSidePanel';
+import {useProfileRightSidePanelElements} from '../ProfilePerspectiveView/hooks/useProfileRightSidePanelElements';
+
+import {useStyles} from './styles';
+
+type Props = {
+    perspectiveId: string;
+    commentId?: string;
+    hideHistory?: boolean;
+    children: React.ReactElement;
+};
+
+export const ProfilePerspectiveResizablePanes = memo(({perspectiveId, commentId, hideHistory, children}: Props) => {
+    const styles = useStyles();
+    const {defaultTab, tabs} = useProfileRightSidePanelElements({commentId, hideHistory, perspectiveId});
+
+    return (
+        <div className={styles.profileContainer}>
+            <ProfileResizablePanes
+                defaultTab={defaultTab}
+                perspectiveId={perspectiveId}
+                buttonsProps={pipe(reject(propEq('hidden', true)), pluck('buttonProps'))(tabs)}
+            >
+                {children}
+                <RightSidePanel tabs={tabs} />
+            </ProfileResizablePanes>
+        </div>
+    );
+});
+
+ProfilePerspectiveResizablePanes.displayName = 'ProfilePerspectiveView';

package/src/components/ProfilePerspectiveResizablePanes/styles.ts

@@ -0,0 +1,9 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles(() => ({
+    profileContainer: {
+        display: 'flex',
+        overflow: 'hidden',
+        flexGrow: 1
+    }
+}));

package/src/components/ProfilePerspectiveView/ProfilePerspectiveView.tsx

@@ -0,0 +1,193 @@
+import React, {memo, useContext, useMemo, useEffect} from 'react';
+import i18n from 'ui-i18n';
+import {profile} from '@reltio/mdm-module';
+import {useDispatch, useSelector} from 'react-redux';
+import {Entity, getProfileObjectIdsForCollaboration, Mode, ProfilePerspectiveConfig, isTempUri} from '@reltio/mdm-sdk';
+import mdm, {HistoryEvent} from '@reltio/mdm-module';
+import {
+    CollaborationContext,
+    WorkflowTasksContext,
+    EMPTY_STATE_ICONS,
+    EMPTY_STATE_VARIANTS,
+    EmptyState,
+    LinearLoadIndicator,
+    ProfilePerspectiveViewContext,
+    SearchValueContext,
+    useCollaboration,
+    HistoryDiffContext,
+    useHistoryDiff,
+    useHistorySlice,
+    useEntityLoadingIndication,
+    ScrollToElementProvider,
+    CollaborationContextProvider,
+    useLayoutResetter
+} from '@reltio/components';
+import {ProfileSavedState} from '../../types';
+
+import {ProfileLayout} from '../ProfileLayout';
+import {Notifications} from '../Notifications';
+import {PerspectiveProfileBand} from '../PerspectiveProfileBand';
+import {ProfilePerspectiveResizablePanes} from '../ProfilePerspectiveResizablePanes/ProfilePerspectiveResizablePanes';
+import {ProfileErrorsPanel} from '../ProfileErrorsPanel';
+import {useProfileValidation} from '../hooks/useProfileValidation';
+import {useProfileLayout} from './hooks/useProfileLayout';
+import {useWorkflowTasks} from './hooks/useWorkflowTasks';
+import {BackgroundProcessIndicator} from '../BackgroundProcessIndicator/BackgroundProcessIndicator';
+import {useBackgroundProcessIndicator} from './hooks/useBackgroundProcessIndicator';
+
+import {useStyles} from './styles';
+
+type Props = {
+    config: ProfilePerspectiveConfig;
+    saveState: (state: Record<string, ProfileSavedState>) => void;
+    getSavedState: () => Promise<Record<string, ProfileSavedState>>;
+    commentId?: string;
+};
+
+const perspectiveId = 'profile';
+
+const ProfilePerspectiveView = memo(({config, saveState, getSavedState, commentId}: Props) => {
+    const {maxWidth, profileBand, workflow, frozen} = config || {};
+    const styles = useStyles({maxWidth});
+
+    const entity: Entity = useSelector(mdm.selectors.getEntity);
+    const historyEvent: HistoryEvent = useSelector(mdm.selectors.getHistoryEvent);
+    const isHistoryActive = useSelector(mdm.selectors.getIsHistoryModeEnabled);
+    const keywordValue = useSelector(mdm.selectors.getSearchKeyword)?.value || '';
+    const mode = useSelector(mdm.selectors.getMode);
+
+    const dispatch = useDispatch();
+    const historyDiff = useHistoryDiff();
+    const workflowTasks = useWorkflowTasks(workflow);
+    const {isLoading: isEntityLoading} = useEntityLoadingIndication();
+
+    const {type: entityTypeUri, uri: entityUri, updatedTime: entityUpdatedTime} = entity || {};
+    const {
+        onRefreshProfile,
+        onCloseBackgroundProcessIndicator,
+        cancelUpdateProcess,
+        isOpenBackgroundProcessIndicator,
+        backgroundUpdateStatus
+    } = useBackgroundProcessIndicator({entityUri, entityTypeUri, entityUpdatedTime});
+    const objectIds = useMemo(() => getProfileObjectIdsForCollaboration(entity), [entity]);
+    const emptyCollaboration = useContext(CollaborationContext);
+    const collaboration = useCollaboration({objectIds});
+
+    const {
+        views,
+        layout,
+        isLoaded: isLayoutLoaded,
+        onLayoutReset,
+        onResetUndo,
+        handleLayoutChange
+    } = useProfileLayout({
+        config,
+        entityTypeUri,
+        saveState,
+        getSavedState
+    });
+    useHistorySlice({entity, historyEvent});
+    useProfileValidation();
+
+    useEffect(() => {
+        dispatch(profile.views.actions.profileViewsSet(views));
+    }, [dispatch, views]);
+
+    useEffect(() => {
+        if (config.sidePanelViews) {
+            dispatch(profile.sidePanelViews.actions.sidePanelViewsLoaded(config.sidePanelViews));
+        }
+    }, [config]); // eslint-disable-line
+
+    useEffect(() => {
+        return () => cancelUpdateProcess();
+    }, [entityUri, mode]);
+
+    // possible for a short time during createProfile saga execution
+    const hideLayout = mode === Mode.Viewing && isTempUri(entityUri);
+
+    const renderEmptyState = (text: string) => (
+        <div className={styles.emptyState}>
+            <EmptyState LogoRenderer={EMPTY_STATE_ICONS.NO_DATA} text={text} variant={EMPTY_STATE_VARIANTS.embedded} />
+        </div>
+    );
+
+    const {SnackbarRenderer, resetLayout} = useLayoutResetter({onLayoutReset, onResetUndo});
+    const menuItems = useMemo(
+        () => [
+            {
+                primary: i18n.text('Reset layout'),
+                secondary: i18n.text('Restore the default layout without saving any changes'),
+                onClick: resetLayout
+            }
+        ],
+        [resetLayout]
+    );
+
+    return (
+        <ProfilePerspectiveViewContext.Provider value={true}>
+            <CollaborationContextProvider collaboration={isHistoryActive ? emptyCollaboration : collaboration}>
+                <WorkflowTasksContext.Provider value={workflowTasks}>
+                    <HistoryDiffContext.Provider value={historyDiff}>
+                        <SearchValueContext.Provider value={keywordValue}>
+                            <ScrollToElementProvider>
+                                <div className={styles.perspectiveView}>
+                                    {isLayoutLoaded && entityUri ? (
+                                        <ProfilePerspectiveResizablePanes
+                                            commentId={commentId}
+                                            perspectiveId={perspectiveId}
+                                        >
+                                            <div className={styles.profileWrapper}>
+                                                <PerspectiveProfileBand
+                                                    profileBandConfig={profileBand}
+                                                    showMenu={!frozen}
+                                                    menuItems={menuItems}
+                                                />
+                                                {isEntityLoading ? (
+                                                    renderEmptyState(i18n.text('Loading'))
+                                                ) : (
+                                                    <>
+                                                        {isOpenBackgroundProcessIndicator && (
+                                                            <BackgroundProcessIndicator
+                                                                label={entity.label}
+                                                                onClose={onCloseBackgroundProcessIndicator}
+                                                                onRefresh={onRefreshProfile}
+                                                                status={backgroundUpdateStatus}
+                                                            />
+                                                        )}
+                                                        {!isHistoryActive && <ProfileErrorsPanel />}
+                                                        {!hideLayout && (
+                                                            <ProfileLayout
+                                                                maxWidth={maxWidth}
+                                                                views={views}
+                                                                layout={layout}
+                                                                frozen={frozen}
+                                                                entityUri={entityUri}
+                                                                onLayoutChanged={handleLayoutChange}
+                                                            />
+                                                        )}
+                                                    </>
+                                                )}
+                                            </div>
+                                        </ProfilePerspectiveResizablePanes>
+                                    ) : (
+                                        <>
+                                            <LinearLoadIndicator />
+                                            {renderEmptyState(i18n.text('No data to display.'))}
+                                        </>
+                                    )}
+                                    <Notifications />
+                                    <SnackbarRenderer />
+                                </div>
+                            </ScrollToElementProvider>
+                        </SearchValueContext.Provider>
+                    </HistoryDiffContext.Provider>
+                </WorkflowTasksContext.Provider>
+            </CollaborationContextProvider>
+        </ProfilePerspectiveViewContext.Provider>
+    );
+});
+
+ProfilePerspectiveView.displayName = 'ProfilePerspectiveView';
+
+export {ProfilePerspectiveView};