@reltio/pivoting 1.4.1584 → 1.4.1586-mui5

package/public/bundle.js.LICENSE.txt

@@ -0,0 +1,59 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/*! decimal.js-light v2.5.1 https://github.com/MikeMcl/decimal.js-light/LICENCE */
+
+/**
+ * @license React
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @mui/material v5.13.4
+ *
+ * @license MIT
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @mui/styled-engine v5.13.2
+ *
+ * @license MIT
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * A better abstraction over CSS.
+ *
+ * @copyright Oleg Isonen (Slobodskoi) / Isonen 2014-present
+ * @website https://github.com/cssinjs/jss
+ * @license MIT
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/public/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@reltio/pivoting",
+  "version": "1.4.1586-mui5",
+  "license": "SEE LICENSE IN LICENSE FILE",
+  "main": "bundle.js",
+  "dependencies": {
+    "@date-io/moment": "^1.3.5",
+    "@reltio/components": "^1.4.1586-mui5",
+    "@reltio/dashboard": "^1.4.1586-mui5",
+    "@reltio/mdm-module": "^1.4.1586-mui5",
+    "@reltio/mdm-sdk": "^1.4.1586-mui5",
+    "classnames": "^2.2.5",
+    "memoize-one": "^5.1.0",
+    "object-hash": "^2.1.1",
+    "prop-types": "^15.6.2",
+    "ramda": "^0.28.0",
+    "react-redux": "^7.2.3",
+    "react-resize-detector": "^4.2.0",
+    "redux": "^4.1.2",
+    "ui-i18n": "bitbucket:reltio-ondemand/ui-i18n#v1.4.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/scripts/build/index.js

@@ -0,0 +1,20 @@
+const path = require('path');
+const fs = require('fs');
+
+const outputDir = path.resolve(process.cwd(), 'public');
+const generatePackageJson = () => {
+    const packageJson = require('../../package.json');
+    const result = {
+        name: packageJson.name,
+        version: packageJson.version,
+        license: 'SEE LICENSE IN LICENSE FILE',
+        main: 'bundle.js',
+        dependencies: packageJson.dependencies,
+        peerDependencies: packageJson.peerDependencies,
+        publishConfig: packageJson.publishConfig
+    };
+    const source = JSON.stringify(result, null, 2);
+    fs.writeFileSync(path.join(outputDir, 'package.json'), source);
+};
+
+generatePackageJson();

package/src/components/PivotingLayout/PivotingLayout.tsx

@@ -0,0 +1,34 @@
+import React, {memo} from 'react';
+import {ReltioGridLayoutItem} from '@reltio/mdm-sdk';
+import {ReltioGridLayout} from '@reltio/components';
+import {PivotingView} from '../../types';
+import {PivotingLayoutItem} from '../PivotingLayoutItem/PivotingLayoutItem';
+import {useStyles} from './styles';
+
+type Props = {
+    views: PivotingView[];
+    layout: ReltioGridLayoutItem[];
+    onLayoutChanged: (layout: ReltioGridLayoutItem[]) => void;
+};
+
+const PivotingLayout = ({views, layout, onLayoutChanged}: Props) => {
+    const styles = useStyles();
+
+    return (
+        <div className={styles.pageWrapper}>
+            <div className={styles.content}>
+                <div className={styles.mainPanel}>
+                    <ReltioGridLayout
+                        LayoutItem={PivotingLayoutItem}
+                        views={views}
+                        layout={layout}
+                        onLayoutChanged={onLayoutChanged}
+                        draggableHandle=".viewDraggableHandle"
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default memo(PivotingLayout);

package/src/components/PivotingLayout/__tests__/PivotingLayout.specs.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import {act} from 'react-dom/test-utils';
+import PivotingLayout from '../PivotingLayout';
+import {ReltioGridLayout} from '@reltio/components';
+
+describe('PivotingLayout tests', () => {
+    const onLayoutChangedSpy = jest.fn();
+    const defaultProps = {
+        views: [
+            {config: {id: 'view1', title: 'title1', component: 'Component'}},
+            {config: {id: 'view2', title: 'title2', component: 'Component'}},
+            {config: {id: 'view3', title: 'title3', component: 'Component'}}
+        ],
+        layout: [
+            {id: 'view1', height: 1, x: 0, y: 0, width: 1},
+            {id: 'view2', height: 1, x: 0, y: 1, width: 1}
+        ],
+        onLayoutChanged: onLayoutChangedSpy
+    };
+
+    it('should render PivotingLayout', () => {
+        const wrapper = shallow(<PivotingLayout {...defaultProps} />);
+        act(() => {
+            wrapper.update();
+        });
+        const grid = wrapper.find(ReltioGridLayout);
+        expect(grid.length).toBe(1);
+        expect(grid.prop('views')).toEqual(defaultProps.views);
+    });
+});

package/src/components/PivotingLayout/styles.ts

@@ -0,0 +1,30 @@
+import {makeStyles} from '@mui/styles';
+
+const configWidth = 490;
+
+export const useStyles = makeStyles({
+    pageWrapper: {
+        height: '100%',
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column'
+    },
+    content: {
+        display: 'flex',
+        overflow: 'hidden',
+        height: '100%'
+    },
+    rightPanel: {
+        overflowY: 'auto',
+        backgroundColor: '#FFF',
+        borderLeft: 'solid 1px rgba(0, 0, 0, 0.12)',
+        width: `${configWidth}px`,
+        minWidth: `${configWidth}px`,
+        maxWidth: `${configWidth}px`
+    },
+    mainPanel: {
+        flex: '1 1 auto',
+        overflow: 'auto',
+        backgroundColor: '#F9F9F9'
+    }
+});

package/src/components/PivotingLayoutItem/PivotingLayoutItem.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import {ViewsFactory} from '@reltio/dashboard';
+import {ReactGridLayoutItem} from '@reltio/components';
+import {PivotingView} from '../../types';
+
+type Props = {
+    className?: string;
+    isFullscreen: boolean;
+    style: React.CSSProperties;
+    onToggleFullscreen: (id: string) => void;
+    onRemove: (id: string) => void;
+    views: PivotingView[];
+    layoutItemConfig: ReactGridLayoutItem;
+    children: React.ReactNode;
+};
+
+export const PivotingLayoutItem = ({
+    layoutItemConfig,
+    views,
+    onToggleFullscreen,
+    isFullscreen,
+    className,
+    onRemove,
+    children: ResizeComponent,
+    style,
+    ...props
+}: Props) => {
+    const view = views.find(({config}) => layoutItemConfig.i === config.id);
+    if (!view) {
+        return null;
+    }
+
+    const {config} = view;
+    return (
+        <div style={style} className={className} {...props}>
+            {ViewsFactory.getComponent({
+                type: config.component,
+                config,
+                onRemove,
+                onToggleFullscreen,
+                isFullscreen
+            })}
+            {ResizeComponent}
+        </div>
+    );
+};

package/src/components/PivotingLayoutItem/__tests__/PivotingLayoutItem.specs.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import {PivotingLayoutItem} from '../PivotingLayoutItem';
+import {ViewsFactory} from '@reltio/dashboard';
+
+jest.mock('@reltio/dashboard', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/dashboard'),
+    ViewsFactory: {getComponent: jest.fn().mockImplementation(() => <div className="component">Component</div>)}
+}));
+
+describe('PivotingLayoutItem tests', () => {
+    const onToggleFullscreenMock = jest.fn();
+    const onRemoveMock = jest.fn();
+    const views = [
+        {
+            config: {
+                id: 'test1',
+                title: 'test',
+                component: 'Component',
+                config: 'config'
+            }
+        }
+    ];
+    const layoutItemConfig = {
+        i: 'test1',
+        x: 0,
+        y: 0,
+        w: 100,
+        h: 100
+    };
+    const props = {
+        views,
+        layoutItemConfig,
+        isFullscreen: false,
+        style: {},
+        onRemove: onRemoveMock,
+        onToggleFullscreen: onToggleFullscreenMock
+    };
+
+    it('should create layout item based on config', () => {
+        const wrapper = shallow(
+            <PivotingLayoutItem {...props}>
+                <div className="child">testChild</div>
+            </PivotingLayoutItem>
+        );
+        expect(wrapper.find('DashboardFacet'));
+        expect(ViewsFactory.getComponent).toBeCalledWith({
+            config: views[0].config,
+            isFullscreen: false,
+            onToggleFullscreen: onToggleFullscreenMock,
+            onRemove: onRemoveMock,
+            type: views[0].config.component
+        });
+        expect(wrapper.find('.component').text()).toBe('Component');
+        expect(wrapper.find('.child').text()).toBe('testChild');
+    });
+});

package/src/components/PivotingProfileBand/PivotingProfileBand.tsx

@@ -0,0 +1,46 @@
+import Avatar from '@mui/material/Avatar';
+import Typography from '@mui/material/Typography';
+import {AttributeType, getLabel} from '@reltio/mdm-sdk';
+import classnames from 'classnames';
+import {isNil} from 'ramda';
+import React from 'react';
+import useStyles from './styles';
+
+type Props = {
+    label: string;
+    attributeType: AttributeType;
+    className?: string;
+    classes?: Record<string, string>;
+    children?: React.ReactNode;
+};
+const PivotingProfileBand = ({label, attributeType, className, classes, children}: Props) => {
+    const styles = useStyles({classes});
+
+    if (isNil(attributeType)) {
+        return null;
+    }
+    return (
+        <div className={classnames(styles.profileBandWrapper, className)}>
+            <div className={styles.profileBand}>
+                <Avatar className={classnames(styles.profileIcon, styles.imageProfileIcon)} />
+                <div className={styles.profileInfo}>
+                    <div>
+                        <Typography variant="h6" className={styles.label}>
+                            {getLabel(label)}
+                        </Typography>
+                    </div>
+                    <div className={styles.specialInfo}>
+                        <div className={styles.attributeType}>
+                            <Typography className={classnames(styles.badge, className)} component="div">
+                                {getLabel(attributeType.label)}
+                            </Typography>
+                        </div>
+                    </div>
+                </div>
+                {children && <div>{children}</div>}
+            </div>
+        </div>
+    );
+};
+
+export default PivotingProfileBand;

package/src/components/PivotingProfileBand/__tests__/PivotingProfileBand.specs.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import PivotingProfileBand from '../PivotingProfileBand';
+import Avatar from '@mui/material/Avatar';
+
+describe('Pivoting profile band tests', () => {
+    const attributeType = {
+        name: 'FirstName',
+        uri: 'configuration/entityTypes/HCP/attributes/FirstName',
+        type: 'String'
+    };
+
+    it('should render main parts', () => {
+        const label = 'testLabel';
+        const component = shallow(
+            <PivotingProfileBand attributeType={attributeType} label={label}>
+                <div className="content">Content</div>
+            </PivotingProfileBand>
+        );
+
+        expect(component.find(Avatar)).toHaveLength(1);
+        expect(component.find('.label').text()).toBe(label);
+        expect(component.find('.content').text()).toBe('Content');
+    });
+});

package/src/components/PivotingProfileBand/styles.ts

@@ -0,0 +1,67 @@
+import {makeStyles} from '@mui/styles';
+
+const useStyles = makeStyles((theme) => ({
+    profileBandWrapper: {
+        // especially for IE (overflow fix)
+        flexShrink: 0
+    },
+    profileBand: {
+        display: 'flex',
+        padding: '16px 12px 16px 16px',
+        alignItems: 'flex-start',
+        backgroundColor: '#fff',
+        boxShadow: 'inset 0 -1px 0 0 rgba(0,114,206,0.06), inset 0 1px 0 0 rgba(0,114,206,0.06);',
+
+        '&:after': {
+            content: '""',
+            minHeight: 'inherit',
+            fontSize: 0
+        }
+    },
+    profileIcon: {
+        marginRight: '12px'
+    },
+    imageProfileIcon: {
+        width: '48px',
+        height: '48px'
+    },
+    profileInfo: {
+        display: 'flex',
+        flexDirection: 'column',
+        flex: '1 1 50%'
+    },
+    label: {
+        lineHeight: '1.2',
+        letterSpacing: '0.25px',
+        color: theme.palette.text.primary,
+        wordBreak: 'break-word',
+
+        '&+ $specialInfo': {
+            marginTop: '4px'
+        }
+    },
+    specialInfo: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+        width: '100%',
+        marginTop: '8px'
+    },
+    attributeType: {
+        display: 'flex',
+        flexWrap: 'wrap'
+    },
+    badge: {
+        padding: '2px 8px 3px',
+        borderRadius: '2px',
+        fontSize: '13px',
+        fontWeight: 500,
+        lineHeight: '15px',
+        display: 'inline-flex',
+        marginRight: '16px',
+        backgroundColor: '#0071ce',
+        color: '#f5f5f5'
+    }
+}));
+
+export default useStyles;

package/src/index.ts

@@ -0,0 +1,3 @@
+import {PivotingPerspective as PivotingView} from './perspective';
+
+export {PivotingView};

package/src/perspective/PivotingPerspective.tsx

@@ -0,0 +1,78 @@
+import React, {memo, useCallback, useEffect, useMemo, useState} from 'react';
+import {
+    AttributePresentations,
+    convertPivotingValueToSearchFilters,
+    getEntityUriFromAttributeUri,
+    PivotingPerspectiveConfig,
+    findAttributeTypeByUri,
+    getPivotingLabel,
+    isNested,
+    Metadata,
+    PivotingValue,
+    PrimitiveValue,
+    removeUnsupportedLayoutItems,
+    ReltioGridLayoutItem
+} from '@reltio/mdm-sdk';
+import {ReloadFacetProvider, SearchFiltersContext} from '@reltio/components';
+import PivotingLayout from '../components/PivotingLayout/PivotingLayout';
+import {useStyles} from './styles';
+import PivotingProfileBand from '../components/PivotingProfileBand/PivotingProfileBand';
+import {useSelector} from 'react-redux';
+import mdmModule from '@reltio/mdm-module';
+
+type Props = {
+    config: PivotingPerspectiveConfig;
+    attributeTypeUri: string;
+    value: PivotingValue[];
+};
+
+const PivotingPerspective = ({config, attributeTypeUri, value}: Props) => {
+    const styles = useStyles();
+    const [label, setLabel] = useState('');
+    const metadata: Metadata = useSelector(mdmModule.selectors.getMetadata);
+    const attributePresentations: AttributePresentations = useSelector(mdmModule.selectors.getAttributePresentations);
+    const attributeType = findAttributeTypeByUri(metadata, attributeTypeUri);
+
+    useEffect(() => {
+        getPivotingLabel({attributeType, attributePresentations, value}).then((label) => setLabel(label));
+    }, [attributeType, attributePresentations, value]);
+    const getFirstValue = (value: PivotingValue[]) => Object.values(value[0])[0];
+    const entityTypeUri = getEntityUriFromAttributeUri(attributeTypeUri);
+
+    const filters = convertPivotingValueToSearchFilters({
+        value: isNested(attributeType) ? value : (getFirstValue(value) as PrimitiveValue),
+        attributeType,
+        entityType: entityTypeUri
+    });
+
+    const pivotingViews = useMemo(
+        () =>
+            config.views.map((view) => ({
+                config: view
+            })),
+        [config]
+    );
+
+    const [layout, setLayout] = useState<ReltioGridLayoutItem[]>();
+    useEffect(() => {
+        const newLayout = removeUnsupportedLayoutItems(config.layout, config.views);
+        setLayout(newLayout);
+    }, [config]);
+
+    const handleLayoutChange = useCallback((layout: ReltioGridLayoutItem[]) => setLayout(layout), []);
+
+    return (
+        <div className={styles.perspectiveView}>
+            <SearchFiltersContext.Provider value={filters}>
+                <PivotingProfileBand label={label} attributeType={attributeType} />
+                <ReloadFacetProvider>
+                    {layout && (
+                        <PivotingLayout layout={layout} onLayoutChanged={handleLayoutChange} views={pivotingViews} />
+                    )}
+                </ReloadFacetProvider>
+            </SearchFiltersContext.Provider>
+        </div>
+    );
+};
+
+export default memo(PivotingPerspective);

package/src/perspective/__tests__/PivotingPerspective.specs.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import {act} from 'react-dom/test-utils';
+import {mount, shallow} from 'enzyme';
+import PivotingLayout from '../../components/PivotingLayout/PivotingLayout';
+import * as reactRedux from 'react-redux';
+import * as mdmSdk from '@reltio/mdm-sdk';
+import mdm from '@reltio/mdm-module';
+import {EmptyStub} from '@reltio/components';
+import {SearchFiltersContext} from '@reltio/components';
+import PivotingPerspective from '../PivotingPerspective';
+
+jest.mock('@reltio/mdm-sdk', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/mdm-sdk'),
+    getPivotingLabel: jest.fn()
+}));
+describe('PivotingPerspective tests', () => {
+    const getPivotingLabelSpy = jest.spyOn(mdmSdk, 'getPivotingLabel');
+
+    const views = [
+        {
+            component: 'DashboardFacet',
+            attributeUri: 'configuration/entityTypes/HCP/attributes/CountryCode',
+            chartType: 'bar',
+            id: 'MyDashboard',
+            title: 'Country codes'
+        }
+    ];
+    const attrType = {
+        name: 'CountryCode',
+        lookupCode: 'COUNTRY_CD',
+        uri: 'configuration/entityTypes/Organization/attributes/CountryCode',
+        type: 'String'
+    };
+    const props = {
+        config: {
+            id: 'com.reltio.plugins.PivotingPerspective',
+            layout: [{minHeight: 10, x: 2, width: 2, y: 0, id: 'MyDashboard', height: 10}],
+            views,
+            margin: undefined
+        },
+        attributeTypeUri: 'configuration/entityTypes/HCP/attributes/CountryCode',
+        value: [{CountryCode: 'BE'}]
+    };
+    const metadata = {
+        entityTypes: [{uri: 'configuration/entityTypes/HCP', name: 'HCP', attributes: [attrType]}]
+    };
+    let resolveLabel;
+    beforeAll(() => {
+        jest.spyOn(PivotingLayout, 'type').mockImplementation(EmptyStub);
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector({}));
+        jest.spyOn(mdm.selectors, 'getMetadata').mockReturnValue(metadata);
+        jest.spyOn(mdm.selectors, 'getAttributePresentations').mockReturnValue({});
+        getPivotingLabelSpy.mockImplementation(
+            () =>
+                new Promise((resolve) => {
+                    resolveLabel = (value) => resolve(value);
+                })
+        );
+    });
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should render initial state correctly', () => {
+        const wrapper = mount(<PivotingPerspective {...props} />);
+        expect(wrapper.find('PivotingProfileBand')).toHaveLength(1);
+        expect(wrapper.find('PivotingLayout')).toHaveLength(0);
+    });
+
+    it('should pass correct props to profile band', async () => {
+        const wrapper = mount(<PivotingPerspective {...props} />);
+        await act(async () => {
+            resolveLabel('testLabel');
+        });
+        wrapper.update();
+        const profileBand = wrapper.find('PivotingProfileBand');
+        expect(profileBand).toHaveLength(1);
+        expect(profileBand.prop('label')).toEqual('testLabel');
+        expect(profileBand.prop('attributeType')).toEqual(attrType);
+    });
+
+    it('should pass correct props to context', async () => {
+        const wrapper = shallow(<PivotingPerspective {...props} />);
+        wrapper.update();
+        const contextProvider = wrapper.find(SearchFiltersContext.Provider);
+        expect(contextProvider.prop('value')).toEqual([
+            {fieldName: 'type', filter: 'equals', values: ['configuration/entityTypes/HCP']},
+            {fieldName: 'attributes.CountryCode', filter: 'equals', values: ['BE']}
+        ]);
+    });
+
+    it('should render dashboard layout correctly', async () => {
+        const wrapper = mount(<PivotingPerspective {...props} />);
+        wrapper.update();
+        expect(wrapper.find(PivotingLayout).props()).toMatchObject({
+            views: views.map((view) => ({config: view})),
+            layout: props.config.layout
+        });
+    });
+
+    it('should apply layout on change', async () => {
+        const wrapper = mount(<PivotingPerspective {...props} />);
+        wrapper.update();
+        const newLayout = [{minHeight: 10, x: 0, width: 2, y: 2, id: 'MyDashboard', height: 10}];
+        act(() => {
+            wrapper.find(PivotingLayout).prop('onLayoutChanged')(newLayout);
+        });
+        wrapper.update();
+        expect(wrapper.find(PivotingLayout).prop('layout')).toEqual(newLayout);
+    });
+});