mirror of
https://github.com/Unleash/unleash.git
synced 2025-09-24 17:51:14 +02:00
chore: add newStrategyModal flag
This commit is contained in:
Nuno Góis
parent
9540ed6e3d
commit
28cbf7b19e
@ -6,7 +6,7 @@ import PermissionButton, {
|
||||
} from 'component/common/PermissionButton/PermissionButton';
|
||||
import { CREATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions';
|
||||
import { Dialog, styled } from '@mui/material';
|
||||
import { FeatureStrategyMenuCards } from './FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx';
|
||||
import { LegacyFeatureStrategyMenuCards } from './LegacyFeatureStrategyMenuCards/LegacyFeatureStrategyMenuCards.tsx';
|
||||
import { formatCreateStrategyPath } from '../FeatureStrategyCreate/FeatureStrategyCreate.tsx';
|
||||
import MoreVert from '@mui/icons-material/MoreVert';
|
||||
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
|
||||
@ -20,6 +20,7 @@ import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
|
||||
import { formatUnknownError } from 'utils/formatUnknownError';
|
||||
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
|
||||
import { ReleasePlanReviewDialog } from '../../FeatureView/FeatureOverview/ReleasePlan/ReleasePlanReviewDialog.tsx';
|
||||
import { FeatureStrategyMenuCards } from './FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx';
|
||||
|
||||
interface IFeatureStrategyMenuProps {
|
||||
label: string;
|
||||
@ -77,6 +78,7 @@ export const FeatureStrategyMenu = ({
|
||||
const { isEnterprise } = useUiConfig();
|
||||
const displayReleasePlanButton = isEnterprise();
|
||||
const crProtected = isChangeRequestConfigured(environmentId);
|
||||
const newStrategyModalEnabled = useUiFlag('newStrategyModal');
|
||||
|
||||
const onClose = () => {
|
||||
setIsStrategyMenuDialogOpen(false);
|
||||
@ -222,22 +224,41 @@ export const FeatureStrategyMenu = ({
|
||||
},
|
||||
}}
|
||||
>
|
||||
<FeatureStrategyMenuCards
|
||||
projectId={projectId}
|
||||
featureId={featureId}
|
||||
environmentId={environmentId}
|
||||
onlyReleasePlans={onlyReleasePlans}
|
||||
onAddReleasePlan={(template) => {
|
||||
setSelectedTemplate(template);
|
||||
addReleasePlan(template);
|
||||
}}
|
||||
onReviewReleasePlan={(template) => {
|
||||
setSelectedTemplate(template);
|
||||
setAddReleasePlanOpen(true);
|
||||
onClose();
|
||||
}}
|
||||
onClose={onClose}
|
||||
/>
|
||||
{newStrategyModalEnabled ? (
|
||||
<FeatureStrategyMenuCards
|
||||
projectId={projectId}
|
||||
featureId={featureId}
|
||||
environmentId={environmentId}
|
||||
onlyReleasePlans={onlyReleasePlans}
|
||||
onAddReleasePlan={(template) => {
|
||||
setSelectedTemplate(template);
|
||||
addReleasePlan(template);
|
||||
}}
|
||||
onReviewReleasePlan={(template) => {
|
||||
setSelectedTemplate(template);
|
||||
setAddReleasePlanOpen(true);
|
||||
onClose();
|
||||
}}
|
||||
onClose={onClose}
|
||||
/>
|
||||
) : (
|
||||
<LegacyFeatureStrategyMenuCards
|
||||
projectId={projectId}
|
||||
featureId={featureId}
|
||||
environmentId={environmentId}
|
||||
onlyReleasePlans={onlyReleasePlans}
|
||||
onAddReleasePlan={(template) => {
|
||||
setSelectedTemplate(template);
|
||||
addReleasePlan(template);
|
||||
}}
|
||||
onReviewReleasePlan={(template) => {
|
||||
setSelectedTemplate(template);
|
||||
setAddReleasePlanOpen(true);
|
||||
onClose();
|
||||
}}
|
||||
onClose={onClose}
|
||||
/>
|
||||
)}
|
||||
</Dialog>
|
||||
{selectedTemplate && (
|
||||
<ReleasePlanReviewDialog
|
||||
|
||||
@ -204,9 +204,7 @@ export const FeatureStrategyMenuCards = ({
|
||||
return (
|
||||
<GridContainer>
|
||||
<TitleRow>
|
||||
<TitleText variant='h2'>
|
||||
{onlyReleasePlans ? 'Select template' : 'Add configuration'}
|
||||
</TitleText>
|
||||
<TitleText variant='h2'>Add strategy</TitleText>
|
||||
<IconButton
|
||||
size='small'
|
||||
onClick={onClose}
|
||||
|
||||
@ -0,0 +1,294 @@
|
||||
import { Link, styled, Typography, Box, IconButton } from '@mui/material';
|
||||
import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies';
|
||||
import { FeatureStrategyMenuCard } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCard.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}>
|
||||
<FeatureStrategyMenuCard
|
||||
projectId={projectId}
|
||||
featureId={featureId}
|
||||
environmentId={environmentId}
|
||||
strategy={defaultStrategy}
|
||||
defaultStrategy
|
||||
onClose={onClose}
|
||||
/>
|
||||
</CardWrapper>
|
||||
{standardStrategies.map((strategy) => (
|
||||
<CardWrapper key={strategy.name}>
|
||||
<FeatureStrategyMenuCard
|
||||
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}>
|
||||
<FeatureStrategyMenuCard
|
||||
projectId={projectId}
|
||||
featureId={featureId}
|
||||
environmentId={
|
||||
environmentId
|
||||
}
|
||||
strategy={strategy}
|
||||
onClose={onClose}
|
||||
/>
|
||||
</CardWrapper>
|
||||
),
|
||||
)}
|
||||
</GridSection>
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</ScrollableContent>
|
||||
</GridContainer>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user