mirror of
https://github.com/Unleash/unleash.git
synced 2025-11-10 01:19:53 +01:00
refactor: clean up dead code after removing newStrategyModal flag (#10926)
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
GitHub
parent
40d917d392
commit
9e7f68abc3
@ -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>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -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>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -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 > 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>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -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>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
Loading…
Reference in New Issue
Block a user