mirror of
https://github.com/Unleash/unleash.git
synced 2025-08-27 13:49:10 +02:00
chore(1-3420): wrap strategy list in an ordered list (#9377)
Improves the semantic correctness of the strategy list by wrapping it in an `ol` tag. Strategy order matters (due to variant resolution etc), so the order is important (hence the `ol` instead of a `ul`). Dragging still works and it's visually the same.
This commit is contained in:
parent
be3fa73244
commit
0c6ef912d4
@ -60,6 +60,12 @@ const AdditionalStrategiesDiv = styled('div')(({ theme }) => ({
|
|||||||
marginBottom: theme.spacing(2),
|
marginBottom: theme.spacing(2),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
const StyledStrategyList = styled('ol')({
|
||||||
|
listStyle: 'none',
|
||||||
|
padding: 0,
|
||||||
|
margin: 0,
|
||||||
|
});
|
||||||
|
|
||||||
export const EnvironmentAccordionBody = ({
|
export const EnvironmentAccordionBody = ({
|
||||||
featureEnvironment,
|
featureEnvironment,
|
||||||
isDisabled,
|
isDisabled,
|
||||||
@ -257,29 +263,33 @@ export const EnvironmentAccordionBody = ({
|
|||||||
!manyStrategiesPagination
|
!manyStrategiesPagination
|
||||||
}
|
}
|
||||||
show={
|
show={
|
||||||
<>
|
<StyledStrategyList>
|
||||||
{strategies.map((strategy, index) => (
|
{strategies.map((strategy, index) => (
|
||||||
<NewStrategyDraggableItem
|
<li key={strategy.id}>
|
||||||
key={strategy.id}
|
<NewStrategyDraggableItem
|
||||||
strategy={strategy}
|
strategy={strategy}
|
||||||
index={index}
|
index={index}
|
||||||
environmentName={
|
environmentName={
|
||||||
featureEnvironment.name
|
featureEnvironment.name
|
||||||
}
|
}
|
||||||
otherEnvironments={
|
otherEnvironments={
|
||||||
otherEnvironments
|
otherEnvironments
|
||||||
}
|
}
|
||||||
isDragging={
|
isDragging={
|
||||||
dragItem?.id === strategy.id
|
dragItem?.id ===
|
||||||
}
|
strategy.id
|
||||||
onDragStartRef={onDragStartRef}
|
}
|
||||||
onDragOver={onDragOver(
|
onDragStartRef={
|
||||||
strategy.id,
|
onDragStartRef
|
||||||
)}
|
}
|
||||||
onDragEnd={onDragEnd}
|
onDragOver={onDragOver(
|
||||||
/>
|
strategy.id,
|
||||||
|
)}
|
||||||
|
onDragEnd={onDragEnd}
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
))}
|
))}
|
||||||
</>
|
</StyledStrategyList>
|
||||||
}
|
}
|
||||||
elseShow={
|
elseShow={
|
||||||
<>
|
<>
|
||||||
@ -291,27 +301,35 @@ export const EnvironmentAccordionBody = ({
|
|||||||
segments.
|
segments.
|
||||||
</Alert>
|
</Alert>
|
||||||
<br />
|
<br />
|
||||||
{page.map((strategy, index) => (
|
<StyledStrategyList>
|
||||||
<StrategyDraggableItem
|
{page.map((strategy, index) => (
|
||||||
key={strategy.id}
|
<li key={strategy.id}>
|
||||||
strategy={strategy}
|
<StrategyDraggableItem
|
||||||
index={
|
strategy={strategy}
|
||||||
index + pageIndex * pageSize
|
index={
|
||||||
}
|
index +
|
||||||
environmentName={
|
pageIndex * pageSize
|
||||||
featureEnvironment.name
|
}
|
||||||
}
|
environmentName={
|
||||||
otherEnvironments={
|
featureEnvironment.name
|
||||||
otherEnvironments
|
}
|
||||||
}
|
otherEnvironments={
|
||||||
isDragging={false}
|
otherEnvironments
|
||||||
onDragStartRef={
|
}
|
||||||
(() => {}) as any
|
isDragging={false}
|
||||||
}
|
onDragStartRef={
|
||||||
onDragOver={(() => {}) as any}
|
(() => {}) as any
|
||||||
onDragEnd={(() => {}) as any}
|
}
|
||||||
/>
|
onDragOver={
|
||||||
))}
|
(() => {}) as any
|
||||||
|
}
|
||||||
|
onDragEnd={
|
||||||
|
(() => {}) as any
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</StyledStrategyList>
|
||||||
<br />
|
<br />
|
||||||
<Pagination
|
<Pagination
|
||||||
count={pages.length}
|
count={pages.length}
|
||||||
|
Loading…
Reference in New Issue
Block a user