diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.styles.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.styles.tsx new file mode 100644 index 0000000000..b0bdb15509 --- /dev/null +++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.styles.tsx @@ -0,0 +1,37 @@ +import { styled } from '@mui/material'; +import { Avatar, Box, Card, Paper, Typography } from '@mui/material'; + +export const StyledPaper = styled(Paper)(({ theme }) => ({ + padding: theme.spacing(2, 4), + borderRadius: `${theme.shape.borderRadiusLarge}px`, +})); + +export const StyledContainer = styled(Box)(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + gap: 2, + marginBottom: theme.spacing(2), +})); + +export const StyledInnerContainer = styled(Box)(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + gap: theme.spacing(1.5), +})); + +export const StyledHeader = styled(Typography)(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + marginRight: theme.spacing(1), + fontSize: theme.fontSizes.mainHeader, +})); + +export const StyledCard = styled(Card)(({ theme }) => ({ + padding: theme.spacing(0.5, 1), + backgroundColor: theme.palette.tertiary.light, +})); + +export const StyledAvatar = styled(Avatar)(() => ({ + height: '30px', + width: '30px', +})); diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx index 5b2782bf9a..382bd1abe5 100644 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx +++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx @@ -1,69 +1,60 @@ +import { Box } from '@mui/material'; import { FC } from 'react'; -import { Avatar, Box, Card, Paper, Typography } from '@mui/material'; -import { PlaygroundResultChip } from 'component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip'; -import { ReactComponent as ChangesAppliedIcon } from 'assets/icons/merge.svg'; +import { Typography } from '@mui/material'; import TimeAgo from 'react-timeago'; +import { resolveChangeRequestStatusIcon } from 'component/changeRequest/changeRequest.utils'; +import { IChangeRequest } from 'component/changeRequest/changeRequest.types'; +import { + StyledPaper, + StyledContainer, + StyledHeader, + StyledInnerContainer, + StyledAvatar, + StyledCard, +} from './ChangeRequestHeader.styles'; -export const ChangeRequestHeader: FC<{ changeRequest: any }> = ({ +export const ChangeRequestHeader: FC<{ changeRequest: IChangeRequest }> = ({ changeRequest, }) => { return ( - ({ - p: theme.spacing(2, 4), - borderRadius: theme => `${theme.shape.borderRadiusLarge}px`, - })} - > - ({ - display: 'flex', - alignItems: 'center', - gap: 2, - marginBottom: theme.spacing(2), - })} - > - - Change request - - #{changeRequest.id} - - - } - label="Changes approved" - enabled - /> - - - + + + + Change request #{changeRequest.id} + + {resolveChangeRequestStatusIcon(changeRequest.state)} + + + Created {' '} by - - ({ - padding: 1, - backgroundColor: theme.palette.tertiary.light, - })} - > - Environment:{' '} - - {changeRequest?.environment} - {' '} - | Updates:{' '} - - {changeRequest?.features.length} feature toggles - - - - + + + + + Environment:{' '} + + {changeRequest?.environment} + {' '} + | Updates:{' '} + + {changeRequest?.features.length} feature toggles + + + + + + ); }; diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestTimeline/ChangeRequestTimeline.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestTimeline/ChangeRequestTimeline.tsx index 41a03b6264..df4655a2d8 100644 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestTimeline/ChangeRequestTimeline.tsx +++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestTimeline/ChangeRequestTimeline.tsx @@ -8,7 +8,7 @@ import TimelineDot from '@mui/lab/TimelineDot'; import TimelineConnector from '@mui/lab/TimelineConnector'; import TimelineContent from '@mui/lab/TimelineContent'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { ChangeRequestState } from '../changeRequest.types'; +import { ChangeRequestState } from '../../changeRequest.types'; interface ISuggestChangeTimelineProps { state: ChangeRequestState; } diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/changeRequest.types.ts b/frontend/src/component/changeRequest/ChangeRequestOverview/changeRequest.types.ts deleted file mode 100644 index 451eb23138..0000000000 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/changeRequest.types.ts +++ /dev/null @@ -1,6 +0,0 @@ -export type ChangeRequestState = - | 'Draft' - | 'Approved' - | 'In review' - | 'Applied' - | 'Cancelled'; diff --git a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestStatusCell/ChangeRequestStatusCell.tsx b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestStatusCell/ChangeRequestStatusCell.tsx index 8f5cbf8625..4e29e991da 100644 --- a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestStatusCell/ChangeRequestStatusCell.tsx +++ b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestStatusCell/ChangeRequestStatusCell.tsx @@ -1,115 +1,23 @@ import { VFC } from 'react'; -import { Chip, styled } from '@mui/material'; -import { colors } from 'themes/colors'; import { TextCell } from 'component/common/Table/cells/TextCell/TextCell'; -import { Check, CircleOutlined, Close } from '@mui/icons-material'; +import { resolveChangeRequestStatusIcon } from 'component/changeRequest/changeRequest.utils'; +import { ChangeRequestState } from 'component/changeRequest/changeRequest.types'; interface IChangeRequestStatusCellProps { value?: string | null; } -export enum ChangeRequestState { - DRAFT = 'Draft', - APPROVED = 'Approved', - IN_REVIEW = 'In review', - APPLIED = 'Applied', - CANCELLED = 'Cancelled', - REJECTED = 'Rejected', -} - -export const StyledChip = styled(Chip)(({ theme, icon }) => ({ - padding: theme.spacing(0, 1), - height: 30, - borderRadius: theme.shape.borderRadius, - fontWeight: theme.typography.fontWeightMedium, - gap: theme.spacing(1, 1), - ['& .MuiChip-label']: { - padding: 0, - paddingLeft: Boolean(icon) ? theme.spacing(0.5) : 0, - }, -})); - -export const StyledRejectedChip = styled(StyledChip)(({ theme }) => ({ - border: `1px solid ${theme.palette.error.main}`, - backgroundColor: colors.red['100'], - ['& .MuiChip-label']: { - color: theme.palette.error.main, - }, - ['& .MuiChip-icon']: { - color: theme.palette.error.main, - }, -})); - -export const StyledApprovedChip = styled(StyledChip)(({ theme }) => ({ - border: `1px solid ${theme.palette.success.main}`, - backgroundColor: colors.green['100'], - ['& .MuiChip-label']: { - color: theme.palette.success.main, - }, - ['& .MuiChip-icon']: { - color: theme.palette.success.main, - }, -})); - -export const StyledReviewChip = styled(StyledChip)(({ theme }) => ({ - border: `1px solid ${theme.palette.primary.main}`, - backgroundColor: colors.purple['100'], - ['& .MuiChip-label']: { - color: theme.palette.primary.main, - }, - ['& .MuiChip-icon']: { - color: theme.palette.primary.main, - }, -})); - export const ChangeRequestStatusCell: VFC = ({ value, }) => { - const renderState = (state: string) => { - switch (state) { - case ChangeRequestState.IN_REVIEW: - return ( - } - /> - ); - case ChangeRequestState.APPROVED: - return ( - } - /> - ); - case ChangeRequestState.APPLIED: - return ( - } - /> - ); - case ChangeRequestState.CANCELLED: - return ( - } - /> - ); - case ChangeRequestState.REJECTED: - return ( - } - /> - ); - default: - return null; - } + const renderState = () => { + if (!value) return null; + return resolveChangeRequestStatusIcon(value as ChangeRequestState); }; if (!value) { return ; } - return {renderState(value)}; + return {renderState()}; }; diff --git a/frontend/src/component/changeRequest/changeRequest.types.ts b/frontend/src/component/changeRequest/changeRequest.types.ts new file mode 100644 index 0000000000..fe302dcb7f --- /dev/null +++ b/frontend/src/component/changeRequest/changeRequest.types.ts @@ -0,0 +1,36 @@ +export type ChangeRequestState = + | 'Draft' + | 'Approved' + | 'In review' + | 'Applied' + | 'Cancelled'; + +export interface IChangeRequest { + id: number; + environment: string; + state: ChangeRequestState; + project: string; + createdBy: ICreatedBy; + createdAt: string; + features: IChangeRequestFeatures[]; +} + +interface ICreatedBy { + id: number; + username: string; + imageUrl: string; +} + +interface IChangeRequestFeatures { + name: string; + changes: IChangeRequestFeatureChanges[]; +} + +interface IChangeRequestFeatureChanges { + id: number; + action: string; + payload: unknown; + createdAt: string; + createdBy: ICreatedBy; + warning?: string; +} diff --git a/frontend/src/component/changeRequest/changeRequest.utils.tsx b/frontend/src/component/changeRequest/changeRequest.utils.tsx new file mode 100644 index 0000000000..7488086e51 --- /dev/null +++ b/frontend/src/component/changeRequest/changeRequest.utils.tsx @@ -0,0 +1,40 @@ +import { ChangeRequestState } from './changeRequest.types'; +import { Badge } from 'component/common/Badge/Badge'; +import { Check, CircleOutlined, Close } from '@mui/icons-material'; + +export const resolveChangeRequestStatusIcon = (state: ChangeRequestState) => { + const reviewRequired = ( + }> + Review required + + ); + switch (state) { + case 'Draft': + return reviewRequired; + case 'In review': + return reviewRequired; + case 'Approved': + return ( + }> + Approved + + ); + case 'Applied': + return ( + }> + Applied + + ); + case 'Cancelled': + return ( + } + > + Cancelled + + ); + default: + return reviewRequired; + } +};