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

feat: recently used segment chip (#9895)

Browse Source
This commit is contained in:
Jaanus Sellin 2025-05-06 11:56:46 +03:00 committed by GitHub
parent af93f93836
commit 79abbc832f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 48 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/RecentlyUsedSegments/RecentlyUsedSegmentChip.tsx Normal file
View File

@ -0,0 +1,46 @@
import type React from 'react';
import type { ISegment } from 'interfaces/segment';
import AddIcon from '@mui/icons-material/Add';
import { Chip, styled, Tooltip } from '@mui/material';
interface IRecentlyUsedSegmentChipProps {
segment: ISegment;
setSegments: React.Dispatch<React.SetStateAction<ISegment[]>>;
}
const StyledChip = styled(Chip)(({ theme }) => ({
background: 'transparent',
height: 'auto',
fontSize: theme.typography.body2.fontSize,
padding: theme.spacing(0.5),
border: `1px dashed ${theme.palette.divider}`,
'& .MuiChip-icon': {
color: theme.palette.neutral.main,
},
}));
export const RecentlyUsedSegmentChip = ({
segment,
setSegments,
}: IRecentlyUsedSegmentChipProps) => {
const onAdd = () => {
setSegments((prev) => {
if (prev.some((s) => s.id === segment.id)) {
return prev;
}
return [...prev, segment];
});
};
return (
<Tooltip title='Add segment' arrow>
<StyledChip
label={segment.name}
icon={<AddIcon />}
onClick={onAdd}
size='small'
variant='outlined'
/>
</Tooltip>
);
};

6
frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/RecentlyUsedSegments/RecentlyUsedSegments.tsx
View File

@ -1,7 +1,7 @@
import { styled, Typography } from '@mui/material';
import { useRecentlyUsedSegments } from './useRecentlyUsedSegments';
import type { ISegment } from 'interfaces/segment';
import { FeatureStrategySegmentChip } from '../FeatureStrategySegmentChip';
import { RecentlyUsedSegmentChip } from './RecentlyUsedSegmentChip';
import { useSegments } from 'hooks/api/getters/useSegments/useSegments';
import { useUiFlag } from 'hooks/useUiFlag';
@ -54,12 +54,10 @@ export const RecentlyUsedSegments = ({
<StyledHeader>Recently used segments</StyledHeader>
<StyledSegmentsContainer>
{segmentObjects.map((segment) => (
<FeatureStrategySegmentChip
<RecentlyUsedSegmentChip
key={segment.id}
segment={segment}
setSegments={setSegments}
preview={undefined}
setPreview={() => {}}
/>
))}
</StyledSegmentsContainer>