import { memo } from 'react' import { useRangesActionsContext } from '../context/ranges-context' import { Change, DeleteOperation, EditOperation, } from '../../../../../types/change' import { useTranslation } from 'react-i18next' import classnames from 'classnames' import { usePermissionsContext } from '@/features/ide-react/context/permissions-context' import { Button } from 'react-bootstrap' import Tooltip from '@/shared/components/tooltip' import MaterialIcon from '@/shared/components/material-icon' import { formatTimeBasedOnYear } from '@/features/utils/format-date' import { useChangesUsersContext } from '../context/changes-users-context' import { ReviewPanelChangeUser } from './review-panel-change-user' import { ReviewPanelEntry } from './review-panel-entry' export const ReviewPanelChange = memo<{ change: Change aggregate?: Change top?: number editable?: boolean docId: string hoverRanges?: boolean hovered?: boolean onEnter?: () => void onLeave?: () => void }>( ({ change, aggregate, top, docId, hoverRanges, editable = true, hovered, onEnter, onLeave, }) => { const { t } = useTranslation() const { acceptChanges, rejectChanges } = useRangesActionsContext() const permissions = usePermissionsContext() const changesUsers = useChangesUsersContext() if (!changesUsers) { // if users are not loaded yet, do not show "Unknown" user return null } return (
{formatTimeBasedOnYear(change.metadata?.ts)}
{editable && permissions.write && (
)}
{'i' in change.op && ( <> {aggregate ? ( ) : ( )} {aggregate ? ( {t('aggregate_changed')}:{' '} {aggregate.op.d} {' '} {t('aggregate_to')}{' '} {change.op.i} ) : ( {t('tracked_change_added')}:  {change.op.i} )} )} {'d' in change.op && ( <> {t('tracked_change_deleted')}:  {change.op.d} )}
) } ) ReviewPanelChange.displayName = 'ReviewPanelChange'