chore: deprecate custom strategies (#7186)

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

@@ -10,6 +10,7 @@ import {
     Box,
     Divider,
     Typography,
+    Link,
 } from '@mui/material';
 import type {
     IFeatureStrategy,
@@ -42,7 +43,7 @@ import { useHasProjectEnvironmentAccess } from 'hooks/useHasAccess';
 import { FeatureStrategyTitle } from './FeatureStrategyTitle/FeatureStrategyTitle';
 import { FeatureStrategyEnabledDisabled } from './FeatureStrategyEnabledDisabled/FeatureStrategyEnabledDisabled';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
-import { formatStrategyName } from 'utils/strategyNames';
+import { BuiltInStrategies, formatStrategyName } from 'utils/strategyNames';
 import { Badge } from 'component/common/Badge/Badge';
 import EnvironmentIcon from 'component/common/EnvironmentIcon/EnvironmentIcon';
 
@@ -389,6 +390,29 @@ export const FeatureStrategyForm = ({
                         />
                     }
                 />
+
+                <ConditionallyRender
+                    condition={
+                        !BuiltInStrategies.includes(strategy.name || 'default')
+                    }
+                    show={
+                        <Alert severity='warning'>
+                            Custom strategies are deprecated. We recommend not
+                            adding them to any flags going forward and using the
+                            predefined strategies like Gradual rollout with{' '}
+                            <Link
+                                href={
+                                    'https://docs.getunleash.io/reference/strategy-constraints'
+                                }
+                                target='_blank'
+                                variant='body2'
+                            >
+                                constraints
+                            </Link>{' '}
+                            instead.
+                        </Alert>
+                    }
+                />
                 <FeatureStrategyEnabled
                     projectId={feature.project}
                     featureId={feature.name}

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx

@@ -1,5 +1,5 @@
 import { Fragment, useMemo, type VFC } from 'react';
-import { Box, Chip, styled } from '@mui/material';
+import { Alert, Box, Chip, Link, styled } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle';
 import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
@@ -17,6 +17,7 @@ import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 import { Badge } from 'component/common/Badge/Badge';
 import type { CreateFeatureStrategySchema } from 'openapi';
 import type { IFeatureStrategyPayload } from 'interfaces/strategy';
+import { BuiltInStrategies } from 'utils/strategyNames';
 
 interface IStrategyExecutionProps {
     strategy: IFeatureStrategyPayload | CreateFeatureStrategySchema;
@@ -41,6 +42,20 @@ const StyledContainer = styled(Box, {
     },
 }));
 
+const CustomStrategyDeprecationWarning = () => (
+    <Alert severity='warning' sx={{ mb: 2 }}>
+        Custom strategies are deprecated and may be removed in a future major
+        version. Consider rewriting this strategy as a predefined strategy with{' '}
+        <Link
+            href={'https://docs.getunleash.io/reference/strategy-constraints'}
+            target='_blank'
+            variant='body2'
+        >
+            constraints.
+        </Link>
+    </Alert>
+);
+
 const NoItems: VFC = () => (
     <Box sx={{ px: 3, color: 'text.disabled' }}>
         This strategy does not have constraints or parameters.
@@ -299,6 +314,14 @@ export const StrategyExecution: VFC<IStrategyExecutionProps> = ({
     ].filter(Boolean);
 
     return (
+        <>
+            <ConditionallyRender
+                condition={
+                    !BuiltInStrategies.includes(strategy.name || 'default')
+                }
+                show={<CustomStrategyDeprecationWarning />}
+            />
+
             <ConditionallyRender
                 condition={listItems.length > 0}
                 show={
@@ -316,5 +339,6 @@ export const StrategyExecution: VFC<IStrategyExecutionProps> = ({
                 }
                 elseShow={<NoItems />}
             />
+        </>
     );
 };

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/helpers.ts

@@ -1,15 +1,5 @@
 import type { PlaygroundFeatureSchema } from 'openapi';
-
-export const DEFAULT_STRATEGIES = [
-    'default',
-    'applicationHostname',
-    'flexibleRollout',
-    'gradualRolloutRandom',
-    'gradualRolloutSessionId',
-    'gradualRolloutUserId',
-    'remoteAddress',
-    'userWithId',
-];
+import { BuiltInStrategies } from 'utils/strategyNames';
 
 export function checkForEmptyValues(object?: Object): boolean {
     if (object === undefined) {
@@ -22,7 +12,7 @@ export function checkForEmptyValues(object?: Object): boolean {
 
 export const hasCustomStrategies = (feature: PlaygroundFeatureSchema) => {
     return feature.strategies?.data?.find(
-        (strategy) => !DEFAULT_STRATEGIES.includes(strategy.name),
+        (strategy) => !BuiltInStrategies.includes(strategy.name),
     );
 };
 
@@ -30,7 +20,7 @@ export const hasOnlyCustomStrategies = (feature: PlaygroundFeatureSchema) => {
     return (
         feature.strategies?.data?.length > 0 &&
         !feature.strategies?.data?.find((strategy) =>
-            DEFAULT_STRATEGIES.includes(strategy.name),
+            BuiltInStrategies.includes(strategy.name),
         )
     );
 };

frontend/src/component/strategies/CreateStrategy/CreateStrategy.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, Link } from 'react-router-dom';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import useToast from 'hooks/useToast';
 import FormTemplate from 'component/common/FormTemplate/FormTemplate';
@@ -11,6 +11,25 @@ import { formatUnknownError } from 'utils/formatUnknownError';
 import { CreateButton } from 'component/common/CreateButton/CreateButton';
 import { GO_BACK } from 'constants/navigate';
 import { CustomStrategyInfo } from '../CustomStrategyInfo/CustomStrategyInfo';
+import { Alert } from '@mui/material';
+
+const CreateStrategyDeprecationWarning = () => (
+    <Alert
+        severity='warning'
+        sx={(theme) => ({
+            marginBottom: theme.spacing(3),
+        })}
+    >
+        Custom strategies are deprecated and may be removed in a future major
+        release. We recommend using the predefined strategies like Gradual
+        rollout with{' '}
+        <Link to='https://docs.getunleash.io/reference/strategy-constraints'>
+            {' '}
+            constraints
+        </Link>{' '}
+        instead of creating a custom strategy.
+    </Alert>
+);
 
 export const CreateStrategy = () => {
     const { setToastData, setToastApiError } = useToast();
@@ -77,6 +96,7 @@ export const CreateStrategy = () => {
             documentationLinkLabel='Custom strategies documentation'
             formatApiCode={formatApiCode}
         >
+            <CreateStrategyDeprecationWarning />
             <CustomStrategyInfo alert />
             <StrategyForm
                 errors={errors}

frontend/src/component/strategies/CustomStrategyInfo/CustomStrategyInfo.tsx

@@ -17,11 +17,8 @@ export const CustomStrategyInfo: FC<{ alert?: boolean }> = ({ alert }) => {
     const content = (
         <>
             <Paragraph>
-                We recommend you to use the predefined strategies like Gradual
-                rollout with constraints instead of creating a custom strategy.
-            </Paragraph>
-            <Paragraph>
-                If you decide to create a custom strategy be aware of:
+                If you decide to create a custom strategy be aware of the
+                following:
                 <ul>
                     <li>
                         They require writing custom code and deployments for
@@ -32,8 +29,8 @@ export const CustomStrategyInfo: FC<{ alert?: boolean }> = ({ alert }) => {
                         to evaluate differently
                     </li>
                     <li>
-                        Requires a lot of configuration in both Unleash admin UI
-                        and the SDK.
+                        Custom strategies require a lot of configuration in both
+                        Unleash admin UI and the SDK.
                     </li>
                 </ul>
             </Paragraph>

frontend/src/component/strategies/StrategiesList/StrategiesList.tsx

@@ -1,6 +1,6 @@
 import { useState, useMemo, useCallback, type FC } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Box, Link, Typography, styled } from '@mui/material';
+import { Alert, Box, Link, Typography, styled } from '@mui/material';
 import Extension from '@mui/icons-material/Extension';
 import {
     Table,
@@ -110,6 +110,23 @@ const PredefinedStrategyTitle = () => (
     </Box>
 );
 
+const StrategyDeprecationWarning = () => (
+    <Alert severity='warning' sx={{ mb: 2 }}>
+        Custom strategies are deprecated and may be removed in a future major
+        version. We recommend not using custom strategies going forward and
+        instead using the predefined strategies with{' '}
+        <Link
+            href={'https://docs.getunleash.io/reference/strategy-constraints'}
+            target='_blank'
+            variant='body2'
+        >
+            constraints
+        </Link>
+        . If you have a need for custom strategies that you cannot support with
+        constraints, please reach out to us.
+    </Alert>
+);
+
 export const StrategiesList = () => {
     const navigate = useNavigate();
     const [dialogueMetaData, setDialogueMetaData] = useState<IDialogueMetaData>(
@@ -434,6 +451,7 @@ export const StrategiesList = () => {
                 }
             >
                 <Box>
+                    <StrategyDeprecationWarning />
                     <Table {...customGetTableProps()}>
                         <SortableTableHeader
                             headerGroups={customHeaderGroups}

frontend/src/utils/strategyNames.tsx

@@ -36,6 +36,17 @@ export const getFeatureStrategyIcon = (strategyName: string) => {
     }
 };
 
+export const BuiltInStrategies = [
+    'default',
+    'applicationHostname',
+    'flexibleRollout',
+    'gradualRolloutRandom',
+    'gradualRolloutSessionId',
+    'gradualRolloutUserId',
+    'remoteAddress',
+    'userWithId',
+];
+
 export const GetFeatureStrategyIcon: FC<{ strategyName: string }> = ({
     strategyName,
 }) => {

src/lib/routes/admin-api/strategy.ts

@@ -122,11 +122,12 @@ class StrategyController extends Controller {
             permission: CREATE_STRATEGY,
             middleware: [
                 openApiService.validPath({
+                    deprecated: true,
                     tags: ['Strategies'],
                     operationId: 'createStrategy',
                     summary: 'Create a strategy',
                     description:
-                        'Creates a strategy type based on the supplied data.',
+                        'Creates a custom strategy type based on the supplied data. Custom strategies are deprecated and should not be used. Prefer using built in strategies with constraints instead.',
                     requestBody: createRequestSchema('createStrategySchema'),
                     responses: {
                         201: resourceCreatedResponseSchema('strategySchema'),