1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-11 00:08:30 +01:00

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">
This commit is contained in:
Fredrik Strand Oseberg 2024-01-10 16:08:56 +01:00 committed by GitHub
parent 36acef244c
commit 78fa122604
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 63 additions and 51 deletions

View File

@ -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>
</>
}
/>

View File

@ -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}