@reltio/profile 1.4.1585 → 1.4.1586-mui5

package/src/components/ProfileTableAttributeView/components/TableAttributeView/TableAttributeView.tsx

@@ -0,0 +1,64 @@
+import React, {useContext} from 'react';
+import classnames from 'classnames';
+import i18n from 'ui-i18n';
+import {useSelector} from 'react-redux';
+import {
+    BasicView,
+    FacetViewHeader,
+    DescriptionIcon,
+    LinearLoadIndicator,
+    BasicTablePagination
+} from '@reltio/components';
+import mdmModule from '@reltio/mdm-module';
+import {TableAttributeViewConfig} from '@reltio/mdm-sdk';
+import Typography from '@mui/material/Typography';
+import {TableAttributeContext} from '../../contexts/TableAttributeContext';
+import AttributeTableHeader from '../AttributeTableHeader/AttributeTableHeader';
+import TableAttributeContent from '../TableAttributeContent/TableAttributeContent';
+import {useStyles} from './styles';
+
+const DEFAULT_ROWS_PER_PAGE = 15;
+
+type Props = {
+    config: TableAttributeViewConfig;
+    className?: string;
+};
+
+export const TableAttributeView = ({config, className}: Props) => {
+    const {caption, max = DEFAULT_ROWS_PER_PAGE} = config;
+
+    const styles = useStyles();
+    const entityUri = useSelector(mdmModule.selectors.getEntityUri);
+    const {totalVisibleValues, attributeType, showTable, hasPaging, isLoading, page, setPage} =
+        useContext(TableAttributeContext);
+
+    return (
+        <BasicView className={classnames(styles.root, className)}>
+            {showTable ? (
+                <>
+                    <AttributeTableHeader title={caption} />
+                    <div className={styles.content}>
+                        <TableAttributeContent config={config} attributeType={attributeType} entityUri={entityUri} />
+                        {hasPaging && (
+                            <BasicTablePagination
+                                count={totalVisibleValues}
+                                rowsPerPageOptions={[]}
+                                rowsPerPage={max}
+                                page={page}
+                                onChangePage={setPage}
+                            />
+                        )}
+                        {isLoading && <LinearLoadIndicator />}
+                    </div>
+                </>
+            ) : (
+                <>
+                    <FacetViewHeader title={caption} className={styles.header}>
+                        <DescriptionIcon description={attributeType?.description} />
+                    </FacetViewHeader>
+                    <Typography className={styles.noData}>{i18n.text('No data')}</Typography>
+                </>
+            )}
+        </BasicView>
+    );
+};

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

@@ -0,0 +1,139 @@
+import React, {ContextType} from 'react';
+import {mount} from 'enzyme';
+import * as reactRedux from 'react-redux';
+import {omit} from 'ramda';
+import {AttributeType, ProfileViewTypes, TableAttributeViewConfig} from '@reltio/mdm-sdk';
+import {
+    BasicTablePagination,
+    BasicView,
+    LinearLoadIndicator,
+    FacetViewHeader,
+    DescriptionIcon
+} from '@reltio/components';
+import {TableAttributeContext} from '../../../contexts/TableAttributeContext';
+import TableAttributeContent from '../../TableAttributeContent/TableAttributeContent';
+import AttributeTableHeader from '../../AttributeTableHeader/AttributeTableHeader';
+import {TableAttributeView} from '../TableAttributeView';
+
+jest.mock('@reltio/components', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/components'),
+    DescriptionIcon: () => null
+}));
+jest.mock('@mui/material/Typography', () => () => null);
+jest.mock('../../AttributeTableHeader/AttributeTableHeader', () => () => null);
+jest.mock('../../TableAttributeContent/TableAttributeContent', () => () => null);
+
+const store = {
+    profile: {
+        entity: {
+            uri: 'entities/1E4APrQW'
+        }
+    }
+};
+
+const defaultConfig = {
+    attributeUri: 'configuration/entityTypes/HCP/attributes/FirstLevelNested',
+    caption: 'Attributes View',
+    max: 10,
+    id: 'viewId',
+    class: ProfileViewTypes.AttributeTable
+};
+
+const defaultAttributeType = {
+    uri: 'configuration/entityTypes/HCP/attributes/FirstLevelNested',
+    description: 'description string'
+} as AttributeType;
+
+const defaultContextValue = {
+    totalVisibleValues: 1,
+    hasPaging: false,
+    page: 0,
+    setPage: jest.fn(),
+    isLoading: false,
+    attributeType: defaultAttributeType,
+    showTable: true
+};
+
+type SetUpProps = {
+    contextValue?: Partial<ContextType<typeof TableAttributeContext>>;
+    config?: TableAttributeViewConfig;
+    className?: string;
+};
+
+const setUp = ({contextValue = defaultContextValue, config = defaultConfig, className}: SetUpProps = {}) => {
+    return mount(
+        <TableAttributeContext.Provider value={contextValue as ContextType<typeof TableAttributeContext>}>
+            <TableAttributeView config={config} className={className} />
+        </TableAttributeContext.Provider>
+    );
+};
+
+describe('TableAttributeView tests', () => {
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+    });
+
+    it('should render BasicView with correctly className if className prop is passed', () => {
+        const component = setUp({className: 'someClassName'});
+        expect(component.find(BasicView).prop('className')).toBe('root someClassName');
+    });
+
+    it('should render BasicView with correctly className if className prop is not passed', () => {
+        const component = setUp();
+        expect(component.find(BasicView).prop('className')).toBe('root');
+    });
+
+    it('should render correct data if showTable is true', () => {
+        const contextValue = {...defaultContextValue, hasPaging: true};
+        const component = setUp({contextValue});
+        expect(component.find(AttributeTableHeader).prop('title')).toBe(defaultConfig.caption);
+        expect(component.find(TableAttributeContent).props()).toEqual({
+            config: defaultConfig,
+            attributeType: defaultAttributeType,
+            entityUri: store.profile.entity.uri
+        });
+        expect(component.find(BasicTablePagination).props()).toEqual({
+            count: contextValue.totalVisibleValues,
+            rowsPerPageOptions: [],
+            rowsPerPage: defaultConfig.max,
+            page: contextValue.page,
+            onChangePage: contextValue.setPage
+        });
+    });
+
+    it('should not render BasicTablePagination if hasPaging is false', () => {
+        const contextValue = {...defaultContextValue, hasPaging: false};
+        const component = setUp({contextValue});
+        expect(component.find(BasicTablePagination)).toHaveLength(0);
+    });
+
+    it('should render BasicTablePagination with default rowsPerPage if config has no max property', () => {
+        const contextValue = {...defaultContextValue, hasPaging: true};
+        const config = omit(['max'], defaultConfig);
+        const component = setUp({contextValue, config});
+        expect(component.find(BasicTablePagination).prop('rowsPerPage')).toBe(15);
+    });
+
+    it('should render LinearLoadIndicator if isLoading is "true"', () => {
+        const contextValue = {...defaultContextValue, isLoading: true};
+        const component = setUp({contextValue});
+        expect(component.find(LinearLoadIndicator)).toHaveLength(1);
+    });
+
+    it('should render no data message if showTable is false', () => {
+        const contextValue = {...defaultContextValue, showTable: false};
+        const component = setUp({contextValue});
+        expect(component.find(LinearLoadIndicator)).toHaveLength(0);
+        expect(component.find(AttributeTableHeader)).toHaveLength(0);
+        expect(component.find(FacetViewHeader).prop('title')).toEqual(defaultConfig.caption);
+        expect(component.find(DescriptionIcon).prop('description')).toBe('description string');
+        expect(component.find(BasicTablePagination)).toHaveLength(0);
+        expect(component.find('.noData')).toHaveLength(1);
+    });
+
+    it('should render DescriptionIcon with correct description prop if attributeType is null or undefined', () => {
+        const contextValue = {...defaultContextValue, showTable: false, attributeType: null};
+        const component = setUp({contextValue});
+        expect(component.find(DescriptionIcon).prop('description')).toBe(undefined);
+    });
+});

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

@@ -0,0 +1,20 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles(() => ({
+    root: {
+        display: 'flex',
+        flexDirection: 'column'
+    },
+    content: {
+        position: 'relative',
+        overflow: 'hidden'
+    },
+    noData: {
+        fontSize: '13px',
+        paddingLeft: '20px',
+        color: 'rgba(0,0,0,0.54)'
+    },
+    header: {
+        padding: '0 4px 0 16px'
+    }
+}));

package/src/components/ProfileTableAttributeView/components/types.ts

@@ -0,0 +1,16 @@
+type PlainColumnDataType = {
+    id: string;
+    label: string;
+    description?: string;
+    dataTypeDefinition: any;
+};
+
+export type ColumnsDataType = Array<
+    | {
+          id: string;
+          label: string;
+          columns: Array<PlainColumnDataType>;
+          description?: string;
+      }
+    | PlainColumnDataType
+>;

package/src/components/ProfileTableAttributeView/contexts/TableAttributeContext.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import {AttributeType, ComplexAttributeValue} from '@reltio/mdm-sdk';
+import {ColumnsDataType} from '../components/types';
+
+export const TableAttributeContext = React.createContext<{
+    searchQuery: string;
+    setSearchQuery: (query: string) => void;
+    values: ComplexAttributeValue[];
+    page: number;
+    setPage: (page: number) => void;
+    isLoading: boolean;
+    visibleColumns: string[];
+    onChangeColumns: (cols: string[]) => void;
+    onToggleFilters: () => void;
+    onSort: (payload) => void;
+    onFilter: (payload) => void;
+    hasPaging: boolean;
+    totalVisibleValues: number;
+    showTable: boolean;
+    filters: {
+        [key: string]: {
+            filter: string;
+            values: [string];
+        };
+    };
+    sorting: {
+        order: 'desc' | 'asc';
+        field: string;
+    };
+    attributeType: AttributeType;
+    allColumnsData: ColumnsDataType;
+        }>(null);
+
+TableAttributeContext.displayName = 'TableAttributeContext';

package/src/components/ProfileTableAttributeView/helpers/tableAttributeHelpers.ts

@@ -0,0 +1,72 @@
+import {assoc, chain, isNil, map, path, pipe, prop, reduce, reject, slice, split, uniqBy} from 'ramda';
+import {
+    AttributeNode,
+    AttributeType,
+    attributeUriToSearchUri,
+    flatAttributeTreeNode,
+    getAttrDataTypeDefinition,
+    getAttributeTypesTree,
+    getOvAttributeValuesByPathWithUri,
+    isAttributeSearchUri,
+    Metadata,
+    SearchParent
+} from '@reltio/mdm-sdk';
+import HeadCellRenderer from '../components/AttributeTable/cell-renderers/HeadCellRenderer';
+import DefaultCellValueRenderer from '../components/AttributeTable/cell-renderers/DefaultCellValueRenderer';
+
+export const getColumnsDataFromAttributeNode = (attrNode: AttributeNode, parents: SearchParent[]) => {
+    const {uri, label, children, name, description} = attrNode;
+    return reject(isNil, {
+        id: attributeUriToSearchUri(uri, parents),
+        label,
+        description,
+        dataTypeDefinition: getAttrDataTypeDefinition(attrNode),
+        children: children?.map((childNode) => getColumnsDataFromAttributeNode(childNode, parents.concat({name})))
+    });
+};
+
+export const getColumnsData = (metadata: Metadata, attributeType: AttributeType) =>
+    pipe(
+        (metadata: Metadata, attributeType: AttributeType) => getAttributeTypesTree(metadata, attributeType),
+        map((attrNode: AttributeNode) => getColumnsDataFromAttributeNode(attrNode, [attributeType])),
+        chain(flatAttributeTreeNode),
+        uniqBy(prop('id'))
+    )(metadata, attributeType);
+
+const getAttrPathFromColumnId = pipe(split('.'), slice(2, Infinity));
+
+const getAttributeValues = (attrPath, value) =>
+    pipe(path(['value']), getOvAttributeValuesByPathWithUri(attrPath))(value);
+
+const getRowValueByColumnId = (columnId, value) => {
+    const attrPath = getAttrPathFromColumnId(columnId);
+    return getAttributeValues(attrPath, value);
+};
+
+export const getBasicTableRowsData = (values, columnsData) =>
+    values.map((value) =>
+        pipe(
+            reduce((acc, {id}) => assoc(id, getRowValueByColumnId(id, value), acc), {}),
+            assoc('value', value)
+        )(columnsData)
+    );
+
+const getNestedPathByColumnId = (columnId) => {
+    if (isAttributeSearchUri(columnId)) {
+        const attrPath = getAttrPathFromColumnId(columnId);
+        return attrPath.length > 1 ? attrPath.slice(0, -1) : null;
+    } else {
+        return null;
+    }
+};
+
+const getColumnDataByColumnId = (columnData) => ({
+    ...columnData,
+    sortable: true,
+    resizable: true,
+    nestedPath: getNestedPathByColumnId(columnData.id),
+    headCellRenderer: HeadCellRenderer,
+    rowCellValueRenderer: DefaultCellValueRenderer
+});
+
+export const getBasicTableColumnsData = map(getColumnDataByColumnId);

package/src/components/ProfileTableAttributeView/hooks/__tests__/helpers.test.ts

@@ -0,0 +1,97 @@
+import {buildMDMFilters} from '../helpers';
+import {DataTypes} from '@reltio/mdm-sdk';
+
+describe('buildMDMFilters tests', () => {
+    it('should build correct filter for "in.file"', () => {
+        const filters = {
+            member: {
+                filter: 'in.file',
+                value: {link: 'fileLink'}
+            }
+        };
+        const columnsData = [
+            {
+                id: 'member',
+                label: 'member label',
+                dataTypeDefinition: {
+                    type: DataTypes.TYPE_STRING
+                }
+            }
+        ];
+
+        expect(buildMDMFilters(columnsData, filters)).toEqual([
+            {fieldName: 'member', type: 'String', filter: 'in.file', values: [{link: 'fileLink'}]}
+        ]);
+    });
+
+    it('should build correct filter for boolean type', () => {
+        const filters = {
+            member: {
+                filter: 'equals',
+                value: true
+            }
+        };
+        const columnsData = [
+            {
+                id: 'member',
+                label: 'member label',
+                dataTypeDefinition: {
+                    type: DataTypes.TYPE_BOOLEAN_RADIO
+                }
+            }
+        ];
+
+        expect(buildMDMFilters(columnsData, filters)).toEqual([
+            {fieldName: 'member', type: 'Boolean_Radio', filter: 'equals', values: [true]}
+        ]);
+    });
+
+    it('should build correct filter for "hasAll" filter', () => {
+        const filters = {
+            member: {
+                filter: 'hasAll',
+                value: [
+                    {lookupCode: 'DIGI', value: 'Digital'},
+                    {lookupCode: 'POST', value: 'Postal'}
+                ]
+            }
+        };
+        const columnsData = [
+            {
+                id: 'member',
+                label: 'member label',
+                dataTypeDefinition: {
+                    type: DataTypes.TYPE_DEPENDENT_LOOKUP
+                }
+            }
+        ];
+
+        expect(buildMDMFilters(columnsData, filters)).toEqual([
+            {
+                fieldName: 'member',
+                type: 'DependentLookup',
+                filter: 'hasAll',
+                values: [
+                    [
+                        {lookupCode: 'DIGI', value: 'Digital'},
+                        {lookupCode: 'POST', value: 'Postal'}
+                    ]
+                ]
+            }
+        ]);
+    });
+
+    it('should build empty filters for null', () => {
+        const columnsData = [
+            {
+                id: 'member',
+                label: 'member label',
+                dataTypeDefinition: {
+                    type: DataTypes.TYPE_STRING
+                }
+            }
+        ];
+
+        expect(buildMDMFilters(columnsData, null)).toEqual([]);
+    });
+});

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

@@ -0,0 +1,13 @@
+import {propEq} from 'ramda';
+import {Maybe} from '@reltio/mdm-sdk';
+import {ColumnData, ColumnFilter, columnFilterToMdmFilter} from '@reltio/components';
+
+export const buildMDMFilters = (columnsData: ColumnData[], filters: Record<string, ColumnFilter>) =>
+    Maybe.fromNull<Record<string, ColumnFilter>>(filters)
+        .map<ReturnType<typeof columnFilterToMdmFilter>[]>((filters) =>
+            Object.entries(filters).map(([columnId, columnFilter]) => {
+                const columnData = columnsData.find(propEq('id', columnId));
+                return columnFilterToMdmFilter(columnData, columnFilter);
+            })
+        )
+        .orSome([]);

package/src/components/ProfileTableAttributeView/hooks/reducer.ts

@@ -0,0 +1,19 @@
+import {basicTableViewState, createStandardAction} from '@reltio/components';
+
+const CHANGE_SEARCH_QUERY = 'CHANGE_SEARCH_QUERY';
+
+const actions = {
+    ...basicTableViewState.actions,
+    changeSearchQuery: createStandardAction(CHANGE_SEARCH_QUERY)
+};
+
+const reducer = (state, action) => {
+    switch (action.type) {
+        case CHANGE_SEARCH_QUERY:
+            return {...state, searchQuery: action.payload, page: 0};
+        default:
+            return basicTableViewState.reducer(state, action);
+    }
+};
+
+export {reducer as default, actions};

package/src/components/ProfileTableAttributeView/hooks/useTableAttribute.ts

@@ -0,0 +1,77 @@
+import {useMemo, useReducer} from 'react';
+import {reject, isNil, pipe, not, prop} from 'ramda';
+import {useSelector} from 'react-redux';
+import {
+    ComplexAttributeValue,
+    findAttributeTypeByUri,
+    isComplexAttribute,
+    SingleAttributeViewConfig
+} from '@reltio/mdm-sdk';
+import mdm from '@reltio/mdm-module';
+import {useActions} from '@reltio/components';
+import reducer, {actions} from './reducer';
+import {getColumnsData} from '../helpers/tableAttributeHelpers';
+import {useSingleAttributeLoader} from '../../hooks/useSingleAttributeLoader';
+import {buildMDMFilters} from './helpers';
+
+const DEFAULT_COUNT_COLUMN = 5;
+
+export const useTableAttribute = (config: SingleAttributeViewConfig) => {
+    const {attributeUri} = config;
+    const metadata = useSelector(mdm.selectors.getMetadata);
+    const attributeType = useMemo(() => findAttributeTypeByUri(metadata, attributeUri), [metadata, attributeUri]);
+    const allColumnsData = useMemo(
+        () => (attributeType ? getColumnsData(metadata, attributeType) : []),
+        [metadata, attributeType]
+    );
+    const initialState = useMemo(
+        () => ({
+            searchQuery: '',
+            filters: null,
+            sorting: undefined,
+            visibleColumns: allColumnsData
+                .filter(pipe(prop('dataTypeDefinition'), isComplexAttribute, not))
+                .map(({id}) => id)
+                .slice(0, DEFAULT_COUNT_COLUMN),
+            page: 0
+        }),
+        [allColumnsData]
+    );
+
+    const [state, dispatch] = useReducer(reducer, initialState);
+
+    const {searchQuery, filters, sorting, page} = state;
+    const isEditableMode = useSelector(mdm.selectors.getIsEditableMode);
+
+    const requestFilters = useMemo(() => {
+        const mdmFilters = buildMDMFilters(allColumnsData, filters);
+        return mdmFilters.length ? mdmFilters : null;
+    }, [filters, allColumnsData]);
+
+    const params = useMemo(
+        () => reject(isNil, {filters: requestFilters, page, sorting, searchQuery}),
+        [requestFilters, page, sorting, searchQuery]
+    );
+    const {changeSearchQuery, changePage, toggleSort, changeFilter, toggleFilters, changeColumns} = useActions({
+        actions,
+        dispatch
+    });
+    const attribute = useSingleAttributeLoader<ComplexAttributeValue>(config, params);
+    const showTable = Boolean(
+        (attribute?.values?.length || requestFilters || searchQuery || isEditableMode) &&
+            attributeType &&
+            !attributeType.hidden
+    );
+    return {
+        ...state,
+        setSearchQuery: changeSearchQuery,
+        setPage: changePage,
+        onSort: toggleSort,
+        onFilter: changeFilter,
+        onToggleFilters: toggleFilters,
+        onChangeColumns: changeColumns,
+        showTable,
+        allColumnsData,
+        ...attribute
+    };
+};

package/src/components/RightSidePanel/RightSidePanel.tsx

@@ -0,0 +1,43 @@
+import React, {useEffect} from 'react';
+import {SidePanelContentHeader, SidePanel, RightPanelTab} from '@reltio/components';
+import {isNil} from 'ramda';
+
+import {useStyles} from './styles';
+
+export enum ActivePanel {
+    Workflow,
+    Collaboration,
+    History,
+    DBConnector
+}
+
+type Props = {
+    active?: ActivePanel;
+    tabs: Array<RightPanelTab>;
+    onClose?: () => void;
+};
+
+export const RightSidePanel = ({active, tabs, onClose}: Props) => {
+    const styles = useStyles();
+    const isOpen = !isNil(active);
+    const {content, headerProps, hidden} = tabs[active] || {};
+
+    useEffect(() => {
+        if (hidden) {
+            onClose();
+        }
+    }, [active, hidden, onClose]);
+
+    return (
+        <div className={styles.wrapper}>
+            <SidePanel open={isOpen}>
+                {!hidden && (
+                    <>
+                        <SidePanelContentHeader {...headerProps} onClose={onClose} />
+                        {content}
+                    </>
+                )}
+            </SidePanel>
+        </div>
+    );
+};