From 85858cf11f44aae7c1e6d01208c98503b8c7e8df Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech Date: Fri, 5 Aug 2022 12:03:49 +0200 Subject: [PATCH 1/6] refactor strategy item component for reuse Co-authored-by: Fredrik Strand Oseberg --- .../StrategyItemContainer.styles.ts} | 0 .../StrategyItemContainer.tsx | 95 +++++++++++++++++++ .../StrategyDraggableItem.tsx | 36 +++---- .../StrategyExecution/StrategyExecution.tsx | 1 - .../StrategyItem/StrategyItem.tsx | 81 ++++------------ 5 files changed, 125 insertions(+), 88 deletions(-) rename frontend/src/component/{feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.styles.ts => common/StrategyItemContainer/StrategyItemContainer.styles.ts} (100%) create mode 100644 frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.styles.ts b/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.styles.ts similarity index 100% rename from frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.styles.ts rename to frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.styles.ts diff --git a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx b/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx new file mode 100644 index 0000000000..8d6ca0d7a7 --- /dev/null +++ b/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx @@ -0,0 +1,95 @@ +import { DragEventHandler, FC, ReactNode } from 'react'; +import { DragIndicator } from '@mui/icons-material'; +import { styled, IconButton, Box } from '@mui/material'; +import classNames from 'classnames'; +import { IFeatureStrategy } from 'interfaces/strategy'; +import { + getFeatureStrategyIcon, + formatStrategyName, +} from 'utils/strategyNames'; +import StringTruncator from 'component/common/StringTruncator/StringTruncator'; +import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; +import { useStyles } from './StrategyItemContainer.styles'; + +interface IStrategyItemContainerProps { + strategy: IFeatureStrategy; + onDragStart?: DragEventHandler; + onDragEnd?: DragEventHandler; + actions?: ReactNode; + orderNumber?: number; +} + +const DragIcon = styled(IconButton)(({ theme }) => ({ + padding: 0, + cursor: 'inherit', + transition: 'color 0.2s ease-in-out', +})); + +const StyledIndexLabel = styled('div')(({ theme }) => ({ + fontSize: theme.typography.fontSize, + color: theme.palette.text.secondary, + position: 'absolute', + display: 'none', + right: 'calc(100% + 6px)', + top: theme.spacing(2.5), + [theme.breakpoints.up('md')]: { + display: 'block', + }, +})); + +export const StrategyItemContainer: FC = ({ + strategy, + onDragStart, + onDragEnd, + actions, + children, + orderNumber, +}) => { + const { classes: styles } = useStyles(); + const Icon = getFeatureStrategyIcon(strategy.name); + + return ( + + {orderNumber}} + /> + +
+
+ ( + + + + )} + /> + + +
{actions}
+
+
{children}
+
+ + ); +}; diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyDraggableItem.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyDraggableItem.tsx index efbb434d97..7fab824cb0 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyDraggableItem.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyDraggableItem.tsx @@ -1,9 +1,9 @@ -import { Box, styled } from '@mui/material'; +import { DragEventHandler, RefObject, useRef } from 'react'; +import { Box } from '@mui/material'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator'; import { IFeatureEnvironment } from 'interfaces/featureToggle'; import { IFeatureStrategy } from 'interfaces/strategy'; -import { DragEventHandler, RefObject, useRef } from 'react'; import { StrategyItem } from './StrategyItem/StrategyItem'; interface IStrategyDraggableItemProps { @@ -22,19 +22,6 @@ interface IStrategyDraggableItemProps { ) => DragEventHandler; onDragEnd: () => void; } - -const StyledIndexLabel = styled('div')(({ theme }) => ({ - fontSize: theme.typography.fontSize, - color: theme.palette.text.secondary, - position: 'absolute', - display: 'none', - right: 'calc(100% + 6px)', - top: theme.spacing(2.5), - [theme.breakpoints.up('md')]: { - display: 'block', - }, -})); - export const StrategyDraggableItem = ({ strategy, index, @@ -58,16 +45,15 @@ export const StrategyDraggableItem = ({ condition={index > 0} show={} /> - - {index + 1} - - + + ); }; diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx index 3326954c9b..f47ab515e5 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx @@ -20,7 +20,6 @@ import StringTruncator from 'component/common/StringTruncator/StringTruncator'; interface IStrategyExecutionProps { strategy: IFeatureStrategy; - percentageFill?: string; } const NoItems: VFC = () => ( diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.tsx index bcd9fa88a6..ad3d49e4d5 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.tsx @@ -1,24 +1,17 @@ -import { DragEventHandler } from 'react'; -import { DragIndicator, Edit } from '@mui/icons-material'; -import { styled, useTheme, IconButton } from '@mui/material'; +import { DragEventHandler, VFC } from 'react'; +import { Edit } from '@mui/icons-material'; import { Link } from 'react-router-dom'; -import classNames from 'classnames'; import { IFeatureEnvironment } from 'interfaces/featureToggle'; import { IFeatureStrategy } from 'interfaces/strategy'; -import { - getFeatureStrategyIcon, - formatStrategyName, -} from 'utils/strategyNames'; import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton'; import { UPDATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions'; import { formatEditStrategyPath } from 'component/feature/FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit'; import { FeatureStrategyRemove } from 'component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove'; -import StringTruncator from 'component/common/StringTruncator/StringTruncator'; import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; import { StrategyExecution } from './StrategyExecution/StrategyExecution'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { CopyStrategyIconMenu } from './CopyStrategyIconMenu/CopyStrategyIconMenu'; -import { useStyles } from './StrategyItem.styles'; +import { StrategyItemContainer } from 'component/common/StrategyItemContainer/StrategyItemContainer'; interface IStrategyItemProps { environmentId: string; @@ -26,26 +19,19 @@ interface IStrategyItemProps { onDragStart?: DragEventHandler; onDragEnd?: DragEventHandler; otherEnvironments?: IFeatureEnvironment['name'][]; + orderNumber?: number; } -const DragIcon = styled(IconButton)(({ theme }) => ({ - padding: 0, - cursor: 'inherit', - transition: 'color 0.2s ease-in-out', -})); - -export const StrategyItem = ({ +export const StrategyItem: VFC = ({ environmentId, strategy, onDragStart, onDragEnd, otherEnvironments, -}: IStrategyItemProps) => { + orderNumber, +}) => { const projectId = useRequiredPathParam('projectId'); const featureId = useRequiredPathParam('featureId'); - const theme = useTheme(); - const { classes: styles } = useStyles(); - const Icon = getFeatureStrategyIcon(strategy.name); const editStrategyPath = formatEditStrategyPath( projectId, @@ -55,38 +41,13 @@ export const StrategyItem = ({ ); return ( -
-
- ( - - - - )} - /> - - -
+ 0 @@ -115,14 +76,10 @@ export const StrategyItem = ({ strategyId={strategy.id} icon /> -
-
-
- -
-
+ + } + > + + ); }; From e432ae45e0c92f383c6f4a24adc74f04c7c89bd9 Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech Date: Mon, 8 Aug 2022 09:50:49 +0200 Subject: [PATCH 2/6] update strategy border for playground --- .../StrategyItemContainer.styles.ts | 2 + .../StrategyItemContainer.tsx | 7 +- .../FeatureResultInfoPopoverCell.styles.ts | 8 +- .../PlaygroundResultFeatureStrategyList.tsx | 49 ++++----- ...ygroundResultFeatureStrategyItem.styles.ts | 3 + .../PlaygroundResultFeatureStrategyItem.tsx | 100 +++++------------- .../playgroundResultStrategyLists.tsx | 57 +++++----- 7 files changed, 98 insertions(+), 128 deletions(-) diff --git a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.styles.ts b/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.styles.ts index f0c781ad0d..a196ad6052 100644 --- a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.styles.ts +++ b/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.styles.ts @@ -26,6 +26,8 @@ export const useStyles = makeStyles()(theme => ({ actions: { marginLeft: 'auto', display: 'flex', + minHeight: theme.spacing(6), + alignItems: 'center', }, resultChip: { marginLeft: 'auto', diff --git a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx b/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx index 8d6ca0d7a7..fc3efe8e61 100644 --- a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx +++ b/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx @@ -17,6 +17,7 @@ interface IStrategyItemContainerProps { onDragEnd?: DragEventHandler; actions?: ReactNode; orderNumber?: number; + className?: string; } const DragIcon = styled(IconButton)(({ theme }) => ({ @@ -44,6 +45,7 @@ export const StrategyItemContainer: FC = ({ actions, children, orderNumber, + className, }) => { const { classes: styles } = useStyles(); const Icon = getFeatureStrategyIcon(strategy.name); @@ -54,8 +56,7 @@ export const StrategyItemContainer: FC = ({ condition={orderNumber !== undefined} show={{orderNumber}} /> - -
+
= ({
{actions}
{children}
-
+ ); }; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts index 7ca759f769..ecbfd67489 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts @@ -4,11 +4,13 @@ export const useStyles = makeStyles()(theme => ({ popoverPaper: { display: 'flex', flexDirection: 'column', - alignItems: 'flex-start', + // alignItems: 'flex-start', padding: theme.spacing(6), - maxWidth: '728px', + // maxWidth: '728px', + width: 728, + maxWidth: '100%', height: 'auto', - overflowY: 'scroll', + overflowY: 'auto', backgroundColor: theme.palette.tertiary.light, }, })); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx index 5941210c61..00d93fb271 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx @@ -1,13 +1,10 @@ -import { - PlaygroundResultStrategyLists, - WrappedPlaygroundResultStrategyList, -} from './PlaygroundResultStrategyList/playgroundResultStrategyLists'; -import { ConditionallyRender } from '../../../../../common/ConditionallyRender/ConditionallyRender'; -import React from 'react'; +import { PlaygroundResultStrategyLists } from './PlaygroundResultStrategyList/playgroundResultStrategyLists'; +import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { PlaygroundFeatureSchema, PlaygroundRequestSchema, -} from '../../../../../../hooks/api/actions/usePlayground/playground.model'; +} from 'hooks/api/actions/usePlayground/playground.model'; +import { Alert } from '@mui/material'; interface PlaygroundResultFeatureStrategyListProps { feature: PlaygroundFeatureSchema; @@ -19,24 +16,24 @@ export const PlaygroundResultFeatureStrategyList = ({ input, }: PlaygroundResultFeatureStrategyListProps) => { return ( - - } - elseShow={ - - } - /> + <> + + If environment would be enabled then this feature would + be {feature.strategies.result ? 'TRUE' : 'FALSE'} and + the strategies would evaluate like this:{' '} + + } + /> + + ); }; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.styles.ts index 60369dd079..a6721ebb07 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.styles.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.styles.ts @@ -34,4 +34,7 @@ export const useStyles = makeStyles()(theme => ({ borderRadius: theme.shape.borderRadiusMedium, background: theme.palette.background.default, }, + successBorder: { + border: `1px solid ${theme.palette.success.main}`, + }, })); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx index 24ecf11045..bb4f4cb8cf 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx @@ -1,11 +1,4 @@ -import { Box, styled, Typography, useTheme } from '@mui/material'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator'; -import { - formatStrategyName, - getFeatureStrategyIcon, -} from 'utils/strategyNames'; -import StringTruncator from 'component/common/StringTruncator/StringTruncator'; +import { useTheme } from '@mui/material'; import { PlaygroundResultChip } from '../../../../PlaygroundResultChip/PlaygroundResultChip'; import { PlaygroundStrategySchema, @@ -13,6 +6,8 @@ import { } from 'hooks/api/actions/usePlayground/playground.model'; import { PlaygroundResultStrategyExecution } from './PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution'; import { useStyles } from './PlaygroundResultFeatureStrategyItem.styles'; +import { StrategyItemContainer } from 'component/common/StrategyItemContainer/StrategyItemContainer'; +import { objectId } from 'utils/objectId'; interface IPlaygroundResultFeatureStrategyItemProps { strategy: PlaygroundStrategySchema; @@ -21,86 +16,49 @@ interface IPlaygroundResultFeatureStrategyItemProps { compact: boolean; } -const StyledItemWrapper = styled('div')(({ theme }) => ({ - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - margin: theme.spacing(0.5, 0), - gap: theme.spacing(1), -})); - export const PlaygroundResultFeatureStrategyItem = ({ strategy, input, index, compact, }: IPlaygroundResultFeatureStrategyItemProps) => { - const { result, name } = strategy; + const { result } = strategy; const { classes: styles } = useStyles(); const theme = useTheme(); - const Icon = getFeatureStrategyIcon(strategy.name); const label = result.evaluationStatus === 'incomplete' ? 'Unevaluated' : result.enabled ? 'True' : 'False'; - const border = - result.enabled && result.evaluationStatus === 'complete' - ? `1px solid ${theme.palette.success.main}` - : `1px solid ${theme.palette.divider}`; return ( - + } > - 0} - show={} + - - - {index + 1} - - -
-
- - -
- -
-
- -
- - - + ); }; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/playgroundResultStrategyLists.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/playgroundResultStrategyLists.tsx index b3913b2210..c3deacddb3 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/playgroundResultStrategyLists.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/playgroundResultStrategyLists.tsx @@ -1,11 +1,12 @@ +import { Alert, Box, styled, Typography } from '@mui/material'; import { PlaygroundFeatureSchema, PlaygroundStrategySchema, PlaygroundRequestSchema, -} from '../../../../../../../hooks/api/actions/usePlayground/playground.model'; -import { ConditionallyRender } from '../../../../../../common/ConditionallyRender/ConditionallyRender'; -import { Alert, styled, Typography } from '@mui/material'; +} from 'hooks/api/actions/usePlayground/playground.model'; +import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { PlaygroundResultFeatureStrategyItem } from './PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem'; +import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator'; const StyledAlertWrapper = styled('div')(({ theme }) => ({ display: 'flex', @@ -34,30 +35,36 @@ export const PlaygroundResultStrategyLists = ({ strategies, input, compact = false, -}: PlaygroundResultStrategyListProps) => { - return ( - 0} - show={ - <> - {`Strategies (${strategies.length})`} +}: PlaygroundResultStrategyListProps) => ( + 0} + show={ + <> + {`Strategies (${strategies.length})`} + {strategies.map((strategy, index) => ( - + <> + 0} + show={} + /> + + ))} - - } - /> - ); -}; + + + } + /> +); interface WrappedPlaygroundResultStrategyListProps extends PlaygroundResultStrategyListProps { From d0134755382f2733ea0a144062856cee468af86f Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech Date: Mon, 8 Aug 2022 10:37:37 +0200 Subject: [PATCH 3/6] fix formatting - prettier --- .../PlaygroundResultStrategyExecution.tsx | 1 - ...tStrategyExecutionCustomStrategyParams.tsx | 126 ++++++++++++------ 2 files changed, 83 insertions(+), 44 deletions(-) diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.tsx index c2d8ae0b75..3797c34c29 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.tsx @@ -7,7 +7,6 @@ import { PlaygroundStrategySchema, } from 'hooks/api/actions/usePlayground/playground.model'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; -import React from 'react'; import { PlaygroundResultConstraintExecution } from './PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution'; import { PlaygroundResultSegmentExecution } from './PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution'; import { PlaygroundResultStrategyExecutionParameters } from './PlaygroundResultStrategyExecutionParameters/PlaygroundResultStrategyExecutionParameters'; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecutionCustomStrategyParams/PlaygroundResultStrategyExecutionCustomStrategyParams.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecutionCustomStrategyParams/PlaygroundResultStrategyExecutionCustomStrategyParams.tsx index 1b2243c6ec..da1a731c01 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecutionCustomStrategyParams/PlaygroundResultStrategyExecutionCustomStrategyParams.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecutionCustomStrategyParams/PlaygroundResultStrategyExecutionCustomStrategyParams.tsx @@ -4,12 +4,14 @@ import { parseParameterStrings, } from 'utils/parseParameter'; import React, { Fragment } from 'react'; -import { PlaygroundParameterItem } from '../PlaygroundParamteterItem/PlaygroundParameterItem'; +import { PlaygroundConstraintItem } from '../PlaygroundConstraintItem/PlaygroundConstraintItem'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator'; import { Chip } from '@mui/material'; import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle'; +import StringTruncator from 'component/common/StringTruncator/StringTruncator'; import { PlaygroundConstraintSchema } from 'hooks/api/actions/usePlayground/playground.model'; +import { useStyles } from '../PlaygroundResultStrategyExecution.styles'; import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies'; interface PlaygroundResultStrategyExecutionCustomStrategyProps { @@ -23,16 +25,15 @@ export const PlaygroundResultStrategyExecutionCustomStrategyParams = ({ constraints, parameters, }: PlaygroundResultStrategyExecutionCustomStrategyProps) => { + const { classes: styles } = useStyles(); const { strategies } = useStrategies(); + const definition = strategies.find(strategyDefinition => { return strategyDefinition.name === strategyName; }); - if (!definition?.editable) { - return null; - } - const renderCustomStrategyParameters = () => { + if (!definition?.editable) return null; return definition?.parameters.map((param: any, index: number) => { const notLastItem = index !== definition?.parameters?.length - 1; switch (param?.type) { @@ -42,7 +43,7 @@ export const PlaygroundResultStrategyExecutionCustomStrategyParams = ({ ); return ( - @@ -80,54 +81,93 @@ export const PlaygroundResultStrategyExecutionCustomStrategyParams = ({ ); case 'boolean': - const bool = Boolean(parameters[param?.name]); return ( - - + +

+ {' '} + {parameters[param.name]} +

} + condition={ + typeof parameters[param.name] !== + 'undefined' + } + show={ + } + /> + } /> ); case 'string': - const value = - parseParameterString(parameters[param.name]) ?? - 'no value'; + const value = parseParameterString(parameters[param.name]); return ( - - - } - /> - + +

+ + + is set to + + +

+ } + /> + + } + /> ); case 'number': const number = parseParameterNumber(parameters[param.name]); return ( - - - } - /> - + +

+ + + is set to + + +

+ } + /> + + } + /> ); case 'default': return null; From 1620d72c8ff85d16611f98c58a1325b47b563b17 Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech Date: Mon, 8 Aug 2022 11:10:38 +0200 Subject: [PATCH 4/6] rename files related to playground --- .../FeatureStrategyItem.styles.ts} | 0 .../FeatureStrategyItem.tsx} | 12 +++++----- .../ConstraintAccordion.styles.ts} | 0 .../ConstraintAccordionView.tsx} | 8 +++---- ...laygroundConstraintAccordionViewHeader.tsx | 0 ...roundConstraintAccordionViewHeaderInfo.tsx | 2 +- ...raintAccordionViewHeaderMultipleValues.tsx | 2 +- ...nstraintAccordionViewHeaderSingleValue.tsx | 2 +- .../ConstraintExecution.tsx} | 24 +++++++++---------- .../CustomStrategyParams.tsx} | 14 +++++------ .../PlaygroundParameterItem.tsx | 0 .../PlaygroundParametertem.styles.ts | 0 .../SegmentExecution.styles.ts} | 0 .../SegmentExecution/SegmentExecution.tsx} | 19 ++++++++------- .../StrategyExecution.styles.ts} | 0 .../StrategyExecution/StrategyExecution.tsx} | 23 +++++++++--------- .../StrategyExecutionParameters.tsx} | 4 ++-- .../StrategyExecution}/helpers.ts | 0 .../playgroundResultStrategyLists.tsx | 4 ++-- 19 files changed, 58 insertions(+), 56 deletions(-) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/{PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.styles.ts => StrategyItem/FeatureStrategyItem.styles.ts} (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/{PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx => StrategyItem/FeatureStrategyItem.tsx} (81%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/{PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordion.styles.ts => StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordion.styles.ts} (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/{PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundResultConstraintAccordionView.tsx => StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx} (93%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/{PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView => StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView}/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeader.tsx (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/{PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView => StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView}/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundConstraintAccordionViewHeaderInfo.tsx (98%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/{PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView => StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView}/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues.tsx (97%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/{PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView => StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView}/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue.tsx (95%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/{PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx => StrategyItem/StrategyExecution/ConstraintExecution/ConstraintExecution.tsx} (54%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/{PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecutionCustomStrategyParams/PlaygroundResultStrategyExecutionCustomStrategyParams.tsx => StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx} (94%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/{PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundParamteterItem => StrategyItem/StrategyExecution/PlaygroundParameterItem}/PlaygroundParameterItem.tsx (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/{PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundParamteterItem => StrategyItem/StrategyExecution/PlaygroundParameterItem}/PlaygroundParametertem.styles.ts (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/{PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.styles.ts => StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.styles.ts} (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/{PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx => StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.tsx} (83%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/{PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.styles.ts => StrategyItem/StrategyExecution/StrategyExecution.styles.ts} (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/{PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.tsx => StrategyItem/StrategyExecution/StrategyExecution.tsx} (77%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/{PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecutionParameters/PlaygroundResultStrategyExecutionParameters.tsx => StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx} (97%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/{PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution => StrategyItem/StrategyExecution}/helpers.ts (100%) diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/FeatureStrategyItem.styles.ts similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.styles.ts rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/FeatureStrategyItem.styles.ts diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/FeatureStrategyItem.tsx similarity index 81% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/FeatureStrategyItem.tsx index bb4f4cb8cf..2c65134319 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/FeatureStrategyItem.tsx @@ -4,24 +4,24 @@ import { PlaygroundStrategySchema, PlaygroundRequestSchema, } from 'hooks/api/actions/usePlayground/playground.model'; -import { PlaygroundResultStrategyExecution } from './PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution'; -import { useStyles } from './PlaygroundResultFeatureStrategyItem.styles'; +import { StrategyExecution } from './StrategyExecution/StrategyExecution'; +import { useStyles } from './FeatureStrategyItem.styles'; import { StrategyItemContainer } from 'component/common/StrategyItemContainer/StrategyItemContainer'; import { objectId } from 'utils/objectId'; -interface IPlaygroundResultFeatureStrategyItemProps { +interface IFeatureStrategyItemProps { strategy: PlaygroundStrategySchema; index: number; input?: PlaygroundRequestSchema; compact: boolean; } -export const PlaygroundResultFeatureStrategyItem = ({ +export const FeatureStrategyItem = ({ strategy, input, index, compact, -}: IPlaygroundResultFeatureStrategyItemProps) => { +}: IFeatureStrategyItemProps) => { const { result } = strategy; const { classes: styles } = useStyles(); const theme = useTheme(); @@ -54,7 +54,7 @@ export const PlaygroundResultFeatureStrategyItem = ({ /> } > - ; } -export const PlaygroundResultConstraintAccordionView = ({ +export const ConstraintAccordionView: VFC = ({ constraint, sx = undefined, maxLength, playgroundInput, -}: IConstraintAccordionViewProps) => { +}) => { const { classes: styles } = useStyles(); const [expandable, setExpandable] = useState(true); const [expanded, setExpanded] = useState(false); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeader.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeader.tsx similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeader.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeader.tsx diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundConstraintAccordionViewHeaderInfo.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundConstraintAccordionViewHeaderInfo.tsx similarity index 98% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundConstraintAccordionViewHeaderInfo.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundConstraintAccordionViewHeaderInfo.tsx index 8a67730066..29336cb9d5 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundConstraintAccordionViewHeaderInfo.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundConstraintAccordionViewHeaderInfo.tsx @@ -3,7 +3,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit import { PlaygroundConstraintAccordionViewHeaderSingleValue } from './PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue'; import { PLaygroundConstraintAccordionViewHeaderMultipleValues } from './PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues'; import React from 'react'; -import { useStyles } from '../../PlaygroundConstraintAccordion.styles'; +import { useStyles } from '../../ConstraintAccordion.styles'; import { CancelOutlined } from '@mui/icons-material'; import { PlaygroundConstraintSchema, diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues.tsx similarity index 97% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues.tsx index 73e11367e1..57a0922433 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues.tsx @@ -2,7 +2,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit import { styled, Typography } from '@mui/material'; import React, { useEffect, useMemo, useState } from 'react'; import classnames from 'classnames'; -import { useStyles } from '../../../PlaygroundConstraintAccordion.styles'; +import { useStyles } from '../../../ConstraintAccordion.styles'; import { PlaygroundConstraintSchema } from 'hooks/api/actions/usePlayground/playground.model'; const StyledValuesSpan = styled('span')(({ theme }) => ({ diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue.tsx similarity index 95% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue.tsx index ac2bad077e..09c3fea837 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react'; import { Chip, styled, Typography } from '@mui/material'; import { formatConstraintValue } from 'utils/formatConstraintValue'; -import { useStyles } from '../../../PlaygroundConstraintAccordion.styles'; +import { useStyles } from '../../../ConstraintAccordion.styles'; import { useLocationSettings } from 'hooks/useLocationSettings'; import { PlaygroundConstraintSchema } from 'hooks/api/actions/usePlayground/playground.model'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintExecution.tsx similarity index 54% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintExecution.tsx index 3e4b7c71a8..1f8f51de34 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintExecution.tsx @@ -1,42 +1,42 @@ +import { Fragment, VFC } from 'react'; import { PlaygroundConstraintSchema, PlaygroundRequestSchema, } from 'hooks/api/actions/usePlayground/playground.model'; -import React, { Fragment } from 'react'; -import { objectId } from '../../../../../../../../../../utils/objectId'; -import { ConditionallyRender } from '../../../../../../../../../common/ConditionallyRender/ConditionallyRender'; -import { StrategySeparator } from '../../../../../../../../../common/StrategySeparator/StrategySeparator'; +import { objectId } from 'utils/objectId'; +import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; +import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator'; import { styled } from '@mui/material'; -import { PlaygroundResultConstraintAccordionView } from './PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundResultConstraintAccordionView'; +import { ConstraintAccordionView } from './ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView'; -interface PlaygroundResultConstraintExecutionProps { +interface IConstraintExecutionProps { constraints?: PlaygroundConstraintSchema[]; compact: boolean; input?: PlaygroundRequestSchema; } -export const PlaygroundResultConstraintExecutionWrapper = styled('div')(() => ({ +export const ConstraintExecutionWrapper = styled('div')(() => ({ width: '100%', display: 'flex', flexDirection: 'column', })); -export const PlaygroundResultConstraintExecution = ({ +export const ConstraintExecution: VFC = ({ constraints, compact, input, -}: PlaygroundResultConstraintExecutionProps) => { +}) => { if (!constraints) return null; return ( - + {constraints?.map((constraint, index) => ( 0 && constraints?.length > 1} show={} /> - ))} - + ); }; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecutionCustomStrategyParams/PlaygroundResultStrategyExecutionCustomStrategyParams.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx similarity index 94% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecutionCustomStrategyParams/PlaygroundResultStrategyExecutionCustomStrategyParams.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx index da1a731c01..f39f164725 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecutionCustomStrategyParams/PlaygroundResultStrategyExecutionCustomStrategyParams.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx @@ -1,30 +1,30 @@ +import React, { Fragment, VFC } from 'react'; import { parseParameterNumber, parseParameterString, parseParameterStrings, } from 'utils/parseParameter'; -import React, { Fragment } from 'react'; -import { PlaygroundConstraintItem } from '../PlaygroundConstraintItem/PlaygroundConstraintItem'; +import { PlaygroundParameterItem } from '../PlaygroundParameterItem/PlaygroundParameterItem'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator'; import { Chip } from '@mui/material'; import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle'; import StringTruncator from 'component/common/StringTruncator/StringTruncator'; import { PlaygroundConstraintSchema } from 'hooks/api/actions/usePlayground/playground.model'; -import { useStyles } from '../PlaygroundResultStrategyExecution.styles'; +import { useStyles } from '../StrategyExecution.styles'; import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies'; -interface PlaygroundResultStrategyExecutionCustomStrategyProps { +interface ICustomStrategyProps { parameters: { [key: string]: string }; strategyName: string; constraints: PlaygroundConstraintSchema[]; } -export const PlaygroundResultStrategyExecutionCustomStrategyParams = ({ +export const CustomStrategyParams: VFC = ({ strategyName, constraints, parameters, -}: PlaygroundResultStrategyExecutionCustomStrategyProps) => { +}) => { const { classes: styles } = useStyles(); const { strategies } = useStrategies(); @@ -43,7 +43,7 @@ export const PlaygroundResultStrategyExecutionCustomStrategyParams = ({ ); return ( - diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundParamteterItem/PlaygroundParameterItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundParamteterItem/PlaygroundParameterItem.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundParamteterItem/PlaygroundParametertem.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParametertem.styles.ts similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundParamteterItem/PlaygroundParametertem.styles.ts rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParametertem.styles.ts diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.styles.ts similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.styles.ts rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.styles.ts diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.tsx similarity index 83% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.tsx index ab788c5c84..6e176415ba 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.tsx @@ -1,16 +1,17 @@ +import { VFC } from 'react'; import { PlaygroundSegmentSchema, PlaygroundRequestSchema, -} from '../../../../../../../../../../hooks/api/actions/usePlayground/playground.model'; -import { PlaygroundResultConstraintExecution } from '../PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution'; +} from 'hooks/api/actions/usePlayground/playground.model'; +import { ConstraintExecution } from '../ConstraintExecution/ConstraintExecution'; import { CancelOutlined, DonutLarge } from '@mui/icons-material'; import { Link } from 'react-router-dom'; -import { StrategySeparator } from '../../../../../../../../../common/StrategySeparator/StrategySeparator'; -import { useStyles } from './PlaygroundResultSegmentExecution.styles'; +import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator'; +import { useStyles } from './SegmentExecution.styles'; import { styled, Typography } from '@mui/material'; -import { ConditionallyRender } from '../../../../../../../../../common/ConditionallyRender/ConditionallyRender'; +import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -interface PlaygroundResultSegmentExecutionProps { +interface ISegmentExecutionProps { segments?: PlaygroundSegmentSchema[]; input?: PlaygroundRequestSchema; hasConstraints: boolean; @@ -58,11 +59,11 @@ const SegmentResultTextWrapper = styled('div')(({ theme }) => ({ gap: theme.spacing(1), })); -export const PlaygroundResultSegmentExecution = ({ +export const SegmentExecution: VFC = ({ segments, input, hasConstraints, -}: PlaygroundResultSegmentExecutionProps) => { +}) => { const { classes: styles } = useStyles(); if (!segments) return null; @@ -99,7 +100,7 @@ export const PlaygroundResultSegmentExecution = ({ /> - ({ padding: theme.spacing(0, 0), })); -export const PlaygroundResultStrategyExecution = ({ +export const StrategyExecution: VFC = ({ strategyResult, input, -}: PlaygroundResultStrategyExecutionProps) => { +}) => { const { name, constraints, segments, parameters } = strategyResult; const { uiConfig } = useUiConfig(); @@ -50,7 +51,7 @@ export const PlaygroundResultStrategyExecution = ({ Boolean(segments && segments.length > 0) } show={ - 0)} show={ <> - - ({ @@ -51,7 +51,7 @@ export const PlaygroundResultStrategyLists = ({ condition={index > 0} show={} /> - Date: Mon, 8 Aug 2022 11:36:33 +0200 Subject: [PATCH 5/6] fix react key warning --- .../FeatureResultInfoPopoverCell.styles.ts | 2 -- .../PlaygroundResultFeatureStrategyList.tsx | 2 +- .../playgroundResultStrategyLists.tsx | 5 +++-- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts index ecbfd67489..3ad2f16301 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts @@ -4,9 +4,7 @@ export const useStyles = makeStyles()(theme => ({ popoverPaper: { display: 'flex', flexDirection: 'column', - // alignItems: 'flex-start', padding: theme.spacing(6), - // maxWidth: '728px', width: 728, maxWidth: '100%', height: 'auto', diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx index 00d93fb271..afb51096ef 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx @@ -25,7 +25,7 @@ export const PlaygroundResultFeatureStrategyList = ({ show={ If environment would be enabled then this feature would - be {feature.strategies.result ? 'TRUE' : 'FALSE'} and + be {feature.strategies?.result ? 'TRUE' : 'FALSE'} and the strategies would evaluate like this:{' '} } diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/playgroundResultStrategyLists.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/playgroundResultStrategyLists.tsx index 5c4099be76..1b48a207f5 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/playgroundResultStrategyLists.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/playgroundResultStrategyLists.tsx @@ -1,3 +1,4 @@ +import { Fragment } from 'react'; import { Alert, Box, styled, Typography } from '@mui/material'; import { PlaygroundFeatureSchema, @@ -46,7 +47,7 @@ export const PlaygroundResultStrategyLists = ({ >{`Strategies (${strategies.length})`} {strategies.map((strategy, index) => ( - <> + 0} show={} @@ -58,7 +59,7 @@ export const PlaygroundResultStrategyLists = ({ compact={compact} input={input} /> - + ))} From b32b751f2cf14cb62c688241a1bcfd051f5c12ae Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech Date: Mon, 8 Aug 2022 11:41:35 +0200 Subject: [PATCH 6/6] update custom strategy params from feature branch --- .../CustomStrategyParams.tsx | 122 ++++++------------ 1 file changed, 41 insertions(+), 81 deletions(-) diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx index f39f164725..b2cf842ad7 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx @@ -9,9 +9,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator'; import { Chip } from '@mui/material'; import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle'; -import StringTruncator from 'component/common/StringTruncator/StringTruncator'; import { PlaygroundConstraintSchema } from 'hooks/api/actions/usePlayground/playground.model'; -import { useStyles } from '../StrategyExecution.styles'; import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies'; interface ICustomStrategyProps { @@ -25,15 +23,16 @@ export const CustomStrategyParams: VFC = ({ constraints, parameters, }) => { - const { classes: styles } = useStyles(); const { strategies } = useStrategies(); - const definition = strategies.find(strategyDefinition => { return strategyDefinition.name === strategyName; }); + if (!definition?.editable) { + return null; + } + const renderCustomStrategyParameters = () => { - if (!definition?.editable) return null; return definition?.parameters.map((param: any, index: number) => { const notLastItem = index !== definition?.parameters?.length - 1; switch (param?.type) { @@ -81,93 +80,54 @@ export const CustomStrategyParams: VFC = ({ ); case 'boolean': + const bool = Boolean(parameters[param?.name]); return ( - -

- {' '} - {parameters[param.name]} -

+ + } - /> - } + condition={notLastItem} + show={} /> ); case 'string': - const value = parseParameterString(parameters[param.name]); + const value = + parseParameterString(parameters[param.name]) ?? + 'no value'; return ( - -

- - - is set to - - -

- } - /> - - } - /> + + + } + /> + ); case 'number': const number = parseParameterNumber(parameters[param.name]); return ( - -

- - - is set to - - -

- } - /> - - } - /> + + + } + /> + ); case 'default': return null;