@reltio/sources 1.4.1585 → 1.4.1586-mui5

package/src/components/CrosswalkTreeView/helpers.ts

@@ -0,0 +1,91 @@
+import {chain, concat, curry, evolve, filter, map, pipe, uniq} from 'ramda';
+import {CrosswalkBase, CrosswalkTree, eqCrosswalks} from '@reltio/mdm-sdk';
+import {SankeyLink, SankeyNode} from '../../types/SankeyChartData';
+
+const isCrosswalkDisplayed = curry(
+    (displayedCrosswalks: CrosswalkBase[], crosswalk: CrosswalkBase) =>
+        !displayedCrosswalks || displayedCrosswalks.some(eqCrosswalks(crosswalk))
+);
+
+const filterDisplayedCrosswalks = curry((displayedCrosswalks: CrosswalkBase[], tree: CrosswalkTree) => {
+    return evolve(
+        {
+            crosswalks: filter(isCrosswalkDisplayed(displayedCrosswalks)),
+            merges: map(
+                evolve({
+                    losers: map(filterDisplayedCrosswalks(displayedCrosswalks))
+                })
+            )
+        },
+        tree
+    );
+});
+
+const addCrosswalkUniqueId = (tree: CrosswalkTree) => {
+    let count = 1;
+    const addIdToSubtree = pipe(
+        evolve({crosswalks: map((crosswalk) => ({...crosswalk, uuid: count++}))}),
+        evolve({
+            merges: map(
+                evolve({
+                    losers: map((loser) => addIdToSubtree(loser))
+                })
+            )
+        })
+    );
+    return addIdToSubtree(tree);
+};
+
+const processTree = (tree: CrosswalkTree & {label?: string}) => {
+    const nodes: SankeyNode[] = [];
+    const links: SankeyLink[] = [];
+
+    const processSubTree = (tree, parentIndex, time) => {
+        const {crosswalks = [], merges = [], uri = '', label} = tree;
+
+        nodes.push({entity: tree, name: uri, time, label});
+        const index = nodes.length - 1;
+
+        const mergesCrosswalks = pipe(
+            chain(({losers, time}) => {
+                return pipe(
+                    filter((loser) => loser.crosswalks?.length || loser.merges?.length),
+                    chain((loser) => processSubTree(loser, index, time))
+                )(losers);
+            }),
+            concat(crosswalks)
+        )(merges);
+
+        if (parentIndex != -1)
+            mergesCrosswalks.forEach((crosswalk) =>
+                links.push({
+                    source: nodes[index],
+                    target: nodes[parentIndex],
+                    value: 10,
+                    crosswalk
+                })
+            );
+
+        return mergesCrosswalks;
+    };
+    processSubTree(tree, -1, Date.now());
+
+    const linkedNodes = pipe(
+        chain(({source, target}) => [source, target]),
+        uniq
+    )(links);
+
+    return {nodes: nodes.filter((node) => linkedNodes.includes(node)), links};
+};
+
+export const getSankeyData = (
+    crosswalkTree: CrosswalkTree,
+    entityLabel = '',
+    displayedCrosswalks?: CrosswalkBase[]
+) => {
+    return pipe(
+        filterDisplayedCrosswalks(displayedCrosswalks),
+        addCrosswalkUniqueId,
+        processTree
+    )({uri: 'ROOT', label: entityLabel, crosswalks: [], merges: [{time: Date.now(), losers: [crosswalkTree]}]});
+};

package/src/components/CrosswalkTreeView/styles.ts

@@ -0,0 +1,10 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles(() => ({
+    graph: {
+        padding: '8px 0px',
+        boxSizing: 'border-box',
+        height: '100%',
+        width: '100%'
+    }
+}));

package/src/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import EmptyIcon from './icons/EmptySources.svg';
+
+import {useStyles} from './styles';
+
+const EmptyState = () => {
+    const styles = useStyles();
+
+    return (
+        <div className={styles.root}>
+            <EmptyIcon />
+            <span className={styles.info}>
+                {i18n.text('Please persist your profile to be able to edit crosswalks')}
+            </span>
+        </div>
+    );
+};
+
+export default EmptyState;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import EmptyIcon from '../icons/EmptySources.svg';
+import EmptyState from '../EmptyState';
+
+describe('EmptyState tests', () => {
+    it('should render correctly', () => {
+        const wrapper = shallow(<EmptyState />);
+        expect(wrapper.find(EmptyIcon)).toHaveLength(1);
+        expect(wrapper.find('.info').text()).toBe('Please persist your profile to be able to edit crosswalks');
+    });
+});

package/src/components/EmptyState/icons/EmptySources.svg

@@ -0,0 +1,43 @@
+<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="45" cy="45" r="45" fill="#0072CE" fill-opacity="0.1"/>
+<mask id="mask0" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="90" height="90">
+<circle cx="45" cy="45" r="45" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-5.625 3.16406H84.375V90H-5.625V3.16406Z" fill="url(#paint0_linear)"/>
+<path opacity="0.049615" fill-rule="evenodd" clip-rule="evenodd" d="M66.0097 19.9917L86.6249 40.6068V92.9444H32.83L18.2812 79.1309V19.9917H66.0097Z" fill="url(#paint1_linear)"/>
+<path opacity="0.06" fill-rule="evenodd" clip-rule="evenodd" d="M16.5234 20.3906H87.5391C88.8982 20.3906 90 21.4924 90 22.8516V78.0469C90 79.406 88.8982 80.5078 87.5391 80.5078H16.5234C15.1643 80.5078 14.0625 79.406 14.0625 78.0469V22.8516C14.0625 21.4924 15.1643 20.3906 16.5234 20.3906Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5781 19.6875H88.2422C89.213 19.6875 90 20.4745 90 21.4453V76.6406C90 77.6114 89.213 78.3984 88.2422 78.3984H17.5781C16.6073 78.3984 15.8203 77.6114 15.8203 76.6406V21.4453C15.8203 20.4745 16.6073 19.6875 17.5781 19.6875Z" fill="white"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M37.0459 25.5356C37.0459 24.9532 37.5181 24.481 38.1006 24.481H52.7342C53.3167 24.481 53.7889 24.9532 53.7889 25.5356C53.7889 26.1181 53.3167 26.5903 52.7342 26.5903H38.1006C37.5181 26.5903 37.0459 26.1181 37.0459 25.5356Z" fill="#B6C7DB"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M36.9141 29.7544C36.9141 29.1719 37.3863 28.6997 37.9688 28.6997H60.5408C61.1233 28.6997 61.5955 29.1719 61.5955 29.7544C61.5955 30.3369 61.1233 30.8091 60.5408 30.8091H37.9687C37.3863 30.8091 36.9141 30.3369 36.9141 29.7544Z" fill="#979797"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M37.0459 57.3047C37.0459 56.7222 37.5181 56.25 38.1006 56.25H52.7342C53.3167 56.25 53.7889 56.7222 53.7889 57.3047C53.7889 57.8872 53.3167 58.3594 52.7342 58.3594H38.1006C37.5181 58.3594 37.0459 57.8872 37.0459 57.3047Z" fill="#B6C7DB"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M36.9141 61.5234C36.9141 60.9409 37.3863 60.4688 37.9688 60.4688H60.5408C61.1233 60.4688 61.5955 60.9409 61.5955 61.5234C61.5955 62.1059 61.1233 62.5781 60.5408 62.5781H37.9687C37.3863 62.5781 36.9141 62.1059 36.9141 61.5234Z" fill="#979797"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M37.0459 67.8516C37.0459 67.2691 37.5181 66.7969 38.1006 66.7969H66.7967C67.3792 66.7969 67.8514 67.2691 67.8514 67.8516C67.8514 68.4341 67.3792 68.9062 66.7967 68.9062H38.1006C37.5181 68.9062 37.0459 68.4341 37.0459 67.8516Z" fill="#B6C7DB"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M36.9141 72.0703C36.9141 71.4878 37.3863 71.0156 37.9688 71.0156H64.0564C64.6389 71.0156 65.1111 71.4878 65.1111 72.0703C65.1111 72.6528 64.6389 73.125 64.0564 73.125H37.9687C37.3863 73.125 36.9141 72.6528 36.9141 72.0703Z" fill="#979797"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M48.6475 36.2109C48.6475 35.6284 49.1197 35.1562 49.7021 35.1562H78.3982C78.9807 35.1562 79.4529 35.6284 79.4529 36.2109C79.4529 36.7934 78.9807 37.2656 78.3982 37.2656H49.7021C49.1197 37.2656 48.6475 36.7934 48.6475 36.2109Z" fill="#B6C7DB"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M48.5156 40.4297C48.5156 39.8472 48.9878 39.375 49.5703 39.375H72.1424C72.7249 39.375 73.1971 39.8472 73.1971 40.4297C73.1971 41.0122 72.7249 41.4844 72.1424 41.4844H49.5703C48.9878 41.4844 48.5156 41.0122 48.5156 40.4297Z" fill="#979797"/>
+<circle cx="23.5547" cy="27.7734" r="3.16406" fill="#B6C7DB"/>
+<circle cx="23.5547" cy="27.7734" r="3.16406" fill="#B6C7DB"/>
+<circle cx="42.1875" cy="37.2656" r="2.10938" fill="#B6C7DB"/>
+<circle cx="42.1875" cy="47.8125" r="2.10938" fill="#B6C7DB"/>
+<circle cx="23.5547" cy="59.4141" r="3.16406" fill="#B6C7DB"/>
+<circle cx="23.5547" cy="69.9609" r="3.16406" fill="#B6C7DB"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M48.6475 46.7578C48.6475 46.1753 49.1197 45.7031 49.7021 45.7031H78.3982C78.9807 45.7031 79.4529 46.1753 79.4529 46.7578C79.4529 47.3403 78.9807 47.8125 78.3982 47.8125H49.7021C49.1197 47.8125 48.6475 47.3403 48.6475 46.7578Z" fill="#B6C7DB"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M48.5156 50.9766C48.5156 50.3941 48.9878 49.9219 49.5703 49.9219H75.658C76.2405 49.9219 76.7127 50.3941 76.7127 50.9766C76.7127 51.5591 76.2405 52.0312 75.658 52.0312H49.5703C48.9878 52.0312 48.5156 51.5591 48.5156 50.9766Z" fill="#979797"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M32.5244 37.9688L32.5244 35.1562H31.8213V38.4487V38.6719V49.3471H35.7513V48.644L32.5244 48.6439L32.5244 38.6719H35.7513V37.9688H32.5244Z" fill="#2B98F0"/>
+<path opacity="0.54" fill-rule="evenodd" clip-rule="evenodd" d="M33.4234 27.0703L32.1805 28.3133L30.9375 27.0703H33.4234Z" fill="black"/>
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M17.5781 7.73438H82.9688C84.1337 7.73438 85.0781 8.67877 85.0781 9.84375V16.1719C85.0781 17.3369 84.1337 18.2812 82.9688 18.2812H17.5781C16.4131 18.2812 15.4688 17.3369 15.4688 16.1719V9.84375C15.4688 8.67877 16.4131 7.73438 17.5781 7.73438Z" fill="white"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M20.3906 13.0078C20.3906 11.8428 21.335 10.8984 22.5 10.8984H47.1094C48.2744 10.8984 49.2188 11.8428 49.2188 13.0078C49.2188 14.1728 48.2744 15.1172 47.1094 15.1172H22.5C21.335 15.1172 20.3906 14.1728 20.3906 13.0078Z" fill="#979797"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M52.0312 13.0078C52.0312 11.8428 52.9756 10.8984 54.1406 10.8984H57.6562C58.8212 10.8984 59.7656 11.8428 59.7656 13.0078C59.7656 14.1728 58.8212 15.1172 57.6562 15.1172H54.1406C52.9756 15.1172 52.0312 14.1728 52.0312 13.0078Z" fill="#979797"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear" x1="-5.625" y1="3.16406" x2="-5.625" y2="90" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAFAFA" stop-opacity="0.01"/>
+<stop offset="1" stop-color="#F4F4F4"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="93.5568" y1="63.6719" x2="54.4507" y2="27.3098" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0.01"/>
+<stop offset="1"/>
+</linearGradient>
+</defs>
+</svg>

package/src/components/EmptyState/styles.ts

@@ -0,0 +1,19 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+    root: {
+        height: '100%',
+        overflow: 'hidden',
+        background: theme.palette.background.default,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        paddingTop: '115px'
+    },
+    info: {
+        color: theme.palette.text.secondary,
+        fontSize: '16px',
+        lineHeight: '24px',
+        marginTop: '16px'
+    }
+}));

package/src/components/LegendTable/LegendTable.tsx

@@ -0,0 +1,124 @@
+import React, {memo, useCallback, useEffect, useMemo, useState} from 'react';
+import {
+    AttributeType,
+    checkCanCreateCrosswalk,
+    checkCanDeleteCrosswalk,
+    checkCanEditCrosswalk,
+    Contributor,
+    CrosswalkBase,
+    Entity,
+    TEntityType
+} from '@reltio/mdm-sdk';
+import {AddCrosswalkEvent, DeleteCrosswalkEvent, EditCrosswalkEvent, noop} from '@reltio/components';
+import {buildTableRowsData, collectVisibleCrosswalks} from './helpers';
+import LegendTableRow from './LegendTableRow/LegendTableRow';
+import {append, assoc, evolve, has, ifElse, includes, pipe, unless, without} from 'ramda';
+import {UnsubscribeContributorEvent} from '../../types';
+
+import {useStyles} from './styles';
+
+type Props = {
+    entity: Entity;
+    entityType: TEntityType;
+    contributors: Contributor[];
+    accentContributors?: boolean;
+    selectedAttributeTypes?: AttributeType[];
+    onChangeVisibleCrosswalks: (visibleCrosswalks: CrosswalkBase[]) => void;
+    readOnly?: boolean;
+    canUnmerge: boolean;
+    disableUnmerge: boolean;
+    onAddCrosswalk?: (event: AddCrosswalkEvent) => void;
+    onEditCrosswalk?: (event: EditCrosswalkEvent) => void;
+    onDeleteCrosswalk?: (event: DeleteCrosswalkEvent) => void;
+    onUnmergeContributor?: (contributorUri: string) => void;
+    onUnsubscribeContributor?: (event: UnsubscribeContributorEvent & {contributorUri: string}) => void;
+};
+
+const LegendTable = ({
+    accentContributors,
+    entity,
+    entityType,
+    contributors,
+    selectedAttributeTypes,
+    onChangeVisibleCrosswalks,
+    readOnly,
+    canUnmerge,
+    disableUnmerge,
+    onAddCrosswalk = noop,
+    onEditCrosswalk = noop,
+    onDeleteCrosswalk = noop,
+    onUnmergeContributor = noop,
+    onUnsubscribeContributor = noop
+}: Props) => {
+    const styles = useStyles();
+
+    const rowsData = useMemo(
+        () => buildTableRowsData(entity, contributors, selectedAttributeTypes),
+        [entity, contributors, selectedAttributeTypes]
+    );
+    const [expandedByContributor, setExpandedByContributor] = useState<{[contributorUri: string]: string[]}>({});
+    const visibleCrosswalks = useMemo(
+        () => collectVisibleCrosswalks(rowsData, expandedByContributor),
+        [rowsData, expandedByContributor]
+    );
+    useEffect(() => {
+        onChangeVisibleCrosswalks(visibleCrosswalks);
+    }, [visibleCrosswalks]);
+
+    const handleDelete = useCallback(
+        (crosswalkId: string) => {
+            onDeleteCrosswalk({entityUri: entity?.uri, crosswalkId});
+        },
+        [entity?.uri, onDeleteCrosswalk]
+    );
+
+    const handleEdit = useCallback(
+        (params: Omit<EditCrosswalkEvent, 'entityUri'>) => {
+            onEditCrosswalk({...params, entityUri: entity?.uri});
+        },
+        [entity?.uri, onEditCrosswalk]
+    );
+
+    return (
+        <div className={styles.table}>
+            {rowsData.map(({contributorUri, crosswalksBySources}) => {
+                return (
+                    <LegendTableRow
+                        key={contributorUri}
+                        className={styles.tableRow}
+                        canUnmerge={canUnmerge}
+                        contributorUri={contributorUri}
+                        accentContributor={accentContributors}
+                        crosswalksBySources={crosswalksBySources}
+                        disableAddCrosswalk={readOnly || !checkCanCreateCrosswalk(entityType)}
+                        disableEditCrosswalk={readOnly || !checkCanEditCrosswalk(entityType)}
+                        disableDeleteCrosswalk={readOnly || !checkCanDeleteCrosswalk(entityType)}
+                        disableUnmergeContributor={disableUnmerge}
+                        onAdd={(params) => onAddCrosswalk({...params, entity})}
+                        onDelete={handleDelete}
+                        onEdit={handleEdit}
+                        onUnmerge={() => onUnmergeContributor(contributorUri)}
+                        onUnsubscribeContributor={onUnsubscribeContributor}
+                        expandedSources={expandedByContributor[contributorUri]}
+                        onToggleSourceExpanded={(sourceUri: string) => {
+                            setExpandedByContributor(
+                                pipe(
+                                    unless(has(contributorUri), assoc(contributorUri, [])),
+                                    evolve({
+                                        [contributorUri]: ifElse(
+                                            includes(sourceUri),
+                                            without([sourceUri]),
+                                            append(sourceUri)
+                                        )
+                                    })
+                                )
+                            );
+                        }}
+                    />
+                );
+            })}
+        </div>
+    );
+};
+
+export default memo(LegendTable);

package/src/components/LegendTable/LegendTableRow/ContributorRow/ContributorRow.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import Typography from '@mui/material/Typography';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import {SmallIconButtonWithTooltip, Spacer} from '@reltio/components';
+import {getLastUriPart} from '@reltio/mdm-sdk';
+
+import {useStyles} from './styles';
+
+type ContributorAction = React.ComponentPropsWithRef<typeof SmallIconButtonWithTooltip> & {
+    show: boolean;
+};
+
+type Props = {
+    contributorUri: string;
+    isFocused: boolean;
+    focusable: boolean;
+    onToggleFocus: () => void;
+    contributorActions: ContributorAction[];
+};
+
+const ContributorRow = ({contributorUri, focusable, contributorActions, onToggleFocus, isFocused}: Props) => {
+    const styles = useStyles({isFocused});
+    return (
+        <div className={styles.root}>
+            <SmallIconButtonWithTooltip
+                size="XXS"
+                onClick={() => onToggleFocus()}
+                className={styles.focusedIcon}
+                icon={focusable && VisibilityIcon}
+                disabled={!focusable}
+                tooltipTitle={focusable && i18n.text('Focus')}
+            />
+            <Typography variant={'body2'} className={styles.uri}>
+                <span className={styles.title}>{i18n.text('Entity ID:')}</span>
+                {getLastUriPart(contributorUri)}
+            </Typography>
+            <Spacer />
+            {contributorActions.map(({show, ...buttonProps}, i) => {
+                return show && <SmallIconButtonWithTooltip key={i} size="XS" showForDisabled {...buttonProps} />;
+            })}
+        </div>
+    );
+};
+
+export default ContributorRow;

package/src/components/LegendTable/LegendTableRow/ContributorRow/__tests__/ContributorRow.test.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import {omit} from 'ramda';
+
+import ContributorRow from '../ContributorRow';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import Typography from '@mui/material/Typography';
+import {SmallIconButtonWithTooltip} from '@reltio/components';
+import UnsubscribeIcon from '@mui/icons-material/Delete';
+import AddIcon from '@mui/icons-material/Add';
+
+describe('ContributorRow tests', () => {
+    const contributorActions = [
+        {
+            icon: AddIcon,
+            tooltipTitle: 'Add crosswalk',
+            onClick: jest.fn(),
+            disabled: false,
+            show: true
+        },
+        {
+            icon: UnsubscribeIcon,
+            tooltipTitle: 'Unmerge',
+            onClick: jest.fn(),
+            disabled: true,
+            show: true
+        },
+        {
+            icon: UnsubscribeIcon,
+            tooltipTitle: 'Unsubscribe',
+            onClick: jest.fn(),
+            disabled: false,
+            show: true
+        }
+    ];
+
+    const props = {
+        contributorUri: 'entities/qwer',
+        onToggleFocus: jest.fn(),
+        focusable: true,
+        isFocused: true,
+        contributorActions
+    };
+
+    it('should render correctly', () => {
+        const wrapper = shallow(<ContributorRow {...props} />);
+        const buttons = wrapper.find(SmallIconButtonWithTooltip);
+        expect(buttons).toHaveLength(contributorActions.length + 1);
+        expect(buttons.at(0).props()).toMatchObject({
+            icon: VisibilityIcon,
+            disabled: false,
+            tooltipTitle: 'Focus'
+        });
+        expect(buttons.at(0).prop('icon')).toEqual(VisibilityIcon);
+        expect(buttons.at(0).prop('disabled')).toEqual(false);
+        expect(wrapper.find(Typography).text()).toBe('Entity ID:qwer');
+        contributorActions.forEach((action, i) => {
+            expect(buttons.at(i + 1).props()).toMatchObject(omit(['show'], action));
+        });
+    });
+
+    it('should not render contributor action if show === false', () => {
+        const actions = [
+            {
+                icon: AddIcon,
+                tooltipTitle: 'Add crosswalk',
+                onClick: jest.fn(),
+                disabled: false,
+                show: false
+            },
+            {
+                icon: UnsubscribeIcon,
+                tooltipTitle: 'Unmerge',
+                onClick: jest.fn(),
+                disabled: true,
+                show: true
+            }
+        ];
+        const wrapper = shallow(<ContributorRow {...props} contributorActions={actions} />);
+        const buttons = wrapper.find(SmallIconButtonWithTooltip);
+        expect(buttons).toHaveLength(2);
+        expect(buttons.at(0).prop('icon')).toEqual(VisibilityIcon);
+        expect(buttons.at(1).props()).toMatchObject(omit(['show'], actions[1]));
+    });
+
+    it('should render disabled eye button without icon if focusable === false', () => {
+        const wrapper = shallow(<ContributorRow {...props} focusable={false} />);
+        const button = wrapper.find(SmallIconButtonWithTooltip).at(0);
+        expect(button.prop('disabled')).toBe(true);
+        expect(button.prop('icon')).toBeFalsy();
+    });
+
+    it('should call props.onToggleFocus on focus button click', () => {
+        const wrapper = shallow(<ContributorRow {...props} />);
+        wrapper.find(SmallIconButtonWithTooltip).at(0).simulate('click');
+        expect(props.onToggleFocus).toBeCalled();
+    });
+
+    it('should render disabled focus button when focusable=false', () => {
+        const wrapper = shallow(<ContributorRow {...props} focusable={false} />);
+        expect(wrapper.find(SmallIconButtonWithTooltip).at(0).prop('disabled')).toBe(true);
+    });
+});

package/src/components/LegendTable/LegendTableRow/ContributorRow/styles.ts

@@ -0,0 +1,31 @@
+import {makeStyles} from '@mui/styles';
+
+type StylesProps = {
+    isFocused?: boolean;
+};
+
+export const useStyles = makeStyles((theme) => ({
+    root: {
+        display: 'flex',
+        alignItems: 'center',
+        paddingRight: '8px',
+        '& button + button': {
+            marginLeft: '4px'
+        }
+    },
+    focusedIcon: ({isFocused}: StylesProps) => ({
+        width: 28,
+        height: 28,
+        color: isFocused ? '#000' : 'rgba(0, 0, 0, 0.54)',
+        borderRadius: 0
+    }),
+    title: {
+        color: theme.palette.text.secondary,
+        paddingLeft: '6px',
+        paddingRight: '2px'
+    },
+    uri: {
+        lineHeight: '15px',
+        color: theme.palette.text.primary
+    }
+}));