chore: persist strategy filter when going back from release template preview (#10663)

https://linear.app/unleash/issue/2-3878/persist-strategy-filter-when-going-back-from-the-release-template

Persists the strategy filter in the new "add strategy" modal when going
back from the release template preview modal.

This is done by moving the filter to the parent component, so the filter
state persists across these navigations.

Also updates the button text in the release templates preview to say
"Apply template" for consistency, but only if the `newStrategyModal`
flag is enabled.

frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx

@@ -20,7 +20,10 @@ import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { ReleasePlanReviewDialog } from '../../FeatureView/FeatureOverview/ReleasePlan/ReleasePlanReviewDialog.tsx';
-import { FeatureStrategyMenuCards } from './FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx';
+import {
+    FeatureStrategyMenuCards,
+    type StrategyFilterValue,
+} from './FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx';
 import { useUiFlag } from 'hooks/useUiFlag.ts';
 
 interface IFeatureStrategyMenuProps {
@@ -61,6 +64,7 @@ export const FeatureStrategyMenu = ({
     const [isStrategyMenuDialogOpen, setIsStrategyMenuDialogOpen] =
         useState<boolean>(false);
     const [onlyReleasePlans, setOnlyReleasePlans] = useState<boolean>(false);
+    const [filter, setFilter] = useState<StrategyFilterValue>(null);
     const navigate = useNavigate();
     const { trackEvent } = usePlausibleTracker();
     const [selectedTemplate, setSelectedTemplate] =
@@ -251,6 +255,8 @@ export const FeatureStrategyMenu = ({
                         projectId={projectId}
                         featureId={featureId}
                         environmentId={environmentId}
+                        filter={filter}
+                        setFilter={setFilter}
                         onAddReleasePlan={(template) => {
                             setSelectedTemplate(template);
                             addReleasePlan(template);

frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx

@@ -6,7 +6,7 @@ import { Link as RouterLink, useNavigate } from 'react-router-dom';
 import CloseIcon from '@mui/icons-material/Close';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig.ts';
 import { HelpIcon } from 'component/common/HelpIcon/HelpIcon.tsx';
-import { useContext, useMemo, useState } from 'react';
+import { type Dispatch, type SetStateAction, useContext, useMemo } from 'react';
 import {
     FeatureStrategyMenuCardsSection,
     StyledStrategyModalSectionHeader,
@@ -79,6 +79,8 @@ interface IFeatureStrategyMenuCardsProps {
     projectId: string;
     featureId: string;
     environmentId: string;
+    filter: StrategyFilterValue;
+    setFilter: Dispatch<SetStateAction<StrategyFilterValue>>;
     onAddReleasePlan: (template: IReleasePlanTemplate) => void;
     onReviewReleasePlan: (template: IReleasePlanTemplate) => void;
     onClose: () => void;
@@ -88,6 +90,8 @@ export const FeatureStrategyMenuCards = ({
     projectId,
     featureId,
     environmentId,
+    filter,
+    setFilter,
     onAddReleasePlan,
     onReviewReleasePlan,
     onClose,
@@ -99,8 +103,6 @@ export const FeatureStrategyMenuCards = ({
 
     const { strategies } = useStrategies();
 
-    const [filter, setFilter] = useState<StrategyFilterValue>(null);
-
     const activeStrategies = strategies.filter(
         (strategy) => !strategy.deprecated,
     );

frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanReviewDialog.tsx

@@ -16,6 +16,7 @@ import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
 import { useReleasePlans } from 'hooks/api/getters/useReleasePlans/useReleasePlans';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import CloseIcon from '@mui/icons-material/Close';
+import { useUiFlag } from 'hooks/useUiFlag.ts';
 
 const StyledDialog = styled(Dialog)(({ theme }) => ({
     '& .MuiDialog-paper': {
@@ -81,6 +82,7 @@ export const ReleasePlanReviewDialog = ({
         featureName,
         environment,
     );
+    const newStrategyModalEnabled = useUiFlag('newStrategyModal');
 
     const activeReleasePlan = releasePlans[0];
 
@@ -140,7 +142,11 @@ export const ReleasePlanReviewDialog = ({
             </DialogContent>
             <StyledDialogActions>
                 <Button variant='contained' color='primary' onClick={onConfirm}>
-                    {crProtected ? 'Add suggestion to draft' : 'Use template'}
+                    {crProtected
+                        ? 'Add suggestion to draft'
+                        : newStrategyModalEnabled
+                          ? 'Apply template'
+                          : 'Use template'}
                 </Button>
             </StyledDialogActions>
         </StyledDialog>