Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-24 17:51:14 +02:00
Code Issues Projects Releases Wiki Activity

chore: limit total custom strategies displayed

Browse Source
This commit is contained in:
Nuno Góis 2025-09-24 12:41:23 +01:00
parent e98b511bb2
commit 6d6c662aef
No known key found for this signature in database
GPG Key ID: 71ECC689F1091765
2 changed files with 53 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx
View File

@ -38,6 +38,8 @@ const FILTERS = [
export type StrategyFilterValue = (typeof FILTERS)[number]['value'];
const CUSTOM_STRATEGY_DISPLAY_LIMIT = 5;
const StyledContainer = styled(Box)(() => ({
width: '100%',
display: 'flex',
@ -118,6 +120,9 @@ export const FeatureStrategyMenuCards = ({
(strategy) => strategy.editable,
);
const customStrategyDisplayLimit =
filter === 'custom' ? 0 : CUSTOM_STRATEGY_DISPLAY_LIMIT;
const availableFilters = useMemo(
() =>
FILTERS.filter(({ value }) => {
@ -281,7 +286,11 @@ export const FeatureStrategyMenuCards = ({
</FeatureStrategyMenuCardsSection>
)}
{shouldRender('custom') && customStrategies.length > 0 && (
<FeatureStrategyMenuCardsSection title='Custom strategies'>
<FeatureStrategyMenuCardsSection
title='Custom strategies'
limit={customStrategyDisplayLimit}
viewMore={() => setFilter('custom')}
>
{customStrategies.map(renderStrategy)}
</FeatureStrategyMenuCardsSection>
)}

57
frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCardsSection.tsx
View File

@ -1,4 +1,4 @@
import { Box, styled } from '@mui/material';
import { Box, Button, styled } from '@mui/material';
import type { ReactNode } from 'react';
export const StyledStrategyModalSectionHeader = styled(Box)(({ theme }) => ({
@ -17,23 +17,52 @@ const StyledStrategyModalSectionGrid = styled(Box)(({ theme }) => ({
width: '100%',
}));
const StyledViewMoreButton = styled(Button)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: theme.spacing(10),
padding: theme.spacing(2),
border: `1px solid ${theme.palette.divider}`,
borderRadius: theme.spacing(1),
}));
interface IFeatureStrategyMenuCardsSectionProps {
title?: string;
children: ReactNode;
limit?: number;
viewMore?: () => void;
viewMoreLabel?: string;
children: ReactNode[];
}
export const FeatureStrategyMenuCardsSection = ({
title,
limit,
viewMore,
viewMoreLabel = 'View more',
children,
}: IFeatureStrategyMenuCardsSectionProps) => (
<Box>
{title && (
<StyledStrategyModalSectionHeader>
{title}
</StyledStrategyModalSectionHeader>
)}
<StyledStrategyModalSectionGrid>
{children}
</StyledStrategyModalSectionGrid>
</Box>
);
}: IFeatureStrategyMenuCardsSectionProps) => {
const limitedChildren = limit ? children.slice(0, limit) : children;
return (
<Box>
{title && (
<StyledStrategyModalSectionHeader>
{title}
</StyledStrategyModalSectionHeader>
)}
<StyledStrategyModalSectionGrid>
{limitedChildren}
{viewMore && limitedChildren.length < children.length && (
<StyledViewMoreButton
variant='text'
size='small'
onClick={viewMore}
>
{viewMoreLabel}
</StyledViewMoreButton>
)}
</StyledStrategyModalSectionGrid>
</Box>
);
};