/
ChangeRequestHeader.tsx
84 lines (83 loc) · 3.35 KB
/
ChangeRequestHeader.tsx
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
import { Box } from '@mui/material';
import { FC } from 'react';
import { Typography, Tooltip } from '@mui/material';
import TimeAgo from 'react-timeago';
import { IChangeRequest } from 'component/changeRequest/changeRequest.types';
import { ChangeRequestStatusBadge } from 'component/changeRequest/ChangeRequestStatusBadge/ChangeRequestStatusBadge';
import {
StyledPaper,
StyledContainer,
StyledHeader,
StyledInnerContainer,
StyledAvatar,
StyledCard,
} from './ChangeRequestHeader.styles';
import { Separator } from '../../ChangeRequestSidebar/ChangeRequestSidebar';
export const ChangeRequestHeader: FC<{ changeRequest: IChangeRequest }> = ({
changeRequest,
}) => {
return (
<StyledPaper elevation={0}>
<StyledContainer>
<StyledHeader variant="h1" sx={{ mr: 1.5 }}>
Change request #{changeRequest.id}
</StyledHeader>
<ChangeRequestStatusBadge state={changeRequest.state} />
</StyledContainer>
<StyledInnerContainer>
<Typography variant="body2" sx={{ margin: 'auto 0' }}>
Created{' '}
<TimeAgo
minPeriod={60}
date={new Date(changeRequest.createdAt)}
/>{' '}
by
</Typography>
<Box
sx={theme => ({
marginLeft: theme.spacing(1),
})}
>
<Tooltip title={changeRequest?.createdBy?.username}>
<StyledAvatar
src={changeRequest?.createdBy?.imageUrl}
/>
</Tooltip>
</Box>
<Typography
variant="body2"
sx={theme => ({ marginLeft: theme.spacing(0.5) })}
>
{changeRequest?.createdBy?.username}
</Typography>
<Box sx={theme => ({ marginLeft: theme.spacing(1.5) })}>
<StyledCard variant="outlined">
<Typography variant="body2" sx={{ lineHeight: 1 }}>
Environment:{' '}
<Typography
display="inline"
fontWeight="bold"
variant="body2"
component="span"
>
{changeRequest?.environment}
</Typography>{' '}
<Separator /> Updates:{' '}
<Typography
variant="body2"
display="inline"
fontWeight="bold"
component="span"
>
{changeRequest.features.length}{' '}
{changeRequest.features.length === 1
? 'feature toggle'
: 'feature toggles'}
</Typography>
</Typography>
</StyledCard>
</Box>
</StyledInnerContainer>
</StyledPaper>
);
};