unleash.unleash/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChangeDetails.tsx

import { VFC, FC, ReactNode } from 'react';
import { Box, styled, Typography } from '@mui/material';
import {
    IChangeRequestDeleteSegment,
    IChangeRequestUpdateSegment,
} from 'component/changeRequest/changeRequest.types';
import { useSegment } from 'hooks/api/getters/useSegment/useSegment';
import { SegmentDiff, SegmentTooltipLink } from '../../SegmentTooltipLink';

const ChangeItemCreateEditWrapper = styled(Box)(({ theme }) => ({
    display: 'grid',
    gridTemplateColumns: 'auto 40px',
    gap: theme.spacing(1),
    alignItems: 'center',
    width: '100%',
}));

export const ChangeItemWrapper = styled(Box)({
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
});

const ChangeItemInfo: FC = styled(Box)(({ theme }) => ({
    display: 'grid',
    gridTemplateColumns: '150px auto',
    gridAutoFlow: 'column',
    alignItems: 'center',
    flexGrow: 1,
    gap: theme.spacing(1),
}));

const SegmentContainer = styled(Box, {
    shouldForwardProp: prop => prop !== 'conflict',
})<{ conflict: string | undefined }>(({ theme, conflict }) => ({
    borderLeft: '1px solid',
    borderRight: '1px solid',
    borderTop: '1px solid',
    borderBottom: '1px solid',
    borderColor: conflict
        ? theme.palette.warning.border
        : theme.palette.divider,
    borderTopColor: theme.palette.divider,
    padding: theme.spacing(3),
    borderRadius: `0 0 ${theme.shape.borderRadiusLarge}px ${theme.shape.borderRadiusLarge}px`,
}));

export const SegmentChangeDetails: VFC<{
    actions?: ReactNode;
    change: IChangeRequestUpdateSegment | IChangeRequestDeleteSegment;
}> = ({ actions, change }) => {
    const { segment: currentSegment } = useSegment(change.payload.id);

    return (
        <SegmentContainer conflict={change.conflict}>
            {change.action === 'deleteSegment' && (
                <ChangeItemWrapper>
                    <ChangeItemInfo>
                        <Typography
                            sx={theme => ({
                                color: theme.palette.error.main,
                            })}
                        >
                            - Deleting segment:
                        </Typography>
                        <SegmentTooltipLink change={change}>
                            <SegmentDiff
                                change={change}
                                currentSegment={currentSegment}
                            />
                        </SegmentTooltipLink>
                    </ChangeItemInfo>
                    <div>{actions}</div>
                </ChangeItemWrapper>
            )}
            {change.action === 'updateSegment' && (
                <>
                    <ChangeItemCreateEditWrapper>
                        <ChangeItemInfo>
                            <Typography>Editing segment:</Typography>
                            <SegmentTooltipLink change={change}>
                                <SegmentDiff
                                    change={change}
                                    currentSegment={currentSegment}
                                />
                            </SegmentTooltipLink>
                        </ChangeItemInfo>
                        <div>{actions}</div>
                    </ChangeItemCreateEditWrapper>
                </>
            )}
        </SegmentContainer>
    );
};