From c0eedba400c0146f3c9b4b6ccae77f9ed32ce2ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Thu, 11 Sep 2025 10:50:16 +0100
Subject: [PATCH] chore: small updates to the new add strategy modal design
 (#10646)

https://linear.app/unleash/issue/2-3877/small-changes-to-match-the-new-designs

This adds 2 changes in our new "add strategy" modal to better align with
our sketches:
- Remove the "Custom strategies" filter: According to the designs,
they're part of the "Advanced strategies" filter;
- Update the project default tooltip in case you don't have access to
the project default strategy configuration;

Here are the design references:

<img width="330" height="148" alt="image"
src="https://github.com/user-attachments/assets/c508e776-5f54-4402-b148-321ea99e1134"
/>

<img width="657" height="371" alt="image"
src="https://github.com/user-attachments/assets/c9d8be22-99a3-46e3-b7a7-a77b94e0aa60"
/>

And this is how it looks like after this PR:

<img width="335" height="116" alt="image"
src="https://github.com/user-attachments/assets/f1e0cbec-d79a-49b6-a8a7-1b15f3f2726e"
/>

<img width="984" height="401" alt="image"
src="https://github.com/user-attachments/assets/7271ab5c-721e-4624-aebe-d3c5d7e402dd"
/>
---
 .../FeatureStrategyMenuCards.tsx              | 112 +++++++++++-------
 1 file changed, 71 insertions(+), 41 deletions(-)

diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx
index 47d0896e3d..ab66a2197e 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx
@@ -7,13 +7,19 @@ 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 useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview.ts';
-import { useMemo, useState } from 'react';
+import { useContext, useMemo, useState } from 'react';
 import {
     FeatureStrategyMenuCardsSection,
     StyledStrategyModalSectionHeader,
 } from './FeatureStrategyMenuCardsSection.tsx';
 import { FeatureStrategyMenuCardsReleaseTemplates } from './FeatureStrategyMenuCardsReleaseTemplates.tsx';
 import { QuickFilters } from 'component/common/QuickFilters/QuickFilters.tsx';
+import {
+    PROJECT_DEFAULT_STRATEGY_READ,
+    PROJECT_DEFAULT_STRATEGY_WRITE,
+    UPDATE_PROJECT,
+} from 'component/providers/AccessProvider/permissions.ts';
+import AccessContext from 'contexts/AccessContext.ts';
 
 const FILTERS = [
     { label: 'All', value: null },
@@ -21,7 +27,6 @@ const FILTERS = [
     { label: 'Standard strategies', value: 'standard' },
     { label: 'Release templates', value: 'releaseTemplates' },
     { label: 'Advanced strategies', value: 'advanced' },
-    { label: 'Custom strategies', value: 'custom' },
 ] as const;
 
 export type StrategyFilterValue = (typeof FILTERS)[number]['value'];
@@ -80,6 +85,7 @@ export const FeatureStrategyMenuCards = ({
     onClose,
 }: IFeatureStrategyMenuCardsProps) => {
     const { isEnterprise } = useUiConfig();
+    const { hasAccess } = useContext(AccessContext);
 
     const { strategies } = useStrategies();
     const { project } = useProjectOverview(projectId);
@@ -121,8 +127,11 @@ export const FeatureStrategyMenuCards = ({
         () =>
             FILTERS.filter(({ value }) => {
                 if (value === 'releaseTemplates') return isEnterprise();
-                if (value === 'advanced') return advancedStrategies.length > 0;
-                if (value === 'custom') return customStrategies.length > 0;
+                if (value === 'advanced')
+                    return (
+                        advancedStrategies.length > 0 ||
+                        customStrategies.length > 0
+                    );
                 return true;
             }),
         [isEnterprise, advancedStrategies.length, customStrategies.length],
@@ -132,6 +141,15 @@ export const FeatureStrategyMenuCards = ({
         return filter === null || filter === key;
     };
 
+    const hasAccessToDefaultStrategyConfig = hasAccess(
+        [
+            UPDATE_PROJECT,
+            PROJECT_DEFAULT_STRATEGY_READ,
+            PROJECT_DEFAULT_STRATEGY_WRITE,
+        ],
+        projectId,
+    );
+
     return (
         <StyledContainer>
             <StyledHeader>
@@ -164,16 +182,24 @@ export const FeatureStrategyMenuCards = ({
                                     <HelpIcon
                                         htmlTooltip
                                         tooltip={
-                                            <>
-                                                This is set per project, per
-                                                environment, and can be
-                                                configured{' '}
-                                                <StyledLink
-                                                    to={`/projects/${projectId}/settings/default-strategy`}
-                                                >
-                                                    here
-                                                </StyledLink>
-                                            </>
+                                            hasAccessToDefaultStrategyConfig ? (
+                                                <>
+                                                    This is set per project, per
+                                                    environment, and can be
+                                                    configured{' '}
+                                                    <StyledLink
+                                                        to={`/projects/${projectId}/settings/default-strategy`}
+                                                    >
+                                                        here
+                                                    </StyledLink>
+                                                </>
+                                            ) : (
+                                                <>
+                                                    This is set per project, per
+                                                    environment. Contact project
+                                                    owner to change it.
+                                                </>
+                                            )
                                         }
                                         size='16px'
                                     />
@@ -223,33 +249,37 @@ export const FeatureStrategyMenuCards = ({
                         setFilter={setFilter}
                     />
                 )}
-                {advancedStrategies.length > 0 && shouldRender('advanced') && (
-                    <FeatureStrategyMenuCardsSection title='Advanced strategies'>
-                        {advancedStrategies.map((strategy) => (
-                            <FeatureStrategyMenuCard
-                                key={strategy.name}
-                                projectId={projectId}
-                                featureId={featureId}
-                                environmentId={environmentId}
-                                strategy={strategy}
-                                onClose={onClose}
-                            />
-                        ))}
-                    </FeatureStrategyMenuCardsSection>
-                )}
-                {customStrategies.length > 0 && shouldRender('custom') && (
-                    <FeatureStrategyMenuCardsSection title='Custom strategies'>
-                        {customStrategies.map((strategy) => (
-                            <FeatureStrategyMenuCard
-                                key={strategy.name}
-                                projectId={projectId}
-                                featureId={featureId}
-                                environmentId={environmentId}
-                                strategy={strategy}
-                                onClose={onClose}
-                            />
-                        ))}
-                    </FeatureStrategyMenuCardsSection>
+                {shouldRender('advanced') && (
+                    <>
+                        {advancedStrategies.length > 0 && (
+                            <FeatureStrategyMenuCardsSection title='Advanced strategies'>
+                                {advancedStrategies.map((strategy) => (
+                                    <FeatureStrategyMenuCard
+                                        key={strategy.name}
+                                        projectId={projectId}
+                                        featureId={featureId}
+                                        environmentId={environmentId}
+                                        strategy={strategy}
+                                        onClose={onClose}
+                                    />
+                                ))}
+                            </FeatureStrategyMenuCardsSection>
+                        )}
+                        {customStrategies.length > 0 && (
+                            <FeatureStrategyMenuCardsSection title='Custom strategies'>
+                                {customStrategies.map((strategy) => (
+                                    <FeatureStrategyMenuCard
+                                        key={strategy.name}
+                                        projectId={projectId}
+                                        featureId={featureId}
+                                        environmentId={environmentId}
+                                        strategy={strategy}
+                                        onClose={onClose}
+                                    />
+                                ))}
+                            </FeatureStrategyMenuCardsSection>
+                        )}
+                    </>
                 )}
             </StyledScrollableContent>
         </StyledContainer>