feat: recently used segment chip (#9895)

frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/RecentlyUsedSegments/RecentlyUsedSegmentChip.tsx

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

frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/RecentlyUsedSegments/RecentlyUsedSegments.tsx

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