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']; export type StrategyFilterValue = (typeof FILTERS)[number]['value'];
const CUSTOM_STRATEGY_DISPLAY_LIMIT = 5;
const StyledContainer = styled(Box)(() => ({ const StyledContainer = styled(Box)(() => ({
width: '100%', width: '100%',
display: 'flex', display: 'flex',
@ -118,6 +120,9 @@ export const FeatureStrategyMenuCards = ({
(strategy) => strategy.editable, (strategy) => strategy.editable,
); );
const customStrategyDisplayLimit =
filter === 'custom' ? 0 : CUSTOM_STRATEGY_DISPLAY_LIMIT;
const availableFilters = useMemo( const availableFilters = useMemo(
() => () =>
FILTERS.filter(({ value }) => { FILTERS.filter(({ value }) => {
@ -281,7 +286,11 @@ export const FeatureStrategyMenuCards = ({
</FeatureStrategyMenuCardsSection> </FeatureStrategyMenuCardsSection>
)} )}
{shouldRender('custom') && customStrategies.length > 0 && ( {shouldRender('custom') && customStrategies.length > 0 && (
<FeatureStrategyMenuCardsSection title='Custom strategies'> <FeatureStrategyMenuCardsSection
title='Custom strategies'
limit={customStrategyDisplayLimit}
viewMore={() => setFilter('custom')}
>
{customStrategies.map(renderStrategy)} {customStrategies.map(renderStrategy)}
</FeatureStrategyMenuCardsSection> </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'; import type { ReactNode } from 'react';
export const StyledStrategyModalSectionHeader = styled(Box)(({ theme }) => ({ export const StyledStrategyModalSectionHeader = styled(Box)(({ theme }) => ({
@ -17,23 +17,52 @@ const StyledStrategyModalSectionGrid = styled(Box)(({ theme }) => ({
width: '100%', 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 { interface IFeatureStrategyMenuCardsSectionProps {
title?: string; title?: string;
children: ReactNode; limit?: number;
viewMore?: () => void;
viewMoreLabel?: string;
children: ReactNode[];
} }
export const FeatureStrategyMenuCardsSection = ({ export const FeatureStrategyMenuCardsSection = ({
title, title,
limit,
viewMore,
viewMoreLabel = 'View more',
children, children,
}: IFeatureStrategyMenuCardsSectionProps) => ( }: IFeatureStrategyMenuCardsSectionProps) => {
<Box> const limitedChildren = limit ? children.slice(0, limit) : children;
{title && (
<StyledStrategyModalSectionHeader> return (
{title} <Box>
</StyledStrategyModalSectionHeader> {title && (
)} <StyledStrategyModalSectionHeader>
<StyledStrategyModalSectionGrid> {title}
{children} </StyledStrategyModalSectionHeader>
</StyledStrategyModalSectionGrid> )}
</Box> <StyledStrategyModalSectionGrid>
); {limitedChildren}
{viewMore && limitedChildren.length < children.length && (
<StyledViewMoreButton
variant='text'
size='small'
onClick={viewMore}
>
{viewMoreLabel}
</StyledViewMoreButton>
)}
</StyledStrategyModalSectionGrid>
</Box>
);
};