Merge e50e705e96 into 3fa54f4465

frontend/src/component/common/StrategyList/StrategyList.tsx

@@ -0,0 +1,18 @@
+import { styled } from '@mui/material';
+
+export const StrategyList = styled('ol')(({ theme }) => ({
+    listStyle: 'none',
+    padding: 0,
+    margin: 0,
+
+    '& > li': {
+        paddingBlock: theme.spacing(2.5),
+        position: 'relative',
+    },
+    '& > li + li': {
+        borderTop: `1px solid ${theme.palette.divider}`,
+    },
+    '& > li:first-of-type': {
+        paddingTop: theme.spacing(1),
+    },
+}));

frontend/src/component/common/StrategyList/StrategyListItem.tsx

@@ -0,0 +1,15 @@
+import { type Theme, styled } from '@mui/material';
+
+export const releasePlanBackground = (theme: Theme) =>
+    theme.palette.background.elevation2;
+export const strategyBackground = (theme: Theme) =>
+    theme.palette.background.elevation1;
+
+export const StrategyListItem = styled('li')<{
+    'data-type'?: 'release-plan' | 'strategy';
+}>(({ theme, ...props }) => ({
+    background:
+        props['data-type'] === 'release-plan'
+            ? releasePlanBackground(theme)
+            : strategyBackground(theme),
+}));

frontend/src/component/common/StrategySeparator/StrategySeparator.tsx

@@ -1,4 +1,5 @@
 import { styled } from '@mui/material';
+import { disabledStrategyClassName } from '../StrategyItemContainer/disabled-strategy-utils';
 
 const Chip = styled('div')(({ theme }) => ({
     padding: theme.spacing(0.75, 1),
@@ -11,12 +12,14 @@ const Chip = styled('div')(({ theme }) => ({
     borderRadius: theme.shape.borderRadiusLarge,
     backgroundColor: theme.palette.secondary.border,
     left: theme.spacing(4),
+
+    // if the strategy it's applying to is disabled
+    [`&:has(+ * .${disabledStrategyClassName}, + .${disabledStrategyClassName})`]:
+        {
+            filter: 'grayscale(1)',
+        },
 }));
 
-export const StrategySeparator = ({ className }: { className?: string }) => {
+export const StrategySeparator = () => {
-    return (
+    return <Chip role='separator'>OR</Chip>;
-        <Chip role='separator' className={className}>
-            OR
-        </Chip>
-    );
 };

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/EnvironmentAccordionBody.tsx

@@ -4,7 +4,7 @@ import {
     useEffect,
     useState,
 } from 'react';
-import { Alert, Pagination, type Theme, styled } from '@mui/material';
+import { Alert, Pagination, styled } from '@mui/material';
 import useFeatureStrategyApi from 'hooks/api/actions/useFeatureStrategyApi/useFeatureStrategyApi';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import useToast from 'hooks/useToast';
@@ -22,7 +22,12 @@ import { useReleasePlans } from 'hooks/api/getters/useReleasePlans/useReleasePla
 import { ReleasePlan } from '../../../ReleasePlan/ReleasePlan';
 import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
 import { ProjectEnvironmentStrategyDraggableItem } from './StrategyDraggableItem/ProjectEnvironmentStrategyDraggableItem';
-import { disabledStrategyClassName } from 'component/common/StrategyItemContainer/disabled-strategy-utils';
+import {
+    StrategyListItem,
+    releasePlanBackground,
+    strategyBackground,
+} from 'component/common/StrategyList/StrategyListItem';
+import { StrategyList } from 'component/common/StrategyList/StrategyList';
 
 interface IEnvironmentAccordionBodyProps {
     isDisabled: boolean;
@@ -34,37 +39,6 @@ const StyledAccordionBodyInnerContainer = styled('div')(({ theme }) => ({
     borderBottom: `1px solid ${theme.palette.divider}`,
 }));
 
-export const StyledContentList = styled('ol')(({ theme }) => ({
-    listStyle: 'none',
-    padding: 0,
-    margin: 0,
-
-    '& > li': {
-        paddingBlock: theme.spacing(2.5),
-        position: 'relative',
-    },
-    '& > li + li': {
-        borderTop: `1px solid ${theme.palette.divider}`,
-    },
-    '& > li:first-of-type': {
-        paddingTop: theme.spacing(1),
-    },
-}));
-
-const releasePlanBackground = (theme: Theme) =>
-    theme.palette.background.elevation2;
-const strategyBackground = (theme: Theme) =>
-    theme.palette.background.elevation1;
-
-export const StyledListItem = styled('li')<{
-    'data-type'?: 'release-plan' | 'strategy';
-}>(({ theme, ...props }) => ({
-    background:
-        props['data-type'] === 'release-plan'
-            ? releasePlanBackground(theme)
-            : strategyBackground(theme),
-}));
-
 const AlertContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(2),
     paddingBottom: theme.spacing(0),
@@ -74,14 +48,6 @@ const AlertContainer = styled('div')(({ theme }) => ({
     },
 }));
 
-// todo: consider exporting this into a shared thing or move it into the separator itself (either as a disabled prop or using the css here)
-export const StyledStrategySeparator = styled(StrategySeparator)({
-    [`&:has(+ * .${disabledStrategyClassName}, + .${disabledStrategyClassName})`]:
-        {
-            filter: 'grayscale(1)',
-        },
-});
-
 export const EnvironmentAccordionBody = ({
     featureEnvironment,
     isDisabled,
@@ -257,21 +223,21 @@ export const EnvironmentAccordionBody = ({
                     </Alert>
                 </AlertContainer>
             ) : null}
-            <StyledContentList>
+            <StrategyList>
                 {releasePlans.map((plan) => (
-                    <StyledListItem data-type='release-plan' key={plan.id}>
+                    <StrategyListItem data-type='release-plan' key={plan.id}>
                         <ReleasePlan
                             plan={plan}
                             environmentIsDisabled={isDisabled}
                         />
-                    </StyledListItem>
+                    </StrategyListItem>
                 ))}
                 {paginateStrategies ? (
                     <>
                         {page.map((strategy, index) => (
-                            <StyledListItem key={strategy.id}>
+                            <StrategyListItem key={strategy.id}>
                                 {index > 0 || releasePlans.length > 0 ? (
-                                    <StyledStrategySeparator />
+                                    <StrategySeparator />
                                 ) : null}
 
                                 <ProjectEnvironmentStrategyDraggableItem
@@ -280,15 +246,15 @@ export const EnvironmentAccordionBody = ({
                                     environmentName={featureEnvironment.name}
                                     otherEnvironments={otherEnvironments}
                                 />
-                            </StyledListItem>
+                            </StrategyListItem>
                         ))}
                     </>
                 ) : (
                     <>
                         {strategies.map((strategy, index) => (
-                            <StyledListItem key={strategy.id}>
+                            <StrategyListItem key={strategy.id}>
                                 {index > 0 || releasePlans.length > 0 ? (
-                                    <StyledStrategySeparator />
+                                    <StrategySeparator />
                                 ) : null}
 
                                 <ProjectEnvironmentStrategyDraggableItem
@@ -301,11 +267,11 @@ export const EnvironmentAccordionBody = ({
                                     onDragOver={onDragOver(strategy.id)}
                                     onDragEnd={onDragEnd}
                                 />
-                            </StyledListItem>
+                            </StrategyListItem>
                         ))}
                     </>
                 )}
-            </StyledContentList>
+            </StrategyList>
             {paginateStrategies ? (
                 <Pagination
                     count={pages.length}

frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestone.tsx

@@ -11,12 +11,11 @@ import {
     type MilestoneStatus,
 } from './ReleasePlanMilestoneStatus';
 import { useState } from 'react';
-import {
+
-    StyledContentList,
-    StyledListItem,
-} from '../../FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/EnvironmentAccordionBody';
 import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
 import { StrategyItem } from '../../FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem';
+import { StrategyList } from 'component/common/StrategyList/StrategyList';
+import { StrategyListItem } from 'component/common/StrategyList/StrategyListItem';
 
 const StyledAccordion = styled(Accordion, {
     shouldForwardProp: (prop) => prop !== 'status',
@@ -117,9 +116,9 @@ export const ReleasePlanMilestone = ({
                 </StyledSecondaryLabel>
             </StyledAccordionSummary>
             <StyledAccordionDetails>
-                <StyledContentList>
+                <StrategyList>
                     {milestone.strategies.map((strategy, index) => (
-                        <StyledListItem key={strategy.id}>
+                        <StrategyListItem key={strategy.id}>
                             {index > 0 ? <StrategySeparator /> : null}
 
                             <StrategyItem
@@ -132,9 +131,9 @@ export const ReleasePlanMilestone = ({
                                         '',
                                 }}
                             />
-                        </StyledListItem>
+                        </StrategyListItem>
                     ))}
-                </StyledContentList>
+                </StrategyList>
             </StyledAccordionDetails>
         </StyledAccordion>
     );

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

@@ -3,12 +3,11 @@ import type {
     PlaygroundStrategySchema,
     PlaygroundRequestSchema,
 } from 'openapi';
-import {
+
-    StyledContentList,
-    StyledListItem,
-    StyledStrategySeparator,
-} from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/EnvironmentAccordionBody';
 import { FeatureStrategyItem } from './StrategyItem/FeatureStrategyItem';
+import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
+import { StrategyList } from 'component/common/StrategyList/StrategyList';
+import { StrategyListItem } from 'component/common/StrategyList/StrategyListItem';
 
 interface PlaygroundResultStrategyListProps {
     strategies: PlaygroundStrategySchema[];
@@ -31,7 +30,7 @@ const StyledListTitleDescription = styled('p')(({ theme }) => ({
     fontSize: theme.typography.body2.fontSize,
 }));
 
-const RestyledContentList = styled(StyledContentList)(({ theme }) => ({
+const StyledStrategyList = styled(StrategyList)(({ theme }) => ({
     marginInline: `calc(var(--popover-inline-padding) * -1)`,
     borderTop: `1px solid ${theme.palette.divider}`,
     '> li:last-of-type': {
@@ -63,17 +62,17 @@ export const PlaygroundResultStrategyLists = ({
                     </StyledListTitleDescription>
                 ) : null}
             </StyledHeaderGroup>
-            <RestyledContentList>
+            <StyledStrategyList>
                 {strategies?.map((strategy, index) => (
-                    <StyledListItem key={strategy.id}>
+                    <StrategyListItem key={strategy.id}>
-                        {index > 0 ? <StyledStrategySeparator /> : ''}
+                        {index > 0 ? <StrategySeparator /> : ''}
                         <FeatureStrategyItem
                             strategy={strategy}
                             input={input}
                         />
-                    </StyledListItem>
+                    </StrategyListItem>
                 ))}
-            </RestyledContentList>
+            </StyledStrategyList>
         </div>
     );
 };

frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneList/MilestoneCard/MilestoneCard.tsx

@@ -19,15 +19,14 @@ import { ReleasePlanTemplateAddStrategyForm } from '../../MilestoneStrategy/Rele
 import DragIndicator from '@mui/icons-material/DragIndicator';
 import { type OnMoveItem, useDragItem } from 'hooks/useDragItem';
 import type { IExtendedMilestonePayload } from 'component/releases/hooks/useTemplateForm';
-import {
+
-    StyledContentList,
-    StyledListItem,
-} from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/EnvironmentAccordionBody';
 import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
 import Edit from '@mui/icons-material/Edit';
 import Delete from '@mui/icons-material/DeleteOutlined';
 import { StrategyDraggableItem } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyDraggableItem';
 import { ScreenReaderOnly } from 'component/common/ScreenReaderOnly/ScreenReaderOnly';
+import { StrategyList } from 'component/common/StrategyList/StrategyList';
+import { StrategyListItem } from 'component/common/StrategyList/StrategyListItem';
 
 const leftPadding = 3;
 
@@ -469,9 +468,9 @@ export const MilestoneCard = ({
                         />
                     </StyledAccordionSummary>
                     <StyledAccordionDetails>
-                        <StyledContentList>
+                        <StrategyList>
                             {milestone.strategies.map((strg, index) => (
-                                <StyledListItem key={strg.id}>
+                                <StrategyListItem key={strg.id}>
                                     {index > 0 ? <StrategySeparator /> : null}
 
                                     <StrategyDraggableItem
@@ -513,9 +512,9 @@ export const MilestoneCard = ({
                                             </>
                                         }
                                     />
-                                </StyledListItem>
+                                </StrategyListItem>
                             ))}
-                        </StyledContentList>
+                        </StrategyList>
                         <StyledAccordionFooter>
                             <Button
                                 variant='text'