Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 29x 29x 29x 29x 29x 29x 29x 29x 29x 29x 29x 29x 29x 29x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 30x 30x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 30x 30x 30x 1x | import { css } from '@emotion/react';
import { memo } from 'react';
import { FormattedMessage } from 'react-intl';
import { Tooltip } from '@allshares/studio-design-system';
import {
UserExternalIdSourceLabel,
UserExternalIdSourceLogo,
UserHrisIdSourceLabel,
UserHrisIdSourceLogo,
} from '@amalia/data-capture/connectors/assets';
import { UserExternalIdSource, UserHrisIdSource } from '@amalia/tenants/users/types';
import { testIds, UserNoIntegrationsLogo } from './logos';
import { UserIntegrationTooltip } from './tooltip';
import { type UserIntegrationsInfo } from './types';
export type UserIntegrationsProps = {
readonly user: UserIntegrationsInfo;
};
export const UserIntegrations = memo(function UserIntegrations({ user }: UserIntegrationsProps) {
const {
externalId,
externalIdSource = UserExternalIdSource.OTHERSOURCE,
hrisId,
hrisIdSource = UserHrisIdSource.OTHERSOURCE,
} = user;
const isExternalIdSourceNone = !externalId || externalIdSource === UserExternalIdSource.NONE;
const isHrisIdSourceNone = !hrisId || hrisIdSource === UserHrisIdSource.NONE;
const areBothSourcesNone = isExternalIdSourceNone && isHrisIdSourceNone;
// Only display one "None" logo if both sources are none
if (areBothSourcesNone) {
return (
<div data-testid="user-integrations-container">
<Tooltip
content={<FormattedMessage defaultMessage="No integrations" />}
placement="bottom"
>
<span data-testid="user-integrations-tooltip-anchor">
<UserNoIntegrationsLogo />
</span>
</Tooltip>
</div>
);
}
return (
<div
data-testid="user-integrations-container"
css={css`
display: flex;
align-items: center;
gap: 12px;
width: fit-content;
`}
>
{/* Don't display a "None" logo if the other is not "None" */}
{!isExternalIdSourceNone && (
<UserIntegrationTooltip
isOtherSource={externalIdSource === UserExternalIdSource.OTHERSOURCE}
kind="externalId"
sourceLabel={<UserExternalIdSourceLabel externalIdSource={externalIdSource} />}
value={externalId}
>
<UserExternalIdSourceLogo
data-testid={testIds.externalIdSource(user)}
externalIdSource={externalId ? externalIdSource : UserExternalIdSource.NONE}
/>
</UserIntegrationTooltip>
)}
{!isHrisIdSourceNone && (
<UserIntegrationTooltip
isOtherSource={hrisIdSource === UserHrisIdSource.OTHERSOURCE}
kind="hrisId"
sourceLabel={<UserHrisIdSourceLabel hrisIdSource={hrisIdSource} />}
value={hrisId}
>
<UserHrisIdSourceLogo
data-testid={testIds.hrisIdSource(user)}
hrisIdSource={hrisId ? hrisIdSource : UserHrisIdSource.NONE}
/>
</UserIntegrationTooltip>
)}
</div>
);
});
|