1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-06-27 01:19:00 +02:00

chore(1-3747): minor strategy edit header updates (#9992)

Makes a few small changes to the strategy header:
- Removes the rollout percentage and environment indicator
- Changes the env disabled alert from warning to info
- Maybe moves the alert to the end of the form, only on the general tab
panel

I've placed the removal of the rollout percentage and env header behind
a flag, but not the alert changes.

Before:

![image](https://github.com/user-attachments/assets/29382afe-9a75-4138-be1c-2bab45a75787)


After:
<img width="1239" alt="image"
src="https://github.com/user-attachments/assets/db73c9c8-3244-40db-9991-c412c9aadc18"
/>
This commit is contained in:
Thomas Heartman 2025-05-14 14:48:46 +02:00 committed by GitHub
parent ba80c925e7
commit a80b667cf5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 13 deletions

View File

@ -35,7 +35,7 @@ export const FeatureStrategyEnabled: FC<IFeatureStrategyEnabledProps> = ({
</Alert> </Alert>
} }
elseShow={ elseShow={
<Alert severity='warning'> <Alert severity='info'>
This feature flag is currently disabled in the{' '} This feature flag is currently disabled in the{' '}
<strong>{environmentId}</strong> environment. Any changes <strong>{environmentId}</strong> environment. Any changes
made here will not take effect until the flag has been made here will not take effect until the flag has been

View File

@ -48,6 +48,7 @@ import { Badge } from 'component/common/Badge/Badge';
import EnvironmentIcon from 'component/common/EnvironmentIcon/EnvironmentIcon'; import EnvironmentIcon from 'component/common/EnvironmentIcon/EnvironmentIcon';
import { UpgradeChangeRequests } from '../../FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/UpgradeChangeRequests/UpgradeChangeRequests.tsx'; import { UpgradeChangeRequests } from '../../FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/UpgradeChangeRequests/UpgradeChangeRequests.tsx';
import { ConstraintSeparator } from 'component/common/ConstraintsList/ConstraintSeparator/ConstraintSeparator'; import { ConstraintSeparator } from 'component/common/ConstraintsList/ConstraintSeparator/ConstraintSeparator';
import { useUiFlag } from 'hooks/useUiFlag.ts';
interface IFeatureStrategyFormProps { interface IFeatureStrategyFormProps {
feature: IFeatureToggle; feature: IFeatureToggle;
@ -210,6 +211,7 @@ export const FeatureStrategyForm = ({
environmentId, environmentId,
); );
const { strategyDefinition } = useStrategy(strategy?.name); const { strategyDefinition } = useStrategy(strategy?.name);
const addEditStrategy = useUiFlag('addEditStrategy');
useEffect(() => { useEffect(() => {
trackEvent('new-strategy-form', { trackEvent('new-strategy-form', {
@ -349,7 +351,10 @@ export const FeatureStrategyForm = ({
<StyledTitle> <StyledTitle>
{formatStrategyName(strategy.name || '')} {formatStrategyName(strategy.name || '')}
<ConditionallyRender <ConditionallyRender
condition={strategy.name === 'flexibleRollout'} condition={
!addEditStrategy &&
strategy.name === 'flexibleRollout'
}
show={ show={
<Badge color='success' sx={{ marginLeft: '1rem' }}> <Badge color='success' sx={{ marginLeft: '1rem' }}>
{strategy.parameters?.rollout}% {strategy.parameters?.rollout}%
@ -357,7 +362,7 @@ export const FeatureStrategyForm = ({
} }
/> />
</StyledTitle> </StyledTitle>
{foundEnvironment ? ( {foundEnvironment && !addEditStrategy ? (
<StyledEnvironmentBox> <StyledEnvironmentBox>
<EnvironmentTypographyHeader> <EnvironmentTypographyHeader>
Environment: Environment:
@ -414,16 +419,6 @@ export const FeatureStrategyForm = ({
</Alert> </Alert>
} }
/> />
<ConditionallyRender
condition={!isChangeRequest}
show={
<FeatureStrategyEnabled
projectId={feature.project}
featureId={feature.name}
environmentId={environmentId}
/>
}
/>
</StyledAlertBox> </StyledAlertBox>
<StyledTabs value={tab} onChange={handleChange}> <StyledTabs value={tab} onChange={handleChange}>
@ -483,6 +478,17 @@ export const FeatureStrategyForm = ({
})) }))
} }
/> />
<ConditionallyRender
condition={!isChangeRequest}
show={
<FeatureStrategyEnabled
projectId={feature.project}
featureId={feature.name}
environmentId={environmentId}
/>
}
/>
</> </>
} }
/> />