@reltio/profile 1.4.1585 → 1.4.1586-mui5

package/src/components/RightSidePanel/__tests__/RightSidePanel.spec.tsx

@@ -0,0 +1,149 @@
+import React from 'react';
+import {act} from 'react-dom/test-utils';
+import {mount} from 'enzyme';
+import * as reactRedux from 'react-redux';
+import * as components from '@reltio/components';
+import {
+    AddWorkflowButton,
+    CollaborationContext,
+    SidePanel,
+    SidePanelContentHeader,
+    WorkflowTasksContext
+} from '@reltio/components';
+import mdm from '@reltio/mdm-module';
+import {RightSidePanel} from '../RightSidePanel';
+import {CollaborationList} from '../components/CollaborationList/CollaborationList';
+import {WorkflowList} from '../components/WorkflowList/WorkflowList';
+import i18n from 'ui-i18n';
+
+jest.mock('@reltio/components', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/components'),
+    HistoryView: () => null,
+    HistoryHeader: () => null,
+    useHistory: jest.fn()
+}));
+
+jest.mock('../components/CollaborationList/CollaborationList', () => ({
+    CollaborationList: jest.fn()
+}));
+
+jest.mock('../components/WorkflowList/WorkflowList', () => ({
+    WorkflowList: jest.fn()
+}));
+
+jest.mock('@reltio/mdm-sdk', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/mdm-sdk'),
+    isDataTenantEntity: jest.fn(),
+    getEntityType: jest.fn().mockReturnValue({})
+}));
+
+describe('RightSidePanel tests', () => {
+    let component;
+    const defaultEntity = {uri: 'uri', type: 'type'};
+    const defaultHistoryEvent = {aStamp: 168907544256};
+    const defaultDBConnectorSideViews = [];
+    const mockSelectors = ({
+        isWorkflowSideViewEnabled = true,
+        isWorkflowEnabled = true,
+        isCollaborationSideViewEnabled = true,
+        isCollaborationEnabled = true,
+        entity = defaultEntity,
+        historyEvent = defaultHistoryEvent,
+        isDBConnectorSideViewEnabled = false,
+        dBConnectorSideViews = defaultDBConnectorSideViews
+    }) => {
+        jest.spyOn(mdm.selectors, 'isWorkflowSideViewEnabled').mockReturnValue(isWorkflowSideViewEnabled);
+        jest.spyOn(mdm.selectors, 'isWorkflowEnabled').mockReturnValue(isWorkflowEnabled);
+        jest.spyOn(mdm.selectors, 'isCollaborationSideViewEnabled').mockReturnValue(isCollaborationSideViewEnabled);
+        jest.spyOn(mdm.selectors, 'isCollaborationEnabled').mockReturnValue(isCollaborationEnabled);
+        jest.spyOn(mdm.selectors, 'getEntity').mockReturnValue(entity);
+        jest.spyOn(mdm.selectors, 'getHistoryEvent').mockReturnValue(historyEvent);
+        jest.spyOn(mdm.selectors, 'isDBConnectorSideViewEnabled').mockReturnValue(isDBConnectorSideViewEnabled);
+        jest.spyOn(mdm.selectors, 'getDBConnectorSideViews').mockReturnValue(dBConnectorSideViews);
+    };
+    const getSidePanel = (component) => component.find(SidePanel);
+    const getSidePanelContentHeader = (component) => component.find(SidePanelContentHeader);
+
+    const workflowContextValue = {
+        total: 10,
+        tasks: []
+    } as any;
+
+    const collaborationContextValue = {
+        commentsMap: {uri1: [{replies: 2}, {replies: 5}]}
+    } as any;
+
+    const useHistoryMock = jest.spyOn(components, 'useHistory');
+    const onLoadMoreMock = jest.fn();
+    const onApplyFilterMock = jest.fn();
+    const onClearFilterMock = jest.fn();
+    const useHistoryResult = {
+        isLoading: false,
+        canLoadMore: false,
+        onLoadMore: onLoadMoreMock,
+        historicUris: [],
+        historyFilter: {
+            users: ['username2']
+        },
+        historyWithTotal: {
+            changes: [
+                {
+                    timestamp: 1636456567409,
+                    user: 'user1',
+                    type: 'ENTITY_CHANGED'
+                }
+            ],
+            total: 1
+        },
+        onApplyFilter: onApplyFilterMock,
+        onClearFilter: onClearFilterMock
+    };
+
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector({}));
+        useHistoryMock.mockReturnValue(useHistoryResult);
+        (CollaborationList as unknown as jest.Mock).mockImplementation(() => <div className="collaborationList" />);
+        (WorkflowList as unknown as jest.Mock).mockImplementation(() => <div className="workflowList" />);
+    });
+
+    const tabs = [
+        {
+            headerProps: {
+                mainTitle: i18n.text('Workflow'),
+                secondTitle: 'Workflow title',
+                rightContent: <AddWorkflowButton />
+            }
+        }
+    ];
+
+    const onClose = jest.fn();
+
+    describe('base behaviour', () => {
+        beforeAll(() => {
+            mockSelectors({});
+        });
+        beforeEach(() => {
+            component = mount(
+                <CollaborationContext.Provider value={collaborationContextValue}>
+                    <WorkflowTasksContext.Provider value={workflowContextValue}>
+                        <RightSidePanel tabs={tabs} active={0} onClose={onClose} />
+                    </WorkflowTasksContext.Provider>
+                </CollaborationContext.Provider>
+            );
+        });
+
+        it('should render all components well', () => {
+            expect(getSidePanel(component)).toHaveLength(1);
+            expect(getSidePanel(component).prop('open')).toBe(true);
+        });
+
+        it('should close side panel by SidePanelContentHeader onClose handler ', () => {
+            expect(getSidePanel(component).prop('open')).toBe(true);
+            act(() => {
+                getSidePanelContentHeader(component).prop('onClose')();
+            });
+            component.update();
+            expect(onClose).toHaveBeenCalled();
+        });
+    });
+});

package/src/components/RightSidePanel/components/CollaborationButton/CollaborationButton.tsx

@@ -0,0 +1,22 @@
+import React, {useContext, VFC} from 'react';
+import Badge from '@mui/material/Badge';
+import CollaborationIcon from '../../icons/CollaborationIcon.svg';
+import {CollaborationContext} from '@reltio/components';
+import {calcTotalCommentItems} from '@reltio/mdm-sdk';
+import {useStyles} from '../../styles';
+
+export const CollaborationButton: VFC = () => {
+    const {commentsMap} = useContext(CollaborationContext);
+    const styles = useStyles();
+    return (
+        <Badge
+            badgeContent={calcTotalCommentItems(commentsMap)}
+            classes={{
+                anchorOriginTopRightRectangular: styles.badgePosition,
+                badge: styles.badge
+            }}
+        >
+            <CollaborationIcon />
+        </Badge>
+    );
+};

package/src/components/RightSidePanel/components/CollaborationButton/__tests__/CollaborationButton.spec.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import {CollaborationButton} from '../CollaborationButton';
+import {CollaborationContext} from '@reltio/components';
+import CollaborationIcon from '../../../icons/CollaborationIcon.svg';
+import Badge from '@mui/material/Badge';
+
+describe('CollaborationButton tests', () => {
+    const collaborationContextValue = {
+        commentsMap: {uri1: [{replies: 2}, {replies: 5}]}
+    } as any;
+    const component = mount(
+        <CollaborationContext.Provider value={collaborationContextValue}>
+            <CollaborationButton />
+        </CollaborationContext.Provider>
+    );
+    it('should renders all components well', () => {
+        expect(component.find(Badge)).toHaveLength(1);
+        expect(component.find(CollaborationIcon)).toHaveLength(1);
+    });
+    it('should provide badgeContent property correctly', () => {
+        expect(component.find(Badge).prop('badgeContent')).toBe(9);
+    });
+});

package/src/components/RightSidePanel/components/CollaborationList/CollaborationList.tsx

@@ -0,0 +1,56 @@
+import React, {useContext, useEffect} from 'react';
+import i18n from 'ui-i18n';
+import {useSelector} from 'react-redux';
+import mdm from '@reltio/mdm-module';
+import {CollaborationContext, CollaborationItem, EntitiesMapContext, useCommentsEntitiesMap} from '@reltio/components';
+import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import {useStyles} from './styles';
+
+export const CollaborationList = () => {
+    const styles = useStyles();
+    const {getComments, comments, pageToken} = useContext(CollaborationContext);
+    const entityUri = useSelector(mdm.selectors.getEntityUriWithDataTenant);
+
+    useEffect(() => {
+        getComments(entityUri);
+    }, [getComments, entityUri]);
+
+    const handleShowMoreComments = () => {
+        getComments(entityUri, pageToken);
+    };
+
+    const entitiesMap = useCommentsEntitiesMap(comments);
+
+    return (
+        <EntitiesMapContext.Provider value={entitiesMap}>
+            <Box className={styles.wrapper}>
+                {comments.map((comment) => {
+                    const {objectId, relatedObjectUris, objectType, commentId} = comment;
+                    return (
+                        <CollaborationItem
+                            key={commentId}
+                            uri={objectId}
+                            relatedObjectUris={relatedObjectUris}
+                            objectType={objectType}
+                            comment={comment}
+                        />
+                    );
+                })}
+                {pageToken && (
+                    <Link
+                        component="button"
+                        variant="caption"
+                        className={styles.showMoreLink}
+                        onClick={handleShowMoreComments}
+                        underline="none"
+                    >
+                        <KeyboardArrowDownIcon className={styles.showMoreIcon} />
+                        {i18n.text('Show more')}
+                    </Link>
+                )}
+            </Box>
+        </EntitiesMapContext.Provider>
+    );
+};

package/src/components/RightSidePanel/components/CollaborationList/__tests__/CollaborationList.spec.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import * as reactRedux from 'react-redux';
+import {CollaborationContext, CollaborationItem} from '@reltio/components';
+import Link from '@mui/material/Link';
+import {CollaborationList} from '../CollaborationList';
+import {act} from 'react-dom/test-utils';
+
+jest.mock('@reltio/components', () => ({
+    ...(jest.requireActual('@reltio/components') as Record<string, unknown>),
+    CollaborationItem: jest.fn()
+}));
+
+const store = {
+    profile: {
+        entity: {
+            uri: 'entities/uri1'
+        }
+    }
+};
+
+const getComments = jest.fn().mockReturnValue(
+    new Promise<void>((res) => res())
+);
+
+const setUp = (comments = [], pageToken = null) => {
+    const value = {
+        comments,
+        pageToken,
+        getComments
+    } as any;
+
+    return mount(
+        <CollaborationContext.Provider value={value}>
+            <CollaborationList />
+        </CollaborationContext.Provider>
+    );
+};
+
+describe('CollaborationList tests', () => {
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+        ((CollaborationItem as unknown) as jest.Mock).mockImplementation(() => null);
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should call getComments with right params', () => {
+        setUp();
+        expect(getComments).toHaveBeenCalledWith('entities/uri1');
+    });
+
+    it('should render comments correctly', () => {
+        const comments = [
+            {
+                objectId: 'entities/1B8njgSw/attributes/PrescriberIndicator/2T5GrKpYQ',
+                relatedObjectUris: ['entities/1B8njgSw'],
+                objectType: 'entityAttribute',
+                commentId: 'comment1',
+                content: 'first comment'
+            },
+            {
+                objectId: 'entities/3B2ecgSw/attributes/PrescriberIndicator/4E2RgPkCD',
+                relatedObjectUris: ['entities/3B2ecgSw'],
+                objectType: 'entityAttribute',
+                commentId: 'comment2',
+                content: 'second comment'
+            }
+        ];
+
+        const component = setUp(comments);
+
+        comments.forEach((comment, idx) => {
+            expect(component.find(CollaborationItem).at(idx).props()).toEqual({
+                uri: comment.objectId,
+                relatedObjectUris: comment.relatedObjectUris,
+                objectType: comment.objectType,
+                comment
+            });
+        });
+    });
+
+    it('should render showMore button if pageToken exists', () => {
+        const component = setUp([], 'token');
+        expect(component.find(Link)).toHaveLength(1);
+    });
+
+    it('should render showMore button if pageToken not exists', () => {
+        const component = setUp();
+        expect(component.find(Link)).toHaveLength(0);
+    });
+
+    it('handleShowMoreComments should work correctly', () => {
+        const component = setUp([], 'token');
+
+        act(() => {
+            component.find(Link).prop('onClick')(null as any);
+        });
+
+        expect(getComments).toHaveBeenCalledWith('entities/uri1', 'token');
+    });
+});

package/src/components/RightSidePanel/components/CollaborationList/styles.ts

@@ -0,0 +1,15 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    wrapper: {
+        overflow: 'auto',
+        paddingRight: '12px'
+    },
+    showMoreLink: {
+        display: 'flex',
+        margin: '16px'
+    },
+    showMoreIcon: {
+        fontSize: '1rem'
+    }
+});

package/src/components/RightSidePanel/components/CollaborationPanelEmptyState/CollaborationPanelEmptyState.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import {SidePanelEmptyState} from '@reltio/components';
+
+const CollaborationPanelEmptyState = () => (
+    <SidePanelEmptyState
+        text={i18n.text('Care to join the conversation?')}
+        secondaryText={i18n.text(
+            'Leave comments for team members anywhere in the Profile page, and we’ll record it here.'
+        )}
+    />
+);
+
+export default CollaborationPanelEmptyState;

package/src/components/RightSidePanel/components/CollaborationPanelEmptyState/__tests__/CollaborationPanelEmptyState.specs.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import {SidePanelEmptyState} from '@reltio/components';
+import CollaborationPanelEmptyState from '../CollaborationPanelEmptyState';
+
+describe('CollaborationPanelEmptyState tests', () => {
+    it('should render correct default state', () => {
+        const wrapper = shallow(<CollaborationPanelEmptyState />);
+        const emptyState = wrapper.find(SidePanelEmptyState);
+        expect(emptyState).toHaveLength(1);
+        expect(emptyState.props()).toMatchObject({
+            text: 'Care to join the conversation?',
+            secondaryText: 'Leave comments for team members anywhere in the Profile page, and we’ll record it here.'
+        });
+    });
+});

package/src/components/RightSidePanel/components/DBConnectorsList/DBConnectorsList.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import {CustomActionViewConfig} from '@reltio/mdm-sdk';
+import {useSelector} from 'react-redux';
+import mdm from '@reltio/mdm-module';
+import {CustomView} from '../../../Sandbox/CustomView';
+import {useStyles} from './styles';
+
+export const DBConnectorsList = () => {
+    const styles = useStyles();
+    const dBConnectorSideViews = useSelector(mdm.selectors.getDBConnectorSideViews) as CustomActionViewConfig[];
+
+    return (
+        <div className={styles.wrapper}>
+            {dBConnectorSideViews.map((sideView) => (
+                <CustomView key={sideView.id} config={sideView} className={styles.itemWrapper} />
+            ))}
+        </div>
+    );
+};

package/src/components/RightSidePanel/components/DBConnectorsList/__tests__/DBConnectorsList.spec.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import * as reactRedux from 'react-redux';
+import mdm from '@reltio/mdm-module';
+import {DBConnectorsList} from '../DBConnectorsList';
+import {CustomView} from '../../../../Sandbox/CustomView';
+
+describe('DBConnectorsList tests', () => {
+    const dBConnectorSideViews = [
+        {
+            id: 'com.reltio.plugins.entity.org.GetMatchButtonView',
+            class: 'com.reltio.plugins.ui.CustomActionView',
+            action: {
+                files: ['https://reltio-ui-files.s3.amazonaws.com/custom-scripts/iframeSimple1.js']
+            }
+        },
+        {
+            id: 'com.reltio.plugins.entity.org.GetCompanyDetailsButtonView',
+            class: 'com.reltio.plugins.ui.CustomActionView',
+            action: {
+                files: ['https://reltio-ui-files.s3.amazonaws.com/custom-scripts/iframeSimple2.js']
+            }
+        }
+    ];
+
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector({} as unknown));
+        jest.spyOn(mdm.selectors, 'getDBConnectorSideViews').mockReturnValue(dBConnectorSideViews);
+    });
+
+    it('should render correctly', () => {
+        const component = shallow(<DBConnectorsList />);
+        const views = component.find(CustomView);
+        expect(views.length).toBe(2);
+
+        expect(views.at(0).prop('config')).toEqual(dBConnectorSideViews[0]);
+        expect(views.at(0).hasClass('itemWrapper')).toBe(true);
+
+        expect(views.at(1).prop('config')).toEqual(dBConnectorSideViews[1]);
+        expect(views.at(1).hasClass('itemWrapper')).toBe(true);
+    });
+});

package/src/components/RightSidePanel/components/DBConnectorsList/styles.ts

@@ -0,0 +1,12 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    wrapper: {
+        display: 'flex',
+        flexDirection: 'column'
+    },
+    itemWrapper: {
+        paddingLeft: '19px',
+        paddingRight: '19px'
+    }
+});

package/src/components/RightSidePanel/components/WorkflowButton/WorkflowButton.tsx

@@ -0,0 +1,21 @@
+import React, {useContext, VFC} from 'react';
+import Badge from '@mui/material/Badge';
+import {WorkflowTasksContext} from '@reltio/components';
+import InboxIcon from '@mui/icons-material/Inbox';
+import {useStyles} from '../../styles';
+
+export const WorkflowButton: VFC = () => {
+    const {total} = useContext(WorkflowTasksContext);
+    const styles = useStyles();
+    return (
+        <Badge
+            badgeContent={total}
+            classes={{
+                anchorOriginTopRightRectangular: styles.badgePosition,
+                badge: styles.badge
+            }}
+        >
+            <InboxIcon />
+        </Badge>
+    );
+};

package/src/components/RightSidePanel/components/WorkflowButton/__tests__/WorkflowButton.spec.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import Badge from '@mui/material/Badge';
+import {WorkflowTasksContext} from '@reltio/components';
+import {WorkflowButton} from '../WorkflowButton';
+
+describe('WorkflowButton tests', () => {
+    const workflowContextValue = {
+        total: 10
+    } as any;
+    const component = mount(
+        <WorkflowTasksContext.Provider value={workflowContextValue}>
+            <WorkflowButton />
+        </WorkflowTasksContext.Provider>
+    );
+    it('should renders all components well', () => {
+        expect(component.find(Badge)).toHaveLength(1);
+        expect(component.find('svg')).toHaveLength(1);
+    });
+    it('should provide badgeContent property correctly', () => {
+        expect(component.find(Badge).prop('badgeContent')).toBe(workflowContextValue.total);
+    });
+});

package/src/components/RightSidePanel/components/WorkflowList/WorkflowList.tsx

@@ -0,0 +1,18 @@
+import React, {useContext} from 'react';
+import {LinearLoadIndicator, WorkflowTaskCard, WorkflowTasksContext} from '@reltio/components';
+import {useStyles} from './styles';
+
+export const WorkflowList = () => {
+    const styles = useStyles();
+    const {tasks, loading} = useContext(WorkflowTasksContext);
+
+    return (
+        <div className={styles.wrapper}>
+            {loading && <LinearLoadIndicator />}
+            {tasks &&
+                tasks.map((task) => {
+                    return <WorkflowTaskCard key={task.taskId} task={task} />;
+                })}
+        </div>
+    );
+};

package/src/components/RightSidePanel/components/WorkflowList/__tests__/WorkflowList.spec.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import {LinearLoadIndicator, WorkflowTasksContext, WorkflowTaskCard} from '@reltio/components';
+import {WorkflowList} from '../WorkflowList';
+
+jest.mock('@reltio/components', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/components'),
+    WorkflowTaskCard: jest.fn().mockImplementation(() => null)
+}));
+
+const setUp = (value) => {
+    return mount(
+        <WorkflowTasksContext.Provider value={value}>
+            <WorkflowList />
+        </WorkflowTasksContext.Provider>
+    );
+};
+
+describe('WorkflowList tests', () => {
+    it('should render correctly if no data is loaded', () => {
+        const component = setUp({
+            loading: true,
+            tasks: null
+        });
+
+        expect(component.find(LinearLoadIndicator)).toHaveLength(1);
+        expect(component.find('.wrapper').childAt(1)).toHaveLength(0);
+    });
+
+    it('should render correctly if data is loaded', () => {
+        const tasks = [
+            {
+                taskId: 123,
+                createdBy: 'ivan.ivanov'
+            }
+        ];
+        const component = setUp({
+            loading: false,
+            tasks
+        });
+
+        expect(component.find(LinearLoadIndicator)).toHaveLength(0);
+        expect(component.find(WorkflowTaskCard)).toHaveLength(1);
+        expect(component.find(WorkflowTaskCard).prop('task')).toBe(tasks[0]);
+    });
+});

package/src/components/RightSidePanel/components/WorkflowList/styles.ts

@@ -0,0 +1,9 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    wrapper: {
+        overflow: 'auto',
+        position: 'relative',
+        height: '100%'
+    }
+});

package/src/components/RightSidePanel/components/WorkflowPanelEmptyState/WorkflowPanelEmptyState.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import {SidePanelEmptyState} from '@reltio/components';
+
+const WorkflowPanelEmptyState = () => (
+    <SidePanelEmptyState
+        text={i18n.text('Ready to go with the flow?')}
+        secondaryText={i18n.text(
+            'Suggest a change or submit a match review, and we’ll kick off a workflow task to get things going.'
+        )}
+    />
+);
+
+export default WorkflowPanelEmptyState;

package/src/components/RightSidePanel/components/WorkflowPanelEmptyState/__tests__/WorkflowPanelEmptyState.specs.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import {SidePanelEmptyState} from '@reltio/components';
+import WorkflowPanelEmptyState from '../WorkflowPanelEmptyState';
+
+describe('WorkflowPanelEmptyState tests', () => {
+    it('should render correct default state', () => {
+        const wrapper = shallow(<WorkflowPanelEmptyState />);
+        const emptyState = wrapper.find(SidePanelEmptyState);
+        expect(emptyState).toHaveLength(1);
+        expect(emptyState.props()).toMatchObject({
+            text: 'Ready to go with the flow?',
+            secondaryText:
+                'Suggest a change or submit a match review, and we’ll kick off a workflow task to get things going.'
+        });
+    });
+});

package/src/components/RightSidePanel/icons/CollaborationIcon.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Item 2</title>
+    <defs>
+        <path d="M4,17.17 L5.17,16 L20,16 L20,4 L4,4 L4,17.17 Z M20,2 C21.1,2 22,2.9 22,4 L22,16 C22,17.1 21.1,18 20,18 L6,18 L2,22 L2,4 C2,2.9 2.9,2 4,2 L20,2 Z M17,11 L7,11 L7,13 L17,13 L17,11 Z M17,7 L7,7 L7,9 L17,9 L17,7 Z" id="path-1"></path>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Navigation-Drawer-/-Mini-/-Right-(workflow)" transform="translate(-22.000000, -70.000000)">
+            <g id="Group" transform="translate(20.000000, 68.000000)">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <g id="Shape" fill-rule="nonzero"></g>
+                <rect id="Icon-color" fill-opacity="0.54" fill="#000000" mask="url(#mask-2)" x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/RightSidePanel/icons/ConnectorsIcon.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.1014 16C14.3485 17.2018 15.0327 18.26 16 18.9871V20H2V16H14.1014ZM22 18.9871V20V18.9871ZM4 17V19H6V17H4ZM16 4V5.01292C15.0327 5.74004 14.3485 6.79822 14.1014 8H2V4H16ZM22 4V5.01292V4ZM6 7V5H4V7H6ZM14 10V14H2V10H14ZM4 11V13H6V11H4ZM16 15V13H22V15C22 16.3 21.16 17.4 20 17.82V22H18V17.82C16.84 17.4 16 16.3 16 15ZM16 9C16 7.7 16.84 6.6 18 6.18V2H20V6.18C21.16 6.6 22 7.7 22 9V11H16V9Z" fill="black" fill-opacity="0.54"/>
+</svg>