From be4665f3f155f105f03925b8d0291c9d8d6ffdb6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Thu, 11 Sep 2025 11:19:55 +0100 Subject: [PATCH] chore: update release templates empty states in new add strategy modal (#10656) https://linear.app/unleash/issue/2-3876/update-the-release-templates-section-accordingly Updates the release templates empty states in the new add strategy modal to match the new design sketches. Also fixes a few details in the modal base design. image image --- .../FeatureStrategyMenuCards.tsx | 4 +- ...atureStrategyMenuCardsReleaseTemplates.tsx | 125 +++++++++++------- .../FeatureStrategyMenuCardsSection.tsx | 7 +- 3 files changed, 85 insertions(+), 51 deletions(-) diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx index ab66a2197e..52079510d9 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx @@ -38,8 +38,8 @@ const StyledContainer = styled(Box)(() => ({ })); const StyledScrollableContent = styled(Box)(({ theme }) => ({ - width: '100%', - maxHeight: theme.spacing(62), + width: theme.breakpoints.values.md, + height: theme.spacing(52), overflowY: 'auto', padding: theme.spacing(4), paddingTop: theme.spacing(1), diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCardsReleaseTemplates.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCardsReleaseTemplates.tsx index 4e6c4de96c..969b7c06cb 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCardsReleaseTemplates.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCardsReleaseTemplates.tsx @@ -1,9 +1,9 @@ import { useReleasePlanTemplates } from 'hooks/api/getters/useReleasePlanTemplates/useReleasePlanTemplates'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; -import FactCheckOutlinedIcon from '@mui/icons-material/FactCheckOutlined'; +import { ReactComponent as ReleaseTemplateIcon } from 'assets/img/releaseTemplates.svg'; import { FeatureReleasePlanCard } from '../FeatureReleasePlanCard/FeatureReleasePlanCard.tsx'; import type { IReleasePlanTemplate } from 'interfaces/releasePlans.ts'; -import { Box, Button, styled, Typography } from '@mui/material'; +import { Box, Button, styled } from '@mui/material'; import type { StrategyFilterValue } from './FeatureStrategyMenuCards.tsx'; import type { Dispatch, SetStateAction } from 'react'; import { Link as RouterLink } from 'react-router-dom'; @@ -14,38 +14,61 @@ import { const RELEASE_TEMPLATE_DISPLAY_LIMIT = 5; -const StyledIcon = styled('span')(({ theme }) => ({ - width: theme.spacing(3), +const StyledIcon = styled('span', { + shouldForwardProp: (prop) => prop !== 'solo', +})<{ solo?: boolean }>(({ theme, solo }) => ({ '& > svg': { fill: theme.palette.primary.main, - width: theme.spacing(2.25), - height: theme.spacing(2.25), + width: theme.spacing(6), + height: theme.spacing(6), + ...(solo && { + width: theme.spacing(10), + height: theme.spacing(10), + }), }, display: 'flex', alignItems: 'center', })); -const StyledNoTemplatesContainer = 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 StyledNoTemplatesTitle = styled(Typography)(({ theme }) => ({ - fontSize: theme.typography.caption.fontSize, - fontWeight: theme.typography.fontWeightBold, - marginBottom: theme.spacing(1), +const StyledNoTemplatesContainer = styled(Box, { + shouldForwardProp: (prop) => prop !== 'solo', +})<{ solo?: boolean }>(({ theme, solo }) => ({ display: 'flex', alignItems: 'center', + backgroundColor: theme.palette.neutral.light, + borderRadius: theme.shape.borderRadiusMedium, + padding: theme.spacing(2), + gap: theme.spacing(1), + width: 'auto', + ...(solo && { + backgroundColor: undefined, + flexDirection: 'column', + maxWidth: theme.spacing(70), + margin: 'auto', + gap: theme.spacing(2.5), + }), })); -const StyledNoTemplatesDescription = styled(Typography)(({ theme }) => ({ +const StyledNoTemplatesBody = styled(Box, { + shouldForwardProp: (prop) => prop !== 'solo', +})<{ solo?: boolean }>(({ theme, solo }) => ({ + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(0.5), fontSize: theme.typography.caption.fontSize, + ...(solo && { + alignItems: 'center', + textAlign: 'center', + gap: theme.spacing(2), + fontSize: theme.typography.body2.fontSize, + }), +})); + +const StyledNoTemplatesTitle = styled('p')(({ theme }) => ({ + fontWeight: theme.typography.fontWeightBold, +})); + +const StyledNoTemplatesDescription = styled('p')(({ theme }) => ({ color: theme.palette.text.secondary, })); @@ -83,34 +106,46 @@ export const FeatureStrategyMenuCardsReleaseTemplates = ({ return null; } - const slicedTemplates = - filter === 'releaseTemplates' - ? templates - : templates.slice(0, RELEASE_TEMPLATE_DISPLAY_LIMIT); + const isFiltered = filter === 'releaseTemplates'; + const shouldShowHeader = !isFiltered || templates.length > 0; + + const slicedTemplates = isFiltered + ? templates + : templates.slice(0, RELEASE_TEMPLATE_DISPLAY_LIMIT); return ( - - + {shouldShowHeader && ( + Release templates - - + + )} {!templates.length ? ( - - - - - - Create your own release templates - - - Standardize your rollouts and save time by reusing - predefined strategies. Find release templates in the - side menu under{' '} - - Configure > Release templates - - + + + + + + + You don't have any release templates set up yet + + + Go to{' '} + + Configure > Release templates + {' '} + in the side menu to make your rollouts more + efficient and streamlined. Read more in our{' '} + + documentation + + . + + ) : ( diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCardsSection.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCardsSection.tsx index f2ded61c2d..654d10df50 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCardsSection.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCardsSection.tsx @@ -1,4 +1,4 @@ -import { Box, styled, Typography } from '@mui/material'; +import { Box, styled } from '@mui/material'; import type { ReactNode } from 'react'; export const StyledStrategyModalSectionHeader = styled(Box)(({ theme }) => ({ @@ -7,6 +7,7 @@ export const StyledStrategyModalSectionHeader = styled(Box)(({ theme }) => ({ gap: theme.spacing(0.5), marginBottom: theme.spacing(0.5), width: '100%', + fontSize: theme.typography.body2.fontSize, })); const StyledStrategyModalSectionGrid = styled(Box)(({ theme }) => ({ @@ -28,9 +29,7 @@ export const FeatureStrategyMenuCardsSection = ({ {title && ( - - {title} - + {title} )}