Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-06-23 01:16:27 +02:00
Code Issues Projects Releases Wiki Activity

feat: new feature strategy menu (#9678)

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx
View File

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

68
frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/OldFeatureReleasePlanCard.tsx Normal file
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>
);
};

39
frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx
View File

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

32
frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx
View File

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

103
frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/OldFeatureStrategyMenuCard.tsx Normal file
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>
);
};

139
frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx
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 { FeatureStrategyMenuCard } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCard';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@ -6,6 +6,7 @@ import { useReleasePlanTemplates } from 'hooks/api/getters/useReleasePlanTemplat
import { FeatureReleasePlanCard } from '../FeatureReleasePlanCard/FeatureReleasePlanCard';
import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
import { useNavigate } from 'react-router-dom';
import CloseIcon from '@mui/icons-material/Close';
interface IFeatureStrategyMenuCardsProps {
projectId: string;
@ -13,11 +14,13 @@ interface IFeatureStrategyMenuCardsProps {
environmentId: string;
onlyReleasePlans: boolean;
onAddReleasePlan: (template: IReleasePlanTemplate) => void;
onClose?: () => void;
}
const StyledTypography = styled(Typography)(({ theme }) => ({
fontSize: theme.fontSizes.smallBody,
padding: theme.spacing(1, 2),
width: '100%',
}));
const StyledLink = styled(Link)(({ theme }) => ({
@ -25,12 +28,43 @@ const StyledLink = styled(Link)(({ theme }) => ({
cursor: 'pointer',
})) 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 = ({
projectId,
featureId,
environmentId,
onlyReleasePlans,
onAddReleasePlan,
onClose,
}: IFeatureStrategyMenuCardsProps) => {
const { strategies } = useStrategies();
const { templates } = useReleasePlanTemplates();
@ -52,21 +86,38 @@ export const FeatureStrategyMenuCards = ({
'This is the default strategy defined for this environment in the project',
};
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 ? (
<>
<StyledTypography color='textSecondary'>
Default strategy for {environmentId} environment
</StyledTypography>
<ListItem key={defaultStrategy.name}>
<FeatureStrategyMenuCard
projectId={projectId}
featureId={featureId}
environmentId={environmentId}
strategy={defaultStrategy}
defaultStrategy={true}
/>
</ListItem>
<GridSection>
<CardWrapper key={defaultStrategy.name}>
<FeatureStrategyMenuCard
projectId={projectId}
featureId={featureId}
environmentId={environmentId}
strategy={defaultStrategy}
defaultStrategy={true}
/>
</CardWrapper>
</GridSection>
</>
) : null}
<ConditionallyRender
@ -76,14 +127,18 @@ export const FeatureStrategyMenuCards = ({
<StyledTypography color='textSecondary'>
Release templates
</StyledTypography>
{templates.map((template) => (
<ListItem key={template.id}>
<FeatureReleasePlanCard
template={template}
onClick={() => onAddReleasePlan(template)}
/>
</ListItem>
))}
<GridSection>
{templates.map((template) => (
<CardWrapper key={template.id}>
<FeatureReleasePlanCard
template={template}
onClick={() =>
onAddReleasePlan(template)
}
/>
</CardWrapper>
))}
</GridSection>
</>
}
/>
@ -118,16 +173,18 @@ export const FeatureStrategyMenuCards = ({
<StyledTypography color='textSecondary'>
Predefined strategy types
</StyledTypography>
{preDefinedStrategies.map((strategy) => (
<ListItem key={strategy.name}>
<FeatureStrategyMenuCard
projectId={projectId}
featureId={featureId}
environmentId={environmentId}
strategy={strategy}
/>
</ListItem>
))}
<GridSection>
{preDefinedStrategies.map((strategy) => (
<CardWrapper key={strategy.name}>
<FeatureStrategyMenuCard
projectId={projectId}
featureId={featureId}
environmentId={environmentId}
strategy={strategy}
/>
</CardWrapper>
))}
</GridSection>
<ConditionallyRender
condition={customStrategies.length > 0}
show={
@ -135,21 +192,23 @@ export const FeatureStrategyMenuCards = ({
<StyledTypography color='textSecondary'>
Custom strategies
</StyledTypography>
{customStrategies.map((strategy) => (
<ListItem key={strategy.name}>
<FeatureStrategyMenuCard
projectId={projectId}
featureId={featureId}
environmentId={environmentId}
strategy={strategy}
/>
</ListItem>
))}
<GridSection>
{customStrategies.map((strategy) => (
<CardWrapper key={strategy.name}>
<FeatureStrategyMenuCard
projectId={projectId}
featureId={featureId}
environmentId={environmentId}
strategy={strategy}
/>
</CardWrapper>
))}
</GridSection>
</>
}
/>
</>
) : null}
</List>
</GridContainer>
);
};

155
frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/OldFeatureStrategyMenuCards.tsx Normal file
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>
);
};

1
frontend/src/interfaces/uiConfig.ts
View File

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

7
src/lib/types/experimental.ts
View File

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

1
src/server-dev.ts
View File

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