feat: better segment info (#3243)

## About the changes

- Updates the segment information on top to be clearer - No longer an
experimental feature, but we do have some limits in place;
- Also updates the documentation to better reflect this;

Co-authored-by: @thomasheartman


![image](https://user-images.githubusercontent.com/14320932/222380864-029e7eef-bcee-4576-b9af-22a591d494a9.png)

---------

Co-authored-by: Thomas Heartman <thomas@getunleash.ai>
Co-authored-by: Gastón Fournier <gaston@getunleash.ai>

frontend/src/component/segments/SegmentDocs.tsx

@@ -1,17 +1,24 @@
 import { Alert } from '@mui/material';
 import { useSegmentLimits } from 'hooks/api/getters/useSegmentLimits/useSegmentLimits';
 
-export const SegmentDocsValuesWarning = () => {
+export const SegmentDocsValuesInfo = () => {
     const { segmentValuesLimit } = useSegmentLimits();
 
     if (typeof segmentValuesLimit === 'undefined') {
         return null;
     }
 
     return (
-        <Alert severity="warning">
-            Segments is an experimental feature, currently limited to at most{' '}
-            {segmentValuesLimit} values. <SegmentLimitsLink />
+        <Alert severity="info">
+            A segment can have{' '}
+            <a
+                href="https://docs.getunleash.io/reference/segments#segment-limits"
+                target="_blank"
+                rel="noreferrer"
+            >
+                at most {segmentValuesLimit} across all of its contraints
+            </a>
+            . <SegmentLimitsLink />
         </Alert>
     );
 };
@@ -25,8 +32,15 @@ export const SegmentDocsValuesError = (props: { values: number }) => {
 
     return (
         <Alert severity="error">
-            Segments are limited to at most {segmentValuesLimit} values. This
-            segment currently has {props.values}{' '}
+            A segment can have{' '}
+            <a
+                href="https://docs.getunleash.io/reference/segments#segment-limits"
+                target="_blank"
+                rel="noreferrer"
+            >
+                at most {segmentValuesLimit} across all of its contraints
+            </a>
+            . This segment has {props.values}{' '}
             {props.values === 1 ? 'value' : 'values'}.
         </Alert>
     );
@@ -41,25 +55,23 @@ export const SegmentDocsStrategyWarning = () => {
 
     return (
         <Alert severity="warning">
-            Strategies are limited to {strategySegmentsLimit} segments.{' '}
-            <SegmentLimitsLink />
+            You can't apply more than {strategySegmentsLimit} segments to a
+            strategy. <SegmentLimitsLink />
         </Alert>
     );
 };
 
 const SegmentLimitsLink = () => {
     return (
         <>
-            Please{' '}
             <a
                 href="https://slack.unleash.run"
                 target="_blank"
                 rel="noreferrer"
-                style={{ color: 'inherit' }}
             >
-                get in touch
+                Get in touch
             </a>{' '}
-            if you would like this limit increased.
+            if you'd like to increase this limit.
         </>
     );
 };

frontend/src/component/segments/SegmentFormStepTwo.tsx

@@ -23,7 +23,7 @@ import {
     IAutocompleteBoxOption,
 } from 'component/common/AutocompleteBox/AutocompleteBox';
 import {
-    SegmentDocsValuesWarning,
+    SegmentDocsValuesInfo,
     SegmentDocsValuesError,
 } from 'component/segments/SegmentDocs';
 import { useSegmentValuesCount } from 'component/segments/hooks/useSegmentValuesCount';
@@ -43,7 +43,7 @@ const StyledForm = styled('div')(({ theme }) => ({
     height: '100%',
 }));
 
-const StyledWarning = styled('div')(({ theme }) => ({
+const StyledInfo = styled('div')(({ theme }) => ({
     marginBottom: '1.5rem',
 }));
 
@@ -130,9 +130,9 @@ export const SegmentFormStepTwo: React.FC<ISegmentFormPartTwoProps> = ({
     return (
         <>
             <StyledForm>
-                <StyledWarning>
-                    <SegmentDocsValuesWarning />
-                </StyledWarning>
+                <StyledInfo>
+                    <SegmentDocsValuesInfo />
+                </StyledInfo>
                 <div>
                     <StyledInputDescription>
                         Select the context fields you want to include in the

website/docs/reference/deploy/configuring-unleash.md

@@ -180,6 +180,20 @@ const start = async () => {
 start();
 ```
 
+### Segment limits {#segments}
+
+:::caution
+
+Changing segment limits could have a negative impact on the performance of Unleash SDKs and cause network congestion. Think twice before changing these values.
+
+:::
+
+Some facets of the [segments feature](../segments.mdx) can be customized via environment variables. This lets you change the [segment limits](../segments.mdx#segment-limits) that Unleash uses.
+
+`UNLEASH_STRATEGY_SEGMENTS_LIMIT` controls the maximum number of segments that can be applied to a single strategy. The default is 5.
+
+`UNLEASH_SEGMENT_VALUES_LIMIT` controls the maximum number of values that you can assign across a segment's constraints. The default is 100.
+
 ## Securing Unleash {#securing-unleash}
 
 You can integrate Unleash with your authentication provider (OAuth 2.0). Read more about [securing unleash](./securing-unleash.md).

website/docs/reference/segments.mdx

@@ -38,16 +38,26 @@ Segments are collections of strategy constraints. To satisfy a segment, _all_ th
 
 If an activation strategy has a segment _and_ additional constraints applied, the segment _and_ the strategies must all be satisfied. Similarly, if an activation strategy has multiple segments, then they must _must all be satisfied_.
 
-## Creating, updating, and deleting segments
+## Segment limits
 
-Segments can be created, edited, and deleted from the segments page in the admin UI or via the API (see the [segments API documentation](/reference/api/legacy/unleash/admin/segments.mdx)).
+In theory, you could create segments with a thousand constraints, each with a million values. But this wouldn't scale well, so there are limitations in place to stop you from doing this. Unleash enforces the following limits on use of segments:
 
-A segment that is in use **cannot** be deleted. If you'd like to delete a segment that is in use, you must first remove the segment from all the activation strategies that are currently using it.
+1. By default, a segment can have **at most 100 values** specified across all of its constraints. That means that if you add a constraint that uses 10 values, you will have 90 more values to use for any other constraints you add to the same segment.
 
-![The Segments page, listing two existing segments: "Mobile users" and "Users in the APAC region". The navigation menu with the Segments page link is opened and highlighted to provide navigation help.](/img/segments-page.png)
+2. By default, you can apply **at most 5 segments to any one strategy**. Separate strategies (even on the same feature) do not count towards the same total, so you can have two strategies with 5 segments each.
 
-### A note on large segments and limits {#large-segments}
+You **can** [configure segment limits](deploy/configuring-unleash.md#segments) with environment variables.
 
-In theory, you could you create segments with a thousand constraints, each with a million values. But this wouldn't scale well, so there are limitations in place to stop you from doing this. Segments are just constraints, so any limitations that apply to constraints also apply to segments.
+### A note on large segments {#large-segments}
+
+Segments are just constraints, so any limitations that apply to constraints also apply to segments.
 
 This means that if you want to add a hundred different user IDs to one of your constraints, you are most likely better off thinking about finding another way to solve this problem. That may be using a different abstraction or finding another pattern that you can use instead. Refer to the section on [constraint limitations](../reference/strategy-constraints.md#limitations) for a more thorough explanation.
+
+## Creating, updating, and deleting segments
+
+Segments can be created, edited, and deleted from the segments page in the admin UI or via the API (see the [segments API documentation](/reference/api/legacy/unleash/admin/segments.mdx)).
+
+A segment that is in use **cannot** be deleted. If you'd like to delete a segment that is in use, you must first remove the segment from all the activation strategies that are currently using it.
+
+![The Segments page, listing two existing segments: "Mobile users" and "Users in the APAC region". The navigation menu with the Segments page link is opened and highlighted to provide navigation help.](/img/segments-page.png)