Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

feat: show segments in feature overview (#837)

Browse Source 
* feat: show segments in feature overview

* refactor: avoid segment updates without the UI flag
This commit is contained in:
olav 2022-04-01 11:11:53 +02:00 committed by GitHub
parent f309553a5f
commit 311915ba30
5 changed files with 95 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx
View File

@ -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',

21
frontend/src/component/feature/FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit.tsx
View File

@ -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',

18
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.tsx
View File

@ -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

19
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.styles.ts Normal file
View File

@ -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,
},
}));

43
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx Normal file
View File

@ -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}`;
};