@reltio/profile 1.4.1585 → 1.4.1586-mui5

package/src/components/hooks/helpers/index.ts

@@ -0,0 +1,77 @@
+import {equals, filter, identity, is, lensPath, omit, over, pipe, unless} from 'ramda';
+import {
+    AttributeValue,
+    cleanAttributesWith,
+    Entity,
+    findAttributeValuesByTypeUri,
+    getAttributeSource,
+    getLastUriPart,
+    isOv,
+    Metadata,
+    utils
+} from '@reltio/mdm-sdk';
+
+export const getAttributeNameFromAttributeUri = getLastUriPart;
+
+export const search = (value: AttributeValue['value'], searchQuery: string) => {
+    switch (typeof value) {
+        case 'object':
+            return Object.values(value).some((value: AttributeValue[]) => {
+                return value.some(({value}) => {
+                    return search(value, searchQuery);
+                });
+            });
+        default:
+            return utils.strings.search(String(value), searchQuery);
+    }
+};
+
+type Config = {
+    metadata: Metadata;
+    entity: Entity;
+    attributeTypeUri: string;
+    defaultMaxValues?: number;
+    offset?: number;
+    searchQuery?: string;
+};
+
+export const getPagedLocalEntity = async ({
+    metadata,
+    entity,
+    attributeTypeUri,
+    defaultMaxValues = Infinity,
+    offset = 0,
+    searchQuery = ''
+}: Config) => {
+    const values = pipe(
+        findAttributeValuesByTypeUri,
+        filter(({value}) => search(value, searchQuery))
+    )(metadata, entity, attributeTypeUri);
+    const ovValues = filter(isOv, values);
+
+    return {
+        [getAttributeSource(attributeTypeUri)]: {
+            [getAttributeNameFromAttributeUri(attributeTypeUri)]: ovValues.slice(offset, offset + defaultMaxValues),
+            paging: {
+                [attributeTypeUri]: {
+                    totalOvValues: ovValues.length,
+                    totalValues: values.length
+                }
+            }
+        }
+    };
+};
+
+export const areValuesEqual = (value1: AttributeValue, value2: AttributeValue): boolean => {
+    const cleanser =
+        is(Object, value1.value) || is(Object, value2.value)
+            ? over(
+                lensPath(['value']),
+                cleanAttributesWith({
+                    valueTransformer: unless(isOv, omit(['value'])),
+                    deleteEmptyComplex: true
+                })
+            )
+            : identity;
+    return equals(cleanser(value1), cleanser(value2));
+};

package/src/components/hooks/useProfileValidation.ts

@@ -0,0 +1,30 @@
+import {useCallback, useEffect} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
+import mdmModule, {profile} from '@reltio/mdm-module';
+import {debounce, Entity, isDataTenantEntity, isTempUri, Mode} from '@reltio/mdm-sdk';
+
+export const useProfileValidation = () => {
+    const dispatch = useDispatch();
+    const isValidateReadMode: boolean = useSelector(mdmModule.selectors.getValidateReadMode);
+    const entity: Entity = useSelector(mdmModule.selectors.getEntity) || ({} as Entity);
+    const {uri, updatedTime} = entity;
+    const isDTEntity = isDataTenantEntity(entity);
+    const mode: Mode = useSelector(mdmModule.selectors.getMode);
+    const profileViews = useSelector(mdmModule.selectors.getProfileViews);
+    const hasProfileViews = profileViews && profileViews.length > 0;
+
+    const validate = useCallback(
+        debounce((needDispatch: boolean) => {
+            if (needDispatch) {
+                dispatch(profile.actions.validateProfile());
+            }
+        }, 500),
+        [dispatch]
+    );
+
+    useEffect(() => {
+        const needDispatch =
+            isValidateReadMode && !isDTEntity && uri && !isTempUri(uri) && mode === Mode.Viewing && hasProfileViews;
+        validate(needDispatch);
+    }, [validate, isDTEntity, isValidateReadMode, updatedTime, uri, mode, hasProfileViews]);
+};

package/src/components/hooks/useSingleAttributeLoader.ts

@@ -0,0 +1,164 @@
+import {useCallback, useState, useEffect, useMemo, useRef} from 'react';
+import {ifElse, prop, always, has, pathOr, path, partition, propEq} from 'ramda';
+import {useDispatch, useSelector} from 'react-redux';
+import {
+    isDataTenantEntity,
+    getPagedEntity,
+    getAttributeSource,
+    AttributeValue,
+    SearchFilter,
+    findAttributeTypeByUri,
+    isReadableAttribute,
+    isTempUri,
+    isOv,
+    findAttributeValues,
+    isFirstLevelAttributeUri,
+    SingleAttributeViewConfig,
+    getRequestErrorMessage,
+    Paging
+} from '@reltio/mdm-sdk';
+import mdm, {profile, ui} from '@reltio/mdm-module';
+import {useSafePromise, useDidUpdateEffect} from '@reltio/components';
+import {getPagedLocalEntity, getAttributeNameFromAttributeUri} from './helpers';
+import i18n from 'ui-i18n';
+
+type Params = {
+    filters?: SearchFilter[];
+    searchQuery?: string;
+    sorting?: {
+        field: string;
+        order: string;
+    };
+    page: number;
+    showInactive: boolean;
+};
+
+export const useSingleAttributeLoader = <GenericAttributeValue extends AttributeValue>(
+    config: SingleAttributeViewConfig,
+    params: Params
+) => {
+    const {attributeUri, max = 15} = config;
+    const metadata = useSelector(mdm.selectors.getMetadata);
+    const [values, setValues] = useState<GenericAttributeValue[]>([]);
+    const [paging, setPaging] = useState<Paging>(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const safePromise = useSafePromise();
+    const attributeValuesRef = useRef<AttributeValue[]>(null);
+
+    const dispatch = useDispatch();
+    const apiPath = useSelector(mdm.selectors.getApiPath);
+    const tenant = useSelector(mdm.selectors.getTenant);
+    const entity = useSelector(mdm.selectors.getEntityWithDiff);
+
+    const isViewMode = useSelector(mdm.selectors.getIsViewMode);
+    const isHistoryModeEnabled = useSelector(mdm.selectors.getIsHistoryModeEnabled);
+    const diff = useSelector(mdm.selectors.getHistoryDiff);
+
+    const parentUri = entity.uri;
+    const attributeTypeName = getAttributeNameFromAttributeUri(attributeUri);
+    const attributeTypeSource = getAttributeSource(attributeUri);
+    attributeValuesRef.current = findAttributeValues(entity, parentUri, attributeTypeName);
+    const attributeType = useMemo(() => findAttributeTypeByUri(metadata, attributeUri), [metadata, attributeUri]);
+    const {globalFilter} = useSelector(mdm.selectors.getGlobalSearchRequestOptions);
+    const {showInactive} = params;
+    const loadAttributes = useCallback(() => {
+        if (
+            attributeType &&
+            isReadableAttribute(attributeType) &&
+            !isTempUri(parentUri) &&
+            isFirstLevelAttributeUri(attributeUri)
+        ) {
+            setIsLoading(true);
+            const {page, showInactive, ...rest} = params;
+            const request = isDataTenantEntity(entity) || isHistoryModeEnabled ? getPagedLocalEntity : getPagedEntity;
+            safePromise(
+                request({
+                    metadata,
+                    entity,
+                    apiPath,
+                    tenant,
+                    parentUri,
+                    defaultMaxValues: max,
+                    attributeTypeUri: attributeUri,
+                    offset: max * page,
+                    globalFilter,
+                    options: showInactive ? '' : undefined,
+                    ...rest
+                })
+            )
+                .then((response) => {
+                    const attributes = path([attributeTypeSource], response);
+                    const values: GenericAttributeValue[] = pathOr([], [attributeTypeName], attributes);
+                    if (!isHistoryModeEnabled) {
+                        dispatch(
+                            profile.actions.processNextPageOfAttributeValues({
+                                parentUri,
+                                attributeTypeUri: attributeUri,
+                                attributeTypeName,
+                                values
+                            })
+                        );
+                    }
+                    setValues(
+                        values.map((loadedValue) => {
+                            const valueFromEntity = attributeValuesRef.current?.find(propEq('uri', loadedValue.uri));
+                            return (valueFromEntity as GenericAttributeValue) || loadedValue;
+                        })
+                    );
+                    setPaging(path(['paging', attributeUri], attributes));
+                })
+                .catch((error) => {
+                    console.error(error);
+                    setValues([]);
+                    dispatch(ui.actions.errorSet(getRequestErrorMessage(error, i18n.text('Something went wrong'))));
+                })
+                .finally(() => {
+                    setIsLoading(false);
+                });
+        } else {
+            setValues([]);
+            setPaging(null);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        apiPath,
+        parentUri,
+        tenant,
+        attributeUri,
+        max,
+        metadata,
+        params,
+        globalFilter,
+        attributeType,
+        isHistoryModeEnabled,
+        diff
+    ]);
+
+    useEffect(() => {
+        loadAttributes();
+    }, [loadAttributes]);
+
+    useDidUpdateEffect(() => {
+        if (isViewMode) {
+            loadAttributes();
+        }
+    }, [isViewMode]);
+    const partitionByOv = partition(isOv);
+    const [, nonOvValues] = partitionByOv(attributeValuesRef.current || []);
+    const nonVisibleValues: GenericAttributeValue[] = showInactive ? [] : nonOvValues;
+    const totalProp = showInactive ? 'totalValues' : 'totalOvValues';
+    const totalVisibleValues: number = ifElse(has(totalProp), prop(totalProp), always(values.length))(paging);
+    const hasPaging = max < totalVisibleValues;
+    const totalNonVisibleValues = paging?.totalValues
+        ? paging.totalValues - totalVisibleValues
+        : nonVisibleValues.length;
+    return {
+        values,
+        isLoading,
+        hasPaging,
+        totalVisibleValues,
+        attributeType,
+        totalNonVisibleValues,
+        nonVisibleValues
+    };
+};

package/src/components/views/HOCs/styles.ts

@@ -0,0 +1,37 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    dragHandleContainer: {
+        position: 'relative',
+        width: '100%',
+        height: 'inherit'
+    },
+    dragHandleVisibilityArea: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '24px',
+        zIndex: 11,
+        '&:hover $dragHandle': {
+            visibility: 'visible'
+        },
+        '.react-grid-item.static &:hover $dragHandle': {
+            visibility: 'hidden'
+        }
+    },
+    dragHandle: {
+        position: 'absolute',
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        top: '-3px',
+        zIndex: 11,
+        cursor: 'move',
+        visibility: 'hidden'
+    },
+    dragIcon: {
+        transform: 'translateX(-50%) rotate(90deg)',
+        color: 'rgba(0, 0, 0, 0.3)'
+    }
+});

package/src/components/views/HOCs/withDragHandle.tsx

@@ -0,0 +1,26 @@
+import React, {ComponentType} from 'react';
+import classnames from 'classnames';
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+
+import {useStyles} from './styles';
+
+const withDragHandle = <P extends Record<string, unknown>>(Component: ComponentType<P>) => {
+    const WithDragHandle = (props: P) => {
+        const styles = useStyles();
+        return (
+            <div className={styles.dragHandleContainer}>
+                <div className={styles.dragHandleVisibilityArea}>
+                    <div className={classnames('viewDraggableHandle', styles.dragHandle)}>
+                        <DragIndicatorIcon className={styles.dragIcon} />
+                    </div>
+                </div>
+                <Component {...props} />
+            </div>
+        );
+    };
+
+    WithDragHandle.displayName = 'WithDragHandle';
+    return WithDragHandle;
+};
+
+export default withDragHandle;

package/src/components/views/HOCs/withErrorBoundary.tsx

@@ -0,0 +1,27 @@
+import React, {ComponentType} from 'react';
+import i18n from 'ui-i18n';
+import {EMPTY_STATE_ICONS, EMPTY_STATE_VARIANTS, EmptyState, ErrorBoundary} from '@reltio/components';
+
+const withErrorBoundary = <P extends Record<string, unknown>>(Component: ComponentType<P>) => {
+    const WithErrorBoundary = (props: P) => {
+        return (
+            <ErrorBoundary
+                error={
+                    <EmptyState
+                        LogoRenderer={EMPTY_STATE_ICONS.ERROR}
+                        text=""
+                        secondaryText={i18n.text('Something went wrong')}
+                        variant={EMPTY_STATE_VARIANTS.small}
+                    />
+                }
+            >
+                <Component {...props} />
+            </ErrorBoundary>
+        );
+    };
+
+    WithErrorBoundary.displayName = 'WithErrorBoundary';
+    return WithErrorBoundary;
+};
+
+export default withErrorBoundary;

package/src/components/views/StubView.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import classnames from 'classnames';
+import {BasicView} from '@reltio/components';
+
+import {useStyles} from './styles';
+
+type Props = {
+    className?: string;
+};
+
+const StubView = ({className}: Props) => {
+    const styles = useStyles();
+    return (
+        <BasicView className={classnames(styles.stubView, 'viewDraggableHandle', className)}>NOT IMPLEMENTED</BasicView>
+    );
+};
+
+export {StubView};

package/src/components/views/ViewComponent.tsx

@@ -0,0 +1,25 @@
+import React, {memo, Suspense} from 'react';
+import classnames from 'classnames';
+import ViewsFactory, {ViewComponentProps} from './ViewsFactory';
+import {useStyles} from './styles';
+
+const Fallback = () => null;
+
+const ViewComponent = memo(({config, store, isFullscreen, isAutosize, onToggleFullscreen}: ViewComponentProps) => {
+    const styles = useStyles();
+    return (
+        <Suspense fallback={<Fallback />}>
+            {ViewsFactory.getComponent({
+                config,
+                store,
+                className: classnames(styles.component, {[styles.fullHeight]: !isAutosize}),
+                isFullscreen,
+                onToggleFullscreen
+            })}
+        </Suspense>
+    );
+});
+
+ViewComponent.displayName = 'ViewComponent';
+
+export {ViewComponent};

package/src/components/views/ViewsFactory.tsx

@@ -0,0 +1,143 @@
+import React, {lazy} from 'react';
+import {Store} from 'redux';
+import {
+    ProfileViewConfig,
+    ProfileViewTypes,
+    AttributeViewConfig,
+    EntityMapViewConfig,
+    ProfilePotentialMatchesViewConfig,
+    RelationsViewConfig,
+    ImageAttributeViewConfig,
+    SingleAttributeViewConfig,
+    HierarchyPathsViewConfig,
+    HierarchyTreeViewConfig,
+    CustomActionViewConfig
+} from '@reltio/mdm-sdk';
+import {pipe} from 'ramda';
+import {ProfileAttributesView} from '../ProfileAttributesView/ProfileAttributesView';
+import {ProfileSingleAttributeView} from '../ProfileSingleAttributeView/ProfileSingleAttributeView';
+import {ProfileRelationsView} from '../ProfileRelationsView/ProfileRelationsView';
+import {ProfileTableAttributeView} from '../ProfileTableAttributeView/ProfileTableAttributeView';
+import {HierarchyPathsView} from '../HierarchyPathsView';
+import {CustomView} from '../Sandbox/CustomView';
+import withDragHandle from './HOCs/withDragHandle';
+import withErrorBoundary from './HOCs/withErrorBoundary';
+import {StubView} from './StubView';
+import EntityMapView from '../EntityMapView/EntityMapView';
+import {ImageAttributeView} from '../ImageAttributeView/ImageAttributeView';
+import {ProfilePotentialMatchesView} from '../ProfilePotentialMatchesView/ProfilePotentialMatchesView';
+
+const wrapView = <P extends unknown>(component: P): P => pipe(withErrorBoundary, withDragHandle)(component);
+
+const WrappedStubView = wrapView(StubView);
+export const WrappedProfileAttributesView = wrapView(ProfileAttributesView);
+export const WrappedProfileSingleAttributeView = wrapView(ProfileSingleAttributeView);
+export const WrappedProfileTableAttributeView = wrapView(ProfileTableAttributeView);
+export const WrappedProfileRelationsView = wrapView(ProfileRelationsView);
+export const WrappedCustomView = wrapView(CustomView);
+export const WrappedHierarchyPathView = wrapView(HierarchyPathsView);
+export const WrappedProfilePotentialMatchesView = wrapView(ProfilePotentialMatchesView);
+
+export const WrappedHierarchyTreeView = lazy(() =>
+    import(/* webpackMode: "eager" */ '@reltio/hierarchy-tree').then((importedModule) => ({
+        default: wrapView(importedModule.HierarchyTreeView)
+    }))
+);
+
+export const WrappedRelationshipsTableView = lazy(() =>
+    import(/* webpackMode: "eager" */ '@reltio/relations-table').then((importedModule) => ({
+        default: wrapView(importedModule.RelationshipsTableView)
+    }))
+);
+export const WrappedEntityMapView = wrapView(EntityMapView);
+export const WrappedImageAttributeView = wrapView(ImageAttributeView);
+
+export type ViewComponentProps = {
+    store: Store<unknown>;
+    config:
+        | ProfileViewConfig
+        | AttributeViewConfig
+        | SingleAttributeViewConfig
+        | RelationsViewConfig
+        | EntityMapViewConfig
+        | ImageAttributeViewConfig;
+    className?: string;
+    isFullscreen: boolean;
+    isAutosize?: boolean;
+    onToggleFullscreen: (id: string) => void;
+};
+
+class ViewsFactory {
+    static ViewTypes = ProfileViewTypes;
+    static getComponentBy = (
+        propName: string,
+        {store, config, className, isFullscreen, onToggleFullscreen}: ViewComponentProps
+    ) => {
+        switch (config[propName]) {
+            case ViewsFactory.ViewTypes.HierarchyTree:
+                return (
+                    <WrappedHierarchyTreeView
+                        config={config as HierarchyTreeViewConfig}
+                        store={store}
+                        className={className}
+                    />
+                );
+            case ViewsFactory.ViewTypes.HierarchyPaths:
+                return <WrappedHierarchyPathView config={config as HierarchyPathsViewConfig} className={className} />;
+            case ViewsFactory.ViewTypes.RelationsTable:
+                return (
+                    <WrappedRelationshipsTableView
+                        config={config as RelationsViewConfig}
+                        store={store}
+                        className={className}
+                    />
+                );
+            case ViewsFactory.ViewTypes.Relations:
+                return <WrappedProfileRelationsView config={config as RelationsViewConfig} className={className} />;
+            case ViewsFactory.ViewTypes.Attributes:
+                return <WrappedProfileAttributesView className={className} config={config as AttributeViewConfig} />;
+            case ViewsFactory.ViewTypes.SingleAttribute:
+                return (
+                    <WrappedProfileSingleAttributeView
+                        config={config as SingleAttributeViewConfig}
+                        className={className}
+                    />
+                );
+            case ViewsFactory.ViewTypes.AttributeTable:
+                return (
+                    <WrappedProfileTableAttributeView
+                        config={config as SingleAttributeViewConfig}
+                        className={className}
+                    />
+                );
+            case ViewsFactory.ViewTypes.Map:
+                return (
+                    <WrappedEntityMapView
+                        config={config as EntityMapViewConfig}
+                        isFullscreen={isFullscreen}
+                        onToggleFullscreen={onToggleFullscreen}
+                        className={className}
+                    />
+                );
+            case ViewsFactory.ViewTypes.Custom:
+                return <WrappedCustomView config={config as CustomActionViewConfig} className={className} />;
+            case ViewsFactory.ViewTypes.ImageAttribute:
+                return <WrappedImageAttributeView config={config as ImageAttributeViewConfig} className={className} />;
+            case ViewsFactory.ViewTypes.PotentialMatches:
+                return (
+                    <WrappedProfilePotentialMatchesView
+                        config={config as ProfilePotentialMatchesViewConfig}
+                        className={className}
+                    />
+                );
+        }
+    };
+    static getComponent = (props: ViewComponentProps) => {
+        return (
+            ViewsFactory.getComponentBy('class', props) ||
+            ViewsFactory.getComponentBy('react-class', props) || <WrappedStubView className={props.className} />
+        );
+    };
+}
+
+export default ViewsFactory;

package/src/components/views/__tests__/ViewComponent.specs.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import {createStore} from 'redux';
+import {EmptyStub} from '@reltio/components';
+
+import {ViewComponent} from '../ViewComponent';
+import ViewsFactory from '../ViewsFactory';
+import {ProfileViewTypes} from '@reltio/mdm-sdk';
+
+describe('ViewComponent tests', () => {
+    beforeAll(() => {
+        jest.spyOn(ViewsFactory, 'getComponent').mockImplementation(() => <EmptyStub />);
+    });
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should call ViewsFactory.getComponent and render returned component', () => {
+        const props = {
+            store: createStore(() => ({})),
+            config: {id: 'view1', class: ProfileViewTypes.Attributes, point: 'com.reltio.plugins.ui.view' as const},
+            isFullscreen: false,
+            onToggleFullscreen: (_id: string) => {}
+        };
+        const component = shallow(<ViewComponent {...props} />);
+        expect(component.find('Suspense').length).toBe(1);
+        expect(ViewsFactory.getComponent).toHaveBeenCalledWith({
+            ...props,
+            className: 'component fullHeight'
+        });
+        expect(component.find(EmptyStub).length).toBe(1);
+    });
+    it('should call ViewsFactory.getComponent and render returned component with correct className if isAutosize is true', () => {
+        const props = {
+            store: createStore(() => ({})),
+            config: {id: 'view1', class: ProfileViewTypes.HierarchyTree, point: 'com.reltio.plugins.ui.view' as const},
+            isFullscreen: false,
+            onToggleFullscreen: (_id: string) => {}
+        };
+        const component = shallow(<ViewComponent {...props} isAutosize={true} />);
+        expect(component.find('Suspense').length).toBe(1);
+        expect(ViewsFactory.getComponent).toHaveBeenCalledWith({
+            ...props,
+            className: 'component'
+        });
+        expect(component.find(EmptyStub).length).toBe(1);
+    });
+});