@reltio/profile 1.4.1585 → 1.4.1586-mui5

package/src/components/ProfileSingleAttributeView/components/SingleAttributeView/__tests__/SingleAttributeView.test.tsx

@@ -0,0 +1,346 @@
+import React, * as react from 'react';
+import * as reactRedux from 'react-redux';
+import {omit} from 'ramda';
+import {shallow} from 'enzyme';
+import {BasicTablePagination, BasicView, LinearLoadIndicator, PivotingAttributeContext} from '@reltio/components';
+import {Mode, SingleAttributeViewConfig} from '@reltio/mdm-sdk';
+import {SingleAttributeView} from '../SingleAttributeView';
+import {SingleAttributeHeader} from '../../SingleAttributeHeader/SingleAttributeHeader';
+import SingleAttributeEditableContent from '../../SingleAttributeEditableContent/SingleAttributeEditableContent';
+import {SingleAttributeReadableContent} from '../../SingleAttributeReadableContent/SingleAttributeReadableContent';
+
+jest.mock('react', () => ({
+    ...(jest.requireActual('react') as Record<string, unknown>),
+    useContext: jest.fn().mockImplementation((f) => f())
+}));
+
+const tenant = 'knest';
+
+const pivotingAttributes = [
+    {
+        uri: 'configuration/entityTypes/HCP/attributes/FirstName'
+    },
+    {
+        uri: 'configuration/entityTypes/HCP/attributes/TypeCode'
+    }
+];
+
+let store;
+
+const config = {
+    attributeUri: 'configuration/entityTypes/HCP/attributes/Address',
+    caption: 'Single Attributes View',
+    max: 15
+} as SingleAttributeViewConfig;
+
+const attributeType = {
+    uri: 'configuration/entityTypes/HCP/attributes/Address'
+};
+
+const setUp = (customConfig?: SingleAttributeViewConfig, className?: string) =>
+    shallow(<SingleAttributeView config={customConfig || config} className={className} />);
+
+const mockSingleAttributeContext = ({
+    values,
+    page,
+    setPage,
+    isLoading,
+    totalVisibleValues,
+    hasPaging = false,
+    attrType = attributeType
+}) =>
+    jest.spyOn(react, 'useContext').mockImplementation(() => ({
+        values,
+        totalVisibleValues,
+        page,
+        setPage,
+        hasPaging,
+        isLoading,
+        attributeType: attrType
+    }));
+
+describe('SingleAttributeView tests', () => {
+    beforeEach(() => {
+        store = {
+            metadata: {
+                [tenant]: {
+                    uri: 'configuration',
+                    entityTypes: [
+                        {
+                            uri: 'configuration/entityTypes/HCP',
+                            attributes: [
+                                {
+                                    uri: 'configuration/entityTypes/HCP/attributes/Address'
+                                }
+                            ]
+                        }
+                    ]
+                }
+            },
+            profile: {
+                entity: {
+                    uri: 'entities/1E4APrQW'
+                },
+                mode: 'Viewing'
+            },
+            tenant: {
+                id: tenant
+            },
+            ui: {
+                config: {
+                    'com.reltio.plugins.pivoting.PivotingSettings': {
+                        pivotingAttributes
+                    }
+                }
+            }
+        };
+    });
+
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+    });
+
+    it('should render PivotingAttributeContext.Provider correctly', () => {
+        mockSingleAttributeContext({
+            values: [],
+            totalVisibleValues: 0,
+            page: 0,
+            setPage: jest.fn(),
+            isLoading: false
+        });
+
+        const component = setUp();
+
+        expect(component.find(PivotingAttributeContext.Provider).prop('value')).toEqual(pivotingAttributes);
+    });
+
+    it('should render BasicView with correct className', () => {
+        mockSingleAttributeContext({
+            values: [],
+            totalVisibleValues: 0,
+            page: 0,
+            setPage: jest.fn(),
+            isLoading: false
+        });
+
+        const className = 'TestClassName';
+
+        const component = setUp(config, className);
+
+        expect(component.find(BasicView).prop('className')).toBe(`root ${className}`);
+    });
+
+    it('should render SingleAttributeHeader correctly if paging is "null"', () => {
+        mockSingleAttributeContext({
+            values: ['Value 1', 'Value 2'],
+            totalVisibleValues: 2,
+            page: 0,
+            setPage: jest.fn(),
+            isLoading: false
+        });
+
+        const component = setUp();
+
+        expect(component.find(SingleAttributeHeader).props()).toEqual({
+            totalVisibleValues: 2,
+            caption: config.caption,
+            isEditableMode: false
+        });
+    });
+
+    it('should render SingleAttributeHeader correctly if paging exists', () => {
+        mockSingleAttributeContext({
+            values: [],
+            totalVisibleValues: 10,
+            page: 0,
+            setPage: jest.fn(),
+            isLoading: false
+        });
+
+        const component = setUp();
+
+        expect(component.find(SingleAttributeHeader).props()).toEqual({
+            totalVisibleValues: 10,
+            caption: config.caption,
+            isEditableMode: false
+        });
+    });
+
+    it('should render LinearLoadIndicator if isLoading is "true"', () => {
+        mockSingleAttributeContext({
+            values: [],
+            totalVisibleValues: 0,
+            page: 0,
+            setPage: jest.fn(),
+            isLoading: true
+        });
+
+        const component = setUp();
+
+        expect(component.find(LinearLoadIndicator)).toHaveLength(1);
+        expect(component.find(SingleAttributeReadableContent)).toHaveLength(0);
+        expect(component.find(SingleAttributeEditableContent)).toHaveLength(0);
+        expect(component.find('.noData')).toHaveLength(0);
+    });
+
+    it('should render no data message if values is empty', () => {
+        mockSingleAttributeContext({
+            values: [],
+            totalVisibleValues: 0,
+            page: 0,
+            setPage: jest.fn(),
+            isLoading: false
+        });
+
+        const component = setUp();
+
+        expect(component.find(LinearLoadIndicator)).toHaveLength(0);
+        expect(component.find(SingleAttributeReadableContent)).toHaveLength(0);
+        expect(component.find(SingleAttributeEditableContent)).toHaveLength(0);
+        expect(component.find('.noData')).toHaveLength(1);
+    });
+
+    it('should render no data message if attributeType does not exist', () => {
+        mockSingleAttributeContext({
+            values: [],
+            totalVisibleValues: 0,
+            page: 0,
+            setPage: jest.fn(),
+            isLoading: false,
+            attrType: {
+                uri: 'configuration/entityTypes/HCP/attributes/AddressWrong'
+            }
+        });
+
+        const component = setUp({
+            ...config,
+            attributeUri: 'configuration/entityTypes/HCP/attributes/AddressWrong'
+        });
+
+        expect(component.find(LinearLoadIndicator)).toHaveLength(0);
+        expect(component.find(SingleAttributeReadableContent)).toHaveLength(0);
+        expect(component.find(SingleAttributeEditableContent)).toHaveLength(0);
+        expect(component.find('.noData')).toHaveLength(1);
+    });
+
+    it('should render SingleAttributeRedableContent correctly if mode is "Viewing" and values exist', () => {
+        const values = ['Value 1', 'Value 2', 'Value 3'];
+
+        mockSingleAttributeContext({
+            values,
+            totalVisibleValues: 0,
+            page: 0,
+            setPage: jest.fn(),
+            isLoading: false
+        });
+
+        const component = setUp();
+
+        expect(component.find(LinearLoadIndicator)).toHaveLength(0);
+        expect(component.find('.noData')).toHaveLength(0);
+        expect(component.find(SingleAttributeReadableContent).props()).toEqual({
+            values,
+            attributeType: {
+                uri: 'configuration/entityTypes/HCP/attributes/Address'
+            }
+        });
+        expect(component.find(SingleAttributeEditableContent)).toHaveLength(0);
+    });
+
+    it('should render SingleAttributeEditableContent correctly if mode is editable', () => {
+        store.profile.mode = Mode.Editing;
+        const values = [];
+
+        mockSingleAttributeContext({
+            values,
+            totalVisibleValues: 0,
+            page: 0,
+            setPage: jest.fn(),
+            isLoading: false
+        });
+
+        const component = setUp();
+
+        expect(component.find(LinearLoadIndicator)).toHaveLength(0);
+        expect(component.find('.noData')).toHaveLength(0);
+        expect(component.find(SingleAttributeEditableContent).props()).toEqual({
+            values,
+            attributeType: {
+                uri: 'configuration/entityTypes/HCP/attributes/Address'
+            },
+            parentUri: store.profile.entity.uri,
+            noDataText: 'No data found'
+        });
+        expect(component.find(SingleAttributeReadableContent)).toHaveLength(0);
+    });
+
+    it('should not render BasicTablePagination if totalOvValues length less than max', () => {
+        mockSingleAttributeContext({
+            values: Array(5)
+                .fill(null)
+                .map((_, idx) => idx + 1),
+            totalVisibleValues: 5,
+            page: 0,
+            setPage: jest.fn(),
+            isLoading: false
+        });
+
+        const component = setUp();
+
+        expect(component.find(BasicTablePagination)).toHaveLength(0);
+    });
+
+    it('should render BasicTablePagination correctly if totalOvValues length more than max', () => {
+        const setPage = jest.fn();
+
+        mockSingleAttributeContext({
+            values: Array(15)
+                .fill(null)
+                .map((_, idx) => idx + 1),
+            totalVisibleValues: 20,
+            hasPaging: true,
+            page: 0,
+            setPage,
+            isLoading: false
+        });
+
+        const component = setUp();
+
+        expect(component.find(BasicTablePagination).props()).toEqual({
+            count: 20,
+            page: 0,
+            rowsPerPage: 15,
+            rowsPerPageOptions: [],
+            onChangePage: setPage,
+            classes: {root: 'pagination'}
+        });
+    });
+
+    it('should render BasicTablePagination with default rowsPerPage if config has no max property', () => {
+        const setPage = jest.fn();
+
+        mockSingleAttributeContext({
+            values: Array(15)
+                .fill(null)
+                .map((_, idx) => idx + 1),
+            totalVisibleValues: 20,
+            hasPaging: true,
+            page: 0,
+            setPage,
+            isLoading: false
+        });
+
+        const component = setUp(omit(['max'], config));
+
+        expect(component.find(BasicTablePagination).prop('rowsPerPage')).toBe(15);
+    });
+
+    it('should provide correct isEditableMode prop to SingleAttributeHeader in edit mode', () => {
+        store.profile.mode = Mode.Editing;
+        const component = setUp();
+
+        expect(component.find(SingleAttributeHeader).props()).toMatchObject({
+            isEditableMode: true
+        });
+    });
+});

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

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

package/src/components/ProfileSingleAttributeView/contexts/SingleAttributeContext.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import {AttributeValue, AttributeType} from '@reltio/mdm-sdk';
+
+export const SingleAttributeContext = React.createContext<{
+    searchQuery: string;
+    setSearchQuery: (query: string) => void;
+    values: AttributeValue[];
+    page: number;
+    setPage: (page: number) => void;
+    isLoading: boolean;
+    showInactive?: boolean;
+    toggleShowInactive?: (checked: boolean) => void;
+    hasPaging: boolean;
+    totalVisibleValues: number;
+    attributeType: AttributeType;
+    totalNonVisibleValues: number;
+    nonVisibleValues: AttributeValue[];
+        }>(null);
+
+SingleAttributeContext.displayName = 'SingleAttributeContext';

package/src/components/ProfileSingleAttributeView/hooks/useSingleAttribute.ts

@@ -0,0 +1,25 @@
+import {useState, useMemo, useCallback} from 'react';
+import {SingleAttributeViewConfig} from '@reltio/mdm-sdk';
+import {useSingleAttributeLoader} from '../../hooks/useSingleAttributeLoader';
+
+export const useSingleAttribute = (config: SingleAttributeViewConfig) => {
+    const [searchQuery, setSearchQuery] = useState('');
+    const [page, setPage] = useState(0);
+    const [showInactive, setShowInactive] = useState(false);
+    const params = useMemo(() => ({page, searchQuery, showInactive}), [page, searchQuery, showInactive]);
+    const attribute = useSingleAttributeLoader(config, params);
+    const toggleShowInactive = useCallback(() => {
+        setPage(0);
+        setShowInactive((showInactive) => !showInactive);
+    }, []);
+
+    return {
+        setSearchQuery,
+        searchQuery,
+        setPage,
+        page,
+        toggleShowInactive,
+        showInactive,
+        ...attribute
+    };
+};

package/src/components/ProfileSingleAttributeView/styles.ts

@@ -0,0 +1,26 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles(() => ({
+    header: {
+        padding: '0 4px 0 16px'
+    },
+    totalCaption: {
+        lineHeight: '19px',
+        fontSize: '14px',
+        letterSpacing: '0.24px',
+        color: 'rgba(0,0,0,0.6)',
+        flexShrink: 0,
+        marginRight: '5px',
+        justifyContent: 'flex-start',
+        paddingTop: '16px',
+        paddingBottom: '13px'
+    },
+    content: {
+        position: 'relative',
+        padding: '4px 16px 9px'
+    },
+    noData: {
+        fontSize: '13px',
+        color: 'rgba(0,0,0,0.54)'
+    }
+}));

package/src/components/ProfileTableAttributeView/ProfileTableAttributeView.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {TableAttributeViewConfig} from '@reltio/mdm-sdk';
+import {TableAttributeContext} from './contexts/TableAttributeContext';
+import {useTableAttribute} from './hooks/useTableAttribute';
+import {TableAttributeView} from './components/TableAttributeView/TableAttributeView';
+
+type Props = {
+    config: TableAttributeViewConfig;
+    className?: string;
+};
+
+export const ProfileTableAttributeView = ({config, className}: Props) => {
+    const tableAttribute = useTableAttribute(config);
+
+    return (
+        <TableAttributeContext.Provider value={tableAttribute}>
+            {config && <TableAttributeView config={config} className={className} />}
+        </TableAttributeContext.Provider>
+    );
+};