From 1d83643e15c2f3814b11d57521362d9dbb9e0a9b Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Wed, 27 Jul 2022 18:48:17 +0300 Subject: [PATCH 01/56] Playground result info modal initial --- .../common/Table/cells/IconCell/IconCell.tsx | 12 +- .../PlaygroundFeatureResultInfoModal.tsx | 24 +++ .../PlaygroundResultsTable.tsx | 150 +++++++++++------- 3 files changed, 125 insertions(+), 61 deletions(-) create mode 100644 frontend/src/component/playground/Playground/PlaygroundFeatureResultInfoModal/PlaygroundFeatureResultInfoModal.tsx diff --git a/frontend/src/component/common/Table/cells/IconCell/IconCell.tsx b/frontend/src/component/common/Table/cells/IconCell/IconCell.tsx index 5c44952b07..16527d50e0 100644 --- a/frontend/src/component/common/Table/cells/IconCell/IconCell.tsx +++ b/frontend/src/component/common/Table/cells/IconCell/IconCell.tsx @@ -1,13 +1,21 @@ import { Box } from '@mui/material'; -import { ReactNode } from 'react'; +import React, { ReactNode } from 'react'; interface IIconCellProps { icon: ReactNode; + onClick?: () => void; } -export const IconCell = ({ icon }: IIconCellProps) => { +export const IconCell = ({ icon, onClick }: IIconCellProps) => { + const handleClick = + onClick && + ((event: React.SyntheticEvent) => { + event.stopPropagation(); + onClick(); + }); return ( void; +} + +export const PlaygroundFeatureResultInfoModal = ({ + feature, + open, + setOpen, +}: PlaygroundFeatureResultInfoModalProps) => { + if (!feature) { + return null; + } + + return ( + setOpen(false)}> +

Test

+ + ); +}; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx index 2e695ce979..f7dafea0a3 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx @@ -23,6 +23,9 @@ import { PlaygroundFeatureSchema } from 'hooks/api/actions/usePlayground/playgro import { Box, Typography, useMediaQuery, useTheme } from '@mui/material'; import useLoading from 'hooks/useLoading'; import { VariantCell } from './VariantCell/VariantCell'; +import { IconCell } from '../../../common/Table/cells/IconCell/IconCell'; +import { InfoOutlined } from '@mui/icons-material'; +import { PlaygroundFeatureResultInfoModal } from '../PlaygroundFeatureResultInfoModal/PlaygroundFeatureResultInfoModal'; const defaultSort: SortingRule = { id: 'name' }; const { value, setValue } = createLocalStorage( @@ -48,11 +51,87 @@ export const PlaygroundResultsTable = ({ const isExtraSmallScreen = useMediaQuery(theme.breakpoints.down('sm')); const isSmallScreen = useMediaQuery(theme.breakpoints.down('md')); + const [selectedFeature, setSelectedFeature] = useState< + PlaygroundFeatureSchema | undefined + >(); + const [showResultInfoModal, setShowResultInfoModal] = useState(false); + + const columns = useMemo( + () => [ + { + Header: 'Name', + accessor: 'name', + searchable: true, + minWidth: 160, + Cell: ({ value, row: { original } }: any) => ( + + ), + }, + { + Header: 'Project ID', + accessor: 'projectId', + sortType: 'alphanumeric', + filterName: 'projectId', + searchable: true, + maxWidth: 170, + Cell: ({ value }: any) => ( + + ), + }, + { + Header: 'Variant', + id: 'variant', + accessor: 'variant.name', + sortType: 'alphanumeric', + filterName: 'variant', + searchable: true, + width: 200, + Cell: ({ + value, + row: { + original: { variant, feature, variants, isEnabled }, + }, + }: any) => ( + + ), + }, + { + Header: 'isEnabled', + accessor: 'isEnabled', + filterName: 'isEnabled', + filterParsing: (value: boolean) => (value ? 'true' : 'false'), + Cell: ({ value }: any) => , + sortType: 'boolean', + sortInverted: true, + }, + { + Header: '', + id: 'info', + Cell: ({ row }: any) => ( + } + onClick={() => onFeatureResultInfoClick(row.original)} + /> + ), + }, + ], + //eslint-disable-next-line + [] + ); + const { data: searchedData, getSearchText, getSearchContext, - } = useSearch(COLUMNS, searchValue, features || []); + } = useSearch(columns, searchValue, features || []); const data = useMemo(() => { return loading @@ -87,7 +166,7 @@ export const PlaygroundResultsTable = ({ } = useTable( { initialState, - columns: COLUMNS as any, + columns: columns as any, data: data as any, sortTypes, autoResetGlobalFilter: false, @@ -138,8 +217,18 @@ export const PlaygroundResultsTable = ({ // eslint-disable-next-line react-hooks/exhaustive-deps -- don't re-render after search params change }, [loading, sortBy, searchValue]); + const onFeatureResultInfoClick = (feature: PlaygroundFeatureSchema) => { + setSelectedFeature(feature); + setShowResultInfoModal(true); + }; + return ( <> + ); }; - -const COLUMNS = [ - { - Header: 'Name', - accessor: 'name', - searchable: true, - minWidth: 160, - Cell: ({ value, row: { original } }: any) => ( - - ), - }, - { - Header: 'Project ID', - accessor: 'projectId', - sortType: 'alphanumeric', - filterName: 'projectId', - searchable: true, - maxWidth: 170, - Cell: ({ value }: any) => ( - - ), - }, - { - Header: 'Variant', - id: 'variant', - accessor: 'variant.name', - sortType: 'alphanumeric', - filterName: 'variant', - searchable: true, - width: 200, - Cell: ({ - value, - row: { - original: { variant, feature, variants, isEnabled }, - }, - }: any) => ( - - ), - }, - { - Header: 'isEnabled', - accessor: 'isEnabled', - filterName: 'isEnabled', - filterParsing: (value: boolean) => (value ? 'true' : 'false'), - Cell: ({ value }: any) => , - sortType: 'boolean', - sortInverted: true, - }, -]; From e894cbb52af726e28b96f084079cdc66753ead86 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Thu, 28 Jul 2022 15:16:40 +0300 Subject: [PATCH 02/56] Playground result info modal initial --- .../common/Table/cells/IconCell/IconCell.tsx | 10 +- .../StrategyItem/StrategyItem.styles.ts | 3 + .../StrategyItem/StrategyItem.tsx | 61 ++++--- .../PlaygroundFeatureResultInfoModal.tsx | 24 --- .../FeatureResultInfoPopoverCell.tsx | 85 ++++++++++ .../PlaygroundResultFeatureStrategyItem.tsx | 38 +++++ .../FeatureStatusCell/FeatureStatusCell.tsx | 33 +--- .../PlaygroundResultsTable.tsx | 156 ++++++++---------- .../ResultChip/ResultChip.tsx | 46 ++++++ frontend/src/interfaces/strategy.ts | 18 ++ 10 files changed, 299 insertions(+), 175 deletions(-) delete mode 100644 frontend/src/component/playground/Playground/PlaygroundFeatureResultInfoModal/PlaygroundFeatureResultInfoModal.tsx create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/ResultChip/ResultChip.tsx diff --git a/frontend/src/component/common/Table/cells/IconCell/IconCell.tsx b/frontend/src/component/common/Table/cells/IconCell/IconCell.tsx index 16527d50e0..2ad4f6a8db 100644 --- a/frontend/src/component/common/Table/cells/IconCell/IconCell.tsx +++ b/frontend/src/component/common/Table/cells/IconCell/IconCell.tsx @@ -3,19 +3,11 @@ import React, { ReactNode } from 'react'; interface IIconCellProps { icon: ReactNode; - onClick?: () => void; } -export const IconCell = ({ icon, onClick }: IIconCellProps) => { - const handleClick = - onClick && - ((event: React.SyntheticEvent) => { - event.stopPropagation(); - onClick(); - }); +export const IconCell = ({ icon }: IIconCellProps) => { return ( ({ marginLeft: 'auto', display: 'flex', }, + resultChip: { + marginLeft: 'auto', + }, body: { padding: theme.spacing(2), justifyItems: 'center', 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 f44f82ce6a..30bc4d251a 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,7 +1,7 @@ import { DragIndicator, Edit } from '@mui/icons-material'; -import { styled, useTheme, IconButton } from '@mui/material'; +import { styled, useTheme, IconButton, Chip } from '@mui/material'; import { Link } from 'react-router-dom'; -import { IFeatureStrategy } from 'interfaces/strategy'; +import {IFeatureStrategy, IPlaygroundFeatureStrategyResult} from 'interfaces/strategy'; import { getFeatureStrategyIcon, formatStrategyName, @@ -18,8 +18,10 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit interface IStrategyItemProps { environmentId: string; - strategy: IFeatureStrategy; + strategy: IFeatureStrategy | IPlaygroundFeatureStrategyResult; isDraggable?: boolean; + showActions?: boolean; + result?: boolean; } const DragIcon = styled(IconButton)(({ theme }) => ({ @@ -32,6 +34,8 @@ export const StrategyItem = ({ environmentId, strategy, isDraggable, + showActions = true, + result, }: IStrategyItemProps) => { const projectId = useRequiredPathParam('projectId'); const featureId = useRequiredPathParam('featureId'); @@ -46,6 +50,8 @@ export const StrategyItem = ({ strategy.id ); + const showShouldShowResultChip = result !== undefined; + return (
@@ -66,25 +72,36 @@ export const StrategyItem = ({ maxLength={15} text={formatStrategyName(strategy.name)} /> -
- - - - -
+ + + + + +
+ } + /> + + } + />
void; -} - -export const PlaygroundFeatureResultInfoModal = ({ - feature, - open, - setOpen, -}: PlaygroundFeatureResultInfoModalProps) => { - if (!feature) { - return null; - } - - return ( - setOpen(false)}> -

Test

- - ); -}; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx new file mode 100644 index 0000000000..eb10bf808d --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx @@ -0,0 +1,85 @@ +import { PlaygroundFeatureSchema } from '../../../../../hooks/api/actions/usePlayground/playground.model'; +import { Box, IconButton, Popover } from '@mui/material'; +import { InfoOutlined } from '@mui/icons-material'; +import { IconCell } from '../../../../common/Table/cells/IconCell/IconCell'; +import React, { useRef, useState } from 'react'; + +interface FeatureResultInfoPopoverCellProps { + feature?: PlaygroundFeatureSchema; +} + +export const FeatureResultInfoPopoverCell = ({ + feature, +}: FeatureResultInfoPopoverCellProps) => { + if (!feature) { + return null; + } + const [open, setOpen] = useState(false); + const ref = useRef(null); + + const togglePopover = (event: React.SyntheticEvent) => { + setOpen(!open); + }; + + const strategies = [ + { + type: 'standard', + id: 'strategy-id', + result: false, + constraints: [ + { + result: false, + contextName: 'appName', + operator: 'IN', + caseInsensitive: true, + inverted: false, + values: ['a', 'b'], + }, + ], + segments: [ + { + result: true, + id: 5, + name: 'my-segment', + constraints: [ + { + result: false, + contextName: 'appName', + operator: 'IN', + caseInsensitive: true, + inverted: false, + values: ['a', 'b'], + }, + ], + }, + ], + }, + { + type: 'default', + result: true, + }, + ]; + + return ( + <> + + + + setOpen(false)} + anchorEl={ref.current} + anchorOrigin={{ + vertical: 'top', + horizontal: 'right', + }} + transformOrigin={{ + vertical: 'center', + horizontal: 'left', + }} + > + {feature.name} + + + ); +}; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx new file mode 100644 index 0000000000..f890d4da16 --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx @@ -0,0 +1,38 @@ +import { ConditionallyRender } from '../../../../../common/ConditionallyRender/ConditionallyRender'; +import { StrategySeparator } from '../../../../../common/StrategySeparator/StrategySeparator'; +import { StrategyItem } from '../../../../../feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem'; +import { + IConstraint, + IFeatureStrategy, IPlaygroundFeatureStrategyResult, +} from '../../../../../../interfaces/strategy'; +import { ISegment } from '../../../../../../interfaces/segment'; + + +interface IPlaygroundResultFeatureStrategyItemProps { + strategy: IPlaygroundFeatureStrategyResult; + environmentName: string; + index: number; +} + +export const PlaygroundResultFeatureStrategyItem = ({ + strategy, + environmentName, + index, +}: IPlaygroundResultFeatureStrategyItemProps) => { + const { result } = strategy; + + return ( +
+ 0} + show={} + /> + +
+ ); +}; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx index 9d7f99462c..7ead5073d1 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx @@ -4,37 +4,12 @@ import { ReactComponent as FeatureEnabledIcon } from 'assets/icons/isenabled-tru import { ReactComponent as FeatureDisabledIcon } from 'assets/icons/isenabled-false.svg'; import { Box, Chip, styled, useTheme } from '@mui/material'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; +import {ResultChip} from "../ResultChip/ResultChip"; interface IFeatureStatusCellProps { enabled: boolean; } -const StyledFalseChip = styled(Chip)(({ theme }) => ({ - width: 80, - borderRadius: '5px', - border: `1px solid ${theme.palette.error.main}`, - backgroundColor: colors.red['200'], - ['& .MuiChip-label']: { - color: theme.palette.error.main, - }, - ['& .MuiChip-icon']: { - color: theme.palette.error.main, - }, -})); - -const StyledTrueChip = styled(Chip)(({ theme }) => ({ - width: 80, - borderRadius: '5px', - border: `1px solid ${theme.palette.success.main}`, - backgroundColor: colors.green['100'], - ['& .MuiChip-label']: { - color: theme.palette.success.main, - }, - ['& .MuiChip-icon']: { - color: theme.palette.success.main, - }, -})); - const StyledCellBox = styled(Box)(({ theme }) => ({ display: 'flex', alignItems: 'center', @@ -70,11 +45,7 @@ export const FeatureStatusCell = ({ enabled }: IFeatureStatusCellProps) => { return ( - } - elseShow={} - /> + ); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx index f7dafea0a3..5337251325 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx @@ -25,7 +25,7 @@ import useLoading from 'hooks/useLoading'; import { VariantCell } from './VariantCell/VariantCell'; import { IconCell } from '../../../common/Table/cells/IconCell/IconCell'; import { InfoOutlined } from '@mui/icons-material'; -import { PlaygroundFeatureResultInfoModal } from '../PlaygroundFeatureResultInfoModal/PlaygroundFeatureResultInfoModal'; +import { FeatureResultInfoPopoverCell } from './FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell'; const defaultSort: SortingRule = { id: 'name' }; const { value, setValue } = createLocalStorage( @@ -51,87 +51,11 @@ export const PlaygroundResultsTable = ({ const isExtraSmallScreen = useMediaQuery(theme.breakpoints.down('sm')); const isSmallScreen = useMediaQuery(theme.breakpoints.down('md')); - const [selectedFeature, setSelectedFeature] = useState< - PlaygroundFeatureSchema | undefined - >(); - const [showResultInfoModal, setShowResultInfoModal] = useState(false); - - const columns = useMemo( - () => [ - { - Header: 'Name', - accessor: 'name', - searchable: true, - minWidth: 160, - Cell: ({ value, row: { original } }: any) => ( - - ), - }, - { - Header: 'Project ID', - accessor: 'projectId', - sortType: 'alphanumeric', - filterName: 'projectId', - searchable: true, - maxWidth: 170, - Cell: ({ value }: any) => ( - - ), - }, - { - Header: 'Variant', - id: 'variant', - accessor: 'variant.name', - sortType: 'alphanumeric', - filterName: 'variant', - searchable: true, - width: 200, - Cell: ({ - value, - row: { - original: { variant, feature, variants, isEnabled }, - }, - }: any) => ( - - ), - }, - { - Header: 'isEnabled', - accessor: 'isEnabled', - filterName: 'isEnabled', - filterParsing: (value: boolean) => (value ? 'true' : 'false'), - Cell: ({ value }: any) => , - sortType: 'boolean', - sortInverted: true, - }, - { - Header: '', - id: 'info', - Cell: ({ row }: any) => ( - } - onClick={() => onFeatureResultInfoClick(row.original)} - /> - ), - }, - ], - //eslint-disable-next-line - [] - ); - const { data: searchedData, getSearchText, getSearchContext, - } = useSearch(columns, searchValue, features || []); + } = useSearch(COLUMNS, searchValue, features || []); const data = useMemo(() => { return loading @@ -166,7 +90,7 @@ export const PlaygroundResultsTable = ({ } = useTable( { initialState, - columns: columns as any, + columns: COLUMNS as any, data: data as any, sortTypes, autoResetGlobalFilter: false, @@ -217,18 +141,8 @@ export const PlaygroundResultsTable = ({ // eslint-disable-next-line react-hooks/exhaustive-deps -- don't re-render after search params change }, [loading, sortBy, searchValue]); - const onFeatureResultInfoClick = (feature: PlaygroundFeatureSchema) => { - setSelectedFeature(feature); - setShowResultInfoModal(true); - }; - return ( <> - ); }; + +const COLUMNS = [ + { + Header: 'Name', + accessor: 'name', + searchable: true, + minWidth: 160, + Cell: ({ value, row: { original } }: any) => ( + + ), + }, + { + Header: 'Project ID', + accessor: 'projectId', + sortType: 'alphanumeric', + filterName: 'projectId', + searchable: true, + maxWidth: 170, + Cell: ({ value }: any) => ( + + ), + }, + { + Header: 'Variant', + id: 'variant', + accessor: 'variant.name', + sortType: 'alphanumeric', + filterName: 'variant', + searchable: true, + width: 200, + Cell: ({ + value, + row: { + original: { variant, feature, variants, isEnabled }, + }, + }: any) => ( + + ), + }, + { + Header: 'isEnabled', + accessor: 'isEnabled', + filterName: 'isEnabled', + filterParsing: (value: boolean) => (value ? 'true' : 'false'), + Cell: ({ value }: any) => , + sortType: 'boolean', + sortInverted: true, + }, + { + Header: '', + id: 'info', + Cell: ({ row }: any) => ( + + ), + }, +]; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/ResultChip/ResultChip.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/ResultChip/ResultChip.tsx new file mode 100644 index 0000000000..6ad427a2af --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/ResultChip/ResultChip.tsx @@ -0,0 +1,46 @@ +import {Box, Chip, styled} from "@mui/material"; +import {colors} from "../../../../../themes/colors"; +import {ConditionallyRender} from "../../../../common/ConditionallyRender/ConditionallyRender"; +import React, {ReactElement} from "react"; + +interface IResultChipProps { + enabled: boolean; + icon?: ReactElement; + label?: string; +} + +export const StyledFalseChip = styled(Chip)(({ theme }) => ({ + width: 80, + borderRadius: '5px', + border: `1px solid ${theme.palette.error.main}`, + backgroundColor: colors.red['200'], + ['& .MuiChip-label']: { + color: theme.palette.error.main, + }, + ['& .MuiChip-icon']: { + color: theme.palette.error.main, + }, +})); + +export const StyledTrueChip = styled(Chip)(({ theme }) => ({ + width: 80, + borderRadius: '5px', + border: `1px solid ${theme.palette.success.main}`, + backgroundColor: colors.green['100'], + ['& .MuiChip-label']: { + color: theme.palette.success.main, + }, + ['& .MuiChip-icon']: { + color: theme.palette.success.main, + }, +})); + +export const ResultChip = ({ enabled, icon, label}: IResultChipProps) => { + return ( + } + elseShow={} + /> + ); +} diff --git a/frontend/src/interfaces/strategy.ts b/frontend/src/interfaces/strategy.ts index a9564f1aca..89e170272b 100644 --- a/frontend/src/interfaces/strategy.ts +++ b/frontend/src/interfaces/strategy.ts @@ -1,4 +1,5 @@ import { Operator } from 'constants/operators'; +import {ISegment} from "./segment"; export interface IFeatureStrategy { id: string; @@ -56,3 +57,20 @@ export interface IFeatureStrategySortOrder { id: string; sortOrder: number; } + + +export interface IPlaygroundFeatureStrategyConstraintResult extends IConstraint { + result: boolean; +} + +export interface IPlaygroundFeatureStrategySegmentResult extends ISegment { + result: boolean; +} + +export interface IPlaygroundFeatureStrategyResult { + type: string; + result: boolean; + id?: string; + constraints?: IPlaygroundFeatureStrategyConstraintResult[]; + segments?: IPlaygroundFeatureStrategySegmentResult[]; +} From 352a4cca13b3785271921b60215159eccceb8fe7 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Thu, 28 Jul 2022 19:23:38 +0300 Subject: [PATCH 03/56] Playground result info structure and initial styles --- .../StrategyExecution/StrategyExecution.tsx | 3 +- .../StrategyItem/StrategyItem.tsx | 61 +++++--------- .../FeatureResultInfoPopoverCell.styles.ts | 14 ++++ .../FeatureResultInfoPopoverCell.tsx | 43 ++++++++-- .../PlaygroundResultFeatureDetails.styles.ts | 21 +++++ .../PlaygroundResultFeatureDetails.tsx | 39 +++++++++ ...ygroundResultFeatureStrategyItem.styles.ts | 32 +++++++ .../PlaygroundResultFeatureStrategyItem.tsx | 71 ++++++++++++---- .../FeatureStatusCell/FeatureStatusCell.tsx | 25 +----- .../PlaygroundResultChip.tsx | 84 +++++++++++++++++++ .../ResultChip/ResultChip.tsx | 46 ---------- .../actions/usePlayground/playground.model.ts | 28 ++++++- frontend/src/interfaces/strategy.ts | 18 ---- 13 files changed, 331 insertions(+), 154 deletions(-) create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.styles.ts create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx delete mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/ResultChip/ResultChip.tsx 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 380ba8c3c4..18db353802 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 @@ -16,9 +16,10 @@ import { parseParameterNumber, parseParameterStrings, } from 'utils/parseParameter'; +import { PlaygroundFeatureStrategyResult } from 'hooks/api/actions/usePlayground/playground.model'; interface IStrategyExecutionProps { - strategy: IFeatureStrategy; + strategy: IFeatureStrategy | PlaygroundFeatureStrategyResult; percentageFill?: string; } 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 30bc4d251a..f44f82ce6a 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,7 +1,7 @@ import { DragIndicator, Edit } from '@mui/icons-material'; -import { styled, useTheme, IconButton, Chip } from '@mui/material'; +import { styled, useTheme, IconButton } from '@mui/material'; import { Link } from 'react-router-dom'; -import {IFeatureStrategy, IPlaygroundFeatureStrategyResult} from 'interfaces/strategy'; +import { IFeatureStrategy } from 'interfaces/strategy'; import { getFeatureStrategyIcon, formatStrategyName, @@ -18,10 +18,8 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit interface IStrategyItemProps { environmentId: string; - strategy: IFeatureStrategy | IPlaygroundFeatureStrategyResult; + strategy: IFeatureStrategy; isDraggable?: boolean; - showActions?: boolean; - result?: boolean; } const DragIcon = styled(IconButton)(({ theme }) => ({ @@ -34,8 +32,6 @@ export const StrategyItem = ({ environmentId, strategy, isDraggable, - showActions = true, - result, }: IStrategyItemProps) => { const projectId = useRequiredPathParam('projectId'); const featureId = useRequiredPathParam('featureId'); @@ -50,8 +46,6 @@ export const StrategyItem = ({ strategy.id ); - const showShouldShowResultChip = result !== undefined; - return (
@@ -72,36 +66,25 @@ export const StrategyItem = ({ maxLength={15} text={formatStrategyName(strategy.name)} /> - - - - - -
- } - /> - - } - /> +
+ + + + +
({ + popoverPaper: { + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', + padding: '48px', + gap: '24px', + width: '728px', + height: 'auto', + // overflowY: 'scroll', + }, +})); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx index eb10bf808d..43c91711bc 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx @@ -1,8 +1,17 @@ -import { PlaygroundFeatureSchema } from '../../../../../hooks/api/actions/usePlayground/playground.model'; -import { Box, IconButton, Popover } from '@mui/material'; +import { + PlaygroundFeatureSchema, + PlaygroundFeatureStrategyResult, +} from '../../../../../hooks/api/actions/usePlayground/playground.model'; +import { Box, IconButton, Popover, Typography } from '@mui/material'; import { InfoOutlined } from '@mui/icons-material'; import { IconCell } from '../../../../common/Table/cells/IconCell/IconCell'; import React, { useRef, useState } from 'react'; +import { ConditionallyRender } from '../../../../common/ConditionallyRender/ConditionallyRender'; +import { StrategyDraggableItem } from '../../../../feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyDraggableItem'; +import { FeatureStrategyEmpty } from '../../../../feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty'; +import { PlaygroundResultFeatureStrategyItem } from './PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem'; +import { useStyles } from './FeatureResultInfoPopoverCell.styles'; +import { PlaygroundResultFeatureDetails } from './PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails'; interface FeatureResultInfoPopoverCellProps { feature?: PlaygroundFeatureSchema; @@ -15,16 +24,18 @@ export const FeatureResultInfoPopoverCell = ({ return null; } const [open, setOpen] = useState(false); + const { classes: styles } = useStyles(); const ref = useRef(null); const togglePopover = (event: React.SyntheticEvent) => { setOpen(!open); }; - const strategies = [ + const strategies: PlaygroundFeatureStrategyResult[] = [ { - type: 'standard', + name: 'default', id: 'strategy-id', + parameters: {}, result: false, constraints: [ { @@ -54,10 +65,6 @@ export const FeatureResultInfoPopoverCell = ({ }, ], }, - { - type: 'default', - result: true, - }, ]; return ( @@ -77,8 +84,26 @@ export const FeatureResultInfoPopoverCell = ({ vertical: 'center', horizontal: 'left', }} + classes={{ paper: styles.popoverPaper }} > - {feature.name} + + 0} + show={ + <> + {`Strategies (${strategies.length})`} + {strategies.map((strategy, index) => ( + + ))} + + } + /> ); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts new file mode 100644 index 0000000000..7b02b24f97 --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts @@ -0,0 +1,21 @@ +import { makeStyles } from 'tss-react/mui'; + +export const useStyles = makeStyles()(theme => ({ + titleRow: { + display: 'inline-flex', + alignItems: 'flex-start', + justifyItems: 'center', + gap: '12px', + }, + descriptionRow: { + flexDirection: 'row', + display: 'inline-flex', + alignItems: 'flex-start', + justifyItems: 'center', + gap: '6px', + }, + name: { + fontWeight: 600, + padding: '4px', + }, +})); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx new file mode 100644 index 0000000000..b0f77014b9 --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx @@ -0,0 +1,39 @@ +import { PlaygroundFeatureSchema } from '../../../../../../hooks/api/actions/usePlayground/playground.model'; +import { Typography } from '@mui/material'; +import { PlaygroundResultChip } from '../../PlaygroundResultChip/PlaygroundResultChip'; +import { useStyles } from './PlaygroundResultFeatureDetails.styles'; +interface PlaygroundFeatureResultDetailsProps { + feature: PlaygroundFeatureSchema; +} +export const PlaygroundResultFeatureDetails = ({ + feature, +}: PlaygroundFeatureResultDetailsProps) => { + const { classes: styles } = useStyles(); + + const description = feature.isEnabled + ? 'This feature toggle is True in production because ' + : 'This feature toggle is False in production because '; + const reason = feature.isEnabled + ? 'at least one strategy is True' + : 'all strategies are False'; + const color = feature.isEnabled ? 'success' : 'error'; + + return ( + <> +
+ + {feature.name} + + + + +
+
+ {description} + + {reason} + +
+ + ); +}; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.styles.ts new file mode 100644 index 0000000000..327e01f383 --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.styles.ts @@ -0,0 +1,32 @@ +import { makeStyles } from 'tss-react/mui'; + +export const useStyles = makeStyles()(theme => ({ + header: { + display: 'flex', + padding: theme.spacing(2, 2), + justifyContent: 'space-between', + }, + headerName: { + padding: theme.spacing(0.5, 2), + display: 'flex', + gap: theme.spacing(1), + alignItems: 'center', + borderBottom: `1px solid ${theme.palette.divider}`, + fontWeight: theme.typography.fontWeightMedium, + }, + icon: { + fill: theme.palette.inactiveIcon, + }, + resultChip: { + marginLeft: 'auto', + }, + body: { + padding: theme.spacing(2), + justifyItems: 'center', + }, + innerContainer: { + [theme.breakpoints.down(400)]: { + padding: '0.5rem', + }, + }, +})); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx index f890d4da16..0ef0890ca9 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx @@ -1,38 +1,75 @@ import { ConditionallyRender } from '../../../../../common/ConditionallyRender/ConditionallyRender'; import { StrategySeparator } from '../../../../../common/StrategySeparator/StrategySeparator'; -import { StrategyItem } from '../../../../../feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem'; +import { styled, useTheme } from '@mui/material'; +import { useStyles } from './PlaygroundResultFeatureStrategyItem.styles'; import { - IConstraint, - IFeatureStrategy, IPlaygroundFeatureStrategyResult, -} from '../../../../../../interfaces/strategy'; -import { ISegment } from '../../../../../../interfaces/segment'; - + formatStrategyName, + getFeatureStrategyIcon, +} from '../../../../../../utils/strategyNames'; +import StringTruncator from '../../../../../common/StringTruncator/StringTruncator'; +import { PlaygroundResultChip } from '../../PlaygroundResultChip/PlaygroundResultChip'; +import { StrategyExecution } from '../../../../../feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution'; +import { PlaygroundFeatureStrategyResult } from 'hooks/api/actions/usePlayground/playground.model'; interface IPlaygroundResultFeatureStrategyItemProps { - strategy: IPlaygroundFeatureStrategyResult; - environmentName: string; + strategy: PlaygroundFeatureStrategyResult; index: number; } +const StyledStrategyResultBox = styled('div')(({ theme }) => ({ + width: '100%', + position: 'relative', + paddingBottom: '1rem', + borderRadius: theme.shape.borderRadiusMedium, + '& + &': { + marginTop: theme.spacing(2), + }, + background: theme.palette.background.default, +})); + export const PlaygroundResultFeatureStrategyItem = ({ strategy, - environmentName, index, }: IPlaygroundResultFeatureStrategyItemProps) => { const { result } = strategy; + const { classes: styles } = useStyles(); + const theme = useTheme(); + const Icon = getFeatureStrategyIcon(strategy.name); + const label = + result === undefined ? 'Not found' : result ? 'True' : 'False'; + const border = Boolean(result) + ? `2px solid ${theme.palette.success.main}` + : `1px solid ${theme.palette.divider}`; return ( -
+ 0} show={} /> - -
+
+
+
+ + +
+ +
+
+ +
+
+ ); }; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx index 7ead5073d1..4ff8a5a598 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx @@ -4,7 +4,7 @@ import { ReactComponent as FeatureEnabledIcon } from 'assets/icons/isenabled-tru import { ReactComponent as FeatureDisabledIcon } from 'assets/icons/isenabled-false.svg'; import { Box, Chip, styled, useTheme } from '@mui/material'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import {ResultChip} from "../ResultChip/ResultChip"; +import { PlaygroundResultChip } from '../PlaygroundResultChip/PlaygroundResultChip'; interface IFeatureStatusCellProps { enabled: boolean; @@ -21,31 +21,10 @@ const StyledChipWrapper = styled(Box)(() => ({ })); export const FeatureStatusCell = ({ enabled }: IFeatureStatusCellProps) => { - const theme = useTheme(); - const icon = ( - - } - elseShow={ - - } - /> - ); - - const label = enabled ? 'True' : 'False'; - return ( - + ); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx new file mode 100644 index 0000000000..7b4691e0fe --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx @@ -0,0 +1,84 @@ +import { Chip, styled, useTheme } from '@mui/material'; +import { colors } from '../../../../../themes/colors'; +import { ConditionallyRender } from '../../../../common/ConditionallyRender/ConditionallyRender'; +import React from 'react'; +import { ReactComponent as FeatureEnabledIcon } from '../../../../../assets/icons/isenabled-true.svg'; +import { ReactComponent as FeatureDisabledIcon } from '../../../../../assets/icons/isenabled-false.svg'; + +interface IResultChipProps { + enabled: boolean; + // Result icon - defaults to true + showIcon?: boolean; + label?: string; +} + +export const StyledFalseChip = styled(Chip)(({ theme }) => ({ + width: 80, + borderRadius: '5px', + border: `1px solid ${theme.palette.error.main}`, + backgroundColor: colors.red['200'], + ['& .MuiChip-label']: { + color: theme.palette.error.main, + }, + ['& .MuiChip-icon']: { + color: theme.palette.error.main, + }, +})); + +export const StyledTrueChip = styled(Chip)(({ theme }) => ({ + width: 80, + borderRadius: '5px', + border: `1px solid ${theme.palette.success.main}`, + backgroundColor: colors.green['100'], + ['& .MuiChip-label']: { + color: theme.palette.success.main, + }, + ['& .MuiChip-icon']: { + color: theme.palette.success.main, + }, +})); + +export const PlaygroundResultChip = ({ + enabled, + showIcon = true, + label, +}: IResultChipProps) => { + const theme = useTheme(); + const icon = ( + + } + elseShow={ + + } + /> + ); + + const defaultLabel = enabled ? 'True' : 'False'; + + return ( + + } + elseShow={ + + } + /> + ); +}; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/ResultChip/ResultChip.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/ResultChip/ResultChip.tsx deleted file mode 100644 index 6ad427a2af..0000000000 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/ResultChip/ResultChip.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import {Box, Chip, styled} from "@mui/material"; -import {colors} from "../../../../../themes/colors"; -import {ConditionallyRender} from "../../../../common/ConditionallyRender/ConditionallyRender"; -import React, {ReactElement} from "react"; - -interface IResultChipProps { - enabled: boolean; - icon?: ReactElement; - label?: string; -} - -export const StyledFalseChip = styled(Chip)(({ theme }) => ({ - width: 80, - borderRadius: '5px', - border: `1px solid ${theme.palette.error.main}`, - backgroundColor: colors.red['200'], - ['& .MuiChip-label']: { - color: theme.palette.error.main, - }, - ['& .MuiChip-icon']: { - color: theme.palette.error.main, - }, -})); - -export const StyledTrueChip = styled(Chip)(({ theme }) => ({ - width: 80, - borderRadius: '5px', - border: `1px solid ${theme.palette.success.main}`, - backgroundColor: colors.green['100'], - ['& .MuiChip-label']: { - color: theme.palette.success.main, - }, - ['& .MuiChip-icon']: { - color: theme.palette.success.main, - }, -})); - -export const ResultChip = ({ enabled, icon, label}: IResultChipProps) => { - return ( - } - elseShow={} - /> - ); -} diff --git a/frontend/src/hooks/api/actions/usePlayground/playground.model.ts b/frontend/src/hooks/api/actions/usePlayground/playground.model.ts index 3b954902de..eff504cda2 100644 --- a/frontend/src/hooks/api/actions/usePlayground/playground.model.ts +++ b/frontend/src/hooks/api/actions/usePlayground/playground.model.ts @@ -1,5 +1,10 @@ // TODO: replace with auto-generated openapi code +import { + IConstraint, + IFeatureStrategyParameters, +} from '../../../../interfaces/strategy'; + export enum PlaygroundFeatureSchemaVariantPayloadTypeEnum { Json = 'json', Csv = 'csv', @@ -158,7 +163,7 @@ export interface PlaygroundFeatureSchema { * @type {boolean} * @memberof PlaygroundFeatureSchema */ - isEnabled: boolean; + enabled: boolean | 'unevaluated'; /** * * @type {PlaygroundFeatureSchemaVariant} @@ -248,3 +253,24 @@ export interface SdkContextSchema { */ userId?: string; } + +export interface PlaygroundFeatureStrategyConstraintResult extends IConstraint { + result: boolean; +} + +export interface PlaygroundFeatureStrategySegmentResult { + id: number; + name: string; + result: boolean; + constraints?: PlaygroundFeatureStrategyConstraintResult[]; +} + +export interface PlaygroundFeatureStrategyResult { + id: string; + name: string; + result: boolean | 'not found'; + type?: string; + constraints?: PlaygroundFeatureStrategyConstraintResult[]; + segments?: PlaygroundFeatureStrategySegmentResult[]; + parameters: IFeatureStrategyParameters; +} diff --git a/frontend/src/interfaces/strategy.ts b/frontend/src/interfaces/strategy.ts index 89e170272b..a9564f1aca 100644 --- a/frontend/src/interfaces/strategy.ts +++ b/frontend/src/interfaces/strategy.ts @@ -1,5 +1,4 @@ import { Operator } from 'constants/operators'; -import {ISegment} from "./segment"; export interface IFeatureStrategy { id: string; @@ -57,20 +56,3 @@ export interface IFeatureStrategySortOrder { id: string; sortOrder: number; } - - -export interface IPlaygroundFeatureStrategyConstraintResult extends IConstraint { - result: boolean; -} - -export interface IPlaygroundFeatureStrategySegmentResult extends ISegment { - result: boolean; -} - -export interface IPlaygroundFeatureStrategyResult { - type: string; - result: boolean; - id?: string; - constraints?: IPlaygroundFeatureStrategyConstraintResult[]; - segments?: IPlaygroundFeatureStrategySegmentResult[]; -} From 9e38cf3ff9aac5e7d780314da460b36e22e53a64 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Fri, 29 Jul 2022 08:52:22 +0300 Subject: [PATCH 04/56] Playground result segments, constraints initial --- .../ConstraintAccordionView.tsx | 11 +- .../StrategySeparator/StrategySeparator.tsx | 7 +- .../FeatureResultInfoPopoverCell.styles.ts | 3 +- .../FeatureResultInfoPopoverCell.tsx | 36 +++--- .../PlaygroundResultConstraintExecution.tsx | 35 ++++++ .../PlaygroundResultFeatureStrategyItem.tsx | 14 +-- ...PlaygroundResultSegmentExecution.styles.ts | 12 ++ .../PlaygroundResultSegmentExecution.tsx | 103 ++++++++++++++++++ ...laygroundResultStrategyExecution.styles.ts | 18 +++ .../PlaygroundResultStrategyExecution.tsx | 61 +++++++++++ .../FeatureStatusCell/FeatureStatusCell.tsx | 6 +- .../PlaygroundResultsTable.tsx | 2 - 12 files changed, 275 insertions(+), 33 deletions(-) create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.styles.ts create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.styles.ts create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.tsx diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx index d7df4b83d7..59130f58ae 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx @@ -1,5 +1,11 @@ import { useState } from 'react'; -import { Accordion, AccordionSummary, AccordionDetails } from '@mui/material'; +import { + Accordion, + AccordionSummary, + AccordionDetails, + SxProps, + Theme, +} from '@mui/material'; import { IConstraint } from 'interfaces/strategy'; import { ConstraintAccordionViewBody } from './ConstraintAccordionViewBody/ConstraintAccordionViewBody'; import { ConstraintAccordionViewHeader } from './ConstraintAccordionViewHeader/ConstraintAccordionViewHeader'; @@ -15,12 +21,14 @@ interface IConstraintAccordionViewProps { constraint: IConstraint; onDelete?: () => void; onEdit?: () => void; + sx?: SxProps; } export const ConstraintAccordionView = ({ constraint, onEdit, onDelete, + sx = undefined, }: IConstraintAccordionViewProps) => { const { classes: styles } = useStyles(); const [expandable, setExpandable] = useState(true); @@ -42,6 +50,7 @@ export const ConstraintAccordionView = ({ className={styles.accordion} classes={{ root: styles.accordionRoot }} expanded={expanded} + sx={sx} > ; } const StyledContainer = styled('div')(({ theme }) => ({ @@ -32,8 +33,8 @@ const StyledCenteredContent = styled(StyledContent)(({ theme }) => ({ border: `1px solid ${theme.palette.primary.border}`, })); -export const StrategySeparator = ({ text }: IStrategySeparatorProps) => ( - +export const StrategySeparator = ({ text, sx }: IStrategySeparatorProps) => ( + {text}} 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 a702a2ddc6..12801e82b5 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts @@ -9,6 +9,7 @@ export const useStyles = makeStyles()(theme => ({ gap: '24px', width: '728px', height: 'auto', - // overflowY: 'scroll', + overflowY: 'scroll', + backgroundColor: theme.palette.tertiary.light, }, })); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx index 43c91711bc..52d9a2a02f 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx @@ -2,13 +2,10 @@ import { PlaygroundFeatureSchema, PlaygroundFeatureStrategyResult, } from '../../../../../hooks/api/actions/usePlayground/playground.model'; -import { Box, IconButton, Popover, Typography } from '@mui/material'; +import { IconButton, Popover, styled, Typography } from '@mui/material'; import { InfoOutlined } from '@mui/icons-material'; -import { IconCell } from '../../../../common/Table/cells/IconCell/IconCell'; import React, { useRef, useState } from 'react'; import { ConditionallyRender } from '../../../../common/ConditionallyRender/ConditionallyRender'; -import { StrategyDraggableItem } from '../../../../feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyDraggableItem'; -import { FeatureStrategyEmpty } from '../../../../feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty'; import { PlaygroundResultFeatureStrategyItem } from './PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem'; import { useStyles } from './FeatureResultInfoPopoverCell.styles'; import { PlaygroundResultFeatureDetails } from './PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails'; @@ -17,12 +14,14 @@ interface FeatureResultInfoPopoverCellProps { feature?: PlaygroundFeatureSchema; } +const FeatureResultPopoverWrapper = styled('div')(({ theme }) => ({ + alignItems: 'flex-end', + color: theme.palette.tertiary.main, +})); + export const FeatureResultInfoPopoverCell = ({ feature, }: FeatureResultInfoPopoverCellProps) => { - if (!feature) { - return null; - } const [open, setOpen] = useState(false); const { classes: styles } = useStyles(); const ref = useRef(null); @@ -36,7 +35,7 @@ export const FeatureResultInfoPopoverCell = ({ name: 'default', id: 'strategy-id', parameters: {}, - result: false, + result: true, constraints: [ { result: false, @@ -44,7 +43,12 @@ export const FeatureResultInfoPopoverCell = ({ operator: 'IN', caseInsensitive: true, inverted: false, - values: ['a', 'b'], + values: [ + 'a', + 'b', + 'sdlghigoiahr;g', + 'WOGIHwegoihwlwEGHLwgklWEGK;L', + ], }, ], segments: [ @@ -55,9 +59,9 @@ export const FeatureResultInfoPopoverCell = ({ constraints: [ { result: false, - contextName: 'appName', + contextName: 'environment', operator: 'IN', - caseInsensitive: true, + caseInsensitive: false, inverted: false, values: ['a', 'b'], }, @@ -67,8 +71,12 @@ export const FeatureResultInfoPopoverCell = ({ }, ]; + if (!feature) { + return null; + } + return ( - <> + @@ -92,7 +100,7 @@ export const FeatureResultInfoPopoverCell = ({ show={ <> {`Strategies (${strategies.length})`} {strategies.map((strategy, index) => ( - + ); }; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx new file mode 100644 index 0000000000..a68ab63404 --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx @@ -0,0 +1,35 @@ +import { PlaygroundFeatureStrategyConstraintResult } 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 { ConstraintAccordionView } from '../../../../../common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView'; + +interface PlaygroundResultConstraintExecutionProps { + constraints?: PlaygroundFeatureStrategyConstraintResult[]; +} + +export const PlaygroundResultConstraintExecution = ({ + constraints, +}: PlaygroundResultConstraintExecutionProps) => { + if (!constraints) return null; + + return ( + <> + {constraints?.map((constraint, index) => ( + + 0} + show={} + /> + + + ))} + + ); +}; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx index 0ef0890ca9..aa86ffea67 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx @@ -8,8 +8,8 @@ import { } from '../../../../../../utils/strategyNames'; import StringTruncator from '../../../../../common/StringTruncator/StringTruncator'; import { PlaygroundResultChip } from '../../PlaygroundResultChip/PlaygroundResultChip'; -import { StrategyExecution } from '../../../../../feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution'; import { PlaygroundFeatureStrategyResult } from 'hooks/api/actions/usePlayground/playground.model'; +import { PlaygroundResultStrategyExecution } from '../PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution'; interface IPlaygroundResultFeatureStrategyItemProps { strategy: PlaygroundFeatureStrategyResult; @@ -31,14 +31,14 @@ export const PlaygroundResultFeatureStrategyItem = ({ strategy, index, }: IPlaygroundResultFeatureStrategyItemProps) => { - const { result } = strategy; + const { result, name } = strategy; const { classes: styles } = useStyles(); const theme = useTheme(); const Icon = getFeatureStrategyIcon(strategy.name); const label = result === undefined ? 'Not found' : result ? 'True' : 'False'; const border = Boolean(result) - ? `2px solid ${theme.palette.success.main}` + ? `1px solid ${theme.palette.success.main}` : `1px solid ${theme.palette.divider}`; return ( @@ -54,7 +54,7 @@ export const PlaygroundResultFeatureStrategyItem = ({
-
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.styles.ts new file mode 100644 index 0000000000..10b1dc7733 --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.styles.ts @@ -0,0 +1,12 @@ +import { makeStyles } from 'tss-react/mui'; + +export const useStyles = makeStyles()(theme => ({ + container: {}, + link: { + textDecoration: 'none', + marginLeft: theme.spacing(1), + '&:hover': { + textDecoration: 'underline', + }, + }, +})); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx new file mode 100644 index 0000000000..c20fa7ffe4 --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx @@ -0,0 +1,103 @@ +import { PlaygroundFeatureStrategySegmentResult } from '../../../../../../hooks/api/actions/usePlayground/playground.model'; +import { PlaygroundResultConstraintExecution } from '../PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution'; +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 { styled, Typography } from '@mui/material'; +import { ConditionallyRender } from '../../../../../common/ConditionallyRender/ConditionallyRender'; + +interface PlaygroundResultSegmentExecutionProps { + segments?: PlaygroundFeatureStrategySegmentResult[]; +} + +const SegmentExecutionLinkWrapper = styled('div')(({ theme }) => ({ + padding: theme.spacing(2, 3), + display: 'flex', + alignItems: 'center', + justifyContent: 'flex-start', + fontSize: theme.fontSizes.smallBody, + position: 'relative', +})); + +const SegmentExecutionHeader = styled('div')(({ theme }) => ({ + width: '100%', + display: 'inline-flex', + alignItems: 'center', + justifyContent: 'space-between', + '& + &': { + margin: theme.spacing(2), + }, +})); + +const SegmentExecutionWrapper = styled('div')(({ theme }) => ({ + flexDirection: 'column', + borderRadius: theme.shape.borderRadiusMedium, + border: `1px solid ${theme.palette.dividerAlternative}`, + '& + &': { + marginTop: theme.spacing(2), + }, + background: theme.palette.neutral.light, + marginBottom: '8px', +})); + +const SegmentExecutionConstraintWrapper = styled('div')(({ theme }) => ({ + padding: '12px', +})); + +const SegmentResultTextWrapper = styled('div')(({ theme }) => ({ + color: theme.palette.error.main, + display: 'inline-flex', + justifyContent: 'center', + marginRight: '12px', + gap: '8px', +})); + +export const PlaygroundResultSegmentExecution = ({ + segments, +}: PlaygroundResultSegmentExecutionProps) => { + const { classes: styles } = useStyles(); + if (!segments) return null; + return ( + <> + {segments.map(segment => ( + + + + {' '} + Segment:{' '} + + {segment.name} + + + + + segment is false + + + + + + } + /> + + + + + + + ))} + + ); +}; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.styles.ts new file mode 100644 index 0000000000..e2d49389e1 --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.styles.ts @@ -0,0 +1,18 @@ +import { makeStyles } from 'tss-react/mui'; + +export const useStyles = makeStyles()(theme => ({ + valueContainer: { + display: 'flex', + alignItems: 'center', + gap: '1ch', + }, + valueSeparator: { + color: theme.palette.grey[700], + }, + summary: { + width: '100%', + padding: theme.spacing(2, 3), + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + }, +})); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.tsx new file mode 100644 index 0000000000..385ca77c4f --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.tsx @@ -0,0 +1,61 @@ +import { ConditionallyRender } from '../../../../../common/ConditionallyRender/ConditionallyRender'; +import { StrategySeparator } from '../../../../../common/StrategySeparator/StrategySeparator'; +import { Box, Chip } from '@mui/material'; +import { useStyles } from './PlaygroundResultStrategyExecution.styles'; +import { PlaygroundFeatureStrategyResult } 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'; + +interface PlaygroundResultStrategyExecutionProps { + strategyResult: PlaygroundFeatureStrategyResult; + percentageFill?: string; +} + +export const PlaygroundResultStrategyExecution = ({ + strategyResult, +}: PlaygroundResultStrategyExecutionProps) => { + const { name, constraints, segments } = strategyResult; + + const { uiConfig } = useUiConfig(); + const { classes: styles } = useStyles(); + + return ( + <> + 0) + } + show={} + /> + 0)} + show={ + <> + + + + } + /> + + The standard strategy is{' '} + {' '} + for all users. + + } + /> + + ); +}; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx index 4ff8a5a598..42a667da22 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx @@ -1,9 +1,5 @@ import React from 'react'; -import { colors } from 'themes/colors'; -import { ReactComponent as FeatureEnabledIcon } from 'assets/icons/isenabled-true.svg'; -import { ReactComponent as FeatureDisabledIcon } from 'assets/icons/isenabled-false.svg'; -import { Box, Chip, styled, useTheme } from '@mui/material'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; +import { Box, styled } from '@mui/material'; import { PlaygroundResultChip } from '../PlaygroundResultChip/PlaygroundResultChip'; interface IFeatureStatusCellProps { diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx index 5337251325..0dda1a42b5 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx @@ -23,8 +23,6 @@ import { PlaygroundFeatureSchema } from 'hooks/api/actions/usePlayground/playgro import { Box, Typography, useMediaQuery, useTheme } from '@mui/material'; import useLoading from 'hooks/useLoading'; import { VariantCell } from './VariantCell/VariantCell'; -import { IconCell } from '../../../common/Table/cells/IconCell/IconCell'; -import { InfoOutlined } from '@mui/icons-material'; import { FeatureResultInfoPopoverCell } from './FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell'; const defaultSort: SortingRule = { id: 'name' }; From a0a7c833664f3fb0f873714cda9a925540437c5a Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Fri, 29 Jul 2022 11:16:14 +0300 Subject: [PATCH 05/56] Playground context value --- .../ConstraintAccordionView.tsx | 12 ++- .../ConstraintAccordionViewHeader.tsx | 13 ++- .../ConstraintAccordionViewHeaderInfo.tsx | 95 ++++++++++++++----- ...raintAccordionViewHeaderMultipleValues.tsx | 20 +++- ...nstraintAccordionViewHeaderSingleValue.tsx | 16 +++- .../PlaygroundResultConstraintExecution.tsx | 26 ++++- .../actions/usePlayground/playground.model.ts | 1 + 7 files changed, 152 insertions(+), 31 deletions(-) diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx index 59130f58ae..1377a2b2a0 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx @@ -16,11 +16,17 @@ import { semVerOperators, } from 'constants/operators'; import { useStyles } from '../ConstraintAccordion.styles'; +import { + PlaygroundFeatureStrategyConstraintResult, + SdkContextSchema, +} from '../../../../hooks/api/actions/usePlayground/playground.model'; interface IConstraintAccordionViewProps { - constraint: IConstraint; + constraint: IConstraint | PlaygroundFeatureStrategyConstraintResult; onDelete?: () => void; onEdit?: () => void; + playgroundContext?: SdkContextSchema; + maxLength?: number; sx?: SxProps; } @@ -29,6 +35,8 @@ export const ConstraintAccordionView = ({ onEdit, onDelete, sx = undefined, + maxLength, + playgroundContext, }: IConstraintAccordionViewProps) => { const { classes: styles } = useStyles(); const [expandable, setExpandable] = useState(true); @@ -70,6 +78,8 @@ export const ConstraintAccordionView = ({ singleValue={singleValue} allowExpand={setExpandable} expanded={expanded} + maxLength={maxLength ?? 112} + playgroundContext={playgroundContext} /> diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx index 897304438d..9a4b0bbb58 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx @@ -3,14 +3,20 @@ import { IConstraint } from 'interfaces/strategy'; import { ConstraintAccordionViewHeaderInfo } from './ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo'; import { ConstraintAccordionHeaderActions } from '../../ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions'; import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccordion.styles'; +import { + PlaygroundFeatureStrategyConstraintResult, + SdkContextSchema, +} from '../../../../../hooks/api/actions/usePlayground/playground.model'; interface IConstraintAccordionViewHeaderProps { - constraint: IConstraint; + constraint: IConstraint | PlaygroundFeatureStrategyConstraintResult; onDelete?: () => void; onEdit?: () => void; singleValue: boolean; expanded: boolean; allowExpand: (shouldExpand: boolean) => void; + playgroundContext?: SdkContextSchema; + maxLength?: number; } export const ConstraintAccordionViewHeader = ({ @@ -20,6 +26,8 @@ export const ConstraintAccordionViewHeader = ({ singleValue, allowExpand, expanded, + maxLength, + playgroundContext, }: IConstraintAccordionViewHeaderProps) => { const { classes: styles } = useStyles(); @@ -31,6 +39,9 @@ export const ConstraintAccordionViewHeader = ({ singleValue={singleValue} allowExpand={allowExpand} expanded={expanded} + result={'result' in constraint ? constraint.result : undefined} + maxLength={maxLength} + playgroundContext={playgroundContext} /> ({ display: '-webkit-box', @@ -27,11 +29,21 @@ const StyledHeaderText = styled('span')(({ theme }) => ({ }, })); +const StyledHeaderWrapper = styled('div')(({ theme }) => ({ + display: 'flex', + width: '100%', + justifyContent: 'space-between', + borderRadius: '8px', +})); + interface ConstraintAccordionViewHeaderMetaInfoProps { constraint: IConstraint; singleValue: boolean; expanded: boolean; allowExpand: (shouldExpand: boolean) => void; + result?: boolean; + maxLength?: number; + playgroundContext?: SdkContextSchema; } export const ConstraintAccordionViewHeaderInfo = ({ @@ -39,31 +51,70 @@ export const ConstraintAccordionViewHeaderInfo = ({ singleValue, allowExpand, expanded, + result, + maxLength = 112, + playgroundContext, }: ConstraintAccordionViewHeaderMetaInfoProps) => { const { classes: styles } = useStyles(); + const theme = useTheme(); + return ( -
- - {constraint.contextName} - - + +
+ + + {constraint.contextName} + + {playgroundContext![ + constraint.contextName + ] || 'no value'} + + } + /> + + + + + } + elseShow={ + + } + /> +
- } - elseShow={ - - } + condition={result !== undefined && !Boolean(result)} + show={} /> -
+ ); }; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx index 9d063c1c94..da0cc1fcfc 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx @@ -1,9 +1,10 @@ import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender'; -import { styled } from '@mui/material'; +import { styled, Typography } from '@mui/material'; import React, { useEffect, useMemo, useState } from 'react'; import classnames from 'classnames'; import { IConstraint } from '../../../../../../interfaces/strategy'; import { useStyles } from '../../../ConstraintAccordion.styles'; +import { PlaygroundFeatureStrategyConstraintResult } from '../../../../../../hooks/api/actions/usePlayground/playground.model'; const StyledValuesSpan = styled('span')(({ theme }) => ({ display: '-webkit-box', @@ -20,7 +21,7 @@ const StyledValuesSpan = styled('span')(({ theme }) => ({ })); interface ConstraintSingleValueProps { - constraint: IConstraint; + constraint: IConstraint | PlaygroundFeatureStrategyConstraintResult; expanded: boolean; maxLength: number; allowExpand: (shouldExpand: boolean) => void; @@ -50,6 +51,21 @@ export const ConstraintAccordionViewHeaderMultipleValues = ({ return (
+ + does not match any values{' '} + + } + /> {text} ({ margin: 'auto 0', @@ -13,7 +15,7 @@ const StyledSingleValueChip = styled(Chip)(({ theme }) => ({ })); interface ConstraintSingleValueProps { - constraint: IConstraint; + constraint: IConstraint | PlaygroundFeatureStrategyConstraintResult; allowExpand: (shouldExpand: boolean) => void; } @@ -30,6 +32,16 @@ export const ConstraintAccordionViewHeaderSingleValue = ({ return (
+ + does not match any values{' '} + + } + /> diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx index a68ab63404..4d3185afa9 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx @@ -1,21 +1,39 @@ -import { PlaygroundFeatureStrategyConstraintResult } from 'hooks/api/actions/usePlayground/playground.model'; +import { + PlaygroundFeatureStrategyConstraintResult, + SdkContextSchema, +} 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 { ConstraintAccordionView } from '../../../../../common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView'; +import { styled } from '@mui/material'; interface PlaygroundResultConstraintExecutionProps { constraints?: PlaygroundFeatureStrategyConstraintResult[]; } +export const PlaygroundResultConstraintExecutionWrapper = styled('div')( + ({ theme }) => ({ + width: '100%', + display: 'flex', + flexDirection: 'column', + }) +); + export const PlaygroundResultConstraintExecution = ({ constraints, }: PlaygroundResultConstraintExecutionProps) => { + // const context = usePlaygroundContext(); + const context: SdkContextSchema = { + appName: 'MyApp', + environment: '', + }; + if (!constraints) return null; return ( - <> + {constraints?.map((constraint, index) => ( ))} - + ); }; diff --git a/frontend/src/hooks/api/actions/usePlayground/playground.model.ts b/frontend/src/hooks/api/actions/usePlayground/playground.model.ts index eff504cda2..fba4ce9432 100644 --- a/frontend/src/hooks/api/actions/usePlayground/playground.model.ts +++ b/frontend/src/hooks/api/actions/usePlayground/playground.model.ts @@ -264,6 +264,7 @@ export interface PlaygroundFeatureStrategySegmentResult { result: boolean; constraints?: PlaygroundFeatureStrategyConstraintResult[]; } +6; export interface PlaygroundFeatureStrategyResult { id: string; From 61c8c4d66b20d3e31b1210abfdcbecdf1dad711b Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Fri, 29 Jul 2022 11:37:44 +0300 Subject: [PATCH 06/56] bug fix --- .../ConstraintAccordionViewHeaderInfo.tsx | 1 - .../FeatureResultInfoPopoverCell.tsx | 33 +++++++++++++------ .../PlaygroundResultFeatureDetails.tsx | 7 ++-- .../FeatureStatusCell/FeatureStatusCell.tsx | 2 +- 4 files changed, 28 insertions(+), 15 deletions(-) diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx index 6f62c8d83e..a300f37cb6 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx @@ -67,7 +67,6 @@ export const ConstraintAccordionViewHeaderInfo = ({ - + 0} show={ diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx index b0f77014b9..66e015cbb0 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx @@ -1,5 +1,5 @@ import { PlaygroundFeatureSchema } from '../../../../../../hooks/api/actions/usePlayground/playground.model'; -import { Typography } from '@mui/material'; +import {Typography, useTheme} from '@mui/material'; import { PlaygroundResultChip } from '../../PlaygroundResultChip/PlaygroundResultChip'; import { useStyles } from './PlaygroundResultFeatureDetails.styles'; interface PlaygroundFeatureResultDetailsProps { @@ -9,6 +9,7 @@ export const PlaygroundResultFeatureDetails = ({ feature, }: PlaygroundFeatureResultDetailsProps) => { const { classes: styles } = useStyles(); + const theme = useTheme(); const description = feature.isEnabled ? 'This feature toggle is True in production because ' @@ -16,7 +17,7 @@ export const PlaygroundResultFeatureDetails = ({ const reason = feature.isEnabled ? 'at least one strategy is True' : 'all strategies are False'; - const color = feature.isEnabled ? 'success' : 'error'; + const color = feature.isEnabled ? theme.palette.success.main : theme.palette.error.main; return ( <> @@ -30,7 +31,7 @@ export const PlaygroundResultFeatureDetails = ({
{description} - + {reason}
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx index 42a667da22..d83213eeb1 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx @@ -20,7 +20,7 @@ export const FeatureStatusCell = ({ enabled }: IFeatureStatusCellProps) => { return ( - + ); From 562ad10c06339ee16c7429496c3afa93f231a470 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Fri, 29 Jul 2022 11:57:25 +0300 Subject: [PATCH 07/56] demo data --- .../FeatureResultInfoPopoverCell.tsx | 9 ++++-- .../PlaygroundResultConstraintExecution.tsx | 9 ++++-- .../PlaygroundResultFeatureDetails.styles.ts | 9 ++++++ .../PlaygroundResultFeatureDetails.tsx | 31 ++++++++++++++----- 4 files changed, 45 insertions(+), 13 deletions(-) diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx index e38a4bcab9..cb239ef8ee 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx @@ -66,12 +66,12 @@ export const FeatureResultInfoPopoverCell = ({ ], segments: [ { - result: false, + result: feature?.isEnabled as any, id: 5, name: 'my-segment', constraints: [ { - result: false, + result: feature?.isEnabled as any, contextName: 'environment', operator: 'IN', caseInsensitive: false, @@ -107,7 +107,10 @@ export const FeatureResultInfoPopoverCell = ({ }} classes={{ paper: styles.popoverPaper }} > - + setOpen(false)} + /> 0} show={ diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx index 4d3185afa9..53501a4493 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx @@ -25,11 +25,16 @@ export const PlaygroundResultConstraintExecution = ({ constraints, }: PlaygroundResultConstraintExecutionProps) => { // const context = usePlaygroundContext(); - const context: SdkContextSchema = { + const contextFalse: SdkContextSchema = { appName: 'MyApp', environment: '', }; + const contextTrue: SdkContextSchema = { + appName: 'MyApp', + environment: 'development', + }; + if (!constraints) return null; return ( @@ -42,7 +47,7 @@ export const PlaygroundResultConstraintExecution = ({ /> ({ + titleRowWrapper: { + display: 'flex', + justifyContent: 'space-between', + width: '100%', + }, titleRow: { display: 'inline-flex', alignItems: 'flex-start', @@ -18,4 +23,8 @@ export const useStyles = makeStyles()(theme => ({ fontWeight: 600, padding: '4px', }, + icon: { + textAlign: 'right' + + } })); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx index 66e015cbb0..a5283d6173 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx @@ -1,12 +1,16 @@ import { PlaygroundFeatureSchema } from '../../../../../../hooks/api/actions/usePlayground/playground.model'; -import {Typography, useTheme} from '@mui/material'; +import {IconButton, Typography, useTheme} from '@mui/material'; import { PlaygroundResultChip } from '../../PlaygroundResultChip/PlaygroundResultChip'; import { useStyles } from './PlaygroundResultFeatureDetails.styles'; +import {CloseOutlined} from "@mui/icons-material"; +import React from "react"; interface PlaygroundFeatureResultDetailsProps { feature: PlaygroundFeatureSchema; + onClose: () => void } export const PlaygroundResultFeatureDetails = ({ feature, + onClose, }: PlaygroundFeatureResultDetailsProps) => { const { classes: styles } = useStyles(); const theme = useTheme(); @@ -19,15 +23,26 @@ export const PlaygroundResultFeatureDetails = ({ : 'all strategies are False'; const color = feature.isEnabled ? theme.palette.success.main : theme.palette.error.main; + const onCloseClick = + onClose && + ((event: React.SyntheticEvent) => { + event.stopPropagation(); + onClose(); + }); return ( <> -
- - {feature.name} - - - - +
+
+ + {feature.name} + + + + +
+ onClose()} className={styles.icon}> + +
{description} From 2895516ddaa3ed1914752c82d1faedb694a72d55 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Fri, 29 Jul 2022 12:05:40 +0300 Subject: [PATCH 08/56] fmt --- .../ConstraintAccordionViewHeaderInfo.tsx | 3 +-- .../FeatureResultInfoPopoverCell.tsx | 14 ++++++-------- .../PlaygroundResultConstraintExecution.tsx | 6 +++++- .../PlaygroundResultFeatureDetails.styles.ts | 5 ++--- .../PlaygroundResultFeatureDetails.tsx | 15 +++++++++------ .../api/actions/usePlayground/playground.model.ts | 1 - 6 files changed, 23 insertions(+), 21 deletions(-) diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx index a300f37cb6..845c876e0d 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx @@ -78,8 +78,7 @@ export const ConstraintAccordionViewHeaderInfo = ({ constraint.contextName ] ) - ? theme.palette.neutral - .dark + ? theme.palette.neutral.dark : theme.palette.error.main } > diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx index cb239ef8ee..f937b2cf06 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx @@ -34,14 +34,12 @@ export const FeatureResultInfoPopoverCell = ({ name: feature?.name as any, projectId: 'default', isEnabled: true, - } as any; const dummyPlaygroundFeatureFalse: PlaygroundFeatureSchema = { name: feature?.name as any, projectId: 'default', isEnabled: false, - } as any; const strategies: PlaygroundFeatureStrategyResult[] = [ @@ -57,11 +55,7 @@ export const FeatureResultInfoPopoverCell = ({ operator: 'IN', caseInsensitive: false, inverted: false, - values: [ - 'MyApp', - 'MyOtherApp', - 'Unleash', - ], + values: ['MyApp', 'MyOtherApp', 'Unleash'], }, ], segments: [ @@ -108,7 +102,11 @@ export const FeatureResultInfoPopoverCell = ({ classes={{ paper: styles.popoverPaper }} > setOpen(false)} /> ({ padding: '4px', }, icon: { - textAlign: 'right' - - } + textAlign: 'right', + }, })); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx index a5283d6173..52179a27f6 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx @@ -1,12 +1,12 @@ import { PlaygroundFeatureSchema } from '../../../../../../hooks/api/actions/usePlayground/playground.model'; -import {IconButton, Typography, useTheme} from '@mui/material'; +import { IconButton, Typography, useTheme } from '@mui/material'; import { PlaygroundResultChip } from '../../PlaygroundResultChip/PlaygroundResultChip'; import { useStyles } from './PlaygroundResultFeatureDetails.styles'; -import {CloseOutlined} from "@mui/icons-material"; -import React from "react"; +import { CloseOutlined } from '@mui/icons-material'; +import React from 'react'; interface PlaygroundFeatureResultDetailsProps { feature: PlaygroundFeatureSchema; - onClose: () => void + onClose: () => void; } export const PlaygroundResultFeatureDetails = ({ feature, @@ -21,7 +21,9 @@ export const PlaygroundResultFeatureDetails = ({ const reason = feature.isEnabled ? 'at least one strategy is True' : '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 onCloseClick = onClose && @@ -29,6 +31,7 @@ export const PlaygroundResultFeatureDetails = ({ event.stopPropagation(); onClose(); }); + return ( <>
@@ -40,7 +43,7 @@ export const PlaygroundResultFeatureDetails = ({
- onClose()} className={styles.icon}> +
diff --git a/frontend/src/hooks/api/actions/usePlayground/playground.model.ts b/frontend/src/hooks/api/actions/usePlayground/playground.model.ts index fba4ce9432..eff504cda2 100644 --- a/frontend/src/hooks/api/actions/usePlayground/playground.model.ts +++ b/frontend/src/hooks/api/actions/usePlayground/playground.model.ts @@ -264,7 +264,6 @@ export interface PlaygroundFeatureStrategySegmentResult { result: boolean; constraints?: PlaygroundFeatureStrategyConstraintResult[]; } -6; export interface PlaygroundFeatureStrategyResult { id: string; From 58edd06eb040775a2c500f05950ce90689a4dc2f Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Fri, 29 Jul 2022 12:55:27 +0300 Subject: [PATCH 09/56] improved dummy data --- .../FeatureResultInfoPopoverCell.tsx | 23 +++++++++++++++++++ .../PlaygroundResultSegmentExecution.tsx | 7 ++++-- 2 files changed, 28 insertions(+), 2 deletions(-) diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx index f937b2cf06..4dc19c677f 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx @@ -76,6 +76,29 @@ export const FeatureResultInfoPopoverCell = ({ }, ], }, + { + name: 'flexibleRollout', + id: 'strategy-id', + parameters: {}, + result: false, + segments: [ + { + result: false, + id: 6, + name: 'my-segment', + constraints: [ + { + result: false, + contextName: 'appName', + operator: 'IN', + caseInsensitive: false, + inverted: false, + values: ['MyApp2'], + }, + ], + }, + ], + }, ]; if (!feature) { diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx index c20fa7ffe4..2954cad422 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx @@ -60,7 +60,7 @@ export const PlaygroundResultSegmentExecution = ({ if (!segments) return null; return ( <> - {segments.map(segment => ( + {segments.map((segment, index) => ( @@ -95,7 +95,10 @@ export const PlaygroundResultSegmentExecution = ({ constraints={segment.constraints} /> - + } + /> ))} From 0a1666e82fecec07c47a97507d2b546cc9ca4da7 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Fri, 29 Jul 2022 12:57:39 +0300 Subject: [PATCH 10/56] move subtitle --- .../PlaygroundResultFeatureDetails.styles.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts index 19227c0719..8b0f9645a4 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts @@ -17,6 +17,7 @@ export const useStyles = makeStyles()(theme => ({ display: 'inline-flex', alignItems: 'flex-start', justifyItems: 'center', + marginTop: '-24px', gap: '6px', }, name: { From 95e55bc8caf05a2a455fb841acedae3bb21d30c1 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Fri, 29 Jul 2022 13:05:02 +0300 Subject: [PATCH 11/56] fix build --- .../PlaygroundResultSegmentExecution.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx index 2954cad422..46ba3cf8ad 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx @@ -96,7 +96,7 @@ export const PlaygroundResultSegmentExecution = ({ /> } /> From d31a5df321750a4db3e8f6b9efa8b2d2d582c93c Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech Date: Fri, 29 Jul 2022 12:34:46 +0200 Subject: [PATCH 12/56] update styles in playground popoup --- .../FeatureResultInfoPopoverCell.styles.ts | 3 +- .../FeatureResultInfoPopoverCell.tsx | 3 +- .../PlaygroundResultFeatureDetails.styles.ts | 7 +---- .../PlaygroundResultFeatureDetails.tsx | 6 ++-- ...ygroundResultFeatureStrategyItem.styles.ts | 3 ++ .../PlaygroundResultFeatureStrategyItem.tsx | 31 ++++++------------- .../PlaygroundResultChip.tsx | 19 ++++++++---- 7 files changed, 34 insertions(+), 38 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 12801e82b5..d1e652f2cd 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts @@ -5,8 +5,7 @@ export const useStyles = makeStyles()(theme => ({ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', - padding: '48px', - gap: '24px', + padding: theme.spacing(6), width: '728px', height: 'auto', overflowY: 'scroll', diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx index 4dc19c677f..31e5b79f26 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx @@ -1,7 +1,7 @@ import { PlaygroundFeatureSchema, PlaygroundFeatureStrategyResult, -} from '../../../../../hooks/api/actions/usePlayground/playground.model'; +} from 'hooks/api/actions/usePlayground/playground.model'; import { IconButton, Popover, styled, Typography } from '@mui/material'; import { InfoOutlined } from '@mui/icons-material'; import React, { useRef, useState } from 'react'; @@ -138,6 +138,7 @@ export const FeatureResultInfoPopoverCell = ({ <> {`Strategies (${strategies.length})`} {strategies.map((strategy, index) => ( ({ gap: '12px', }, descriptionRow: { - flexDirection: 'row', - display: 'inline-flex', - alignItems: 'flex-start', - justifyItems: 'center', - marginTop: '-24px', - gap: '6px', + marginBottom: theme.spacing(2), }, name: { fontWeight: 600, diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx index 52179a27f6..c923bc9b5b 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx @@ -48,8 +48,10 @@ export const PlaygroundResultFeatureDetails = ({
- {description} - + + {description} + + {reason}
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.styles.ts index 327e01f383..e1b263bea3 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.styles.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.styles.ts @@ -28,5 +28,8 @@ export const useStyles = makeStyles()(theme => ({ [theme.breakpoints.down(400)]: { padding: '0.5rem', }, + paddingBottom: '1rem', + borderRadius: theme.shape.borderRadiusMedium, + background: theme.palette.background.default, }, })); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx index aa86ffea67..98a1113c65 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx @@ -1,32 +1,21 @@ -import { ConditionallyRender } from '../../../../../common/ConditionallyRender/ConditionallyRender'; -import { StrategySeparator } from '../../../../../common/StrategySeparator/StrategySeparator'; -import { styled, useTheme } from '@mui/material'; -import { useStyles } from './PlaygroundResultFeatureStrategyItem.styles'; +import { Box, 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 '../../../../../common/StringTruncator/StringTruncator'; +} from 'utils/strategyNames'; +import StringTruncator from 'component/common/StringTruncator/StringTruncator'; import { PlaygroundResultChip } from '../../PlaygroundResultChip/PlaygroundResultChip'; import { PlaygroundFeatureStrategyResult } from 'hooks/api/actions/usePlayground/playground.model'; import { PlaygroundResultStrategyExecution } from '../PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution'; +import { useStyles } from './PlaygroundResultFeatureStrategyItem.styles'; interface IPlaygroundResultFeatureStrategyItemProps { strategy: PlaygroundFeatureStrategyResult; index: number; } -const StyledStrategyResultBox = styled('div')(({ theme }) => ({ - width: '100%', - position: 'relative', - paddingBottom: '1rem', - borderRadius: theme.shape.borderRadiusMedium, - '& + &': { - marginTop: theme.spacing(2), - }, - background: theme.palette.background.default, -})); - export const PlaygroundResultFeatureStrategyItem = ({ strategy, index, @@ -42,12 +31,12 @@ export const PlaygroundResultFeatureStrategyItem = ({ : `1px solid ${theme.palette.divider}`; return ( - + 0} show={} /> -
+
@@ -69,7 +58,7 @@ export const PlaygroundResultFeatureStrategyItem = ({ percentageFill={theme.palette.tertiary.light} />
-
- + + ); }; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx index 7b4691e0fe..b5294110eb 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx @@ -12,9 +12,18 @@ interface IResultChipProps { label?: string; } -export const StyledFalseChip = styled(Chip)(({ theme }) => ({ - width: 80, - borderRadius: '5px', +export const StyledChip = styled(Chip)(({ theme }) => ({ + width: 60, + height: 24, + borderRadius: theme.shape.borderRadius, + fontWeight: theme.typography.fontWeightMedium, + ['& .MuiChip-label']: { + padding: 0, + paddingLeft: theme.spacing(0.5), + }, +})); + +export const StyledFalseChip = styled(StyledChip)(({ theme }) => ({ border: `1px solid ${theme.palette.error.main}`, backgroundColor: colors.red['200'], ['& .MuiChip-label']: { @@ -25,9 +34,7 @@ export const StyledFalseChip = styled(Chip)(({ theme }) => ({ }, })); -export const StyledTrueChip = styled(Chip)(({ theme }) => ({ - width: 80, - borderRadius: '5px', +export const StyledTrueChip = styled(StyledChip)(({ theme }) => ({ border: `1px solid ${theme.palette.success.main}`, backgroundColor: colors.green['100'], ['& .MuiChip-label']: { From bede1b302fe8ab2fa9cb1e8882b3c5ebb029faee Mon Sep 17 00:00:00 2001 From: olav Date: Mon, 1 Aug 2022 13:02:45 +0200 Subject: [PATCH 13/56] fix: avoid crash on missing playgroundContext --- .../ConstraintAccordionViewHeaderInfo.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx index 845c876e0d..261fe82d39 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx @@ -74,7 +74,7 @@ export const ConstraintAccordionViewHeaderInfo = ({ variant={'body1'} color={ Boolean( - playgroundContext![ + playgroundContext?.[ constraint.contextName ] ) @@ -82,7 +82,7 @@ export const ConstraintAccordionViewHeaderInfo = ({ : theme.palette.error.main } > - {playgroundContext![ + {playgroundContext?.[ constraint.contextName ] || 'no value'} From 42fbc27148cc9c2b20a434bb04b6e0af16119e57 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Tue, 2 Aug 2022 11:57:23 +0300 Subject: [PATCH 14/56] bug fixes, improvements and env handling --- .../ConstraintAccordionView.tsx | 9 +- .../ConstraintAccordionViewHeader.tsx | 8 +- .../ConstraintAccordionViewHeaderInfo.tsx | 24 ++- .../playground/Playground/Playground.tsx | 1 + .../FeatureResultInfoPopoverCell.tsx | 117 +++------------ .../PlaygroundResultFeatureDetails.styles.ts | 4 +- .../PlaygroundResultFeatureDetails.tsx | 37 ++++- .../PlaygroundResultFeatureDetails/helpers.ts | 8 + .../PlaygroundResultConstraintExecution.tsx | 33 ++--- ...ygroundResultFeatureStrategyItem.styles.ts | 1 + .../PlaygroundResultFeatureStrategyItem.tsx | 75 ++++++---- ...PlaygroundResultSegmentExecution.styles.ts | 0 .../PlaygroundResultSegmentExecution.tsx | 20 ++- ...laygroundResultStrategyExecution.styles.ts | 2 +- .../PlaygroundResultStrategyExecution.tsx | 35 ++++- .../PlaygroundResultStrategyList.tsx | 88 +++++++++++ .../PlaygroundResultChip.tsx | 6 +- .../PlaygroundResultsTable.tsx | 140 ++++++++++-------- .../actions/usePlayground/playground.model.ts | 6 +- 19 files changed, 361 insertions(+), 253 deletions(-) create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/helpers.ts rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{ => PlaygroundResultFeatureStrategyItem}/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx (59%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{ => PlaygroundResultFeatureStrategyItem}/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.styles.ts (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{ => PlaygroundResultFeatureStrategyItem}/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx (84%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{ => PlaygroundResultFeatureStrategyItem}/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.styles.ts (94%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{ => PlaygroundResultFeatureStrategyItem}/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.tsx (62%) create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultStrategyList/PlaygroundResultStrategyList.tsx diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx index 1377a2b2a0..22db144fd0 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx @@ -18,14 +18,14 @@ import { import { useStyles } from '../ConstraintAccordion.styles'; import { PlaygroundFeatureStrategyConstraintResult, - SdkContextSchema, + PlaygroundRequestSchema, } from '../../../../hooks/api/actions/usePlayground/playground.model'; interface IConstraintAccordionViewProps { constraint: IConstraint | PlaygroundFeatureStrategyConstraintResult; onDelete?: () => void; onEdit?: () => void; - playgroundContext?: SdkContextSchema; + playgroundInput?: PlaygroundRequestSchema; maxLength?: number; sx?: SxProps; } @@ -36,7 +36,7 @@ export const ConstraintAccordionView = ({ onDelete, sx = undefined, maxLength, - playgroundContext, + playgroundInput, }: IConstraintAccordionViewProps) => { const { classes: styles } = useStyles(); const [expandable, setExpandable] = useState(true); @@ -46,7 +46,6 @@ export const ConstraintAccordionView = ({ [...semVerOperators, ...numOperators, ...dateOperators], constraint.operator ); - const handleClick = () => { if (expandable) { setExpanded(!expanded); @@ -79,7 +78,7 @@ export const ConstraintAccordionView = ({ allowExpand={setExpandable} expanded={expanded} maxLength={maxLength ?? 112} - playgroundContext={playgroundContext} + playgroundInput={playgroundInput} /> diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx index 9a4b0bbb58..f3833c3e1f 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx @@ -5,7 +5,7 @@ import { ConstraintAccordionHeaderActions } from '../../ConstraintAccordionHeade import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccordion.styles'; import { PlaygroundFeatureStrategyConstraintResult, - SdkContextSchema, + PlaygroundRequestSchema, } from '../../../../../hooks/api/actions/usePlayground/playground.model'; interface IConstraintAccordionViewHeaderProps { @@ -15,7 +15,7 @@ interface IConstraintAccordionViewHeaderProps { singleValue: boolean; expanded: boolean; allowExpand: (shouldExpand: boolean) => void; - playgroundContext?: SdkContextSchema; + playgroundInput?: PlaygroundRequestSchema; maxLength?: number; } @@ -27,7 +27,7 @@ export const ConstraintAccordionViewHeader = ({ allowExpand, expanded, maxLength, - playgroundContext, + playgroundInput, }: IConstraintAccordionViewHeaderProps) => { const { classes: styles } = useStyles(); @@ -41,7 +41,7 @@ export const ConstraintAccordionViewHeader = ({ expanded={expanded} result={'result' in constraint ? constraint.result : undefined} maxLength={maxLength} - playgroundContext={playgroundContext} + playgroundInput={playgroundInput} /> ({ display: '-webkit-box', @@ -43,7 +43,7 @@ interface ConstraintAccordionViewHeaderMetaInfoProps { allowExpand: (shouldExpand: boolean) => void; result?: boolean; maxLength?: number; - playgroundContext?: SdkContextSchema; + playgroundInput?: PlaygroundRequestSchema; } export const ConstraintAccordionViewHeaderInfo = ({ @@ -52,12 +52,17 @@ export const ConstraintAccordionViewHeaderInfo = ({ allowExpand, expanded, result, + playgroundInput, maxLength = 112, - playgroundContext, }: ConstraintAccordionViewHeaderMetaInfoProps) => { const { classes: styles } = useStyles(); const theme = useTheme(); + const isPlayground = Boolean(playgroundInput); + const constrainExistsInContext = + isPlayground && + Boolean(playgroundInput?.context[constraint.contextName]); + return (
@@ -65,24 +70,17 @@ export const ConstraintAccordionViewHeaderInfo = ({ {constraint.contextName} - {playgroundContext![ + {playgroundInput?.context[ constraint.contextName ] || 'no value'} diff --git a/frontend/src/component/playground/Playground/Playground.tsx b/frontend/src/component/playground/Playground/Playground.tsx index 50c8bb72bd..b01bee5e10 100644 --- a/frontend/src/component/playground/Playground/Playground.tsx +++ b/frontend/src/component/playground/Playground/Playground.tsx @@ -203,6 +203,7 @@ export const Playground: VFC<{}> = () => { } elseShow={} diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx index 31e5b79f26..b91c120876 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx @@ -1,17 +1,21 @@ import { PlaygroundFeatureSchema, - PlaygroundFeatureStrategyResult, + PlaygroundRequestSchema, } from 'hooks/api/actions/usePlayground/playground.model'; -import { IconButton, Popover, styled, Typography } from '@mui/material'; +import { IconButton, Popover, styled } from '@mui/material'; import { InfoOutlined } from '@mui/icons-material'; import React, { useRef, useState } from 'react'; import { ConditionallyRender } from '../../../../common/ConditionallyRender/ConditionallyRender'; -import { PlaygroundResultFeatureStrategyItem } from './PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem'; import { useStyles } from './FeatureResultInfoPopoverCell.styles'; import { PlaygroundResultFeatureDetails } from './PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails'; +import { + PlaygroundResultStrategyList, + WrappedPlaygroundResultStrategyList, +} from './PlaygroundResultStrategyList/PlaygroundResultStrategyList'; interface FeatureResultInfoPopoverCellProps { - feature?: PlaygroundFeatureSchema; + feature: PlaygroundFeatureSchema; + input?: PlaygroundRequestSchema; } const FeatureResultPopoverWrapper = styled('div')(({ theme }) => ({ @@ -21,6 +25,7 @@ const FeatureResultPopoverWrapper = styled('div')(({ theme }) => ({ export const FeatureResultInfoPopoverCell = ({ feature, + input, }: FeatureResultInfoPopoverCellProps) => { const [open, setOpen] = useState(false); const { classes: styles } = useStyles(); @@ -30,77 +35,6 @@ export const FeatureResultInfoPopoverCell = ({ setOpen(!open); }; - const dummyPlaygroundFeatureTrue: PlaygroundFeatureSchema = { - name: feature?.name as any, - projectId: 'default', - isEnabled: true, - } as any; - - const dummyPlaygroundFeatureFalse: PlaygroundFeatureSchema = { - name: feature?.name as any, - projectId: 'default', - isEnabled: false, - } as any; - - const strategies: PlaygroundFeatureStrategyResult[] = [ - { - name: 'default', - id: 'strategy-id', - parameters: {}, - result: feature?.isEnabled as any, - constraints: [ - { - result: true, - contextName: 'appName', - operator: 'IN', - caseInsensitive: false, - inverted: false, - values: ['MyApp', 'MyOtherApp', 'Unleash'], - }, - ], - segments: [ - { - result: feature?.isEnabled as any, - id: 5, - name: 'my-segment', - constraints: [ - { - result: feature?.isEnabled as any, - contextName: 'environment', - operator: 'IN', - caseInsensitive: false, - inverted: false, - values: ['development'], - }, - ], - }, - ], - }, - { - name: 'flexibleRollout', - id: 'strategy-id', - parameters: {}, - result: false, - segments: [ - { - result: false, - id: 6, - name: 'my-segment', - constraints: [ - { - result: false, - contextName: 'appName', - operator: 'IN', - caseInsensitive: false, - inverted: false, - values: ['MyApp2'], - }, - ], - }, - ], - }, - ]; - if (!feature) { return null; } @@ -125,29 +59,24 @@ export const FeatureResultInfoPopoverCell = ({ classes={{ paper: styles.popoverPaper }} > setOpen(false)} /> 0} + condition={!feature.isEnabledInCurrentEnvironment} show={ - <> - {`Strategies (${strategies.length})`} - {strategies.map((strategy, index) => ( - - ))} - + + } + elseShow={ + } /> diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts index 11c247d82e..c1dbc23cf6 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts @@ -9,9 +9,11 @@ export const useStyles = makeStyles()(theme => ({ titleRow: { display: 'inline-flex', alignItems: 'flex-start', - justifyItems: 'center', + justifyContent: 'center', gap: '12px', + marginTop: '12px', }, + alertRow: {}, descriptionRow: { marginBottom: theme.spacing(2), }, diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx index c923bc9b5b..95a0abe411 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx @@ -1,30 +1,45 @@ -import { PlaygroundFeatureSchema } from '../../../../../../hooks/api/actions/usePlayground/playground.model'; -import { IconButton, Typography, useTheme } from '@mui/material'; +import { + PlaygroundFeatureSchema, + PlaygroundRequestSchema, +} from '../../../../../../hooks/api/actions/usePlayground/playground.model'; +import { Alert, IconButton, Typography, useTheme } from '@mui/material'; import { PlaygroundResultChip } from '../../PlaygroundResultChip/PlaygroundResultChip'; import { useStyles } from './PlaygroundResultFeatureDetails.styles'; import { CloseOutlined } from '@mui/icons-material'; import React from 'react'; +import { ConditionallyRender } from '../../../../../common/ConditionallyRender/ConditionallyRender'; +import { checkForEmptyValues } from './helpers'; interface PlaygroundFeatureResultDetailsProps { feature: PlaygroundFeatureSchema; + input?: PlaygroundRequestSchema; onClose: () => void; } export const PlaygroundResultFeatureDetails = ({ feature, + input, onClose, }: PlaygroundFeatureResultDetailsProps) => { const { classes: styles } = useStyles(); const theme = useTheme(); - const description = feature.isEnabled - ? 'This feature toggle is True in production because ' - : 'This feature toggle is False in production because '; - const reason = feature.isEnabled + const description = Boolean(feature.isEnabled) + ? `This feature toggle is True in ${input?.environment} because ` + : `This feature toggle is False in ${input?.environment} because `; + + const reason = Boolean(feature.isEnabled) ? 'at least one strategy is True' + : feature?.isEnabledInCurrentEnvironment + ? 'the environment is disabled' : 'all strategies are False'; - const color = feature.isEnabled + + const color = Boolean(feature.isEnabled) ? theme.palette.success.main : theme.palette.error.main; + const noValueTxt = checkForEmptyValues(input?.context) + ? 'You did not provide a value for your context filed in step 2 of the configuration' + : undefined; + const onCloseClick = onClose && ((event: React.SyntheticEvent) => { @@ -55,6 +70,14 @@ export const PlaygroundResultFeatureDetails = ({ {reason}
+ + {noValueTxt} +
+ } + /> ); }; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/helpers.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/helpers.ts new file mode 100644 index 0000000000..cbb3f5ad39 --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/helpers.ts @@ -0,0 +1,8 @@ +export function checkForEmptyValues(object?: Object): boolean { + if (object === undefined) { + return true; + } + return Object.values(object).every(v => + v && typeof v === 'object' ? checkForEmptyValues(v) : v === null + ); +} diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx similarity index 59% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx index 12ef40d479..8f407466cf 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx @@ -1,16 +1,18 @@ import { PlaygroundFeatureStrategyConstraintResult, - SdkContextSchema, + 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 { ConstraintAccordionView } from '../../../../../common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView'; +import { objectId } from '../../../../../../../utils/objectId'; +import { ConditionallyRender } from '../../../../../../common/ConditionallyRender/ConditionallyRender'; +import { StrategySeparator } from '../../../../../../common/StrategySeparator/StrategySeparator'; +import { ConstraintAccordionView } from '../../../../../../common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView'; import { styled } from '@mui/material'; interface PlaygroundResultConstraintExecutionProps { constraints?: PlaygroundFeatureStrategyConstraintResult[]; + compact: boolean; + input?: PlaygroundRequestSchema; } export const PlaygroundResultConstraintExecutionWrapper = styled('div')( @@ -23,18 +25,9 @@ export const PlaygroundResultConstraintExecutionWrapper = styled('div')( export const PlaygroundResultConstraintExecution = ({ constraints, + compact, + input, }: PlaygroundResultConstraintExecutionProps) => { - // const context = usePlaygroundContext(); - const contextFalse: SdkContextSchema = { - appName: 'MyApp', - environment: '', - }; - - const contextTrue: SdkContextSchema = { - appName: 'MyApp', - environment: 'development', - }; - if (!constraints) return null; return ( @@ -47,12 +40,8 @@ export const PlaygroundResultConstraintExecution = ({ /> ({ [theme.breakpoints.down(400)]: { padding: '0.5rem', }, + width: '100%', paddingBottom: '1rem', borderRadius: theme.shape.borderRadiusMedium, background: theme.palette.background.default, diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx index 98a1113c65..f4cbddcac9 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx @@ -1,4 +1,4 @@ -import { Box, useTheme } from '@mui/material'; +import { Box, styled, Typography, useTheme } from '@mui/material'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator'; import { @@ -7,18 +7,33 @@ import { } from 'utils/strategyNames'; import StringTruncator from 'component/common/StringTruncator/StringTruncator'; import { PlaygroundResultChip } from '../../PlaygroundResultChip/PlaygroundResultChip'; -import { PlaygroundFeatureStrategyResult } from 'hooks/api/actions/usePlayground/playground.model'; -import { PlaygroundResultStrategyExecution } from '../PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution'; +import { + PlaygroundFeatureStrategyResult, + PlaygroundRequestSchema, +} from 'hooks/api/actions/usePlayground/playground.model'; +import { PlaygroundResultStrategyExecution } from './PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution'; import { useStyles } from './PlaygroundResultFeatureStrategyItem.styles'; interface IPlaygroundResultFeatureStrategyItemProps { strategy: PlaygroundFeatureStrategyResult; index: number; + input?: PlaygroundRequestSchema; + compact: boolean; } +const StyledItemWrapper = styled('div')(({ theme }) => ({ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + marginTop: '4px', + gap: '4px', +})); + export const PlaygroundResultFeatureStrategyItem = ({ strategy, + input, index, + compact, }: IPlaygroundResultFeatureStrategyItemProps) => { const { result, name } = strategy; const { classes: styles } = useStyles(); @@ -31,34 +46,44 @@ export const PlaygroundResultFeatureStrategyItem = ({ : `1px solid ${theme.palette.divider}`; return ( - + 0} show={} /> - -
-
- - + {index + 1} + +
+
+ + +
+
- -
-
- -
- +
+ +
+ + ); }; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.styles.ts similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.styles.ts rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.styles.ts diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx similarity index 84% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx index 46ba3cf8ad..2d87a61985 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx @@ -1,14 +1,19 @@ -import { PlaygroundFeatureStrategySegmentResult } from '../../../../../../hooks/api/actions/usePlayground/playground.model'; +import { + PlaygroundFeatureStrategySegmentResult, + PlaygroundRequestSchema, +} from '../../../../../../../hooks/api/actions/usePlayground/playground.model'; import { PlaygroundResultConstraintExecution } from '../PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution'; import { CancelOutlined, DonutLarge } from '@mui/icons-material'; import { Link } from 'react-router-dom'; -import { StrategySeparator } from '../../../../../common/StrategySeparator/StrategySeparator'; +import { StrategySeparator } from '../../../../../../common/StrategySeparator/StrategySeparator'; import { useStyles } from './PlaygroundResultSegmentExecution.styles'; import { styled, Typography } from '@mui/material'; -import { ConditionallyRender } from '../../../../../common/ConditionallyRender/ConditionallyRender'; +import { ConditionallyRender } from '../../../../../../common/ConditionallyRender/ConditionallyRender'; interface PlaygroundResultSegmentExecutionProps { segments?: PlaygroundFeatureStrategySegmentResult[]; + input?: PlaygroundRequestSchema; + hasConstraints: boolean; } const SegmentExecutionLinkWrapper = styled('div')(({ theme }) => ({ @@ -55,8 +60,11 @@ const SegmentResultTextWrapper = styled('div')(({ theme }) => ({ export const PlaygroundResultSegmentExecution = ({ segments, + input, + hasConstraints, }: PlaygroundResultSegmentExecutionProps) => { const { classes: styles } = useStyles(); + if (!segments) return null; return ( <> @@ -93,10 +101,14 @@ export const PlaygroundResultSegmentExecution = ({ } /> diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.styles.ts similarity index 94% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.styles.ts rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.styles.ts index e2d49389e1..9db6fc4961 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.styles.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.styles.ts @@ -10,7 +10,7 @@ export const useStyles = makeStyles()(theme => ({ color: theme.palette.grey[700], }, summary: { - width: '100%', + width: 'auto', padding: theme.spacing(2, 3), borderRadius: theme.shape.borderRadius, border: `1px solid ${theme.palette.divider}`, diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.tsx similarity index 62% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.tsx index 385ca77c4f..b18ad5f57f 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.tsx @@ -1,9 +1,12 @@ -import { ConditionallyRender } from '../../../../../common/ConditionallyRender/ConditionallyRender'; -import { StrategySeparator } from '../../../../../common/StrategySeparator/StrategySeparator'; -import { Box, Chip } from '@mui/material'; +import { ConditionallyRender } from '../../../../../../common/ConditionallyRender/ConditionallyRender'; +import { StrategySeparator } from '../../../../../../common/StrategySeparator/StrategySeparator'; +import { Box, Chip, styled } from '@mui/material'; import { useStyles } from './PlaygroundResultStrategyExecution.styles'; -import { PlaygroundFeatureStrategyResult } from '../../../../../../hooks/api/actions/usePlayground/playground.model'; -import useUiConfig from '../../../../../../hooks/api/getters/useUiConfig/useUiConfig'; +import { + PlaygroundFeatureStrategyResult, + PlaygroundRequestSchema, +} 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'; @@ -11,24 +14,38 @@ import { PlaygroundResultSegmentExecution } from '../PlaygroundResultSegmentExec interface PlaygroundResultStrategyExecutionProps { strategyResult: PlaygroundFeatureStrategyResult; percentageFill?: string; + input?: PlaygroundRequestSchema; } +const StyledStrategyExecutionWrapper = styled('div')(({ theme }) => ({ + padding: theme.spacing(1), +})); + export const PlaygroundResultStrategyExecution = ({ strategyResult, + input, }: PlaygroundResultStrategyExecutionProps) => { const { name, constraints, segments } = strategyResult; const { uiConfig } = useUiConfig(); const { classes: styles } = useStyles(); + const hasConstraints = Boolean(constraints && constraints.length > 0); + return ( - <> + 0) } - show={} + show={ + + } /> 0)} @@ -36,6 +53,8 @@ export const PlaygroundResultStrategyExecution = ({ <> @@ -56,6 +75,6 @@ export const PlaygroundResultStrategyExecution = ({ } /> - + ); }; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultStrategyList/PlaygroundResultStrategyList.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultStrategyList/PlaygroundResultStrategyList.tsx new file mode 100644 index 0000000000..29e3867dad --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultStrategyList/PlaygroundResultStrategyList.tsx @@ -0,0 +1,88 @@ +import { + PlaygroundFeatureSchema, + PlaygroundFeatureStrategyResult, + PlaygroundRequestSchema, +} from '../../../../../../hooks/api/actions/usePlayground/playground.model'; +import { ConditionallyRender } from '../../../../../common/ConditionallyRender/ConditionallyRender'; +import { Alert, styled, Typography } from '@mui/material'; +import { PlaygroundResultFeatureStrategyItem } from '../PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem'; + +interface PlaygroundResultStrategyListProps { + strategies: PlaygroundFeatureStrategyResult[]; + input?: PlaygroundRequestSchema; + compact?: boolean; +} + +export const PlaygroundResultStrategyList = ({ + strategies, + input, + compact = false, +}: PlaygroundResultStrategyListProps) => { + return ( + 0} + show={ + <> + {`Strategies (${strategies.length})`} + {strategies.map((strategy, index) => ( + + ))} + + } + /> + ); +}; + +const StyledAlertWrapper = styled('div')(({ theme }) => ({ + width: '100%', + display: 'flex', + flexDirection: 'column', + borderRadius: theme.shape.borderRadiusMedium, + border: `1px solid ${theme.palette.info.main}`, +})); + +const StyledListWrapper = styled('div')(({ theme }) => ({ + padding: theme.spacing(1, 0.5), +})); + +const StyledAlert = styled(Alert)(({ theme }) => ({ + borderBottomLeftRadius: 0, + borderBottomRightRadius: 0, +})); + +interface WrappedPlaygroundResultStrategyListProps + extends PlaygroundResultStrategyListProps { + feature: PlaygroundFeatureSchema; +} + +export const WrappedPlaygroundResultStrategyList = ({ + strategies, + feature, + input, +}: WrappedPlaygroundResultStrategyListProps) => { + return ( + + + If environment would be enabled then this feature would be{' '} + {feature.isEnabled ? 'TRUE' : 'FALSE'} and the strategies would + evaluate like this:{' '} + + + + + + ); +}; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx index b5294110eb..d91b4ae9c6 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx @@ -6,7 +6,7 @@ import { ReactComponent as FeatureEnabledIcon } from '../../../../../assets/icon import { ReactComponent as FeatureDisabledIcon } from '../../../../../assets/icons/isenabled-false.svg'; interface IResultChipProps { - enabled: boolean; + enabled: boolean | 'unevaluated'; // Result icon - defaults to true showIcon?: boolean; label?: string; @@ -53,7 +53,7 @@ export const PlaygroundResultChip = ({ const theme = useTheme(); const icon = ( { const [searchParams, setSearchParams] = useSearchParams(); @@ -49,6 +54,75 @@ export const PlaygroundResultsTable = ({ const isExtraSmallScreen = useMediaQuery(theme.breakpoints.down('sm')); const isSmallScreen = useMediaQuery(theme.breakpoints.down('md')); + const COLUMNS = useMemo(() => { + return [ + { + Header: 'Name', + accessor: 'name', + searchable: true, + minWidth: 160, + Cell: ({ value, row: { original } }: any) => ( + + ), + }, + { + Header: 'Project ID', + accessor: 'projectId', + sortType: 'alphanumeric', + filterName: 'projectId', + searchable: true, + maxWidth: 170, + Cell: ({ value }: any) => ( + + ), + }, + { + Header: 'Variant', + id: 'variant', + accessor: 'variant.name', + sortType: 'alphanumeric', + filterName: 'variant', + searchable: true, + width: 200, + Cell: ({ + value, + row: { + original: { variant, feature, variants, isEnabled }, + }, + }: any) => ( + + ), + }, + { + Header: 'isEnabled', + accessor: 'isEnabled', + filterName: 'isEnabled', + filterParsing: (value: boolean) => (value ? 'true' : 'false'), + Cell: ({ value }: any) => , + sortType: 'boolean', + sortInverted: true, + }, + { + Header: '', + id: 'info', + Cell: ({ row }: any) => ( + + ), + }, + ]; + }, [input]); + const { data: searchedData, getSearchText, @@ -236,67 +310,3 @@ export const PlaygroundResultsTable = ({ ); }; - -const COLUMNS = [ - { - Header: 'Name', - accessor: 'name', - searchable: true, - minWidth: 160, - Cell: ({ value, row: { original } }: any) => ( - - ), - }, - { - Header: 'Project ID', - accessor: 'projectId', - sortType: 'alphanumeric', - filterName: 'projectId', - searchable: true, - maxWidth: 170, - Cell: ({ value }: any) => ( - - ), - }, - { - Header: 'Variant', - id: 'variant', - accessor: 'variant.name', - sortType: 'alphanumeric', - filterName: 'variant', - searchable: true, - width: 200, - Cell: ({ - value, - row: { - original: { variant, feature, variants, isEnabled }, - }, - }: any) => ( - - ), - }, - { - Header: 'isEnabled', - accessor: 'isEnabled', - filterName: 'isEnabled', - filterParsing: (value: boolean) => (value ? 'true' : 'false'), - Cell: ({ value }: any) => , - sortType: 'boolean', - sortInverted: true, - }, - { - Header: '', - id: 'info', - Cell: ({ row }: any) => ( - - ), - }, -]; diff --git a/frontend/src/hooks/api/actions/usePlayground/playground.model.ts b/frontend/src/hooks/api/actions/usePlayground/playground.model.ts index eff504cda2..b4cedbaffb 100644 --- a/frontend/src/hooks/api/actions/usePlayground/playground.model.ts +++ b/frontend/src/hooks/api/actions/usePlayground/playground.model.ts @@ -65,13 +65,17 @@ export interface PlaygroundFeatureSchema { * @type {boolean} * @memberof PlaygroundFeatureSchema */ - isEnabled: boolean; + isEnabled: boolean | 'unevaluated'; + + isEnabledInCurrentEnvironment: boolean; /** * * @type {PlaygroundFeatureSchemaVariant} * @memberof PlaygroundFeatureSchema */ variant: PlaygroundFeatureSchemaVariant | null; + + strategies: PlaygroundFeatureStrategyResult[]; } export interface PlaygroundResponseSchema { /** From ecf3af48ce1aecfb4919e43cbd44a9b208f05739 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Tue, 2 Aug 2022 12:10:44 +0300 Subject: [PATCH 15/56] refactoring for better grouping/readability --- .../FeatureResultInfoPopoverCell.tsx | 23 +++------- .../PlaygroundResultFeatureDetails.tsx | 2 +- .../PlaygroundResultFeatureStrategyList.tsx | 39 ++++++++++++++++ .../PlaygroundResultConstraintExecution.tsx | 8 ++-- ...ygroundResultFeatureStrategyItem.styles.ts | 0 .../PlaygroundResultFeatureStrategyItem.tsx | 2 +- ...PlaygroundResultSegmentExecution.styles.ts | 0 .../PlaygroundResultSegmentExecution.tsx | 6 +-- ...laygroundResultStrategyExecution.styles.ts | 0 .../PlaygroundResultStrategyExecution.tsx | 8 ++-- .../playgroundResultStrategyLists.tsx} | 44 +++++++++---------- 11 files changed, 80 insertions(+), 52 deletions(-) create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{ => PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList}/PlaygroundResultFeatureStrategyItem/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx (78%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{ => PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList}/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.styles.ts (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{ => PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList}/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx (97%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{ => PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList}/PlaygroundResultFeatureStrategyItem/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.styles.ts (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{ => PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList}/PlaygroundResultFeatureStrategyItem/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx (93%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{ => PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList}/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.styles.ts (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{ => PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList}/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.tsx (87%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{PlaygroundResultStrategyList/PlaygroundResultStrategyList.tsx => PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/playgroundResultStrategyLists.tsx} (86%) diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx index b91c120876..de28173e7f 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx @@ -9,9 +9,10 @@ import { ConditionallyRender } from '../../../../common/ConditionallyRender/Cond import { useStyles } from './FeatureResultInfoPopoverCell.styles'; import { PlaygroundResultFeatureDetails } from './PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails'; import { - PlaygroundResultStrategyList, + PlaygroundResultStrategyLists, WrappedPlaygroundResultStrategyList, -} from './PlaygroundResultStrategyList/PlaygroundResultStrategyList'; +} from './PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/playgroundResultStrategyLists'; +import { PlaygroundResultFeatureStrategyList } from './PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList'; interface FeatureResultInfoPopoverCellProps { feature: PlaygroundFeatureSchema; @@ -63,21 +64,9 @@ export const FeatureResultInfoPopoverCell = ({ input={input} onClose={() => setOpen(false)} /> - - } - elseShow={ - - } + diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx index 95a0abe411..ed6cffce02 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx @@ -28,7 +28,7 @@ export const PlaygroundResultFeatureDetails = ({ const reason = Boolean(feature.isEnabled) ? 'at least one strategy is True' - : feature?.isEnabledInCurrentEnvironment + : !feature?.isEnabledInCurrentEnvironment ? 'the environment is disabled' : 'all strategies are False'; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx new file mode 100644 index 0000000000..7ef58175cc --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx @@ -0,0 +1,39 @@ +import { + PlaygroundResultStrategyLists, + WrappedPlaygroundResultStrategyList, +} from './PlaygroundResultStrategyList/playgroundResultStrategyLists'; +import { ConditionallyRender } from '../../../../../common/ConditionallyRender/ConditionallyRender'; +import React from 'react'; +import { + PlaygroundFeatureSchema, + PlaygroundRequestSchema, +} from '../../../../../../hooks/api/actions/usePlayground/playground.model'; + +interface PlaygroundResultFeatureStrategyListProps { + feature: PlaygroundFeatureSchema; + input?: PlaygroundRequestSchema; +} + +export const PlaygroundResultFeatureStrategyList = ({ + feature, + input, +}: PlaygroundResultFeatureStrategyListProps) => { + return ( + + } + elseShow={ + + } + /> + ); +}; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx similarity index 78% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx index 8f407466cf..4eded07ddb 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx @@ -3,10 +3,10 @@ import { 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 { ConstraintAccordionView } from '../../../../../../common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView'; +import { objectId } from '../../../../../../../../../utils/objectId'; +import { ConditionallyRender } from '../../../../../../../../common/ConditionallyRender/ConditionallyRender'; +import { StrategySeparator } from '../../../../../../../../common/StrategySeparator/StrategySeparator'; +import { ConstraintAccordionView } from '../../../../../../../../common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView'; import { styled } from '@mui/material'; interface PlaygroundResultConstraintExecutionProps { diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.styles.ts similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.styles.ts rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.styles.ts diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx similarity index 97% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx index f4cbddcac9..8f915795fb 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx @@ -6,7 +6,7 @@ import { getFeatureStrategyIcon, } from 'utils/strategyNames'; import StringTruncator from 'component/common/StringTruncator/StringTruncator'; -import { PlaygroundResultChip } from '../../PlaygroundResultChip/PlaygroundResultChip'; +import { PlaygroundResultChip } from '../../../../PlaygroundResultChip/PlaygroundResultChip'; import { PlaygroundFeatureStrategyResult, PlaygroundRequestSchema, diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.styles.ts similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.styles.ts rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.styles.ts diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx similarity index 93% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx index 2d87a61985..8fc74e2160 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx @@ -1,14 +1,14 @@ import { PlaygroundFeatureStrategySegmentResult, PlaygroundRequestSchema, -} from '../../../../../../../hooks/api/actions/usePlayground/playground.model'; +} from '../../../../../../../../../hooks/api/actions/usePlayground/playground.model'; import { PlaygroundResultConstraintExecution } from '../PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution'; import { CancelOutlined, DonutLarge } from '@mui/icons-material'; import { Link } from 'react-router-dom'; -import { StrategySeparator } from '../../../../../../common/StrategySeparator/StrategySeparator'; +import { StrategySeparator } from '../../../../../../../../common/StrategySeparator/StrategySeparator'; import { useStyles } from './PlaygroundResultSegmentExecution.styles'; import { styled, Typography } from '@mui/material'; -import { ConditionallyRender } from '../../../../../../common/ConditionallyRender/ConditionallyRender'; +import { ConditionallyRender } from '../../../../../../../../common/ConditionallyRender/ConditionallyRender'; interface PlaygroundResultSegmentExecutionProps { segments?: PlaygroundFeatureStrategySegmentResult[]; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.styles.ts similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.styles.ts rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.styles.ts diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.tsx similarity index 87% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.tsx index b18ad5f57f..ed99e9415e 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.tsx @@ -1,12 +1,12 @@ -import { ConditionallyRender } from '../../../../../../common/ConditionallyRender/ConditionallyRender'; -import { StrategySeparator } from '../../../../../../common/StrategySeparator/StrategySeparator'; +import { ConditionallyRender } from '../../../../../../../../common/ConditionallyRender/ConditionallyRender'; +import { StrategySeparator } from '../../../../../../../../common/StrategySeparator/StrategySeparator'; import { Box, Chip, styled } from '@mui/material'; import { useStyles } from './PlaygroundResultStrategyExecution.styles'; import { PlaygroundFeatureStrategyResult, PlaygroundRequestSchema, -} from '../../../../../../../hooks/api/actions/usePlayground/playground.model'; -import useUiConfig from '../../../../../../../hooks/api/getters/useUiConfig/useUiConfig'; +} 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'; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultStrategyList/PlaygroundResultStrategyList.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/playgroundResultStrategyLists.tsx similarity index 86% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultStrategyList/PlaygroundResultStrategyList.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/playgroundResultStrategyLists.tsx index 29e3867dad..da9dfdf28a 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultStrategyList/PlaygroundResultStrategyList.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/playgroundResultStrategyLists.tsx @@ -2,10 +2,27 @@ import { PlaygroundFeatureSchema, PlaygroundFeatureStrategyResult, PlaygroundRequestSchema, -} from '../../../../../../hooks/api/actions/usePlayground/playground.model'; -import { ConditionallyRender } from '../../../../../common/ConditionallyRender/ConditionallyRender'; +} from '../../../../../../../hooks/api/actions/usePlayground/playground.model'; +import { ConditionallyRender } from '../../../../../../common/ConditionallyRender/ConditionallyRender'; import { Alert, styled, Typography } from '@mui/material'; -import { PlaygroundResultFeatureStrategyItem } from '../PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem'; +import { PlaygroundResultFeatureStrategyItem } from './PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem'; + +const StyledAlertWrapper = styled('div')(({ theme }) => ({ + width: '100%', + display: 'flex', + flexDirection: 'column', + borderRadius: theme.shape.borderRadiusMedium, + border: `1px solid ${theme.palette.info.main}`, +})); + +const StyledListWrapper = styled('div')(({ theme }) => ({ + padding: theme.spacing(1, 0.5), +})); + +const StyledAlert = styled(Alert)(({ theme }) => ({ + borderBottomLeftRadius: 0, + borderBottomRightRadius: 0, +})); interface PlaygroundResultStrategyListProps { strategies: PlaygroundFeatureStrategyResult[]; @@ -13,7 +30,7 @@ interface PlaygroundResultStrategyListProps { compact?: boolean; } -export const PlaygroundResultStrategyList = ({ +export const PlaygroundResultStrategyLists = ({ strategies, input, compact = false, @@ -42,23 +59,6 @@ export const PlaygroundResultStrategyList = ({ ); }; -const StyledAlertWrapper = styled('div')(({ theme }) => ({ - width: '100%', - display: 'flex', - flexDirection: 'column', - borderRadius: theme.shape.borderRadiusMedium, - border: `1px solid ${theme.palette.info.main}`, -})); - -const StyledListWrapper = styled('div')(({ theme }) => ({ - padding: theme.spacing(1, 0.5), -})); - -const StyledAlert = styled(Alert)(({ theme }) => ({ - borderBottomLeftRadius: 0, - borderBottomRightRadius: 0, -})); - interface WrappedPlaygroundResultStrategyListProps extends PlaygroundResultStrategyListProps { feature: PlaygroundFeatureSchema; @@ -77,7 +77,7 @@ export const WrappedPlaygroundResultStrategyList = ({ evaluate like this:{' '} - Date: Wed, 3 Aug 2022 14:03:04 +0300 Subject: [PATCH 16/56] parameter handling --- .../StrategyExecution/StrategyExecution.tsx | 3 +- .../FeatureResultInfoPopoverCell.tsx | 5 - .../PlaygroundResultFeatureDetails.tsx | 11 +- .../PlaygroundResultFeatureStrategyList.tsx | 16 +- .../PlaygroundConstraintItem.styles.ts | 28 ++ .../PlaygroundConstraintItem.tsx | 78 ++++ .../PlaygroundResultConstraintExecution.tsx | 4 +- .../PlaygroundResultFeatureStrategyItem.tsx | 14 +- .../PlaygroundResultSegmentExecution.tsx | 4 +- ...laygroundResultStrategyExecution.styles.ts | 1 + .../PlaygroundResultStrategyExecution.tsx | 294 ++++++++++++++- .../playgroundResultStrategyLists.tsx | 7 +- .../actions/usePlayground/playground.model.ts | 347 ++++++++++-------- 13 files changed, 624 insertions(+), 188 deletions(-) create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundConstraintItem/PlaygroundConstraintItem.styles.ts create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundConstraintItem/PlaygroundConstraintItem.tsx 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 df92c05ec7..7618d0fae4 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 @@ -16,10 +16,9 @@ import { parseParameterNumber, parseParameterStrings, } from 'utils/parseParameter'; -import { PlaygroundFeatureStrategyResult } from 'hooks/api/actions/usePlayground/playground.model'; interface IStrategyExecutionProps { - strategy: IFeatureStrategy | PlaygroundFeatureStrategyResult; + strategy: IFeatureStrategy; percentageFill?: string; } diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx index de28173e7f..82739bda37 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx @@ -5,13 +5,8 @@ import { import { IconButton, Popover, styled } from '@mui/material'; import { InfoOutlined } from '@mui/icons-material'; import React, { useRef, useState } from 'react'; -import { ConditionallyRender } from '../../../../common/ConditionallyRender/ConditionallyRender'; import { useStyles } from './FeatureResultInfoPopoverCell.styles'; import { PlaygroundResultFeatureDetails } from './PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails'; -import { - PlaygroundResultStrategyLists, - WrappedPlaygroundResultStrategyList, -} from './PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/playgroundResultStrategyLists'; import { PlaygroundResultFeatureStrategyList } from './PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList'; interface FeatureResultInfoPopoverCellProps { diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx index ed6cffce02..6602bb7cb3 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx @@ -9,6 +9,7 @@ import { CloseOutlined } from '@mui/icons-material'; import React from 'react'; import { ConditionallyRender } from '../../../../../common/ConditionallyRender/ConditionallyRender'; import { checkForEmptyValues } from './helpers'; + interface PlaygroundFeatureResultDetailsProps { feature: PlaygroundFeatureSchema; input?: PlaygroundRequestSchema; @@ -22,22 +23,22 @@ export const PlaygroundResultFeatureDetails = ({ const { classes: styles } = useStyles(); const theme = useTheme(); - const description = Boolean(feature.isEnabled) + const description = feature.isEnabled ? `This feature toggle is True in ${input?.environment} because ` : `This feature toggle is False in ${input?.environment} because `; - const reason = Boolean(feature.isEnabled) + const reason = feature.isEnabled ? 'at least one strategy is True' - : !feature?.isEnabledInCurrentEnvironment + : feature?.isEnabledInCurrentEnvironment ? 'the environment is disabled' : 'all strategies are False'; - const color = Boolean(feature.isEnabled) + 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 filed in step 2 of the configuration' + ? 'You did not provide a value for your context field in step 2 of the configuration' : undefined; const onCloseClick = 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 7ef58175cc..3552edfc5c 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx @@ -20,20 +20,22 @@ export const PlaygroundResultFeatureStrategyList = ({ }: PlaygroundResultFeatureStrategyListProps) => { return ( + condition={ + !feature.isEnabled && feature.isEnabledInCurrentEnvironment } - elseShow={ + show={ } + elseShow={ + + } /> ); }; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundConstraintItem/PlaygroundConstraintItem.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundConstraintItem/PlaygroundConstraintItem.styles.ts new file mode 100644 index 0000000000..09bcd3dc2c --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundConstraintItem/PlaygroundConstraintItem.styles.ts @@ -0,0 +1,28 @@ +import { makeStyles } from 'tss-react/mui'; + +export const useStyles = makeStyles()(theme => ({ + container: { + width: '100%', + padding: theme.spacing(2, 3), + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + gap: theme.spacing(2), + }, + chip: { + margin: '0.25rem', + }, + column: { + flexDirection: 'column', + }, + paragraph: { + display: 'inline', + margin: '0.25rem 0', + maxWidth: '95%', + textAlign: 'center', + wordBreak: 'break-word', + }, +})); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundConstraintItem/PlaygroundConstraintItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundConstraintItem/PlaygroundConstraintItem.tsx new file mode 100644 index 0000000000..872b1e4d05 --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundConstraintItem/PlaygroundConstraintItem.tsx @@ -0,0 +1,78 @@ +import { Chip, Typography, useTheme } from '@mui/material'; +import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; +import { useStyles } from './PlaygroundConstraintItem.styles'; +import StringTruncator from 'component/common/StringTruncator/StringTruncator'; +import { CancelOutlined } from "@mui/icons-material"; + +interface IConstraintItemProps { + value: string[]; + text: string; + input?: string | number | boolean | 'no value'; + showReason?: boolean; +} + +export const PlaygroundConstraintItem = ({ + value, + text, + input, + showReason = false, +}: IConstraintItemProps) => { + const { classes: styles } = useStyles(); + const theme = useTheme(); + + const color = input === 'no value' ? 'error' : 'neutral'; + const reason = `value does not match any ${text}`; + + console.log(value, text, input, showReason); + + return ( +
+ + {input} + +
+ + {reason} + + } + /> + No {text}s added yet.

} + elseShow={ +
+

+ {value.length}{' '} + {value.length > 1 ? `${text}s` : text} will get + access. +

+ {value.map((v: string) => ( + + } + className={styles.chip} + /> + ))} +
+ } + /> +
+ } + /> +
+ ); +}; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx index 4eded07ddb..888ac22e9c 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx @@ -1,5 +1,5 @@ import { - PlaygroundFeatureStrategyConstraintResult, + PlaygroundConstraintSchema, PlaygroundRequestSchema, } from 'hooks/api/actions/usePlayground/playground.model'; import React, { Fragment } from 'react'; @@ -10,7 +10,7 @@ import { ConstraintAccordionView } from '../../../../../../../../common/Constrai import { styled } from '@mui/material'; interface PlaygroundResultConstraintExecutionProps { - constraints?: PlaygroundFeatureStrategyConstraintResult[]; + constraints?: PlaygroundConstraintSchema[]; compact: boolean; input?: PlaygroundRequestSchema; } 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 8f915795fb..ee945ed086 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 @@ -8,14 +8,14 @@ import { import StringTruncator from 'component/common/StringTruncator/StringTruncator'; import { PlaygroundResultChip } from '../../../../PlaygroundResultChip/PlaygroundResultChip'; import { - PlaygroundFeatureStrategyResult, + PlaygroundStrategySchema, PlaygroundRequestSchema, } from 'hooks/api/actions/usePlayground/playground.model'; import { PlaygroundResultStrategyExecution } from './PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution'; import { useStyles } from './PlaygroundResultFeatureStrategyItem.styles'; interface IPlaygroundResultFeatureStrategyItemProps { - strategy: PlaygroundFeatureStrategyResult; + strategy: PlaygroundStrategySchema; index: number; input?: PlaygroundRequestSchema; compact: boolean; @@ -40,8 +40,12 @@ export const PlaygroundResultFeatureStrategyItem = ({ const theme = useTheme(); const Icon = getFeatureStrategyIcon(strategy.name); const label = - result === undefined ? 'Not found' : result ? 'True' : 'False'; - const border = Boolean(result) + result.evaluationStatus !== 'complete' + ? 'Unevaluated' + : result.enabled + ? 'True' + : 'False'; + const border = result.enabled ? `1px solid ${theme.palette.success.main}` : `1px solid ${theme.palette.divider}`; @@ -71,7 +75,7 @@ export const PlaygroundResultFeatureStrategyItem = ({
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx index 8fc74e2160..d58f050cd7 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx @@ -1,5 +1,5 @@ import { - PlaygroundFeatureStrategySegmentResult, + PlaygroundSegmentSchema, PlaygroundRequestSchema, } from '../../../../../../../../../hooks/api/actions/usePlayground/playground.model'; import { PlaygroundResultConstraintExecution } from '../PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution'; @@ -11,7 +11,7 @@ import { styled, Typography } from '@mui/material'; import { ConditionallyRender } from '../../../../../../../../common/ConditionallyRender/ConditionallyRender'; interface PlaygroundResultSegmentExecutionProps { - segments?: PlaygroundFeatureStrategySegmentResult[]; + segments?: PlaygroundSegmentSchema[]; input?: PlaygroundRequestSchema; hasConstraints: boolean; } diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.styles.ts index 9db6fc4961..0e2b46fcd9 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.styles.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.styles.ts @@ -11,6 +11,7 @@ export const useStyles = makeStyles()(theme => ({ }, summary: { width: 'auto', + height: 'auto', padding: theme.spacing(2, 3), borderRadius: theme.shape.borderRadius, border: `1px solid ${theme.palette.divider}`, 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 ed99e9415e..890fee8487 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 @@ -3,16 +3,28 @@ import { StrategySeparator } from '../../../../../../../../common/StrategySepara import { Box, Chip, styled } from '@mui/material'; import { useStyles } from './PlaygroundResultStrategyExecution.styles'; import { - PlaygroundFeatureStrategyResult, PlaygroundRequestSchema, + PlaygroundStrategySchema, } from '../../../../../../../../../hooks/api/actions/usePlayground/playground.model'; import useUiConfig from '../../../../../../../../../hooks/api/getters/useUiConfig/useUiConfig'; -import React from 'react'; +import React, { Fragment } from 'react'; import { PlaygroundResultConstraintExecution } from '../PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution'; import { PlaygroundResultSegmentExecution } from '../PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution'; +import { + parseParameterNumber, + parseParameterString, + parseParameterStrings, +} from '../../../../../../../../../utils/parseParameter'; +import PercentageCircle from '../../../../../../../../common/PercentageCircle/PercentageCircle'; +import StringTruncator from '../../../../../../../../common/StringTruncator/StringTruncator'; +import { useStrategies } from '../../../../../../../../../hooks/api/getters/useStrategies/useStrategies'; +import { PlaygroundConstraintItem } from '../PlaygroundConstraintItem/PlaygroundConstraintItem'; +import { + ConstraintItem +} from "../../../../../../../../feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/ConstraintItem/ConstraintItem"; interface PlaygroundResultStrategyExecutionProps { - strategyResult: PlaygroundFeatureStrategyResult; + strategyResult: PlaygroundStrategySchema; percentageFill?: string; input?: PlaygroundRequestSchema; } @@ -25,13 +37,274 @@ export const PlaygroundResultStrategyExecution = ({ strategyResult, input, }: PlaygroundResultStrategyExecutionProps) => { - const { name, constraints, segments } = strategyResult; - + const { name, constraints, segments, parameters } = strategyResult; + const { strategies } = useStrategies(); const { uiConfig } = useUiConfig(); const { classes: styles } = useStyles(); const hasConstraints = Boolean(constraints && constraints.length > 0); + if (!parameters) { + return null; + } + + const definition = strategies.find(strategyDefinition => { + return strategyDefinition.name === strategyResult.name; + }); + + const renderParameters = () => { + return Object.keys(parameters).map(key => { + switch (key) { + case 'rollout': + case 'Rollout': + const percentage = parseParameterNumber(parameters[key]); + return ( + + + + +
+ {' '} + of your base{' '} + {constraints.length > 0 + ? 'who match constraints' + : ''}{' '} + is included. +
+ + ); + case 'userIds': + case 'UserIds': + const users = parseParameterStrings(parameters[key]); + return ( + + ); + case 'hostNames': + case 'HostNames': + const hosts = parseParameterStrings(parameters[key]); + console.log(input?.context); + console.log(key); + console.log(input?.context?.[key]); + console.log(hosts.includes(input?.context?.[key])); + return ( + + ); + case 'IPs': + const IPs = parseParameterStrings(parameters[key]); + return ( + + ); + case 'stickiness': + case 'groupId': + return null; + default: + return null; + } + }); + }; + + const renderCustomStrategy = () => { + if (!definition?.editable) return null; + return definition?.parameters.map((param: any, index: number) => { + const notLastItem = index !== definition?.parameters?.length - 1; + switch (param?.type) { + case 'list': + const values = parseParameterStrings( + strategyResult?.parameters[param.name] + ); + return ( + + + } + /> + + ); + case 'percentage': + return ( + +
+ {' '} + of your base{' '} + {constraints?.length > 0 + ? 'who match constraints' + : ''}{' '} + is included. +
+ + } + /> + + ); + case 'boolean': + return ( + +

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

+ } + /> + } + /> + + ); + case 'string': + const value = parseParameterString( + strategyResult.parameters[param.name] + ); + return ( + +

+ + + is set to + + +

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

+ + + is set to + + +

+ } + /> + + } + /> + ); + case 'default': + return null; + } + return null; + }); + }; + return ( - + 0 + )} + show={} + /> } /> @@ -64,7 +342,7 @@ export const PlaygroundResultStrategyExecution = ({ condition={name === 'default'} show={ - The standard strategy is{' '} + The standard strategyResult is{' '} } /> + {renderParameters()} + {renderCustomStrategy()} ); }; 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 da9dfdf28a..ad108c765d 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,6 +1,6 @@ import { PlaygroundFeatureSchema, - PlaygroundFeatureStrategyResult, + PlaygroundStrategySchema, PlaygroundRequestSchema, } from '../../../../../../../hooks/api/actions/usePlayground/playground.model'; import { ConditionallyRender } from '../../../../../../common/ConditionallyRender/ConditionallyRender'; @@ -12,7 +12,7 @@ const StyledAlertWrapper = styled('div')(({ theme }) => ({ display: 'flex', flexDirection: 'column', borderRadius: theme.shape.borderRadiusMedium, - border: `1px solid ${theme.palette.info.main}`, + border: `1px solid ${theme.palette.info.border}`, })); const StyledListWrapper = styled('div')(({ theme }) => ({ @@ -25,7 +25,7 @@ const StyledAlert = styled(Alert)(({ theme }) => ({ })); interface PlaygroundResultStrategyListProps { - strategies: PlaygroundFeatureStrategyResult[]; + strategies: PlaygroundStrategySchema[]; input?: PlaygroundRequestSchema; compact?: boolean; } @@ -35,6 +35,7 @@ export const PlaygroundResultStrategyLists = ({ input, compact = false, }: PlaygroundResultStrategyListProps) => { + console.log(strategies); return ( 0} diff --git a/frontend/src/hooks/api/actions/usePlayground/playground.model.ts b/frontend/src/hooks/api/actions/usePlayground/playground.model.ts index b4cedbaffb..7dc826062c 100644 --- a/frontend/src/hooks/api/actions/usePlayground/playground.model.ts +++ b/frontend/src/hooks/api/actions/usePlayground/playground.model.ts @@ -1,40 +1,124 @@ -// TODO: replace with auto-generated openapi code +import { VariantSchema } from '../../../../openapi'; -import { - IConstraint, - IFeatureStrategyParameters, -} from '../../../../interfaces/strategy'; +export const PlaygroundConstraintSchemaOperatorEnum = { + NotIn: 'NOT_IN', + In: 'IN', + StrEndsWith: 'STR_ENDS_WITH', + StrStartsWith: 'STR_STARTS_WITH', + StrContains: 'STR_CONTAINS', + NumEq: 'NUM_EQ', + NumGt: 'NUM_GT', + NumGte: 'NUM_GTE', + NumLt: 'NUM_LT', + NumLte: 'NUM_LTE', + DateAfter: 'DATE_AFTER', + DateBefore: 'DATE_BEFORE', + SemverEq: 'SEMVER_EQ', + SemverGt: 'SEMVER_GT', + SemverLt: 'SEMVER_LT', +} as const; +export type PlaygroundConstraintSchemaOperatorEnum = + typeof PlaygroundConstraintSchemaOperatorEnum[keyof typeof PlaygroundConstraintSchemaOperatorEnum]; -export enum PlaygroundFeatureSchemaVariantPayloadTypeEnum { - Json = 'json', - Csv = 'csv', - String = 'string', +export interface PlaygroundConstraintSchema { + /** + * The name of the context field that this constraint should apply to. + * @type {string} + * @memberof PlaygroundConstraintSchema + */ + contextName: string; + /** + * The operator to use when evaluating this constraint. For more information about the various operators, refer to [the strategy constraint operator documentation](https://docs.getunleash.io/advanced/strategy_constraints#strategy-constraint-operators). + * @type {string} + * @memberof PlaygroundConstraintSchema + */ + operator: PlaygroundConstraintSchemaOperatorEnum; + /** + * Whether the operator should be case sensitive or not. Defaults to `false` (being case sensitive). + * @type {boolean} + * @memberof PlaygroundConstraintSchema + */ + caseInsensitive?: boolean; + /** + * Whether the result should be negated or not. If `true`, will turn a `true` result into a `false` result and vice versa. + * @type {boolean} + * @memberof PlaygroundConstraintSchema + */ + inverted?: boolean; + /** + * The context values that should be used for constraint evaluation. Use this property instead of `value` for properties that accept multiple values. + * @type {Array} + * @memberof PlaygroundConstraintSchema + */ + values?: Array; + /** + * The context value that should be used for constraint evaluation. Use this property instead of `values` for properties that only accept single values. + * @type {string} + * @memberof PlaygroundConstraintSchema + */ + value?: string; + /** + * Whether this was evaluated as true or false. + * @type {boolean} + * @memberof PlaygroundConstraintSchema + */ + result: boolean; } -export interface PlaygroundFeatureSchemaVariantPayload { +export interface PlaygroundFeatureSchema { + /** + * The feature's name. + * @type {string} + * @memberof PlaygroundFeatureSchema + */ + name: string; + /** + * The ID of the project that contains this feature. + * @type {string} + * @memberof PlaygroundFeatureSchema + */ + projectId: string; + /** + * The strategies that apply to this feature. + * @type {Array} + * @memberof PlaygroundFeatureSchema + */ + strategies: Array; + /** + * Whether the feature is active and would be evaluated in the provided environment in a normal SDK context. + * @type {boolean} + * @memberof PlaygroundFeatureSchema + */ + isEnabledInCurrentEnvironment: boolean; /** * - * @type {string} - * @memberof PlaygroundFeatureSchemaVariantPayload + * @type {PlaygroundFeatureSchemaIsEnabled} + * @memberof PlaygroundFeatureSchema */ - type: PlaygroundFeatureSchemaVariantPayloadTypeEnum; + isEnabled: boolean | 'unevaluated'; /** * - * @type {string} - * @memberof PlaygroundFeatureSchemaVariantPayload + * @type {PlaygroundFeatureSchemaVariant} + * @memberof PlaygroundFeatureSchema */ - value: string; + variant: PlaygroundFeatureSchemaVariant | null; + /** + * + * @type {Array} + * @memberof PlaygroundFeatureSchema + */ + variants: Array; } export interface PlaygroundFeatureSchemaVariant { /** - * + * The variant's name. If there is no variant or if the toggle is disabled, this will be `disabled` * @type {string} * @memberof PlaygroundFeatureSchemaVariant */ name: string; /** - * + * Whether the variant is enabled or not. If the feature is disabled or if it doesn't have variants, this property will be `false` * @type {boolean} * @memberof PlaygroundFeatureSchemaVariant */ @@ -47,54 +131,32 @@ export interface PlaygroundFeatureSchemaVariant { payload?: PlaygroundFeatureSchemaVariantPayload; } -export interface PlaygroundFeatureSchema { +export interface PlaygroundFeatureSchemaVariantPayload { /** - * + * The format of the payload. * @type {string} - * @memberof PlaygroundFeatureSchema + * @memberof PlaygroundFeatureSchemaVariantPayload */ - name: string; + type: PlaygroundFeatureSchemaVariantPayloadTypeEnum; /** - * + * The payload value stringified. * @type {string} - * @memberof PlaygroundFeatureSchema + * @memberof PlaygroundFeatureSchemaVariantPayload */ - projectId: string; - /** - * - * @type {boolean} - * @memberof PlaygroundFeatureSchema - */ - isEnabled: boolean | 'unevaluated'; - - isEnabledInCurrentEnvironment: boolean; - /** - * - * @type {PlaygroundFeatureSchemaVariant} - * @memberof PlaygroundFeatureSchema - */ - variant: PlaygroundFeatureSchemaVariant | null; - - strategies: PlaygroundFeatureStrategyResult[]; -} -export interface PlaygroundResponseSchema { - /** - * - * @type {PlaygroundRequestSchema} - * @memberof PlaygroundResponseSchema - */ - input: PlaygroundRequestSchema; - /** - * - * @type {Array} - * @memberof PlaygroundResponseSchema - */ - features: Array; + value: string; } +export const PlaygroundFeatureSchemaVariantPayloadTypeEnum = { + Json: 'json', + Csv: 'csv', + String: 'string', +} as const; +export type PlaygroundFeatureSchemaVariantPayloadTypeEnum = + typeof PlaygroundFeatureSchemaVariantPayloadTypeEnum[keyof typeof PlaygroundFeatureSchemaVariantPayloadTypeEnum]; + export interface PlaygroundRequestSchema { /** - * + * The environment to evaluate toggles in. * @type {string} * @memberof PlaygroundRequestSchema */ @@ -104,7 +166,7 @@ export interface PlaygroundRequestSchema { * @type {PlaygroundRequestSchemaProjects} * @memberof PlaygroundRequestSchema */ - projects?: Array | string; + projects?: PlaygroundRequestSchemaProjects; /** * * @type {SdkContextSchema} @@ -113,68 +175,8 @@ export interface PlaygroundRequestSchema { context: SdkContextSchema; } -export interface PlaygroundFeatureSchemaVariantPayload { - /** - * - * @type {string} - * @memberof PlaygroundFeatureSchemaVariantPayload - */ - type: PlaygroundFeatureSchemaVariantPayloadTypeEnum; - /** - * - * @type {string} - * @memberof PlaygroundFeatureSchemaVariantPayload - */ - value: string; -} +export type PlaygroundRequestSchemaProjects = Array | string; -export interface PlaygroundFeatureSchemaVariant { - /** - * - * @type {string} - * @memberof PlaygroundFeatureSchemaVariant - */ - name: string; - /** - * - * @type {boolean} - * @memberof PlaygroundFeatureSchemaVariant - */ - enabled: boolean; - /** - * - * @type {PlaygroundFeatureSchemaVariantPayload} - * @memberof PlaygroundFeatureSchemaVariant - */ - payload?: PlaygroundFeatureSchemaVariantPayload; -} - -export interface PlaygroundFeatureSchema { - /** - * - * @type {string} - * @memberof PlaygroundFeatureSchema - */ - name: string; - /** - * - * @type {string} - * @memberof PlaygroundFeatureSchema - */ - projectId: string; - /** - * - * @type {boolean} - * @memberof PlaygroundFeatureSchema - */ - enabled: boolean | 'unevaluated'; - /** - * - * @type {PlaygroundFeatureSchemaVariant} - * @memberof PlaygroundFeatureSchema - */ - variant: PlaygroundFeatureSchemaVariant | null; -} export interface PlaygroundResponseSchema { /** * @@ -183,32 +185,98 @@ export interface PlaygroundResponseSchema { */ input: PlaygroundRequestSchema; /** - * + * The list of features that have been evaluated. * @type {Array} * @memberof PlaygroundResponseSchema */ features: Array; } -export interface PlaygroundRequestSchema { +export interface PlaygroundSegmentSchema { /** - * + * The segment's id. + * @type {number} + * @memberof PlaygroundSegmentSchema + */ + id: number; + /** + * The name of the segment. * @type {string} - * @memberof PlaygroundRequestSchema + * @memberof PlaygroundSegmentSchema */ - environment: string; + name: string; + /** + * Whether this was evaluated as true or false. + * @type {boolean} + * @memberof PlaygroundSegmentSchema + */ + result: boolean; + /** + * The list of constraints in this segment. + * @type {Array} + * @memberof PlaygroundSegmentSchema + */ + constraints: Array; +} + +export interface PlaygroundStrategySchema { + /** + * The strategy's name. + * @type {string} + * @memberof PlaygroundStrategySchema + */ + name: string; + /** + * The strategy's id. + * @type {string} + * @memberof PlaygroundStrategySchema + */ + id?: string; /** * - * @type Array | string - * @memberof PlaygroundRequestSchema + * @type {PlaygroundStrategySchemaResult} + * @memberof PlaygroundStrategySchema */ - projects?: Array | string; + result: PlaygroundStrategySchemaResult; + /** + * The strategy's segments and their evaluation results. + * @type {Array} + * @memberof PlaygroundStrategySchema + */ + segments: Array; + /** + * The strategy's constraints and their evaluation results. + * @type {Array} + * @memberof PlaygroundStrategySchema + */ + constraints: Array; /** * - * @type {SdkContextSchema} - * @memberof PlaygroundRequestSchema + * @type {{ [key: string]: string; }} + * @memberof PlaygroundStrategySchema */ - context: SdkContextSchema; + parameters: { [key: string]: string }; +} + +export const PlaygroundStrategySchemaResultEvaluationStatusEnum = { + Complete: 'complete', +} as const; +export type PlaygroundStrategySchemaResultEvaluationStatusEnum = + typeof PlaygroundStrategySchemaResultEvaluationStatusEnum[keyof typeof PlaygroundStrategySchemaResultEvaluationStatusEnum]; + +export interface PlaygroundStrategySchemaResult { + /** + * Signals that this strategy was evaluated successfully. + * @type {string} + * @memberof PlaygroundStrategySchemaResult + */ + evaluationStatus?: PlaygroundStrategySchemaResultEvaluationStatusEnum; + /** + * Whether this strategy evaluates to true or not. + * @type {boolean} + * @memberof PlaygroundStrategySchemaResult + */ + enabled: boolean; } export interface SdkContextSchema { @@ -257,24 +325,3 @@ export interface SdkContextSchema { */ userId?: string; } - -export interface PlaygroundFeatureStrategyConstraintResult extends IConstraint { - result: boolean; -} - -export interface PlaygroundFeatureStrategySegmentResult { - id: number; - name: string; - result: boolean; - constraints?: PlaygroundFeatureStrategyConstraintResult[]; -} - -export interface PlaygroundFeatureStrategyResult { - id: string; - name: string; - result: boolean | 'not found'; - type?: string; - constraints?: PlaygroundFeatureStrategyConstraintResult[]; - segments?: PlaygroundFeatureStrategySegmentResult[]; - parameters: IFeatureStrategyParameters; -} From 76b33cdd11ee11195ec6df11ab931c8a4bc902df Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Wed, 3 Aug 2022 14:54:13 +0300 Subject: [PATCH 17/56] bug fixes and linting --- .../ConstraintAccordionViewHeader.tsx | 6 +-- ...raintAccordionViewHeaderMultipleValues.tsx | 4 +- ...nstraintAccordionViewHeaderSingleValue.tsx | 8 ++-- .../PlaygroundConstraintItem.tsx | 2 +- .../PlaygroundResultStrategyExecution.tsx | 9 ++-- .../actions/usePlayground/playground.model.ts | 42 +++++-------------- 6 files changed, 25 insertions(+), 46 deletions(-) diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx index f3833c3e1f..0b1cd2b6bd 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx @@ -4,12 +4,12 @@ import { ConstraintAccordionViewHeaderInfo } from './ConstraintAccordionViewHead import { ConstraintAccordionHeaderActions } from '../../ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions'; import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccordion.styles'; import { - PlaygroundFeatureStrategyConstraintResult, + PlaygroundConstraintSchema, PlaygroundRequestSchema, -} from '../../../../../hooks/api/actions/usePlayground/playground.model'; +} from 'hooks/api/actions/usePlayground/playground.model'; interface IConstraintAccordionViewHeaderProps { - constraint: IConstraint | PlaygroundFeatureStrategyConstraintResult; + constraint: IConstraint | PlaygroundConstraintSchema; onDelete?: () => void; onEdit?: () => void; singleValue: boolean; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx index da0cc1fcfc..14e3d06b79 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx @@ -4,7 +4,7 @@ import React, { useEffect, useMemo, useState } from 'react'; import classnames from 'classnames'; import { IConstraint } from '../../../../../../interfaces/strategy'; import { useStyles } from '../../../ConstraintAccordion.styles'; -import { PlaygroundFeatureStrategyConstraintResult } from '../../../../../../hooks/api/actions/usePlayground/playground.model'; +import { PlaygroundConstraintSchema } from 'hooks/api/actions/usePlayground/playground.model'; const StyledValuesSpan = styled('span')(({ theme }) => ({ display: '-webkit-box', @@ -21,7 +21,7 @@ const StyledValuesSpan = styled('span')(({ theme }) => ({ })); interface ConstraintSingleValueProps { - constraint: IConstraint | PlaygroundFeatureStrategyConstraintResult; + constraint: IConstraint | PlaygroundConstraintSchema; expanded: boolean; maxLength: number; allowExpand: (shouldExpand: boolean) => void; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderSingleValue/ConstraintAccordionViewHeaderSingleValue.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderSingleValue/ConstraintAccordionViewHeaderSingleValue.tsx index da51969721..c25172e704 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderSingleValue/ConstraintAccordionViewHeaderSingleValue.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderSingleValue/ConstraintAccordionViewHeaderSingleValue.tsx @@ -1,10 +1,10 @@ import React, { useEffect } from 'react'; import { Chip, styled, Typography } from '@mui/material'; -import { formatConstraintValue } from '../../../../../../utils/formatConstraintValue'; +import { formatConstraintValue } from 'utils/formatConstraintValue'; import { useStyles } from '../../../ConstraintAccordion.styles'; import { IConstraint } from '../../../../../../interfaces/strategy'; -import { useLocationSettings } from '../../../../../../hooks/useLocationSettings'; -import { PlaygroundFeatureStrategyConstraintResult } from '../../../../../../hooks/api/actions/usePlayground/playground.model'; +import { useLocationSettings } from 'hooks/useLocationSettings'; +import { PlaygroundConstraintSchema } from 'hooks/api/actions/usePlayground/playground.model'; import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender'; const StyledSingleValueChip = styled(Chip)(({ theme }) => ({ @@ -15,7 +15,7 @@ const StyledSingleValueChip = styled(Chip)(({ theme }) => ({ })); interface ConstraintSingleValueProps { - constraint: IConstraint | PlaygroundFeatureStrategyConstraintResult; + constraint: IConstraint | PlaygroundConstraintSchema; allowExpand: (shouldExpand: boolean) => void; } diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundConstraintItem/PlaygroundConstraintItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundConstraintItem/PlaygroundConstraintItem.tsx index 872b1e4d05..a94a22e1df 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundConstraintItem/PlaygroundConstraintItem.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundConstraintItem/PlaygroundConstraintItem.tsx @@ -2,7 +2,7 @@ import { Chip, Typography, useTheme } from '@mui/material'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { useStyles } from './PlaygroundConstraintItem.styles'; import StringTruncator from 'component/common/StringTruncator/StringTruncator'; -import { CancelOutlined } from "@mui/icons-material"; +import { CancelOutlined } from '@mui/icons-material'; interface IConstraintItemProps { value: string[]; 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 890fee8487..41315c33b6 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 @@ -19,9 +19,7 @@ import PercentageCircle from '../../../../../../../../common/PercentageCircle/Pe import StringTruncator from '../../../../../../../../common/StringTruncator/StringTruncator'; import { useStrategies } from '../../../../../../../../../hooks/api/getters/useStrategies/useStrategies'; import { PlaygroundConstraintItem } from '../PlaygroundConstraintItem/PlaygroundConstraintItem'; -import { - ConstraintItem -} from "../../../../../../../../feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/ConstraintItem/ConstraintItem"; +import { ConstraintItem } from '../../../../../../../../feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/ConstraintItem/ConstraintItem'; interface PlaygroundResultStrategyExecutionProps { strategyResult: PlaygroundStrategySchema; @@ -217,8 +215,9 @@ export const PlaygroundResultStrategyExecution = ({

Date: Wed, 3 Aug 2022 16:19:48 +0300 Subject: [PATCH 18/56] improvements --- .../ConstraintAccordionView.tsx | 12 +++- .../PlaygroundResultFeatureDetails.tsx | 47 +++++++++---- .../PlaygroundConstraintItem.styles.ts | 4 ++ .../PlaygroundConstraintItem.tsx | 11 ++- .../PlaygroundResultFeatureStrategyItem.tsx | 16 +++-- .../PlaygroundResultChip.tsx | 69 ++++++++++++++----- 6 files changed, 121 insertions(+), 38 deletions(-) diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx index 22db144fd0..3345e0ece9 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx @@ -5,6 +5,7 @@ import { AccordionDetails, SxProps, Theme, + useTheme, } from '@mui/material'; import { IConstraint } from 'interfaces/strategy'; import { ConstraintAccordionViewBody } from './ConstraintAccordionViewBody/ConstraintAccordionViewBody'; @@ -17,12 +18,12 @@ import { } from 'constants/operators'; import { useStyles } from '../ConstraintAccordion.styles'; import { - PlaygroundFeatureStrategyConstraintResult, + PlaygroundConstraintSchema, PlaygroundRequestSchema, } from '../../../../hooks/api/actions/usePlayground/playground.model'; interface IConstraintAccordionViewProps { - constraint: IConstraint | PlaygroundFeatureStrategyConstraintResult; + constraint: IConstraint | PlaygroundConstraintSchema; onDelete?: () => void; onEdit?: () => void; playgroundInput?: PlaygroundRequestSchema; @@ -41,6 +42,7 @@ 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], @@ -51,6 +53,11 @@ export const ConstraintAccordionView = ({ setExpanded(!expanded); } }; + const backgroundColor = Boolean(playgroundInput) + ? !Boolean((constraint as PlaygroundConstraintSchema).result) + ? theme.palette.neutral.light + : 'inherit' + : 'inherit'; return ( - +
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundConstraintItem/PlaygroundConstraintItem.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundConstraintItem/PlaygroundConstraintItem.styles.ts index 09bcd3dc2c..66b3e69b6f 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundConstraintItem/PlaygroundConstraintItem.styles.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundConstraintItem/PlaygroundConstraintItem.styles.ts @@ -12,6 +12,10 @@ export const useStyles = makeStyles()(theme => ({ justifyContent: 'space-between', gap: theme.spacing(2), }, + disabled: { + backgroundColor: theme.palette.neutral.light, + opacity: '90%', + }, chip: { margin: '0.25rem', }, diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundConstraintItem/PlaygroundConstraintItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundConstraintItem/PlaygroundConstraintItem.tsx index a94a22e1df..d1f6d90399 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundConstraintItem/PlaygroundConstraintItem.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundConstraintItem/PlaygroundConstraintItem.tsx @@ -3,6 +3,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit import { useStyles } from './PlaygroundConstraintItem.styles'; import StringTruncator from 'component/common/StringTruncator/StringTruncator'; import { CancelOutlined } from '@mui/icons-material'; +import classnames from 'classnames'; interface IConstraintItemProps { value: string[]; @@ -23,10 +24,13 @@ export const PlaygroundConstraintItem = ({ const color = input === 'no value' ? 'error' : 'neutral'; const reason = `value does not match any ${text}`; - console.log(value, text, input, showReason); - return ( -
+
{input} @@ -72,6 +76,7 @@ export const PlaygroundConstraintItem = ({ } + elseShow={
} />
); 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 ee945ed086..4b6f54fbad 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 @@ -40,14 +40,15 @@ export const PlaygroundResultFeatureStrategyItem = ({ const theme = useTheme(); const Icon = getFeatureStrategyIcon(strategy.name); const label = - result.evaluationStatus !== 'complete' - ? 'Unevaluated' + result.evaluationStatus === 'incomplete' + ? 'Unknown' : result.enabled ? 'True' : 'False'; - const border = result.enabled - ? `1px solid ${theme.palette.success.main}` - : `1px solid ${theme.palette.divider}`; + const border = + result.enabled && result.evaluationStatus === 'complete' + ? `1px solid ${theme.palette.success.main}` + : `1px solid ${theme.palette.divider}`; return (
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx index d91b4ae9c6..8cbf734142 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx @@ -6,22 +6,25 @@ import { ReactComponent as FeatureEnabledIcon } from '../../../../../assets/icon import { ReactComponent as FeatureDisabledIcon } from '../../../../../assets/icons/isenabled-false.svg'; interface IResultChipProps { - enabled: boolean | 'unevaluated'; + enabled: boolean | 'unknown'; // Result icon - defaults to true showIcon?: boolean; label?: string; + size?: 'default' | 'medium' | 'large'; } -export const StyledChip = styled(Chip)(({ theme }) => ({ - width: 60, - height: 24, - borderRadius: theme.shape.borderRadius, - fontWeight: theme.typography.fontWeightMedium, - ['& .MuiChip-label']: { - padding: 0, - paddingLeft: theme.spacing(0.5), - }, -})); +export const StyledChip = styled(Chip)<{ width?: number }>( + ({ theme, width }) => ({ + width: width ?? 60, + height: 24, + borderRadius: theme.shape.borderRadius, + fontWeight: theme.typography.fontWeightMedium, + ['& .MuiChip-label']: { + padding: 0, + paddingLeft: theme.spacing(0.5), + }, + }) +); export const StyledFalseChip = styled(StyledChip)(({ theme }) => ({ border: `1px solid ${theme.palette.error.main}`, @@ -45,15 +48,27 @@ export const StyledTrueChip = styled(StyledChip)(({ theme }) => ({ }, })); +export const StyledUnknownChip = styled(StyledChip)(({ theme }) => ({ + border: `1px solid ${theme.palette.warning.main}`, + backgroundColor: colors.orange['100'], + ['& .MuiChip-label']: { + color: theme.palette.warning.main, + }, + ['& .MuiChip-icon']: { + color: theme.palette.warning.main, + }, +})); + export const PlaygroundResultChip = ({ enabled, showIcon = true, label, + size = 'default', }: IResultChipProps) => { const theme = useTheme(); const icon = ( } elseShow={ - + } + elseShow={ + + } /> } /> From 9da3448558b2a9010d8543d4f54f7a74a087c210 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Wed, 3 Aug 2022 16:34:56 +0300 Subject: [PATCH 19/56] improvements --- ...PlaygroundResultFeatureStrategyItem.styles.ts | 1 + .../PlaygroundResultFeatureStrategyItem.tsx | 5 +++-- .../PlaygroundResultStrategyExecution.tsx | 16 +++++++++++----- 3 files changed, 15 insertions(+), 7 deletions(-) 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 205a7141af..60369dd079 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 @@ -29,6 +29,7 @@ export const useStyles = makeStyles()(theme => ({ padding: '0.5rem', }, width: '100%', + flexShrink: 0, paddingBottom: '1rem', borderRadius: theme.shape.borderRadiusMedium, background: theme.palette.background.default, 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 4b6f54fbad..d0832253d2 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 @@ -26,7 +26,7 @@ const StyledItemWrapper = styled('div')(({ theme }) => ({ flexDirection: 'row', alignItems: 'center', marginTop: '4px', - gap: '4px', + gap: '8px', })); export const PlaygroundResultFeatureStrategyItem = ({ @@ -56,6 +56,7 @@ export const PlaygroundResultFeatureStrategyItem = ({ width: '100%', position: 'relative', paddingRight: compact ? '12px' : 0, + ml: '-12px' }} > } /> - {index + 1} + {index + 1}
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 41315c33b6..dd35b68852 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 @@ -19,7 +19,6 @@ import PercentageCircle from '../../../../../../../../common/PercentageCircle/Pe import StringTruncator from '../../../../../../../../common/StringTruncator/StringTruncator'; import { useStrategies } from '../../../../../../../../../hooks/api/getters/useStrategies/useStrategies'; import { PlaygroundConstraintItem } from '../PlaygroundConstraintItem/PlaygroundConstraintItem'; -import { ConstraintItem } from '../../../../../../../../feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/ConstraintItem/ConstraintItem'; interface PlaygroundResultStrategyExecutionProps { strategyResult: PlaygroundStrategySchema; @@ -31,6 +30,11 @@ const StyledStrategyExecutionWrapper = styled('div')(({ theme }) => ({ padding: theme.spacing(1), })); +const StyledParamWrapper = styled('div')(({ theme }) => ({ + padding: theme.spacing(2,1), +})); + + export const PlaygroundResultStrategyExecution = ({ strategyResult, input, @@ -155,7 +159,7 @@ export const PlaygroundResultStrategyExecution = ({ }); }; - const renderCustomStrategy = () => { + const renderCustomStrategyParameters = () => { if (!definition?.editable) return null; return definition?.parameters.map((param: any, index: number) => { const notLastItem = index !== definition?.parameters?.length - 1; @@ -166,7 +170,7 @@ export const PlaygroundResultStrategyExecution = ({ ); return ( - + } @@ -352,8 +356,10 @@ export const PlaygroundResultStrategyExecution = ({ } /> - {renderParameters()} - {renderCustomStrategy()} + + {renderParameters()} + {renderCustomStrategyParameters()} + ); }; From 54def95727ec439cd97e3751deb7c25a009b819b Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Wed, 3 Aug 2022 16:43:47 +0300 Subject: [PATCH 20/56] improvements --- .../PlaygroundResultFeatureDetails.tsx | 4 ++-- .../PlaygroundResultFeatureStrategyList.tsx | 2 +- .../FeatureStatusCell/FeatureStatusCell.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx index 1286f04aff..0f724c8cf6 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx @@ -35,10 +35,10 @@ export const PlaygroundResultFeatureDetails = ({ const reason = feature.isEnabled === 'unevaluated' ? 'custom strategies are not evaluated yet' + : !feature.isEnabledInCurrentEnvironment + ? 'the environment is disabled' : feature.isEnabled ? 'at least one strategy is True' - : feature?.isEnabledInCurrentEnvironment - ? 'the environment is disabled' : 'all strategies are False'; const color = 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 3552edfc5c..5fb74e1a9e 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx @@ -21,7 +21,7 @@ export const PlaygroundResultFeatureStrategyList = ({ return ( ({ From 2858aae45ec41dda1f536fb91cbf035ad61fcd05 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Wed, 3 Aug 2022 16:46:12 +0300 Subject: [PATCH 21/56] improvements --- .../PlaygroundResultFeatureDetails.tsx | 2 -- .../playgroundResultStrategyLists.tsx | 1 - 2 files changed, 3 deletions(-) diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx index 0f724c8cf6..386cbaef5a 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx @@ -23,8 +23,6 @@ export const PlaygroundResultFeatureDetails = ({ const { classes: styles } = useStyles(); const theme = useTheme(); - console.log(feature); - const description = feature.isEnabled === 'unevaluated' ? `This feature toggle is Unevaluated in ${input?.environment} because ` 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 ad108c765d..60c62e10c1 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 @@ -35,7 +35,6 @@ export const PlaygroundResultStrategyLists = ({ input, compact = false, }: PlaygroundResultStrategyListProps) => { - console.log(strategies); return ( 0} From f9d8c4a36a3dbf23e21b201de00ec143d91833f7 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Wed, 3 Aug 2022 17:18:03 +0300 Subject: [PATCH 22/56] improvements --- .../PlaygroundResultFeatureDetails.tsx | 15 ++--- .../FeatureStatusCell/FeatureStatusCell.tsx | 7 ++- .../PlaygroundResultChip.tsx | 63 ++++++++++--------- 3 files changed, 43 insertions(+), 42 deletions(-) diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx index 386cbaef5a..fd63c9643d 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx @@ -66,16 +66,13 @@ export const PlaygroundResultFeatureDetails = ({ diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx index b219b57b41..b9c2066b4b 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx @@ -3,7 +3,7 @@ import { Box, styled } from '@mui/material'; import { PlaygroundResultChip } from '../PlaygroundResultChip/PlaygroundResultChip'; interface IFeatureStatusCellProps { - enabled: boolean | 'unknown'; + enabled: boolean | 'unevaluated'; } const StyledCellBox = styled(Box)(({ theme }) => ({ @@ -20,7 +20,10 @@ export const FeatureStatusCell = ({ enabled }: IFeatureStatusCellProps) => { return ( - + ); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx index 8cbf734142..26c1fc35fd 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx @@ -4,12 +4,13 @@ import { ConditionallyRender } from '../../../../common/ConditionallyRender/Cond import React from 'react'; import { ReactComponent as FeatureEnabledIcon } from '../../../../../assets/icons/isenabled-true.svg'; import { ReactComponent as FeatureDisabledIcon } from '../../../../../assets/icons/isenabled-false.svg'; +import { WarningOutlined } from "@mui/icons-material"; interface IResultChipProps { - enabled: boolean | 'unknown'; + enabled: boolean | 'unevaluated' | 'unknown' + label: string; // Result icon - defaults to true showIcon?: boolean; - label?: string; size?: 'default' | 'medium' | 'large'; } @@ -61,68 +62,68 @@ export const StyledUnknownChip = styled(StyledChip)(({ theme }) => ({ export const PlaygroundResultChip = ({ enabled, - showIcon = true, label, + showIcon = true, size = 'default', }: IResultChipProps) => { const theme = useTheme(); const icon = ( - } + condition={enabled === 'unknown' || enabled === 'unevaluated' } + show={ } elseShow={ - + } + elseShow={ + + } /> } /> ); - const defaultLabel = enabled ? 'True' : 'False'; - - let chipWidth = 60; - if (size === 'medium') { - chipWidth = 72; - } - - if (size === 'large') { - chipWidth = 100; - } + let chipWidth = 60; + if (size === 'medium') chipWidth = 72; + if (size === 'large') chipWidth = 100; return ( } elseShow={ } elseShow={ } /> } /> - ); + ) }; From 2299eb930510d29184812acab07d887769f578d0 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Wed, 3 Aug 2022 17:20:27 +0300 Subject: [PATCH 23/56] fmt and lint --- .../StrategyExecution/StrategyExecution.tsx | 2 +- .../PlaygroundResultFeatureDetails.tsx | 4 ++-- .../PlaygroundResultFeatureStrategyList.tsx | 4 +--- .../PlaygroundResultFeatureStrategyItem.tsx | 6 ++++-- .../PlaygroundResultStrategyExecution.tsx | 8 +++++--- .../FeatureStatusCell/FeatureStatusCell.tsx | 8 +++++++- .../PlaygroundResultChip/PlaygroundResultChip.tsx | 14 +++++++------- 7 files changed, 27 insertions(+), 19 deletions(-) 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 99efbdd766..3326954c9b 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 @@ -1,5 +1,5 @@ import { Fragment, useMemo, VFC } from 'react'; -import { Box, Chip, Tooltip } from '@mui/material'; +import { Box, Chip } from '@mui/material'; import { IFeatureStrategy } from 'interfaces/strategy'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle'; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx index fd63c9643d..d571461bfa 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx @@ -71,8 +71,8 @@ export const PlaygroundResultFeatureDetails = ({ feature.isEnabled === 'unevaluated' ? '?' : Boolean(feature.isEnabled) - ? 'True' - : 'False' + ? 'True' + : 'False' } /> 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 5fb74e1a9e..9fbdd92b39 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx @@ -20,9 +20,7 @@ export const PlaygroundResultFeatureStrategyList = ({ }: PlaygroundResultFeatureStrategyListProps) => { return ( } /> - {index + 1} + + {index + 1} +
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 dd35b68852..4d111e1479 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 @@ -31,10 +31,9 @@ const StyledStrategyExecutionWrapper = styled('div')(({ theme }) => ({ })); const StyledParamWrapper = styled('div')(({ theme }) => ({ - padding: theme.spacing(2,1), + padding: theme.spacing(2, 1), })); - export const PlaygroundResultStrategyExecution = ({ strategyResult, input, @@ -170,7 +169,10 @@ export const PlaygroundResultStrategyExecution = ({ ); return ( - + } diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx index b9c2066b4b..31cb8d7f35 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx @@ -22,7 +22,13 @@ export const FeatureStatusCell = ({ enabled }: IFeatureStatusCellProps) => { diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx index 26c1fc35fd..b97f9c90c8 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx @@ -4,10 +4,10 @@ import { ConditionallyRender } from '../../../../common/ConditionallyRender/Cond import React from 'react'; import { ReactComponent as FeatureEnabledIcon } from '../../../../../assets/icons/isenabled-true.svg'; import { ReactComponent as FeatureDisabledIcon } from '../../../../../assets/icons/isenabled-false.svg'; -import { WarningOutlined } from "@mui/icons-material"; +import { WarningOutlined } from '@mui/icons-material'; interface IResultChipProps { - enabled: boolean | 'unevaluated' | 'unknown' + enabled: boolean | 'unevaluated' | 'unknown'; label: string; // Result icon - defaults to true showIcon?: boolean; @@ -69,8 +69,8 @@ export const PlaygroundResultChip = ({ const theme = useTheme(); const icon = ( } + condition={enabled === 'unknown' || enabled === 'unevaluated'} + show={} elseShow={ ); - let chipWidth = 60; + let chipWidth = 60; if (size === 'medium') chipWidth = 72; if (size === 'large') chipWidth = 100; return ( } /> - ) + ); }; From 2bd239f481284d43adb8e57a04ac829ad97cf763 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Thu, 4 Aug 2022 14:15:57 +0300 Subject: [PATCH 24/56] fmt and lint --- .../ConstraintAccordionView.tsx | 18 +- .../ConstraintAccordionViewHeader.tsx | 13 +- .../ConstraintAccordionViewHeaderInfo.tsx | 37 +-- .../FeatureResultInfoPopoverCell.tsx | 4 +- .../PlaygroundResultFeatureDetails.styles.ts | 4 +- .../PlaygroundResultFeatureDetails.tsx | 19 +- .../PlaygroundResultFeatureStrategyList.tsx | 6 +- .../PlaygroundResultFeatureStrategyItem.tsx | 8 +- .../PlaygroundConstraintItem.styles.ts | 0 .../PlaygroundConstraintItem.tsx | 0 .../PlaygroundConstraintAccordion.styles.ts | 158 +++++++++ ...laygroundConstraintAccordionViewHeader.tsx | 41 +++ ...roundConstraintAccordionViewHeaderInfo.tsx | 110 +++++++ ...raintAccordionViewHeaderMultipleValues.tsx | 85 +++++ ...nstraintAccordionViewHeaderSingleValue.tsx | 47 +++ ...laygroundResultConstraintAccordionView.tsx | 93 ++++++ .../PlaygroundResultConstraintExecution.tsx | 14 +- ...PlaygroundResultSegmentExecution.styles.ts | 0 .../PlaygroundResultSegmentExecution.tsx | 10 +- .../PlaygroundResultStrategyExecution.tsx | 304 ++---------------- ...tStrategyExecutionCustomStrategyParams.tsx | 181 +++++++++++ ...roundResultStrategyExecutionParameters.tsx | 130 ++++++++ .../helepers.ts | 14 + .../playgroundResultStrategyLists.tsx | 6 +- .../FeatureStatusCell/FeatureStatusCell.tsx | 7 +- .../actions/usePlayground/playground.model.ts | 11 +- 26 files changed, 930 insertions(+), 390 deletions(-) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/{ => PlaygroundResultStrategyExecution}/PlaygroundConstraintItem/PlaygroundConstraintItem.styles.ts (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/{ => PlaygroundResultStrategyExecution}/PlaygroundConstraintItem/PlaygroundConstraintItem.tsx (100%) create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordion.styles.ts create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeader.tsx create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundConstraintAccordionViewHeaderInfo.tsx create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues.tsx create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue.tsx create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundResultConstraintAccordionView.tsx rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/{ => PlaygroundResultStrategyExecution}/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx (72%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/{ => PlaygroundResultStrategyExecution}/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.styles.ts (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/{ => PlaygroundResultStrategyExecution}/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx (91%) create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecutionCustomStrategyParams./PlaygroundResultStrategyExecutionCustomStrategyParams.tsx create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecutionParameters/PlaygroundResultStrategyExecutionParameters.tsx create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/helepers.ts diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx index 3345e0ece9..5d1e457159 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx @@ -17,17 +17,11 @@ import { semVerOperators, } from 'constants/operators'; import { useStyles } from '../ConstraintAccordion.styles'; -import { - PlaygroundConstraintSchema, - PlaygroundRequestSchema, -} from '../../../../hooks/api/actions/usePlayground/playground.model'; interface IConstraintAccordionViewProps { - constraint: IConstraint | PlaygroundConstraintSchema; + constraint: IConstraint; onDelete?: () => void; onEdit?: () => void; - playgroundInput?: PlaygroundRequestSchema; - maxLength?: number; sx?: SxProps; } @@ -36,8 +30,6 @@ export const ConstraintAccordionView = ({ onEdit, onDelete, sx = undefined, - maxLength, - playgroundInput, }: IConstraintAccordionViewProps) => { const { classes: styles } = useStyles(); const [expandable, setExpandable] = useState(true); @@ -53,11 +45,6 @@ export const ConstraintAccordionView = ({ setExpanded(!expanded); } }; - const backgroundColor = Boolean(playgroundInput) - ? !Boolean((constraint as PlaygroundConstraintSchema).result) - ? theme.palette.neutral.light - : 'inherit' - : 'inherit'; return ( diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx index 0b1cd2b6bd..897304438d 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx @@ -3,20 +3,14 @@ import { IConstraint } from 'interfaces/strategy'; import { ConstraintAccordionViewHeaderInfo } from './ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo'; import { ConstraintAccordionHeaderActions } from '../../ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions'; import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccordion.styles'; -import { - PlaygroundConstraintSchema, - PlaygroundRequestSchema, -} from 'hooks/api/actions/usePlayground/playground.model'; interface IConstraintAccordionViewHeaderProps { - constraint: IConstraint | PlaygroundConstraintSchema; + constraint: IConstraint; onDelete?: () => void; onEdit?: () => void; singleValue: boolean; expanded: boolean; allowExpand: (shouldExpand: boolean) => void; - playgroundInput?: PlaygroundRequestSchema; - maxLength?: number; } export const ConstraintAccordionViewHeader = ({ @@ -26,8 +20,6 @@ export const ConstraintAccordionViewHeader = ({ singleValue, allowExpand, expanded, - maxLength, - playgroundInput, }: IConstraintAccordionViewHeaderProps) => { const { classes: styles } = useStyles(); @@ -39,9 +31,6 @@ export const ConstraintAccordionViewHeader = ({ singleValue={singleValue} allowExpand={allowExpand} expanded={expanded} - result={'result' in constraint ? constraint.result : undefined} - maxLength={maxLength} - playgroundInput={playgroundInput} /> ({ display: '-webkit-box', @@ -41,9 +39,7 @@ interface ConstraintAccordionViewHeaderMetaInfoProps { singleValue: boolean; expanded: boolean; allowExpand: (shouldExpand: boolean) => void; - result?: boolean; maxLength?: number; - playgroundInput?: PlaygroundRequestSchema; } export const ConstraintAccordionViewHeaderInfo = ({ @@ -51,17 +47,9 @@ export const ConstraintAccordionViewHeaderInfo = ({ singleValue, allowExpand, expanded, - result, - playgroundInput, maxLength = 112, }: ConstraintAccordionViewHeaderMetaInfoProps) => { const { classes: styles } = useStyles(); - const theme = useTheme(); - - const isPlayground = Boolean(playgroundInput); - const constrainExistsInContext = - isPlayground && - Boolean(playgroundInput?.context[constraint.contextName]); return ( @@ -69,23 +57,6 @@ export const ConstraintAccordionViewHeaderInfo = ({ {constraint.contextName} - - {playgroundInput?.context[ - constraint.contextName - ] || 'no value'} - - } - /> @@ -107,10 +78,6 @@ export const ConstraintAccordionViewHeaderInfo = ({ } />
- } - /> ); }; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx index 82739bda37..84bb71ee26 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx @@ -27,7 +27,9 @@ export const FeatureResultInfoPopoverCell = ({ const { classes: styles } = useStyles(); const ref = useRef(null); - const togglePopover = (event: React.SyntheticEvent) => { + console.log(feature) + + const togglePopover = () => { setOpen(!open); }; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts index c1dbc23cf6..bb59b48574 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts @@ -13,7 +13,9 @@ export const useStyles = makeStyles()(theme => ({ gap: '12px', marginTop: '12px', }, - alertRow: {}, + alertRow: { + margin: theme.spacing(1,0), + }, descriptionRow: { marginBottom: theme.spacing(2), }, diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx index d571461bfa..98a5d45278 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx @@ -24,25 +24,19 @@ export const PlaygroundResultFeatureDetails = ({ const theme = useTheme(); const description = - feature.isEnabled === 'unevaluated' - ? `This feature toggle is Unevaluated in ${input?.environment} because ` - : feature.isEnabled + feature.isEnabled ? `This feature toggle is True in ${input?.environment} because ` : `This feature toggle is False in ${input?.environment} because `; const reason = - feature.isEnabled === 'unevaluated' - ? 'custom strategies are not evaluated yet' + feature.isEnabled + ? 'at least one strategy is True' : !feature.isEnabledInCurrentEnvironment ? 'the environment is disabled' - : feature.isEnabled - ? 'at least one strategy is True' : 'all strategies are False'; const color = - feature.isEnabled === 'unevaluated' - ? theme.palette.warning.main - : feature.isEnabled + feature.isEnabled ? theme.palette.success.main : theme.palette.error.main; @@ -67,10 +61,7 @@ export const PlaygroundResultFeatureDetails = ({ { return ( } elseShow={ } 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 03c0da7d14..4776a8b5ee 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 @@ -25,8 +25,8 @@ const StyledItemWrapper = styled('div')(({ theme }) => ({ display: 'flex', flexDirection: 'row', alignItems: 'center', - marginTop: '4px', - gap: '8px', + margin: theme.spacing(0.5), + gap: theme.spacing(1), })); export const PlaygroundResultFeatureStrategyItem = ({ @@ -63,8 +63,8 @@ export const PlaygroundResultFeatureStrategyItem = ({ condition={index > 0} show={} /> - - + + {index + 1} diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundConstraintItem/PlaygroundConstraintItem.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundConstraintItem/PlaygroundConstraintItem.styles.ts similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundConstraintItem/PlaygroundConstraintItem.styles.ts rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundConstraintItem/PlaygroundConstraintItem.styles.ts diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundConstraintItem/PlaygroundConstraintItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundConstraintItem/PlaygroundConstraintItem.tsx similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundConstraintItem/PlaygroundConstraintItem.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundConstraintItem/PlaygroundConstraintItem.tsx diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordion.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordion.styles.ts new file mode 100644 index 0000000000..bceadae3df --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordion.styles.ts @@ -0,0 +1,158 @@ +import { makeStyles } from 'tss-react/mui'; + +export const useStyles = makeStyles()(theme => ({ + constraintIconContainer: { + backgroundColor: theme.palette.primary.main, + borderRadius: '50%', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + marginRight: theme.spacing(1), + [theme.breakpoints.down(650)]: { + marginBottom: '1rem', + marginRight: 0, + }, + }, + constraintIcon: { + fill: '#fff', + }, + accordion: { + border: `1px solid ${theme.palette.grey[400]}`, + borderRadius: '8px', + backgroundColor: '#fff', + boxShadow: 'none', + margin: 0, + }, + accordionRoot: { + '&:before': { + opacity: '0 !important', + }, + }, + accordionEdit: { + backgroundColor: '#F6F6FA', + }, + headerMetaInfo: { + display: 'flex', + alignItems: 'stretch', + [theme.breakpoints.down(710)]: { flexDirection: 'column' }, + }, + headerContainer: { + display: 'flex', + alignItems: 'center', + width: '100%', + [theme.breakpoints.down(710)]: { + flexDirection: 'column', + alignItems: 'center', + position: 'relative', + }, + }, + headerValuesContainerWrapper: { + display: 'flex', + alignItems: 'stretch', + margin: 'auto 0', + }, + headerValuesContainer: { + display: 'flex', + justifyContent: 'stretch', + margin: 'auto 0', + flexDirection: 'column', + }, + headerValues: { + fontSize: theme.fontSizes.smallBody, + }, + headerValuesExpand: { + fontSize: theme.fontSizes.smallBody, + marginTop: '4px', + color: theme.palette.primary.dark, + [theme.breakpoints.down(710)]: { + textAlign: 'center', + }, + }, + headerConstraintContainer: { + minWidth: '220px', + position: 'relative', + paddingRight: '1rem', + [theme.breakpoints.between(1101, 1365)]: { + minWidth: '152px', + paddingRight: '0.5rem', + }, + }, + editingBadge: { + borderRadius: theme.shape.borderRadiusExtraLarge, + padding: '0.25rem 0.5rem', + backgroundColor: '#635DC5', + color: '#fff', + marginLeft: 'auto', + fontSize: '0.9rem', + [theme.breakpoints.down(650)]: { + position: 'absolute', + right: 0, + top: '-10px', + }, + }, + headerText: { + maxWidth: '400px', + fontSize: theme.fontSizes.smallBody, + [theme.breakpoints.down('xl')]: { + display: 'none', + }, + }, + selectContainer: { + display: 'flex', + alignItems: 'center', + [theme.breakpoints.down(770)]: { + flexDirection: 'column', + }, + }, + bottomSelect: { + [theme.breakpoints.down(770)]: { + marginTop: '1rem', + }, + display: 'inline-flex', + }, + headerSelect: { + marginRight: '1rem', + width: '200px', + [theme.breakpoints.between(1101, 1365)]: { + width: '170px', + marginRight: '8px', + }, + }, + chip: { + margin: '0 0.5rem 0.5rem 0', + }, + chipValue: { + whiteSpace: 'pre', + }, + headerActions: { + marginLeft: 'auto', + whiteSpace: 'nowrap', + [theme.breakpoints.down(710)]: { + display: 'none', + }, + }, + accordionDetails: { + borderTop: `1px dashed ${theme.palette.grey[300]}`, + display: 'flex', + flexDirection: 'column', + }, + valuesContainer: { + padding: '1rem 0rem', + maxHeight: '400px', + overflowY: 'auto', + }, + summary: { + border: 'none', + padding: theme.spacing(0.5, 3), + '&:hover .valuesExpandLabel': { + textDecoration: 'underline', + }, + }, + settingsIcon: { + height: '32.5px', + width: '32.5px', + marginRight: '0.5rem', + fill: theme.palette.inactiveIcon, + }, + form: { padding: 0, margin: 0, width: '100%' }, +})); 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/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeader.tsx new file mode 100644 index 0000000000..85d40bf5a6 --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeader.tsx @@ -0,0 +1,41 @@ +import {ConstraintIcon} from 'component/common/ConstraintAccordion/ConstraintIcon'; +import { + PlaygroundConstraintAccordionViewHeaderInfo +} from './PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundConstraintAccordionViewHeaderInfo'; +import {useStyles} from 'component/common/ConstraintAccordion/ConstraintAccordion.styles'; +import {PlaygroundConstraintSchema, PlaygroundRequestSchema,} from 'hooks/api/actions/usePlayground/playground.model'; + +interface PlaygroundConstraintAccordionViewHeaderProps { + constraint: PlaygroundConstraintSchema; + singleValue: boolean; + expanded: boolean; + allowExpand: (shouldExpand: boolean) => void; + playgroundInput?: PlaygroundRequestSchema; + maxLength?: number; +} + +export const PlaygroundConstraintAccordionViewHeader = ({ + constraint, + singleValue, + allowExpand, + expanded, + maxLength, + playgroundInput, +}: PlaygroundConstraintAccordionViewHeaderProps) => { + const { classes: styles } = useStyles(); + + return ( +
+ + +
+ ); +}; 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/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundConstraintAccordionViewHeaderInfo.tsx new file mode 100644 index 0000000000..a36adfc171 --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundConstraintAccordionViewHeaderInfo.tsx @@ -0,0 +1,110 @@ +import { styled, Tooltip, Typography, useTheme } from '@mui/material'; +import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; +import { PlaygroundConstraintAccordionViewHeaderSingleValue } from '../PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue'; +import { PLaygroundConstraintAccordionViewHeaderMultipleValues } from '../PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues'; +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"; + +const StyledHeaderText = styled('span')(({ theme }) => ({ + display: '-webkit-box', + WebkitLineClamp: 3, + WebkitBoxOrient: 'vertical', + overflow: 'hidden', + maxWidth: '100px', + minWidth: '100px', + marginRight: '10px', + marginTop: 'auto', + marginBottom: 'auto', + wordBreak: 'break-word', + fontSize: theme.fontSizes.smallBody, + [theme.breakpoints.down(710)]: { + textAlign: 'center', + padding: theme.spacing(1, 0), + marginRight: 'inherit', + maxWidth: 'inherit', + }, +})); + +const StyledHeaderWrapper = styled('div')(({ theme }) => ({ + display: 'flex', + width: '100%', + justifyContent: 'space-between', + borderRadius: theme.spacing(1), +})); + +interface PlaygroundConstraintAccordionViewHeaderInfoProps { + constraint: PlaygroundConstraintSchema; + singleValue: boolean; + expanded: boolean; + allowExpand: (shouldExpand: boolean) => void; + result?: boolean; + maxLength?: number; + playgroundInput?: PlaygroundRequestSchema; +} + +export const PlaygroundConstraintAccordionViewHeaderInfo = ({ + constraint, + singleValue, + allowExpand, + expanded, + result, + playgroundInput, + maxLength = 112, +}: PlaygroundConstraintAccordionViewHeaderInfoProps) => { + const { classes: styles } = useStyles(); + const theme = useTheme(); + + const constraintExistsInContext = + Boolean(playgroundInput?.context[constraint.contextName]); + + return ( + +
+ + + {constraint.contextName} + + {playgroundInput?.context[ + constraint.contextName + ] || 'no value'} + + + + + + } + elseShow={ + + } + /> +
+ } + /> + + ); +}; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues.tsx new file mode 100644 index 0000000000..adeca0b91e --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues.tsx @@ -0,0 +1,85 @@ +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'; + +const StyledValuesSpan = styled('span')(({ theme }) => ({ + display: '-webkit-box', + WebkitLineClamp: 2, + WebkitBoxOrient: 'vertical', + overflow: 'hidden', + wordBreak: 'break-word', + fontSize: theme.fontSizes.smallBody, + margin: 'auto 0', + [theme.breakpoints.down(710)]: { + margin: theme.spacing(1, 0), + textAlign: 'center', + }, +})); + +interface ConstraintSingleValueProps { + constraint: PlaygroundConstraintSchema; + expanded: boolean; + maxLength: number; + allowExpand: (shouldExpand: boolean) => void; +} + +export const PLaygroundConstraintAccordionViewHeaderMultipleValues = ({ + constraint, + expanded, + allowExpand, + maxLength, +}: ConstraintSingleValueProps) => { + const { classes: styles } = useStyles(); + + const [expandable, setExpandable] = useState(false); + + const text = useMemo(() => { + return constraint?.values?.map(value => value).join(', '); + }, [constraint]); + + useEffect(() => { + if (text) { + allowExpand((text?.length ?? 0) > maxLength); + setExpandable((text?.length ?? 0) > maxLength); + } + }, [text, maxLength, allowExpand, setExpandable]); + + return ( +
+
+ + does not match any values{' '} + + } + /> + {text} + + {!expanded + ? `View all (${constraint?.values?.length})` + : 'View less'} +

+ } + /> +
+
+ ); +}; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue.tsx new file mode 100644 index 0000000000..9d7ac3b66e --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue.tsx @@ -0,0 +1,47 @@ +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', + [theme.breakpoints.down(710)]: { + margin: theme.spacing(1, 0), + }, +})); + +interface ConstraintSingleValueProps { + constraint: PlaygroundConstraintSchema; + allowExpand: (shouldExpand: boolean) => void; +} + +export const PlaygroundConstraintAccordionViewHeaderSingleValue = ({ + constraint, + allowExpand, +}: ConstraintSingleValueProps) => { + const { locationSettings } = useLocationSettings(); + const { classes: styles } = useStyles(); + + useEffect(() => { + allowExpand(false); + }, [allowExpand]); + + return ( +
+ + does not match any values{' '} + + } + /> + +
+ ); +}; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundResultConstraintAccordionView.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundResultConstraintAccordionView.tsx new file mode 100644 index 0000000000..95f2f516f6 --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundResultConstraintAccordionView.tsx @@ -0,0 +1,93 @@ +import { useState } from 'react'; +import { + Accordion, + AccordionSummary, + AccordionDetails, + SxProps, + Theme, + useTheme, +} from '@mui/material'; +import { PlaygroundConstraintAccordionViewHeader } from './PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeader'; +import { oneOf } from 'utils/oneOf'; +import { + dateOperators, + numOperators, + semVerOperators, +} from 'constants/operators'; +import { useStyles } from './PlaygroundConstraintAccordion.styles'; +import { + PlaygroundConstraintSchema, + PlaygroundRequestSchema, +} from 'hooks/api/actions/usePlayground/playground.model'; +import { + ConstraintAccordionViewBody +} from "component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody"; + +interface IConstraintAccordionViewProps { + constraint: PlaygroundConstraintSchema; + playgroundInput?: PlaygroundRequestSchema; + maxLength?: number; + sx?: SxProps; +} + +export const PlaygroundResultConstraintAccordionView = ({ + constraint, + sx = undefined, + maxLength, + playgroundInput, +}: IConstraintAccordionViewProps) => { + const { classes: styles } = useStyles(); + const [expandable, setExpandable] = useState(true); + const [expanded, setExpanded] = useState(false); + const theme = useTheme(); + + const singleValue = oneOf( + [...semVerOperators, ...numOperators, ...dateOperators], + constraint.operator + ); + const handleClick = () => { + if (expandable) { + setExpanded(!expanded); + } + }; + const backgroundColor = Boolean(playgroundInput) + ? !Boolean((constraint as PlaygroundConstraintSchema).result) + ? theme.palette.neutral.light + : 'inherit' + : 'inherit'; + + return ( + + + + + + + + + + ); +}; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx similarity index 72% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx index 888ac22e9c..d5f3c6d7b1 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx @@ -3,11 +3,13 @@ import { 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 { ConstraintAccordionView } from '../../../../../../../../common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView'; +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"; interface PlaygroundResultConstraintExecutionProps { constraints?: PlaygroundConstraintSchema[]; @@ -16,7 +18,7 @@ interface PlaygroundResultConstraintExecutionProps { } export const PlaygroundResultConstraintExecutionWrapper = styled('div')( - ({ theme }) => ({ + () => ({ width: '100%', display: 'flex', flexDirection: 'column', @@ -38,7 +40,7 @@ export const PlaygroundResultConstraintExecution = ({ condition={index > 0} show={} /> - ({ marginTop: theme.spacing(2), }, background: theme.palette.neutral.light, - marginBottom: '8px', + marginBottom: theme.spacing(1), })); const SegmentExecutionConstraintWrapper = styled('div')(({ theme }) => ({ @@ -55,7 +55,7 @@ const SegmentResultTextWrapper = styled('div')(({ theme }) => ({ display: 'inline-flex', justifyContent: 'center', marginRight: '12px', - gap: '8px', + gap: theme.spacing(1), })); export const PlaygroundResultSegmentExecution = ({ 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 4d111e1479..1ebb66b8e4 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 @@ -1,24 +1,17 @@ -import { ConditionallyRender } from '../../../../../../../../common/ConditionallyRender/ConditionallyRender'; -import { StrategySeparator } from '../../../../../../../../common/StrategySeparator/StrategySeparator'; +import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; +import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator'; import { Box, Chip, styled } from '@mui/material'; import { useStyles } from './PlaygroundResultStrategyExecution.styles'; import { PlaygroundRequestSchema, PlaygroundStrategySchema, -} from '../../../../../../../../../hooks/api/actions/usePlayground/playground.model'; -import useUiConfig from '../../../../../../../../../hooks/api/getters/useUiConfig/useUiConfig'; -import React, { Fragment } from 'react'; -import { PlaygroundResultConstraintExecution } from '../PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution'; -import { PlaygroundResultSegmentExecution } from '../PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution'; -import { - parseParameterNumber, - parseParameterString, - parseParameterStrings, -} from '../../../../../../../../../utils/parseParameter'; -import PercentageCircle from '../../../../../../../../common/PercentageCircle/PercentageCircle'; -import StringTruncator from '../../../../../../../../common/StringTruncator/StringTruncator'; -import { useStrategies } from '../../../../../../../../../hooks/api/getters/useStrategies/useStrategies'; -import { PlaygroundConstraintItem } from '../PlaygroundConstraintItem/PlaygroundConstraintItem'; +} 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'; +import { PlaygroundResultStrategyExecutionCustomStrategyParams } from './PlaygroundResultStrategyExecutionCustomStrategyParams./PlaygroundResultStrategyExecutionCustomStrategyParams'; interface PlaygroundResultStrategyExecutionProps { strategyResult: PlaygroundStrategySchema; @@ -31,7 +24,7 @@ const StyledStrategyExecutionWrapper = styled('div')(({ theme }) => ({ })); const StyledParamWrapper = styled('div')(({ theme }) => ({ - padding: theme.spacing(2, 1), + padding: theme.spacing(0, 0), })); export const PlaygroundResultStrategyExecution = ({ @@ -39,7 +32,7 @@ export const PlaygroundResultStrategyExecution = ({ input, }: PlaygroundResultStrategyExecutionProps) => { const { name, constraints, segments, parameters } = strategyResult; - const { strategies } = useStrategies(); + const { uiConfig } = useUiConfig(); const { classes: styles } = useStyles(); @@ -49,267 +42,6 @@ export const PlaygroundResultStrategyExecution = ({ return null; } - const definition = strategies.find(strategyDefinition => { - return strategyDefinition.name === strategyResult.name; - }); - - const renderParameters = () => { - return Object.keys(parameters).map(key => { - switch (key) { - case 'rollout': - case 'Rollout': - const percentage = parseParameterNumber(parameters[key]); - return ( - - - - -
- {' '} - of your base{' '} - {constraints.length > 0 - ? 'who match constraints' - : ''}{' '} - is included. -
- - ); - case 'userIds': - case 'UserIds': - const users = parseParameterStrings(parameters[key]); - return ( - - ); - case 'hostNames': - case 'HostNames': - const hosts = parseParameterStrings(parameters[key]); - console.log(input?.context); - console.log(key); - console.log(input?.context?.[key]); - console.log(hosts.includes(input?.context?.[key])); - return ( - - ); - case 'IPs': - const IPs = parseParameterStrings(parameters[key]); - return ( - - ); - case 'stickiness': - case 'groupId': - return null; - default: - 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) { - case 'list': - const values = parseParameterStrings( - strategyResult?.parameters[param.name] - ); - return ( - - - } - /> - - ); - case 'percentage': - return ( - -
- {' '} - of your base{' '} - {constraints?.length > 0 - ? 'who match constraints' - : ''}{' '} - is included. -
- - } - /> - - ); - case 'boolean': - return ( - -

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

- } - /> - } - /> - - ); - case 'string': - const value = parseParameterString( - strategyResult.parameters[param.name] - ); - return ( - -

- - - is set to - - -

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

- - - is set to - - -

- } - /> - - } - /> - ); - case 'default': - return null; - } - return null; - }); - }; - return ( - {renderParameters()} - {renderCustomStrategyParameters()} + + + + ); 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 new file mode 100644 index 0000000000..9520117a4d --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecutionCustomStrategyParams./PlaygroundResultStrategyExecutionCustomStrategyParams.tsx @@ -0,0 +1,181 @@ +import { + parseParameterNumber, + parseParameterString, + parseParameterStrings, +} from 'utils/parseParameter'; +import React, { Fragment } from 'react'; +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 { 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'; + +interface PlaygroundResultStrategyExecutionCustomStrategyProps { + parameters: { [key: string]: string }; + strategyName: string; + constraints: PlaygroundConstraintSchema[]; +} + +export const PlaygroundResultStrategyExecutionCustomStrategyParams = ({ + strategyName, + constraints, + parameters, +}: PlaygroundResultStrategyExecutionCustomStrategyProps) => { + const { classes: styles } = useStyles(); + const { strategies } = useStrategies(); + + const definition = strategies.find(strategyDefinition => { + return strategyDefinition.name === strategyName; + }); + + 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) { + case 'list': + const values = parseParameterStrings( + parameters[param.name] + ); + return ( + + + } + /> + + ); + case 'percentage': + return ( + +
+ {' '} + of your base{' '} + {constraints?.length > 0 + ? 'who match constraints' + : ''}{' '} + is included. +
+ + } + /> + + ); + case 'boolean': + return ( + +

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

+ } + /> + } + /> + + ); + case 'string': + 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; + } + return null; + }); + }; + + return <>{renderCustomStrategyParameters()}; +}; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecutionParameters/PlaygroundResultStrategyExecutionParameters.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecutionParameters/PlaygroundResultStrategyExecutionParameters.tsx new file mode 100644 index 0000000000..f31501b9aa --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecutionParameters/PlaygroundResultStrategyExecutionParameters.tsx @@ -0,0 +1,130 @@ +import { + parseParameterNumber, + parseParameterStrings, +} from 'utils/parseParameter'; +import { Box, Chip } from '@mui/material'; +import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle'; +import { PlaygroundConstraintItem } from '../PlaygroundConstraintItem/PlaygroundConstraintItem'; +import React from 'react'; +import { useStyles } from '../PlaygroundResultStrategyExecution.styles'; +import { + PlaygroundConstraintSchema, + PlaygroundRequestSchema, +} from 'hooks/api/actions/usePlayground/playground.model'; +import {getMappedParam} from "../helepers"; + +export interface PlaygroundResultStrategyExecutionParametersProps { + parameters: { [key: string]: string }; + constraints: PlaygroundConstraintSchema[]; + input?: PlaygroundRequestSchema; +} + +export const PlaygroundResultStrategyExecutionParameters = ({ + parameters, + constraints, + input, +}: PlaygroundResultStrategyExecutionParametersProps) => { + const { classes: styles } = useStyles(); + const renderParameters = () => { + return Object.keys(parameters).map(key => { + switch (key) { + case 'rollout': + case 'Rollout': + const percentage = parseParameterNumber(parameters[key]); + return ( + + + + +
+ {' '} + of your base{' '} + {constraints.length > 0 + ? 'who match constraints' + : ''}{' '} + is included. +
+ + ); + case 'userIds': + case 'UserIds': + const users = parseParameterStrings(parameters[key]); + return ( + + ); + case 'hostNames': + case 'HostNames': + const hosts = parseParameterStrings(parameters[key]); + return ( + + ); + case 'IPs': + const IPs = parseParameterStrings(parameters[key]); + return ( + + ); + case 'stickiness': + case 'groupId': + return null; + default: + return null; + } + }); + }; + + return <>{renderParameters()}; +}; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/helepers.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/helepers.ts new file mode 100644 index 0000000000..862e7178ba --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/helepers.ts @@ -0,0 +1,14 @@ +export const getMappedParam = (key: string) => { + switch (key) { + case 'userIds': + case 'UserIds': + return 'userId'; + case 'hostNames': + case 'HostNames': + return 'hostname'; + case 'IPs': + return 'remoteAddress' + default: + return key; + } +} 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 60c62e10c1..c5eea38425 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 @@ -8,8 +8,8 @@ import { Alert, styled, Typography } from '@mui/material'; import { PlaygroundResultFeatureStrategyItem } from './PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem'; const StyledAlertWrapper = styled('div')(({ theme }) => ({ - width: '100%', display: 'flex', + padding: `0, 4px`, flexDirection: 'column', borderRadius: theme.shape.borderRadiusMedium, border: `1px solid ${theme.palette.info.border}`, @@ -70,10 +70,10 @@ export const WrappedPlaygroundResultStrategyList = ({ input, }: WrappedPlaygroundResultStrategyListProps) => { return ( - + If environment would be enabled then this feature would be{' '} - {feature.isEnabled ? 'TRUE' : 'FALSE'} and the strategies would + {feature.strategies.result ? 'TRUE' : 'FALSE'} and the strategies would evaluate like this:{' '} diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx index 31cb8d7f35..2296124420 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx @@ -3,7 +3,7 @@ import { Box, styled } from '@mui/material'; import { PlaygroundResultChip } from '../PlaygroundResultChip/PlaygroundResultChip'; interface IFeatureStatusCellProps { - enabled: boolean | 'unevaluated'; + enabled: boolean; } const StyledCellBox = styled(Box)(({ theme }) => ({ @@ -22,10 +22,7 @@ export const FeatureStatusCell = ({ enabled }: IFeatureStatusCellProps) => { } * @memberof PlaygroundFeatureSchema */ - strategies: Array; + strategies: PlaygroundStrategyResultSchema; /** * Whether the feature is active and would be evaluated in the provided environment in a normal SDK context. * @type {boolean} @@ -76,7 +76,7 @@ export interface PlaygroundFeatureSchema { * @type {boolean | 'unevaluated'} * @memberof PlaygroundFeatureSchema */ - isEnabled: boolean | 'unevaluated'; + isEnabled: boolean; /** * * @type {PlaygroundFeatureSchemaVariant} @@ -200,6 +200,11 @@ export interface PlaygroundSegmentSchema { constraints: Array; } +export interface PlaygroundStrategyResultSchema { + result: boolean | "unknown"; + data?: Array +} + export interface PlaygroundStrategySchema { /** * The strategy's name. From e36cb753deaacc3d412db20e9fc2a635fa7bcd0e Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Thu, 4 Aug 2022 14:27:30 +0300 Subject: [PATCH 25/56] updated models to latest - refactoring --- .../ConstraintAccordionView.tsx | 2 -- .../StrategySeparator/StrategySeparator.tsx | 6 ++-- .../FeatureResultInfoPopoverCell.tsx | 2 +- .../PlaygroundResultFeatureDetails.styles.ts | 2 +- .../PlaygroundResultFeatureDetails.tsx | 30 ++++++++----------- .../PlaygroundResultFeatureStrategyList.tsx | 5 +++- .../PlaygroundResultFeatureStrategyItem.tsx | 8 +++-- ...laygroundConstraintAccordionViewHeader.tsx | 11 +++---- ...roundConstraintAccordionViewHeaderInfo.tsx | 17 ++++++----- ...raintAccordionViewHeaderMultipleValues.tsx | 10 +++---- ...nstraintAccordionViewHeaderSingleValue.tsx | 14 ++++----- ...laygroundResultConstraintAccordionView.tsx | 4 +-- .../PlaygroundResultConstraintExecution.tsx | 16 ++++------ .../PlaygroundResultSegmentExecution.tsx | 8 ++--- .../PlaygroundResultStrategyExecution.tsx | 2 +- ...tStrategyExecutionCustomStrategyParams.tsx | 3 +- ...roundResultStrategyExecutionParameters.tsx | 14 ++++++--- .../helepers.ts | 4 +-- .../playgroundResultStrategyLists.tsx | 8 ++--- .../FeatureStatusCell/FeatureStatusCell.tsx | 5 +--- .../actions/usePlayground/playground.model.ts | 4 +-- 21 files changed, 85 insertions(+), 90 deletions(-) diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx index 5d1e457159..bead8645b0 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx @@ -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], diff --git a/frontend/src/component/common/StrategySeparator/StrategySeparator.tsx b/frontend/src/component/common/StrategySeparator/StrategySeparator.tsx index 30d26b0d69..1b97041f76 100644 --- a/frontend/src/component/common/StrategySeparator/StrategySeparator.tsx +++ b/frontend/src/component/common/StrategySeparator/StrategySeparator.tsx @@ -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; } 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 }} > { setOpen(!open); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts index bb59b48574..d436675733 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts @@ -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), diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx index 98a5d45278..0718c2235a 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx @@ -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 = ({
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 8f89cbea18..5941210c61 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx @@ -20,7 +20,10 @@ export const PlaygroundResultFeatureStrategyList = ({ }: PlaygroundResultFeatureStrategyListProps) => { return ( 0} show={} /> - - + + {index + 1} 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/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeader.tsx index 85d40bf5a6..0887257ed8 100644 --- 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/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeader.tsx @@ -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; 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/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundConstraintAccordionViewHeaderInfo.tsx index a36adfc171..545af11a2e 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/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundConstraintAccordionViewHeaderInfo.tsx @@ -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 ( @@ -76,9 +78,8 @@ export const PlaygroundConstraintAccordionViewHeaderInfo = ({ : theme.palette.error.main } > - {playgroundInput?.context[ - constraint.contextName - ] || 'no value'} + {playgroundInput?.context[constraint.contextName] || + 'no value'} diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues.tsx index adeca0b91e..e59be08470 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues.tsx @@ -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', diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue.tsx index 9d7ac3b66e..1347541063 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue.tsx @@ -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', diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundResultConstraintAccordionView.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundResultConstraintAccordionView.tsx index 95f2f516f6..8d057d222b 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundResultConstraintAccordionView.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundResultConstraintAccordionView.tsx @@ -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; 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/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx index d5f3c6d7b1..cbfdcd486d 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/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx @@ -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, 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/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx index 619dad0130..362559e07b 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/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx @@ -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={} + show={} /> ))} 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 1ebb66b8e4..3f217b41fd 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 @@ -96,7 +96,7 @@ export const PlaygroundResultStrategyExecution = ({ constraints={constraints} input={input} /> - + @@ -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 } /> diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/helepers.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/helepers.ts index 862e7178ba..8a40068ec3 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/helepers.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/helepers.ts @@ -7,8 +7,8 @@ export const getMappedParam = (key: string) => { case 'HostNames': return 'hostname'; case 'IPs': - return 'remoteAddress' + return 'remoteAddress'; default: return key; } -} +}; 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 c5eea38425..b3913b2210 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 @@ -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 ( - + 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:{' '} { diff --git a/frontend/src/hooks/api/actions/usePlayground/playground.model.ts b/frontend/src/hooks/api/actions/usePlayground/playground.model.ts index 38307b932a..427d21a02c 100644 --- a/frontend/src/hooks/api/actions/usePlayground/playground.model.ts +++ b/frontend/src/hooks/api/actions/usePlayground/playground.model.ts @@ -201,8 +201,8 @@ export interface PlaygroundSegmentSchema { } export interface PlaygroundStrategyResultSchema { - result: boolean | "unknown"; - data?: Array + result: boolean | 'unknown'; + data?: Array; } export interface PlaygroundStrategySchema { From f97213f18835d2f48d58a9c644575efafb0f7aad Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Thu, 4 Aug 2022 14:30:21 +0300 Subject: [PATCH 26/56] PR --- .../ConstraintAccordionViewHeaderInfo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx index b158eaf3fa..5948188a4e 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx @@ -31,7 +31,7 @@ const StyledHeaderWrapper = styled('div')(({ theme }) => ({ display: 'flex', width: '100%', justifyContent: 'space-between', - borderRadius: '8px', + borderRadius: theme.spacing(1), })); interface ConstraintAccordionViewHeaderMetaInfoProps { From c1429755657bfbaeeedf0140bcdad0b75aac76b9 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Thu, 4 Aug 2022 14:34:33 +0300 Subject: [PATCH 27/56] PR --- ...raintAccordionViewHeaderMultipleValues.tsx | 20 ++----------------- ...nstraintAccordionViewHeaderSingleValue.tsx | 16 ++------------- 2 files changed, 4 insertions(+), 32 deletions(-) diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx index 14e3d06b79..9d063c1c94 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx @@ -1,10 +1,9 @@ import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender'; -import { styled, Typography } from '@mui/material'; +import { styled } from '@mui/material'; import React, { useEffect, useMemo, useState } from 'react'; import classnames from 'classnames'; import { IConstraint } from '../../../../../../interfaces/strategy'; import { useStyles } from '../../../ConstraintAccordion.styles'; -import { PlaygroundConstraintSchema } from 'hooks/api/actions/usePlayground/playground.model'; const StyledValuesSpan = styled('span')(({ theme }) => ({ display: '-webkit-box', @@ -21,7 +20,7 @@ const StyledValuesSpan = styled('span')(({ theme }) => ({ })); interface ConstraintSingleValueProps { - constraint: IConstraint | PlaygroundConstraintSchema; + constraint: IConstraint; expanded: boolean; maxLength: number; allowExpand: (shouldExpand: boolean) => void; @@ -51,21 +50,6 @@ export const ConstraintAccordionViewHeaderMultipleValues = ({ return (
- - does not match any values{' '} - - } - /> {text} ({ margin: 'auto 0', @@ -15,7 +13,7 @@ const StyledSingleValueChip = styled(Chip)(({ theme }) => ({ })); interface ConstraintSingleValueProps { - constraint: IConstraint | PlaygroundConstraintSchema; + constraint: IConstraint; allowExpand: (shouldExpand: boolean) => void; } @@ -32,16 +30,6 @@ export const ConstraintAccordionViewHeaderSingleValue = ({ return (
- - does not match any values{' '} - - } - /> From 6e190834ffd740b64bdc4f1349264db42fd60b34 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Thu, 4 Aug 2022 14:50:40 +0300 Subject: [PATCH 28/56] PR comments --- .../FeatureResultInfoPopoverCell.styles.ts | 2 +- .../FeatureResultInfoPopoverCell.tsx | 4 +- .../PlaygroundConstraintAccordion.styles.ts | 54 +------------------ ...roundConstraintAccordionViewHeaderInfo.tsx | 4 +- ...raintAccordionViewHeaderMultipleValues.tsx | 2 +- ...nstraintAccordionViewHeaderSingleValue.tsx | 2 +- 6 files changed, 7 insertions(+), 61 deletions(-) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/{ => PlaygroundConstraintAccordionViewHeaderInfo}/PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues.tsx (97%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/{ => PlaygroundConstraintAccordionViewHeaderInfo}/PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue.tsx (95%) 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 d1e652f2cd..7ca759f769 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts @@ -6,7 +6,7 @@ export const useStyles = makeStyles()(theme => ({ flexDirection: 'column', alignItems: 'flex-start', padding: theme.spacing(6), - width: '728px', + maxWidth: '728px', height: 'auto', overflowY: 'scroll', backgroundColor: theme.palette.tertiary.light, diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx index 7f457f1c18..b227487440 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx @@ -26,9 +26,7 @@ export const FeatureResultInfoPopoverCell = ({ const [open, setOpen] = useState(false); const { classes: styles } = useStyles(); const ref = useRef(null); - - console.log(feature); - + const togglePopover = () => { setOpen(!open); }; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordion.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordion.styles.ts index bceadae3df..f6092fcc94 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordion.styles.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordion.styles.ts @@ -18,7 +18,7 @@ export const useStyles = makeStyles()(theme => ({ }, accordion: { border: `1px solid ${theme.palette.grey[400]}`, - borderRadius: '8px', + borderRadius: theme.spacing(1), backgroundColor: '#fff', boxShadow: 'none', margin: 0, @@ -28,9 +28,6 @@ export const useStyles = makeStyles()(theme => ({ opacity: '0 !important', }, }, - accordionEdit: { - backgroundColor: '#F6F6FA', - }, headerMetaInfo: { display: 'flex', alignItems: 'stretch', @@ -39,7 +36,6 @@ export const useStyles = makeStyles()(theme => ({ headerContainer: { display: 'flex', alignItems: 'center', - width: '100%', [theme.breakpoints.down(710)]: { flexDirection: 'column', alignItems: 'center', @@ -77,19 +73,6 @@ export const useStyles = makeStyles()(theme => ({ paddingRight: '0.5rem', }, }, - editingBadge: { - borderRadius: theme.shape.borderRadiusExtraLarge, - padding: '0.25rem 0.5rem', - backgroundColor: '#635DC5', - color: '#fff', - marginLeft: 'auto', - fontSize: '0.9rem', - [theme.breakpoints.down(650)]: { - position: 'absolute', - right: 0, - top: '-10px', - }, - }, headerText: { maxWidth: '400px', fontSize: theme.fontSizes.smallBody, @@ -97,40 +80,12 @@ export const useStyles = makeStyles()(theme => ({ display: 'none', }, }, - selectContainer: { - display: 'flex', - alignItems: 'center', - [theme.breakpoints.down(770)]: { - flexDirection: 'column', - }, - }, - bottomSelect: { - [theme.breakpoints.down(770)]: { - marginTop: '1rem', - }, - display: 'inline-flex', - }, - headerSelect: { - marginRight: '1rem', - width: '200px', - [theme.breakpoints.between(1101, 1365)]: { - width: '170px', - marginRight: '8px', - }, - }, chip: { margin: '0 0.5rem 0.5rem 0', }, chipValue: { whiteSpace: 'pre', }, - headerActions: { - marginLeft: 'auto', - whiteSpace: 'nowrap', - [theme.breakpoints.down(710)]: { - display: 'none', - }, - }, accordionDetails: { borderTop: `1px dashed ${theme.palette.grey[300]}`, display: 'flex', @@ -148,11 +103,4 @@ export const useStyles = makeStyles()(theme => ({ textDecoration: 'underline', }, }, - settingsIcon: { - height: '32.5px', - width: '32.5px', - marginRight: '0.5rem', - fill: theme.palette.inactiveIcon, - }, - form: { padding: 0, margin: 0, width: '100%' }, })); 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/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundConstraintAccordionViewHeaderInfo.tsx index 545af11a2e..8a67730066 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/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundConstraintAccordionViewHeaderInfo.tsx @@ -1,7 +1,7 @@ import { styled, Tooltip, Typography, useTheme } from '@mui/material'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { PlaygroundConstraintAccordionViewHeaderSingleValue } from '../PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue'; -import { PLaygroundConstraintAccordionViewHeaderMultipleValues } from '../PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues'; +import { PlaygroundConstraintAccordionViewHeaderSingleValue } from './PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue'; +import { PLaygroundConstraintAccordionViewHeaderMultipleValues } from './PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues'; import React from 'react'; import { useStyles } from '../../PlaygroundConstraintAccordion.styles'; import { CancelOutlined } from '@mui/icons-material'; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/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/PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues.tsx index e59be08470..7342803411 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/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 '../../../PlaygroundConstraintAccordion.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/PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/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/PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue.tsx index 1347541063..82e706de36 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/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 '../../../PlaygroundConstraintAccordion.styles'; import { useLocationSettings } from 'hooks/useLocationSettings'; import { PlaygroundConstraintSchema } from 'hooks/api/actions/usePlayground/playground.model'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; From b32ab004c8d0d6e94fc43d695e543e9ed1e12411 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Thu, 4 Aug 2022 15:17:17 +0300 Subject: [PATCH 29/56] bug fix --- .../PlaygroundResultFeatureDetails.tsx | 14 +++++++++++++- .../PlaygroundResultFeatureDetails/helpers.ts | 19 +++++++++++++++++++ .../PlaygroundResultFeatureStrategyItem.tsx | 6 +++--- .../PlaygroundResultStrategyExecution.tsx | 2 +- 4 files changed, 36 insertions(+), 5 deletions(-) diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx index 0718c2235a..220d7f1419 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx @@ -8,7 +8,7 @@ import { useStyles } from './PlaygroundResultFeatureDetails.styles'; import { CloseOutlined } from '@mui/icons-material'; import React from 'react'; import { ConditionallyRender } from '../../../../../common/ConditionallyRender/ConditionallyRender'; -import { checkForEmptyValues } from './helpers'; +import { checkForEmptyValues, hasCustomStrategies } from './helpers'; interface PlaygroundFeatureResultDetailsProps { feature: PlaygroundFeatureSchema; @@ -41,6 +41,10 @@ export const PlaygroundResultFeatureDetails = ({ ? 'You did not provide a value for your context field in step 2 of the configuration' : undefined; + const customStrategiesTxt = hasCustomStrategies(feature) + ? `You have custom strategies. Custom strategies can't be evaluated and they will be set as Unevaluated` + : undefined; + const onCloseClick = onClose && ((event: React.SyntheticEvent) => { @@ -82,6 +86,14 @@ export const PlaygroundResultFeatureDetails = ({
} /> + + {customStrategiesTxt} +
+ } + /> ); }; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/helpers.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/helpers.ts index cbb3f5ad39..a8d01a6d77 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/helpers.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/helpers.ts @@ -1,3 +1,16 @@ +import { PlaygroundFeatureSchema } from '../../../../../../hooks/api/actions/usePlayground/playground.model'; + +export const DEFAULT_STRATEGIES = [ + 'default', + 'applicationHostname', + 'flexibleRollout', + 'gradualRolloutRandom', + 'gradualRolloutSessionId', + 'gradualRolloutUserId', + 'remoteAddress', + 'userWithId', +]; + export function checkForEmptyValues(object?: Object): boolean { if (object === undefined) { return true; @@ -6,3 +19,9 @@ export function checkForEmptyValues(object?: Object): boolean { v && typeof v === 'object' ? checkForEmptyValues(v) : v === null ); } + +export const hasCustomStrategies = (feature: PlaygroundFeatureSchema) => { + return feature.strategies?.data?.find(strategy => + DEFAULT_STRATEGIES.includes(strategy.name) + ); +}; 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 ca67490b70..24ecf11045 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 @@ -25,7 +25,7 @@ const StyledItemWrapper = styled('div')(({ theme }) => ({ display: 'flex', flexDirection: 'row', alignItems: 'center', - margin: theme.spacing(0.5), + margin: theme.spacing(0.5, 0), gap: theme.spacing(1), })); @@ -41,7 +41,7 @@ export const PlaygroundResultFeatureStrategyItem = ({ const Icon = getFeatureStrategyIcon(strategy.name); const label = result.evaluationStatus === 'incomplete' - ? 'Unknown' + ? 'Unevaluated' : result.enabled ? 'True' : 'False'; @@ -87,7 +87,7 @@ export const PlaygroundResultFeatureStrategyItem = ({ label={label} size={ result.evaluationStatus === 'incomplete' - ? 'medium' + ? 'large' : 'default' } /> 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 3f217b41fd..60cf11b028 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 @@ -20,7 +20,7 @@ interface PlaygroundResultStrategyExecutionProps { } const StyledStrategyExecutionWrapper = styled('div')(({ theme }) => ({ - padding: theme.spacing(1), + padding: theme.spacing(0), })); const StyledParamWrapper = styled('div')(({ theme }) => ({ From 22ab265db9fa082c51c0ed8255ba7cde0d3a3162 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Thu, 4 Aug 2022 15:17:32 +0300 Subject: [PATCH 30/56] bug fix --- .../FeatureResultInfoPopoverCell.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx index b227487440..2a03c11451 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx @@ -26,7 +26,7 @@ export const FeatureResultInfoPopoverCell = ({ const [open, setOpen] = useState(false); const { classes: styles } = useStyles(); const ref = useRef(null); - + const togglePopover = () => { setOpen(!open); }; From e3fcfb1318832a8b6a9d8825d557ad044f0867f8 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Thu, 4 Aug 2022 15:31:09 +0300 Subject: [PATCH 31/56] improvements --- .../PlaygroundResultFeatureDetails.styles.ts | 2 +- .../PlaygroundResultFeatureDetails/helpers.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts index d436675733..947511f64e 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts @@ -17,7 +17,7 @@ export const useStyles = makeStyles()(theme => ({ margin: theme.spacing(1, 0), }, descriptionRow: { - marginBottom: theme.spacing(2), + margin: theme.spacing(1, 0.5), }, name: { fontWeight: 600, diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/helpers.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/helpers.ts index a8d01a6d77..8a0c94aa35 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/helpers.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/helpers.ts @@ -22,6 +22,6 @@ export function checkForEmptyValues(object?: Object): boolean { export const hasCustomStrategies = (feature: PlaygroundFeatureSchema) => { return feature.strategies?.data?.find(strategy => - DEFAULT_STRATEGIES.includes(strategy.name) + !DEFAULT_STRATEGIES.includes(strategy.name) ); }; From 44f77c46c2ddef3e46ac3f36b5aa19823f682bec Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Thu, 4 Aug 2022 15:49:41 +0300 Subject: [PATCH 32/56] fmt --- .../PlaygroundResultFeatureDetails/helpers.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/helpers.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/helpers.ts index 8a0c94aa35..ea2fe2c6fa 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/helpers.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/helpers.ts @@ -21,7 +21,7 @@ export function checkForEmptyValues(object?: Object): boolean { } export const hasCustomStrategies = (feature: PlaygroundFeatureSchema) => { - return feature.strategies?.data?.find(strategy => - !DEFAULT_STRATEGIES.includes(strategy.name) + return feature.strategies?.data?.find( + strategy => !DEFAULT_STRATEGIES.includes(strategy.name) ); }; From 3c5c855fc533751815587615e2b39be0588d3ed1 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Thu, 4 Aug 2022 16:25:45 +0300 Subject: [PATCH 33/56] custom strategies adjustments --- .../PlaygroundResultFeatureDetails.tsx | 10 ++++++++-- .../PlaygroundResultFeatureDetails/helpers.ts | 6 ++++++ 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx index 220d7f1419..5eee35de8f 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx @@ -8,7 +8,11 @@ import { useStyles } from './PlaygroundResultFeatureDetails.styles'; import { CloseOutlined } from '@mui/icons-material'; import React from 'react'; import { ConditionallyRender } from '../../../../../common/ConditionallyRender/ConditionallyRender'; -import { checkForEmptyValues, hasCustomStrategies } from './helpers'; +import { + checkForEmptyValues, + hasCustomStrategies, + hasOnlyCustomStrategies, +} from './helpers'; interface PlaygroundFeatureResultDetailsProps { feature: PlaygroundFeatureSchema; @@ -31,7 +35,9 @@ export const PlaygroundResultFeatureDetails = ({ ? 'at least one strategy is True' : !feature.isEnabledInCurrentEnvironment ? 'the environment is disabled' - : 'all strategies are False'; + : hasOnlyCustomStrategies(feature) + ? 'all strategies are Unevaluated' + : 'all strategies are False or Uneavaluated'; const color = feature.isEnabled ? theme.palette.success.main diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/helpers.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/helpers.ts index ea2fe2c6fa..04d60d53bd 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/helpers.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/helpers.ts @@ -25,3 +25,9 @@ export const hasCustomStrategies = (feature: PlaygroundFeatureSchema) => { strategy => !DEFAULT_STRATEGIES.includes(strategy.name) ); }; + +export const hasOnlyCustomStrategies = (feature: PlaygroundFeatureSchema) => { + return !feature.strategies?.data?.find(strategy => + DEFAULT_STRATEGIES.includes(strategy.name) + ); +}; From 8785c47ab4f738440936edd5561674975b67853c Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Thu, 4 Aug 2022 16:53:08 +0300 Subject: [PATCH 34/56] improvement --- .../PlaygroundResultSegmentExecution.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx index 362559e07b..ab788c5c84 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/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution.tsx @@ -101,8 +101,8 @@ export const PlaygroundResultSegmentExecution = ({ Date: Fri, 5 Aug 2022 12:16:51 +0300 Subject: [PATCH 35/56] PR comments --- .../PlaygroundResultFeatureDetails.styles.ts | 6 +++--- .../PlaygroundResultFeatureDetails.tsx | 4 ++-- ...undConstraintAccordionViewHeaderMultipleValues.tsx | 4 ++-- ...groundConstraintAccordionViewHeaderSingleValue.tsx | 4 ++-- .../PlaygroundResultStrategyExecution/helepers.ts | 11 ++++------- 5 files changed, 13 insertions(+), 16 deletions(-) diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts index 947511f64e..307018fdc8 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts @@ -10,8 +10,8 @@ export const useStyles = makeStyles()(theme => ({ display: 'inline-flex', alignItems: 'flex-start', justifyContent: 'center', - gap: '12px', - marginTop: '12px', + gap: theme.spacing(1.5), + marginTop: theme.spacing(1.5), }, alertRow: { margin: theme.spacing(1, 0), @@ -21,7 +21,7 @@ export const useStyles = makeStyles()(theme => ({ }, name: { fontWeight: 600, - padding: '4px', + padding: theme.spacing(0.5), }, icon: { textAlign: 'right', diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx index 5eee35de8f..f49242d74e 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx @@ -36,8 +36,8 @@ export const PlaygroundResultFeatureDetails = ({ : !feature.isEnabledInCurrentEnvironment ? 'the environment is disabled' : hasOnlyCustomStrategies(feature) - ? 'all strategies are Unevaluated' - : 'all strategies are False or Uneavaluated'; + ? 'no strategies could be fully evaluated' + : 'all strategies are either False or could not be fully evaluated'; const color = feature.isEnabled ? theme.palette.success.main 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/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues.tsx index 7342803411..73e11367e1 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/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues.tsx @@ -19,7 +19,7 @@ const StyledValuesSpan = styled('span')(({ theme }) => ({ }, })); -interface ConstraintSingleValueProps { +interface PLaygroundConstraintAccordionViewHeaderMultipleValueProps { constraint: PlaygroundConstraintSchema; expanded: boolean; maxLength: number; @@ -31,7 +31,7 @@ export const PLaygroundConstraintAccordionViewHeaderMultipleValues = ({ expanded, allowExpand, maxLength, -}: ConstraintSingleValueProps) => { +}: PLaygroundConstraintAccordionViewHeaderMultipleValueProps) => { const { classes: styles } = useStyles(); const [expandable, setExpandable] = useState(false); 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/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue.tsx index 82e706de36..ac2bad077e 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/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue.tsx @@ -13,7 +13,7 @@ const StyledSingleValueChip = styled(Chip)(({ theme }) => ({ }, })); -interface ConstraintSingleValueProps { +interface PlaygroundConstraintAccordionViewHeaderSingleValueProps { constraint: PlaygroundConstraintSchema; allowExpand: (shouldExpand: boolean) => void; } @@ -21,7 +21,7 @@ interface ConstraintSingleValueProps { export const PlaygroundConstraintAccordionViewHeaderSingleValue = ({ constraint, allowExpand, -}: ConstraintSingleValueProps) => { +}: PlaygroundConstraintAccordionViewHeaderSingleValueProps) => { const { locationSettings } = useLocationSettings(); const { classes: styles } = useStyles(); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/helepers.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/helepers.ts index 8a40068ec3..7e741a8f52 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/helepers.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/helepers.ts @@ -1,13 +1,10 @@ export const getMappedParam = (key: string) => { - switch (key) { - case 'userIds': - case 'UserIds': + switch (key.toUpperCase()) { + case 'USERIDS': return 'userId'; - case 'hostNames': - case 'HostNames': - return 'hostname'; - case 'IPs': + case 'IPS': return 'remoteAddress'; + case 'HOSTNAMES': default: return key; } From c7507c6887bca51c3f0cf3bf8a9c2bd21a2bb89e Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Fri, 5 Aug 2022 12:20:35 +0300 Subject: [PATCH 36/56] PR comments --- .../ConstraintAccordionViewHeaderInfo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx index 5948188a4e..e5d4de766a 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx @@ -47,7 +47,7 @@ export const ConstraintAccordionViewHeaderInfo = ({ singleValue, allowExpand, expanded, - maxLength = 112, + maxLength = 112, //The max number of characters in the values text for NOT allowing expansion }: ConstraintAccordionViewHeaderMetaInfoProps) => { const { classes: styles } = useStyles(); From ff33308d8e044d036391a893b92cca471f6ba4c5 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Mon, 8 Aug 2022 10:42:45 +0300 Subject: [PATCH 37/56] Parameters Bug fix --- .../PlaygroundParameterItem.tsx} | 10 +- .../PlaygroundParametertem.styles.ts} | 0 .../PlaygroundResultConstraintExecution.tsx | 2 +- .../PlaygroundResultStrategyExecution.tsx | 3 +- ...tStrategyExecutionCustomStrategyParams.tsx | 126 ++++++------------ ...roundResultStrategyExecutionParameters.tsx | 10 +- .../{helepers.ts => helpers.ts} | 0 7 files changed, 55 insertions(+), 96 deletions(-) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/{PlaygroundConstraintItem/PlaygroundConstraintItem.tsx => PlaygroundParamteterItem/PlaygroundParameterItem.tsx} (91%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/{PlaygroundConstraintItem/PlaygroundConstraintItem.styles.ts => PlaygroundParamteterItem/PlaygroundParametertem.styles.ts} (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/{helepers.ts => helpers.ts} (100%) diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundConstraintItem/PlaygroundConstraintItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundParamteterItem/PlaygroundParameterItem.tsx similarity index 91% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundConstraintItem/PlaygroundConstraintItem.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundParamteterItem/PlaygroundParameterItem.tsx index d1f6d90399..eddd9b67c9 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundConstraintItem/PlaygroundConstraintItem.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundParamteterItem/PlaygroundParameterItem.tsx @@ -1,18 +1,18 @@ import { Chip, Typography, useTheme } from '@mui/material'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { useStyles } from './PlaygroundConstraintItem.styles'; +import { useStyles } from './PlaygroundParametertem.styles'; import StringTruncator from 'component/common/StringTruncator/StringTruncator'; import { CancelOutlined } from '@mui/icons-material'; import classnames from 'classnames'; interface IConstraintItemProps { - value: string[]; + value: Array; text: string; input?: string | number | boolean | 'no value'; showReason?: boolean; } -export const PlaygroundConstraintItem = ({ +export const PlaygroundParameterItem = ({ value, text, input, @@ -56,13 +56,13 @@ export const PlaygroundConstraintItem = ({ {value.length > 1 ? `${text}s` : text} will get access.

- {value.map((v: string) => ( + {value.map((v: string | number) => ( } diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundConstraintItem/PlaygroundConstraintItem.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundParamteterItem/PlaygroundParametertem.styles.ts similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundConstraintItem/PlaygroundConstraintItem.styles.ts rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundParamteterItem/PlaygroundParametertem.styles.ts 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/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx index cbfdcd486d..3e4b7c71a8 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/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx @@ -33,7 +33,7 @@ export const PlaygroundResultConstraintExecution = ({ {constraints?.map((constraint, index) => ( 0} + condition={index > 0 && constraints?.length > 1} show={} /> 0); + const hasParameters = Object.keys(parameters).length === 0; if (!parameters) { return null; @@ -68,7 +69,7 @@ export const PlaygroundResultStrategyExecution = ({ /> 0 + constraints && constraints.length > 0 && !hasParameters )} 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/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecutionCustomStrategyParams./PlaygroundResultStrategyExecutionCustomStrategyParams.tsx index da1a731c01..08670d8872 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,14 +4,12 @@ import { parseParameterStrings, } from 'utils/parseParameter'; import React, { Fragment } from 'react'; -import { PlaygroundConstraintItem } from '../PlaygroundConstraintItem/PlaygroundConstraintItem'; +import { PlaygroundParameterItem } from '../PlaygroundParamteterItem/PlaygroundParameterItem'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator'; -import { Chip } from '@mui/material'; +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 { @@ -25,15 +23,16 @@ 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) { @@ -43,7 +42,7 @@ export const PlaygroundResultStrategyExecutionCustomStrategyParams = ({ ); return ( - @@ -81,93 +80,52 @@ export const PlaygroundResultStrategyExecutionCustomStrategyParams = ({ ); 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; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecutionParameters/PlaygroundResultStrategyExecutionParameters.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecutionParameters/PlaygroundResultStrategyExecutionParameters.tsx index 0f85b338b0..a0582fa107 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecutionParameters/PlaygroundResultStrategyExecutionParameters.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecutionParameters/PlaygroundResultStrategyExecutionParameters.tsx @@ -4,14 +4,14 @@ import { } from 'utils/parseParameter'; import { Box, Chip } from '@mui/material'; import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle'; -import { PlaygroundConstraintItem } from '../PlaygroundConstraintItem/PlaygroundConstraintItem'; +import { PlaygroundParameterItem } from '../PlaygroundParamteterItem/PlaygroundParameterItem'; import React from 'react'; import { useStyles } from '../PlaygroundResultStrategyExecution.styles'; import { PlaygroundConstraintSchema, PlaygroundRequestSchema, } from 'hooks/api/actions/usePlayground/playground.model'; -import { getMappedParam } from '../helepers'; +import { getMappedParam } from '../helpers'; export interface PlaygroundResultStrategyExecutionParametersProps { parameters: { [key: string]: string }; @@ -62,7 +62,7 @@ export const PlaygroundResultStrategyExecutionParameters = ({ case 'UserIds': const users = parseParameterStrings(parameters[key]); return ( - Date: Mon, 8 Aug 2022 11:38:36 +0300 Subject: [PATCH 38/56] Parameters Bug fix --- .../PlaygroundResultStrategyExecution.tsx | 2 +- .../PlaygroundResultStrategyExecutionCustomStrategyParams.tsx | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/{PlaygroundResultStrategyExecutionCustomStrategyParams. => PlaygroundResultStrategyExecutionCustomStrategyParams}/PlaygroundResultStrategyExecutionCustomStrategyParams.tsx (100%) 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 910e5e93aa..d88c484775 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 @@ -11,7 +11,7 @@ import React from 'react'; import { PlaygroundResultConstraintExecution } from './PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution'; import { PlaygroundResultSegmentExecution } from './PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution'; import { PlaygroundResultStrategyExecutionParameters } from './PlaygroundResultStrategyExecutionParameters/PlaygroundResultStrategyExecutionParameters'; -import { PlaygroundResultStrategyExecutionCustomStrategyParams } from './PlaygroundResultStrategyExecutionCustomStrategyParams./PlaygroundResultStrategyExecutionCustomStrategyParams'; +import { PlaygroundResultStrategyExecutionCustomStrategyParams } from './PlaygroundResultStrategyExecutionCustomStrategyParams/PlaygroundResultStrategyExecutionCustomStrategyParams'; interface PlaygroundResultStrategyExecutionProps { strategyResult: PlaygroundStrategySchema; 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 similarity index 100% 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/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecutionCustomStrategyParams/PlaygroundResultStrategyExecutionCustomStrategyParams.tsx From e75f03b8f26e715991d220141427da01e31a2114 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Mon, 8 Aug 2022 12:16:53 +0300 Subject: [PATCH 39/56] fmt fix --- .../PlaygroundResultStrategyExecution.tsx | 4 +++- ...laygroundResultStrategyExecutionCustomStrategyParams.tsx | 6 ++++-- 2 files changed, 7 insertions(+), 3 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 d88c484775..c2d8ae0b75 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 @@ -69,7 +69,9 @@ export const PlaygroundResultStrategyExecution = ({ /> 0 && !hasParameters + constraints && + constraints.length > 0 && + !hasParameters )} 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/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecutionCustomStrategyParams/PlaygroundResultStrategyExecutionCustomStrategyParams.tsx index 08670d8872..1b2243c6ec 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 @@ -7,7 +7,7 @@ import React, { Fragment } from 'react'; import { PlaygroundParameterItem } from '../PlaygroundParamteterItem/PlaygroundParameterItem'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator'; -import {Chip} from '@mui/material'; +import { Chip } from '@mui/material'; import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle'; import { PlaygroundConstraintSchema } from 'hooks/api/actions/usePlayground/playground.model'; import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies'; @@ -96,7 +96,9 @@ export const PlaygroundResultStrategyExecutionCustomStrategyParams = ({ ); case 'string': - const value = parseParameterString(parameters[param.name]) ?? 'no value'; + const value = + parseParameterString(parameters[param.name]) ?? + 'no value'; return ( Date: Fri, 5 Aug 2022 12:03:49 +0200 Subject: [PATCH 40/56] 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 41/56] 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 42/56] 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 43/56] 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 44/56] 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 45/56] 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; From f057bbfd61c07bbfda5623cc44c4e4cf0c00fad7 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Mon, 8 Aug 2022 13:46:11 +0300 Subject: [PATCH 46/56] style fix --- .../PlaygroundResultFeatureStrategyItem.tsx | 4 ++-- .../PlaygroundResultStrategyExecution.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) 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..6b82bc524c 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 @@ -63,11 +63,11 @@ export const PlaygroundResultFeatureStrategyItem = ({ condition={index > 0} show={} /> - + {index + 1} 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..43f2fb0bd3 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 @@ -36,7 +36,7 @@ export const PlaygroundResultStrategyExecution = ({ const { uiConfig } = useUiConfig(); const { classes: styles } = useStyles(); - const hasConstraints = Boolean(constraints && constraints.length > 0); + const hasConstraints = Boolean(constraints && constraints?.length > 0); const hasParameters = Object.keys(parameters).length === 0; if (!parameters) { From 90685cef22504e080cbb41580ba9effd4457dba8 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Mon, 8 Aug 2022 13:53:28 +0300 Subject: [PATCH 47/56] improvements --- .../FeatureDetails.styles.ts} | 0 .../FeatureDetails.tsx} | 4 ++-- .../helpers.ts | 0 .../FeatureResultInfoPopoverCell.tsx | 6 +++--- .../PlaygroundResultFeatureStrategyList.tsx | 2 +- .../StrategyItem/FeatureStrategyItem.styles.ts | 0 .../StrategyList}/StrategyItem/FeatureStrategyItem.tsx | 2 -- .../ConstraintAccordion.styles.ts | 0 .../ConstraintAccordionView.tsx | 4 ++-- .../ConstraintAccordionViewHeader.tsx} | 6 +++--- .../ConstraintAccordionViewHeaderInfo.tsx} | 10 +++++----- .../PLaygroundMultipleValues.tsx} | 2 +- .../PlaygroundSingleValue/PlaygroundSingleValue.tsx} | 2 +- .../ConstraintExecution/ConstraintExecution.tsx | 0 .../CustomStrategyParams/CustomStrategyParams.tsx | 0 .../PlaygroundParameterItem.tsx | 0 .../PlaygroundParametertem.styles.ts | 0 .../SegmentExecution/SegmentExecution.styles.ts | 0 .../SegmentExecution/SegmentExecution.tsx | 0 .../StrategyExecution/StrategyExecution.styles.ts | 0 .../StrategyExecution/StrategyExecution.tsx | 0 .../StrategyExecutionParameters.tsx | 0 .../StrategyItem/StrategyExecution/helpers.ts | 0 .../StrategyList}/playgroundResultStrategyLists.tsx | 0 24 files changed, 18 insertions(+), 20 deletions(-) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts => FeatureDetails/FeatureDetails.styles.ts} (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx => FeatureDetails/FeatureDetails.tsx} (96%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{PlaygroundResultFeatureDetails => FeatureDetails}/helpers.ts (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{PlaygroundResultFeatureStrategyList => FeatureStrategyList}/PlaygroundResultFeatureStrategyList.tsx (92%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList => FeatureStrategyList/StrategyList}/StrategyItem/FeatureStrategyItem.styles.ts (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList => FeatureStrategyList/StrategyList}/StrategyItem/FeatureStrategyItem.tsx (98%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList => FeatureStrategyList/StrategyList}/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordion.styles.ts (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList => FeatureStrategyList/StrategyList}/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx (93%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeader.tsx => FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx} (81%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundConstraintAccordionViewHeaderInfo.tsx => FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx} (86%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues.tsx => FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundMultipleValues/PLaygroundMultipleValues.tsx} (97%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue.tsx => FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundSingleValue/PlaygroundSingleValue.tsx} (95%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList => FeatureStrategyList/StrategyList}/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintExecution.tsx (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList => FeatureStrategyList/StrategyList}/StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList => FeatureStrategyList/StrategyList}/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList => FeatureStrategyList/StrategyList}/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParametertem.styles.ts (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList => FeatureStrategyList/StrategyList}/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.styles.ts (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList => FeatureStrategyList/StrategyList}/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.tsx (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList => FeatureStrategyList/StrategyList}/StrategyItem/StrategyExecution/StrategyExecution.styles.ts (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList => FeatureStrategyList/StrategyList}/StrategyItem/StrategyExecution/StrategyExecution.tsx (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList => FeatureStrategyList/StrategyList}/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList => FeatureStrategyList/StrategyList}/StrategyItem/StrategyExecution/helpers.ts (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/{PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList => FeatureStrategyList/StrategyList}/playgroundResultStrategyLists.tsx (100%) diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.styles.ts similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.styles.ts diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx similarity index 96% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx index f49242d74e..8ad0e66a4e 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx @@ -4,7 +4,7 @@ import { } from '../../../../../../hooks/api/actions/usePlayground/playground.model'; import { Alert, IconButton, Typography, useTheme } from '@mui/material'; import { PlaygroundResultChip } from '../../PlaygroundResultChip/PlaygroundResultChip'; -import { useStyles } from './PlaygroundResultFeatureDetails.styles'; +import { useStyles } from './FeatureDetails.styles'; import { CloseOutlined } from '@mui/icons-material'; import React from 'react'; import { ConditionallyRender } from '../../../../../common/ConditionallyRender/ConditionallyRender'; @@ -19,7 +19,7 @@ interface PlaygroundFeatureResultDetailsProps { input?: PlaygroundRequestSchema; onClose: () => void; } -export const PlaygroundResultFeatureDetails = ({ +export const FeatureDetails = ({ feature, input, onClose, diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/helpers.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/helpers.ts similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/helpers.ts rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/helpers.ts diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx index 2a03c11451..484a44b9cb 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx @@ -6,8 +6,8 @@ import { IconButton, Popover, styled } from '@mui/material'; import { InfoOutlined } from '@mui/icons-material'; import React, { useRef, useState } from 'react'; import { useStyles } from './FeatureResultInfoPopoverCell.styles'; -import { PlaygroundResultFeatureDetails } from './PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails'; -import { PlaygroundResultFeatureStrategyList } from './PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList'; +import { FeatureDetails } from './FeatureDetails/FeatureDetails'; +import { PlaygroundResultFeatureStrategyList } from './FeatureStrategyList/PlaygroundResultFeatureStrategyList'; interface FeatureResultInfoPopoverCellProps { feature: PlaygroundFeatureSchema; @@ -54,7 +54,7 @@ export const FeatureResultInfoPopoverCell = ({ }} classes={{ paper: styles.popoverPaper }} > - setOpen(false)} diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx similarity index 92% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx index afb51096ef..a5e14f4561 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx @@ -1,4 +1,4 @@ -import { PlaygroundResultStrategyLists } from './PlaygroundResultStrategyList/playgroundResultStrategyLists'; +import { PlaygroundResultStrategyLists } from './StrategyList/playgroundResultStrategyLists'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { PlaygroundFeatureSchema, diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/FeatureStrategyItem.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.styles.ts similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/FeatureStrategyItem.styles.ts rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.styles.ts diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/FeatureStrategyItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx similarity index 98% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/FeatureStrategyItem.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx index 2c65134319..78ad5983ed 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/FeatureStrategyItem.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx @@ -13,14 +13,12 @@ interface IFeatureStrategyItemProps { strategy: PlaygroundStrategySchema; index: number; input?: PlaygroundRequestSchema; - compact: boolean; } export const FeatureStrategyItem = ({ strategy, input, index, - compact, }: IFeatureStrategyItemProps) => { const { result } = strategy; const { classes: styles } = useStyles(); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordion.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordion.styles.ts similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordion.styles.ts rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordion.styles.ts diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx similarity index 93% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx index 9f665e2fdb..5f03e62580 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx @@ -7,7 +7,7 @@ import { Theme, useTheme, } from '@mui/material'; -import { PlaygroundConstraintAccordionViewHeader } from './PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeader'; +import { ConstraintAccordionViewHeader } from './ConstraintAccordionViewHeader/ConstraintAccordionViewHeader'; import { oneOf } from 'utils/oneOf'; import { dateOperators, @@ -73,7 +73,7 @@ export const ConstraintAccordionView: VFC = ({ backgroundColor: backgroundColor, }} > - - } elseShow={ - void; } -export const PLaygroundConstraintAccordionViewHeaderMultipleValues = ({ +export const PLaygroundMultipleValues = ({ constraint, expanded, allowExpand, diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundSingleValue/PlaygroundSingleValue.tsx similarity index 95% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundSingleValue/PlaygroundSingleValue.tsx index 09c3fea837..9d40f9653e 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundSingleValue/PlaygroundSingleValue.tsx @@ -18,7 +18,7 @@ interface PlaygroundConstraintAccordionViewHeaderSingleValueProps { allowExpand: (shouldExpand: boolean) => void; } -export const PlaygroundConstraintAccordionViewHeaderSingleValue = ({ +export const PlaygroundSingleValue = ({ constraint, allowExpand, }: PlaygroundConstraintAccordionViewHeaderSingleValueProps) => { diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintExecution.tsx similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintExecution.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintExecution.tsx 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/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParametertem.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParametertem.styles.ts similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParametertem.styles.ts rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParametertem.styles.ts diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.styles.ts similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.styles.ts rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.styles.ts diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.tsx similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.tsx diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/StrategyExecution.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.styles.ts similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/StrategyExecution.styles.ts rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.styles.ts diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/helpers.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/helpers.ts similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/helpers.ts rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/helpers.ts diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/playgroundResultStrategyLists.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/playgroundResultStrategyLists.tsx similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/playgroundResultStrategyLists.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/playgroundResultStrategyLists.tsx From eb7d7e59d50f27e23561f4fbeb1239f119f5d818 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Mon, 8 Aug 2022 14:00:49 +0300 Subject: [PATCH 48/56] improvements --- .../StrategyList/playgroundResultStrategyLists.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/playgroundResultStrategyLists.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/playgroundResultStrategyLists.tsx index 1b48a207f5..54aa129237 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/playgroundResultStrategyLists.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/playgroundResultStrategyLists.tsx @@ -56,7 +56,6 @@ export const PlaygroundResultStrategyLists = ({ key={strategy.id} strategy={strategy} index={index} - compact={compact} input={input} /> From 66287948dde557e8a08f150c8e33fc7883df2f19 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Mon, 8 Aug 2022 14:11:20 +0300 Subject: [PATCH 49/56] bug fix --- .../StrategyList/playgroundResultStrategyLists.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/playgroundResultStrategyLists.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/playgroundResultStrategyLists.tsx index 54aa129237..f9c99e5790 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/playgroundResultStrategyLists.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/playgroundResultStrategyLists.tsx @@ -29,13 +29,11 @@ const StyledAlert = styled(Alert)(() => ({ interface PlaygroundResultStrategyListProps { strategies: PlaygroundStrategySchema[]; input?: PlaygroundRequestSchema; - compact?: boolean; } export const PlaygroundResultStrategyLists = ({ strategies, input, - compact = false, }: PlaygroundResultStrategyListProps) => ( 0} @@ -87,7 +85,6 @@ export const WrappedPlaygroundResultStrategyList = ({ From 18afc34f859f795501128d6915b6bce8e74acf8a Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Mon, 8 Aug 2022 16:21:23 +0300 Subject: [PATCH 50/56] fix build --- .../admin/groups/GroupsList/GroupsList.tsx | 4 ++-- .../FeatureDetails/FeatureDetails.tsx | 21 ++++++++++++------- .../FeatureDetails/helpers.ts | 2 +- .../ConstraintAccordion.styles.ts | 2 +- .../PlaygroundParameterItem.tsx | 2 +- frontend/src/hooks/useHiddenColumns.ts | 2 +- 6 files changed, 19 insertions(+), 14 deletions(-) diff --git a/frontend/src/component/admin/groups/GroupsList/GroupsList.tsx b/frontend/src/component/admin/groups/GroupsList/GroupsList.tsx index 8c4b063bff..64c555d9f6 100644 --- a/frontend/src/component/admin/groups/GroupsList/GroupsList.tsx +++ b/frontend/src/component/admin/groups/GroupsList/GroupsList.tsx @@ -1,12 +1,12 @@ import { useEffect, useMemo, useState, VFC } from 'react'; import { useGroups } from 'hooks/api/getters/useGroups/useGroups'; -import { Link, useNavigate, useSearchParams } from 'react-router-dom'; +import { useNavigate, useSearchParams } from 'react-router-dom'; import { IGroup } from 'interfaces/group'; import { PageContent } from 'component/common/PageContent/PageContent'; import { PageHeader } from 'component/common/PageHeader/PageHeader'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { Search } from 'component/common/Search/Search'; -import { Button, Grid, useMediaQuery } from '@mui/material'; +import { Grid, useMediaQuery } from '@mui/material'; import theme from 'themes/theme'; import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext'; import { TablePlaceholder } from 'component/common/Table'; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx index 8ad0e66a4e..29afaaedfd 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx @@ -7,7 +7,7 @@ import { PlaygroundResultChip } from '../../PlaygroundResultChip/PlaygroundResul import { useStyles } from './FeatureDetails.styles'; import { CloseOutlined } from '@mui/icons-material'; import React from 'react'; -import { ConditionallyRender } from '../../../../../common/ConditionallyRender/ConditionallyRender'; +import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { checkForEmptyValues, hasCustomStrategies, @@ -31,13 +31,18 @@ export const FeatureDetails = ({ ? `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' - : hasOnlyCustomStrategies(feature) - ? 'no strategies could be fully evaluated' - : 'all strategies are either False or could not be fully evaluated'; + const reason = (() => { + if (feature.isEnabled) + return 'at least one strategy is True'; + + if (!feature.isEnabledInCurrentEnvironment) + return 'the environment is disabled'; + + if (hasOnlyCustomStrategies(feature)) + return 'no strategies could be fully evaluated' + + return 'all strategies are either False or could not be fully evaluated'; + })() const color = feature.isEnabled ? theme.palette.success.main diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/helpers.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/helpers.ts index 04d60d53bd..9c249d0c04 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/helpers.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/helpers.ts @@ -1,4 +1,4 @@ -import { PlaygroundFeatureSchema } from '../../../../../../hooks/api/actions/usePlayground/playground.model'; +import { PlaygroundFeatureSchema } from 'hooks/api/actions/usePlayground/playground.model'; export const DEFAULT_STRATEGIES = [ 'default', diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordion.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordion.styles.ts index f6092fcc94..64e00cc2f9 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordion.styles.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordion.styles.ts @@ -17,7 +17,7 @@ export const useStyles = makeStyles()(theme => ({ fill: '#fff', }, accordion: { - border: `1px solid ${theme.palette.grey[400]}`, + border: `1px solid ${theme.palette.dividerAlternative}`, borderRadius: theme.spacing(1), backgroundColor: '#fff', boxShadow: 'none', diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx index eddd9b67c9..0653054755 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx @@ -32,7 +32,7 @@ export const PlaygroundParameterItem = ({ )} > - {input} + {`${input}`}
{ const hidden = condition ? hiddenColumns : []; setHiddenColumns(hidden); - }, [setHiddenColumns, condition]); + }, [setHiddenColumns, hiddenColumns, condition]); }; export default useHiddenColumns; From fa0e75d22a3cb41a25aabd413dd554507f9705c4 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Mon, 8 Aug 2022 16:24:14 +0300 Subject: [PATCH 51/56] PR comment --- .../FeatureDetails/FeatureDetails.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx index 29afaaedfd..8c61eb84bd 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx @@ -1,7 +1,7 @@ import { PlaygroundFeatureSchema, PlaygroundRequestSchema, -} from '../../../../../../hooks/api/actions/usePlayground/playground.model'; +} from 'hooks/api/actions/usePlayground/playground.model'; import { Alert, IconButton, Typography, useTheme } from '@mui/material'; import { PlaygroundResultChip } from '../../PlaygroundResultChip/PlaygroundResultChip'; import { useStyles } from './FeatureDetails.styles'; @@ -32,17 +32,16 @@ export const FeatureDetails = ({ : `This feature toggle is False in ${input?.environment} because `; const reason = (() => { - if (feature.isEnabled) - return 'at least one strategy is True'; + if (feature.isEnabled) return 'at least one strategy is True'; if (!feature.isEnabledInCurrentEnvironment) return 'the environment is disabled'; if (hasOnlyCustomStrategies(feature)) - return 'no strategies could be fully evaluated' + return 'no strategies could be fully evaluated'; return 'all strategies are either False or could not be fully evaluated'; - })() + })(); const color = feature.isEnabled ? theme.palette.success.main From d0a04348f36eb96e9c5beeef8780a57b652b8114 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Tue, 9 Aug 2022 10:08:44 +0300 Subject: [PATCH 52/56] Update src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx Co-authored-by: Thomas Heartman --- .../FeatureDetails/FeatureDetails.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx index 8c61eb84bd..2cf2d2b0f2 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx @@ -52,7 +52,7 @@ export const FeatureDetails = ({ : undefined; const customStrategiesTxt = hasCustomStrategies(feature) - ? `You have custom strategies. Custom strategies can't be evaluated and they will be set as Unevaluated` + ? `This feature uses custom strategies. Custom strategies can't be evaluated, so they will be marked as Unevaluated` : undefined; const onCloseClick = From 69d6a1f186f3571254d4c7c76b2d5a6aac24de21 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Tue, 9 Aug 2022 10:10:45 +0300 Subject: [PATCH 53/56] PR comments --- .../StrategyExecutionParameters.tsx | 14 ++------------ .../StrategyItem/StrategyExecution/helpers.ts | 1 - 2 files changed, 2 insertions(+), 13 deletions(-) diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx index dd3b814388..640b25b83b 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx @@ -88,18 +88,8 @@ export const PlaygroundResultStrategyExecutionParameters = ({ key={key} value={hosts} text={'host'} - input={ - Boolean(input?.context?.[getMappedParam(key)]) - ? input?.context?.[getMappedParam(key)] - : 'no value' - } - showReason={ - Boolean(input?.context?.[getMappedParam(key)]) - ? !hosts.includes( - input?.context?.[getMappedParam(key)] - ) - : undefined - } + input={'no value'} + showReason={undefined} /> ); case 'IPs': diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/helpers.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/helpers.ts index 7e741a8f52..5b4a8c34b5 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/helpers.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/helpers.ts @@ -4,7 +4,6 @@ export const getMappedParam = (key: string) => { return 'userId'; case 'IPS': return 'remoteAddress'; - case 'HOSTNAMES': default: return key; } From a4c6ae20775ac213ba48978c19908857dbac30a6 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Tue, 9 Aug 2022 17:41:43 +0300 Subject: [PATCH 54/56] Added unknown evaluation state to table Moved playground.model.ts to Playground folder --- .../playground/Playground/Playground.tsx | 2 +- .../ContextBanner/ContextBanner.tsx | 2 +- .../FeatureDetails/FeatureDetails.tsx | 2 +- .../FeatureDetails/helpers.ts | 2 +- .../FeatureResultInfoPopoverCell.tsx | 2 +- .../PlaygroundResultFeatureStrategyList.tsx | 2 +- .../StrategyItem/FeatureStrategyItem.tsx | 2 +- .../ConstraintAccordionView.tsx | 2 +- .../ConstraintAccordionViewHeader.tsx | 2 +- .../ConstraintAccordionViewHeaderInfo.tsx | 2 +- .../PLaygroundMultipleValues.tsx | 2 +- .../PlaygroundSingleValue.tsx | 2 +- .../ConstraintExecution.tsx | 2 +- .../CustomStrategyParams.tsx | 2 +- .../SegmentExecution/SegmentExecution.tsx | 2 +- .../StrategyExecution/StrategyExecution.tsx | 2 +- .../StrategyExecutionParameters.tsx | 2 +- .../playgroundResultStrategyLists.tsx | 2 +- .../FeatureStatusCell/FeatureStatusCell.tsx | 19 ++++++++++++++++--- .../PlaygroundResultsTable.tsx | 6 ++++-- .../interfaces}/playground.model.ts | 0 .../playground/Playground/playground.utils.ts | 2 +- .../actions/usePlayground/usePlayground.ts | 2 +- 23 files changed, 40 insertions(+), 25 deletions(-) rename frontend/src/{hooks/api/actions/usePlayground => component/playground/Playground/interfaces}/playground.model.ts (100%) diff --git a/frontend/src/component/playground/Playground/Playground.tsx b/frontend/src/component/playground/Playground/Playground.tsx index b01bee5e10..03001ecb66 100644 --- a/frontend/src/component/playground/Playground/Playground.tsx +++ b/frontend/src/component/playground/Playground/Playground.tsx @@ -8,7 +8,7 @@ import { formatUnknownError } from 'utils/formatUnknownError'; import { PlaygroundResultsTable } from './PlaygroundResultsTable/PlaygroundResultsTable'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { usePlaygroundApi } from 'hooks/api/actions/usePlayground/usePlayground'; -import { PlaygroundResponseSchema } from 'hooks/api/actions/usePlayground/playground.model'; +import { PlaygroundResponseSchema } from 'component/playground/Playground/interfaces/playground.model'; import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments'; import { PlaygroundForm } from './PlaygroundForm/PlaygroundForm'; import { diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/ContextBanner/ContextBanner.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/ContextBanner/ContextBanner.tsx index 00383eb524..e5839ec9d9 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/ContextBanner/ContextBanner.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/ContextBanner/ContextBanner.tsx @@ -1,6 +1,6 @@ import { colors } from 'themes/colors'; import { Alert, styled } from '@mui/material'; -import { SdkContextSchema } from 'hooks/api/actions/usePlayground/playground.model'; +import { SdkContextSchema } from 'component/playground/Playground/interfaces/playground.model'; interface IContextBannerProps { environment: string; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx index 2cf2d2b0f2..96a7168ee8 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx @@ -1,7 +1,7 @@ import { PlaygroundFeatureSchema, PlaygroundRequestSchema, -} from 'hooks/api/actions/usePlayground/playground.model'; +} from 'component/playground/Playground/interfaces/playground.model'; import { Alert, IconButton, Typography, useTheme } from '@mui/material'; import { PlaygroundResultChip } from '../../PlaygroundResultChip/PlaygroundResultChip'; import { useStyles } from './FeatureDetails.styles'; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/helpers.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/helpers.ts index 9c249d0c04..07d59f5891 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/helpers.ts +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/helpers.ts @@ -1,4 +1,4 @@ -import { PlaygroundFeatureSchema } from 'hooks/api/actions/usePlayground/playground.model'; +import { PlaygroundFeatureSchema } from 'component/playground/Playground/interfaces/playground.model'; export const DEFAULT_STRATEGIES = [ 'default', diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx index 484a44b9cb..8051b2d86f 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx @@ -1,7 +1,7 @@ import { PlaygroundFeatureSchema, PlaygroundRequestSchema, -} from 'hooks/api/actions/usePlayground/playground.model'; +} from 'component/playground/Playground/interfaces/playground.model'; import { IconButton, Popover, styled } from '@mui/material'; import { InfoOutlined } from '@mui/icons-material'; import React, { useRef, useState } from 'react'; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx index a5e14f4561..d80dd2a9cb 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx @@ -3,7 +3,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit import { PlaygroundFeatureSchema, PlaygroundRequestSchema, -} from 'hooks/api/actions/usePlayground/playground.model'; +} from 'component/playground/Playground/interfaces/playground.model'; import { Alert } from '@mui/material'; interface PlaygroundResultFeatureStrategyListProps { diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx index 78ad5983ed..35eccbc480 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx @@ -3,7 +3,7 @@ import { PlaygroundResultChip } from '../../../../PlaygroundResultChip/Playgroun import { PlaygroundStrategySchema, PlaygroundRequestSchema, -} from 'hooks/api/actions/usePlayground/playground.model'; +} from 'component/playground/Playground/interfaces/playground.model'; import { StrategyExecution } from './StrategyExecution/StrategyExecution'; import { useStyles } from './FeatureStrategyItem.styles'; import { StrategyItemContainer } from 'component/common/StrategyItemContainer/StrategyItemContainer'; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx index 5f03e62580..c55a819b92 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx @@ -18,7 +18,7 @@ import { useStyles } from './ConstraintAccordion.styles'; import { PlaygroundConstraintSchema, PlaygroundRequestSchema, -} from 'hooks/api/actions/usePlayground/playground.model'; +} from 'component/playground/Playground/interfaces/playground.model'; import { ConstraintAccordionViewBody } from 'component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody'; interface IConstraintAccordionViewProps { diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx index acee55bdaa..ee3d96c529 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx @@ -4,7 +4,7 @@ import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccord import { PlaygroundConstraintSchema, PlaygroundRequestSchema, -} from 'hooks/api/actions/usePlayground/playground.model'; +} from 'component/playground/Playground/interfaces/playground.model'; interface PlaygroundConstraintAccordionViewHeaderProps { constraint: PlaygroundConstraintSchema; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx index 190bd9d86d..00aacc463a 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx @@ -8,7 +8,7 @@ import { CancelOutlined } from '@mui/icons-material'; import { PlaygroundConstraintSchema, PlaygroundRequestSchema, -} from 'hooks/api/actions/usePlayground/playground.model'; +} from 'component/playground/Playground/interfaces/playground.model'; import { ConstraintViewHeaderOperator } from 'component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator/ConstraintViewHeaderOperator'; const StyledHeaderText = styled('span')(({ theme }) => ({ diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundMultipleValues/PLaygroundMultipleValues.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundMultipleValues/PLaygroundMultipleValues.tsx index fb99be598f..9ec547c758 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundMultipleValues/PLaygroundMultipleValues.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundMultipleValues/PLaygroundMultipleValues.tsx @@ -3,7 +3,7 @@ import { styled, Typography } from '@mui/material'; import React, { useEffect, useMemo, useState } from 'react'; import classnames from 'classnames'; import { useStyles } from '../../../ConstraintAccordion.styles'; -import { PlaygroundConstraintSchema } from 'hooks/api/actions/usePlayground/playground.model'; +import { PlaygroundConstraintSchema } from 'component/playground/Playground/interfaces/playground.model'; const StyledValuesSpan = styled('span')(({ theme }) => ({ display: '-webkit-box', diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundSingleValue/PlaygroundSingleValue.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundSingleValue/PlaygroundSingleValue.tsx index 9d40f9653e..7c1dabdd6e 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundSingleValue/PlaygroundSingleValue.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundSingleValue/PlaygroundSingleValue.tsx @@ -3,7 +3,7 @@ import { Chip, styled, Typography } from '@mui/material'; import { formatConstraintValue } from 'utils/formatConstraintValue'; import { useStyles } from '../../../ConstraintAccordion.styles'; import { useLocationSettings } from 'hooks/useLocationSettings'; -import { PlaygroundConstraintSchema } from 'hooks/api/actions/usePlayground/playground.model'; +import { PlaygroundConstraintSchema } from 'component/playground/Playground/interfaces/playground.model'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; const StyledSingleValueChip = styled(Chip)(({ theme }) => ({ diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintExecution.tsx index 1f8f51de34..5b74d5af3d 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintExecution.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintExecution.tsx @@ -2,7 +2,7 @@ import { Fragment, VFC } from 'react'; import { PlaygroundConstraintSchema, PlaygroundRequestSchema, -} from 'hooks/api/actions/usePlayground/playground.model'; +} from 'component/playground/Playground/interfaces/playground.model'; import { objectId } from 'utils/objectId'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator'; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx index b2cf842ad7..fcfcf2d568 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx @@ -9,7 +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 { PlaygroundConstraintSchema } from 'hooks/api/actions/usePlayground/playground.model'; +import { PlaygroundConstraintSchema } from 'component/playground/Playground/interfaces/playground.model'; import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies'; interface ICustomStrategyProps { diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.tsx index 6e176415ba..50dfd47536 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.tsx @@ -2,7 +2,7 @@ import { VFC } from 'react'; import { PlaygroundSegmentSchema, PlaygroundRequestSchema, -} from 'hooks/api/actions/usePlayground/playground.model'; +} from 'component/playground/Playground/interfaces/playground.model'; import { ConstraintExecution } from '../ConstraintExecution/ConstraintExecution'; import { CancelOutlined, DonutLarge } from '@mui/icons-material'; import { Link } from 'react-router-dom'; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx index e774df130a..c167572aa5 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx @@ -6,7 +6,7 @@ import { useStyles } from './StrategyExecution.styles'; import { PlaygroundRequestSchema, PlaygroundStrategySchema, -} from 'hooks/api/actions/usePlayground/playground.model'; +} from 'component/playground/Playground/interfaces/playground.model'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import { ConstraintExecution } from './ConstraintExecution/ConstraintExecution'; import { SegmentExecution } from './SegmentExecution/SegmentExecution'; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx index 640b25b83b..2a283cff32 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx @@ -10,7 +10,7 @@ import { useStyles } from '../StrategyExecution.styles'; import { PlaygroundConstraintSchema, PlaygroundRequestSchema, -} from 'hooks/api/actions/usePlayground/playground.model'; +} from 'component/playground/Playground/interfaces/playground.model'; import { getMappedParam } from '../helpers'; export interface PlaygroundResultStrategyExecutionParametersProps { diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/playgroundResultStrategyLists.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/playgroundResultStrategyLists.tsx index f9c99e5790..e260116ba4 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/playgroundResultStrategyLists.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/playgroundResultStrategyLists.tsx @@ -4,7 +4,7 @@ import { PlaygroundFeatureSchema, PlaygroundStrategySchema, PlaygroundRequestSchema, -} from 'hooks/api/actions/usePlayground/playground.model'; +} from 'component/playground/Playground/interfaces/playground.model'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { FeatureStrategyItem } from './StrategyItem/FeatureStrategyItem'; import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator'; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx index 09db8a7dac..efffa73f3a 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx @@ -1,9 +1,10 @@ import React from 'react'; import { Box, styled } from '@mui/material'; import { PlaygroundResultChip } from '../PlaygroundResultChip/PlaygroundResultChip'; +import { PlaygroundFeatureSchema } from '../../interfaces/playground.model'; interface IFeatureStatusCellProps { - enabled: boolean; + feature: PlaygroundFeatureSchema; } const StyledCellBox = styled(Box)(({ theme }) => ({ @@ -16,13 +17,25 @@ const StyledChipWrapper = styled(Box)(() => ({ marginRight: 'auto', })); -export const FeatureStatusCell = ({ enabled }: IFeatureStatusCellProps) => { +export const FeatureStatusCell = ({ feature }: IFeatureStatusCellProps) => { + const enabled = feature.isEnabled + ? true + : feature.strategies.result === false + ? false + : 'unknown'; + const label = feature.isEnabled + ? 'True' + : feature.strategies.result === false + ? 'False' + : 'Unknown'; return ( diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx index f8270c36ec..fd5db14d1a 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx @@ -22,7 +22,7 @@ import { FeatureStatusCell } from './FeatureStatusCell/FeatureStatusCell'; import { PlaygroundFeatureSchema, PlaygroundRequestSchema, -} from 'hooks/api/actions/usePlayground/playground.model'; +} from 'component/playground/Playground/interfaces/playground.model'; import { Box, Typography, useMediaQuery, useTheme } from '@mui/material'; import useLoading from 'hooks/useLoading'; import { VariantCell } from './VariantCell/VariantCell'; @@ -106,7 +106,9 @@ export const PlaygroundResultsTable = ({ accessor: 'isEnabled', filterName: 'isEnabled', filterParsing: (value: boolean) => (value ? 'true' : 'false'), - Cell: ({ value }: any) => , + Cell: ({ row }: any) => ( + + ), sortType: 'boolean', sortInverted: true, }, diff --git a/frontend/src/hooks/api/actions/usePlayground/playground.model.ts b/frontend/src/component/playground/Playground/interfaces/playground.model.ts similarity index 100% rename from frontend/src/hooks/api/actions/usePlayground/playground.model.ts rename to frontend/src/component/playground/Playground/interfaces/playground.model.ts diff --git a/frontend/src/component/playground/Playground/playground.utils.ts b/frontend/src/component/playground/Playground/playground.utils.ts index f27aa6d483..0012253351 100644 --- a/frontend/src/component/playground/Playground/playground.utils.ts +++ b/frontend/src/component/playground/Playground/playground.utils.ts @@ -1,4 +1,4 @@ -import { PlaygroundResponseSchema } from 'hooks/api/actions/usePlayground/playground.model'; +import { PlaygroundResponseSchema } from 'component/playground/Playground/interfaces/playground.model'; import { IEnvironment } from 'interfaces/environments'; export const resolveProjects = ( diff --git a/frontend/src/hooks/api/actions/usePlayground/usePlayground.ts b/frontend/src/hooks/api/actions/usePlayground/usePlayground.ts index fd23b83358..7d2d26a849 100644 --- a/frontend/src/hooks/api/actions/usePlayground/usePlayground.ts +++ b/frontend/src/hooks/api/actions/usePlayground/usePlayground.ts @@ -2,7 +2,7 @@ import useAPI from '../useApi/useApi'; import { PlaygroundRequestSchema, PlaygroundResponseSchema, -} from './playground.model'; +} from '../../../../component/playground/Playground/interfaces/playground.model'; export const usePlaygroundApi = () => { const { makeRequest, createRequest, errors, loading } = useAPI({ From 96818bd339d26d22d1f16fdc6d4da476eeb2799b Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Tue, 9 Aug 2022 17:56:45 +0300 Subject: [PATCH 55/56] added comment to playground model file --- .../Playground/interfaces/playground.model.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/frontend/src/component/playground/Playground/interfaces/playground.model.ts b/frontend/src/component/playground/Playground/interfaces/playground.model.ts index 427d21a02c..f4ff53d276 100644 --- a/frontend/src/component/playground/Playground/interfaces/playground.model.ts +++ b/frontend/src/component/playground/Playground/interfaces/playground.model.ts @@ -1,3 +1,13 @@ +/** + * + * 09/08/2022 + * This was copied from the openapi-generator generated files and slightly modified + * because of malformed generation of `anyOf`, `oneOf` + * + * https://github.com/OpenAPITools/openapi-generator/issues/12256 + */ + + import { VariantSchema } from 'openapi'; import { Operator } from 'constants/operators'; From af27e0bd5e46dbbd70db10beb16c0076e05a3bc7 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Tue, 9 Aug 2022 18:02:09 +0300 Subject: [PATCH 56/56] added comment to playground model file --- .../playground/Playground/interfaces/playground.model.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/component/playground/Playground/interfaces/playground.model.ts b/frontend/src/component/playground/Playground/interfaces/playground.model.ts index f4ff53d276..32bdd40b0e 100644 --- a/frontend/src/component/playground/Playground/interfaces/playground.model.ts +++ b/frontend/src/component/playground/Playground/interfaces/playground.model.ts @@ -7,7 +7,6 @@ * https://github.com/OpenAPITools/openapi-generator/issues/12256 */ - import { VariantSchema } from 'openapi'; import { Operator } from 'constants/operators';