@reltio/interactions 1.4.1585 → 1.4.1586-mui5

package/src/InteractionsTableView/InteractionsTable/styles.ts

@@ -0,0 +1,29 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    tableContainer: {
+        flex: 1,
+        display: 'flex',
+        fontFamily: 'Roboto',
+        color: 'rgba(0,0,0,0.54)'
+    },
+
+    '@global div[role=tooltip]': {
+        fontFamily: 'Roboto, Helvetica, Arial, sans-serif'
+    },
+
+    '@global div[role=presentation]': {
+        fontFamily: 'Roboto, Helvetica, Arial, sans-serif'
+    },
+    'row-cell__buttons-container': {
+        position: 'absolute'
+    },
+    'row-cell__buttons-wrapper': {
+        display: 'flex',
+        paddingLeft: '10px',
+        '& > button': {
+            marginLeft: '-10px',
+            transform: 'scale(0.9)'
+        }
+    }
+});

package/src/InteractionsTableView/InteractionsTableHeader/InteractionTypeSelector/InteractionTypeSelector.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {InteractionType} from '@reltio/mdm-sdk';
+import i18n from 'ui-i18n';
+import {SelectorWithOnlyOptionAutoSelect} from '@reltio/components';
+
+type Props = {
+    value: string;
+    onChange: (value: string) => void;
+    interactionTypes: InteractionType[];
+    className?: string;
+};
+const InteractionTypeSelector = ({value, onChange, interactionTypes, className}: Props) => {
+    return (
+        <SelectorWithOnlyOptionAutoSelect
+            classes={{
+                root: className
+            }}
+            value={value}
+            onChange={onChange}
+            options={interactionTypes.map(({label, uri}) => ({label, value: uri}))}
+            emptyLabel={i18n.text('All interaction types')}
+        />
+    );
+};
+
+export default InteractionTypeSelector;

package/src/InteractionsTableView/InteractionsTableHeader/InteractionTypeSelector/__tests__/InteractionTypeSelector.test.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import InteractionTypeSelector from '../InteractionTypeSelector';
+
+describe('InteractionTypeSelector tests', () => {
+    it('should render SelectorWithOnlyOptionAutoSelect with correct props', () => {
+        const props = {
+            value: 'configuration/interactionTypes/1',
+            onChange: jest.fn(),
+            className: 'className',
+            interactionTypes: [
+                {
+                    uri: 'configuration/interactionTypes/1',
+                    label: 'First'
+                },
+                {
+                    uri: 'configuration/interactionTypes/2',
+                    label: 'Second'
+                }
+            ]
+        };
+        const wrapper = shallow(<InteractionTypeSelector {...props} />);
+        expect(wrapper.find('SelectorWithOnlyOptionAutoSelect').props()).toMatchObject({
+            value: props.value,
+            onChange: props.onChange,
+            classes: expect.objectContaining({
+                root: props.className
+            }),
+            options: props.interactionTypes.map(({uri, label}) => ({value: uri, label})),
+            emptyLabel: 'All interaction types'
+        });
+    });
+});

package/src/InteractionsTableView/InteractionsTableHeader/InteractionsTableHeader.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Typography from '@mui/material/Typography';
+import i18n from 'ui-i18n';
+import {
+    BasicViewHeader,
+    ColumnsDataType,
+    ColumnsSettings,
+    FilterButton,
+    HideOnShrink,
+    Spacer,
+    VerticalDivider
+} from '@reltio/components';
+import {useStyles} from './styles';
+import InteractionTypeSelector from './InteractionTypeSelector/InteractionTypeSelector';
+import {InteractionTypeType} from '@reltio/mdm-sdk';
+
+const InteractionsTableHeader = ({
+    title,
+    total,
+    filtersEnabled,
+    onToggleFilters,
+    columnsData,
+    selectedColumns,
+    onChangeColumns,
+    interactionTypes,
+    currentInteractionType,
+    onInteractionTypeChange
+}) => {
+    const styles = useStyles();
+
+    return (
+        <BasicViewHeader title={title} classes={{root: styles.header, title: styles.title}}>
+            {interactionTypes.length > 0 && (
+                <InteractionTypeSelector
+                    className={styles.interactionTypeSelector}
+                    value={currentInteractionType}
+                    onChange={onInteractionTypeChange}
+                    interactionTypes={interactionTypes}
+                />
+            )}
+            <HideOnShrink widthToHide={500}>
+                <VerticalDivider height={28} margin={20} />
+                <Typography className={styles.totalCaption} variant="caption">
+                    {total > 1
+                        ? i18n.text('${count} interactions', {count: total})
+                        : i18n.text('${count} interaction', {count: total})}
+                </Typography>
+            </HideOnShrink>
+            <Spacer />
+            <FilterButton enabled={filtersEnabled} onClick={onToggleFilters} />
+            <VerticalDivider height={28} margin={4} />
+            <ColumnsSettings
+                columnsData={columnsData}
+                selectedColumns={selectedColumns}
+                onChangeColumns={onChangeColumns}
+            />
+        </BasicViewHeader>
+    );
+};
+
+InteractionsTableHeader.propTypes = {
+    title: PropTypes.string,
+    total: PropTypes.number,
+    columnsData: ColumnsDataType,
+    selectedColumns: PropTypes.arrayOf(PropTypes.string),
+    onChangeColumns: PropTypes.func,
+    filtersEnabled: PropTypes.bool,
+    onToggleFilters: PropTypes.func,
+    interactionTypes: PropTypes.arrayOf(InteractionTypeType),
+    currentInteractionType: PropTypes.string,
+    onInteractionTypeChange: PropTypes.func
+};
+
+export default InteractionsTableHeader;

package/src/InteractionsTableView/InteractionsTableHeader/__tests__/InteractionsTableHeader.test.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import InteractionsTableHeader from '../InteractionsTableHeader';
+import {BasicViewHeader} from '@reltio/components';
+
+describe(' interaction table scenario', () => {
+    const title = 'Interactions';
+    const total = 10;
+    const columnsData = [
+        {
+            id: 'members',
+            label: 'Actors',
+            sortable: false,
+            filterable: false,
+            dataTypeDefinition: {
+                type: 'String'
+            }
+        },
+        {
+            id: 'attributes.string',
+            label: 'String',
+            sortable: false,
+            filterable: false,
+            dataTypeDefinition: {
+                type: 'String',
+                uri: 'configuration/interactionTypes/Interacion/attributes/String'
+            }
+        }
+    ];
+    const selectedColumns = ['members'];
+    let interactionTypes, currentInteractionType;
+
+    it('should show correct header', () => {
+        interactionTypes = [
+            {
+                uri: 'configuration/interactionTypes/Interacion',
+                label: 'Interaction',
+                memberTypes: [],
+                hasMembers: false,
+                attributes: []
+            }
+        ];
+        currentInteractionType = 'configuration/interactionTypes/Interacion';
+        const onInteractionTypeChange = jest.fn();
+        const wrapper = shallow(
+            <InteractionsTableHeader
+                title={title}
+                total={total}
+                filtersEnabled={false}
+                columnsData={columnsData}
+                selectedColumns={selectedColumns}
+                interactionTypes={interactionTypes}
+                currentInteractionType={currentInteractionType}
+                onInteractionTypeChange={onInteractionTypeChange}
+            />
+        );
+        expect(wrapper.find(BasicViewHeader).prop('title')).toBe(title);
+        expect(wrapper.find('InteractionTypeSelector').props()).toMatchObject({
+            value: currentInteractionType,
+            interactionTypes,
+            onChange: onInteractionTypeChange
+        });
+        expect(wrapper.find('.totalCaption').text()).toBe('10 interactions');
+        expect(wrapper.find('FilterButton').prop('enabled')).toBe(false);
+    });
+
+    it('should show filters and correct string for 1 interaction', () => {
+        interactionTypes = [
+            {
+                uri: 'configuration/interactionTypes/Interacion',
+                label: 'Interaction',
+                memberTypes: [],
+                hasMembers: false,
+                attributes: []
+            }
+        ];
+        currentInteractionType = 'configuration/interactionTypes/Interacion';
+        const wrapper = shallow(
+            <InteractionsTableHeader
+                title={title}
+                total={1}
+                filtersEnabled={true}
+                columnsData={columnsData}
+                selectedColumns={selectedColumns}
+                interactionTypes={interactionTypes}
+                currentInteractionType={currentInteractionType}
+            />
+        );
+        expect(wrapper.find('FilterButton').prop('enabled')).toBe(true);
+        expect(wrapper.find('.totalCaption').text()).toBe('1 interaction');
+    });
+
+    it('should hide interaction type selector if interaction types are empty', () => {
+        const wrapper = shallow(
+            <InteractionsTableHeader
+                title={title}
+                total={1}
+                filtersEnabled={true}
+                columnsData={columnsData}
+                selectedColumns={selectedColumns}
+                interactionTypes={[]}
+            />
+        );
+        expect(wrapper.find('InteractionTypeSelector').length).toBe(0);
+    });
+});

package/src/InteractionsTableView/InteractionsTableHeader/styles.js

@@ -0,0 +1,21 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    header: {
+        '& > button': {
+            margin: '0 -2px'
+        },
+        paddingRight: '15px'
+    },
+    totalCaption: {
+        lineHeight: 'inherit',
+        fontSize: '14px',
+        color: 'rgba(0,0,0,0.6)',
+        flexShrink: 0,
+        marginRight: '5px'
+    },
+    interactionTypeSelector: {
+        margin: '3px 10px 0 30px',
+        overflow: 'hidden'
+    }
+});