Fix: change request info (#3971)

<!-- Thanks for creating a PR! To make it easier for reviewers and
everyone else to understand what your changes relate to, please add some
relevant content to the headings below. Feel free to ignore or delete
sections that you don't think are relevant. Thank you! ❤️ -->

## About the changes
- fixed spacing in sidebar
- consolidated info into one banner

closes
[#1-969/change-requests-ui-inconsistency](https://linear.app/unleash/issue/1-969/change-requests-ui-inconsistency)

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

@@ -46,7 +46,7 @@ const ChangeRequestHeader = styled(Box)(({ theme }) => ({
 const ChangeRequestContent = styled(Box)(({ theme }) => ({
     padding: theme.spacing(3, 3, 3, 3),
     border: '2px solid',
-    mb: 5,
+    marginBottom: theme.spacing(5),
     borderColor: theme.palette.divider,
     borderRadius: `0 0 ${theme.shape.borderRadiusLarge}px ${theme.shape.borderRadiusLarge}px`,
     borderTop: 'none',

frontend/src/component/layout/MainLayout/DraftBanner/DraftBanner.tsx

@@ -1,4 +1,4 @@
-import { FC, useState, VFC } from 'react';
+import { FC, Fragment, useMemo, useState, VFC } from 'react';
 import { Box, Button, styled, Typography } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { ChangeRequestSidebar } from 'component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar';
@@ -37,43 +37,61 @@ const StyledBox = styled(Box)(({ theme }) => ({
 }));
 
 const DraftBannerContent: FC<{
-    changeRequest: IChangeRequest;
+    changeRequests: IChangeRequest[];
     onClick: () => void;
-}> = ({ changeRequest, onClick }) => {
+}> = ({ changeRequests, onClick }) => {
+    const environments = changeRequests.map(({ environment }) => environment);
+    const allChangesCount = changeRequests.reduce(
+        (acc, curr) => acc + changesCount(curr),
+        0
+    );
+    const showOneLongExplanation =
+        changeRequests.length === 1 &&
+        ['Draft', 'In review', 'Approved'].includes(changeRequests[0].state);
+    const explanation = showOneLongExplanation
+        ? {
+              Draft: ' that need to be reviewed',
+              'In review': ' that are in review',
+              Approved:
+                  ' that are approved. Adding more changes will clear the approvals and require a new review',
+          }[changeRequests[0].state as 'Draft' | 'In review' | 'Approved']
+        : '';
+
     return (
         <StyledBox>
             <DraftBannerContentWrapper>
                 <Typography variant="body2" sx={{ mr: 4 }}>
                     <strong>Change request mode</strong> – You have changes{' '}
                     <ConditionallyRender
-                        condition={Boolean(changeRequest.environment)}
+                        condition={Boolean(environments)}
                         show={
                             <>
-                                in <strong>{changeRequest.environment} </strong>
+                                in{' '}
+                                {environments.map((env, i) =>
+                                    i === 0 ? (
+                                        <Fragment key={env}>
+                                            <strong>{env}</strong>
+                                        </Fragment>
+                                    ) : (
+                                        <Fragment key={env}>
+                                            {i === environments.length - 1
+                                                ? ' and '
+                                                : ', '}
+                                            <strong>{env}</strong>
+                                        </Fragment>
+                                    )
+                                )}
                             </>
                         }
                     />
-                    <ConditionallyRender
-                        condition={changeRequest.state === 'Draft'}
-                        show={'that need to be reviewed'}
-                    />
-                    <ConditionallyRender
-                        condition={changeRequest.state === 'In review'}
-                        show={'that are in review'}
-                    />
-                    <ConditionallyRender
-                        condition={changeRequest.state === 'Approved'}
-                        show={
-                            'that are approved. Adding more changes will clear the approvals and require a new review'
-                        }
-                    />
+                    {explanation}.
                 </Typography>
                 <Button
                     variant="contained"
                     onClick={onClick}
                     sx={{ ml: 'auto' }}
                 >
-                    View changes ({changesCount(changeRequest)})
+                    View changes ({allChangesCount})
                 </Button>
             </DraftBannerContentWrapper>
         </StyledBox>
@@ -94,30 +112,33 @@ export const DraftBanner: VFC<IDraftBannerProps> = ({ project }) => {
     const [isSidebarOpen, setIsSidebarOpen] = useState(false);
     const { data, loading } = usePendingChangeRequests(project);
 
+    const unfinishedChangeRequests = useMemo(
+        () =>
+            data?.filter(changeRequest =>
+                ['Draft', 'In review', 'Approved'].includes(changeRequest.state)
+            ),
+        [data]
+    );
+
     if ((!loading && !data) || data?.length === 0) {
         return null;
     }
 
     return (
         <StickyBanner>
-            {data?.length
-                ? data
-                      .filter(changeRequest =>
-                          ['Draft', 'In review', 'Approved'].includes(
-                              changeRequest.state
-                          )
-                      )
-                      .map(changeRequest => (
+            <ConditionallyRender
+                condition={Boolean(unfinishedChangeRequests?.length)}
+                show={
                     <DraftBannerContent
-                              key={changeRequest.id}
-                              changeRequest={changeRequest}
+                        changeRequests={
+                            unfinishedChangeRequests as IChangeRequest[]
+                        }
                         onClick={() => {
                             setIsSidebarOpen(true);
                         }}
                     />
-                      ))
-                : null}
-
+                }
+            />
             <ChangeRequestSidebar
                 project={project}
                 open={isSidebarOpen}