feat: show segments in feature overview (#837)

* feat: show segments in feature overview

* refactor: avoid segment updates without the UI flag

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

@@ -53,12 +53,14 @@ export const FeatureStrategyCreate = () => {
                 environmentId,
                 createStrategyPayload(strategy)
             );
-            await setStrategySegments({
+            if (uiConfig.flags.SE) {
-                environmentId,
+                await setStrategySegments({
-                projectId,
+                    environmentId,
-                strategyId: created.id,
+                    projectId,
-                segmentIds: segments.map(s => s.id),
+                    strategyId: created.id,
-            });
+                    segmentIds: segments.map(s => s.id),
+                });
+            }
             setToastData({
                 title: 'Strategy created',
                 type: 'success',

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

@@ -25,7 +25,6 @@ export const FeatureStrategyEdit = () => {
     const [strategy, setStrategy] = useState<Partial<IFeatureStrategy>>({});
     const [segments, setSegments] = useState<ISegment[]>([]);
     const { updateStrategyOnFeature, loading } = useFeatureStrategyApi();
-    const { segments: savedStrategySegments } = useSegments(strategyId);
     const { feature, refetchFeature } = useFeature(projectId, featureId);
     const { setStrategySegments } = useSegmentsApi();
     const { setToastData, setToastApiError } = useToast();
@@ -33,6 +32,11 @@ export const FeatureStrategyEdit = () => {
     const { unleashUrl } = uiConfig;
     const { push } = useHistory();
 
+    const {
+        segments: savedStrategySegments,
+        refetchSegments: refetchSavedStrategySegments,
+    } = useSegments(strategyId);
+
     useEffect(() => {
         const savedStrategy = feature.environments
             .flatMap(environment => environment.strategies)
@@ -54,12 +58,15 @@ export const FeatureStrategyEdit = () => {
                 strategyId,
                 createStrategyPayload(strategy)
             );
-            await setStrategySegments({
+            if (uiConfig.flags.SE) {
-                environmentId,
+                await setStrategySegments({
-                projectId,
+                    environmentId,
-                strategyId,
+                    projectId,
-                segmentIds: segments.map(s => s.id),
+                    strategyId,
-            });
+                    segmentIds: segments.map(s => s.id),
+                });
+                await refetchSavedStrategySegments();
+            }
             setToastData({
                 title: 'Strategy updated',
                 type: 'success',

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.tsx

@@ -8,6 +8,8 @@ import FeatureOverviewExecutionChips from './FeatureOverviewExecutionChips/Featu
 import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies';
 import Constraint from 'component/common/Constraint/Constraint';
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { FeatureOverviewSegment } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment';
 
 interface IFeatureOverviewExecutionProps {
     parameters: IParameter;
@@ -23,6 +25,7 @@ const FeatureOverviewExecution = ({
 }: IFeatureOverviewExecutionProps) => {
     const styles = useStyles();
     const { strategies } = useStrategies();
+    const { uiConfig } = useUiConfig();
 
     if (!parameters) return null;
 
@@ -238,16 +241,17 @@ const FeatureOverviewExecution = ({
 
     return (
         <>
+            <ConditionallyRender
+                condition={Boolean(uiConfig.flags.SE)}
+                show={<FeatureOverviewSegment strategyId={strategy.id} />}
+            />
             <ConditionallyRender
                 condition={constraints.length > 0}
                 show={
-                    <>
+                    <div className={styles.constraintsContainer}>
-                        <div className={styles.constraintsContainer}>
+                        {renderConstraints()}
-                            <p>Enabled for match:</p>
+                        <StrategySeparator text="AND" />
-                            {renderConstraints()}
+                    </div>
-                            <StrategySeparator text="AND" />
-                        </div>
-                    </>
                 }
             />
             <ConditionallyRender

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.styles.ts

@@ -0,0 +1,19 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+export const useStyles = makeStyles(theme => ({
+    container: {
+        width: '100%',
+        padding: '1rem',
+        fontSize: theme.fontSizes.smallBody,
+        backgroundColor: theme.palette.grey[200],
+        margin: '0.5rem 0',
+        position: 'relative',
+        borderRadius: '5px',
+        textAlign: 'center',
+    },
+    link: {
+        textDecoration: 'none',
+        fontWeight: theme.fontWeight.bold,
+        color: theme.palette.primary.main,
+    },
+}));

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx

@@ -0,0 +1,43 @@
+import { useStyles } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.styles';
+import { useSegments } from 'hooks/api/getters/useSegments/useSegments';
+import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
+import { Link } from 'react-router-dom';
+import { Fragment } from 'react';
+
+interface IFeatureOverviewSegmentProps {
+    strategyId: string;
+}
+
+export const FeatureOverviewSegment = ({
+    strategyId,
+}: IFeatureOverviewSegmentProps) => {
+    const styles = useStyles();
+    const { segments } = useSegments(strategyId);
+
+    if (!segments || segments.length === 0) {
+        return null;
+    }
+
+    return (
+        <>
+            {segments.map(segment => (
+                <Fragment key={segment.id}>
+                    <div className={styles.container}>
+                        Segment{' '}
+                        <Link
+                            to={segmentPath(segment.id)}
+                            className={styles.link}
+                        >
+                            {segment.name}
+                        </Link>
+                    </div>
+                    <StrategySeparator text="AND" />
+                </Fragment>
+            ))}
+        </>
+    );
+};
+
+const segmentPath = (segmentId: number): string => {
+    return `/segments/edit/${segmentId}`;
+};