diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/NewFeatureStrategyForm.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/NewFeatureStrategyForm.tsx index edc924de2f..ad019a5a98 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/NewFeatureStrategyForm.tsx +++ b/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; setStrategy: React.Dispatch< React.SetStateAction> @@ -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 = ({ ) : null} + + + + } + /> + } + /> + + + This feature toggle is currently enabled in the{' '} + {environmentId} environment. + Any changes made here will be available to users + as soon as these changes are approved and + applied. + + } + elseShow={ + + This feature toggle is currently enabled in the{' '} + {environmentId} environment. + Any changes made here will be available to users + as soon as you hit save. + + } + /> + + + + @@ -419,6 +473,7 @@ export const NewFeatureStrategyForm = ({ })) } /> + - - - } - /> - } - /> - - - - This feature toggle is currently - enabled in the{' '} - {environmentId}{' '} - environment. Any changes made here - will be available to users as soon - as these changes are approved and - applied. - - } - elseShow={ - - This feature toggle is currently - enabled in the{' '} - {environmentId}{' '} - environment. Any changes made here - will be available to users as soon - as you hit save. - - } - /> - } /> diff --git a/frontend/src/component/feature/StrategyTypes/StrategyVariants.tsx b/frontend/src/component/feature/StrategyTypes/StrategyVariants.tsx index dac3d11473..e5ded911b6 100644 --- a/frontend/src/component/feature/StrategyTypes/StrategyVariants.tsx +++ b/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<{ /> - + 0} + show={} + /> + {variantsEdit.map((variant, i) => (