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 (
+ No templates created.
- Go to
-