@reltio/profile 1.4.1584 → 1.4.1586-mui5

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

@@ -0,0 +1,188 @@
+import React, * as react from 'react';
+import {shallow} from 'enzyme';
+import {act} from 'react-dom/test-utils';
+import {
+    FacetViewHeader,
+    HideOnShrink,
+    ExpandableSearchInput,
+    OvIcon,
+    DescriptionIcon,
+    RequiredMark
+} from '@reltio/components';
+import {SingleAttributeHeader} from '../SingleAttributeHeader';
+import FilterButton from '../../FilterButton/FilterButton';
+
+jest.mock('react', () => ({
+    ...(jest.requireActual('react') as Record<string, unknown>),
+    useContext: jest.fn().mockImplementation((f) => f())
+}));
+
+jest.mock('@reltio/components');
+
+const setUp = (
+    totalItems = 10,
+    showInactiveValuesMenu = false,
+    caption = 'Single Attributes View',
+    isEditMode = false
+) => {
+    return shallow(
+        <SingleAttributeHeader
+            totalVisibleValues={totalItems}
+            caption={caption}
+            showInactiveValuesMenu={showInactiveValuesMenu}
+            isEditableMode={isEditMode}
+        />
+    );
+};
+
+const searchQuery = 'search query';
+const setSearchQuery = jest.fn();
+const setPage = jest.fn();
+
+const attributeType = {
+    label: 'HCP to HCA Affiliations',
+    name: 'Affiliations',
+    type: 'Reference',
+    description: 'Affilations description',
+    hidden: false,
+    important: false,
+    system: false,
+    searchable: true,
+    relationshipLabelPattern: '{AffiliationStatus} [,Primary - {PrimaryAffiliationIndicator}]',
+    uri: 'configuration/entityTypes/HCP/attributes/Affiliations'
+};
+
+const defaultContextValue = {
+    searchQuery,
+    setSearchQuery,
+    setPage,
+    attributeType
+};
+
+describe('SingleAttributeHeader tests', () => {
+    beforeEach(() => {
+        jest.spyOn(react, 'useContext').mockReturnValue(defaultContextValue);
+        (HideOnShrink as unknown as jest.Mock).mockImplementation(({children}) => <div>{children}</div>);
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should render DescriptionIcon with correct description prop', () => {
+        const component = setUp();
+        expect(component.find(DescriptionIcon).prop('description')).toBe(attributeType.description);
+    });
+
+    it('should render DescriptionIcon with correct description prop if attributeType is undefined', () => {
+        jest.spyOn(react, 'useContext').mockReturnValue({...defaultContextValue, attributeType: undefined});
+        const component = setUp();
+        expect(component.find(DescriptionIcon).prop('description')).toBe(undefined);
+    });
+
+    it('should render total items correctly items length don`t equal 1', () => {
+        const component = setUp(10);
+        expect(component.find('.totalCaption').text()).toBe('10 items');
+    });
+
+    it('should render total items correctly items length equal 1', () => {
+        const component = setUp(1);
+        expect(component.find('.totalCaption').text()).toBe('1 item');
+    });
+
+    it('should render caption correctly', () => {
+        const component = setUp();
+        expect(component.find(FacetViewHeader).prop('title')).toBe('Single Attributes View');
+    });
+
+    it('should not fail if caption is not provided', () => {
+        const component = setUp(10, false, null);
+        expect(component.find(FacetViewHeader).prop('title')).toBe(null);
+    });
+
+    it('should render correctly ExpandableSearchInput', () => {
+        const component = setUp();
+        expect(component.find(ExpandableSearchInput).prop('query')).toBe(searchQuery);
+        expect(component.find(ExpandableSearchInput).prop('onChange')).toBeDefined();
+    });
+
+    it('handleChangeSearchQuery handler should work correctly', () => {
+        const component = setUp();
+
+        act(() => {
+            component.find(ExpandableSearchInput).prop('onChange')('query');
+        });
+
+        expect(setSearchQuery).toHaveBeenCalledWith('query');
+        expect(setPage).toHaveBeenCalledWith(0);
+    });
+
+    it('should render FilterButton if showInactiveValuesMenu is true', () => {
+        let component = setUp(10, true);
+        expect(component.find(FilterButton).length).toBe(1);
+        component = setUp(10, false);
+        expect(component.find(FilterButton).length).toBe(0);
+    });
+
+    it('should render OvIcon if totalNonVisibleValues != 0', () => {
+        const nonVisibleValues = [
+            {
+                label: 'New Name 1222',
+                relationshipLabel: ',Primary - false',
+                value: {},
+                ov: false,
+                uri: 'entities/mnGj6Kn/attributes/Affiliations/a6pgLnJ'
+            },
+            {
+                label: 'RelationTableViewss',
+                relationshipLabel: '',
+                value: {},
+                ov: false,
+                uri: 'entities/mnGj6Kn/attributes/Affiliations/hbQdQdd'
+            },
+            {
+                label: '',
+                relationshipLabel: '',
+                value: {},
+                ov: false,
+                uri: 'entities/mnGj6Kn/attributes/Affiliations/rHmSBLC'
+            }
+        ];
+
+        jest.spyOn(react, 'useContext').mockReturnValue({
+            ...defaultContextValue,
+            totalNonVisibleValues: 10,
+            nonVisibleValues
+        });
+
+        const component = setUp();
+        const ovIcon = component.find(OvIcon);
+        expect(ovIcon).toHaveLength(1);
+        expect(ovIcon.prop('nonOvTotal')).toBe(10);
+        expect(ovIcon.prop('nonOvValues')).toBe(nonVisibleValues);
+        expect(ovIcon.prop('attributeType')).toBe(attributeType);
+    });
+
+    it('should render RequiredMark in edit mode if attributeType is required', () => {
+        jest.spyOn(react, 'useContext').mockReturnValue({
+            ...defaultContextValue,
+            attributeType: {...attributeType, required: true}
+        });
+        const component = setUp(10, false, 'SAV', true);
+        expect(component.find(RequiredMark)).toHaveLength(1);
+    });
+
+    it('should not render RequiredMark in read mode if attributeType is required', () => {
+        jest.spyOn(react, 'useContext').mockReturnValue({
+            ...defaultContextValue,
+            attributeType: {...attributeType, required: true}
+        });
+        const component = setUp();
+        expect(component.find(RequiredMark)).toHaveLength(0);
+    });
+
+    it('should not render RequiredMark in edit mode if attributeType is not required', () => {
+        const component = setUp();
+        expect(component.find(RequiredMark)).toHaveLength(0);
+    });
+});

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

@@ -0,0 +1,21 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles(() => ({
+    root: {
+        padding: '0 4px 0 16px'
+    },
+    totalCaption: {
+        lineHeight: '19px',
+        fontSize: '14px',
+        letterSpacing: '0.24px',
+        color: 'rgba(0,0,0,0.6)',
+        flexShrink: 0,
+        justifyContent: 'flex-start',
+        paddingTop: '16px',
+        paddingBottom: '13px'
+    },
+    ovIcon: {
+        marginTop: '2px',
+        marginLeft: '5px'
+    }
+}));

package/src/components/ProfileSingleAttributeView/components/SingleAttributeReadableContent/SingleAttributeReadableContent.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {ReadOnlyAttribute} from '@reltio/components';
+import {AttributeType, AttributeValue, isComplexAttribute} from '@reltio/mdm-sdk';
+import classnames from 'classnames';
+import {useStyles} from './styles';
+
+type Props = {
+    values: AttributeValue[];
+    attributeType: AttributeType;
+    showInactive: boolean;
+};
+
+export const SingleAttributeReadableContent = ({values, attributeType, showInactive}: Props) => {
+    const style = useStyles();
+    const isSimple = !isComplexAttribute(attributeType);
+    return (
+        <>
+            {values.map((value) => {
+                return (
+                    <ReadOnlyAttribute
+                        key={value.uri}
+                        attributeValue={value}
+                        attributeType={attributeType}
+                        showNonOv={showInactive}
+                        className={classnames({[style.simpleAttribute]: isSimple})}
+                    />
+                );
+            })}
+        </>
+    );
+};

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import {ReadOnlyAttribute} from '@reltio/components';
+import {SingleAttributeReadableContent} from '../SingleAttributeReadableContent';
+
+describe('SingleAttributeReadableContent tests', () => {
+    const attributeType = {
+        uri: 'configuration/entityTypes/HCP/attributes/Simple',
+        type: 'String',
+        name: 'Simple',
+        label: 'Simple label'
+    };
+    const values = [
+        {
+            type: attributeType.uri,
+            uri: 'entities/sIeHttl/attributes/Simple/u123',
+            value: '123',
+            ov: true
+        },
+        {
+            type: attributeType.uri,
+            uri: 'entities/sIeHttl/attributes/Simple/u456',
+            value: '456',
+            ov: false
+        }
+    ];
+
+    const defaultProps = {
+        attributeType,
+        values,
+        showInactive: false
+    };
+
+    it('should render ReadOnlyAttribute for each value', () => {
+        const props = {...defaultProps};
+        const component = shallow(<SingleAttributeReadableContent {...props} />);
+        const readOnlyAttributes = component.find(ReadOnlyAttribute);
+        expect(readOnlyAttributes).toHaveLength(2);
+        expect(readOnlyAttributes.at(0).prop('attributeValue')).toBe(values[0]);
+        expect(readOnlyAttributes.at(1).prop('attributeValue')).toBe(values[1]);
+    });
+});

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

@@ -0,0 +1,9 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles(() => ({
+    simpleAttribute: {
+        fontSize: '13px',
+        lineHeight: '15px',
+        marginBottom: '4px'
+    }
+}));

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

@@ -0,0 +1,90 @@
+import React, {useContext} from 'react';
+import {useSelector} from 'react-redux';
+import i18n from 'ui-i18n';
+import classnames from 'classnames';
+import {PivotingAttribute, SingleAttributeViewConfig} from '@reltio/mdm-sdk';
+import {BasicView, BasicTablePagination, LinearLoadIndicator, PivotingAttributeContext} from '@reltio/components';
+import mdm from '@reltio/mdm-module';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import {SingleAttributeHeader} from '../SingleAttributeHeader/SingleAttributeHeader';
+import SingleAttributeEditableContent from '../SingleAttributeEditableContent/SingleAttributeEditableContent';
+import {SingleAttributeContext} from '../../contexts/SingleAttributeContext';
+import {SingleAttributeReadableContent} from '../SingleAttributeReadableContent/SingleAttributeReadableContent';
+import {useStyles} from './styles';
+
+const DEFAULT_ROWS_PER_PAGE = 15;
+
+type Props = {
+    config: SingleAttributeViewConfig;
+    className?: string;
+};
+
+export const SingleAttributeView = ({config, className}: Props) => {
+    const {caption, max = DEFAULT_ROWS_PER_PAGE, showInactiveValuesMenu} = config;
+
+    const styles = useStyles();
+
+    const {values, totalVisibleValues, page, setPage, isLoading, hasPaging, attributeType, showInactive} =
+        useContext(SingleAttributeContext);
+
+    const entityUri = useSelector(mdm.selectors.getEntityUri);
+    const isViewMode = useSelector(mdm.selectors.getIsViewMode);
+    const isEditableMode = useSelector(mdm.selectors.getIsEditableMode);
+    const pivotingAttributes: PivotingAttribute[] = useSelector(mdm.selectors.getPivotingAttributes);
+
+    const hasValues = values.length !== 0;
+    const noDataText = config['text-empty'] || i18n.text('No data found');
+
+    const renderContent = () => {
+        if (isLoading) {
+            return <LinearLoadIndicator />;
+        }
+
+        if (attributeType) {
+            if (isViewMode && hasValues) {
+                const props = {
+                    values,
+                    attributeType,
+                    showInactive
+                };
+                return <SingleAttributeReadableContent {...props} />;
+            } else if (isEditableMode) {
+                const props = {
+                    values,
+                    attributeType,
+                    parentUri: entityUri,
+                    showInactive,
+                    noDataText
+                };
+                return <SingleAttributeEditableContent {...props} />;
+            }
+        }
+
+        return <Typography className={styles.noData}>{noDataText}</Typography>;
+    };
+
+    return (
+        <PivotingAttributeContext.Provider value={pivotingAttributes}>
+            <BasicView className={classnames(styles.root, className)}>
+                <SingleAttributeHeader
+                    totalVisibleValues={totalVisibleValues}
+                    caption={caption}
+                    showInactiveValuesMenu={showInactiveValuesMenu}
+                    isEditableMode={isEditableMode}
+                />
+                <Box className={styles.content}>{renderContent()}</Box>
+                {hasPaging && (
+                    <BasicTablePagination
+                        count={totalVisibleValues}
+                        page={page}
+                        rowsPerPage={max}
+                        rowsPerPageOptions={[]}
+                        onChangePage={setPage}
+                        classes={{root: styles.pagination}}
+                    />
+                )}
+            </BasicView>
+        </PivotingAttributeContext.Provider>
+    );
+};