Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

Feat/review page states (#2309)

Browse Source 
* feat: review status draft

* feat: add review status styles
This commit is contained in:
Fredrik Strand Oseberg 2022-11-01 10:55:03 +01:00 committed by GitHub
parent e3a185d650
commit da102a3e98
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 175 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/component/suggestChanges/SuggestedChangeOverview/SuggestedChangeOverview.tsx
View File

@ -9,6 +9,7 @@ import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import { useSuggestChangeApi } from 'hooks/api/actions/useSuggestChangeApi/useSuggestChangeApi';
import useToast from 'hooks/useToast';
import { formatUnknownError } from 'utils/formatUnknownError';
import { SuggestedChangeReviewStatus } from './SuggestedChangeReviewStatus/SuggestedChangeReviewStatus';
export const SuggestedChangeOverview: FC = () => {
const projectId = useRequiredPathParam('projectId');
@ -65,6 +66,7 @@ export const SuggestedChangeOverview: FC = () => {
})}
>
<SuggestedChangeset suggestedChange={suggestedChange} />
<SuggestedChangeReviewStatus approved={true} />
<Button
variant="contained"
sx={{ marginTop: 2 }}

73
frontend/src/component/suggestChanges/SuggestedChangeOverview/SuggestedChangeReviewStatus/SuggestChangeReviewStatus.styles.ts Normal file
View File

@ -0,0 +1,73 @@
import { styled } from '@mui/material';
import { Cancel, CheckCircle } from '@mui/icons-material';
import { Box, Typography, Divider } from '@mui/material';
const styledComponentPropCheck = () => (prop: string) =>
prop !== 'color' && prop !== 'sx';
export const StyledFlexAlignCenterBox = styled(Box)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
}));
export const StyledErrorIcon = styled(Cancel)(({ theme }) => ({
color: theme.palette.error.main,
height: '35px',
width: '35px',
marginRight: theme.spacing(1),
}));
export const StyledSuccessIcon = styled(CheckCircle)(({ theme }) => ({
color: theme.palette.success.main,
height: '35px',
width: '35px',
marginRight: theme.spacing(1),
}));
export const StyledOuterContainer = styled(Box)(({ theme }) => ({
display: 'flex',
marginTop: theme.spacing(2),
}));
export const StyledButtonContainer = styled(Box, {
shouldForwardProp: styledComponentPropCheck(),
})<{ approved: boolean }>(({ theme, approved }) => ({
borderRadius: `${theme.shape.borderRadiusMedium}px`,
backgroundColor: approved
? theme.palette.success.main
: theme.palette.tableHeaderBackground,
padding: theme.spacing(1, 2),
marginRight: theme.spacing(2),
height: '45px',
width: '45px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
['svg']: {
color: approved
? theme.palette.tertiary.background
: theme.palette.neutral.main,
},
}));
export const StyledDivider = styled(Divider)(({ theme }) => ({
margin: theme.spacing(2.5, 0),
}));
export const StyledReviewStatusContainer = styled(Box, {
shouldForwardProp: styledComponentPropCheck(),
})<{ approved: boolean }>(({ theme, approved }) => ({
borderRadius: `${theme.shape.borderRadiusLarge}px`,
border: approved
? `2px solid ${theme.palette.success.main}`
: `1px solid ${theme.palette.tertiary.main}`,
padding: theme.spacing(3),
width: '100%',
}));
export const StyledReviewTitle = styled(Typography, {
shouldForwardProp: styledComponentPropCheck(),
})<{ approved: boolean }>(({ theme, approved }) => ({
fontWeight: 'bold',
color: approved ? theme.palette.success.main : theme.palette.error.main,
}));

100
frontend/src/component/suggestChanges/SuggestedChangeOverview/SuggestedChangeReviewStatus/SuggestedChangeReviewStatus.tsx Normal file
View File

@ -0,0 +1,100 @@
import { FC } from 'react';
import { Box, Typography } from '@mui/material';
import { ReactComponent as ChangesAppliedIcon } from 'assets/icons/merge.svg';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import {
StyledOuterContainer,
StyledButtonContainer,
StyledReviewStatusContainer,
StyledFlexAlignCenterBox,
StyledSuccessIcon,
StyledErrorIcon,
StyledReviewTitle,
StyledDivider,
} from './SuggestChangeReviewStatus.styles';
interface ISuggestChangeReviewsStatusProps {
approved: boolean;
}
export const SuggestedChangeReviewStatus: FC<
ISuggestChangeReviewsStatusProps
> = ({ approved }) => {
return (
<StyledOuterContainer>
<StyledButtonContainer approved={approved}>
<ChangesAppliedIcon
style={{
transform: `scale(1.5)`,
}}
/>
</StyledButtonContainer>
<StyledReviewStatusContainer approved={approved}>
<StyledFlexAlignCenterBox>
<ConditionallyRender
condition={approved}
show={<Approved approved={approved} />}
elseShow={<ReviewRequired approved={approved} />}
/>
</StyledFlexAlignCenterBox>
</StyledReviewStatusContainer>
</StyledOuterContainer>
);
};
const Approved = ({ approved }: ISuggestChangeReviewsStatusProps) => {
return (
<>
<StyledFlexAlignCenterBox>
<StyledSuccessIcon />
<Box>
<StyledReviewTitle approved={approved}>
Changed approved
</StyledReviewTitle>
<Typography>
One approving review from requested approvers
</Typography>
</Box>
</StyledFlexAlignCenterBox>
<StyledDivider />
<StyledFlexAlignCenterBox>
<StyledSuccessIcon />
<Box>
<StyledReviewTitle approved={approved}>
Changes are ready to be applied
</StyledReviewTitle>
</Box>
</StyledFlexAlignCenterBox>
</>
);
};
const ReviewRequired = ({ approved }: ISuggestChangeReviewsStatusProps) => {
return (
<>
<StyledFlexAlignCenterBox>
<StyledErrorIcon />
<Box>
<StyledReviewTitle approved={approved}>
Review required
</StyledReviewTitle>
<Typography>
At least 1 approving review must be submitted before
changes can be applied
</Typography>
</Box>
</StyledFlexAlignCenterBox>
<StyledDivider />
<StyledFlexAlignCenterBox>
<StyledErrorIcon />
<StyledReviewTitle approved={approved}>
Apply changes is blocked
</StyledReviewTitle>
</StyledFlexAlignCenterBox>
</>
);
};