diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraintAccordionList/FeatureStrategyConstraintAccordionList.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraintAccordionList/FeatureStrategyConstraintAccordionList.tsx
index bf8015c1f7..3880a3e8ca 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraintAccordionList/FeatureStrategyConstraintAccordionList.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraintAccordionList/FeatureStrategyConstraintAccordionList.tsx
@@ -15,6 +15,7 @@ import { EditableConstraintsList } from 'component/common/NewConstraintAccordion
import { Limit } from 'component/common/Limit/Limit';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { useUiFlag } from 'hooks/useUiFlag';
+import { RecentlyUsedConstraints } from '../RecentlyUsedConstraints';
interface IConstraintAccordionListProps {
constraints: IConstraint[];
@@ -136,6 +137,10 @@ export const FeatureStrategyConstraintAccordionList = forwardRef<
>
Add constraint
+ }
+ />
}
/>
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/RecentlyUsedConstraints.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/RecentlyUsedConstraints.tsx
new file mode 100644
index 0000000000..20db866c1e
--- /dev/null
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/RecentlyUsedConstraints.tsx
@@ -0,0 +1,58 @@
+import type { IConstraint } from 'interfaces/strategy';
+import { styled, Typography } from '@mui/material';
+import { ConstraintAccordionView } from 'component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView';
+import { constraintId } from 'component/common/LegacyConstraintAccordion/ConstraintAccordionList/createEmptyConstraint';
+
+type IRecentlyUsedConstraintsProps = {
+ temporary?: string;
+};
+
+const StyledContainer = styled('div')(({ theme }) => ({
+ marginTop: theme.spacing(3),
+}));
+
+const StyledHeader = styled(Typography)(({ theme }) => ({
+ fontSize: theme.fontSizes.smallerBody,
+ color: theme.palette.text.secondary,
+ marginBottom: theme.spacing(1),
+}));
+
+const StyledConstraintsContainer = styled('div')(({ theme }) => ({
+ display: 'flex',
+ flexDirection: 'column',
+ gap: theme.spacing(1),
+}));
+
+export const RecentlyUsedConstraints = ({
+ temporary,
+}: IRecentlyUsedConstraintsProps) => {
+ // Mock constraint for now
+ const mockConstraints: IConstraint[] = [
+ {
+ contextName: 'userId',
+ operator: 'IN',
+ values: ['123', '456', '789'],
+ value: '',
+ },
+ {
+ contextName: 'environment',
+ operator: 'STR_CONTAINS',
+ values: ['production'],
+ value: '',
+ },
+ ];
+
+ return (
+
+ Recently used constraints
+
+ {mockConstraints.map((constraint) => (
+
+ ))}
+
+
+ );
+};