@reltio/profile 1.4.1585 → 1.4.1586-mui5

package/src/components/ProfilePotentialMatchesView/__tests__/commonData.ts

@@ -0,0 +1,91 @@
+import {Metadata, ProfilePotentialMatchesViewConfig, ProfileViewTypes} from '@reltio/mdm-sdk';
+
+export const metadata = {
+    entityTypes: [
+        {
+            uri: 'configuration/entityTypes/HCP',
+            label: 'HCP',
+            matchGroups: [
+                {
+                    uri: 'configuration/entityTypes/HCP/matchGroups/HCPSameCountryCode',
+                    label: 'HCP Same Country Code'
+                }
+            ]
+        }
+    ]
+} as Metadata;
+
+export const config = {
+    point: 'com.reltio.plugins.ui.view' as const,
+    class: ProfileViewTypes.PotentialMatches,
+    id: 'com.reltio.plugins.entity.PotentialMatchesView',
+    caption: 'Potential matches'
+} as ProfilePotentialMatchesViewConfig;
+
+export const currentEntity = {
+    uri: 'current entity',
+    type: 'configuration/entityTypes/HCP'
+};
+
+export const matches = [
+    {
+        matchRules: ['manual'],
+        object: {
+            uri: 'entities/1Gw3QsjR',
+            type: 'configuration/entityTypes/HCP'
+        },
+        shortestTransitiveMatchPath: [
+            {
+                matchRules: ['manual'],
+                match: 'entities/1Gw3QsjR'
+            }
+        ],
+        direct: true,
+        matchScore: 0
+    },
+    {
+        matchRules: ['configuration/entityTypes/HCP/matchGroups/HCPSameCountryCode'],
+        object: {
+            uri: 'entities/1HM8WlMC',
+            type: 'configuration/entityTypes/HCP'
+        },
+        shortestTransitiveMatchPath: [
+            {
+                matchRules: ['configuration/entityTypes/HCP/matchGroups/HCPSameCountryCode'],
+                match: 'entities/1HM8WlMC'
+            }
+        ],
+        direct: true,
+        matchScore: 100
+    },
+    {
+        matchRules: ['configuration/entityTypes/HCP/matchGroups/HCPSameName'],
+        object: {
+            uri: 'entities/2WiVGZTQ',
+            type: 'configuration/entityTypes/HCP'
+        },
+        shortestTransitiveMatchPath: [
+            {
+                matchRules: ['configuration/entityTypes/HCP/matchGroups/HCPSameName'],
+                match: 'entities/2WiVGZTQ'
+            }
+        ],
+        direct: true,
+        matchScore: 100
+    },
+    {
+        matchRules: ['configuration/entityTypes/HCP/matchGroups/HCPSameCountryCode'],
+        object: {
+            uri: 'entities/1XL8k30v',
+            type: 'configuration/entityTypes/HCP'
+        },
+        shortestTransitiveMatchPath: [
+            {
+                matchRules: ['configuration/entityTypes/HCP/matchGroups/HCPSameCountryCode'],
+                match: 'entities/1XL8k30v'
+            }
+        ],
+        direct: true,
+        matchScore: 100
+    }
+];

package/src/components/ProfilePotentialMatchesView/styles.ts

@@ -0,0 +1,30 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: '52px'
+    },
+    matchesContainer: {
+        position: 'relative'
+    },
+    footer: {
+        display: 'flex',
+        alignItems: 'end',
+        flexGrow: 1,
+        justifyContent: 'flex-start',
+        borderTop: '1px solid rgba(0,0,0, 0.12)',
+        padding: '8px 16px',
+        color: theme.palette.primary.main,
+        fontSize: '13px',
+        letterSpacing: '0',
+        lineHeight: '15px'
+    },
+    noData: {
+        paddingLeft: '16px',
+        paddingBottom: '16px',
+        fontSize: '13px',
+        color: 'rgba(0,0,0,0.54)'
+    }
+}));

package/src/components/ProfileRelationsView/ProfileRelationsView.tsx

@@ -0,0 +1,24 @@
+import React, {useMemo} from 'react';
+import {useSelector} from 'react-redux';
+import mdmModule from '@reltio/mdm-module';
+import {RelationsViewConfig, parseRelationsConfig, Metadata} from '@reltio/mdm-sdk';
+import RelationsView from './components/RelationsView';
+import {RelationsViewStateContext} from './contexts/RelationsViewStateContext';
+import useRelationsState from './hooks/useRelationsState';
+
+type Props = {
+    config: RelationsViewConfig;
+    onResize?: (width: number, height: number) => void;
+    className?: string;
+};
+
+export const ProfileRelationsView = ({config, className}: Props) => {
+    const metadata: Metadata = useSelector(mdmModule.selectors.getMetadata);
+    const parsedConfig = useMemo(() => parseRelationsConfig(metadata, config), [metadata, config]);
+    const relationsState = useRelationsState(parsedConfig);
+    return (
+        <RelationsViewStateContext.Provider value={relationsState}>
+            <RelationsView config={parsedConfig} className={className} />
+        </RelationsViewStateContext.Provider>
+    );
+};

package/src/components/ProfileRelationsView/__tests__/ProfileRelationsView.test.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import * as reactRedux from 'react-redux';
+import {ProfileRelationsView} from '../ProfileRelationsView';
+import {ProfileViewTypes, RelationsContent, RelationsViewConfig} from '@reltio/mdm-sdk';
+import {RelationsViewStateContext} from '../contexts/RelationsViewStateContext';
+import RelationsView from '../components/RelationsView';
+
+const config: RelationsViewConfig = {
+    point: 'com.reltio.plugins.ui.view',
+    id: 'id',
+    class: ProfileViewTypes.Relations,
+    caption: 'Relations View',
+    content: {} as RelationsContent,
+    isComplex: false
+};
+jest.mock('@reltio/mdm-sdk', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/mdm-sdk'),
+    parseRelationsConfig: jest.fn().mockImplementation((_, config) => ({...config, parsed: true}))
+}));
+
+describe('ProfileRelationsView tests', () => {
+    const store = {
+        metadata: {
+            tenant: {}
+        },
+        tenant: {
+            id: 'tenant'
+        }
+    };
+
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+    });
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should render ProfileRelationsView', () => {
+        const component = shallow(<ProfileRelationsView config={config} />);
+        const provider = component.find(RelationsViewStateContext.Provider);
+        expect(provider).toHaveLength(1);
+        expect(Object.keys(provider.prop('value'))).toEqual([
+            'searchQuery',
+            'changeSearchQuery',
+            'sortOrder',
+            'toggleSortOrder',
+            'sortOption',
+            'changeSortOption',
+            'sortOptions',
+            'page',
+            'setPage',
+            'rowsPerPage',
+            'showInactive',
+            'toggleShowInactive'
+        ]);
+        const relationsView = component.find(RelationsView);
+        expect(relationsView).toHaveLength(1);
+        expect(relationsView.prop('config')).toEqual({...config, parsed: true});
+    });
+
+    it('should add default sorting - “Name” if we have sortOptions', () => {
+        const configWithSortOptions = {...config, sortOptions: {consolidatedRating: 'Consolidated Rating'}};
+        const component = shallow(<ProfileRelationsView config={configWithSortOptions} />);
+        const provider = component.find(RelationsViewStateContext.Provider);
+        expect(provider).toHaveLength(1);
+        expect(provider.prop('value')).toMatchObject({
+            sortOptions: [
+                {
+                    value: 'consolidatedRating',
+                    label: 'Consolidated Rating'
+                },
+                {
+                    label: 'Name',
+                    value: 'name'
+                }
+            ]
+        });
+    });
+
+    it('should not add default sorting - “Name” if we do not have sortOptions', () => {
+        const component = shallow(<ProfileRelationsView config={config} />);
+        const provider = component.find(RelationsViewStateContext.Provider);
+        expect(provider).toHaveLength(1);
+        expect(provider.prop('value')).toMatchObject({
+            sortOptions: []
+        });
+    });
+
+    it('should not add default sorting - “Name” if we have sortOptions with value name', () => {
+        const configWithSortNameOption = {
+            ...config,
+            sortOptions: {consolidatedRating: 'Consolidated Rating', name: 'name'}
+        };
+
+        const component = shallow(<ProfileRelationsView config={configWithSortNameOption} />);
+        const provider = component.find(RelationsViewStateContext.Provider);
+        expect(provider).toHaveLength(1);
+        expect(provider.prop('value')).toMatchObject({
+            sortOptions: [
+                {
+                    value: 'consolidatedRating',
+                    label: 'Consolidated Rating'
+                },
+                {
+                    label: 'name',
+                    value: 'name'
+                }
+            ]
+        });
+    });
+});

package/src/components/ProfileRelationsView/components/EditableRelationItem/EditableRelationItem.tsx

@@ -0,0 +1,133 @@
+import React, {memo, useCallback} from 'react';
+import {useSelector} from 'react-redux';
+import classnames from 'classnames';
+import i18n from 'ui-i18n';
+import mdm from '@reltio/mdm-module';
+import Typography from '@mui/material/Typography';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import {Connection, Metadata, isActiveObject, checkRemoved, checkEdited, checkIgnored} from '@reltio/mdm-sdk';
+import {EntityTypeIcon, EntityUriLink, SmallIconButtonWithTooltip} from '@reltio/components';
+import RelationTooltip from '../RelationTooltip/RelationTooltip';
+import {useRelationInfo} from '../../hooks/useRelationInfo';
+import {checkRelationPermission} from '../../helpers/permissions';
+import {SuggestedButtons} from '../SuggestedButtons/SuggestedButtons';
+import {useStyles} from './styles';
+
+type Props = {
+    connection: Connection;
+    onRemoveRelation: (relationUri: string) => void;
+    onEditRelation: (connection: Connection) => void;
+    onAcceptRelation?: (connection: Connection) => void;
+    onIgnoreRelation?: (connection: Connection) => void;
+    metadata: Metadata;
+    showControls: boolean;
+    renderRelationArrowButton?: () => React.ReactNode;
+};
+
+const EditableRelationItem = memo(
+    ({
+        connection,
+        metadata,
+        showControls,
+        onRemoveRelation,
+        onEditRelation,
+        onAcceptRelation,
+        onIgnoreRelation,
+        renderRelationArrowButton
+    }: Props) => {
+        const styles = useStyles();
+
+        const {entity, relation} = connection;
+        const removed = checkRemoved(connection);
+        const edited = checkEdited(connection);
+        const ignored = checkIgnored(connection);
+        const {entityType, entityLabel, preparedUri, relationLabel} = useRelationInfo(connection, metadata);
+        const isActive = isActiveObject(relation) && isActiveObject(entity);
+        const mode = useSelector(mdm.selectors.getMode);
+        const {canRemove, canUpdate} = checkRelationPermission({
+            mode,
+            onRemoveRelation,
+            onEditRelation,
+            metadata,
+            connection
+        });
+
+        const handleRemoveRelation = useCallback(
+            () => onRemoveRelation(connection.relation.relationUri),
+            [onRemoveRelation, connection]
+        );
+
+        const handleEditRelation = useCallback(() => onEditRelation(connection), [onEditRelation, connection]);
+
+        const handleAcceptRelation = useCallback(() => {
+            onAcceptRelation(connection);
+        }, [onAcceptRelation, connection]);
+
+        const handleIgnoreRelation = useCallback(() => onIgnoreRelation(connection), [onIgnoreRelation, connection]);
+
+        const editButtonsContent =
+            (canRemove || canUpdate) && showControls && !connection.suggested ? (
+                <>
+                    {canUpdate && (
+                        <SmallIconButtonWithTooltip
+                            icon={EditIcon}
+                            size="XS"
+                            onClick={handleEditRelation}
+                            tooltipTitle={i18n.text('Edit')}
+                        />
+                    )}
+                    {canRemove && (
+                        <SmallIconButtonWithTooltip
+                            icon={DeleteIcon}
+                            size="XS"
+                            onClick={handleRemoveRelation}
+                            tooltipTitle={i18n.text('Remove')}
+                        />
+                    )}
+                </>
+            ) : undefined;
+
+        const suggustedButtonsContent = connection.suggested ? (
+            <SuggestedButtons
+                acceptRelation={handleAcceptRelation}
+                ignoreRelation={handleIgnoreRelation}
+                size="small"
+                disabled={ignored}
+            />
+        ) : undefined;
+        const captionText = ignored ? i18n.text('ignored') : i18n.text('edited');
+        return (
+            <div
+                className={classnames(
+                    styles.container,
+                    {[styles.rowInactive]: !isActive},
+                    {[styles.removed]: removed || ignored}
+                )}
+            >
+                <div className={styles.row}>
+                    {renderRelationArrowButton && renderRelationArrowButton()}
+                    <EntityTypeIcon className={styles.entityAvatar} entityType={entityType} />
+                    <EntityUriLink value={preparedUri} className={styles.entityLabelContainer}>
+                        <RelationTooltip label={entityLabel} entity={entity}>
+                            <span className={styles.entityLabel}>{entityLabel}</span>
+                        </RelationTooltip>
+                        {(edited || ignored) && (
+                            <Typography variant="caption" className={styles.editedLabel}>
+                                ({captionText})
+                            </Typography>
+                        )}
+                        {relationLabel && <span className={styles.relationLabel}>{`, ${relationLabel}`}</span>}
+                    </EntityUriLink>
+
+                    <div className={styles.editButtonsContent}>{editButtonsContent}</div>
+                    {suggustedButtonsContent}
+                </div>
+            </div>
+        );
+    }
+);
+
+EditableRelationItem.displayName = 'EditableRelationItem';
+
+export default EditableRelationItem;

package/src/components/ProfileRelationsView/components/EditableRelationItem/__tests__/EditableRelationItem.specs.tsx

@@ -0,0 +1,222 @@
+import React from 'react';
+import * as reactRedux from 'react-redux';
+import mdmModule from '@reltio/mdm-module';
+import {ReactWrapper, shallow} from 'enzyme';
+import Typography from '@mui/material/Typography';
+import {EntityTypeIcon, EntityUriLink, SmallIconButtonWithTooltip} from '@reltio/components';
+import * as mdmSdk from '@reltio/mdm-sdk';
+import {Mode} from '@reltio/mdm-sdk';
+import EditableRelationItem from '../EditableRelationItem';
+import RelationTooltip from '../../RelationTooltip/RelationTooltip';
+import * as checkRelationPermission from '../../../helpers/permissions';
+import {SuggestedButtons} from '../../SuggestedButtons/SuggestedButtons';
+
+jest.mock('@reltio/mdm-sdk', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/mdm-sdk'),
+    checkRemoved: jest.fn(),
+    checkEdited: jest.fn(),
+    isActiveObject: jest.fn()
+}));
+
+describe('EditableRelationItem tests', () => {
+    const tenant = 't1';
+    const metadata = {
+        uri: 'configuration',
+        entityTypes: [
+            {
+                uri: 'configuration/entityTypes/HCP',
+                attributes: [
+                    {
+                        uri: 'configuration/entityTypes/HCP/attributes/Address'
+                    }
+                ]
+            }
+        ],
+        relationTypes: []
+    };
+
+    const store = {
+        metadata: {
+            [tenant]: metadata
+        },
+        tenant: {
+            id: tenant
+        }
+    };
+
+    const connection = {
+        entity: {
+            entityLabel: '123',
+            entityType: 'configuration/entityTypes/HCP',
+            entityUri: 'entities/1G3VPt9u'
+        },
+        relation: {
+            direction: 'in',
+            relationLabel: 'Friend',
+            relationType: 'configuration/relationTypes/Friend',
+            relationUri: 'relations/smu5Mkf'
+        }
+    };
+
+    const entityTypes = [
+        {
+            uri: 'configuration/entityTypes/HCP',
+            attributes: [
+                {
+                    uri: 'configuration/entityTypes/HCP/attributes/Address'
+                }
+            ]
+        }
+    ];
+
+    const onRemove = jest.fn();
+    const onEdit = jest.fn();
+
+    const defaultProps = {
+        connection,
+        onRemoveRelation: onRemove,
+        onEditRelation: onEdit,
+        metadata: {entityTypes} as mdmSdk.Metadata,
+        showControls: true
+    };
+    const checkRelationPermissionSpy = jest.spyOn(checkRelationPermission, 'checkRelationPermission');
+    const getModeSpy = jest.spyOn(mdmModule.selectors, 'getMode');
+    beforeEach(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector({}));
+        checkRelationPermissionSpy.mockReturnValue({
+            canRemove: true,
+            canUpdate: true
+        });
+        getModeSpy.mockReturnValue(Mode.Editing);
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should render main parts', () => {
+        const component = shallow(<EditableRelationItem {...defaultProps} />);
+
+        expect(component.find(EntityTypeIcon)).toHaveLength(1);
+        expect(component.find(EntityUriLink)).toHaveLength(1);
+        expect(component.find(SmallIconButtonWithTooltip)).toHaveLength(2);
+    });
+
+    it('should render components with correct props', () => {
+        const component = shallow(<EditableRelationItem {...defaultProps} />);
+
+        const entityTypeIcon = component.find(EntityTypeIcon);
+        expect(entityTypeIcon).toHaveLength(1);
+        expect(entityTypeIcon.prop('entityType')).toEqual(store.metadata[tenant].entityTypes[0]);
+
+        const entityUriLink = component.find(EntityUriLink);
+        expect(entityUriLink).toHaveLength(1);
+        expect(entityUriLink.prop('value')).toBe(connection.entity.entityUri);
+        expect(entityUriLink.find('.relationLabel').text()).toBe(`, ${connection.relation.relationLabel}`);
+
+        const relationTooltip = entityUriLink.find(RelationTooltip);
+        expect(relationTooltip).toHaveLength(1);
+        expect(relationTooltip.props()).toMatchObject({
+            label: connection.entity.entityLabel,
+            entity: connection.entity
+        });
+        expect(new ReactWrapper(relationTooltip.prop('children')).text()).toBe(connection.entity.entityLabel);
+    });
+
+    it('Edit buttons buttons behavior', () => {
+        const event = {} as React.MouseEvent<HTMLButtonElement, MouseEvent>;
+        const component = shallow(<EditableRelationItem {...defaultProps} />);
+
+        const editButtons = component.find(SmallIconButtonWithTooltip);
+        expect(editButtons).toHaveLength(2);
+        editButtons.at(0).prop('onClick')(event);
+        expect(onEdit).toHaveBeenCalledWith(connection);
+        editButtons.at(1).prop('onClick')(event);
+        expect(onRemove).toHaveBeenCalledWith(connection.relation.relationUri);
+    });
+
+    it('should render only edit button if canRemove == false', () => {
+        jest.spyOn(checkRelationPermission, 'checkRelationPermission').mockReturnValue({
+            canRemove: false,
+            canUpdate: true
+        });
+        const component = shallow(<EditableRelationItem {...defaultProps} />);
+        const editButton = component.find(SmallIconButtonWithTooltip);
+        expect(editButton).toHaveLength(1);
+        expect(editButton.prop('tooltipTitle')).toBe('Edit');
+    });
+
+    it('should render only remove button if canUpdate == false', () => {
+        jest.spyOn(checkRelationPermission, 'checkRelationPermission').mockReturnValue({
+            canRemove: true,
+            canUpdate: false
+        });
+        const component = shallow(<EditableRelationItem {...defaultProps} />);
+        const removeButton = component.find(SmallIconButtonWithTooltip);
+        expect(removeButton).toHaveLength(1);
+        expect(removeButton.prop('tooltipTitle')).toBe('Remove');
+    });
+
+    it('should set correct class name for removed item', () => {
+        jest.spyOn(mdmSdk, 'checkRemoved').mockReturnValue(true);
+        jest.spyOn(mdmSdk, 'isActiveObject').mockReturnValue(true);
+        const component = shallow(<EditableRelationItem {...defaultProps} />);
+        const container = component.find('div').at(0);
+        expect(container.prop('className')).toBe('container removed');
+    });
+
+    it('should caption for edited item', () => {
+        jest.spyOn(mdmSdk, 'checkEdited').mockReturnValue(true);
+        const component = shallow(<EditableRelationItem {...defaultProps} />);
+        const caption = component.find(Typography);
+        expect(caption.text()).toBe('(edited)');
+    });
+
+    it('should set correct class name for inactive item', () => {
+        jest.spyOn(mdmSdk, 'isActiveObject').mockReturnValue(false);
+        jest.spyOn(mdmSdk, 'checkRemoved').mockReturnValue(false);
+        const component = shallow(<EditableRelationItem {...defaultProps} />);
+        const container = component.find('div').at(0);
+        expect(container.prop('className')).toBe('container rowInactive');
+    });
+
+    it('should not render edit buttons when showControls prop is false', () => {
+        const props = {...defaultProps, showControls: false};
+        const component = shallow(<EditableRelationItem {...props} />);
+        expect(component.find(EntityTypeIcon)).toHaveLength(1);
+        expect(component.find(EntityUriLink)).toHaveLength(1);
+        expect(component.find(SmallIconButtonWithTooltip)).toHaveLength(0);
+    });
+
+    it('should not render edit buttons when connection.suggested is true', () => {
+        const props = {...defaultProps, connection: {...defaultProps.connection, suggested: true}, showControls: false};
+        const component = shallow(<EditableRelationItem {...props} />);
+
+        expect(component.find(EntityTypeIcon)).toHaveLength(1);
+        expect(component.find(EntityUriLink)).toHaveLength(1);
+        expect(component.find(SmallIconButtonWithTooltip)).toHaveLength(0);
+    });
+
+    it('should render SuggestedButtons when connection.suggested is true', () => {
+        const props = {...defaultProps, connection: {...defaultProps.connection, suggested: true}, showControls: false};
+        const component = shallow(<EditableRelationItem {...props} />);
+        expect(component.find(SuggestedButtons)).toHaveLength(1);
+    });
+
+    it('render arrow button correctly', () => {
+        const renderRelationArrowButton = () => <div className="arrowButton"></div>;
+        const props = {...defaultProps, showControls: false, renderRelationArrowButton};
+        const component = shallow(<EditableRelationItem {...props} />);
+        expect(component.find('.arrowButton')).toHaveLength(1);
+    });
+
+    it('should call checkRelationPermission with mode = Mode.Editing if selector getMode returns Mode.Editing', () => {
+        shallow(<EditableRelationItem {...defaultProps} />);
+        expect(checkRelationPermissionSpy.mock.calls[0][0]).toHaveProperty('mode', Mode.Editing);
+    });
+
+    it('should call checkRelationPermission with mode = Mode.Suggesting if selector getMode returns Mode.Suggesting', () => {
+        getModeSpy.mockReturnValue(Mode.Suggesting);
+        shallow(<EditableRelationItem {...defaultProps} />);
+        expect(checkRelationPermissionSpy.mock.calls[0][0]).toHaveProperty('mode', Mode.Suggesting);
+    });
+});

package/src/components/ProfileRelationsView/components/EditableRelationItem/styles.ts

@@ -0,0 +1,59 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+
+        marginBottom: '2px'
+    },
+    row: {
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'row',
+        minHeight: '24px',
+        padding: '0 16px'
+    },
+    rowInactive: {
+        background: theme.inactiveBackground
+    },
+    entityAvatar: {
+        height: '12px',
+        width: '12px',
+        fontSize: '11px',
+        marginRight: '8px'
+    },
+    entityLabelContainer: {
+        textDecoration: 'none',
+        cursor: 'pointer',
+        paddingRight: '8px'
+    },
+    entityLabel: {
+        color: theme.palette.primary.main,
+        fontSize: '13px',
+        letterSpacing: 0,
+        lineHeight: '15px'
+    },
+    relationLabel: {
+        color: theme.palette.text.secondary,
+        fontSize: '13px',
+        letterSpacing: 0,
+        lineHeight: '15px'
+    },
+    editButtonsContent: {
+        marginLeft: 'auto',
+        flex: '0 0 40px'
+    },
+    editButtons: {
+        padding: 0
+    },
+    removed: {
+        color: theme.palette.text.secondary,
+        textDecoration: 'line-through'
+    },
+    editedLabel: {
+        fontStyle: 'italic',
+        color: theme.palette.text.secondary,
+        margin: '0 5px'
+    }
+}));