From 6319b078a698e7cb324d578a55ba80eee43a0b49 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Wed, 23 Jul 2025 15:30:02 +0100 Subject: [PATCH] fix: add strategy release templates visibility for non Enterprise --- .../FeatureStrategyMenuCards.tsx | 286 ++++++++---------- 1 file changed, 124 insertions(+), 162 deletions(-) diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx index d85d824b27..44c13baa47 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx @@ -8,7 +8,6 @@ import { } from '@mui/material'; import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies'; import { FeatureStrategyMenuCard } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { useReleasePlanTemplates } from 'hooks/api/getters/useReleasePlanTemplates/useReleasePlanTemplates'; import { FeatureReleasePlanCard } from '../FeatureReleasePlanCard/FeatureReleasePlanCard.tsx'; import type { IReleasePlanTemplate } from 'interfaces/releasePlans'; @@ -16,6 +15,8 @@ import { useNavigate } from 'react-router-dom'; import CloseIcon from '@mui/icons-material/Close'; import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; import FactCheckOutlinedIcon from '@mui/icons-material/FactCheckOutlined'; +import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig.ts'; +import { useUiFlag } from 'hooks/useUiFlag.ts'; interface IFeatureStrategyMenuCardsProps { projectId: string; @@ -27,17 +28,6 @@ interface IFeatureStrategyMenuCardsProps { onClose: () => void; } -const StyledTypography = styled(Typography)(({ theme }) => ({ - fontSize: theme.fontSizes.smallBody, - padding: theme.spacing(1, 4), - width: '100%', -})); - -const StyledLink = styled(Link)(({ theme }) => ({ - fontSize: theme.fontSizes.smallBody, - cursor: 'pointer', -})) as typeof Link; - const GridContainer = styled(Box)(() => ({ width: '100%', display: 'flex', @@ -48,15 +38,17 @@ const ScrollableContent = styled(Box)(({ theme }) => ({ width: '100%', maxHeight: '70vh', overflowY: 'auto', - padding: theme.spacing(1, 0, 1, 0), + 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), - padding: theme.spacing(0, 4), - marginBottom: theme.spacing(3), width: '100%', })); @@ -82,7 +74,7 @@ const SectionTitle = styled(Box)(({ theme }) => ({ display: 'flex', alignItems: 'center', gap: theme.spacing(0.5), - padding: theme.spacing(0, 4, 1, 4), + marginBottom: theme.spacing(1), width: '100%', })); @@ -110,7 +102,6 @@ const EmptyStateContainer = styled(Box)(({ theme }) => ({ backgroundColor: theme.palette.neutral.light, borderRadius: theme.shape.borderRadiusMedium, padding: theme.spacing(3), - margin: theme.spacing(0, 4), width: 'auto', })); @@ -144,10 +135,12 @@ export const FeatureStrategyMenuCards = ({ onReviewReleasePlan, onClose, }: IFeatureStrategyMenuCardsProps) => { + const { isEnterprise } = useUiConfig(); + const releasePlansEnabled = useUiFlag('releasePlans'); + const { strategies } = useStrategies(); const { templates } = useReleasePlanTemplates(); const navigate = useNavigate(); - const allStrategies = !onlyReleasePlans; const preDefinedStrategies = strategies.filter( (strategy) => !strategy.deprecated && !strategy.editable, @@ -163,6 +156,65 @@ export const FeatureStrategyMenuCards = ({ description: 'This is the default strategy defined for this environment in the project', }; + + const renderReleasePlanTemplates = () => { + if (!isEnterprise() || !releasePlansEnabled) { + return null; + } + + if (!templates.length) { + return ( + + + + + + Create your own release templates + + + Standardize your rollouts and save time by reusing + predefined strategies. Find release templates in the + side menu under{' '} + navigate('/release-templates')} + > + Configure > Release templates + + + + ); + } + + return ( + + + + Apply a release template + + + + + + + {templates.map((template) => ( + + onAddReleasePlan(template)} + onPreviewClick={() => + onReviewReleasePlan(template) + } + /> + + ))} + + + ); + }; + return ( @@ -179,167 +231,77 @@ export const FeatureStrategyMenuCards = ({ - {allStrategies ? ( + {onlyReleasePlans ? ( + renderReleasePlanTemplates() + ) : ( <> - - - Pre-defined strategy types - - - - - - - - - - {preDefinedStrategies.map((strategy) => ( - - - - ))} - - - ) : null} - 0} - show={ - <> + - Apply a release template + Pre-defined strategy types - {templates.map((template) => ( - - - onAddReleasePlan(template) - } - onPreviewClick={() => - onReviewReleasePlan(template) - } + + + + {preDefinedStrategies.map((strategy) => ( + + ))} - - } - elseShow={ - - - - - - Create your own templates - - - Standardize how you do rollouts and make it more - efficient without having to set up the same - stategies from time to time. You find it in the - sidemenu under{' '} - - navigate('/release-templates') - } - > - Configure > Release templates - - - - } - /> - - - theme.spacing(1, 2, 0, 2), - }} - > -

No templates created.

-

- Go to  - - navigate('/release-templates') - } + + {renderReleasePlanTemplates()} + {customStrategies.length > 0 && ( + + + + Custom strategies + + - Release templates - -  to get started -

- - - } - /> - {allStrategies ? ( - <> - 0} - show={ - <> - - - Custom strategies - - - - - - - {customStrategies.map((strategy) => ( - - - - ))} - - - } - /> + + + + + {customStrategies.map((strategy) => ( + + + + ))} + + + )} - ) : null} + )} );