Skip to content

Commit 37f0c6f

Browse files
Refactor feature strategy list to use DisabledInfo component
1 parent 14512c7 commit 37f0c6f

File tree

2 files changed

+39
-87
lines changed

2 files changed

+39
-87
lines changed

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/PlaygroundResultsFeatureStrategyList.tsx

+39-18
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,48 @@
1-
import {
2-
PlaygroundResultStrategyLists,
3-
WrappedPlaygroundResultStrategyList,
4-
} from './StrategyList/playgroundResultStrategyLists';
1+
import { PlaygroundResultStrategyLists } from './StrategyList/PlaygroundResultStrategyLists';
52
import type { PlaygroundFeatureSchema, PlaygroundRequestSchema } from 'openapi';
6-
import { Alert } from '@mui/material';
3+
import { Alert, styled } from '@mui/material';
74

85
interface PlaygroundResultFeatureStrategyListProps {
96
feature: PlaygroundFeatureSchema;
107
input?: PlaygroundRequestSchema;
118
}
129

10+
const StyledAlert = styled(Alert)(({ theme }) => ({
11+
marginInline: `var(--popover-inline-padding, ${theme.spacing(4)})`,
12+
}));
13+
14+
const DisabledInfo = ({ feature }: { feature: PlaygroundFeatureSchema }) => {
15+
const resolveHintText = (feature: PlaygroundFeatureSchema) => {
16+
if (
17+
feature.hasUnsatisfiedDependency &&
18+
!feature.isEnabledInCurrentEnvironment
19+
) {
20+
return 'If the environment was enabled and parent dependencies were satisfied';
21+
}
22+
if (feature.hasUnsatisfiedDependency) {
23+
return 'If parent dependencies were satisfied';
24+
}
25+
if (!feature.isEnabledInCurrentEnvironment) {
26+
return 'If the environment was enabled';
27+
}
28+
return '';
29+
};
30+
31+
const text = resolveHintText(feature);
32+
33+
if (!text) {
34+
return null;
35+
}
36+
37+
return (
38+
<StyledAlert severity={'info'} color={'info'}>
39+
{resolveHintText(feature)}, then this feature flag would be{' '}
40+
{feature.strategies?.result ? 'TRUE' : 'FALSE'} with strategies
41+
evaluated like this:{' '}
42+
</StyledAlert>
43+
);
44+
};
45+
1346
export const PlaygroundResultFeatureStrategyList = ({
1447
feature,
1548
input,
@@ -32,21 +65,9 @@ export const PlaygroundResultFeatureStrategyList = ({
3265
);
3366
}
3467

35-
if (
36-
(feature.hasUnsatisfiedDependency ||
37-
!feature.isEnabledInCurrentEnvironment) &&
38-
Boolean(feature?.strategies?.data)
39-
) {
40-
return (
41-
<WrappedPlaygroundResultStrategyList
42-
feature={feature}
43-
input={input}
44-
/>
45-
);
46-
}
47-
4868
return (
4969
<>
70+
<DisabledInfo feature={feature} />
5071
<PlaygroundResultStrategyLists
5172
strategies={enabledStrategies || []}
5273
input={input}

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/playgroundResultStrategyLists.tsx

-69
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@ import { Alert, styled } from '@mui/material';
22
import type {
33
PlaygroundStrategySchema,
44
PlaygroundRequestSchema,
5-
PlaygroundFeatureSchema,
65
} from 'openapi';
7-
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
86
import {
97
StyledContentList,
108
StyledListItem,
@@ -96,70 +94,3 @@ export const PlaygroundResultStrategyLists = ({
9694
</div>
9795
);
9896
};
99-
100-
interface IWrappedPlaygroundResultStrategyListProps {
101-
feature: PlaygroundFeatureSchema;
102-
input?: PlaygroundRequestSchema;
103-
}
104-
105-
const resolveHintText = (feature: PlaygroundFeatureSchema) => {
106-
if (
107-
feature.hasUnsatisfiedDependency &&
108-
!feature.isEnabledInCurrentEnvironment
109-
) {
110-
return 'If the environment was enabled and parent dependencies were satisfied';
111-
}
112-
if (feature.hasUnsatisfiedDependency) {
113-
return 'If parent dependencies were satisfied';
114-
}
115-
if (!feature.isEnabledInCurrentEnvironment) {
116-
return 'If the environment was enabled';
117-
}
118-
return '';
119-
};
120-
121-
export const WrappedPlaygroundResultStrategyList = ({
122-
feature,
123-
input,
124-
}: IWrappedPlaygroundResultStrategyListProps) => {
125-
const enabledStrategies = feature.strategies?.data?.filter(
126-
(strategy) => !strategy.disabled,
127-
);
128-
const disabledStrategies = feature.strategies?.data?.filter(
129-
(strategy) => strategy.disabled,
130-
);
131-
132-
const showDisabledStrategies = disabledStrategies?.length > 0;
133-
134-
return (
135-
<StyledAlertWrapper sx={{ pb: 1, mt: 2 }}>
136-
<StyledAlert severity={'info'} color={'warning'}>
137-
{resolveHintText(feature)}, then this feature flag would be{' '}
138-
{feature.strategies?.result ? 'TRUE' : 'FALSE'} with strategies
139-
evaluated like this:{' '}
140-
</StyledAlert>
141-
<StyledListWrapper>
142-
<PlaygroundResultStrategyLists
143-
strategies={enabledStrategies || []}
144-
input={input}
145-
titlePrefix={showDisabledStrategies ? 'Enabled' : undefined}
146-
/>
147-
</StyledListWrapper>
148-
<ConditionallyRender
149-
condition={showDisabledStrategies}
150-
show={
151-
<StyledListWrapper>
152-
<PlaygroundResultStrategyLists
153-
strategies={disabledStrategies}
154-
input={input}
155-
titlePrefix={'Disabled'}
156-
infoText={
157-
'Disabled strategies are not evaluated for the overall result.'
158-
}
159-
/>
160-
</StyledListWrapper>
161-
}
162-
/>
163-
</StyledAlertWrapper>
164-
);
165-
};

0 commit comments

Comments
 (0)