Merge branch 'main' of https://github.com/Unleash/unleash

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

@@ -21,6 +21,8 @@ import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useCh
 import { ChangeRequestStatusBadge } from '../ChangeRequestStatusBadge/ChangeRequestStatusBadge';
 import CloseIcon from '@mui/icons-material/Close';
 import { useNavigate } from 'react-router-dom';
+import useToast from 'hooks/useToast';
+import { formatUnknownError } from 'utils/formatUnknownError';
 
 interface IChangeRequestSidebarProps {
     open: boolean;
@@ -123,26 +125,26 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
         loading,
         refetch: refetchChangeRequest,
     } = useChangeRequestOpen(project);
-    const { changeState } = useChangeRequestApi();
+    const { changeState, discardDraft } = useChangeRequestApi();
     const theme = useTheme();
     const navigate = useNavigate();
+    const { setToastApiError } = useToast();
 
     const onReview = async (draftId: number) => {
         try {
             await changeState(project, draftId, { state: 'In review' });
             refetchChangeRequest();
-        } catch (e) {
+        } catch (error: unknown) {
-            console.log('something went wrong');
+            setToastApiError(formatUnknownError(error));
         }
     };
-    const onDiscard = async () => {
+
-        alert('discard');
+    const onDiscard = async (draftId: number) => {
-    };
-    const onApply = async () => {
         try {
-            alert('apply');
+            await discardDraft(project, draftId);
-        } catch (e) {
+            refetchChangeRequest();
-            console.log(e);
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
         }
     };
 
@@ -257,36 +259,6 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
                             onRefetch={refetchChangeRequest}
                         />
                         <Box sx={{ display: 'flex' }}>
-                            <ConditionallyRender
-                                condition={
-                                    environmentChangeRequest.state ===
-                                    'Approved'
-                                }
-                                show={<Typography>Applied</Typography>}
-                            />
-                            <ConditionallyRender
-                                condition={
-                                    environmentChangeRequest.state === 'Applied'
-                                }
-                                show={<Typography>Applied</Typography>}
-                            />
-                            <ConditionallyRender
-                                condition={
-                                    environmentChangeRequest.state ===
-                                    'Approved'
-                                }
-                                show={
-                                    <>
-                                        <Button
-                                            sx={{ mt: 2 }}
-                                            variant="contained"
-                                            onClick={onApply}
-                                        >
-                                            Apply changes
-                                        </Button>
-                                    </>
-                                }
-                            />
                             <ConditionallyRender
                                 condition={
                                     environmentChangeRequest?.state === 'Draft'
@@ -308,7 +280,11 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
                                         <Button
                                             sx={{ mt: 2, ml: 2 }}
                                             variant="outlined"
-                                            onClick={onDiscard}
+                                            onClick={() =>
+                                                onDiscard(
+                                                    environmentChangeRequest.id
+                                                )
+                                            }
                                         >
                                             Discard changes
                                         </Button>
@@ -318,7 +294,9 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
                             <ConditionallyRender
                                 condition={
                                     environmentChangeRequest.state ===
-                                    'In review'
+                                        'In review' ||
+                                    environmentChangeRequest.state ===
+                                        'Approved'
                                 }
                                 show={
                                     <>

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

@@ -28,7 +28,7 @@ const DraftBannerContent: FC<{
         <Box className={classes.content}>
             <DraftBannerContentWrapper>
                 <WarningAmberIcon />
-                <Typography variant="body2" sx={{ ml: 1 }}>
+                <Typography variant="body2" sx={{ ml: 1, maxWidth: '500px' }}>
                     <strong>Draft mode!</strong> – You have changes{' '}
                     <ConditionallyRender
                         condition={Boolean(changeRequest.environment)}
@@ -46,6 +46,12 @@ const DraftBannerContent: FC<{
                         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'
+                        }
+                    />
                 </Typography>
                 <Button
                     variant="contained"
@@ -54,9 +60,6 @@ const DraftBannerContent: FC<{
                 >
                     View changes ({changeRequest.features.length})
                 </Button>
-                <Button variant="text" onClick={() => {}} sx={{ ml: 1 }}>
-                    Discard all
-                </Button>
             </DraftBannerContentWrapper>
         </Box>
     );
@@ -84,7 +87,9 @@ export const DraftBanner: VFC<IDraftBannerProps> = ({ project }) => {
             {draft &&
                 draft
                     .filter(changeRequest =>
-                        ['Draft', 'In review'].includes(changeRequest.state)
+                        ['Draft', 'In review', 'Approved'].includes(
+                            changeRequest.state
+                        )
                     )
                     .map(changeRequest => (
                         <DraftBannerContent

frontend/src/hooks/api/actions/useChangeRequestApi/useChangeRequestApi.ts

@@ -77,6 +77,20 @@ export const useChangeRequestApi = () => {
             method: 'PUT',
             body: JSON.stringify({ changeRequestsEnabled: enabled }),
         });
+
+        try {
+            return await makeRequest(req.caller, req.id);
+        } catch (e) {
+            throw e;
+        }
+    };
+
+    const discardDraft = async (projectId: string, draftId: number) => {
+        const path = `api/admin/projects/${projectId}/change-requests/${draftId}`;
+        const req = createRequest(path, {
+            method: 'DELETE',
+        });
+
         try {
             return await makeRequest(req.caller, req.id);
         } catch (e) {
@@ -89,6 +103,7 @@ export const useChangeRequestApi = () => {
         changeState,
         discardChangeRequestEvent,
         updateChangeRequestEnvironmentConfig,
+        discardDraft,
         errors,
         loading,
     };