From ff11f30e1d2201835957ca0c512f8d15cf7c6584 Mon Sep 17 00:00:00 2001 From: sjaanus Date: Wed, 9 Nov 2022 12:35:09 +0100 Subject: [PATCH] Change request approvers displaying in UI (#2358) This PR adds UI for approvers to the change requests feature. --- .../ChangeRequestOverview.tsx | 20 +++++++++- .../ChangeRequestReviewer.tsx | 40 +++++++++++++++++++ .../ChangeRequestReviewers.tsx | 17 ++++++-- .../changeRequest/changeRequest.types.ts | 6 +++ .../useChangeRequest/useChangeRequest.ts | 3 +- frontend/src/interfaces/suggestChangeset.ts | 37 ----------------- 6 files changed, 79 insertions(+), 44 deletions(-) create mode 100644 frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewers/ChangeRequestReviewer.tsx delete mode 100644 frontend/src/interfaces/suggestChangeset.ts diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx index 9694608ae1..6d5738cd03 100644 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx +++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx @@ -1,4 +1,4 @@ -import { styled } from '@mui/material'; +import { FormControlLabel, styled, Switch } from '@mui/material'; import { FC } from 'react'; import { Box } from '@mui/material'; import { useChangeRequest } from 'hooks/api/getters/useChangeRequest/useChangeRequest'; @@ -15,6 +15,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit import Button from '@mui/material/Button'; import Paper from '@mui/material/Paper'; import { ReviewButton } from './ReviewButton/ReviewButton'; +import { ChangeRequestReviewer } from './ChangeRequestReviewers/ChangeRequestReviewer'; const StyledAsideBox = styled(Box)(({ theme }) => ({ width: '30%', @@ -76,7 +77,22 @@ export const ChangeRequestOverview: FC = () => { - {/* */} + 0} + show={ + + {changeRequest.approvals.map(approver => ( + + ))} + + } + /> diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewers/ChangeRequestReviewer.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewers/ChangeRequestReviewer.tsx new file mode 100644 index 0000000000..69533427c0 --- /dev/null +++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewers/ChangeRequestReviewer.tsx @@ -0,0 +1,40 @@ +import { Box, Paper, styled, Typography } from '@mui/material'; +import React, { FC } from 'react'; +import { StyledAvatar } from '../ChangeRequestHeader/ChangeRequestHeader.styles'; +import { CheckCircle } from '@mui/icons-material'; + +interface IChangeRequestReviewerProps { + name?: string; + imageUrl?: string; +} + +const StyledBox = styled(Box)(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + flexWrap: 'wrap', + marginTop: theme.spacing(1.5), + gap: theme.spacing(1), +})); + +export const StyledSuccessIcon = styled(CheckCircle)(({ theme }) => ({ + color: theme.palette.success.main, + height: '25px', + width: '25px', + marginRight: theme.spacing(1), + marginLeft: 'auto', +})); + +export const ChangeRequestReviewer: FC = ({ + name, + imageUrl, +}) => { + return ( + + + + {name} + + + + ); +}; diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewers/ChangeRequestReviewers.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewers/ChangeRequestReviewers.tsx index ee5b71bd26..9855d5a95d 100644 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewers/ChangeRequestReviewers.tsx +++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewers/ChangeRequestReviewers.tsx @@ -1,16 +1,25 @@ -import { Box, Paper } from '@mui/material'; +import { Box, Paper, styled, Typography } from '@mui/material'; +import { FC } from 'react'; -export const ChangeRequestReviewers = () => { +const StyledBox = styled(Box)(({ theme }) => ({ + marginBottom: theme.spacing(2), +})); + +export const ChangeRequestReviewers: FC = ({ children }) => { return ( ({ marginTop: theme.spacing(2), - padding: 2, + padding: theme.spacing(4), borderRadius: theme => `${theme.shape.borderRadiusLarge}px`, })} > - ({ padding: theme.spacing(2) })}>Reviewers + Reviewers + + Approved by + + {children} ); }; diff --git a/frontend/src/component/changeRequest/changeRequest.types.ts b/frontend/src/component/changeRequest/changeRequest.types.ts index 7ba862cd1c..6ffb49eff4 100644 --- a/frontend/src/component/changeRequest/changeRequest.types.ts +++ b/frontend/src/component/changeRequest/changeRequest.types.ts @@ -9,6 +9,7 @@ export interface IChangeRequest { createdBy: Pick; createdAt: Date; features: IChangeRequestFeature[]; + approvals: IChangeRequestApproval[]; } export interface IChangeRequestFeature { @@ -17,6 +18,11 @@ export interface IChangeRequestFeature { changes: IChangeRequestEvent[]; } +export interface IChangeRequestApproval { + createdBy: Pick; + createdAt: Date; +} + export interface IChangeRequestBase { id: number; action: ChangeRequestAction; diff --git a/frontend/src/hooks/api/getters/useChangeRequest/useChangeRequest.ts b/frontend/src/hooks/api/getters/useChangeRequest/useChangeRequest.ts index e439e58e83..c36af4d12a 100644 --- a/frontend/src/hooks/api/getters/useChangeRequest/useChangeRequest.ts +++ b/frontend/src/hooks/api/getters/useChangeRequest/useChangeRequest.ts @@ -1,9 +1,10 @@ import useSWR from 'swr'; import { formatApiPath } from 'utils/formatPath'; import handleErrorResponses from '../httpErrorResponseHandler'; +import { IChangeRequest } from 'component/changeRequest/changeRequest.types'; export const useChangeRequest = (projectId: string, id: string) => { - const { data, error, mutate } = useSWR( + const { data, error, mutate } = useSWR( formatApiPath(`api/admin/projects/${projectId}/change-requests/${id}`), fetcher ); diff --git a/frontend/src/interfaces/suggestChangeset.ts b/frontend/src/interfaces/suggestChangeset.ts deleted file mode 100644 index f8b2a8d0a5..0000000000 --- a/frontend/src/interfaces/suggestChangeset.ts +++ /dev/null @@ -1,37 +0,0 @@ -export interface IChangeRequest { - id: number; - state: - | 'CREATED' - | 'UPDATED' - | 'SUBMITTED' - | 'APPROVED' - | 'REJECTED' - | 'CLOSED'; - project: string; - environment: string; - createdBy?: string; - createdAt?: Date; - changes?: IChangeRequestEvent[]; -} - -export interface IChangeRequestEvent { - id: number; - action: - | 'updateEnabled' - | 'strategyAdd' - | 'strategyUpdate' - | 'strategyDelete'; - feature: string; - payload?: unknown; - createdBy?: string; - createdAt?: Date; -} - -export enum ChangeRequestEvent { - CREATED = 'CREATED', - UPDATED = 'UPDATED', - SUBMITTED = 'SUBMITTED', - APPROVED = 'APPROVED', - REJECTED = 'REJECTED', - CLOSED = 'CLOSED', -}