Fix/banner placement (#5833)

This PR determines where we show the banners in the new strategy
configuration:

<img width="1166" alt="Skjermbilde 2024-01-10 kl 14 46 35"
src="https://github.com/Unleash/unleash/assets/16081982/db2cd3aa-9de5-4095-873f-33e09610c74f">

frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/NewFeatureStrategyForm.tsx

@@ -56,7 +56,7 @@ interface IFeatureStrategyFormProps {
     onSubmit: () => void;
     onCancel?: () => void;
     loading: boolean;
-    isChangeRequest?: boolean;
+    isChangeRequest: boolean;
     strategy: Partial<IFeatureStrategy>;
     setStrategy: React.Dispatch<
         React.SetStateAction<Partial<IFeatureStrategy>>
@@ -121,6 +121,7 @@ const StyledTabs = styled(Tabs)(({ theme }) => ({
     borderBottom: `1px solid ${theme.palette.divider}`,
     paddingLeft: theme.spacing(6),
     paddingRight: theme.spacing(6),
+    minHeight: '60px',
 }));
 
 const StyledBox = styled(Box)(({ theme }) => ({
@@ -145,7 +146,15 @@ const StyledHeaderBox = styled(Box)(({ theme }) => ({
     paddingLeft: theme.spacing(6),
     paddingRight: theme.spacing(6),
     paddingTop: theme.spacing(2),
-    paddingBottom: theme.spacing(2),
+}));
+
+const StyledAlertBox = styled(Box)(({ theme }) => ({
+    paddingLeft: theme.spacing(6),
+    paddingRight: theme.spacing(6),
+    '& > *': {
+        marginTop: theme.spacing(2),
+        marginBottom: theme.spacing(2),
+    },
 }));
 
 const StyledEnvironmentBox = styled(Box)(({ theme }) => ({
@@ -373,6 +382,50 @@ export const NewFeatureStrategyForm = ({
                     </StyledEnvironmentBox>
                 ) : null}
             </StyledHeaderBox>
+
+            <StyledAlertBox>
+                <ConditionallyRender
+                    condition={hasChangeRequestInReviewForEnvironment}
+                    show={alert}
+                    elseShow={
+                        <ConditionallyRender
+                            condition={isChangeRequest}
+                            show={
+                                <FeatureStrategyChangeRequestAlert
+                                    environment={environmentId}
+                                />
+                            }
+                        />
+                    }
+                />
+                <FeatureStrategyEnabled
+                    projectId={feature.project}
+                    featureId={feature.name}
+                    environmentId={environmentId}
+                >
+                    <ConditionallyRender
+                        condition={Boolean(isChangeRequest)}
+                        show={
+                            <Alert severity='success'>
+                                This feature toggle is currently enabled in the{' '}
+                                <strong>{environmentId}</strong> environment.
+                                Any changes made here will be available to users
+                                as soon as these changes are approved and
+                                applied.
+                            </Alert>
+                        }
+                        elseShow={
+                            <Alert severity='success'>
+                                This feature toggle is currently enabled in the{' '}
+                                <strong>{environmentId}</strong> environment.
+                                Any changes made here will be available to users
+                                as soon as you hit <strong>save</strong>.
+                            </Alert>
+                        }
+                    />
+                </FeatureStrategyEnabled>
+            </StyledAlertBox>
+
             <StyledTabs value={tab} onChange={handleChange}>
                 <StyledTab label='General' />
                 <Tab
@@ -410,6 +463,7 @@ export const NewFeatureStrategyForm = ({
                                     }));
                                 }}
                             />
+
                             <FeatureStrategyEnabledDisabled
                                 enabled={!strategy?.disabled}
                                 onToggleEnabled={() =>
@@ -419,6 +473,7 @@ export const NewFeatureStrategyForm = ({
                                     }))
                                 }
                             />
+
                             <FeatureStrategyType
                                 strategy={strategy}
                                 strategyDefinition={strategyDefinition}
@@ -427,54 +482,6 @@ export const NewFeatureStrategyForm = ({
                                 errors={errors}
                                 hasAccess={access}
                             />
-
-                            <ConditionallyRender
-                                condition={
-                                    hasChangeRequestInReviewForEnvironment
-                                }
-                                show={alert}
-                                elseShow={
-                                    <ConditionallyRender
-                                        condition={Boolean(isChangeRequest)}
-                                        show={
-                                            <FeatureStrategyChangeRequestAlert
-                                                environment={environmentId}
-                                            />
-                                        }
-                                    />
-                                }
-                            />
-
-                            <FeatureStrategyEnabled
-                                projectId={feature.project}
-                                featureId={feature.name}
-                                environmentId={environmentId}
-                            >
-                                <ConditionallyRender
-                                    condition={Boolean(isChangeRequest)}
-                                    show={
-                                        <Alert severity='success'>
-                                            This feature toggle is currently
-                                            enabled in the{' '}
-                                            <strong>{environmentId}</strong>{' '}
-                                            environment. Any changes made here
-                                            will be available to users as soon
-                                            as these changes are approved and
-                                            applied.
-                                        </Alert>
-                                    }
-                                    elseShow={
-                                        <Alert severity='success'>
-                                            This feature toggle is currently
-                                            enabled in the{' '}
-                                            <strong>{environmentId}</strong>{' '}
-                                            environment. Any changes made here
-                                            will be available to users as soon
-                                            as you hit <strong>save</strong>.
-                                        </Alert>
-                                    }
-                                />
-                            </FeatureStrategyEnabled>
                         </>
                     }
                 />

frontend/src/component/feature/StrategyTypes/StrategyVariants.tsx

@@ -14,6 +14,7 @@ import { StrategyVariantsUpgradeAlert } from '../../common/StrategyVariantsUpgra
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { useUiFlag } from 'hooks/useUiFlag';
 import { Add } from '@mui/icons-material';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 const StyledVariantForms = styled('div')({
     display: 'flex',
@@ -144,7 +145,11 @@ export const StrategyVariants: FC<{
                     />
                 </StyledHelpIconBox>
                 <StyledVariantForms>
-                    <StrategyVariantsUpgradeAlert />
+                    <ConditionallyRender
+                        condition={variantsEdit.length > 0}
+                        show={<StrategyVariantsUpgradeAlert />}
+                    />
+
                     {variantsEdit.map((variant, i) => (
                         <VariantForm
                             disableOverrides={true}