From ce900830cb04e157a35f219e5e7373d81c3a759c Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Tue, 4 Jul 2023 09:09:05 +0200
Subject: [PATCH] Fix: change request info (#3971)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- 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)
---
 .../EnvironmentChangeRequest.tsx              |  2 +-
 .../MainLayout/DraftBanner/DraftBanner.tsx    | 97 +++++++++++--------
 2 files changed, 60 insertions(+), 39 deletions(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx b/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx
index f664c2825a..c13d3e50b5 100644
--- a/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx
+++ b/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',
diff --git a/frontend/src/component/layout/MainLayout/DraftBanner/DraftBanner.tsx b/frontend/src/component/layout/MainLayout/DraftBanner/DraftBanner.tsx
index dbefa5f066..68d1c03071 100644
--- a/frontend/src/component/layout/MainLayout/DraftBanner/DraftBanner.tsx
+++ b/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 => (
-                          <DraftBannerContent
-                              key={changeRequest.id}
-                              changeRequest={changeRequest}
-                              onClick={() => {
-                                  setIsSidebarOpen(true);
-                              }}
-                          />
-                      ))
-                : null}
-
+            <ConditionallyRender
+                condition={Boolean(unfinishedChangeRequests?.length)}
+                show={
+                    <DraftBannerContent
+                        changeRequests={
+                            unfinishedChangeRequests as IChangeRequest[]
+                        }
+                        onClick={() => {
+                            setIsSidebarOpen(true);
+                        }}
+                    />
+                }
+            />
             <ChangeRequestSidebar
                 project={project}
                 open={isSidebarOpen}