styling change request sidebar (#2350)

frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx

@@ -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>

frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx

@@ -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 ===
+                                    environmentChangeRequest.state === 'Applied'
-                                    '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>
                 ))}

frontend/src/component/changeRequest/ChangeRequestStatusBadge/ChangeRequestStatusBadge.tsx

@@ -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':

frontend/src/component/changeRequest/DraftBanner/DraftBanner.tsx

@@ -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);