feat: strategy selector screen updates (#9692)

2025-05-17 01:17:29 +02:00 · 2025-04-03 14:51:00 +03:00 · 2025-04-03 14:51:00 +03:00 · 9a4eb059e6
commit 9a4eb059e6
parent a02fe7a245
4 changed files with 133 additions and 66 deletions
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx
@ -5,21 +5,12 @@ import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
 import { Truncator } from 'component/common/Truncator/Truncator';

 const StyledIcon = styled('div')(({ theme }) => ({
-    width: theme.spacing(4),
-    height: 'auto',
+    width: theme.spacing(3),
    '& > svg': {
+        width: theme.spacing(2.25),
+        height: theme.spacing(2.25),
        fill: theme.palette.primary.main,
    },
-    '& > div': {
-        height: theme.spacing(2),
-        marginLeft: '-.75rem',
-        color: theme.palette.primary.main,
-    },
-}));
-
-const StyledContentContainer = styled('div')(() => ({
-    overflow: 'hidden',
-    width: '100%',
 }));

 const StyledName = styled(StringTruncator)(({ theme }) => ({
@ -30,11 +21,11 @@ const StyledName = styled(StringTruncator)(({ theme }) => ({
 }));

 const StyledCard = styled(Button)(({ theme }) => ({
-    display: 'grid',
-    gridTemplateColumns: '2.5rem 1fr',
+    display: 'flex',
+    flexDirection: 'column',
    width: '100%',
    maxWidth: '30rem',
-    padding: theme.spacing(2),
+    padding: theme.spacing(1.5, 2),
    color: 'inherit',
    textDecoration: 'inherit',
    lineHeight: 1.25,
@ -49,6 +40,13 @@ const StyledCard = styled(Button)(({ theme }) => ({
    },
 }));

+const StyledTopRow = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+}));
+
 interface IFeatureReleasePlanCardProps {
    template: IReleasePlanTemplate;
    onClick: () => void;
@ -62,25 +60,24 @@ export const FeatureReleasePlanCard = ({

    return (
        <StyledCard onClick={onClick}>
+            <StyledTopRow>
                <StyledIcon>
                    <Icon />
                </StyledIcon>
-            <StyledContentContainer>
                <StyledName text={name} maxWidth='200' maxLength={25} />
+            </StyledTopRow>
            <Truncator
                lines={1}
                title={description}
                arrow
                sx={{
                    fontSize: (theme) => theme.typography.caption.fontSize,
-                        fontWeight: (theme) =>
-                            theme.typography.fontWeightRegular,
+                    fontWeight: (theme) => theme.typography.fontWeightRegular,
                    width: '100%',
                }}
            >
                {description}
            </Truncator>
-            </StyledContentContainer>
        </StyledCard>
    );
 };
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx
@ -226,6 +226,11 @@ export const FeatureStrategyMenu = ({
                    vertical: 'top',
                    horizontal: 'left',
                }}
+                PaperProps={{
+                    sx: (theme) => ({
+                        maxWidth: '45vw',
+                    }),
+                }}
                disableScrollLock={true}
            >
                {newStrategyDropdownEnabled ? (
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx
@ -20,23 +20,12 @@ interface IFeatureStrategyMenuCardProps {
 }

 const StyledIcon = styled('div')(({ theme }) => ({
-    width: theme.spacing(4),
-    height: 'auto',
+    width: theme.spacing(3),
    '& > svg': {
-        // Styling for SVG icons.
+        width: theme.spacing(2.25),
+        height: theme.spacing(2.25),
        fill: theme.palette.primary.main,
    },
-    '& > div': {
-        // Styling for the Rollout icon.
-        height: theme.spacing(2),
-        marginLeft: '-.75rem',
-        color: theme.palette.primary.main,
-    },
-}));
-
-const StyledContentContainer = styled('div')(() => ({
-    overflow: 'hidden',
-    width: '100%',
 }));

 const StyledName = styled(StringTruncator)(({ theme }) => ({
@ -47,11 +36,11 @@ const StyledName = styled(StringTruncator)(({ theme }) => ({
 }));

 const StyledCard = styled(Link)(({ theme }) => ({
-    display: 'grid',
-    gridTemplateColumns: '2.5rem 1fr',
+    display: 'flex',
+    flexDirection: 'column',
    width: '100%',
    maxWidth: '30rem',
-    padding: theme.spacing(2),
+    padding: theme.spacing(1.5, 2),
    color: 'inherit',
    textDecoration: 'inherit',
    lineHeight: 1.25,
@ -65,6 +54,13 @@ const StyledCard = styled(Link)(({ theme }) => ({
    },
 }));

+const StyledTopRow = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+}));
+
 export const FeatureStrategyMenuCard = ({
    projectId,
    featureId,
@ -94,15 +90,16 @@ export const FeatureStrategyMenuCard = ({

    return (
        <StyledCard to={createStrategyPath} onClick={openStrategyCreationModal}>
+            <StyledTopRow>
                <StyledIcon>
                    <StrategyIcon />
                </StyledIcon>
-            <StyledContentContainer>
                <StyledName
                    text={strategy.displayName || strategyName}
                    maxWidth='200'
                    maxLength={25}
                />
+            </StyledTopRow>
            <Truncator
                lines={1}
                title={strategy.description}
@ -114,7 +111,6 @@ export const FeatureStrategyMenuCard = ({
            >
                {strategy.description}
            </Truncator>
-            </StyledContentContainer>
        </StyledCard>
    );
 };
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx
@ -15,6 +15,7 @@ import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
 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';

 interface IFeatureStrategyMenuCardsProps {
    projectId: string;
@ -89,6 +90,51 @@ const StyledInfoIcon = styled(InfoOutlinedIcon)(({ theme }) => ({
    color: theme.palette.text.secondary,
 }));

+const StyledIcon = styled('div')(({ theme }) => ({
+    width: theme.spacing(3),
+    '& > svg': {
+        fill: theme.palette.primary.main,
+        width: theme.spacing(2.25),
+        height: theme.spacing(2.25),
+    },
+    display: 'flex',
+    alignItems: 'center',
+}));
+
+// Empty state styling
+const EmptyStateContainer = 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),
+    margin: theme.spacing(0, 2),
+    width: 'auto',
+}));
+
+const EmptyStateTitle = styled(Typography)(({ theme }) => ({
+    fontSize: theme.typography.caption.fontSize,
+    fontWeight: theme.typography.fontWeightBold,
+    marginBottom: theme.spacing(1),
+    display: 'flex',
+    alignItems: 'center',
+}));
+
+const EmptyStateDescription = styled(Typography)(({ theme }) => ({
+    fontSize: theme.typography.caption.fontSize,
+    color: theme.palette.text.secondary,
+}));
+
+const ClickableBoldText = styled(Link)(({ theme }) => ({
+    fontWeight: theme.typography.fontWeightBold,
+    cursor: 'pointer',
+    '&:hover': {
+        textDecoration: 'underline',
+    },
+}));
+
 export const FeatureStrategyMenuCards = ({
    projectId,
    featureId,
@ -199,6 +245,29 @@ export const FeatureStrategyMenuCards = ({
                            </GridSection>
                        </>
                    }
+                    elseShow={
+                        <EmptyStateContainer>
+                            <EmptyStateTitle>
+                                <StyledIcon>
+                                    <FactCheckOutlinedIcon />
+                                </StyledIcon>
+                                Create your own templates
+                            </EmptyStateTitle>
+                            <EmptyStateDescription>
+                                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{' '}
+                                <ClickableBoldText
+                                    onClick={() =>
+                                        navigate('/release-templates')
+                                    }
+                                >
+                                    Configure &gt; Release templates
+                                </ClickableBoldText>
+                            </EmptyStateDescription>
+                        </EmptyStateContainer>
+                    }
                />
                <ConditionallyRender
                    condition={templates.length === 0 && onlyReleasePlans}