@reltio/profile 1.4.1585 → 1.4.1586-mui5

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

@@ -0,0 +1,103 @@
+export const getMetadata = ({tenant}) => ({
+    [tenant]: {
+        uri: 'configuration',
+        entityTypes: [
+            {
+                uri: 'configuration/entityTypes/HCP',
+                attributes: [
+                    {
+                        uri: 'configuration/entityTypes/HCP/attributes/FirstLevelNested',
+                        name: 'FirstLevelNested',
+                        type: 'Nested',
+                        attributes: [
+                            {
+                                label: 'FirstLevelNestedSub1_HCP',
+                                name: 'FirstLevelNestedSub1',
+                                uri: 'configuration/entityTypes/HCP/attributes/FirstLevelNested/attributes/FirstLevelNestedSub1',
+                                type: 'String',
+                                required: true
+                            }
+                        ]
+                    },
+                    {
+                        uri: 'configuration/entityTypes/HCP/attributes/CountryCode',
+                        name: 'CountryCode',
+                        type: 'String'
+                    },
+                    {
+                        uri: 'configuration/entityTypes/HCP/attributes/ContactPreference',
+                        name: 'ContactPreference',
+                        type: 'Nested',
+                        attributes: [
+                            {
+                                label: 'Communication Channel Name',
+                                name: 'ChannelName',
+                                uri: 'configuration/entityTypes/HCP/attributes/ContactPreference/attributes/ChannelName',
+                                type: 'String',
+                                required: true,
+                                dependentLookupCode: 'CHANNEL_NAME_CD',
+                                dependentLookupAttributes: [
+                                    'configuration/entityTypes/HCP/attributes/ContactPreference/attributes/ClassificationName'
+                                ]
+                            },
+                            {
+                                label: 'Communication Classification',
+                                name: 'ClassificationName',
+                                uri: 'configuration/entityTypes/HCP/attributes/ContactPreference/attributes/ClassificationName',
+                                type: 'String',
+                                required: true,
+                                dependentLookupCode: 'CLASSIFICATION_NAME_CD'
+                            }
+                        ],
+                        required: true,
+                        dataLabelPattern: '{ClassificationName} [- {ChannelName}]'
+                    },
+                    {
+                        uri: 'configuration/entityTypes/HCP/attributes/Test',
+                        name: 'Test',
+                        type: 'Nested',
+                        attributes: [
+                            {
+                                label: 'Country Code Lookup',
+                                name: 'CountryCodeLookup',
+                                uri: 'configuration/entityTypes/HCP/attributes/Test/attributes/CountryCodeLookup',
+                                type: 'String',
+                                required: true,
+                                defaultValue: 'PT',
+                                dependentLookupCode: 'COUNTRY_CD'
+                            }
+                        ],
+                        required: true,
+                        dataLabelPattern: '{CountryCodeLookup}'
+                    }
+                ],
+                analyticsAttributes: [],
+                label: 'HCP'
+            },
+            {
+                uri: 'configuration/entityTypes/HCA',
+                attributes: [
+                    {
+                        label: 'Address',
+                        name: 'HCPtoHCA',
+                        type: 'Reference',
+                        uri: 'configuration/entityTypes/HCA/attributes/HCPtoHCA',
+                        referencedEntityTypeURI: 'configuration/entityTypes/HCP',
+                        relationshipTypeURI: 'configuration/relationTypes/HCPtoHCA',
+                        referencedAttributeURIs: ['configuration/entityTypes/HCP/attributes/ContactPreference'],
+                        required: true
+                    }
+                ],
+                label: 'HCA'
+            }
+        ],
+        relationTypes: [
+            {
+                uri: 'configuration/relationTypes/HCPtoHCA',
+                label: 'Affiliated with',
+                description: 'test',
+                attributes: []
+            }
+        ]
+    }
+});

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

@@ -0,0 +1,42 @@
+import {Mode} from '@reltio/mdm-sdk';
+import {getMetadata} from './metadata.data';
+
+export const createInitialState = ({mode = Mode.Viewing, entityTypeUri = 'configuration/entityTypes/HCP'} = {}) => {
+    const tenant = 't1';
+    return {
+        metadata: getMetadata({tenant}),
+        profile: {
+            entity: {
+                uri: 'entities/1rIaPEx4',
+                type: entityTypeUri,
+                attributes: {}
+            },
+            modifiedEntities: {},
+            views: [],
+            history: {},
+            mode,
+            dependentLookups: {
+                structure: {},
+                editors: {},
+                initedTypeUris: ['']
+            }
+        },
+        tenant: {
+            id: tenant
+        },
+        ui: {
+            paths: {
+                apiPath: 'https://tst-01.reltio.com/reltio'
+            }
+        },
+        search: {
+            searchOptions: {
+                searchByOv: true,
+                ovOnly: true
+            },
+            globalFilter: {
+                query: null
+            }
+        }
+    };
+};

package/src/components/ProfileSingleAttributeView/components/FilterButton/FilterButton.tsx

@@ -0,0 +1,63 @@
+import React, {useContext, useRef, useState} from 'react';
+import classnames from 'classnames';
+import i18n from 'ui-i18n';
+import Popover from '@mui/material/Popover';
+import Button from '@mui/material/Button';
+import FilterIcon from '@mui/icons-material/FilterList';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+
+import {SingleAttributeContext} from '../../contexts/SingleAttributeContext';
+import {useStyles} from './styles';
+
+type Props = {
+    className?: string;
+};
+
+const FilterButton = ({className}: Props) => {
+    const styles = useStyles();
+    const buttonRef = useRef();
+    const [isOpen, setIsOpen] = useState(false);
+    const {showInactive, toggleShowInactive} = useContext(SingleAttributeContext);
+
+    const togglePopup = () => setIsOpen((open) => !open);
+
+    return (
+        <>
+            <Button ref={buttonRef} classes={{root: classnames(styles.triggerButton, className)}} onClick={togglePopup}>
+                <FilterIcon />
+            </Button>
+            <Popover
+                open={isOpen}
+                classes={{paper: styles.popupContent}}
+                anchorEl={buttonRef.current}
+                onClose={togglePopup}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'right'
+                }}
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right'
+                }}
+            >
+                <FormControlLabel
+                    classes={{
+                        root: styles.checkboxControlRoot,
+                        label: styles.checkboxControlLabel
+                    }}
+                    control={
+                        <Checkbox
+                            className={styles.checkboxControlCheckbox}
+                            checked={showInactive}
+                            onChange={(e) => toggleShowInactive(e.target.checked)}
+                        />
+                    }
+                    label={i18n.text('Show inactive values')}
+                />
+            </Popover>
+        </>
+    );
+};
+
+export default FilterButton;

package/src/components/ProfileSingleAttributeView/components/FilterButton/__tests__/FilterButton.spec.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import {ReactWrapper, mount} from 'enzyme';
+import Button from '@mui/material/Button';
+import Popover from '@mui/material/Popover';
+import FormControlLabel from '@mui/material/FormControlLabel';
+
+import FilterButton from '../FilterButton';
+import {SingleAttributeContext} from '../../../contexts/SingleAttributeContext';
+
+const singleAttribute = {
+    searchQuery: '',
+    setSearchQuery: jest.fn(),
+    values: [],
+    page: 1,
+    setPage: jest.fn(),
+    isLoading: false,
+    showInactive: false,
+    toggleShowInactive: jest.fn(),
+    hasPaging: true,
+    totalVisibleValues: 0,
+    totalNonVisibleValues: 0,
+    nonVisibleValues: [],
+    attributeType: {
+        name: 'name',
+        type: 'type',
+        uri: 'uri'
+    }
+};
+
+const findTriggerButton = (component) => component.find(Button);
+const findPopover = (component) => component.find(Popover);
+const togglePopover = (component) => findTriggerButton(component).find('button').simulate('click');
+const findControl = (component) => findPopover(component).find(FormControlLabel);
+const findCheckbox = (component) => {
+    return new ReactWrapper(findControl(component).prop('control'));
+};
+
+describe('FilterButton tests', () => {
+    it('should render Button and closed Popover', () => {
+        const component = mount(
+            <SingleAttributeContext.Provider value={singleAttribute}>
+                <FilterButton />
+            </SingleAttributeContext.Provider>
+        );
+        expect(findTriggerButton).toHaveLength(1);
+        const popover = findPopover(component);
+        expect(popover.length).toBe(1);
+        expect(popover.prop('open')).toBe(false);
+    });
+
+    it('should toggle Popover after click on filter Button', () => {
+        const component = mount(
+            <SingleAttributeContext.Provider value={singleAttribute}>
+                <FilterButton />
+            </SingleAttributeContext.Provider>
+        );
+        expect(findPopover(component).prop('open')).toBe(false);
+        findTriggerButton(component).find('button').simulate('click');
+        expect(findPopover(component).prop('open')).toBe(true);
+        findTriggerButton(component).find('button').simulate('click');
+        expect(findPopover(component).prop('open')).toBe(false);
+    });
+
+    it('should render checkbox with initial values according context', () => {
+        const component = mount(
+            <SingleAttributeContext.Provider value={singleAttribute}>
+                <FilterButton />
+            </SingleAttributeContext.Provider>
+        );
+        togglePopover(component);
+        const control = findControl(component);
+        expect(control.length).toBe(1);
+        const checkbox = findCheckbox(component);
+        expect(checkbox.length).toBe(1);
+        expect(checkbox.prop('checked')).toBe(false);
+    });
+
+    it('should call "toggleShowInactive" on checkbox change', () => {
+        const component = mount(
+            <SingleAttributeContext.Provider value={singleAttribute}>
+                <FilterButton />
+            </SingleAttributeContext.Provider>
+        );
+        togglePopover(component);
+        const checkbox = findCheckbox(component);
+        (checkbox.prop('onChange') as (target) => void)({
+            target: {
+                checked: true
+            }
+        });
+        expect(singleAttribute.toggleShowInactive).toHaveBeenCalledWith(true);
+    });
+});

package/src/components/ProfileSingleAttributeView/components/FilterButton/styles.ts

@@ -0,0 +1,27 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles(() => ({
+    triggerButton: {
+        minWidth: 0,
+        color: 'rgba(0,0,0,0.54)',
+        width: '36px'
+    },
+    popupContent: {
+        paddingTop: '19px',
+        paddingBottom: '23px',
+        paddingLeft: '23px',
+        paddingRight: '23px',
+        maxWidth: '180px',
+        width: '40%'
+    },
+    checkboxControlRoot: {
+        marginTop: '6px',
+        marginLeft: '-12px'
+    },
+    checkboxControlLabel: {
+        fontSize: '0.85rem'
+    },
+    checkboxControlCheckbox: {
+        marginRight: '5px'
+    }
+}));

package/src/components/ProfileSingleAttributeView/components/SingleAttributeEditableContent/SingleAttributeEditableContent.tsx

@@ -0,0 +1,204 @@
+import React, {useCallback, useContext, useMemo} from 'react';
+import i18n from 'ui-i18n';
+import {always, cond, isEmpty, map, pathOr, pipe, prop, propEq} from 'ramda';
+import {useDispatch, useSelector} from 'react-redux';
+import Button from '@mui/material/Button';
+import AddIcon from '@mui/icons-material/Add';
+import Divider from '@mui/material/Divider';
+import Typography from '@mui/material/Typography';
+import classnames from 'classnames';
+import {
+    CardinalityMessage,
+    EditableAttribute,
+    ErrorMessage,
+    isHighlightedErrorType,
+    ScrollToElementContext,
+    useScrollToAttributeError,
+    ViewIdContext,
+    withContext
+} from '@reltio/components';
+import mdmModule, {profile} from '@reltio/mdm-module';
+import {
+    AttributeType,
+    AttributeValue,
+    checkCanCreateAttribute,
+    createNewAttribute,
+    Entity,
+    getAttributeOwnError,
+    getAttributePagerActiveTypeErrorMessage,
+    getAttributeSource,
+    isComplexAttribute,
+    isEmptyValue,
+    isOv,
+    isTempUri,
+    AttributeItem,
+    isAttributeTypeError,
+    AttributeError
+} from '@reltio/mdm-sdk';
+import {areValuesEqual} from '../../../hooks/helpers';
+
+import {useStyles} from './styles';
+
+type Props = {
+    values: AttributeValue[];
+    attributeType: AttributeType;
+    parentUri: string;
+    showInactive: boolean;
+    noDataText: string;
+    highlightedError?: React.ContextType<typeof ScrollToElementContext>;
+};
+
+const emptyArray = [];
+
+const SingleAttributeEditableContent = ({
+    values,
+    attributeType,
+    parentUri,
+    showInactive,
+    noDataText,
+    highlightedError
+}: Props) => {
+    const styles = useStyles();
+
+    const {uri: attributeTypeUri, required: isRequired, cardinality, name} = attributeType;
+    const dispatch = useDispatch();
+    const viewId = useContext(ViewIdContext);
+    const entity = useSelector(mdmModule.selectors.getEntity);
+    const modifiedEntity = useSelector(
+        (state) => mdmModule.selectors.getModifiedEntity(state, entity.uri) || ({} as Entity)
+    );
+    const errors = useSelector((state) =>
+        mdmModule.selectors.getActiveErrorsForAttributesPager(state, parentUri, attributeType)
+    );
+    const errorMessage = useSelector((state) =>
+        getAttributePagerActiveTypeErrorMessage(parentUri, attributeType, mdmModule.selectors.getProfileErrors(state))
+    );
+    const mode = useSelector(mdmModule.selectors.getMode);
+    const attributeSource = getAttributeSource(attributeType);
+    const entityValuesUris: string[] = pipe(pathOr(emptyArray, [attributeSource, name]), map(prop('uri')))(entity);
+    const modifiedEntityValues: AttributeValue[] = pathOr(emptyArray, [attributeSource, name], modifiedEntity);
+    const modifiedEntityValuesUris: string[] = modifiedEntityValues.map(prop('uri'));
+    const showEmptyEditors = isTempUri(entity.uri);
+
+    const emptyEditorValue: AttributeValue = useMemo(
+        () =>
+            createNewAttribute({
+                parentUri,
+                attributeType
+            }),
+        [parentUri, attributeType]
+    );
+
+    const {ref, errorClassName} = useScrollToAttributeError({highlightedError, isSimple: true});
+
+    const isModifiedEntityValuesEmpty = isEmptyValue(modifiedEntityValues);
+    const showEmpty = isRequired && isModifiedEntityValuesEmpty;
+
+    const newValues = showEmpty ? [emptyEditorValue] : modifiedEntityValues.filter(pipe(prop('uri'), isTempUri));
+
+    const onAddAttributes = useCallback(
+        (params: AttributeItem[]) =>
+            pipe(profile.actions.addAttributes, dispatch)(params.map((param) => ({...param, viewId}))),
+        [viewId, dispatch]
+    );
+
+    const onChangeAttribute = useCallback(
+        (params: AttributeItem) => pipe(profile.actions.modifyAttribute, dispatch)({...params, viewId}),
+        [viewId, dispatch]
+    );
+
+    const onDeleteAttribute = useCallback(
+        (params: AttributeItem) => pipe(profile.actions.removeAttribute, dispatch)({...params, viewId}),
+        [viewId, dispatch]
+    );
+
+    const onDeactivateError = useCallback(pipe(profile.errors.actions.errorDeactivated, dispatch), [dispatch]);
+
+    const onAdd = useCallback(() => {
+        const attribute: AttributeItem = {
+            parentUri,
+            attributeType
+        };
+
+        return onAddAttributes(
+            showEmpty && !isComplexAttribute(attributeType.type) ? [attribute, attribute] : [attribute]
+        );
+    }, [onAddAttributes, parentUri, attributeType, showEmpty]);
+
+    const canCreate = checkCanCreateAttribute({attributeType, mode});
+
+    const commonProps = {
+        attributeType: attributeType,
+        errors,
+        crosswalks: modifiedEntity.crosswalks,
+        mode,
+        onAddAttributes,
+        onChangeAttribute,
+        onDeactivateError,
+        showNonOv: showInactive
+    };
+    const isEmptyAttributeList = newValues.length === 0 && values.length === 0;
+    return (
+        !isEmpty(modifiedEntity) && (
+            <div ref={ref} className={errorClassName}>
+                <CardinalityMessage cardinality={cardinality} />
+                <ErrorMessage message={errorMessage} />
+                {canCreate && (
+                    <Button color="primary" onClick={onAdd} className={styles.moreButton}>
+                        <AddIcon classes={{root: styles.icon}} />
+                        <div className={styles.buttonLabel}>{i18n.text('Add')}</div>
+                    </Button>
+                )}
+                {newValues.map((value, idx) => (
+                    <EditableAttribute
+                        key={value.uri}
+                        {...commonProps}
+                        attributeValue={value}
+                        lazy={showEmpty && !isRequired}
+                        showEmptyEditors={showEmptyEditors}
+                        ownError={getAttributeOwnError(value, idx, attributeTypeUri, errors)}
+                        onDeleteAttribute={onDeleteAttribute}
+                        isEmptyEditor={showEmpty}
+                    />
+                ))}
+                {newValues.length > 0 && values.length > 0 && <Divider className={styles.divider} />}
+                {values.map((originalValue) => {
+                    const modifiedEntityValue = modifiedEntityValues.find(propEq('uri', originalValue.uri));
+                    const value = modifiedEntityValue || originalValue;
+                    const deleted =
+                        entityValuesUris.includes(value.uri) && !modifiedEntityValuesUris.includes(value.uri);
+                    const edited =
+                        !deleted && modifiedEntityValue && !areValuesEqual(modifiedEntityValue, originalValue);
+                    const state = cond([
+                        [always(deleted), always('deleted')],
+                        [always(edited), always('edited')]
+                    ])();
+                    return (
+                        <div key={value.uri} className={classnames({[styles.ovFalse]: !isOv(value)})}>
+                            <EditableAttribute
+                                {...commonProps}
+                                attributeValue={value}
+                                ownError={getAttributeOwnError(value, null, attributeTypeUri, errors)}
+                                onDeleteAttribute={onDeleteAttribute}
+                                state={state}
+                            />
+                        </div>
+                    );
+                })}
+                {isEmptyAttributeList && <Typography className={styles.noData}>{noDataText}</Typography>}
+            </div>
+        )
+    );
+};
+
+export default withContext(
+    ScrollToElementContext,
+    (contextValue, {parentUri, attributeType}) => {
+        const {element, type} = contextValue || {};
+        const isHighlighted =
+            isHighlightedErrorType(type) &&
+            isAttributeTypeError(element as AttributeError, parentUri, attributeType.uri);
+        return {highlightedError: isHighlighted ? contextValue : null};
+    },
+    SingleAttributeEditableContent
+);