feat: now recently used constraints are not shown if already in use (#9984)

frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraintAccordionList/FeatureStrategyConstraintAccordionList.tsx

@@ -139,6 +139,7 @@ export const FeatureStrategyConstraintAccordionList = forwardRef<
                             show={
                                 <RecentlyUsedConstraints
                                     setConstraints={setConstraints}
+                                    constraints={constraints}
                                 />
                             }
                         />

frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/RecentlyUsedConstraints/RecentlyUsedConstraints.tsx

@@ -1,11 +1,15 @@
 import { styled, Typography } from '@mui/material';
 import { ConstraintAccordionView } from 'component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView';
 import { constraintId } from 'component/common/LegacyConstraintAccordion/ConstraintAccordionList/createEmptyConstraint';
-import { useRecentlyUsedConstraints } from './useRecentlyUsedConstraints';
+import {
+    useRecentlyUsedConstraints,
+    areConstraintsEqual,
+} from './useRecentlyUsedConstraints';
 import type { IConstraint } from 'interfaces/strategy';
 
 type IRecentlyUsedConstraintsProps = {
     setConstraints?: React.Dispatch<React.SetStateAction<IConstraint[]>>;
+    constraints?: IConstraint[];
 };
 
 const StyledContainer = styled('div')(({ theme }) => ({
@@ -26,6 +30,7 @@ const StyledConstraintsContainer = styled('div')(({ theme }) => ({
 
 export const RecentlyUsedConstraints = ({
     setConstraints,
+    constraints = [],
 }: IRecentlyUsedConstraintsProps) => {
     const { items: recentlyUsedConstraints } = useRecentlyUsedConstraints();
 
@@ -33,11 +38,22 @@ export const RecentlyUsedConstraints = ({
         return null;
     }
 
+    const nonSelectedRecentConstraints = recentlyUsedConstraints.filter(
+        (recentConstraint) =>
+            !constraints.some((constraint) =>
+                areConstraintsEqual(constraint, recentConstraint),
+            ),
+    );
+
+    if (nonSelectedRecentConstraints.length === 0) {
+        return null;
+    }
+
     return (
         <StyledContainer>
             <StyledHeader>Recently used constraints</StyledHeader>
             <StyledConstraintsContainer>
-                {recentlyUsedConstraints.map((constraint) => (
+                {nonSelectedRecentConstraints.map((constraint) => (
                     <ConstraintAccordionView
                         key={constraint[constraintId]}
                         constraint={constraint}

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

@@ -47,11 +47,11 @@ export const RecentlyUsedSegments = ({
         .map((id) => allSegments.find((segment) => segment.id === id))
         .filter((segment) => segment !== undefined) as ISegment[];
 
-    const filteredSegmentObjects = segmentObjects.filter(
+    const nonSelectedRecentSegments = segmentObjects.filter(
         (segment) => !segments.some((selected) => selected.id === segment.id),
     );
 
-    if (filteredSegmentObjects.length === 0) {
+    if (nonSelectedRecentSegments.length === 0) {
         return null;
     }
 
@@ -59,7 +59,7 @@ export const RecentlyUsedSegments = ({
         <StyledContainer>
             <StyledHeader>Recently used segments</StyledHeader>
             <StyledSegmentsContainer>
-                {filteredSegmentObjects.map((segment) => (
+                {nonSelectedRecentSegments.map((segment) => (
                     <RecentlyUsedSegmentChip
                         key={segment.id}
                         segment={segment}