@reltio/profile 1.4.1585 → 1.4.1586-mui5

package/src/components/ProfileTableAttributeView/components/AttributeTable/cell-renderers/__tests__/DefaultCellValueRenderer.test.tsx

@@ -0,0 +1,149 @@
+import {shallow, mount} from 'enzyme';
+import React from 'react';
+import {DataTypes, HistoryAppearanceActions} from '@reltio/mdm-sdk';
+import {DataTypeValue, HistoryDiffContext} from '@reltio/components';
+import DefaultCellValueRenderer from '../DefaultCellValueRenderer';
+import BlobRenderer from '../BlobRenderer';
+
+jest.mock('@reltio/components', () => ({
+    ...(jest.requireActual('@reltio/components') as Record<string, unknown>),
+    DataTypeValue: () => null,
+    BlobRenderer: () => null
+}));
+
+describe('DefaultCellValueRenderer tests', () => {
+    const defaulColumnData = {
+        dataTypeDefinition: {
+            type: DataTypes.TYPE_STRING
+        }
+    };
+
+    const value = {
+        value: 'test value 0',
+        uri: 'entities/1MfzxX4I/testUri0'
+    };
+    const valueInserted = {
+        value: 'test value 1',
+        uri: 'entities/1MfzxX4I/testUri1'
+    };
+    const valueUpdated = {
+        value: 'test value 2',
+        uri: 'entities/1MfzxX4I/testUri2'
+    };
+    const valueDeleted = {
+        value: 'test value 3',
+        uri: 'entities/1MfzxX4I/testUri3'
+    };
+
+    const historyDiff = {
+        appearance: {
+            'entities/1MfzxX4I/testUri2': 'UPDATE_ATTRIBUTE' as HistoryAppearanceActions,
+            'entities/1MfzxX4I/testUri1': 'INSERT_ATTRIBUTE' as HistoryAppearanceActions,
+            'entities/1MfzxX4I/testUri3': 'DELETE_ATTRIBUTE' as HistoryAppearanceActions
+        },
+        attributes: {},
+        roles: [],
+        tags: []
+    };
+
+    it('should render correctly', () => {
+        const wrapper = mount(
+            <HistoryDiffContext.Provider value={historyDiff}>
+                <DefaultCellValueRenderer columnData={defaulColumnData} value={value} />
+            </HistoryDiffContext.Provider>
+        );
+        const dataTypeValue = wrapper.find(DataTypeValue);
+        expect(dataTypeValue.prop('value')).toBe(value.value);
+        expect(dataTypeValue.prop('dataTypeDefinition')).toBe(defaulColumnData.dataTypeDefinition);
+        expect(wrapper.find('span').hasClass('updateAttribute')).toBe(false);
+        expect(wrapper.find('span').hasClass('insertAttribute')).toBe(false);
+        expect(wrapper.find('span').hasClass('deleteAttribute')).toBe(false);
+    });
+
+    it('should add updateAttribute class name if HistoryDiffContext contains value.uri with UPDATE_ATTRIBUTE value', () => {
+        const wrapper = mount(
+            <HistoryDiffContext.Provider value={historyDiff}>
+                <DefaultCellValueRenderer columnData={defaulColumnData} value={valueUpdated} />
+            </HistoryDiffContext.Provider>
+        );
+        expect(wrapper.find('span').hasClass('updateAttribute')).toBe(true);
+        expect(wrapper.find('span').hasClass('insertAttribute')).toBe(false);
+        expect(wrapper.find('span').hasClass('deleteAttribute')).toBe(false);
+    });
+
+    it('should add insertAttribute class name if HistoryDiffContext contains value.uri with INSERT_ATTRIBUTE value', () => {
+        const wrapper = mount(
+            <HistoryDiffContext.Provider value={historyDiff}>
+                <DefaultCellValueRenderer columnData={defaulColumnData} value={valueInserted} />
+            </HistoryDiffContext.Provider>
+        );
+        expect(wrapper.find('span').hasClass('updateAttribute')).toBe(false);
+        expect(wrapper.find('span').hasClass('insertAttribute')).toBe(true);
+        expect(wrapper.find('span').hasClass('deleteAttribute')).toBe(false);
+    });
+
+    it('should add deleteAttribute class name if HistoryDiffContext contains value.uri with DELETE_ATTRIBUTE value', () => {
+        const wrapper = mount(
+            <HistoryDiffContext.Provider value={historyDiff}>
+                <DefaultCellValueRenderer columnData={defaulColumnData} value={valueDeleted} />
+            </HistoryDiffContext.Provider>
+        );
+        expect(wrapper.find('span').hasClass('updateAttribute')).toBe(false);
+        expect(wrapper.find('span').hasClass('insertAttribute')).toBe(false);
+        expect(wrapper.find('span').hasClass('deleteAttribute')).toBe(true);
+    });
+
+    it('should render TYPE_BLOB correctly', () => {
+        const columnData = {
+            dataTypeDefinition: {
+                type: DataTypes.TYPE_BLOB
+            }
+        };
+        const wrapper = shallow(<DefaultCellValueRenderer columnData={columnData} value={value} />);
+        const blobRenderer = wrapper.find(BlobRenderer);
+        expect(blobRenderer.prop('value')).toBe(value.value);
+        expect(blobRenderer.prop('historyClassName')).toBe('');
+    });
+
+    it('should render TYPE_BLOB with proper historyClassName if HistoryDiffContext contains value.uri with UPDATE_ATTRIBUTE value', () => {
+        const columnData = {
+            dataTypeDefinition: {
+                type: DataTypes.TYPE_BLOB
+            }
+        };
+        const wrapper = mount(
+            <HistoryDiffContext.Provider value={historyDiff}>
+                <DefaultCellValueRenderer columnData={columnData} value={valueUpdated} />
+            </HistoryDiffContext.Provider>
+        );
+        expect(wrapper.find(BlobRenderer).prop('historyClassName')).toBe('updateAttribute');
+    });
+
+    it('should render TYPE_BLOB with proper historyClassName if HistoryDiffContext contains value.uri with INSERT_ATTRIBUTE value', () => {
+        const columnData = {
+            dataTypeDefinition: {
+                type: DataTypes.TYPE_BLOB
+            }
+        };
+        const wrapper = mount(
+            <HistoryDiffContext.Provider value={historyDiff}>
+                <DefaultCellValueRenderer columnData={columnData} value={valueInserted} />
+            </HistoryDiffContext.Provider>
+        );
+        expect(wrapper.find(BlobRenderer).prop('historyClassName')).toBe('insertAttribute');
+    });
+
+    it('should render TYPE_BLOB with proper historyClassName if HistoryDiffContext contains value.uri with DELETE_ATTRIBUTE value', () => {
+        const columnData = {
+            dataTypeDefinition: {
+                type: DataTypes.TYPE_BLOB
+            }
+        };
+        const wrapper = mount(
+            <HistoryDiffContext.Provider value={historyDiff}>
+                <DefaultCellValueRenderer columnData={columnData} value={valueDeleted} />
+            </HistoryDiffContext.Provider>
+        );
+        expect(wrapper.find(BlobRenderer).prop('historyClassName')).toBe('deleteAttribute');
+    });
+});

package/src/components/ProfileTableAttributeView/components/AttributeTable/cell-renderers/styles.ts

@@ -0,0 +1,61 @@
+import {makeStyles} from '@mui/styles';
+import {HistoryOperations, historyPalettes} from '@reltio/mdm-sdk';
+
+const BLOB_HEIGHT = 100;
+
+const removedStyle = {
+    textDecoration: 'line-through',
+    color: 'rgba(0,0,0,.54)'
+};
+
+export const useStyles = makeStyles(() => ({
+    headCell: {
+        display: 'flex',
+        alignItems: 'center',
+        height: '100%',
+        fontSize: '12px'
+    },
+    rowCell: {
+        fontSize: '13px',
+        overflow: 'hidden'
+    },
+    blobWrapper: {
+        position: 'relative',
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        whiteSpace: 'pre',
+        maxHeight: `${BLOB_HEIGHT}px`,
+        boxSizing: 'border-box',
+        padding: '15px 25px 0 25px'
+    },
+    defaultWrapper: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        padding: '15px 25px 0 25px'
+    },
+    updateAttribute: {
+        padding: '0 4px',
+        marginLeft: '-4px',
+        ...historyPalettes[HistoryOperations.updateAttribute]
+    },
+    insertAttribute: {
+        ...historyPalettes[HistoryOperations.insertAttribute]
+    },
+    deleteAttribute: {
+        padding: '0 4px',
+        marginLeft: '-4px',
+        textDecoration: 'line-through',
+        ...historyPalettes[HistoryOperations.deleteAttribute]
+    },
+    description: {
+        marginLeft: '-22px'
+    },
+    'row-cell--sorted': {
+        color: 'rgba(0,0,0,0.87)'
+    },
+    'row-cell--removed': {
+        pointerEvents: 'none',
+        '& > div': removedStyle
+    }
+}));

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

@@ -0,0 +1,21 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles(() => ({
+    tableContainer: {
+        display: 'flex',
+        fontFamily: 'Roboto',
+        color: 'rgba(0,0,0,0.54)',
+        marginBottom: '15px'
+    },
+    'row-cell__buttons-container': {
+        position: 'absolute'
+    },
+    'row-cell__buttons-wrapper': {
+        display: 'flex',
+        paddingLeft: '10px',
+        '& > button': {
+            marginLeft: '-10px',
+            transform: 'scale(0.9)'
+        }
+    }
+}));

package/src/components/ProfileTableAttributeView/components/AttributeTableHeader/AttributeTableHeader.tsx

@@ -0,0 +1,53 @@
+import React, {useContext} from 'react';
+import {useSelector} from 'react-redux';
+import {
+    FacetViewHeader,
+    ColumnsSettings,
+    FilterButton,
+    VerticalDivider,
+    ExpandableSearchInput,
+    DescriptionIcon,
+    RequiredMark
+} from '@reltio/components';
+import mdmModule from '@reltio/mdm-module';
+import {TableAttributeContext} from '../../contexts/TableAttributeContext';
+import {useStyles} from './styles';
+
+type Props = {
+    title: string;
+};
+
+const AttributeTableHeader = ({title}: Props) => {
+    const styles = useStyles();
+    const isEditableMode = useSelector(mdmModule.selectors.getIsEditableMode);
+
+    const {
+        attributeType,
+        searchQuery,
+        setSearchQuery,
+        filters,
+        onToggleFilters,
+        allColumnsData,
+        visibleColumns,
+        onChangeColumns
+    } = useContext(TableAttributeContext);
+
+    const showRequiredMark = isEditableMode && attributeType?.required;
+
+    return (
+        <FacetViewHeader title={title} className={styles.header}>
+            {showRequiredMark && <RequiredMark />}
+            <DescriptionIcon description={attributeType?.description} />
+            <ExpandableSearchInput query={searchQuery} onChange={setSearchQuery} />
+            <FilterButton enabled={!!filters} onClick={onToggleFilters} />
+            <VerticalDivider height={24} margin={4} />
+            <ColumnsSettings
+                columnsData={allColumnsData}
+                selectedColumns={visibleColumns}
+                onChangeColumns={onChangeColumns}
+            />
+        </FacetViewHeader>
+    );
+};
+
+export default AttributeTableHeader;

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

@@ -0,0 +1,96 @@
+import React, {ContextType} from 'react';
+import {mount} from 'enzyme';
+import * as reactRedux from 'react-redux';
+import {
+    FacetViewHeader,
+    ColumnsSettings,
+    FilterButton,
+    VerticalDivider,
+    ExpandableSearchInput,
+    DescriptionIcon,
+    RequiredMark
+} from '@reltio/components';
+import {Mode} from '@reltio/mdm-sdk';
+import AttributeTableHeader from '../AttributeTableHeader';
+import {TableAttributeContext} from '../../../contexts/TableAttributeContext';
+
+const defaultStore = {
+    profile: {
+        mode: Mode.Viewing
+    }
+};
+
+describe('AttributeTableHeader tests', () => {
+    const defaultContextValue = {
+        attributeType: {
+            name: 'n1',
+            uri: 'uri1',
+            description: '123'
+        },
+        searchQuery: 'query',
+        setSearchQuery: jest.fn(),
+        filters: {},
+        onToggleFilters: jest.fn(),
+        allColumnsData: [],
+        visibleColumns: [],
+        onChangeColumns: jest.fn()
+    } as unknown as ContextType<typeof TableAttributeContext>;
+
+    let store;
+
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+    });
+
+    beforeEach(() => {
+        store = defaultStore;
+        jest.clearAllMocks();
+    });
+
+    it('should render main parts', () => {
+        const component = mount(
+            <TableAttributeContext.Provider value={defaultContextValue}>
+                <AttributeTableHeader title="Title!" />
+            </TableAttributeContext.Provider>
+        );
+        const header = component.find(FacetViewHeader);
+        expect(header.prop('title')).toBe('Title!');
+        expect(header.find(DescriptionIcon)).toHaveLength(1);
+        expect(header.find(DescriptionIcon).prop('description')).toBe(defaultContextValue.attributeType.description);
+        expect(header.find(ExpandableSearchInput)).toHaveLength(1);
+        expect(header.find(ExpandableSearchInput).prop('query')).toBe(defaultContextValue.searchQuery);
+        expect(header.find(ExpandableSearchInput).prop('onChange')).toBe(defaultContextValue.setSearchQuery);
+        expect(header.find(FilterButton)).toHaveLength(1);
+        expect(header.find(FilterButton).prop('enabled')).toBe(true);
+        expect(header.find(FilterButton).prop('onClick')).toBe(defaultContextValue.onToggleFilters);
+        expect(header.find(ColumnsSettings)).toHaveLength(1);
+        expect(header.find(ColumnsSettings).prop('columnsData')).toBe(defaultContextValue.allColumnsData);
+        expect(header.find(ColumnsSettings).prop('onChangeColumns')).toBe(defaultContextValue.onChangeColumns);
+        expect(header.find(ColumnsSettings).prop('selectedColumns')).toBe(defaultContextValue.visibleColumns);
+        expect(header.find(VerticalDivider)).toHaveLength(1);
+        expect(header.find(RequiredMark)).toHaveLength(0);
+    });
+
+    it('should render DescriptionIcon with correct description prop if attributeType is undefined', () => {
+        const contextValue = {...defaultContextValue, attributeType: undefined};
+        const component = mount(
+            <TableAttributeContext.Provider value={contextValue}>
+                <AttributeTableHeader title="Title!" />
+            </TableAttributeContext.Provider>
+        );
+        expect(component.find(DescriptionIcon)).toHaveLength(1);
+        expect(component.find(DescriptionIcon).prop('description')).toBe(undefined);
+    });
+
+    it('should render RequiredMark if isEditableMode is true and attribute type is required', () => {
+        store = {profile: {mode: Mode.Editing}};
+        const attributeType = {name: 'n1', uri: 'uri1', required: true};
+        const contextValue = {...defaultContextValue, attributeType} as ContextType<typeof TableAttributeContext>;
+        const component = mount(
+            <TableAttributeContext.Provider value={contextValue}>
+                <AttributeTableHeader title="Title!" />
+            </TableAttributeContext.Provider>
+        );
+        expect(component.find(RequiredMark)).toHaveLength(1);
+    });
+});

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

@@ -0,0 +1,7 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles(() => ({
+    header: {
+        padding: '0 4px 0 16px'
+    }
+}));

package/src/components/ProfileTableAttributeView/components/TableAttributeContent/TableAttributeContent.tsx

@@ -0,0 +1,123 @@
+import React, {useContext, useMemo} from 'react';
+import {isEmpty, propEq} from 'ramda';
+import {useSelector} from 'react-redux';
+import {
+    AttributeError,
+    AttributeType,
+    isAttributeTypeError as checkIsAttributeTypeError,
+    Entity,
+    isPartOfErrorAttributeTypeUri,
+    isPartOfErrorParentUri,
+    TableAttributeViewConfig
+} from '@reltio/mdm-sdk';
+import mdmModule from '@reltio/mdm-module';
+import {
+    isHighlightedErrorType,
+    ScrollToElementContext,
+    useScrollToAttributeError,
+    withContext
+} from '@reltio/components';
+import AttributeTable from '../AttributeTable/AttributeTable';
+import {useEditableAttribute} from './hooks/useEditableAttribute';
+import {TableAttributeContext} from '../../contexts/TableAttributeContext';
+import {TableAttributeEditableContent} from '../TableAttributeEditableContent/TableAttributeEditableContent';
+
+type HighlightedElement = React.ContextType<typeof ScrollToElementContext>;
+
+type Props = {
+    config: TableAttributeViewConfig;
+    entityUri: string;
+    attributeType: AttributeType;
+    highlightedError?: HighlightedElement;
+    highlightedAttributeError?: HighlightedElement;
+};
+
+export const TableAttributeContent = ({config, entityUri, highlightedError, highlightedAttributeError}: Props) => {
+    const isEditableMode = useSelector(mdmModule.selectors.getIsEditableMode);
+    const modifiedEntity = useSelector(
+        (state) => mdmModule.selectors.getModifiedEntity(state, entityUri) || ({} as Entity)
+    );
+
+    const {values, visibleColumns, onFilter, onSort, filters, sorting, allColumnsData} =
+        useContext(TableAttributeContext);
+
+    const {
+        onDeleteAttribute,
+        onStartEditing,
+        onChangeAttribute,
+        onAdd,
+        onCancel,
+        onApply,
+        onReset,
+        checkHasChanges,
+        modifiedValues,
+        editingValues,
+        deletedUris
+    } = useEditableAttribute();
+    const {ref, errorClassName} = useScrollToAttributeError({highlightedError, isSimple: true});
+
+    const preparedValues = isEditableMode ? modifiedValues : values;
+
+    const visibleColumnsData = useMemo(
+        () => visibleColumns.map((id) => allColumnsData.find(propEq('id', id))),
+        [visibleColumns, allColumnsData]
+    );
+
+    return (
+        <div ref={ref} className={errorClassName}>
+            {isEditableMode && !isEmpty(modifiedEntity) && (
+                <TableAttributeEditableContent
+                    config={config}
+                    editingValues={editingValues}
+                    modifiedValues={modifiedValues}
+                    onChangeAttribute={onChangeAttribute}
+                    onDeleteAttribute={onDeleteAttribute}
+                    onAdd={onAdd}
+                    onReset={onReset}
+                    onCancel={onCancel}
+                    onApply={onApply}
+                    onStartEditing={onStartEditing}
+                    checkHasChanges={checkHasChanges}
+                    highlightedError={highlightedError?.element as AttributeError}
+                    highlightedAttributeError={highlightedAttributeError?.element as AttributeError}
+                />
+            )}
+            {visibleColumnsData.length > 0 && (
+                <AttributeTable
+                    columnsData={visibleColumnsData}
+                    config={config}
+                    values={preparedValues}
+                    filters={filters}
+                    onFilter={onFilter}
+                    sorting={sorting}
+                    onSort={onSort}
+                    onEdit={onStartEditing}
+                    onDeleteAttribute={onDeleteAttribute}
+                    deletedUris={deletedUris}
+                />
+            )}
+        </div>
+    );
+};
+
+export default withContext(
+    ScrollToElementContext,
+    (contextValue, {entityUri, attributeType}) => {
+        const {element, type} = contextValue || {};
+        const isError = isHighlightedErrorType(type);
+
+        const isAttributeTypeError =
+            isError && checkIsAttributeTypeError(element as AttributeError, entityUri, attributeType.uri);
+        const isAttributeError =
+            element &&
+            isError &&
+            !isAttributeTypeError &&
+            isPartOfErrorAttributeTypeUri(attributeType, element) &&
+            isPartOfErrorParentUri(entityUri, element);
+
+        const highlightedError = isAttributeTypeError ? contextValue : null;
+        const highlightedAttributeError = isAttributeError ? contextValue : null;
+        return {highlightedError, highlightedAttributeError};
+    },
+    TableAttributeContent
+);