feat: stateful banner (#2346)

Conditional banner for change request status

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

@@ -1,4 +1,4 @@
-import { VFC } from 'react';
+import { FC, VFC } from 'react';
 import {
     Box,
     Button,
@@ -58,6 +58,15 @@ const BackButton = styled(Button)(({ theme }) => ({
     marginLeft: 'auto',
 }));
 
+const SubmitChangeRequestButton: FC<{ onClick: () => void; count: number }> = ({
+    onClick,
+    count,
+}) => (
+    <Button sx={{ mt: 2, ml: 'auto' }} variant="contained" onClick={onClick}>
+        Submit change request ({count})
+    </Button>
+);
+
 export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
     open,
     project,
@@ -218,17 +227,18 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
                                 }
                                 show={
                                     <>
-                                        <Button
+                                        <SubmitChangeRequestButton
-                                            sx={{ mt: 2, ml: 'auto' }}
-                                            variant="contained"
                                             onClick={() =>
                                                 onReview(
                                                     environmentChangeRequest.id
                                                 )
                                             }
-                                        >
+                                            count={
-                                            Request changes
+                                                environmentChangeRequest
-                                        </Button>
+                                                    .features.length
+                                            }
+                                        />
+
                                         <Button
                                             sx={{ mt: 2, ml: 2 }}
                                             variant="outlined"

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

@@ -1,74 +1,100 @@
-import { useState, VFC } from 'react';
+import { FC, useState, VFC } from 'react';
-import { Box, Button, Typography } from '@mui/material';
+import { Box, Button, styled, Typography } from '@mui/material';
 import { useStyles as useAppStyles } from 'component/App.styles';
 import WarningAmberIcon from '@mui/icons-material/WarningAmber';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { ChangeRequestSidebar } from '../ChangeRequestSidebar/ChangeRequestSidebar';
 import { useChangeRequestOpen } from 'hooks/api/getters/useChangeRequestOpen/useChangeRequestOpen';
+import { IChangeRequest } from '../changeRequest.types';
 
 interface IDraftBannerProps {
     project: string;
 }
 
-export const DraftBanner: VFC<IDraftBannerProps> = ({ project }) => {
+const DraftBannerContentWrapper = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    padding: theme.spacing(1, 1.5),
+    color: theme.palette.warning.main,
+}));
+
+const DraftBannerContent: FC<{
+    changeRequest: IChangeRequest;
+    onClick: () => void;
+}> = ({ changeRequest, onClick }) => {
     const { classes } = useAppStyles();
+
+    return (
+        <Box className={classes.content}>
+            <DraftBannerContentWrapper>
+                <WarningAmberIcon />
+                <Typography variant="body2" sx={{ ml: 1 }}>
+                    <strong>Draft mode!</strong> – You have changes{' '}
+                    <ConditionallyRender
+                        condition={Boolean(changeRequest.environment)}
+                        show={
+                            <>
+                                in <strong>{changeRequest.environment} </strong>
+                            </>
+                        }
+                    />
+                    <ConditionallyRender
+                        condition={changeRequest.state === 'Draft'}
+                        show={'that need to be reviewed'}
+                    />
+                    <ConditionallyRender
+                        condition={changeRequest.state === 'In review'}
+                        show={'that are in review'}
+                    />
+                </Typography>
+                <Button
+                    variant="contained"
+                    onClick={onClick}
+                    sx={{ ml: 'auto' }}
+                >
+                    View changes ({changeRequest.features.length})
+                </Button>
+                <Button variant="text" onClick={() => {}} sx={{ ml: 1 }}>
+                    Discard all
+                </Button>
+            </DraftBannerContentWrapper>
+        </Box>
+    );
+};
+
+const StickyBanner = styled(Box)(({ theme }) => ({
+    position: 'sticky',
+    top: -1,
+    zIndex: theme.zIndex.appBar,
+    borderTop: `1px solid ${theme.palette.warning.border}`,
+    borderBottom: `1px solid ${theme.palette.warning.border}`,
+    backgroundColor: theme.palette.warning.light,
+}));
+
+export const DraftBanner: VFC<IDraftBannerProps> = ({ project }) => {
     const [isSidebarOpen, setIsSidebarOpen] = useState(false);
     const { draft, loading } = useChangeRequestOpen(project);
-    const environment = '';
 
     if ((!loading && !draft) || draft?.length === 0) {
         return null;
     }
 
     return (
-        <Box
+        <StickyBanner>
-            sx={{
+            {draft &&
-                position: 'sticky',
+                draft
-                top: -1,
+                    .filter(changeRequest =>
-                zIndex: theme => theme.zIndex.appBar,
+                        ['Draft', 'In review'].includes(changeRequest.state)
-                borderTop: theme => `1px solid ${theme.palette.warning.border}`,
+                    )
-                borderBottom: theme =>
+                    .map(changeRequest => (
-                    `1px solid ${theme.palette.warning.border}`,
+                        <DraftBannerContent
-                backgroundColor: theme => theme.palette.warning.light,
+                            changeRequest={changeRequest}
-            }}
-        >
-            <Box className={classes.content}>
-                <Box
-                    sx={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        px: 1,
-                        py: 1.5,
-                        color: theme => theme.palette.warning.main,
-                    }}
-                >
-                    <WarningAmberIcon />
-                    <Typography variant="body2" sx={{ ml: 1 }}>
-                        <strong>Draft mode!</strong> – You have changes{' '}
-                        <ConditionallyRender
-                            condition={Boolean(environment)}
-                            show={
-                                <>
-                                    in <strong>{environment} </strong>
-                                </>
-                            }
-                        />
-                        that need to be reviewed
-                    </Typography>
-                    <Button
-                        variant="contained"
                             onClick={() => {
                                 setIsSidebarOpen(true);
                             }}
-                        sx={{ ml: 'auto' }}
+                        />
-                    >
+                    ))}
-                        Review changes
+
-                    </Button>
-                    <Button variant="text" onClick={() => {}} sx={{ ml: 1 }}>
-                        Discard all
-                    </Button>
-                </Box>
-            </Box>
             <ChangeRequestSidebar
                 project={project}
                 open={isSidebarOpen}
@@ -76,6 +102,6 @@ export const DraftBanner: VFC<IDraftBannerProps> = ({ project }) => {
                     setIsSidebarOpen(false);
                 }}
             />
-        </Box>
+        </StickyBanner>
     );
 };

frontend/src/component/common/SidebarModal/SidebarModal.styles.ts

@@ -1,15 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(() => ({
-    modal: {
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        bottom: 0,
-        height: '100vh',
-        maxWidth: '98vw',
-        width: 1300,
-        overflow: 'auto',
-        boxShadow: '0 0 1rem rgba(0, 0, 0, 0.25)',
-    },
-}));

frontend/src/component/common/SidebarModal/SidebarModal.tsx

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
-import { Modal, Backdrop } from '@mui/material';
+import { Modal, Backdrop, styled } from '@mui/material';
 import Fade from '@mui/material/Fade';
-import { useStyles } from 'component/common/SidebarModal/SidebarModal.styles';
 import { SIDEBAR_MODAL_ID } from 'utils/testIds';
 
 interface ISidebarModalProps {
@@ -13,14 +12,24 @@ interface ISidebarModalProps {
 
 const TRANSITION_DURATION = 250;
 
+const ModalContentWrapper = styled('div')({
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    height: '100vh',
+    maxWidth: '98vw',
+    width: 1300,
+    overflow: 'auto',
+    boxShadow: '0 0 1rem rgba(0, 0, 0, 0.25)',
+});
+
 export const SidebarModal = ({
     open,
     onClose,
     label,
     children,
 }: ISidebarModalProps) => {
-    const { classes: styles } = useStyles();
-
     return (
         <Modal
             open={open}
@@ -32,7 +41,7 @@ export const SidebarModal = ({
             data-testid={SIDEBAR_MODAL_ID}
         >
             <Fade timeout={TRANSITION_DURATION} in={open}>
-                <div className={styles.modal}>{children}</div>
+                <ModalContentWrapper>{children}</ModalContentWrapper>
             </Fade>
         </Modal>
     );