Extract strategy list and list item to common

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/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,6 +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 {
+    StrategyListItem,
+    releasePlanBackground,
+    strategyBackground,
+} from 'component/common/StrategyList/StrategyListItem';
+import { StrategyList } from 'component/common/StrategyList/StrategyList';
 
 interface IEnvironmentAccordionBodyProps {
     isDisabled: boolean;
@@ -33,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),
@@ -248,19 +223,19 @@ 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 ? (
                                     <StrategySeparator />
                                 ) : null}
@@ -271,13 +246,13 @@ 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 ? (
                                     <StrategySeparator />
                                 ) : null}
@@ -292,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,
-} 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 ? <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'