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),
+    width: theme.spacing(3),
-    height: 'auto',
     '& > 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',
+    display: 'flex',
-    gridTemplateColumns: '2.5rem 1fr',
+    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) =>
+                    fontWeight: (theme) => theme.typography.fontWeightRegular,
-                            theme.typography.fontWeightRegular,
                     width: '100%',
                 }}
             >
                 {description}
             </Truncator>
-            </StyledContentContainer>
         </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),
+    width: theme.spacing(3),
-    height: 'auto',
     '& > 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',
+    display: 'flex',
-    gridTemplateColumns: '2.5rem 1fr',
+    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>
     );
 };

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}