mirror of
https://github.com/Unleash/unleash.git
synced 2025-08-13 13:48:59 +02:00
feat: new feature strategy menu (#9678)
This commit is contained in:
parent
18346d1107
commit
b44ac069ae
@ -2,6 +2,7 @@ import { getFeatureStrategyIcon } from 'utils/strategyNames';
|
|||||||
import StringTruncator from 'component/common/StringTruncator/StringTruncator';
|
import StringTruncator from 'component/common/StringTruncator/StringTruncator';
|
||||||
import { Button, styled } from '@mui/material';
|
import { Button, styled } from '@mui/material';
|
||||||
import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
|
import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
|
||||||
|
import { Truncator } from 'component/common/Truncator/Truncator';
|
||||||
|
|
||||||
const StyledIcon = styled('div')(({ theme }) => ({
|
const StyledIcon = styled('div')(({ theme }) => ({
|
||||||
width: theme.spacing(4),
|
width: theme.spacing(4),
|
||||||
@ -16,19 +17,22 @@ const StyledIcon = styled('div')(({ theme }) => ({
|
|||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const StyledDescription = styled('div')(({ theme }) => ({
|
const StyledContentContainer = styled('div')(() => ({
|
||||||
fontSize: theme.fontSizes.smallBody,
|
overflow: 'hidden',
|
||||||
fontWeight: theme.fontWeight.medium,
|
width: '100%',
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const StyledName = styled(StringTruncator)(({ theme }) => ({
|
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 }) => ({
|
const StyledCard = styled(Button)(({ theme }) => ({
|
||||||
display: 'grid',
|
display: 'grid',
|
||||||
gridTemplateColumns: '3rem 1fr',
|
gridTemplateColumns: '2.5rem 1fr',
|
||||||
width: '20rem',
|
width: '100%',
|
||||||
|
maxWidth: '30rem',
|
||||||
padding: theme.spacing(2),
|
padding: theme.spacing(2),
|
||||||
color: 'inherit',
|
color: 'inherit',
|
||||||
textDecoration: 'inherit',
|
textDecoration: 'inherit',
|
||||||
@ -38,6 +42,7 @@ const StyledCard = styled(Button)(({ theme }) => ({
|
|||||||
borderColor: theme.palette.divider,
|
borderColor: theme.palette.divider,
|
||||||
borderRadius: theme.spacing(1),
|
borderRadius: theme.spacing(1),
|
||||||
textAlign: 'left',
|
textAlign: 'left',
|
||||||
|
overflow: 'hidden',
|
||||||
'&:hover, &:focus': {
|
'&:hover, &:focus': {
|
||||||
borderColor: theme.palette.primary.main,
|
borderColor: theme.palette.primary.main,
|
||||||
},
|
},
|
||||||
@ -59,10 +64,22 @@ export const FeatureReleasePlanCard = ({
|
|||||||
<StyledIcon>
|
<StyledIcon>
|
||||||
<Icon />
|
<Icon />
|
||||||
</StyledIcon>
|
</StyledIcon>
|
||||||
<div>
|
<StyledContentContainer>
|
||||||
<StyledName text={name} maxWidth='200' maxLength={25} />
|
<StyledName text={name} maxWidth='200' maxLength={25} />
|
||||||
<StyledDescription>{description}</StyledDescription>
|
<Truncator
|
||||||
</div>
|
lines={1}
|
||||||
|
title={description}
|
||||||
|
arrow
|
||||||
|
sx={{
|
||||||
|
fontSize: (theme) => theme.typography.body2.fontSize,
|
||||||
|
fontWeight: (theme) =>
|
||||||
|
theme.typography.fontWeightRegular,
|
||||||
|
width: '100%',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{description}
|
||||||
|
</Truncator>
|
||||||
|
</StyledContentContainer>
|
||||||
</StyledCard>
|
</StyledCard>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -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>
|
||||||
|
);
|
||||||
|
};
|
@ -21,6 +21,7 @@ import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
|
|||||||
import { formatUnknownError } from 'utils/formatUnknownError';
|
import { formatUnknownError } from 'utils/formatUnknownError';
|
||||||
import { useUiFlag } from 'hooks/useUiFlag';
|
import { useUiFlag } from 'hooks/useUiFlag';
|
||||||
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
|
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
|
||||||
|
import { OldFeatureStrategyMenuCards } from './FeatureStrategyMenuCards/OldFeatureStrategyMenuCards';
|
||||||
|
|
||||||
interface IFeatureStrategyMenuProps {
|
interface IFeatureStrategyMenuProps {
|
||||||
label: string;
|
label: string;
|
||||||
@ -75,6 +76,7 @@ export const FeatureStrategyMenu = ({
|
|||||||
const { addReleasePlanToFeature } = useReleasePlansApi();
|
const { addReleasePlanToFeature } = useReleasePlansApi();
|
||||||
const { isOss } = useUiConfig();
|
const { isOss } = useUiConfig();
|
||||||
const releasePlansEnabled = useUiFlag('releasePlans');
|
const releasePlansEnabled = useUiFlag('releasePlans');
|
||||||
|
const newStrategyDropdownEnabled = useUiFlag('newStrategyDropdown');
|
||||||
const displayReleasePlanButton = !isOss() && releasePlansEnabled;
|
const displayReleasePlanButton = !isOss() && releasePlansEnabled;
|
||||||
const crProtected =
|
const crProtected =
|
||||||
releasePlansEnabled && isChangeRequestConfigured(environmentId);
|
releasePlansEnabled && isChangeRequestConfigured(environmentId);
|
||||||
@ -223,19 +225,36 @@ export const FeatureStrategyMenu = ({
|
|||||||
PaperProps={{
|
PaperProps={{
|
||||||
sx: (theme) => ({
|
sx: (theme) => ({
|
||||||
paddingBottom: theme.spacing(1),
|
paddingBottom: theme.spacing(1),
|
||||||
|
width: 'auto',
|
||||||
|
maxWidth: '95vw',
|
||||||
|
overflow: 'hidden',
|
||||||
}),
|
}),
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<FeatureStrategyMenuCards
|
{newStrategyDropdownEnabled ? (
|
||||||
projectId={projectId}
|
<FeatureStrategyMenuCards
|
||||||
featureId={featureId}
|
projectId={projectId}
|
||||||
environmentId={environmentId}
|
featureId={featureId}
|
||||||
onlyReleasePlans={onlyReleasePlans}
|
environmentId={environmentId}
|
||||||
onAddReleasePlan={(template) => {
|
onlyReleasePlans={onlyReleasePlans}
|
||||||
setSelectedTemplate(template);
|
onAddReleasePlan={(template) => {
|
||||||
setAddReleasePlanOpen(true);
|
setSelectedTemplate(template);
|
||||||
}}
|
setAddReleasePlanOpen(true);
|
||||||
/>
|
}}
|
||||||
|
onClose={onClose}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<OldFeatureStrategyMenuCards
|
||||||
|
projectId={projectId}
|
||||||
|
featureId={featureId}
|
||||||
|
environmentId={environmentId}
|
||||||
|
onlyReleasePlans={onlyReleasePlans}
|
||||||
|
onAddReleasePlan={(template) => {
|
||||||
|
setSelectedTemplate(template);
|
||||||
|
setAddReleasePlanOpen(true);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</Popover>
|
</Popover>
|
||||||
{selectedTemplate && (
|
{selectedTemplate && (
|
||||||
<ReleasePlanAddDialog
|
<ReleasePlanAddDialog
|
||||||
|
@ -8,6 +8,7 @@ import { formatCreateStrategyPath } from 'component/feature/FeatureStrategy/Feat
|
|||||||
import StringTruncator from 'component/common/StringTruncator/StringTruncator';
|
import StringTruncator from 'component/common/StringTruncator/StringTruncator';
|
||||||
import { styled } from '@mui/material';
|
import { styled } from '@mui/material';
|
||||||
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
|
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
|
||||||
|
import { Truncator } from 'component/common/Truncator/Truncator';
|
||||||
|
|
||||||
interface IFeatureStrategyMenuCardProps {
|
interface IFeatureStrategyMenuCardProps {
|
||||||
projectId: string;
|
projectId: string;
|
||||||
@ -33,18 +34,22 @@ const StyledIcon = styled('div')(({ theme }) => ({
|
|||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const StyledDescription = styled('div')(({ theme }) => ({
|
const StyledContentContainer = styled('div')(() => ({
|
||||||
fontSize: theme.fontSizes.smallBody,
|
overflow: 'hidden',
|
||||||
|
width: '100%',
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const StyledName = styled(StringTruncator)(({ theme }) => ({
|
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 }) => ({
|
const StyledCard = styled(Link)(({ theme }) => ({
|
||||||
display: 'grid',
|
display: 'grid',
|
||||||
gridTemplateColumns: '3rem 1fr',
|
gridTemplateColumns: '2.5rem 1fr',
|
||||||
width: '20rem',
|
width: '100%',
|
||||||
|
maxWidth: '30rem',
|
||||||
padding: theme.spacing(2),
|
padding: theme.spacing(2),
|
||||||
color: 'inherit',
|
color: 'inherit',
|
||||||
textDecoration: 'inherit',
|
textDecoration: 'inherit',
|
||||||
@ -53,6 +58,7 @@ const StyledCard = styled(Link)(({ theme }) => ({
|
|||||||
borderStyle: 'solid',
|
borderStyle: 'solid',
|
||||||
borderColor: theme.palette.divider,
|
borderColor: theme.palette.divider,
|
||||||
borderRadius: theme.spacing(1),
|
borderRadius: theme.spacing(1),
|
||||||
|
overflow: 'hidden',
|
||||||
'&:hover, &:focus': {
|
'&:hover, &:focus': {
|
||||||
borderColor: theme.palette.primary.main,
|
borderColor: theme.palette.primary.main,
|
||||||
},
|
},
|
||||||
@ -90,14 +96,24 @@ export const FeatureStrategyMenuCard = ({
|
|||||||
<StyledIcon>
|
<StyledIcon>
|
||||||
<StrategyIcon />
|
<StrategyIcon />
|
||||||
</StyledIcon>
|
</StyledIcon>
|
||||||
<div>
|
<StyledContentContainer>
|
||||||
<StyledName
|
<StyledName
|
||||||
text={strategy.displayName || strategyName}
|
text={strategy.displayName || strategyName}
|
||||||
maxWidth='200'
|
maxWidth='200'
|
||||||
maxLength={25}
|
maxLength={25}
|
||||||
/>
|
/>
|
||||||
<StyledDescription>{strategy.description}</StyledDescription>
|
<Truncator
|
||||||
</div>
|
lines={1}
|
||||||
|
title={strategy.description}
|
||||||
|
arrow
|
||||||
|
sx={{
|
||||||
|
fontSize: (theme) => theme.typography.body2.fontSize,
|
||||||
|
width: '100%',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{strategy.description}
|
||||||
|
</Truncator>
|
||||||
|
</StyledContentContainer>
|
||||||
</StyledCard>
|
</StyledCard>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -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>
|
||||||
|
);
|
||||||
|
};
|
@ -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 { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies';
|
||||||
import { FeatureStrategyMenuCard } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCard';
|
import { FeatureStrategyMenuCard } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCard';
|
||||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||||
@ -6,6 +6,7 @@ import { useReleasePlanTemplates } from 'hooks/api/getters/useReleasePlanTemplat
|
|||||||
import { FeatureReleasePlanCard } from '../FeatureReleasePlanCard/FeatureReleasePlanCard';
|
import { FeatureReleasePlanCard } from '../FeatureReleasePlanCard/FeatureReleasePlanCard';
|
||||||
import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
|
import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import CloseIcon from '@mui/icons-material/Close';
|
||||||
|
|
||||||
interface IFeatureStrategyMenuCardsProps {
|
interface IFeatureStrategyMenuCardsProps {
|
||||||
projectId: string;
|
projectId: string;
|
||||||
@ -13,11 +14,13 @@ interface IFeatureStrategyMenuCardsProps {
|
|||||||
environmentId: string;
|
environmentId: string;
|
||||||
onlyReleasePlans: boolean;
|
onlyReleasePlans: boolean;
|
||||||
onAddReleasePlan: (template: IReleasePlanTemplate) => void;
|
onAddReleasePlan: (template: IReleasePlanTemplate) => void;
|
||||||
|
onClose?: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const StyledTypography = styled(Typography)(({ theme }) => ({
|
const StyledTypography = styled(Typography)(({ theme }) => ({
|
||||||
fontSize: theme.fontSizes.smallBody,
|
fontSize: theme.fontSizes.smallBody,
|
||||||
padding: theme.spacing(1, 2),
|
padding: theme.spacing(1, 2),
|
||||||
|
width: '100%',
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const StyledLink = styled(Link)(({ theme }) => ({
|
const StyledLink = styled(Link)(({ theme }) => ({
|
||||||
@ -25,12 +28,43 @@ const StyledLink = styled(Link)(({ theme }) => ({
|
|||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
})) as typeof Link;
|
})) 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 = ({
|
export const FeatureStrategyMenuCards = ({
|
||||||
projectId,
|
projectId,
|
||||||
featureId,
|
featureId,
|
||||||
environmentId,
|
environmentId,
|
||||||
onlyReleasePlans,
|
onlyReleasePlans,
|
||||||
onAddReleasePlan,
|
onAddReleasePlan,
|
||||||
|
onClose,
|
||||||
}: IFeatureStrategyMenuCardsProps) => {
|
}: IFeatureStrategyMenuCardsProps) => {
|
||||||
const { strategies } = useStrategies();
|
const { strategies } = useStrategies();
|
||||||
const { templates } = useReleasePlanTemplates();
|
const { templates } = useReleasePlanTemplates();
|
||||||
@ -52,21 +86,38 @@ export const FeatureStrategyMenuCards = ({
|
|||||||
'This is the default strategy defined for this environment in the project',
|
'This is the default strategy defined for this environment in the project',
|
||||||
};
|
};
|
||||||
return (
|
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 ? (
|
{allStrategies ? (
|
||||||
<>
|
<>
|
||||||
<StyledTypography color='textSecondary'>
|
<StyledTypography color='textSecondary'>
|
||||||
Default strategy for {environmentId} environment
|
Default strategy for {environmentId} environment
|
||||||
</StyledTypography>
|
</StyledTypography>
|
||||||
<ListItem key={defaultStrategy.name}>
|
<GridSection>
|
||||||
<FeatureStrategyMenuCard
|
<CardWrapper key={defaultStrategy.name}>
|
||||||
projectId={projectId}
|
<FeatureStrategyMenuCard
|
||||||
featureId={featureId}
|
projectId={projectId}
|
||||||
environmentId={environmentId}
|
featureId={featureId}
|
||||||
strategy={defaultStrategy}
|
environmentId={environmentId}
|
||||||
defaultStrategy={true}
|
strategy={defaultStrategy}
|
||||||
/>
|
defaultStrategy={true}
|
||||||
</ListItem>
|
/>
|
||||||
|
</CardWrapper>
|
||||||
|
</GridSection>
|
||||||
</>
|
</>
|
||||||
) : null}
|
) : null}
|
||||||
<ConditionallyRender
|
<ConditionallyRender
|
||||||
@ -76,14 +127,18 @@ export const FeatureStrategyMenuCards = ({
|
|||||||
<StyledTypography color='textSecondary'>
|
<StyledTypography color='textSecondary'>
|
||||||
Release templates
|
Release templates
|
||||||
</StyledTypography>
|
</StyledTypography>
|
||||||
{templates.map((template) => (
|
<GridSection>
|
||||||
<ListItem key={template.id}>
|
{templates.map((template) => (
|
||||||
<FeatureReleasePlanCard
|
<CardWrapper key={template.id}>
|
||||||
template={template}
|
<FeatureReleasePlanCard
|
||||||
onClick={() => onAddReleasePlan(template)}
|
template={template}
|
||||||
/>
|
onClick={() =>
|
||||||
</ListItem>
|
onAddReleasePlan(template)
|
||||||
))}
|
}
|
||||||
|
/>
|
||||||
|
</CardWrapper>
|
||||||
|
))}
|
||||||
|
</GridSection>
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
@ -118,16 +173,18 @@ export const FeatureStrategyMenuCards = ({
|
|||||||
<StyledTypography color='textSecondary'>
|
<StyledTypography color='textSecondary'>
|
||||||
Predefined strategy types
|
Predefined strategy types
|
||||||
</StyledTypography>
|
</StyledTypography>
|
||||||
{preDefinedStrategies.map((strategy) => (
|
<GridSection>
|
||||||
<ListItem key={strategy.name}>
|
{preDefinedStrategies.map((strategy) => (
|
||||||
<FeatureStrategyMenuCard
|
<CardWrapper key={strategy.name}>
|
||||||
projectId={projectId}
|
<FeatureStrategyMenuCard
|
||||||
featureId={featureId}
|
projectId={projectId}
|
||||||
environmentId={environmentId}
|
featureId={featureId}
|
||||||
strategy={strategy}
|
environmentId={environmentId}
|
||||||
/>
|
strategy={strategy}
|
||||||
</ListItem>
|
/>
|
||||||
))}
|
</CardWrapper>
|
||||||
|
))}
|
||||||
|
</GridSection>
|
||||||
<ConditionallyRender
|
<ConditionallyRender
|
||||||
condition={customStrategies.length > 0}
|
condition={customStrategies.length > 0}
|
||||||
show={
|
show={
|
||||||
@ -135,21 +192,23 @@ export const FeatureStrategyMenuCards = ({
|
|||||||
<StyledTypography color='textSecondary'>
|
<StyledTypography color='textSecondary'>
|
||||||
Custom strategies
|
Custom strategies
|
||||||
</StyledTypography>
|
</StyledTypography>
|
||||||
{customStrategies.map((strategy) => (
|
<GridSection>
|
||||||
<ListItem key={strategy.name}>
|
{customStrategies.map((strategy) => (
|
||||||
<FeatureStrategyMenuCard
|
<CardWrapper key={strategy.name}>
|
||||||
projectId={projectId}
|
<FeatureStrategyMenuCard
|
||||||
featureId={featureId}
|
projectId={projectId}
|
||||||
environmentId={environmentId}
|
featureId={featureId}
|
||||||
strategy={strategy}
|
environmentId={environmentId}
|
||||||
/>
|
strategy={strategy}
|
||||||
</ListItem>
|
/>
|
||||||
))}
|
</CardWrapper>
|
||||||
|
))}
|
||||||
|
</GridSection>
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
) : null}
|
) : null}
|
||||||
</List>
|
</GridContainer>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -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
|
||||||
|
<StyledLink
|
||||||
|
onClick={() =>
|
||||||
|
navigate('/release-templates')
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Release templates
|
||||||
|
</StyledLink>
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
};
|
@ -91,6 +91,7 @@ export type UiFlags = {
|
|||||||
adminNavUI?: boolean;
|
adminNavUI?: boolean;
|
||||||
tagTypeColor?: boolean;
|
tagTypeColor?: boolean;
|
||||||
globalChangeRequestConfig?: boolean;
|
globalChangeRequestConfig?: boolean;
|
||||||
|
newStrategyDropdown?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
export interface IVersionInfo {
|
export interface IVersionInfo {
|
||||||
|
@ -64,7 +64,8 @@ export type IFlagKey =
|
|||||||
| 'simplifyDisableFeature'
|
| 'simplifyDisableFeature'
|
||||||
| 'adminNavUI'
|
| 'adminNavUI'
|
||||||
| 'tagTypeColor'
|
| 'tagTypeColor'
|
||||||
| 'globalChangeRequestConfig';
|
| 'globalChangeRequestConfig'
|
||||||
|
| 'newStrategyDropdown';
|
||||||
|
|
||||||
export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
|
export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
|
||||||
|
|
||||||
@ -309,6 +310,10 @@ const flags: IFlags = {
|
|||||||
process.env.UNLEASH_EXPERIMENTAL_GLOBAL_CHANGE_REQUEST_CONFIG,
|
process.env.UNLEASH_EXPERIMENTAL_GLOBAL_CHANGE_REQUEST_CONFIG,
|
||||||
false,
|
false,
|
||||||
),
|
),
|
||||||
|
newStrategyDropdown: parseEnvVarBoolean(
|
||||||
|
process.env.UNLEASH_EXPERIMENTAL_NEW_STRATEGY_DROPDOWN,
|
||||||
|
false,
|
||||||
|
),
|
||||||
};
|
};
|
||||||
|
|
||||||
export const defaultExperimentalOptions: IExperimentalOptions = {
|
export const defaultExperimentalOptions: IExperimentalOptions = {
|
||||||
|
@ -58,6 +58,7 @@ process.nextTick(async () => {
|
|||||||
simplifyDisableFeature: true,
|
simplifyDisableFeature: true,
|
||||||
adminNavUI: true,
|
adminNavUI: true,
|
||||||
tagTypeColor: true,
|
tagTypeColor: true,
|
||||||
|
newStrategyDropdown: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
authentication: {
|
authentication: {
|
||||||
|
Loading…
Reference in New Issue
Block a user