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>({}); const [segments, setSegments] = useState([]); 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 ( <> + } + /> 0} show={ - <> -
-

Enabled for match:

- {renderConstraints()} - -
- +
+ {renderConstraints()} + +
} /> ({ + 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 => ( + +
+ Segment{' '} + + {segment.name} + +
+ +
+ ))} + + ); +}; + +const segmentPath = (segmentId: number): string => { + return `/segments/edit/${segmentId}`; +};