feat: strategy selector screen updates (#9692)

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}>
-            <StyledIcon>
-                <Icon />
-            </StyledIcon>
-            <StyledContentContainer>
+            <StyledTopRow>
+                <StyledIcon>
+                    <Icon />
+                </StyledIcon>
                 <StyledName text={name} maxWidth='200' maxLength={25} />
-                <Truncator
-                    lines={1}
-                    title={description}
-                    arrow
-                    sx={{
-                        fontSize: (theme) => theme.typography.caption.fontSize,
-                        fontWeight: (theme) =>
-                            theme.typography.fontWeightRegular,
-                        width: '100%',
-                    }}
-                >
-                    {description}
-                </Truncator>
-            </StyledContentContainer>
+            </StyledTopRow>
+            <Truncator
+                lines={1}
+                title={description}
+                arrow
+                sx={{
+                    fontSize: (theme) => theme.typography.caption.fontSize,
+                    fontWeight: (theme) => theme.typography.fontWeightRegular,
+                    width: '100%',
+                }}
+            >
+                {description}
+            </Truncator>
         </StyledCard>
     );
 };

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 ? (

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,27 +90,27 @@ export const FeatureStrategyMenuCard = ({
 
     return (
         <StyledCard to={createStrategyPath} onClick={openStrategyCreationModal}>
-            <StyledIcon>
-                <StrategyIcon />
-            </StyledIcon>
-            <StyledContentContainer>
+            <StyledTopRow>
+                <StyledIcon>
+                    <StrategyIcon />
+                </StyledIcon>
                 <StyledName
                     text={strategy.displayName || strategyName}
                     maxWidth='200'
                     maxLength={25}
                 />
-                <Truncator
-                    lines={1}
-                    title={strategy.description}
-                    arrow
-                    sx={{
-                        fontSize: (theme) => theme.typography.caption.fontSize,
-                        width: '100%',
-                    }}
-                >
-                    {strategy.description}
-                </Truncator>
-            </StyledContentContainer>
+            </StyledTopRow>
+            <Truncator
+                lines={1}
+                title={strategy.description}
+                arrow
+                sx={{
+                    fontSize: (theme) => theme.typography.caption.fontSize,
+                    width: '100%',
+                }}
+            >
+                {strategy.description}
+            </Truncator>
         </StyledCard>
     );
 };

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}