chore(1 3493): handle cases with no strategies (#9563)

Handle cases where flags have no strategies in the playground.

As part of this, also changes how we deal with the padding/margins in
the playground: instead of making all but one items in the playground
have to explicitly add padding, now we instead say that the only item
that needs to do something is the list, which uses negative inline
margins.

This also has the added benefit of adding all the top-level elements
(that is: that's not part of the strategy lists) inside the same
container, so we can control gaps between them with flex's gaps.

When you have no strategies (before):

![image](https://github.com/user-attachments/assets/52c85ba4-0738-4aa7-b2ac-84e5f0f65b45)


When you have no strategies (after):

![image](https://github.com/user-attachments/assets/80f5ce75-29e5-4b6d-b707-213cb79d53cc)

Author: thomasheartman

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx

@@ -74,14 +74,6 @@ const LegacyFeatureResultInfoPopoverCell = ({
     );
 };
 
-const DetailsPadding = styled('div')(({ theme }) => ({
-    paddingInline: `var(--popover-inline-padding, ${theme.spacing(4)})`,
-    paddingTop: theme.spacing(2.5),
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(2),
-}));
-
 export const NewFeatureResultInfoPopoverCell = ({
     feature,
     input,
@@ -105,6 +97,8 @@ export const NewFeatureResultInfoPopoverCell = ({
                 PaperProps={{
                     sx: (theme) => ({
                         '--popover-inline-padding': theme.spacing(4),
+                        paddingInline: 'var(--popover-inline-padding)',
+                        paddingBlock: theme.spacing(3),
                         display: 'flex',
                         flexDirection: 'column',
                         width: 728,
@@ -125,13 +119,11 @@ export const NewFeatureResultInfoPopoverCell = ({
                     horizontal: 'left',
                 }}
             >
-                <DetailsPadding>
-                    <FeatureDetails
-                        feature={feature}
-                        input={input}
-                        onClose={() => setOpen(false)}
-                    />
-                </DetailsPadding>
+                <FeatureDetails
+                    feature={feature}
+                    input={input}
+                    onClose={() => setOpen(false)}
+                />
                 <PlaygroundResultFeatureStrategyList
                     feature={feature}
                     input={input}

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/PlaygroundResultsFeatureStrategyList.tsx

@@ -1,17 +1,13 @@
+import { Alert } from '@mui/material';
 import { PlaygroundResultStrategyLists } from './StrategyList/PlaygroundResultStrategyLists';
 import type { PlaygroundFeatureSchema, PlaygroundRequestSchema } from 'openapi';
-import { Alert, styled } from '@mui/material';
 import type { FC } from 'react';
 
 interface PlaygroundResultFeatureStrategyListProps {
     feature: PlaygroundFeatureSchema;
     input?: PlaygroundRequestSchema;
 }
 
-const StyledAlert = styled(Alert)(({ theme }) => ({
-    marginInline: `var(--popover-inline-padding, ${theme.spacing(4)})`,
-}));
-
 const UnevaluatedUnsatisfiedInfo: FC<{ feature: PlaygroundFeatureSchema }> = ({
     feature,
 }) => {
@@ -36,11 +32,11 @@ const UnevaluatedUnsatisfiedInfo: FC<{ feature: PlaygroundFeatureSchema }> = ({
     }
 
     return (
-        <StyledAlert severity={'info'} color={'info'}>
+        <Alert severity={'info'} color={'info'}>
             {text}, then this feature flag would be{' '}
             {feature.strategies?.result ? 'TRUE' : 'FALSE'} with strategies
             evaluated like this:
-        </StyledAlert>
+        </Alert>
     );
 };
 
@@ -59,7 +55,7 @@ export const PlaygroundResultFeatureStrategyList = ({
 
     if ((feature?.strategies?.data.length ?? 0) === 0) {
         return (
-            <Alert severity='warning' sx={{ mt: 2 }}>
+            <Alert severity='info'>
                 There are no strategies added to this feature flag in the
                 selected environment.
             </Alert>

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/PlaygroundResultStrategyLists.tsx

@@ -36,9 +36,7 @@ interface PlaygroundResultStrategyListProps {
     infoText?: string;
 }
 const StyledHeaderGroup = styled('hgroup')(({ theme }) => ({
-    paddingInline: `var(--popover-inline-padding, ${theme.spacing(4)})`,
     paddingBottom: theme.spacing(2),
-    borderBottom: `1px solid ${theme.palette.divider}`,
 }));
 
 const StyledListTitle = styled('h4')(({ theme }) => ({
@@ -52,8 +50,12 @@ const StyledListTitleDescription = styled('p')(({ theme }) => ({
     fontSize: theme.typography.body2.fontSize,
 }));
 
-const StyledFeatureStrategyItem = styled(FeatureStrategyItem)(({ theme }) => ({
-    paddingInline: `var(--popover-inline-padding, ${theme.spacing(4)})`,
+const RestyledContentList = styled(StyledContentList)(({ theme }) => ({
+    marginInline: `calc(var(--popover-inline-padding) * -1)`,
+    borderTop: `1px solid ${theme.palette.divider}`,
+    '> li:last-of-type': {
+        paddingBottom: 0,
+    },
 }));
 
 export const PlaygroundResultStrategyLists = ({
@@ -80,17 +82,17 @@ export const PlaygroundResultStrategyLists = ({
                     </StyledListTitleDescription>
                 ) : null}
             </StyledHeaderGroup>
-            <StyledContentList>
+            <RestyledContentList>
                 {strategies?.map((strategy, index) => (
                     <StyledListItem key={strategy.id}>
                         {index > 0 ? <StrategySeparator /> : ''}
-                        <StyledFeatureStrategyItem
+                        <FeatureStrategyItem
                             strategy={strategy}
                             input={input}
                         />
                     </StyledListItem>
                 ))}
-            </StyledContentList>
+            </RestyledContentList>
         </div>
     );
 };