feat: recently used constraints have use this button now (#9871)

Also splitted actions, so we have edit view actions, and view actions.


![image](https://github.com/user-attachments/assets/27220835-36d2-4782-86c4-25511f6f778f)

frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx

@@ -22,7 +22,7 @@ import {
 } from 'utils/operatorsForContext';
 import { InvertedOperatorButton } from '../StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton';
 import { CaseSensitiveButton } from '../StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton';
-import { ConstraintAccordionHeaderActions } from '../../ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions';
+import { ConstraintAccordionEditActions } from '../../ConstraintAccordionEditActions/ConstraintAccordionEditActions';
 import { styled } from '@mui/material';
 
 interface IConstraintAccordionViewHeader {
@@ -207,7 +207,7 @@ export const ConstraintAccordionEditHeader = ({
                     </StyledHeaderText>
                 }
             />
-            <ConstraintAccordionHeaderActions
+            <ConstraintAccordionEditActions
                 onDelete={onDelete}
                 onUndo={onUndo}
                 constraintChanges={constraintChanges}

frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEditActions/ConstraintAccordionEditActions.tsx

@@ -6,7 +6,7 @@ import Undo from '@mui/icons-material/Undo';
 import { ConditionallyRender } from '../../ConditionallyRender/ConditionallyRender';
 import type { IConstraint } from 'interfaces/strategy';
 
-interface ConstraintAccordionHeaderActionsProps {
+interface ConstraintAccordionEditActionsProps {
     onDelete?: () => void;
     onEdit?: () => void;
     onUndo?: () => void;
@@ -23,14 +23,14 @@ const StyledHeaderActions = styled('div')(({ theme }) => ({
     },
 }));
 
-export const ConstraintAccordionHeaderActions = ({
+export const ConstraintAccordionEditActions = ({
     onEdit,
     onDelete,
     onUndo,
     constraintChanges = [],
     disableDelete = false,
     disableEdit = false,
-}: ConstraintAccordionHeaderActionsProps) => {
+}: ConstraintAccordionEditActionsProps) => {
     const onEditClick =
         onEdit &&
         ((event: React.SyntheticEvent) => {

frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx

@@ -21,6 +21,7 @@ interface IConstraintAccordionViewProps {
     constraint: IConstraint;
     onDelete?: () => void;
     onEdit?: () => void;
+    onUse?: () => void;
     sx?: SxProps<Theme>;
     compact?: boolean;
     disabled?: boolean;
@@ -67,6 +68,7 @@ export const ConstraintAccordionView = ({
     constraint,
     onEdit,
     onDelete,
+    onUse,
     sx = undefined,
     compact = false,
     disabled = false,
@@ -103,6 +105,7 @@ export const ConstraintAccordionView = ({
                         constraint={constraint}
                         onEdit={onEdit}
                         onDelete={onDelete}
+                        onUse={onUse}
                         singleValue={singleValue}
                         allowExpand={setExpandable}
                         disabled={disabled}

frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx

@@ -2,15 +2,17 @@ import { ConstraintIcon } from 'component/common/LegacyConstraintAccordion/Const
 import type { IConstraint } from 'interfaces/strategy';
 import { ConstraintAccordionViewHeaderInfo } from './ConstraintAccordionViewHeaderInfo';
 import { ConstraintAccordionViewHeaderInfo as LegacyConstraintAccordionViewHeaderInfo } from './LegacyConstraintAccordionViewHeaderInfo';
-import { ConstraintAccordionHeaderActions } from '../../ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions';
 import { styled } from '@mui/system';
 import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
 import { useUiFlag } from 'hooks/useUiFlag';
+import { ConstraintAccordionViewActions } from '../../ConstraintAccordionViewActions/ConstraintAccordionViewActions';
+import { ConstraintAccordionEditActions } from '../../ConstraintAccordionEditActions/ConstraintAccordionEditActions';
 
 interface IConstraintAccordionViewHeaderProps {
     constraint: IConstraint;
     onDelete?: () => void;
     onEdit?: () => void;
+    onUse?: () => void;
     singleValue: boolean;
     expanded: boolean;
     allowExpand: (shouldExpand: boolean) => void;
@@ -33,6 +35,7 @@ export const ConstraintAccordionViewHeader = ({
     constraint,
     onEdit,
     onDelete,
+    onUse,
     singleValue,
     allowExpand,
     expanded,
@@ -68,11 +71,16 @@ export const ConstraintAccordionViewHeader = ({
                     disabled={disabled}
                 />
             )}
-            <ConstraintAccordionHeaderActions
-                onEdit={onEdit}
-                onDelete={onDelete}
-                disableEdit={disableEdit}
-            />
+            {onUse ? (
+                <ConstraintAccordionViewActions onUse={onUse} />
+            ) : (
+                // @deprecated : remove onEdit and onDelete from current file together with NewConstraintAccordionList and addEditStrategy flag
+                <ConstraintAccordionEditActions
+                    onEdit={onEdit}
+                    onDelete={onDelete}
+                    disableEdit={disableEdit}
+                />
+            )}
         </StyledContainer>
     );
 };

frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionViewActions/ConstraintAccordionViewActions.tsx

@@ -0,0 +1,50 @@
+import type React from 'react';
+import { Button, styled, Tooltip } from '@mui/material';
+import { ConditionallyRender } from '../../ConditionallyRender/ConditionallyRender';
+
+interface ConstraintAccordionHeaderActionsProps {
+    onUse?: () => void;
+}
+
+const StyledHeaderActions = styled('div')(({ theme }) => ({
+    marginLeft: 'auto',
+    whiteSpace: 'nowrap',
+    [theme.breakpoints.down('sm')]: {
+        display: 'none',
+    },
+}));
+
+const StyledButton = styled(Button)(({ theme }) => ({
+    fontSize: theme.typography.body2.fontSize,
+}));
+
+export const ConstraintAccordionViewActions = ({
+    onUse,
+}: ConstraintAccordionHeaderActionsProps) => {
+    const onUseClick =
+        onUse &&
+        ((event: React.SyntheticEvent) => {
+            event.stopPropagation();
+            onUse();
+        });
+
+    return (
+        <StyledHeaderActions>
+            <ConditionallyRender
+                condition={Boolean(onUseClick)}
+                show={
+                    <Tooltip title='Use constraint' arrow>
+                        <StyledButton
+                            variant='text'
+                            color='primary'
+                            onClick={onUseClick}
+                            data-testid='USE_CONSTRAINT_BUTTON'
+                        >
+                            Use this
+                        </StyledButton>
+                    </Tooltip>
+                }
+            />
+        </StyledHeaderActions>
+    );
+};

frontend/src/component/common/NewConstraintAccordion/NewConstraintAccordionList/NewConstraintAccordionList.tsx

@@ -166,8 +166,6 @@ export const NewConstraintAccordionList = forwardRef<
                                 <ConstraintAccordionView
                                     key={constraint[constraintId]}
                                     constraint={constraint}
-                                    onEdit={onEdit?.bind(null, constraint)}
-                                    onDelete={onRemove?.bind(null, index)}
                                 />
                             )
                         ) : (

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

@@ -139,7 +139,11 @@ export const FeatureStrategyConstraintAccordionList = forwardRef<
                         </Button>
                         <ConditionallyRender
                             condition={Boolean(addEditStrategy)}
-                            show={<RecentlyUsedConstraints />}
+                            show={
+                                <RecentlyUsedConstraints
+                                    setConstraints={setConstraints}
+                                />
+                            }
                         />
                     </div>
                 }

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

@@ -2,9 +2,10 @@ 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 type { IConstraint } from 'interfaces/strategy';
 
 type IRecentlyUsedConstraintsProps = {
-    temporary?: string;
+    setConstraints?: React.Dispatch<React.SetStateAction<IConstraint[]>>;
 };
 
 const StyledContainer = styled('div')(({ theme }) => ({
@@ -24,11 +25,11 @@ const StyledConstraintsContainer = styled('div')(({ theme }) => ({
 }));
 
 export const RecentlyUsedConstraints = ({
-    temporary,
+    setConstraints,
 }: IRecentlyUsedConstraintsProps) => {
     const { items: recentlyUsedConstraints } = useRecentlyUsedConstraints();
 
-    if (recentlyUsedConstraints.length === 0) {
+    if (recentlyUsedConstraints.length === 0 || !setConstraints) {
         return null;
     }
 
@@ -40,6 +41,9 @@ export const RecentlyUsedConstraints = ({
                     <ConstraintAccordionView
                         key={constraint[constraintId]}
                         constraint={constraint}
+                        onUse={() => {
+                            setConstraints((prev) => [...prev, constraint]);
+                        }}
                     />
                 ))}
             </StyledConstraintsContainer>