From 311915ba30fd01f3c6071761bbe765dc5e3a0c14 Mon Sep 17 00:00:00 2001
From: olav <mail@olav.io>
Date: Fri, 1 Apr 2022 11:11:53 +0200
Subject: [PATCH] feat: show segments in feature overview (#837)

* feat: show segments in feature overview

* refactor: avoid segment updates without the UI flag
---
 .../FeatureStrategyCreate.tsx                 | 14 +++---
 .../FeatureStrategyEdit.tsx                   | 21 ++++++---
 .../FeatureOverviewExecution.tsx              | 18 +++++---
 .../FeatureOverviewSegment.styles.ts          | 19 ++++++++
 .../FeatureOverviewSegment.tsx                | 43 +++++++++++++++++++
 5 files changed, 95 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.styles.ts
 create mode 100644 frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx

diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx
index f660d5da12..9cffa66cf0 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx
@@ -53,12 +53,14 @@ export const FeatureStrategyCreate = () => {
                 environmentId,
                 createStrategyPayload(strategy)
             );
-            await setStrategySegments({
-                environmentId,
-                projectId,
-                strategyId: created.id,
-                segmentIds: segments.map(s => s.id),
-            });
+            if (uiConfig.flags.SE) {
+                await setStrategySegments({
+                    environmentId,
+                    projectId,
+                    strategyId: created.id,
+                    segmentIds: segments.map(s => s.id),
+                });
+            }
             setToastData({
                 title: 'Strategy created',
                 type: 'success',
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit.tsx
index 29629e653e..0166731c6b 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit.tsx
+++ b/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({
-                environmentId,
-                projectId,
-                strategyId,
-                segmentIds: segments.map(s => s.id),
-            });
+            if (uiConfig.flags.SE) {
+                await setStrategySegments({
+                    environmentId,
+                    projectId,
+                    strategyId,
+                    segmentIds: segments.map(s => s.id),
+                });
+                await refetchSavedStrategySegments();
+            }
             setToastData({
                 title: 'Strategy updated',
                 type: 'success',
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.tsx
index e26746e5ee..9e4b42b004 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.tsx
+++ b/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}>
-                            <p>Enabled for match:</p>
-                            {renderConstraints()}
-                            <StrategySeparator text="AND" />
-                        </div>
-                    </>
+                    <div className={styles.constraintsContainer}>
+                        {renderConstraints()}
+                        <StrategySeparator text="AND" />
+                    </div>
                 }
             />
             <ConditionallyRender
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.styles.ts
new file mode 100644
index 0000000000..a51a2c38dd
--- /dev/null
+++ b/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,
+    },
+}));
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx
new file mode 100644
index 0000000000..821b18ef96
--- /dev/null
+++ b/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}`;
+};