1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00

styling change request sidebar (#2350)

This commit is contained in:
Mateusz Kwasniewski 2022-11-08 16:16:30 +01:00 committed by GitHub
parent 5b3d95cc3a
commit aa9aa6fb4a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 107 additions and 11 deletions

View File

@ -49,7 +49,10 @@ export const ChangeRequestHeader: FC<{ changeRequest: IChangeRequest }> = ({
fontWeight="bold"
component="span"
>
{changeRequest?.features.length} feature toggles
{changeRequest.features.length}{' '}
{changeRequest.features.length === 1
? 'feature toggle'
: 'feature toggles'}
</Typography>
</Typography>
</StyledCard>

View File

@ -7,18 +7,20 @@ import {
Tooltip,
Divider,
IconButton,
useTheme,
} from '@mui/material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
import { PageContent } from 'component/common/PageContent/PageContent';
import { PageHeader } from 'component/common/PageHeader/PageHeader';
import { HelpOutline } from '@mui/icons-material';
import { CheckCircle, HelpOutline } from '@mui/icons-material';
import EnvironmentIcon from 'component/common/EnvironmentIcon/EnvironmentIcon';
import { ChangeRequest } from '../ChangeRequest/ChangeRequest';
import { useChangeRequestOpen } from 'hooks/api/getters/useChangeRequestOpen/useChangeRequestOpen';
import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi';
import { ChangeRequestStatusBadge } from '../ChangeRequestStatusBadge/ChangeRequestStatusBadge';
import CloseIcon from '@mui/icons-material/Close';
import { useNavigate } from 'react-router-dom';
interface IChangeRequestSidebarProps {
open: boolean;
@ -67,6 +69,49 @@ const SubmitChangeRequestButton: FC<{ onClick: () => void; count: number }> = ({
</Button>
);
export const StyledSuccessIcon = styled(CheckCircle)(({ theme }) => ({
color: theme.palette.success.main,
height: '25px',
width: '25px',
marginRight: theme.spacing(1),
}));
export const StyledFlexAlignCenterBox = styled(Box)(({ theme }) => ({
paddingTop: theme.spacing(3),
marginLeft: 'auto',
display: 'flex',
alignItems: 'center',
}));
export const Separator = () => (
<Typography
component="span"
sx={{
marginLeft: 2,
marginRight: 2,
color: theme => theme.palette.neutral.light,
}}
>
|
</Typography>
);
export const UpdateCount: FC<{ count: number }> = ({ count }) => (
<Box>
<Typography component="span" variant="body1" color="text.secondary">
Updates:{' '}
</Typography>
<Typography
component="span"
sx={{
fontWeight: 'bold',
}}
>
{count} {count === 1 ? 'feature toggle' : 'feature toggles'}
</Typography>
</Box>
);
export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
open,
project,
@ -78,6 +123,8 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
refetch: refetchChangeRequest,
} = useChangeRequestOpen(project);
const { changeState } = useChangeRequestApi();
const theme = useTheme();
const navigate = useNavigate();
const onReview = async (draftId: number) => {
try {
@ -166,15 +213,26 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
}}
>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Box sx={{ display: 'flex' }}>
<Box
sx={{
display: 'flex',
alignItems: 'center',
}}
>
<EnvironmentIcon enabled={true} />
<Typography component="span" variant="h2">
{environmentChangeRequest?.environment}
{environmentChangeRequest.environment}
</Typography>
<Separator />
<UpdateCount
count={
environmentChangeRequest.features.length
}
/>
</Box>
<Box sx={{ ml: 'auto' }}>
<ChangeRequestStatusBadge
state={environmentChangeRequest?.state}
state={environmentChangeRequest.state}
/>
</Box>
</Box>
@ -192,21 +250,20 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
<Box sx={{ display: 'flex' }}>
<ConditionallyRender
condition={
environmentChangeRequest?.state ===
environmentChangeRequest.state ===
'Approved'
}
show={<Typography>Applied</Typography>}
/>
<ConditionallyRender
condition={
environmentChangeRequest?.state ===
'Applied'
environmentChangeRequest.state === 'Applied'
}
show={<Typography>Applied</Typography>}
/>
<ConditionallyRender
condition={
environmentChangeRequest?.state ===
environmentChangeRequest.state ===
'Approved'
}
show={
@ -249,6 +306,39 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
</>
}
/>
<ConditionallyRender
condition={
environmentChangeRequest.state ===
'In review'
}
show={
<>
<StyledFlexAlignCenterBox>
<StyledSuccessIcon />
<Typography
color={
theme.palette.success.main
}
>
Draft successfully sent to
review
</Typography>
<Button
sx={{ marginLeft: 2 }}
variant="outlined"
onClick={() => {
onClose();
navigate(
`/projects/${environmentChangeRequest.project}/change-requests/${environmentChangeRequest.id}`
);
}}
>
View change request page
</Button>
</StyledFlexAlignCenterBox>
</>
}
/>
</Box>
</Box>
))}

View File

@ -13,12 +13,14 @@ const ReviewRequiredBadge: VFC = () => (
</Badge>
);
const DraftBadge: VFC = () => <Badge color="warning">Draft</Badge>;
export const ChangeRequestStatusBadge: VFC<IChangeRequestStatusBadgeProps> = ({
state,
}) => {
switch (state) {
case 'Draft':
return <ReviewRequiredBadge />;
return <DraftBadge />;
case 'In review':
return <ReviewRequiredBadge />;
case 'Approved':

View File

@ -65,7 +65,7 @@ const DraftBannerContent: FC<{
const StickyBanner = styled(Box)(({ theme }) => ({
position: 'sticky',
top: -1,
zIndex: theme.zIndex.appBar,
zIndex: 200 /* has to lower than header.zIndex */,
borderTop: `1px solid ${theme.palette.warning.border}`,
borderBottom: `1px solid ${theme.palette.warning.border}`,
backgroundColor: theme.palette.warning.light,
@ -88,6 +88,7 @@ export const DraftBanner: VFC<IDraftBannerProps> = ({ project }) => {
)
.map(changeRequest => (
<DraftBannerContent
key={changeRequest.id}
changeRequest={changeRequest}
onClick={() => {
setIsSidebarOpen(true);