1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-13 13:48:59 +02:00

feat: new feature strategy menu (#9678)

This commit is contained in:
Jaanus Sellin 2025-04-02 12:00:34 +03:00 committed by GitHub
parent 18346d1107
commit b44ac069ae
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 512 additions and 68 deletions

View File

@ -2,6 +2,7 @@ import { getFeatureStrategyIcon } from 'utils/strategyNames';
import StringTruncator from 'component/common/StringTruncator/StringTruncator'; import StringTruncator from 'component/common/StringTruncator/StringTruncator';
import { Button, styled } from '@mui/material'; import { Button, styled } from '@mui/material';
import type { IReleasePlanTemplate } from 'interfaces/releasePlans'; import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
import { Truncator } from 'component/common/Truncator/Truncator';
const StyledIcon = styled('div')(({ theme }) => ({ const StyledIcon = styled('div')(({ theme }) => ({
width: theme.spacing(4), width: theme.spacing(4),
@ -16,19 +17,22 @@ const StyledIcon = styled('div')(({ theme }) => ({
}, },
})); }));
const StyledDescription = styled('div')(({ theme }) => ({ const StyledContentContainer = styled('div')(() => ({
fontSize: theme.fontSizes.smallBody, overflow: 'hidden',
fontWeight: theme.fontWeight.medium, width: '100%',
})); }));
const StyledName = styled(StringTruncator)(({ theme }) => ({ const StyledName = styled(StringTruncator)(({ theme }) => ({
fontWeight: theme.fontWeight.bold, fontWeight: theme.typography.fontWeightBold,
display: 'block',
marginBottom: theme.spacing(0.5),
})); }));
const StyledCard = styled(Button)(({ theme }) => ({ const StyledCard = styled(Button)(({ theme }) => ({
display: 'grid', display: 'grid',
gridTemplateColumns: '3rem 1fr', gridTemplateColumns: '2.5rem 1fr',
width: '20rem', width: '100%',
maxWidth: '30rem',
padding: theme.spacing(2), padding: theme.spacing(2),
color: 'inherit', color: 'inherit',
textDecoration: 'inherit', textDecoration: 'inherit',
@ -38,6 +42,7 @@ const StyledCard = styled(Button)(({ theme }) => ({
borderColor: theme.palette.divider, borderColor: theme.palette.divider,
borderRadius: theme.spacing(1), borderRadius: theme.spacing(1),
textAlign: 'left', textAlign: 'left',
overflow: 'hidden',
'&:hover, &:focus': { '&:hover, &:focus': {
borderColor: theme.palette.primary.main, borderColor: theme.palette.primary.main,
}, },
@ -59,10 +64,22 @@ export const FeatureReleasePlanCard = ({
<StyledIcon> <StyledIcon>
<Icon /> <Icon />
</StyledIcon> </StyledIcon>
<div> <StyledContentContainer>
<StyledName text={name} maxWidth='200' maxLength={25} /> <StyledName text={name} maxWidth='200' maxLength={25} />
<StyledDescription>{description}</StyledDescription> <Truncator
</div> lines={1}
title={description}
arrow
sx={{
fontSize: (theme) => theme.typography.body2.fontSize,
fontWeight: (theme) =>
theme.typography.fontWeightRegular,
width: '100%',
}}
>
{description}
</Truncator>
</StyledContentContainer>
</StyledCard> </StyledCard>
); );
}; };

View File

@ -0,0 +1,68 @@
import { getFeatureStrategyIcon } from 'utils/strategyNames';
import StringTruncator from 'component/common/StringTruncator/StringTruncator';
import { Button, styled } from '@mui/material';
import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
const StyledIcon = styled('div')(({ theme }) => ({
width: theme.spacing(4),
height: 'auto',
'& > svg': {
fill: theme.palette.primary.main,
},
'& > div': {
height: theme.spacing(2),
marginLeft: '-.75rem',
color: theme.palette.primary.main,
},
}));
const StyledDescription = styled('div')(({ theme }) => ({
fontSize: theme.fontSizes.smallBody,
fontWeight: theme.fontWeight.medium,
}));
const StyledName = styled(StringTruncator)(({ theme }) => ({
fontWeight: theme.fontWeight.bold,
}));
const StyledCard = styled(Button)(({ theme }) => ({
display: 'grid',
gridTemplateColumns: '3rem 1fr',
width: '20rem',
padding: theme.spacing(2),
color: 'inherit',
textDecoration: 'inherit',
lineHeight: 1.25,
borderWidth: '1px',
borderStyle: 'solid',
borderColor: theme.palette.divider,
borderRadius: theme.spacing(1),
textAlign: 'left',
'&:hover, &:focus': {
borderColor: theme.palette.primary.main,
},
}));
interface IFeatureReleasePlanCardProps {
template: IReleasePlanTemplate;
onClick: () => void;
}
export const OldFeatureReleasePlanCard = ({
template: { name, description },
onClick,
}: IFeatureReleasePlanCardProps) => {
const Icon = getFeatureStrategyIcon('releasePlanTemplate');
return (
<StyledCard onClick={onClick}>
<StyledIcon>
<Icon />
</StyledIcon>
<div>
<StyledName text={name} maxWidth='200' maxLength={25} />
<StyledDescription>{description}</StyledDescription>
</div>
</StyledCard>
);
};

View File

@ -21,6 +21,7 @@ import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
import { formatUnknownError } from 'utils/formatUnknownError'; import { formatUnknownError } from 'utils/formatUnknownError';
import { useUiFlag } from 'hooks/useUiFlag'; import { useUiFlag } from 'hooks/useUiFlag';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { OldFeatureStrategyMenuCards } from './FeatureStrategyMenuCards/OldFeatureStrategyMenuCards';
interface IFeatureStrategyMenuProps { interface IFeatureStrategyMenuProps {
label: string; label: string;
@ -75,6 +76,7 @@ export const FeatureStrategyMenu = ({
const { addReleasePlanToFeature } = useReleasePlansApi(); const { addReleasePlanToFeature } = useReleasePlansApi();
const { isOss } = useUiConfig(); const { isOss } = useUiConfig();
const releasePlansEnabled = useUiFlag('releasePlans'); const releasePlansEnabled = useUiFlag('releasePlans');
const newStrategyDropdownEnabled = useUiFlag('newStrategyDropdown');
const displayReleasePlanButton = !isOss() && releasePlansEnabled; const displayReleasePlanButton = !isOss() && releasePlansEnabled;
const crProtected = const crProtected =
releasePlansEnabled && isChangeRequestConfigured(environmentId); releasePlansEnabled && isChangeRequestConfigured(environmentId);
@ -223,19 +225,36 @@ export const FeatureStrategyMenu = ({
PaperProps={{ PaperProps={{
sx: (theme) => ({ sx: (theme) => ({
paddingBottom: theme.spacing(1), paddingBottom: theme.spacing(1),
width: 'auto',
maxWidth: '95vw',
overflow: 'hidden',
}), }),
}} }}
> >
<FeatureStrategyMenuCards {newStrategyDropdownEnabled ? (
projectId={projectId} <FeatureStrategyMenuCards
featureId={featureId} projectId={projectId}
environmentId={environmentId} featureId={featureId}
onlyReleasePlans={onlyReleasePlans} environmentId={environmentId}
onAddReleasePlan={(template) => { onlyReleasePlans={onlyReleasePlans}
setSelectedTemplate(template); onAddReleasePlan={(template) => {
setAddReleasePlanOpen(true); setSelectedTemplate(template);
}} setAddReleasePlanOpen(true);
/> }}
onClose={onClose}
/>
) : (
<OldFeatureStrategyMenuCards
projectId={projectId}
featureId={featureId}
environmentId={environmentId}
onlyReleasePlans={onlyReleasePlans}
onAddReleasePlan={(template) => {
setSelectedTemplate(template);
setAddReleasePlanOpen(true);
}}
/>
)}
</Popover> </Popover>
{selectedTemplate && ( {selectedTemplate && (
<ReleasePlanAddDialog <ReleasePlanAddDialog

View File

@ -8,6 +8,7 @@ import { formatCreateStrategyPath } from 'component/feature/FeatureStrategy/Feat
import StringTruncator from 'component/common/StringTruncator/StringTruncator'; import StringTruncator from 'component/common/StringTruncator/StringTruncator';
import { styled } from '@mui/material'; import { styled } from '@mui/material';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
import { Truncator } from 'component/common/Truncator/Truncator';
interface IFeatureStrategyMenuCardProps { interface IFeatureStrategyMenuCardProps {
projectId: string; projectId: string;
@ -33,18 +34,22 @@ const StyledIcon = styled('div')(({ theme }) => ({
}, },
})); }));
const StyledDescription = styled('div')(({ theme }) => ({ const StyledContentContainer = styled('div')(() => ({
fontSize: theme.fontSizes.smallBody, overflow: 'hidden',
width: '100%',
})); }));
const StyledName = styled(StringTruncator)(({ theme }) => ({ const StyledName = styled(StringTruncator)(({ theme }) => ({
fontWeight: theme.fontWeight.bold, fontWeight: theme.typography.fontWeightBold,
display: 'block',
marginBottom: theme.spacing(0.5),
})); }));
const StyledCard = styled(Link)(({ theme }) => ({ const StyledCard = styled(Link)(({ theme }) => ({
display: 'grid', display: 'grid',
gridTemplateColumns: '3rem 1fr', gridTemplateColumns: '2.5rem 1fr',
width: '20rem', width: '100%',
maxWidth: '30rem',
padding: theme.spacing(2), padding: theme.spacing(2),
color: 'inherit', color: 'inherit',
textDecoration: 'inherit', textDecoration: 'inherit',
@ -53,6 +58,7 @@ const StyledCard = styled(Link)(({ theme }) => ({
borderStyle: 'solid', borderStyle: 'solid',
borderColor: theme.palette.divider, borderColor: theme.palette.divider,
borderRadius: theme.spacing(1), borderRadius: theme.spacing(1),
overflow: 'hidden',
'&:hover, &:focus': { '&:hover, &:focus': {
borderColor: theme.palette.primary.main, borderColor: theme.palette.primary.main,
}, },
@ -90,14 +96,24 @@ export const FeatureStrategyMenuCard = ({
<StyledIcon> <StyledIcon>
<StrategyIcon /> <StrategyIcon />
</StyledIcon> </StyledIcon>
<div> <StyledContentContainer>
<StyledName <StyledName
text={strategy.displayName || strategyName} text={strategy.displayName || strategyName}
maxWidth='200' maxWidth='200'
maxLength={25} maxLength={25}
/> />
<StyledDescription>{strategy.description}</StyledDescription> <Truncator
</div> lines={1}
title={strategy.description}
arrow
sx={{
fontSize: (theme) => theme.typography.body2.fontSize,
width: '100%',
}}
>
{strategy.description}
</Truncator>
</StyledContentContainer>
</StyledCard> </StyledCard>
); );
}; };

View File

@ -0,0 +1,103 @@
import type { IStrategy } from 'interfaces/strategy';
import { Link } from 'react-router-dom';
import {
getFeatureStrategyIcon,
formatStrategyName,
} from 'utils/strategyNames';
import { formatCreateStrategyPath } from 'component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate';
import StringTruncator from 'component/common/StringTruncator/StringTruncator';
import { styled } from '@mui/material';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
interface IFeatureStrategyMenuCardProps {
projectId: string;
featureId: string;
environmentId: string;
strategy: Pick<IStrategy, 'name' | 'displayName' | 'description'> &
Partial<IStrategy>;
defaultStrategy?: boolean;
}
const StyledIcon = styled('div')(({ theme }) => ({
width: theme.spacing(4),
height: 'auto',
'& > svg': {
// Styling for SVG icons.
fill: theme.palette.primary.main,
},
'& > div': {
// Styling for the Rollout icon.
height: theme.spacing(2),
marginLeft: '-.75rem',
color: theme.palette.primary.main,
},
}));
const StyledDescription = styled('div')(({ theme }) => ({
fontSize: theme.fontSizes.smallBody,
}));
const StyledName = styled(StringTruncator)(({ theme }) => ({
fontWeight: theme.fontWeight.bold,
}));
const StyledCard = styled(Link)(({ theme }) => ({
display: 'grid',
gridTemplateColumns: '3rem 1fr',
width: '20rem',
padding: theme.spacing(2),
color: 'inherit',
textDecoration: 'inherit',
lineHeight: 1.25,
borderWidth: '1px',
borderStyle: 'solid',
borderColor: theme.palette.divider,
borderRadius: theme.spacing(1),
'&:hover, &:focus': {
borderColor: theme.palette.primary.main,
},
}));
export const OldFeatureStrategyMenuCard = ({
projectId,
featureId,
environmentId,
strategy,
defaultStrategy,
}: IFeatureStrategyMenuCardProps) => {
const StrategyIcon = getFeatureStrategyIcon(strategy.name);
const strategyName = formatStrategyName(strategy.name);
const { trackEvent } = usePlausibleTracker();
const createStrategyPath = formatCreateStrategyPath(
projectId,
featureId,
environmentId,
strategy.name,
defaultStrategy,
);
const openStrategyCreationModal = () => {
trackEvent('strategy-add', {
props: {
buttonTitle: strategy.displayName || strategyName,
},
});
};
return (
<StyledCard to={createStrategyPath} onClick={openStrategyCreationModal}>
<StyledIcon>
<StrategyIcon />
</StyledIcon>
<div>
<StyledName
text={strategy.displayName || strategyName}
maxWidth='200'
maxLength={25}
/>
<StyledDescription>{strategy.description}</StyledDescription>
</div>
</StyledCard>
);
};

View File

@ -1,4 +1,4 @@
import { Link, List, ListItem, styled, Typography } from '@mui/material'; import { Link, styled, Typography, Box, IconButton } from '@mui/material';
import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies'; import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies';
import { FeatureStrategyMenuCard } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCard'; import { FeatureStrategyMenuCard } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCard';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@ -6,6 +6,7 @@ import { useReleasePlanTemplates } from 'hooks/api/getters/useReleasePlanTemplat
import { FeatureReleasePlanCard } from '../FeatureReleasePlanCard/FeatureReleasePlanCard'; import { FeatureReleasePlanCard } from '../FeatureReleasePlanCard/FeatureReleasePlanCard';
import type { IReleasePlanTemplate } from 'interfaces/releasePlans'; import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import CloseIcon from '@mui/icons-material/Close';
interface IFeatureStrategyMenuCardsProps { interface IFeatureStrategyMenuCardsProps {
projectId: string; projectId: string;
@ -13,11 +14,13 @@ interface IFeatureStrategyMenuCardsProps {
environmentId: string; environmentId: string;
onlyReleasePlans: boolean; onlyReleasePlans: boolean;
onAddReleasePlan: (template: IReleasePlanTemplate) => void; onAddReleasePlan: (template: IReleasePlanTemplate) => void;
onClose?: () => void;
} }
const StyledTypography = styled(Typography)(({ theme }) => ({ const StyledTypography = styled(Typography)(({ theme }) => ({
fontSize: theme.fontSizes.smallBody, fontSize: theme.fontSizes.smallBody,
padding: theme.spacing(1, 2), padding: theme.spacing(1, 2),
width: '100%',
})); }));
const StyledLink = styled(Link)(({ theme }) => ({ const StyledLink = styled(Link)(({ theme }) => ({
@ -25,12 +28,43 @@ const StyledLink = styled(Link)(({ theme }) => ({
cursor: 'pointer', cursor: 'pointer',
})) as typeof Link; })) as typeof Link;
const GridContainer = styled(Box)(() => ({
width: '100%',
}));
const GridSection = styled(Box)(({ theme }) => ({
display: 'grid',
gridTemplateColumns: 'repeat(2, 1fr)',
gap: theme.spacing(1.5),
padding: theme.spacing(0, 2),
width: '100%',
}));
const CardWrapper = styled(Box)(() => ({
width: '100%',
minWidth: 0,
}));
const TitleRow = styled(Box)(({ theme }) => ({
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: theme.spacing(1, 2),
}));
const TitleText = styled(Typography)(({ theme }) => ({
fontSize: theme.typography.body1.fontSize,
fontWeight: theme.typography.fontWeightBold,
margin: 0,
}));
export const FeatureStrategyMenuCards = ({ export const FeatureStrategyMenuCards = ({
projectId, projectId,
featureId, featureId,
environmentId, environmentId,
onlyReleasePlans, onlyReleasePlans,
onAddReleasePlan, onAddReleasePlan,
onClose,
}: IFeatureStrategyMenuCardsProps) => { }: IFeatureStrategyMenuCardsProps) => {
const { strategies } = useStrategies(); const { strategies } = useStrategies();
const { templates } = useReleasePlanTemplates(); const { templates } = useReleasePlanTemplates();
@ -52,21 +86,38 @@ export const FeatureStrategyMenuCards = ({
'This is the default strategy defined for this environment in the project', 'This is the default strategy defined for this environment in the project',
}; };
return ( return (
<List dense> <GridContainer>
<TitleRow>
<TitleText variant='h2'>
{onlyReleasePlans ? 'Select template' : 'Select strategy'}
</TitleText>
{onClose && (
<IconButton
size='small'
onClick={onClose}
edge='end'
aria-label='close'
>
<CloseIcon fontSize='small' />
</IconButton>
)}
</TitleRow>
{allStrategies ? ( {allStrategies ? (
<> <>
<StyledTypography color='textSecondary'> <StyledTypography color='textSecondary'>
Default strategy for {environmentId} environment Default strategy for {environmentId} environment
</StyledTypography> </StyledTypography>
<ListItem key={defaultStrategy.name}> <GridSection>
<FeatureStrategyMenuCard <CardWrapper key={defaultStrategy.name}>
projectId={projectId} <FeatureStrategyMenuCard
featureId={featureId} projectId={projectId}
environmentId={environmentId} featureId={featureId}
strategy={defaultStrategy} environmentId={environmentId}
defaultStrategy={true} strategy={defaultStrategy}
/> defaultStrategy={true}
</ListItem> />
</CardWrapper>
</GridSection>
</> </>
) : null} ) : null}
<ConditionallyRender <ConditionallyRender
@ -76,14 +127,18 @@ export const FeatureStrategyMenuCards = ({
<StyledTypography color='textSecondary'> <StyledTypography color='textSecondary'>
Release templates Release templates
</StyledTypography> </StyledTypography>
{templates.map((template) => ( <GridSection>
<ListItem key={template.id}> {templates.map((template) => (
<FeatureReleasePlanCard <CardWrapper key={template.id}>
template={template} <FeatureReleasePlanCard
onClick={() => onAddReleasePlan(template)} template={template}
/> onClick={() =>
</ListItem> onAddReleasePlan(template)
))} }
/>
</CardWrapper>
))}
</GridSection>
</> </>
} }
/> />
@ -118,16 +173,18 @@ export const FeatureStrategyMenuCards = ({
<StyledTypography color='textSecondary'> <StyledTypography color='textSecondary'>
Predefined strategy types Predefined strategy types
</StyledTypography> </StyledTypography>
{preDefinedStrategies.map((strategy) => ( <GridSection>
<ListItem key={strategy.name}> {preDefinedStrategies.map((strategy) => (
<FeatureStrategyMenuCard <CardWrapper key={strategy.name}>
projectId={projectId} <FeatureStrategyMenuCard
featureId={featureId} projectId={projectId}
environmentId={environmentId} featureId={featureId}
strategy={strategy} environmentId={environmentId}
/> strategy={strategy}
</ListItem> />
))} </CardWrapper>
))}
</GridSection>
<ConditionallyRender <ConditionallyRender
condition={customStrategies.length > 0} condition={customStrategies.length > 0}
show={ show={
@ -135,21 +192,23 @@ export const FeatureStrategyMenuCards = ({
<StyledTypography color='textSecondary'> <StyledTypography color='textSecondary'>
Custom strategies Custom strategies
</StyledTypography> </StyledTypography>
{customStrategies.map((strategy) => ( <GridSection>
<ListItem key={strategy.name}> {customStrategies.map((strategy) => (
<FeatureStrategyMenuCard <CardWrapper key={strategy.name}>
projectId={projectId} <FeatureStrategyMenuCard
featureId={featureId} projectId={projectId}
environmentId={environmentId} featureId={featureId}
strategy={strategy} environmentId={environmentId}
/> strategy={strategy}
</ListItem> />
))} </CardWrapper>
))}
</GridSection>
</> </>
} }
/> />
</> </>
) : null} ) : null}
</List> </GridContainer>
); );
}; };

View File

@ -0,0 +1,155 @@
import { Link, List, ListItem, styled, Typography } from '@mui/material';
import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { useReleasePlanTemplates } from 'hooks/api/getters/useReleasePlanTemplates/useReleasePlanTemplates';
import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
import { useNavigate } from 'react-router-dom';
import { OldFeatureStrategyMenuCard } from '../FeatureStrategyMenuCard/OldFeatureStrategyMenuCard';
import { OldFeatureReleasePlanCard } from '../FeatureReleasePlanCard/OldFeatureReleasePlanCard';
interface IFeatureStrategyMenuCardsProps {
projectId: string;
featureId: string;
environmentId: string;
onlyReleasePlans: boolean;
onAddReleasePlan: (template: IReleasePlanTemplate) => void;
}
const StyledTypography = styled(Typography)(({ theme }) => ({
fontSize: theme.fontSizes.smallBody,
padding: theme.spacing(1, 2),
}));
const StyledLink = styled(Link)(({ theme }) => ({
fontSize: theme.fontSizes.smallBody,
cursor: 'pointer',
})) as typeof Link;
export const OldFeatureStrategyMenuCards = ({
projectId,
featureId,
environmentId,
onlyReleasePlans,
onAddReleasePlan,
}: IFeatureStrategyMenuCardsProps) => {
const { strategies } = useStrategies();
const { templates } = useReleasePlanTemplates();
const navigate = useNavigate();
const allStrategies = !onlyReleasePlans;
const preDefinedStrategies = strategies.filter(
(strategy) => !strategy.deprecated && !strategy.editable,
);
const customStrategies = strategies.filter(
(strategy) => !strategy.deprecated && strategy.editable,
);
const defaultStrategy = {
name: 'flexibleRollout',
displayName: 'Default strategy',
description:
'This is the default strategy defined for this environment in the project',
};
return (
<List dense>
{allStrategies ? (
<>
<StyledTypography color='textSecondary'>
Default strategy for {environmentId} environment
</StyledTypography>
<ListItem key={defaultStrategy.name}>
<OldFeatureStrategyMenuCard
projectId={projectId}
featureId={featureId}
environmentId={environmentId}
strategy={defaultStrategy}
defaultStrategy={true}
/>
</ListItem>
</>
) : null}
<ConditionallyRender
condition={templates.length > 0}
show={
<>
<StyledTypography color='textSecondary'>
Release templates
</StyledTypography>
{templates.map((template) => (
<ListItem key={template.id}>
<OldFeatureReleasePlanCard
template={template}
onClick={() => onAddReleasePlan(template)}
/>
</ListItem>
))}
</>
}
/>
<ConditionallyRender
condition={templates.length === 0 && onlyReleasePlans}
show={
<>
<StyledTypography
color='textSecondary'
sx={{
padding: (theme) => theme.spacing(1, 2, 0, 2),
}}
>
<p>No templates created.</p>
<p>
Go to&nbsp;
<StyledLink
onClick={() =>
navigate('/release-templates')
}
>
Release templates
</StyledLink>
&nbsp;to get started
</p>
</StyledTypography>
</>
}
/>
{allStrategies ? (
<>
<StyledTypography color='textSecondary'>
Predefined strategy types
</StyledTypography>
{preDefinedStrategies.map((strategy) => (
<ListItem key={strategy.name}>
<OldFeatureStrategyMenuCard
projectId={projectId}
featureId={featureId}
environmentId={environmentId}
strategy={strategy}
/>
</ListItem>
))}
<ConditionallyRender
condition={customStrategies.length > 0}
show={
<>
<StyledTypography color='textSecondary'>
Custom strategies
</StyledTypography>
{customStrategies.map((strategy) => (
<ListItem key={strategy.name}>
<OldFeatureStrategyMenuCard
projectId={projectId}
featureId={featureId}
environmentId={environmentId}
strategy={strategy}
/>
</ListItem>
))}
</>
}
/>
</>
) : null}
</List>
);
};

View File

@ -91,6 +91,7 @@ export type UiFlags = {
adminNavUI?: boolean; adminNavUI?: boolean;
tagTypeColor?: boolean; tagTypeColor?: boolean;
globalChangeRequestConfig?: boolean; globalChangeRequestConfig?: boolean;
newStrategyDropdown?: boolean;
}; };
export interface IVersionInfo { export interface IVersionInfo {

View File

@ -64,7 +64,8 @@ export type IFlagKey =
| 'simplifyDisableFeature' | 'simplifyDisableFeature'
| 'adminNavUI' | 'adminNavUI'
| 'tagTypeColor' | 'tagTypeColor'
| 'globalChangeRequestConfig'; | 'globalChangeRequestConfig'
| 'newStrategyDropdown';
export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>; export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
@ -309,6 +310,10 @@ const flags: IFlags = {
process.env.UNLEASH_EXPERIMENTAL_GLOBAL_CHANGE_REQUEST_CONFIG, process.env.UNLEASH_EXPERIMENTAL_GLOBAL_CHANGE_REQUEST_CONFIG,
false, false,
), ),
newStrategyDropdown: parseEnvVarBoolean(
process.env.UNLEASH_EXPERIMENTAL_NEW_STRATEGY_DROPDOWN,
false,
),
}; };
export const defaultExperimentalOptions: IExperimentalOptions = { export const defaultExperimentalOptions: IExperimentalOptions = {

View File

@ -58,6 +58,7 @@ process.nextTick(async () => {
simplifyDisableFeature: true, simplifyDisableFeature: true,
adminNavUI: true, adminNavUI: true,
tagTypeColor: true, tagTypeColor: true,
newStrategyDropdown: true,
}, },
}, },
authentication: { authentication: {