@reltio/profile 1.4.1585 → 1.4.1586-mui5

package/src/components/ProfileTableAttributeView/components/AttributeEditing/__tests__/AttributeEditing.test.tsx

@@ -0,0 +1,409 @@
+import {AttributeEditing} from '../AttributeEditing';
+import React, {ContextType} from 'react';
+import {mount} from 'enzyme';
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {act} from 'react-dom/test-utils';
+import Button from '@mui/material/Button';
+import * as reactRedux from 'react-redux';
+import {ViewIdContext, EditableAttribute} from '@reltio/components';
+
+import {profile} from '@reltio/mdm-module';
+import {AttributeItem, SingleAttributeViewConfig} from '@reltio/mdm-sdk';
+
+import {TableAttributeContext} from '../../../contexts/TableAttributeContext';
+
+jest.mock('@reltio/components', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/components'),
+    EditableAttribute: () => null
+}));
+
+const tenant = 'knest';
+
+const attributeType = {
+    uri: 'configuration/entityTypes/HCP/attributes/FirstLevelNested',
+    name: 'FirstLevelNested',
+    hidden: false,
+    type: 'Nested',
+    attributes: [
+        {
+            label: 'FirstLevelNestedSub1_HCP',
+            name: 'FirstLevelNestedSub1',
+            uri: 'configuration/entityTypes/HCP/attributes/FirstLevelNested/attributes/FirstLevelNestedSub1',
+            dependentLookupCode: 'LANG_CD',
+            searchable: true,
+            skipInDataAccess: false,
+            system: false,
+            type: 'String'
+        },
+        {
+            label: 'Date1_HCP',
+            name: 'Date1',
+            uri: 'configuration/entityTypes/HCP/attributes/FirstLevelNested/attributes/Date1',
+            attributeOrdering: {orderType: 'ASC', orderingStrategy: 'LUD'},
+            skipInDataAccess: false,
+            system: false,
+            faceted: true,
+            hidden: false,
+            type: 'Date'
+        }
+    ]
+};
+
+const referenceAttributeType = {
+    label: 'Activity',
+    name: 'activitywith',
+    type: 'Reference',
+    uri: 'configuration/entityTypes/HCP/attributes/activitywith',
+    referencedAttributeURIs: ['configuration/relationTypes/HasAddress/attributes/AddressType']
+};
+
+let store;
+
+const config = {
+    attributeUri: 'configuration/entityTypes/HCP/attributes/FirstLevelNested',
+    caption: 'Attributes View',
+    max: 15,
+    id: 'viewId'
+} as SingleAttributeViewConfig;
+
+const modifiedAttributeValues = [
+    {
+        uri: 'entities/1E4APrQW/attributes/FirstLevelNested/3YrwSm39Q',
+        ov: true,
+        label: 'Gujarati',
+        value: {
+            Date1: [
+                {
+                    ov: true,
+                    pin: true,
+                    type: 'configuration/entityTypes/HCP/attributes/FirstLevelNested/attributes/Date1',
+                    uri: 'entities/1E4APrQW/attributes/FirstLevelNested/3YrwSm39Q/Date1/3YrwSnQOa',
+                    value: '2020-19-09'
+                }
+            ],
+            FirstLevelNestedSub1: [
+                {
+                    type: 'configuration/entityTypes/HCP/attributes/FirstLevelNested/attributes/FirstLevelNestedSub1',
+                    uri: 'entities/1E4APrQW/attributes/FirstLevelNested/3YrwSm39Q/FirstLevelNestedSub1/3YrwSnHs4',
+                    value: 'Gujarati',
+                    ov: true,
+                    lookupRawValue: 'guj',
+                    lookupCode: 'guj'
+                }
+            ]
+        }
+    }
+];
+
+const onCancel = jest.fn();
+const onDeleteAttribute = jest.fn();
+const onChangeAttribute = jest.fn();
+const onApply = jest.fn();
+
+const mockedSetters = {
+    onCancel,
+    onDeleteAttribute,
+    onChangeAttribute,
+    onApply
+};
+
+const setUp = (props) =>
+    mount(
+        <ViewIdContext.Provider value={config.id}>
+            <TableAttributeContext.Provider
+                value={{
+                    attributeType,
+                    hasPaging: false,
+                    searchQuery: '',
+                    setSearchQuery: () => {},
+                    values: [],
+                    page: 0,
+                    setPage: () => {},
+                    sorting: {order: 'desc', field: 'field'},
+                    onToggleFilters: () => {},
+                    onSort: () => {},
+                    onFilter: () => {},
+                    onChangeColumns: () => {},
+                    isLoading: false,
+                    filters: {},
+                    visibleColumns: [],
+                    totalVisibleValues: 4,
+                    showTable: true,
+                    allColumnsData: []
+                }}
+            >
+                <AttributeEditing {...mockedSetters} {...props} />
+            </TableAttributeContext.Provider>
+        </ViewIdContext.Provider>
+    );
+
+const setUpRTL = (props, contextProps = {}) => {
+    const user = userEvent.setup();
+    const tableAttributeContextValue: ContextType<typeof TableAttributeContext> = {
+        attributeType,
+        hasPaging: false,
+        searchQuery: '',
+        setSearchQuery: () => {},
+        values: [],
+        page: 0,
+        setPage: () => {},
+        sorting: {order: 'desc', field: 'field'},
+        onToggleFilters: () => {},
+        onSort: () => {},
+        onFilter: () => {},
+        onChangeColumns: () => {},
+        isLoading: false,
+        filters: {},
+        visibleColumns: [],
+        totalVisibleValues: 4,
+        showTable: true,
+        allColumnsData: [],
+        ...contextProps
+    };
+    return {
+        user,
+        ...render(
+            <ViewIdContext.Provider value={config.id}>
+                <TableAttributeContext.Provider value={tableAttributeContextValue}>
+                    <AttributeEditing {...mockedSetters} {...props} />
+                </TableAttributeContext.Provider>
+            </ViewIdContext.Provider>
+        )
+    };
+};
+
+const createStore = (mode = 'Viewing') => ({
+    metadata: {
+        [tenant]: {
+            uri: 'configuration',
+            entityTypes: [
+                {
+                    uri: 'configuration/entityTypes/HCP',
+                    attributes: [attributeType, referenceAttributeType]
+                }
+            ]
+        }
+    },
+    profile: {
+        entity: {
+            uri: 'entities/1E4APrQW'
+        },
+        modifiedEntities: {
+            'entities/1E4APrQW': {
+                uri: 'entities/1E4APrQW',
+                type: 'configuration/entityTypes/HCP',
+                attributes: {
+                    FirstLevelNested: modifiedAttributeValues,
+                    activitywith: [
+                        {
+                            uri: 'entities/1E4APrQW/attributes/activitywith/dfd33das',
+                            ov: true,
+                            refEntity: [
+                                {
+                                    objectURI: 'entities/uri$$12321321311'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                crosswalks: [
+                    {
+                        type: 'configuration/sources/Reltio'
+                    }
+                ]
+            }
+        },
+        mode
+    },
+    tenant: {
+        id: tenant
+    }
+});
+
+const dispatch = jest.fn();
+
+describe('AttributeEditing', () => {
+    beforeEach(() => {
+        store = createStore();
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+        jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(dispatch);
+    });
+
+    afterEach(() => {
+        jest.resetAllMocks();
+    });
+
+    it('should render EditableAttribute and buttons', () => {
+        store = createStore('Editing');
+        const attributeValue = modifiedAttributeValues[0];
+        const component = setUp({attributeValue, hasChanges: true});
+        expect(component.find(Button)).toHaveLength(2);
+        expect(component.find(EditableAttribute)).toHaveLength(1);
+    });
+
+    it('should pass props to EditableAttribute', () => {
+        store = createStore('Editing');
+        const attributeValue = modifiedAttributeValues[0];
+        const component = setUp({attributeValue, hasChanges: true});
+        const editableAttribute = component.find(EditableAttribute);
+        expect(editableAttribute).toHaveLength(1);
+        expect(editableAttribute.prop('attributeValue')).toEqual(attributeValue);
+        expect(editableAttribute.prop('attributeType')).toEqual(attributeType);
+        expect(editableAttribute.prop('mode')).toEqual('Editing');
+        expect(editableAttribute.prop('crosswalks')).toEqual([
+            {
+                type: 'configuration/sources/Reltio'
+            }
+        ]);
+    });
+
+    it('should dispatch addAttribute on onAddAttributes call', () => {
+        store = createStore('Editing');
+        const attributeValue = modifiedAttributeValues[0];
+        const component = setUp({attributeValue, hasChanges: true});
+        const editableAttribute = component.find(EditableAttribute);
+        expect(editableAttribute).toHaveLength(1);
+
+        const newAttributeValue = {
+            type: 'configuration/entityTypes/HCP/attributes/FirstLevelNested/attributes/FirstLevelNestedSub1',
+            uri: 'entities/1E4APrQW/attributes/FirstLevelNested/3YrwSm39Q/FirstLevelNestedSub1/uri$$2827222',
+            value: 'new added value',
+            ov: true,
+            lookupRawValue: 'aj',
+            lookupCode: 'aj'
+        };
+
+        const newAttributeItem = {
+            value: newAttributeValue,
+            attributeType: attributeType.attributes[0],
+            parentUri: 'entities/1E4APrQW/attributes/FirstLevelNested/3YrwSm39Q',
+            uri: 'entities/1E4APrQW/attributes/FirstLevelNested/3YrwSm39Q/FirstLevelNestedSub1/uri$$2827222'
+        };
+
+        const onAddAttributes = editableAttribute.prop('onAddAttributes') as (params: AttributeItem[]) => void;
+
+        act(() => {
+            onAddAttributes([newAttributeItem]);
+        });
+
+        expect(dispatch).toHaveBeenCalledWith(profile.actions.addAttributes([{...newAttributeItem, viewId: 'viewId'}]));
+    });
+
+    it('should dispatch errorDeactivated on onErrorDeactivate call', () => {
+        store = createStore('Editing');
+        const attributeValue = modifiedAttributeValues[0];
+        const component = setUp({attributeValue, hasChanges: true});
+        const editableAttribute = component.find(EditableAttribute);
+        expect(editableAttribute).toHaveLength(1);
+
+        const onDeactivateError = editableAttribute.prop('onDeactivateError') as (param: string) => void;
+
+        act(() => {
+            onDeactivateError('errorId');
+        });
+
+        expect(dispatch).toHaveBeenCalledWith({
+            type: 'ERROR_DEACTIVATED',
+            payload: 'errorId'
+        });
+    });
+
+    it('should pass prop onDeleteAttribute to EditableAttribute', () => {
+        store = createStore('Editing');
+        const attributeValue = modifiedAttributeValues[0];
+        const component = setUp({attributeValue, hasChanges: true});
+        const editableAttribute = component.find(EditableAttribute);
+        expect(editableAttribute).toHaveLength(1);
+        const attributeItem = {
+            value: attributeValue.value.FirstLevelNestedSub1[0],
+            attributeType: attributeType.attributes[0],
+            uri: 'entities/1E4APrQW/attributes/FirstLevelNested/3YrwSm39Q/FirstLevelNestedSub1/3YrwSnHs4'
+        };
+
+        const onDeleteAttribute = editableAttribute.prop('onDeleteAttribute') as (param: AttributeItem) => void;
+        act(() => {
+            onDeleteAttribute(attributeItem);
+        });
+        expect(onDeleteAttribute).toHaveBeenCalledWith(attributeItem);
+    });
+
+    it('should pass prop onChangeAttribute to EditableAttribute', () => {
+        store = createStore('Editing');
+        const attributeValue = modifiedAttributeValues[0];
+        const component = setUp({attributeValue, hasChanges: true});
+        const editableAttribute = component.find(EditableAttribute);
+        expect(editableAttribute).toHaveLength(1);
+        const changedFirstLevelNestedSub1 = {
+            type: 'configuration/entityTypes/HCP/attributes/FirstLevelNested/attributes/FirstLevelNestedSub1',
+            uri: 'entities/1E4APrQW/attributes/FirstLevelNested/3YrwSm39Q/FirstLevelNestedSub1/3YrwSnHs4',
+            value: 'new value',
+            ov: true,
+            lookupRawValue: 'guj',
+            lookupCode: 'guj'
+        };
+        const changedAttributeItem = {
+            value: changedFirstLevelNestedSub1,
+            attributeType: attributeType.attributes[0],
+            uri: 'entities/1E4APrQW/attributes/FirstLevelNested/3YrwSm39Q/FirstLevelNestedSub1/3YrwSnHs4'
+        };
+
+        const onChangeAttribute = editableAttribute.prop('onChangeAttribute') as (param: AttributeItem) => void;
+        act(() => {
+            onChangeAttribute(changedAttributeItem);
+        });
+
+        expect(onChangeAttribute).toHaveBeenCalledWith(changedAttributeItem);
+    });
+
+    it('should call onCancel on cancel button click at EditableAttribute', () => {
+        store = createStore('Editing');
+        const attributeValue = modifiedAttributeValues[0];
+        const component = setUp({attributeValue, hasChanges: true});
+        const editableAttribute = component.find(EditableAttribute);
+        expect(editableAttribute).toHaveLength(1);
+        expect(onCancel).not.toHaveBeenCalled();
+        const cancelButton = component.find(Button).at(0);
+        act(() => {
+            cancelButton.find('button').simulate('click');
+        });
+        expect(onCancel).toHaveBeenCalledWith(attributeValue);
+    });
+
+    it('should call onApply on apply button click at EditableAttribute', () => {
+        store = createStore('Editing');
+        const attributeValue = modifiedAttributeValues[0];
+        const component = setUp({attributeValue, hasChanges: true});
+        const editableAttribute = component.find(EditableAttribute);
+        expect(editableAttribute).toHaveLength(1);
+        expect(onApply).not.toHaveBeenCalled();
+        const applyButton = component.find(Button).at(1);
+        act(() => {
+            applyButton.find('button').simulate('click');
+        });
+        expect(onApply).toHaveBeenCalledWith(attributeValue, undefined);
+    });
+
+    it('should pass modifiedEntities store slice to onApply for reference attribute with temp referenced entity', async () => {
+        store = createStore('Editing');
+        const attributeValue = store.profile.modifiedEntities['entities/1E4APrQW'].attributes.activitywith[0];
+        const {user} = setUpRTL({attributeValue, hasChanges: true}, {attributeType: referenceAttributeType});
+        expect(onApply).not.toHaveBeenCalled();
+        const applyButton = screen.getByRole('button', {name: 'Apply'});
+        await user.click(applyButton);
+        expect(onApply).toHaveBeenCalledWith(attributeValue, store.profile.modifiedEntities);
+    });
+
+    it('should disable apply button if no changes', () => {
+        store = createStore('Editing');
+        const attributeValue = modifiedAttributeValues[0];
+        const component = setUp({attributeValue, hasChanges: false});
+        expect(component.find(Button).at(1).prop('disabled')).toBeTruthy();
+    });
+
+    it('should expand attribute by default', () => {
+        store = createStore('Editing');
+        const component = setUp({attributeValue: modifiedAttributeValues[0]});
+        expect(component.find(EditableAttribute).prop('expanded')).toBeTruthy();
+    });
+});

package/src/components/ProfileTableAttributeView/components/AttributeEditing/styles.ts

@@ -0,0 +1,17 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles(() => ({
+    actionButtons: {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        margin: '0 8px 10px',
+
+        '& > button': {
+            fontSize: '14px',
+            lineHeight: '16px',
+            marginLeft: '8px',
+            padding: '10px 8px',
+            backgroundColor: 'rgba(98, 2, 238, 0)'
+        }
+    }
+}));

package/src/components/ProfileTableAttributeView/components/AttributeTable/AttributeTable.tsx

@@ -0,0 +1,171 @@
+import React, {useCallback, useContext, useMemo, useState} from 'react';
+import RowCellRenderer from './cell-renderers/RowCellRenderer';
+import {BasicTable, useConfigPermissions} from '@reltio/components';
+import {getBasicTableColumnsData, getBasicTableRowsData} from '../../helpers/tableAttributeHelpers';
+import {useStyles} from './styles';
+import {
+    checkCanEditAttribute,
+    checkCanDeleteAttribute,
+    SearchFilter,
+    isReltioCrosswalk,
+    Entity,
+    isEditableMode as checkIsEditableMode,
+    AttributeItem,
+    TableAttributeViewConfig,
+    ComplexAttributeValue
+} from '@reltio/mdm-sdk';
+import {ColumnsDataType} from '../types';
+import EditButtons from './EditButtons';
+import {useSelector} from 'react-redux';
+import {path, prop, pipe} from 'ramda';
+import {TableAttributeContext} from '../../contexts/TableAttributeContext';
+import mdmModule from '@reltio/mdm-module';
+
+const MAX_HEIGHT = 477;
+
+type Props = {
+    columnsData: ColumnsDataType;
+    values: ComplexAttributeValue[];
+    filters?: {
+        [key: string]: SearchFilter;
+    };
+    onFilter?: (payload) => void;
+    sorting?:
+        | {
+              field: string;
+              order: string;
+          }
+        | undefined;
+    onSort?: (payload) => void;
+    config: TableAttributeViewConfig;
+    onEdit: React.Dispatch<ComplexAttributeValue>;
+    onDeleteAttribute: (attribute: AttributeItem) => void;
+    deletedUris: string[];
+};
+
+const AttributeTable = ({
+    columnsData,
+    values,
+    sorting,
+    onSort,
+    filters,
+    onFilter,
+    config,
+    onEdit,
+    onDeleteAttribute,
+    deletedUris
+}: Props) => {
+    const tableRowsData = useMemo(() => getBasicTableRowsData(values, columnsData), [values, columnsData]);
+    const tableColumnsData = useMemo(() => getBasicTableColumnsData(columnsData), [columnsData]);
+
+    const styles = useStyles();
+    const mode = useSelector(mdmModule.selectors.getMode);
+    const isEditableMode = checkIsEditableMode(mode);
+    const metadata = useSelector(mdmModule.selectors.getMetadata);
+    const entityUri = useSelector(mdmModule.selectors.getEntityUri);
+
+    const modifiedEntity = useSelector(
+        (state) => mdmModule.selectors.getModifiedEntity(state, entityUri) || ({} as Entity)
+    );
+    const {attributeType} = useContext(TableAttributeContext);
+
+    const renderRowCell = useCallback(
+        (props) => (
+            <RowCellRenderer
+                {...props}
+                isSorted={!!sorting && sorting.field === props.columnData.id} /* eslint-disable-line react/prop-types */
+            />
+        ),
+        [sorting]
+    );
+
+    const [hoverRowIndex, setHoverRowIndex] = useState(null);
+
+    const {canUpdate, canDelete} = useConfigPermissions();
+
+    const checkCanEdit = (attributeValue: ComplexAttributeValue) =>
+        canUpdate(config) &&
+        checkCanEditAttribute({
+            attributeType,
+            mode,
+            attributeValue,
+            isReltioCrosswalk: isReltioCrosswalk(modifiedEntity.crosswalks, attributeValue)
+        });
+    const checkCanRemove = (attributeValue: ComplexAttributeValue) =>
+        canDelete(config) &&
+        checkCanDeleteAttribute({
+            attributeType,
+            mode,
+            attributeValue,
+            metadata,
+            isReltioCrosswalk: isReltioCrosswalk(modifiedEntity.crosswalks, attributeValue)
+        });
+
+    const hideRightContent = useMemo(
+        () =>
+            typeof hoverRowIndex === 'number' && isEditableMode
+                ? deletedUris.includes(pipe(path([hoverRowIndex]), prop('uri'))(values))
+                : true,
+        [hoverRowIndex, deletedUris, values, isEditableMode]
+    );
+    const canRemove = typeof hoverRowIndex === 'number' && checkCanRemove(path([hoverRowIndex], values));
+    const canEdit = typeof hoverRowIndex === 'number' && checkCanEdit(path([hoverRowIndex], values));
+
+    const handleEditAttribute = useCallback(() => {
+        const attributeValue = path([hoverRowIndex], values);
+        if (!canEdit) return;
+        onEdit(attributeValue);
+    }, [onEdit, hoverRowIndex, values, canEdit]);
+
+    const handleRemoveAttribute = useCallback(() => {
+        const attributeValue = path([hoverRowIndex], values);
+        if (!canRemove) return;
+        const attribute: AttributeItem = {
+            parentUri: entityUri,
+            attributeType,
+            uri: attributeValue.uri,
+            value: attributeValue
+        };
+        onDeleteAttribute(attribute);
+        setHoverRowIndex(null);
+    }, [hoverRowIndex, values, onDeleteAttribute, canRemove, attributeType, entityUri]);
+
+    const hoveredRowRightContent =
+        !hideRightContent && (canRemove || canEdit) ? (
+            <EditButtons
+                onEdit={canEdit ? handleEditAttribute : undefined}
+                onRemove={canRemove ? handleRemoveAttribute : undefined}
+            />
+        ) : undefined;
+    const context = useMemo(() => ({deletedUris}), [deletedUris]);
+    return (
+        <div className={styles.tableContainer}>
+            <BasicTable
+                autosizing
+                maxHeight={MAX_HEIGHT}
+                columnsData={tableColumnsData}
+                rowsData={tableRowsData}
+                sorting={sorting}
+                onSort={onSort}
+                filters={filters}
+                onFilter={onFilter}
+                hoverStateEnabled={true}
+                defaultColumnWidth={250}
+                defaultColumnMinWidth={200}
+                headRowHeight={56}
+                resizeDebounceDelay={150}
+                renderRowCell={renderRowCell}
+                onRowHover={setHoverRowIndex}
+                hoverRowIndex={hoverRowIndex}
+                hoveredRowRightContent={hoveredRowRightContent}
+                context={context}
+                classes={{
+                    hoveredRowRightContentWrapper: styles['row-cell__buttons-wrapper'],
+                    hoveredRowRightContentContainer: styles['row-cell__buttons-container']
+                }}
+            />
+        </div>
+    );
+};
+
+export default AttributeTable;

package/src/components/ProfileTableAttributeView/components/AttributeTable/EditButtons.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import i18n from 'ui-i18n';
+import {SmallIconButtonWithTooltip} from '@reltio/components';
+
+type Props = {
+    onEdit?: () => void;
+    onRemove?: () => void;
+};
+
+export const EditButtons = ({onEdit, onRemove}: Props) => (
+    <>
+        {onEdit && (
+            <SmallIconButtonWithTooltip tooltipTitle={i18n.text('Edit')} icon={EditIcon} size="L" onClick={onEdit} />
+        )}
+        {onRemove && (
+            <SmallIconButtonWithTooltip
+                tooltipTitle={i18n.text('Remove')}
+                icon={DeleteIcon}
+                size="L"
+                onClick={onRemove}
+            />
+        )}
+    </>
+);
+
+export default EditButtons;