mirror of
https://github.com/Unleash/unleash.git
synced 2025-10-27 11:02:16 +01:00
updated models to latest - refactoring
This commit is contained in:
andreas-unleash
parent
13a536904f
commit
e36cb753de
@ -5,7 +5,6 @@ import {
|
||||
AccordionDetails,
|
||||
SxProps,
|
||||
Theme,
|
||||
useTheme,
|
||||
} from '@mui/material';
|
||||
import { IConstraint } from 'interfaces/strategy';
|
||||
import { ConstraintAccordionViewBody } from './ConstraintAccordionViewBody/ConstraintAccordionViewBody';
|
||||
@ -34,7 +33,6 @@ export const ConstraintAccordionView = ({
|
||||
const { classes: styles } = useStyles();
|
||||
const [expandable, setExpandable] = useState(true);
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const theme = useTheme();
|
||||
|
||||
const singleValue = oneOf(
|
||||
[...semVerOperators, ...numOperators, ...dateOperators],
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import { Box, styled, useTheme, SxProps, Theme } from '@mui/material';
|
||||
import { Box, styled, useTheme } from '@mui/material';
|
||||
import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender';
|
||||
|
||||
interface IStrategySeparatorProps {
|
||||
text: 'AND' | 'OR';
|
||||
sx?: SxProps<Theme>;
|
||||
}
|
||||
|
||||
const StyledContent = styled('div')(({ theme }) => ({
|
||||
@ -29,7 +28,7 @@ const StyledCenteredContent = styled(StyledContent)(({ theme }) => ({
|
||||
borderRadius: theme.shape.borderRadiusLarge,
|
||||
}));
|
||||
|
||||
export const StrategySeparator = ({ text, sx }: IStrategySeparatorProps) => {
|
||||
export const StrategySeparator = ({ text }: IStrategySeparatorProps) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
@ -38,7 +37,6 @@ export const StrategySeparator = ({ text, sx }: IStrategySeparatorProps) => {
|
||||
height: theme.spacing(text === 'AND' ? 1 : 1.5),
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
..sx
|
||||
}}
|
||||
>
|
||||
<ConditionallyRender
|
||||
|
||||
@ -27,7 +27,7 @@ export const FeatureResultInfoPopoverCell = ({
|
||||
const { classes: styles } = useStyles();
|
||||
const ref = useRef(null);
|
||||
|
||||
console.log(feature)
|
||||
console.log(feature);
|
||||
|
||||
const togglePopover = () => {
|
||||
setOpen(!open);
|
||||
|
||||
@ -14,7 +14,7 @@ export const useStyles = makeStyles()(theme => ({
|
||||
marginTop: '12px',
|
||||
},
|
||||
alertRow: {
|
||||
margin: theme.spacing(1,0),
|
||||
margin: theme.spacing(1, 0),
|
||||
},
|
||||
descriptionRow: {
|
||||
marginBottom: theme.spacing(2),
|
||||
|
||||
@ -23,22 +23,19 @@ export const PlaygroundResultFeatureDetails = ({
|
||||
const { classes: styles } = useStyles();
|
||||
const theme = useTheme();
|
||||
|
||||
const description =
|
||||
feature.isEnabled
|
||||
? `This feature toggle is True in ${input?.environment} because `
|
||||
: `This feature toggle is False in ${input?.environment} because `;
|
||||
const description = feature.isEnabled
|
||||
? `This feature toggle is True in ${input?.environment} because `
|
||||
: `This feature toggle is False in ${input?.environment} because `;
|
||||
|
||||
const reason =
|
||||
feature.isEnabled
|
||||
? 'at least one strategy is True'
|
||||
: !feature.isEnabledInCurrentEnvironment
|
||||
? 'the environment is disabled'
|
||||
: 'all strategies are False';
|
||||
const reason = feature.isEnabled
|
||||
? 'at least one strategy is True'
|
||||
: !feature.isEnabledInCurrentEnvironment
|
||||
? 'the environment is disabled'
|
||||
: 'all strategies are False';
|
||||
|
||||
const color =
|
||||
feature.isEnabled
|
||||
? theme.palette.success.main
|
||||
: theme.palette.error.main;
|
||||
const color = feature.isEnabled
|
||||
? theme.palette.success.main
|
||||
: theme.palette.error.main;
|
||||
|
||||
const noValueTxt = checkForEmptyValues(input?.context)
|
||||
? 'You did not provide a value for your context field in step 2 of the configuration'
|
||||
@ -61,10 +58,7 @@ export const PlaygroundResultFeatureDetails = ({
|
||||
<span>
|
||||
<PlaygroundResultChip
|
||||
enabled={feature.isEnabled}
|
||||
label={feature.isEnabled
|
||||
? 'True'
|
||||
: 'False'
|
||||
}
|
||||
label={feature.isEnabled ? 'True' : 'False'}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -20,7 +20,10 @@ export const PlaygroundResultFeatureStrategyList = ({
|
||||
}: PlaygroundResultFeatureStrategyListProps) => {
|
||||
return (
|
||||
<ConditionallyRender
|
||||
condition={!feature.isEnabledInCurrentEnvironment && Boolean(feature?.strategies?.data)}
|
||||
condition={
|
||||
!feature.isEnabledInCurrentEnvironment &&
|
||||
Boolean(feature?.strategies?.data)
|
||||
}
|
||||
show={
|
||||
<WrappedPlaygroundResultStrategyList
|
||||
strategies={feature?.strategies?.data!}
|
||||
|
||||
@ -63,8 +63,12 @@ export const PlaygroundResultFeatureStrategyItem = ({
|
||||
condition={index > 0}
|
||||
show={<StrategySeparator text="OR" />}
|
||||
/>
|
||||
<StyledItemWrapper sx={{mr: 2}}>
|
||||
<Typography variant={'subtitle1'} color={'text.secondary'} sx={{ml: 1}}>
|
||||
<StyledItemWrapper sx={{ mr: 2 }}>
|
||||
<Typography
|
||||
variant={'subtitle1'}
|
||||
color={'text.secondary'}
|
||||
sx={{ ml: 1 }}
|
||||
>
|
||||
{index + 1}
|
||||
</Typography>
|
||||
<Box className={styles.innerContainer} sx={{ border }}>
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import {ConstraintIcon} from 'component/common/ConstraintAccordion/ConstraintIcon';
|
||||
import { ConstraintIcon } from 'component/common/ConstraintAccordion/ConstraintIcon';
|
||||
import { PlaygroundConstraintAccordionViewHeaderInfo } from './PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundConstraintAccordionViewHeaderInfo';
|
||||
import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccordion.styles';
|
||||
import {
|
||||
PlaygroundConstraintAccordionViewHeaderInfo
|
||||
} from './PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundConstraintAccordionViewHeaderInfo';
|
||||
import {useStyles} from 'component/common/ConstraintAccordion/ConstraintAccordion.styles';
|
||||
import {PlaygroundConstraintSchema, PlaygroundRequestSchema,} from 'hooks/api/actions/usePlayground/playground.model';
|
||||
PlaygroundConstraintSchema,
|
||||
PlaygroundRequestSchema,
|
||||
} from 'hooks/api/actions/usePlayground/playground.model';
|
||||
|
||||
interface PlaygroundConstraintAccordionViewHeaderProps {
|
||||
constraint: PlaygroundConstraintSchema;
|
||||
|
||||
@ -5,10 +5,11 @@ import { PLaygroundConstraintAccordionViewHeaderMultipleValues } from '../Playgr
|
||||
import React from 'react';
|
||||
import { useStyles } from '../../PlaygroundConstraintAccordion.styles';
|
||||
import { CancelOutlined } from '@mui/icons-material';
|
||||
import {PlaygroundConstraintSchema, PlaygroundRequestSchema} from 'hooks/api/actions/usePlayground/playground.model';
|
||||
import {
|
||||
ConstraintViewHeaderOperator
|
||||
} from "component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator/ConstraintViewHeaderOperator";
|
||||
PlaygroundConstraintSchema,
|
||||
PlaygroundRequestSchema,
|
||||
} from 'hooks/api/actions/usePlayground/playground.model';
|
||||
import { ConstraintViewHeaderOperator } from 'component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator/ConstraintViewHeaderOperator';
|
||||
|
||||
const StyledHeaderText = styled('span')(({ theme }) => ({
|
||||
display: '-webkit-box',
|
||||
@ -59,8 +60,9 @@ export const PlaygroundConstraintAccordionViewHeaderInfo = ({
|
||||
const { classes: styles } = useStyles();
|
||||
const theme = useTheme();
|
||||
|
||||
const constraintExistsInContext =
|
||||
Boolean(playgroundInput?.context[constraint.contextName]);
|
||||
const constraintExistsInContext = Boolean(
|
||||
playgroundInput?.context[constraint.contextName]
|
||||
);
|
||||
|
||||
return (
|
||||
<StyledHeaderWrapper>
|
||||
@ -76,9 +78,8 @@ export const PlaygroundConstraintAccordionViewHeaderInfo = ({
|
||||
: theme.palette.error.main
|
||||
}
|
||||
>
|
||||
{playgroundInput?.context[
|
||||
constraint.contextName
|
||||
] || 'no value'}
|
||||
{playgroundInput?.context[constraint.contextName] ||
|
||||
'no value'}
|
||||
</Typography>
|
||||
</StyledHeaderText>
|
||||
</Tooltip>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import {ConditionallyRender} from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import {styled, Typography} from '@mui/material';
|
||||
import React, {useEffect, useMemo, useState} from 'react';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import { styled, Typography } from '@mui/material';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import {useStyles} from '../../PlaygroundConstraintAccordion.styles';
|
||||
import {PlaygroundConstraintSchema} from 'hooks/api/actions/usePlayground/playground.model';
|
||||
import { useStyles } from '../../PlaygroundConstraintAccordion.styles';
|
||||
import { PlaygroundConstraintSchema } from 'hooks/api/actions/usePlayground/playground.model';
|
||||
|
||||
const StyledValuesSpan = styled('span')(({ theme }) => ({
|
||||
display: '-webkit-box',
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import React, {useEffect} from 'react';
|
||||
import {Chip, styled, Typography} from '@mui/material';
|
||||
import {formatConstraintValue} from 'utils/formatConstraintValue';
|
||||
import {useStyles} from '../../PlaygroundConstraintAccordion.styles';
|
||||
import {useLocationSettings} from 'hooks/useLocationSettings';
|
||||
import {PlaygroundConstraintSchema} from 'hooks/api/actions/usePlayground/playground.model';
|
||||
import {ConditionallyRender} from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import React, { useEffect } from 'react';
|
||||
import { Chip, styled, Typography } from '@mui/material';
|
||||
import { formatConstraintValue } from 'utils/formatConstraintValue';
|
||||
import { useStyles } from '../../PlaygroundConstraintAccordion.styles';
|
||||
import { useLocationSettings } from 'hooks/useLocationSettings';
|
||||
import { PlaygroundConstraintSchema } from 'hooks/api/actions/usePlayground/playground.model';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
|
||||
const StyledSingleValueChip = styled(Chip)(({ theme }) => ({
|
||||
margin: 'auto 0',
|
||||
|
||||
@ -19,9 +19,7 @@ import {
|
||||
PlaygroundConstraintSchema,
|
||||
PlaygroundRequestSchema,
|
||||
} from 'hooks/api/actions/usePlayground/playground.model';
|
||||
import {
|
||||
ConstraintAccordionViewBody
|
||||
} from "component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody";
|
||||
import { ConstraintAccordionViewBody } from 'component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody';
|
||||
|
||||
interface IConstraintAccordionViewProps {
|
||||
constraint: PlaygroundConstraintSchema;
|
||||
|
||||
@ -7,9 +7,7 @@ import { objectId } from '../../../../../../../../../../utils/objectId';
|
||||
import { ConditionallyRender } from '../../../../../../../../../common/ConditionallyRender/ConditionallyRender';
|
||||
import { StrategySeparator } from '../../../../../../../../../common/StrategySeparator/StrategySeparator';
|
||||
import { styled } from '@mui/material';
|
||||
import {
|
||||
PlaygroundResultConstraintAccordionView
|
||||
} from "./PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundResultConstraintAccordionView";
|
||||
import { PlaygroundResultConstraintAccordionView } from './PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundResultConstraintAccordionView';
|
||||
|
||||
interface PlaygroundResultConstraintExecutionProps {
|
||||
constraints?: PlaygroundConstraintSchema[];
|
||||
@ -17,13 +15,11 @@ interface PlaygroundResultConstraintExecutionProps {
|
||||
input?: PlaygroundRequestSchema;
|
||||
}
|
||||
|
||||
export const PlaygroundResultConstraintExecutionWrapper = styled('div')(
|
||||
() => ({
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
})
|
||||
);
|
||||
export const PlaygroundResultConstraintExecutionWrapper = styled('div')(() => ({
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}));
|
||||
|
||||
export const PlaygroundResultConstraintExecution = ({
|
||||
constraints,
|
||||
|
||||
@ -43,10 +43,10 @@ const SegmentExecutionWrapper = styled('div')(({ theme }) => ({
|
||||
marginTop: theme.spacing(2),
|
||||
},
|
||||
background: theme.palette.neutral.light,
|
||||
marginBottom: theme.spacing(1),
|
||||
marginBottom: theme.spacing(1),
|
||||
}));
|
||||
|
||||
const SegmentExecutionConstraintWrapper = styled('div')(({ theme }) => ({
|
||||
const SegmentExecutionConstraintWrapper = styled('div')(() => ({
|
||||
padding: '12px',
|
||||
}));
|
||||
|
||||
@ -55,7 +55,7 @@ const SegmentResultTextWrapper = styled('div')(({ theme }) => ({
|
||||
display: 'inline-flex',
|
||||
justifyContent: 'center',
|
||||
marginRight: '12px',
|
||||
gap: theme.spacing(1),
|
||||
gap: theme.spacing(1),
|
||||
}));
|
||||
|
||||
export const PlaygroundResultSegmentExecution = ({
|
||||
@ -109,7 +109,7 @@ export const PlaygroundResultSegmentExecution = ({
|
||||
condition={
|
||||
index === segments?.length - 1 && hasConstraints
|
||||
}
|
||||
show={<StrategySeparator text="AND" sx={{ pt: 1 }} />}
|
||||
show={<StrategySeparator text="AND" />}
|
||||
/>
|
||||
</SegmentExecutionWrapper>
|
||||
))}
|
||||
|
||||
@ -96,7 +96,7 @@ export const PlaygroundResultStrategyExecution = ({
|
||||
constraints={constraints}
|
||||
input={input}
|
||||
/>
|
||||
<StyledParamWrapper sx={{ pt: 2}}>
|
||||
<StyledParamWrapper sx={{ pt: 2 }}>
|
||||
<PlaygroundResultStrategyExecutionCustomStrategyParams
|
||||
strategyName={strategyResult.name}
|
||||
parameters={parameters}
|
||||
|
||||
@ -10,10 +10,9 @@ import { StrategySeparator } from 'component/common/StrategySeparator/StrategySe
|
||||
import { Chip } from '@mui/material';
|
||||
import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle';
|
||||
import StringTruncator from 'component/common/StringTruncator/StringTruncator';
|
||||
import { IStrategy } from 'interfaces/strategy';
|
||||
import { PlaygroundConstraintSchema } from 'hooks/api/actions/usePlayground/playground.model';
|
||||
import { useStyles } from '../PlaygroundResultStrategyExecution.styles';
|
||||
import { useStrategies } from '../../../../../../../../../../hooks/api/getters/useStrategies/useStrategies';
|
||||
import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies';
|
||||
|
||||
interface PlaygroundResultStrategyExecutionCustomStrategyProps {
|
||||
parameters: { [key: string]: string };
|
||||
|
||||
@ -11,7 +11,7 @@ import {
|
||||
PlaygroundConstraintSchema,
|
||||
PlaygroundRequestSchema,
|
||||
} from 'hooks/api/actions/usePlayground/playground.model';
|
||||
import {getMappedParam} from "../helepers";
|
||||
import { getMappedParam } from '../helepers';
|
||||
|
||||
export interface PlaygroundResultStrategyExecutionParametersProps {
|
||||
parameters: { [key: string]: string };
|
||||
@ -73,7 +73,9 @@ export const PlaygroundResultStrategyExecutionParameters = ({
|
||||
}
|
||||
showReason={
|
||||
Boolean(input?.context?.[getMappedParam(key)])
|
||||
? !users.includes(input?.context?.[getMappedParam(key)])
|
||||
? !users.includes(
|
||||
input?.context?.[getMappedParam(key)]
|
||||
)
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
@ -93,7 +95,9 @@ export const PlaygroundResultStrategyExecutionParameters = ({
|
||||
}
|
||||
showReason={
|
||||
Boolean(input?.context?.[getMappedParam(key)])
|
||||
? !hosts.includes(input?.context?.[getMappedParam(key)])
|
||||
? !hosts.includes(
|
||||
input?.context?.[getMappedParam(key)]
|
||||
)
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
@ -112,7 +116,9 @@ export const PlaygroundResultStrategyExecutionParameters = ({
|
||||
}
|
||||
showReason={
|
||||
Boolean(input?.context?.[getMappedParam(key)])
|
||||
? !IPs.includes(input?.context?.[getMappedParam(key)])
|
||||
? !IPs.includes(
|
||||
input?.context?.[getMappedParam(key)]
|
||||
)
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
|
||||
@ -7,8 +7,8 @@ export const getMappedParam = (key: string) => {
|
||||
case 'HostNames':
|
||||
return 'hostname';
|
||||
case 'IPs':
|
||||
return 'remoteAddress'
|
||||
return 'remoteAddress';
|
||||
default:
|
||||
return key;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -19,7 +19,7 @@ const StyledListWrapper = styled('div')(({ theme }) => ({
|
||||
padding: theme.spacing(1, 0.5),
|
||||
}));
|
||||
|
||||
const StyledAlert = styled(Alert)(({ theme }) => ({
|
||||
const StyledAlert = styled(Alert)(() => ({
|
||||
borderBottomLeftRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
}));
|
||||
@ -70,11 +70,11 @@ export const WrappedPlaygroundResultStrategyList = ({
|
||||
input,
|
||||
}: WrappedPlaygroundResultStrategyListProps) => {
|
||||
return (
|
||||
<StyledAlertWrapper sx={{pb: 1}}>
|
||||
<StyledAlertWrapper sx={{ pb: 1 }}>
|
||||
<StyledAlert severity={'info'} color={'info'}>
|
||||
If environment would be enabled then this feature would be{' '}
|
||||
{feature.strategies.result ? 'TRUE' : 'FALSE'} and the strategies would
|
||||
evaluate like this:{' '}
|
||||
{feature.strategies.result ? 'TRUE' : 'FALSE'} and the
|
||||
strategies would evaluate like this:{' '}
|
||||
</StyledAlert>
|
||||
<StyledListWrapper>
|
||||
<PlaygroundResultStrategyLists
|
||||
|
||||
@ -22,10 +22,7 @@ export const FeatureStatusCell = ({ enabled }: IFeatureStatusCellProps) => {
|
||||
<StyledChipWrapper data-loading>
|
||||
<PlaygroundResultChip
|
||||
enabled={enabled}
|
||||
label={enabled
|
||||
? 'True'
|
||||
: 'False'
|
||||
}
|
||||
label={enabled ? 'True' : 'False'}
|
||||
/>
|
||||
</StyledChipWrapper>
|
||||
</StyledCellBox>
|
||||
|
||||
@ -201,8 +201,8 @@ export interface PlaygroundSegmentSchema {
|
||||
}
|
||||
|
||||
export interface PlaygroundStrategyResultSchema {
|
||||
result: boolean | "unknown";
|
||||
data?: Array<PlaygroundStrategySchema>
|
||||
result: boolean | 'unknown';
|
||||
data?: Array<PlaygroundStrategySchema>;
|
||||
}
|
||||
|
||||
export interface PlaygroundStrategySchema {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user