@reltio/profile 1.4.1585 → 1.4.1586-mui5

package/src/components/ProfileRelationsView/components/RelationsEditableContent/RelationsEditableContent.tsx

@@ -0,0 +1,153 @@
+import React, {useCallback} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
+import {pipe, partition, evolve, always, omit} from 'ramda';
+import i18n from 'ui-i18n';
+import Button from '@mui/material/Button';
+import AddIcon from '@mui/icons-material/Add';
+import Divider from '@mui/material/Divider';
+import Typography from '@mui/material/Typography';
+import {
+    Connection,
+    isTempUri,
+    Mode,
+    createNewConnectionWithDefaultRelationType,
+    checkNew,
+    RelationsViewConfig
+} from '@reltio/mdm-sdk';
+import mdmModule, {profile} from '@reltio/mdm-module';
+import {RelationEditor} from '@reltio/components';
+import EditableRelationItem from '../EditableRelationItem/EditableRelationItem';
+import {getFirstRelationTypeObject} from '../../helpers/relation';
+import {SecondLevelWrapper} from '../SecondLevelWrapper/SecondLevelWrapper';
+import {useStyles} from './styles';
+
+export type Props = {
+    className?: string;
+    noDataText: string;
+    connections: Array<Connection>;
+    config: RelationsViewConfig;
+    mode: Mode;
+    parentEntityUri?: string;
+};
+
+const RelationsEditableContent = ({className, connections = [], config, mode, noDataText, parentEntityUri}: Props) => {
+    const metadata = useSelector(mdmModule.selectors.getMetadata);
+    const relationToAdd = useSelector((state) => mdmModule.selectors.getRelationToAddByViewId(state, config.id));
+    const relationsToEdit = useSelector((state) => mdmModule.selectors.getRelationsToEditByViewId(state, config.id));
+    const entity = useSelector(mdmModule.selectors.getEntity);
+    const checkIfCanAddRelations = useSelector((state) =>
+        mdmModule.selectors.getCheckIfCanAddRelations(state, config.content)
+    );
+
+    const dispatch = useDispatch();
+    const styles = useStyles();
+
+    const onAddRelation = useCallback(() => {
+        const newConnection = createNewConnectionWithDefaultRelationType({config, mode, metadata, parentEntityUri});
+        pipe(profile.relations.actions.openRelationEditor(config.id), dispatch)(newConnection);
+    }, [config, mode, metadata, dispatch, parentEntityUri]);
+
+    const onRemoveRelation = useCallback(
+        (relationUri) => {
+            dispatch(profile.relations.actions.closeRelationEditor(config.id, relationUri));
+            dispatch(profile.relations.actions.removeRelation(config.id, relationUri));
+            const connectionToRemove = connections.find(
+                (connection) => profile.relations.selectors.getRelationUriFromConnection(connection) === relationUri
+            );
+            const entityUri = profile.relations.selectors.getEntityUriFromConnection(connectionToRemove);
+            if (isTempUri(entityUri)) {
+                dispatch(profile.modifiedEntities.actions.entityDeleted(entityUri));
+            }
+        },
+        [config, connections, dispatch]
+    );
+    const content = config.content;
+    const defaultRelationTypeObject = getFirstRelationTypeObject(content.inRelations, content.outRelations);
+    const onAcceptRelation = useCallback(
+        (connection) => {
+            const connectionWithDefaultRelationType = pipe(
+                omit(['suggested']),
+                evolve({
+                    relation: {
+                        relationType: always(defaultRelationTypeObject.type),
+                        object: evolve({type: always(defaultRelationTypeObject.type), attributes: always(null)})
+                    }
+                })
+            )(connection);
+            dispatch(profile.relations.actions.addRelation(config.id, connectionWithDefaultRelationType));
+        },
+        [dispatch, config, defaultRelationTypeObject]
+    );
+
+    const onIgnoreRelation = useCallback(
+        (connection) => {
+            dispatch(
+                profile.relations.actions.ignoreRelation(config.id, {
+                    relationType: defaultRelationTypeObject.type,
+                    relationDirection: defaultRelationTypeObject.direction,
+                    entityUri: connection.entity.entityUri,
+                    relationUri: connection.relation.relationUri
+                })
+            );
+        },
+        [dispatch, config, defaultRelationTypeObject]
+    );
+
+    const [newConnections, currentConnections] = partition(checkNew, connections);
+    const canAddRelations = entity && checkIfCanAddRelations;
+
+    const isEmptyRelationList = newConnections.length === 0 && currentConnections.length === 0;
+
+    const getRelationEditableContent = (connection: Connection) => {
+        const openedRelation = relationsToEdit.find(
+            (openedRelation) => openedRelation?.relation?.relationUri === connection?.relation?.relationUri
+        );
+        const showControls = !config.allowOnlyCreateNew || checkNew(connection);
+        const itemKey = `${connection?.relation?.relationUri}-${connection?.relation?.direction}`;
+        return (
+            <SecondLevelWrapper config={config} connection={connection} key={itemKey}>
+                {(renderRelationArrowButton) => {
+                    return openedRelation ? (
+                        <RelationEditor connection={openedRelation} config={config} mode={mode} metadata={metadata} />
+                    ) : (
+                        <EditableRelationItem
+                            renderRelationArrowButton={renderRelationArrowButton}
+                            connection={connection}
+                            metadata={metadata}
+                            showControls={showControls}
+                            onRemoveRelation={onRemoveRelation}
+                            onEditRelation={pipe(profile.relations.actions.openRelationEditor(config.id), dispatch)}
+                            onAcceptRelation={onAcceptRelation}
+                            onIgnoreRelation={onIgnoreRelation}
+                        />
+                    );
+                }}
+            </SecondLevelWrapper>
+        );
+    };
+
+    const shouldShowAddRelationButton =
+        canAddRelations && (!relationToAdd || (relationToAdd && relationToAdd.parentEntityUri === parentEntityUri));
+
+    const shouldShowRelationEditorToAdd = relationToAdd && relationToAdd.parentEntityUri === parentEntityUri;
+
+    return (
+        <div className={className}>
+            {shouldShowAddRelationButton && (
+                <Button color="primary" onClick={onAddRelation} className={styles.moreButton}>
+                    <AddIcon classes={{root: styles.icon}} />
+                    <div className={styles.buttonLabel}>{i18n.text('Add')}</div>
+                </Button>
+            )}
+            {shouldShowRelationEditorToAdd && (
+                <RelationEditor connection={relationToAdd} config={config} mode={mode} metadata={metadata} />
+            )}
+            {newConnections.map(getRelationEditableContent)}
+            {newConnections.length > 0 && currentConnections.length > 0 && <Divider className={styles.divider} />}
+            {currentConnections.map(getRelationEditableContent)}
+            {isEmptyRelationList && <Typography className={styles.noData}>{noDataText}</Typography>}
+        </div>
+    );
+};
+
+export default RelationsEditableContent;

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

@@ -0,0 +1,367 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import * as reactReduxImports from 'react-redux';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import {profile} from '@reltio/mdm-module';
+import {RelationEditor} from '@reltio/components';
+import RelationsEditableContent, {Props} from '../RelationsEditableContent';
+import EditableRelationItem from '../../EditableRelationItem/EditableRelationItem';
+import {Mode, ProfileViewTypes} from '@reltio/mdm-sdk';
+import {SecondLevelWrapper} from '../../SecondLevelWrapper/SecondLevelWrapper';
+
+jest.mock('@reltio/mdm-sdk', () => {
+    const mdmSdkModule = jest.requireActual('@reltio/mdm-sdk');
+    return {
+        ...mdmSdkModule,
+        createNewConnectionWithDefaultRelationType: jest
+            .fn()
+            .mockReturnValue({entity: {}, isNew: true, relation: {relationUri: 'relations/uri$$1642157197536'}})
+    };
+});
+
+const getRenderedChildrenOfSecondLevelWrapperByName = (component, name) => {
+    return component
+        .find(SecondLevelWrapper)
+        .filterWhere((node) => {
+            return node.renderProp('children')(jest.fn()).name() === name;
+        })
+        .map((node) => node.renderProp('children')(jest.fn()));
+};
+
+describe('RelationsEditableContent tests', () => {
+    let store;
+    const dispatch = jest.fn();
+
+    const newConnection = {
+        entity: {
+            entityLabel: 'Demo entity 3 RP-94714',
+            entityType: 'configuration/entityTypes/HCP',
+            entityUri: 'entities/12gnRzuT'
+        },
+        relation: {
+            direction: 'in',
+            relationLabel: 'Family and looong descritption of useless words and time wasting symbolss',
+            relationType: 'configuration/relationTypes/Family',
+            relationUri: 'relations/uri$$1642153166317'
+        },
+        __metadata: {
+            draft: 'new'
+        }
+    };
+
+    const defaultProps: Props = {
+        config: {
+            point: 'com.reltio.plugins.ui.view',
+            caption: 'HCP to HCP',
+            class: ProfileViewTypes.Relations,
+            id: 'RelationsView1',
+            content: {
+                entityTypes: ['configuration/entityTypes/HCP'],
+                inRelations: [
+                    {uri: 'configuration/relationTypes/Family', label: '{directionalLabel}'},
+                    {uri: 'configuration/relationTypes/Relative', label: '{directionalLabel}'},
+                    {uri: 'configuration/relationTypes/Friend', label: '{directionalLabel}'}
+                ],
+                outRelations: [
+                    {uri: 'configuration/relationTypes/Friend', label: '{directionalLabel}'},
+                    {uri: 'configuration/relationTypes/Relative', label: '{directionalLabel}'},
+                    {uri: 'configuration/relationTypes/Family', label: '{directionalLabel}'}
+                ]
+            }
+        },
+        mode: Mode.Editing,
+        connections: [
+            {
+                entity: {
+                    entityLabel: '123',
+                    entityType: 'configuration/entityTypes/HCP',
+                    entityUri: 'entities/1G3VPt9u'
+                },
+                relation: {
+                    direction: 'in',
+                    relationLabel: 'Friend',
+                    relationType: 'configuration/relationTypes/Friend',
+                    relationUri: 'relations/smu5Mkf'
+                }
+            },
+            {
+                entity: {
+                    entityLabel: 'Albanec One,',
+                    entityType: 'configuration/entityTypes/HCP',
+                    entityUri: 'entities/1YCdvlF7'
+                },
+                relation: {
+                    direction: 'in',
+                    relationLabel: 'Family',
+                    relationType: 'configuration/relationTypes/Family',
+                    relationUri: 'relations/17hGS6ci'
+                }
+            }
+        ],
+        noDataText: 'No data found'
+    };
+    beforeEach(() => {
+        store = {
+            profile: {
+                entity: {
+                    uri: 'entities/sIeHttl'
+                },
+                mode: 'Editing'
+            },
+            metadata: {
+                t1: {
+                    entityTypes: [],
+                    relationTypes: []
+                }
+            },
+            tenant: {
+                id: 't1'
+            }
+        };
+        jest.spyOn(reactReduxImports, 'useSelector').mockImplementation((selector) => selector(store));
+        jest.spyOn(reactReduxImports, 'useDispatch').mockImplementation(() => dispatch);
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    const findAddButton = (component) => component.find(Button).filterWhere((button) => button.text() === 'Add');
+
+    it('should render main parts', () => {
+        const component = shallow(<RelationsEditableContent {...defaultProps} />);
+        expect(findAddButton(component).length).toBe(1);
+        expect(component.find(RelationEditor).length).toBe(0);
+        expect(component.find(Divider).length).toBe(0);
+
+        expect(getRenderedChildrenOfSecondLevelWrapperByName(component, 'EditableRelationItem').length).toBe(2);
+    });
+
+    it('should render RelationEditor if openedRelations are exist', () => {
+        store.profile.relations = {
+            RelationsView1: {
+                relationsToEdit: [
+                    {
+                        entity: {
+                            entityUri: 'entities/1G3VPt9u',
+                            entityType: 'configuration/entityTypes/HCP',
+                            entityLabel: '123'
+                        },
+                        relation: {
+                            relationUri: 'relations/smu5Mkf',
+                            relationType: 'configuration/relationTypes/Friend',
+                            relationLabel: 'Friend',
+                            direction: 'in'
+                        }
+                    }
+                ],
+                relationToAdd: {entity: {}, isNew: true, relation: {relationUri: 'relations/uri$$1642157197536'}}
+            }
+        };
+
+        const component = shallow(<RelationsEditableContent {...defaultProps} />);
+        expect(component.find(SecondLevelWrapper).length).toBe(2);
+        expect(component.find(RelationEditor).length).toBe(1);
+
+        expect(
+            component.find(SecondLevelWrapper).at(0).renderProp('children')(jest.fn()).find(RelationEditor)
+        ).toHaveLength(1);
+
+        const editableRelationItem = component
+            .find(SecondLevelWrapper)
+            .at(1)
+            .renderProp('children')(jest.fn())
+            .find(EditableRelationItem);
+        expect(editableRelationItem.length).toBe(1);
+        expect(editableRelationItem.prop('connection')).toEqual(defaultProps.connections[1]);
+    });
+
+    it('should render Divider if there are both existing and new connections', () => {
+        const props = {...defaultProps, connections: [...defaultProps.connections]};
+        props.connections.push(newConnection);
+        const component = shallow(<RelationsEditableContent {...props} />);
+        expect(component.find(Divider).length).toBe(1);
+        expect(getRenderedChildrenOfSecondLevelWrapperByName(component, 'EditableRelationItem').length).toBe(3);
+    });
+
+    it('should set correct props for EditableRelationItem ', () => {
+        const component = shallow(<RelationsEditableContent {...defaultProps} />);
+        expect(component.find(Divider).length).toBe(0);
+
+        const editableRelationItems = getRenderedChildrenOfSecondLevelWrapperByName(component, 'EditableRelationItem');
+
+        expect(editableRelationItems.length).toBe(2);
+
+        editableRelationItems.forEach((relationItem, i) => {
+            expect(relationItem.prop('connection')).toEqual(defaultProps.connections[i]);
+            expect(relationItem.prop('onRemoveRelation')).toEqual(expect.any(Function));
+            expect(relationItem.prop('onEditRelation')).toEqual(expect.any(Function));
+            expect(relationItem.prop('onAcceptRelation')).toEqual(expect.any(Function));
+            expect(relationItem.prop('onIgnoreRelation')).toEqual(expect.any(Function));
+        });
+    });
+
+    it('should set correct showControls prop for EditableRelationItem if allowOnlyCreateNew prop is true and newConnections exist', () => {
+        const props = {...defaultProps, connections: [...defaultProps.connections]};
+        props.connections.push(newConnection);
+        props.config.allowOnlyCreateNew = true;
+
+        const component = shallow(<RelationsEditableContent {...props} />);
+        const editableRelationItems = getRenderedChildrenOfSecondLevelWrapperByName(component, 'EditableRelationItem');
+        expect(editableRelationItems.length).toBe(3);
+        editableRelationItems.forEach((relationItem, i) => {
+            if (i === 0) {
+                expect(relationItem.prop('showControls')).toBe(true);
+            } else {
+                expect(relationItem.prop('showControls')).toBe(false);
+            }
+        });
+    });
+
+    it('should dispatch correct action on AddButton component callback prop calling', () => {
+        const component = shallow(<RelationsEditableContent {...defaultProps} />);
+        const AddButton = findAddButton(component);
+        AddButton.prop('onClick')();
+        expect(dispatch).toHaveBeenCalledWith(
+            profile.relations.actions.openRelationEditor(defaultProps.config.id)({
+                entity: {},
+                isNew: true,
+                relation: {relationUri: 'relations/uri$$1642157197536'}
+            })
+        );
+    });
+
+    it('should dispatch correct actions on EditableRelationItem component callback props calling', () => {
+        const component = shallow(<RelationsEditableContent {...defaultProps} />);
+        const editableRelationItems = getRenderedChildrenOfSecondLevelWrapperByName(component, 'EditableRelationItem');
+        editableRelationItems.at(0).prop('onEditRelation')(defaultProps.connections[0]);
+        expect(dispatch).toHaveBeenCalledWith(
+            profile.relations.actions.openRelationEditor(defaultProps.config.id)(defaultProps.connections[0])
+        );
+
+        editableRelationItems.at(0).prop('onRemoveRelation')('relationUri');
+        expect(dispatch).toHaveBeenCalledWith(
+            profile.relations.actions.closeRelationEditor(defaultProps.config.id, 'relationUri')
+        );
+        expect(dispatch).toHaveBeenCalledWith(
+            profile.relations.actions.removeRelation(defaultProps.config.id, 'relationUri')
+        );
+    });
+    it('should show noDataText if reltaion list is empty', () => {
+        const props = {...defaultProps, connections: []};
+        const component = shallow(<RelationsEditableContent {...props} />);
+        expect(component.find(Divider).length).toBe(0);
+        const editableRelationItems = component.find(EditableRelationItem);
+        expect(editableRelationItems.length).toBe(0);
+        expect(component.find('.noData').text()).toBe('No data found');
+    });
+
+    it('should render RelationEditor if parentEntityUri prop is equal to parentEntityUri in relationToAdd', () => {
+        const parentEntityUri = 'entities/123';
+        const props = {
+            ...defaultProps,
+            parentEntityUri
+        };
+
+        store.profile.relations = {
+            RelationsView1: {
+                relationToAdd: {
+                    entity: {},
+                    isNew: true,
+                    relation: {relationUri: 'relations/uri$$1642157197536'},
+                    parentEntityUri
+                }
+            }
+        };
+
+        const component = shallow(<RelationsEditableContent {...props} />);
+        expect(component.find(RelationEditor)).toHaveLength(1);
+    });
+
+    it('should not render RelationEditor if parentEntityUri prop is not equal to parentEntityUri in relationToAdd', () => {
+        const props = {
+            ...defaultProps,
+            parentEntityUri: 'entities/123'
+        };
+
+        store.profile.relations = {
+            RelationsView1: {
+                relationToAdd: {
+                    entity: {},
+                    isNew: true,
+                    relation: {relationUri: 'relations/uri$$1642157197536'},
+                    parentEntityUri: 'entities/321'
+                }
+            }
+        };
+
+        const component = shallow(<RelationsEditableContent {...props} />);
+        expect(component.find(RelationEditor)).toHaveLength(0);
+    });
+
+    it('should render AddButton if relationToAdd is empty', () => {
+        const component = shallow(<RelationsEditableContent {...defaultProps} />);
+        const AddButton = findAddButton(component);
+        expect(AddButton).toHaveLength(1);
+    });
+
+    it('should render AddButton if parentEntityUri prop is equal to parentEntityUri in relationToAdd', () => {
+        const parentEntityUri = 'entities/123';
+        const props = {
+            ...defaultProps,
+            parentEntityUri
+        };
+
+        store.profile.relations = {
+            RelationsView1: {
+                relationToAdd: {
+                    entity: {},
+                    isNew: true,
+                    relation: {relationUri: 'relations/uri$$1642157197536'},
+                    parentEntityUri
+                }
+            }
+        };
+
+        const component = shallow(<RelationsEditableContent {...props} />);
+        const AddButton = findAddButton(component);
+        expect(AddButton).toHaveLength(1);
+    });
+
+    it('should not render AddButton if parentEntityUri prop is not equal to parentEntityUri in relationToAdd', () => {
+        const props = {
+            ...defaultProps,
+            parentEntityUri: 'entities/123'
+        };
+
+        store.profile.relations = {
+            RelationsView1: {
+                relationToAdd: {
+                    entity: {},
+                    isNew: true,
+                    relation: {relationUri: 'relations/uri$$1642157197536'},
+                    parentEntityUri: 'entities/321'
+                }
+            }
+        };
+
+        const component = shallow(<RelationsEditableContent {...props} />);
+        const AddButton = findAddButton(component);
+        expect(AddButton).toHaveLength(0);
+    });
+
+    it('should not render AddButton if new entity and suggested mode', () => {
+        const props = {
+            ...defaultProps,
+            mode: Mode.Suggesting
+        };
+
+        store.profile.entity.uri = 'entities/uri$$12345';
+        store.profile.mode = Mode.Suggesting;
+
+        const component = shallow(<RelationsEditableContent {...props} />);
+        const AddButton = findAddButton(component);
+        expect(AddButton).toHaveLength(0);
+    });
+});

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

@@ -0,0 +1,28 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+    moreButton: {
+        padding: '9px 16px 9px 12px',
+        backgroundColor: 'rgba(98, 2, 238, 0)',
+        marginBottom: '4px',
+        marginLeft: '16px'
+    },
+    buttonLabel: {
+        fontSize: '14px',
+        fontWeight: 500,
+        lineHeight: '16px'
+    },
+    icon: {
+        fontSize: '18px',
+        marginRight: '8px'
+    },
+    divider: {
+        margin: '0 0 8px',
+        borderColor: 'rgba(0,0,0,0.12)'
+    },
+    noData: {
+        fontSize: '13px',
+        color: theme.palette.text.secondary,
+        padding: '8px 16px'
+    }
+}));

package/src/components/ProfileRelationsView/components/RelationsHeader/FilterButton/FilterButton.tsx

@@ -0,0 +1,113 @@
+import React, {useContext, useRef, useState} from 'react';
+import i18n from 'ui-i18n';
+import classnames from 'classnames';
+import {isEmptyValue} from '@reltio/mdm-sdk';
+import {DropDownEditor, SmallIconButtonWithTooltip} from '@reltio/components';
+import Popover from '@mui/material/Popover';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import FilterIcon from '@mui/icons-material/FilterList';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import Typography from '@mui/material/Typography';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import {RelationsViewStateContext} from '../../../contexts/RelationsViewStateContext';
+
+import {useStyles} from './styles';
+
+type Props = {
+    className?: string;
+};
+
+const FilterButton = ({className}: Props) => {
+    const styles = useStyles();
+    const buttonRef = useRef();
+    const {showInactive, toggleShowInactive, sortOrder, toggleSortOrder, sortOption, changeSortOption, sortOptions} =
+        useContext(RelationsViewStateContext);
+    const [isOpen, setIsOpen] = useState(false);
+
+    const togglePopup = () => setIsOpen((open) => !open);
+
+    const hasSortOptions = !isEmptyValue(sortOptions);
+
+    const isAsc = sortOrder === 'asc';
+
+    return (
+        <>
+            <Button
+                ref={buttonRef}
+                classes={{
+                    root: classnames(styles.button, className)
+                }}
+                onClick={togglePopup}
+            >
+                <FilterIcon />
+            </Button>
+            <Popover
+                open={isOpen}
+                classes={{paper: styles.popupContent}}
+                anchorEl={buttonRef.current}
+                onClose={togglePopup}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'right'
+                }}
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right'
+                }}
+            >
+                <FormControlLabel
+                    classes={{
+                        label: styles.checkboxControlLabel
+                    }}
+                    control={
+                        <Checkbox
+                            className={styles.checkboxControlCheckbox}
+                            checked={showInactive || false}
+                            onChange={toggleShowInactive}
+                        />
+                    }
+                    label={i18n.text('Show inactive Relationships')}
+                />
+                {hasSortOptions && (
+                    <>
+                        <Divider className={styles.divider} />
+                        <Typography className={styles.title} variant="h6">
+                            {i18n.text('Sort by')}
+                        </Typography>
+                        <div className={styles.sortControls}>
+                            <DropDownEditor
+                                entries={sortOptions}
+                                TextFieldProps={{variant: 'filled'}}
+                                classes={{
+                                    root: styles.sortSelectorRoot,
+                                    menuItem: styles.sortSelectorMenuItem
+                                }}
+                                fullWidth
+                                disableUnderline
+                                value={sortOption}
+                                onChange={changeSortOption}
+                                MenuProps={{
+                                    anchorOrigin: {vertical: 'bottom', horizontal: 'left'}
+                                }}
+                            />
+                            <SmallIconButtonWithTooltip
+                                tooltipTitle={isAsc ? i18n.text('Ascending') : i18n.text('Descending')}
+                                icon={isAsc ? ArrowUpwardIcon : ArrowDownwardIcon}
+                                onClick={toggleSortOrder}
+                                className={styles.sortOrderButton}
+                                size="L"
+                            />
+                        </div>
+                    </>
+                )}
+            </Popover>
+        </>
+    );
+};
+
+FilterButton.displayName = 'FilterButton';
+
+export default FilterButton;