mirror of
https://github.com/Unleash/unleash.git
synced 2025-09-19 17:52:45 +02:00
chore: new add strategy modal design (#10633)
https://linear.app/unleash/issue/2-3870/new-modal-design New "add strategy" modal base design. We're still missing a few details, like the new card design and the filters at the top, but those will come in follow-up PRs. ### New layout <img width="986" height="597" alt="image" src="https://github.com/user-attachments/assets/2bc83117-97a8-4b59-a187-73ef9a7d0469" /> ### Default strategy tooltip, with a link to the default strategy settings <img width="326" height="119" alt="image" src="https://github.com/user-attachments/assets/45da60cb-088b-4b6e-bead-f9ef13a2540b" /> ### Default strategy with a custom title <img width="318" height="163" alt="image" src="https://github.com/user-attachments/assets/9c9862db-f21d-409f-8dc1-63673f00ba2e" />
This commit is contained in:
Nuno Góis
GitHub
parent
edaea80f0c
commit
2cd8135988
@ -1,72 +1,55 @@
|
||||
import { Link, styled, Typography, Box, IconButton } from '@mui/material';
|
||||
import { styled, Typography, Box, IconButton, Button } 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 { Link as RouterLink } 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';
|
||||
import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview.ts';
|
||||
import { useState } from 'react';
|
||||
|
||||
interface IFeatureStrategyMenuCardsProps {
|
||||
projectId: string;
|
||||
featureId: string;
|
||||
environmentId: string;
|
||||
onlyReleasePlans: boolean;
|
||||
onAddReleasePlan: (template: IReleasePlanTemplate) => void;
|
||||
onReviewReleasePlan: (template: IReleasePlanTemplate) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
const RELEASE_TEMPLATE_DISPLAY_LIMIT = 5;
|
||||
|
||||
const GridContainer = styled(Box)(() => ({
|
||||
const StyledContainer = styled(Box)(() => ({
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}));
|
||||
|
||||
const ScrollableContent = styled(Box)(({ theme }) => ({
|
||||
const StyledScrollableContent = styled(Box)(({ theme }) => ({
|
||||
width: '100%',
|
||||
maxHeight: '70vh',
|
||||
maxHeight: theme.spacing(62),
|
||||
overflowY: 'auto',
|
||||
padding: theme.spacing(4),
|
||||
paddingTop: 0,
|
||||
paddingTop: theme.spacing(1),
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: theme.spacing(3),
|
||||
gap: theme.spacing(5),
|
||||
}));
|
||||
|
||||
const GridSection = styled(Box)(({ theme }) => ({
|
||||
const StyledGrid = styled(Box)(({ theme }) => ({
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(2, 1fr)',
|
||||
gap: theme.spacing(1.5),
|
||||
gridTemplateColumns: 'repeat(3, 1fr)',
|
||||
gap: theme.spacing(2),
|
||||
width: '100%',
|
||||
}));
|
||||
|
||||
const CardWrapper = styled(Box)(() => ({
|
||||
width: '100%',
|
||||
minWidth: 0,
|
||||
}));
|
||||
|
||||
const TitleRow = styled(Box)(({ theme }) => ({
|
||||
const StyledHeader = 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 }) => ({
|
||||
const StyledSectionHeader = styled(Box)(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: theme.spacing(0.5),
|
||||
marginBottom: theme.spacing(1),
|
||||
marginBottom: theme.spacing(0.5),
|
||||
width: '100%',
|
||||
}));
|
||||
|
||||
@ -81,7 +64,7 @@ const StyledIcon = styled('span')(({ theme }) => ({
|
||||
alignItems: 'center',
|
||||
}));
|
||||
|
||||
const EmptyStateContainer = styled(Box)(({ theme }) => ({
|
||||
const StyledNoTemplatesContainer = styled(Box)(({ theme }) => ({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
@ -92,7 +75,7 @@ const EmptyStateContainer = styled(Box)(({ theme }) => ({
|
||||
width: 'auto',
|
||||
}));
|
||||
|
||||
const EmptyStateTitle = styled(Typography)(({ theme }) => ({
|
||||
const StyledNoTemplatesTitle = styled(Typography)(({ theme }) => ({
|
||||
fontSize: theme.typography.caption.fontSize,
|
||||
fontWeight: theme.typography.fontWeightBold,
|
||||
marginBottom: theme.spacing(1),
|
||||
@ -100,24 +83,39 @@ const EmptyStateTitle = styled(Typography)(({ theme }) => ({
|
||||
alignItems: 'center',
|
||||
}));
|
||||
|
||||
const EmptyStateDescription = styled(Typography)(({ theme }) => ({
|
||||
const StyledNoTemplatesDescription = styled(Typography)(({ theme }) => ({
|
||||
fontSize: theme.typography.caption.fontSize,
|
||||
color: theme.palette.text.secondary,
|
||||
}));
|
||||
|
||||
const ClickableBoldText = styled(Link)(({ theme }) => ({
|
||||
fontWeight: theme.typography.fontWeightBold,
|
||||
cursor: 'pointer',
|
||||
const StyledLink = styled(RouterLink)({
|
||||
textDecoration: 'none',
|
||||
'&:hover': {
|
||||
textDecoration: 'underline',
|
||||
},
|
||||
}));
|
||||
});
|
||||
|
||||
const StyledViewAllTemplates = styled(Box)({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: '100%',
|
||||
});
|
||||
|
||||
interface IFeatureStrategyMenuCardsProps {
|
||||
projectId: string;
|
||||
featureId: string;
|
||||
environmentId: string;
|
||||
onlyReleasePlans: boolean;
|
||||
onAddReleasePlan: (template: IReleasePlanTemplate) => void;
|
||||
onReviewReleasePlan: (template: IReleasePlanTemplate) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const FeatureStrategyMenuCards = ({
|
||||
projectId,
|
||||
featureId,
|
||||
environmentId,
|
||||
onlyReleasePlans,
|
||||
onAddReleasePlan,
|
||||
onReviewReleasePlan,
|
||||
onClose,
|
||||
@ -126,7 +124,9 @@ export const FeatureStrategyMenuCards = ({
|
||||
|
||||
const { strategies } = useStrategies();
|
||||
const { templates } = useReleasePlanTemplates();
|
||||
const navigate = useNavigate();
|
||||
const { project } = useProjectOverview(projectId);
|
||||
|
||||
const [seeAllReleaseTemplates, setSeeAllReleaseTemplates] = useState(false);
|
||||
|
||||
const activeStrategies = strategies.filter(
|
||||
(strategy) => !strategy.deprecated,
|
||||
@ -136,14 +136,26 @@ export const FeatureStrategyMenuCards = ({
|
||||
(strategy) => !strategy.advanced && !strategy.editable,
|
||||
);
|
||||
|
||||
const advancedAndCustomStrategies = activeStrategies.filter(
|
||||
(strategy) => strategy.editable || strategy.advanced,
|
||||
const advancedStrategies = activeStrategies.filter(
|
||||
(strategy) => strategy.advanced && !strategy.editable,
|
||||
);
|
||||
|
||||
const defaultStrategy = {
|
||||
const customStrategies = activeStrategies.filter(
|
||||
(strategy) => strategy.editable,
|
||||
);
|
||||
|
||||
const projectDefaultStrategy = project?.environments?.find(
|
||||
(env) => env.environment === environmentId,
|
||||
)?.defaultStrategy || {
|
||||
name: 'flexibleRollout',
|
||||
title: '100% of all users',
|
||||
};
|
||||
|
||||
const defaultStrategy = {
|
||||
name: projectDefaultStrategy.name || 'flexibleRollout',
|
||||
displayName: 'Default strategy',
|
||||
description:
|
||||
projectDefaultStrategy.title ||
|
||||
'This is the default strategy defined for this environment in the project',
|
||||
};
|
||||
|
||||
@ -152,59 +164,71 @@ export const FeatureStrategyMenuCards = ({
|
||||
return null;
|
||||
}
|
||||
|
||||
const slicedTemplates = seeAllReleaseTemplates
|
||||
? templates
|
||||
: templates.slice(0, RELEASE_TEMPLATE_DISPLAY_LIMIT);
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<SectionTitle>
|
||||
<StyledSectionHeader>
|
||||
<Typography color='inherit' variant='body2'>
|
||||
Release templates
|
||||
</Typography>
|
||||
<HelpIcon
|
||||
tooltip='Use a predefined template to roll out features to users'
|
||||
size='16px'
|
||||
/>
|
||||
</SectionTitle>
|
||||
</StyledSectionHeader>
|
||||
{!templates.length ? (
|
||||
<EmptyStateContainer>
|
||||
<EmptyStateTitle>
|
||||
<StyledNoTemplatesContainer>
|
||||
<StyledNoTemplatesTitle>
|
||||
<StyledIcon>
|
||||
<FactCheckOutlinedIcon />
|
||||
</StyledIcon>
|
||||
Create your own release templates
|
||||
</EmptyStateTitle>
|
||||
<EmptyStateDescription>
|
||||
</StyledNoTemplatesTitle>
|
||||
<StyledNoTemplatesDescription>
|
||||
Standardize your rollouts and save time by reusing
|
||||
predefined strategies. Find release templates in the
|
||||
side menu under{' '}
|
||||
<ClickableBoldText
|
||||
onClick={() => navigate('/release-templates')}
|
||||
>
|
||||
<StyledLink to='/release-templates'>
|
||||
Configure > Release templates
|
||||
</ClickableBoldText>
|
||||
</EmptyStateDescription>
|
||||
</EmptyStateContainer>
|
||||
</StyledLink>
|
||||
</StyledNoTemplatesDescription>
|
||||
</StyledNoTemplatesContainer>
|
||||
) : (
|
||||
<GridSection>
|
||||
{templates.map((template) => (
|
||||
<CardWrapper key={template.id}>
|
||||
<StyledGrid>
|
||||
{slicedTemplates.map((template) => (
|
||||
<FeatureReleasePlanCard
|
||||
key={template.id}
|
||||
template={template}
|
||||
onClick={() => onAddReleasePlan(template)}
|
||||
onPreviewClick={() =>
|
||||
onReviewReleasePlan(template)
|
||||
}
|
||||
/>
|
||||
</CardWrapper>
|
||||
))}
|
||||
</GridSection>
|
||||
{slicedTemplates.length < templates.length &&
|
||||
templates.length >
|
||||
RELEASE_TEMPLATE_DISPLAY_LIMIT && (
|
||||
<StyledViewAllTemplates>
|
||||
<Button
|
||||
variant='text'
|
||||
size='small'
|
||||
onClick={() =>
|
||||
setSeeAllReleaseTemplates(true)
|
||||
}
|
||||
>
|
||||
View all available templates
|
||||
</Button>
|
||||
</StyledViewAllTemplates>
|
||||
)}
|
||||
</StyledGrid>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<GridContainer>
|
||||
<TitleRow>
|
||||
<TitleText variant='h2'>Add strategy</TitleText>
|
||||
<StyledContainer>
|
||||
<StyledHeader>
|
||||
<Typography variant='h2'>Add strategy</Typography>
|
||||
<IconButton
|
||||
size='small'
|
||||
onClick={onClose}
|
||||
@ -213,24 +237,37 @@ export const FeatureStrategyMenuCards = ({
|
||||
>
|
||||
<CloseIcon fontSize='small' />
|
||||
</IconButton>
|
||||
</TitleRow>
|
||||
<ScrollableContent>
|
||||
{onlyReleasePlans ? (
|
||||
renderReleasePlanTemplates()
|
||||
) : (
|
||||
<>
|
||||
</StyledHeader>
|
||||
<StyledScrollableContent>
|
||||
<Box>
|
||||
<SectionTitle>
|
||||
<StyledGrid>
|
||||
<StyledSectionHeader>
|
||||
<Typography color='inherit' variant='body2'>
|
||||
Project default
|
||||
</Typography>
|
||||
<HelpIcon
|
||||
htmlTooltip
|
||||
tooltip={
|
||||
<>
|
||||
This is set per project, per
|
||||
environment, and can be configured{' '}
|
||||
<StyledLink
|
||||
to={`/projects/${projectId}/settings/default-strategy`}
|
||||
>
|
||||
here
|
||||
</StyledLink>
|
||||
</>
|
||||
}
|
||||
size='16px'
|
||||
/>
|
||||
</StyledSectionHeader>
|
||||
<StyledSectionHeader>
|
||||
<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}>
|
||||
</StyledSectionHeader>
|
||||
</StyledGrid>
|
||||
<StyledGrid>
|
||||
<FeatureStrategyMenuCard
|
||||
projectId={projectId}
|
||||
featureId={featureId}
|
||||
@ -239,54 +276,62 @@ export const FeatureStrategyMenuCards = ({
|
||||
defaultStrategy
|
||||
onClose={onClose}
|
||||
/>
|
||||
</CardWrapper>
|
||||
{standardStrategies.map((strategy) => (
|
||||
<CardWrapper key={strategy.name}>
|
||||
<FeatureStrategyMenuCard
|
||||
key={strategy.name}
|
||||
projectId={projectId}
|
||||
featureId={featureId}
|
||||
environmentId={environmentId}
|
||||
strategy={strategy}
|
||||
onClose={onClose}
|
||||
/>
|
||||
</CardWrapper>
|
||||
))}
|
||||
</GridSection>
|
||||
</StyledGrid>
|
||||
</Box>
|
||||
{renderReleasePlanTemplates()}
|
||||
{advancedAndCustomStrategies.length > 0 && (
|
||||
{advancedStrategies.length > 0 && (
|
||||
<Box>
|
||||
<SectionTitle>
|
||||
<StyledSectionHeader>
|
||||
<Typography color='inherit' variant='body2'>
|
||||
Custom and advanced strategies
|
||||
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}>
|
||||
</StyledSectionHeader>
|
||||
<StyledGrid>
|
||||
{advancedStrategies.map((strategy) => (
|
||||
<FeatureStrategyMenuCard
|
||||
key={strategy.name}
|
||||
projectId={projectId}
|
||||
featureId={featureId}
|
||||
environmentId={
|
||||
environmentId
|
||||
}
|
||||
environmentId={environmentId}
|
||||
strategy={strategy}
|
||||
onClose={onClose}
|
||||
/>
|
||||
</CardWrapper>
|
||||
),
|
||||
)}
|
||||
</GridSection>
|
||||
))}
|
||||
</StyledGrid>
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
{customStrategies.length > 0 && (
|
||||
<Box>
|
||||
<StyledSectionHeader>
|
||||
<Typography color='inherit' variant='body2'>
|
||||
Custom strategies
|
||||
</Typography>
|
||||
</StyledSectionHeader>
|
||||
<StyledGrid>
|
||||
{customStrategies.map((strategy) => (
|
||||
<FeatureStrategyMenuCard
|
||||
key={strategy.name}
|
||||
projectId={projectId}
|
||||
featureId={featureId}
|
||||
environmentId={environmentId}
|
||||
strategy={strategy}
|
||||
onClose={onClose}
|
||||
/>
|
||||
))}
|
||||
</StyledGrid>
|
||||
</Box>
|
||||
)}
|
||||
</ScrollableContent>
|
||||
</GridContainer>
|
||||
</StyledScrollableContent>
|
||||
</StyledContainer>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user