diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx
index dad381f18f..ce6a6d3367 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx
+++ b/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'}
diff --git a/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx b/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx
index dc22b2ad5a..6c2ad8c645 100644
--- a/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx
+++ b/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 }> = ({
);
+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 = () => (
+ theme.palette.neutral.light,
+ }}
+ >
+ |
+
+);
+
+export const UpdateCount: FC<{ count: number }> = ({ count }) => (
+
+
+ Updates:{' '}
+
+
+ {count} {count === 1 ? 'feature toggle' : 'feature toggles'}
+
+
+);
+
export const ChangeRequestSidebar: VFC = ({
open,
project,
@@ -78,6 +123,8 @@ export const ChangeRequestSidebar: VFC = ({
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 = ({
}}
>
-
+
- {environmentChangeRequest?.environment}
+ {environmentChangeRequest.environment}
+
+
@@ -192,21 +250,20 @@ export const ChangeRequestSidebar: VFC = ({
Applied}
/>
Applied}
/>
= ({
>
}
/>
+
+
+
+
+ Draft successfully sent to
+ review
+
+
+
+ >
+ }
+ />
))}
diff --git a/frontend/src/component/changeRequest/ChangeRequestStatusBadge/ChangeRequestStatusBadge.tsx b/frontend/src/component/changeRequest/ChangeRequestStatusBadge/ChangeRequestStatusBadge.tsx
index 13e7d7ec08..0bcba8d5ec 100644
--- a/frontend/src/component/changeRequest/ChangeRequestStatusBadge/ChangeRequestStatusBadge.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestStatusBadge/ChangeRequestStatusBadge.tsx
@@ -13,12 +13,14 @@ const ReviewRequiredBadge: VFC = () => (
);
+const DraftBadge: VFC = () => Draft;
+
export const ChangeRequestStatusBadge: VFC = ({
state,
}) => {
switch (state) {
case 'Draft':
- return ;
+ return ;
case 'In review':
return ;
case 'Approved':
diff --git a/frontend/src/component/changeRequest/DraftBanner/DraftBanner.tsx b/frontend/src/component/changeRequest/DraftBanner/DraftBanner.tsx
index f73c3999ce..1911b9dbaf 100644
--- a/frontend/src/component/changeRequest/DraftBanner/DraftBanner.tsx
+++ b/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 = ({ project }) => {
)
.map(changeRequest => (
{
setIsSidebarOpen(true);