Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-11-10 01:19:53 +01:00
Code Issues Projects Releases Wiki Activity

refactor: clean up dead code after removing newStrategyModal flag (#10926)

Browse Source 
https://linear.app/unleash/issue/2-3885/clean-up-legacy-code

Cleans up dead code after removing the `newStrategyModal` feature flag.
This commit is contained in:
Nuno Góis 2025-11-06 08:48:01 +00:00 committed by GitHub
parent 40d917d392
commit 9e7f68abc3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 0 additions and 699 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,138 +0,0 @@
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(3),
'& > svg': {
width: theme.spacing(2.25),
height: theme.spacing(2.25),
fill: theme.palette.primary.main,
},
}));
const StyledName = styled(StringTruncator)(({ theme }) => ({
fontWeight: theme.typography.fontWeightBold,
fontSize: theme.typography.caption.fontSize,
display: 'block',
marginBottom: theme.spacing(0.5),
}));
const CardContent = styled('div')(({ theme }) => ({
width: '100%',
transition: 'opacity 0.2s ease-in-out',
}));
const HoverButtonsContainer = styled('div')(({ theme }) => ({
position: 'absolute',
background: theme.palette.background.paper,
padding: theme.spacing(1),
top: theme.spacing(1),
right: theme.spacing(1),
display: 'flex',
gap: theme.spacing(1),
opacity: 0,
transition: 'opacity 0.1s ease-in-out',
}));
const StyledCard = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
width: '100%',
height: '100%',
maxWidth: '30rem',
padding: theme.spacing(1.5, 2),
color: 'inherit',
textDecoration: 'inherit',
lineHeight: 1.25,
borderWidth: '1px',
borderStyle: 'solid',
borderColor: theme.palette.divider,
borderRadius: theme.spacing(1),
textAlign: 'left',
overflow: 'hidden',
position: 'relative',
'&:hover .cardContent, &:focus-within .cardContent': {
opacity: 0.5,
},
'&:hover .buttonContainer, &:focus-within .buttonContainer': {
opacity: 1,
},
}));
const StyledTopRow = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
width: '100%',
}));
interface IFeatureReleasePlanCardProps {
template: IReleasePlanTemplate;
onClick: () => void;
onPreviewClick: (e: React.MouseEvent) => void;
}
export const FeatureReleasePlanCard = ({
template: { name, description },
onClick,
onPreviewClick,
}: IFeatureReleasePlanCardProps) => {
const Icon = getFeatureStrategyIcon('releasePlanTemplate');
const handleUseClick = (e: React.MouseEvent) => {
e.stopPropagation();
onClick();
};
const handlePreviewClick = (e: React.MouseEvent) => {
e.stopPropagation();
onPreviewClick(e);
};
return (
<StyledCard>
<CardContent className='cardContent'>
<StyledTopRow>
<StyledIcon>
<Icon />
</StyledIcon>
<StyledName text={name} maxWidth='200' maxLength={25} />
</StyledTopRow>
<Truncator
lines={1}
title={description}
arrow
sx={{
fontSize: (theme) => theme.typography.caption.fontSize,
fontWeight: (theme) =>
theme.typography.fontWeightRegular,
width: '100%',
}}
>
{description}
</Truncator>
</CardContent>
<HoverButtonsContainer className='buttonContainer'>
<Button
variant='contained'
size='small'
onClick={handleUseClick}
tabIndex={0}
>
Use
</Button>
<Button
variant='outlined'
size='small'
onClick={handlePreviewClick}
>
Preview
</Button>
</HoverButtonsContainer>
</StyledCard>
);
};

119
frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/LegacyFeatureStrategyMenuCard/LegacyFeatureStrategyMenuCard.tsx
View File

@ -1,119 +0,0 @@
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';
import { Truncator } from 'component/common/Truncator/Truncator';
interface IFeatureStrategyMenuCardProps {
projectId: string;
featureId: string;
environmentId: string;
strategy: Pick<IStrategy, 'name' | 'displayName' | 'description'> &
Partial<IStrategy>;
defaultStrategy?: boolean;
onClose: () => void;
}
const StyledIcon = styled('div')(({ theme }) => ({
width: theme.spacing(3),
'& > svg': {
width: theme.spacing(2.25),
height: theme.spacing(2.25),
fill: theme.palette.primary.main,
},
}));
const StyledName = styled(StringTruncator)(({ theme }) => ({
fontWeight: theme.typography.fontWeightBold,
fontSize: theme.typography.caption.fontSize,
display: 'block',
marginBottom: theme.spacing(0.5),
}));
const StyledCard = styled(Link)(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
width: '100%',
maxWidth: '30rem',
padding: theme.spacing(1.5, 2),
color: 'inherit',
textDecoration: 'inherit',
lineHeight: 1.25,
borderWidth: '1px',
borderStyle: 'solid',
borderColor: theme.palette.divider,
borderRadius: theme.spacing(1),
overflow: 'hidden',
'&:hover, &:focus': {
borderColor: theme.palette.primary.main,
},
}));
const StyledTopRow = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
width: '100%',
}));
export const LegacyFeatureStrategyMenuCard = ({
projectId,
featureId,
environmentId,
strategy,
defaultStrategy,
onClose,
}: 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,
},
});
onClose();
};
return (
<StyledCard to={createStrategyPath} onClick={openStrategyCreationModal}>
<StyledTopRow>
<StyledIcon>
<StrategyIcon />
</StyledIcon>
<StyledName
text={strategy.displayName || strategyName}
maxWidth='200'
maxLength={25}
/>
</StyledTopRow>
<Truncator
lines={1}
title={strategy.description}
arrow
sx={{
fontSize: (theme) => theme.typography.caption.fontSize,
width: '100%',
}}
>
{strategy.description}
</Truncator>
</StyledCard>
);
};

294
frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/LegacyFeatureStrategyMenuCards/LegacyFeatureStrategyMenuCards.tsx
View File

@ -1,294 +0,0 @@
import { Link, styled, Typography, Box, IconButton } from '@mui/material';
import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies';
import { LegacyFeatureStrategyMenuCard } from '../LegacyFeatureStrategyMenuCard/LegacyFeatureStrategyMenuCard.tsx';
import { useReleasePlanTemplates } from 'hooks/api/getters/useReleasePlanTemplates/useReleasePlanTemplates';
import { FeatureReleasePlanCard } from '../FeatureReleasePlanCard/FeatureReleasePlanCard.tsx';
import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
import { useNavigate } from 'react-router-dom';
import CloseIcon from '@mui/icons-material/Close';
import FactCheckOutlinedIcon from '@mui/icons-material/FactCheckOutlined';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig.ts';
import { HelpIcon } from 'component/common/HelpIcon/HelpIcon.tsx';
interface IFeatureStrategyMenuCardsProps {
projectId: string;
featureId: string;
environmentId: string;
onlyReleasePlans: boolean;
onAddReleasePlan: (template: IReleasePlanTemplate) => void;
onReviewReleasePlan: (template: IReleasePlanTemplate) => void;
onClose: () => void;
}
const GridContainer = styled(Box)(() => ({
width: '100%',
display: 'flex',
flexDirection: 'column',
}));
const ScrollableContent = styled(Box)(({ theme }) => ({
width: '100%',
maxHeight: '70vh',
overflowY: 'auto',
padding: theme.spacing(4),
paddingTop: 0,
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(3),
}));
const GridSection = styled(Box)(({ theme }) => ({
display: 'grid',
gridTemplateColumns: 'repeat(2, 1fr)',
gap: theme.spacing(1.5),
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(4, 4, 2, 4),
}));
const TitleText = styled(Typography)(({ theme }) => ({
fontSize: theme.typography.body1.fontSize,
fontWeight: theme.typography.fontWeightBold,
margin: 0,
}));
const SectionTitle = styled(Box)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
gap: theme.spacing(0.5),
marginBottom: theme.spacing(1),
width: '100%',
}));
const StyledIcon = styled('span')(({ theme }) => ({
width: theme.spacing(3),
'& > svg': {
fill: theme.palette.primary.main,
width: theme.spacing(2.25),
height: theme.spacing(2.25),
},
display: 'flex',
alignItems: 'center',
}));
const EmptyStateContainer = styled(Box)(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'flex-start',
backgroundColor: theme.palette.neutral.light,
borderRadius: theme.shape.borderRadiusMedium,
padding: theme.spacing(3),
width: 'auto',
}));
const EmptyStateTitle = styled(Typography)(({ theme }) => ({
fontSize: theme.typography.caption.fontSize,
fontWeight: theme.typography.fontWeightBold,
marginBottom: theme.spacing(1),
display: 'flex',
alignItems: 'center',
}));
const EmptyStateDescription = styled(Typography)(({ theme }) => ({
fontSize: theme.typography.caption.fontSize,
color: theme.palette.text.secondary,
}));
const ClickableBoldText = styled(Link)(({ theme }) => ({
fontWeight: theme.typography.fontWeightBold,
cursor: 'pointer',
'&:hover': {
textDecoration: 'underline',
},
}));
export const LegacyFeatureStrategyMenuCards = ({
projectId,
featureId,
environmentId,
onlyReleasePlans,
onAddReleasePlan,
onReviewReleasePlan,
onClose,
}: IFeatureStrategyMenuCardsProps) => {
const { isEnterprise } = useUiConfig();
const { strategies } = useStrategies();
const { templates } = useReleasePlanTemplates();
const navigate = useNavigate();
const activeStrategies = strategies.filter(
(strategy) => !strategy.deprecated,
);
const standardStrategies = activeStrategies.filter(
(strategy) => !strategy.advanced && !strategy.editable,
);
const advancedAndCustomStrategies = activeStrategies.filter(
(strategy) => strategy.editable || strategy.advanced,
);
const defaultStrategy = {
name: 'flexibleRollout',
displayName: 'Default strategy',
description:
'This is the default strategy defined for this environment in the project',
};
const renderReleasePlanTemplates = () => {
if (!isEnterprise()) {
return null;
}
return (
<Box>
<SectionTitle>
<Typography color='inherit' variant='body2'>
Release templates
</Typography>
<HelpIcon
tooltip='Use a predefined template to roll out features to users'
size='16px'
/>
</SectionTitle>
{!templates.length ? (
<EmptyStateContainer>
<EmptyStateTitle>
<StyledIcon>
<FactCheckOutlinedIcon />
</StyledIcon>
Create your own release templates
</EmptyStateTitle>
<EmptyStateDescription>
Standardize your rollouts and save time by reusing
predefined strategies. Find release templates in the
side menu under{' '}
<ClickableBoldText
onClick={() => navigate('/release-templates')}
>
Configure &gt; Release templates
</ClickableBoldText>
</EmptyStateDescription>
</EmptyStateContainer>
) : (
<GridSection>
{templates.map((template) => (
<CardWrapper key={template.id}>
<FeatureReleasePlanCard
template={template}
onClick={() => onAddReleasePlan(template)}
onPreviewClick={() =>
onReviewReleasePlan(template)
}
/>
</CardWrapper>
))}
</GridSection>
)}
</Box>
);
};
return (
<GridContainer>
<TitleRow>
<TitleText variant='h2'>
{onlyReleasePlans ? 'Select template' : 'Add configuration'}
</TitleText>
<IconButton
size='small'
onClick={onClose}
edge='end'
aria-label='close'
>
<CloseIcon fontSize='small' />
</IconButton>
</TitleRow>
<ScrollableContent>
{onlyReleasePlans ? (
renderReleasePlanTemplates()
) : (
<>
<Box>
<SectionTitle>
<Typography color='inherit' variant='body2'>
Standard strategies
</Typography>
<HelpIcon
tooltip='Standard strategies let you enable a feature only for a specified audience. Select a starting setup, then customize your strategy with targeting and variants.'
size='16px'
/>
</SectionTitle>
<GridSection>
<CardWrapper key={defaultStrategy.name}>
<LegacyFeatureStrategyMenuCard
projectId={projectId}
featureId={featureId}
environmentId={environmentId}
strategy={defaultStrategy}
defaultStrategy
onClose={onClose}
/>
</CardWrapper>
{standardStrategies.map((strategy) => (
<CardWrapper key={strategy.name}>
<LegacyFeatureStrategyMenuCard
projectId={projectId}
featureId={featureId}
environmentId={environmentId}
strategy={strategy}
onClose={onClose}
/>
</CardWrapper>
))}
</GridSection>
</Box>
{renderReleasePlanTemplates()}
{advancedAndCustomStrategies.length > 0 && (
<Box>
<SectionTitle>
<Typography color='inherit' variant='body2'>
Custom and advanced strategies
</Typography>
<HelpIcon
tooltip='Advanced strategies let you target based on specific properties. Custom activation strategies let you define your own activation strategies to use with Unleash.'
size='16px'
/>
</SectionTitle>
<GridSection>
{advancedAndCustomStrategies.map(
(strategy) => (
<CardWrapper key={strategy.name}>
<LegacyFeatureStrategyMenuCard
projectId={projectId}
featureId={featureId}
environmentId={
environmentId
}
strategy={strategy}
onClose={onClose}
/>
</CardWrapper>
),
)}
</GridSection>
</Box>
)}
</>
)}
</ScrollableContent>
</GridContainer>
);
};

148
frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/LegacyReleasePlanReviewDialog.tsx
View File

@ -1,148 +0,0 @@
import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
import { ReleasePlan } from './ReleasePlan.tsx';
import { useReleasePlanPreview } from 'hooks/useReleasePlanPreview';
import {
styled,
Typography,
Alert,
Box,
IconButton,
Dialog,
DialogContent,
DialogActions,
Button,
} from '@mui/material';
import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
import { useFeatureReleasePlans } from 'hooks/api/getters/useFeatureReleasePlans/useFeatureReleasePlans';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import CloseIcon from '@mui/icons-material/Close';
const StyledDialog = styled(Dialog)(({ theme }) => ({
'& .MuiDialog-paper': {
borderRadius: theme.shape.borderRadiusLarge,
maxWidth: theme.spacing(85),
},
}));
const StyledDialogActions = styled(DialogActions)(({ theme }) => ({
padding: theme.spacing(2, 4, 4),
}));
const TopRow = styled(Box)(({ theme }) => ({
display: 'flex',
justifyContent: 'space-between',
marginBottom: theme.spacing(2),
}));
const BackButton = styled(Box)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
cursor: 'pointer',
}));
const StyledBackIcon = styled(ArrowBackIcon)(({ theme }) => ({
marginRight: theme.spacing(1),
color: theme.palette.primary.main,
display: 'flex',
alignSelf: 'center',
}));
const BackText = styled(Typography)(({ theme }) => ({
fontWeight: theme.typography.fontWeightMedium,
display: 'flex',
alignItems: 'center',
lineHeight: 1,
}));
interface IReleasePlanAddDialogProps {
open: boolean;
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
onConfirm: () => void;
template: IReleasePlanTemplate;
projectId: string;
featureName: string;
environment: string;
crProtected?: boolean;
}
export const LegacyReleasePlanReviewDialog = ({
open,
setOpen,
onConfirm,
template,
projectId,
featureName,
environment,
crProtected,
}: IReleasePlanAddDialogProps) => {
const { feature } = useFeature(projectId, featureName);
const { releasePlans } = useFeatureReleasePlans(
projectId,
featureName,
environment,
);
const activeReleasePlan = releasePlans[0];
const environmentData = feature?.environments.find(
({ name }) => name === environment,
);
const environmentEnabled = environmentData?.enabled;
const planPreview = useReleasePlanPreview(
template.id,
featureName,
environment,
);
const handleClose = () => setOpen(false);
return (
<StyledDialog open={open} onClose={handleClose} fullWidth maxWidth='md'>
<DialogContent>
<TopRow>
<BackButton onClick={handleClose}>
<StyledBackIcon />
<BackText variant='body2' color='primary'>
Go back
</BackText>
</BackButton>
<IconButton
size='small'
onClick={handleClose}
edge='end'
aria-label='close'
>
<CloseIcon fontSize='small' />
</IconButton>
</TopRow>
{activeReleasePlan && (
<Alert severity='error' sx={{ mb: 1 }}>
This feature environment currently has{' '}
<strong>{activeReleasePlan.name}</strong> -{' '}
<strong>{activeReleasePlan.milestones[0].name}</strong>
{environmentEnabled ? ' running' : ' paused'}. Adding a
new release plan will replace the existing release plan.
</Alert>
)}
<div>
<ReleasePlan plan={planPreview} readonly />
</div>
{crProtected && (
<Typography sx={{ mt: 4 }}>
<strong>Adding</strong> release template{' '}
<strong>{template?.name}</strong> to{' '}
<strong>{featureName}</strong> in{' '}
<strong>{environment}</strong>.
</Typography>
)}
</DialogContent>
<StyledDialogActions>
<Button variant='contained' color='primary' onClick={onConfirm}>
{crProtected ? 'Add suggestion to draft' : 'Use template'}
</Button>
</StyledDialogActions>
</StyledDialog>
);
};