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:
parent
5b3d95cc3a
commit
aa9aa6fb4a
@ -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>
|
||||
|
@ -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>
|
||||
))}
|
||||
|
@ -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':
|
||||
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user