Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-05-31 01:16:01 +02:00
Code Issues Projects Releases Wiki Activity

Extract strategy list and list item to common

Browse Source
This commit is contained in:
Thomas Heartman 2025-03-21 10:07:07 +01:00
parent 37f6f7c43b
commit e50e705e96
No known key found for this signature in database
GPG Key ID: BD1F880DAED1EE78
6 changed files with 70 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/component/common/StrategyList/StrategyList.tsx Normal file
View File

@ -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),
},
}));

15
frontend/src/component/common/StrategyList/StrategyListItem.tsx Normal file
View File

@ -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),
}));

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

@ -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}

15
frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestone.tsx
View File

@ -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>
);

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

@ -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>
);
};

15
frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneList/MilestoneCard/MilestoneCard.tsx
View File

@ -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'