diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.styles.ts new file mode 100644 index 0000000000..e8cd9b1c93 --- /dev/null +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.styles.ts @@ -0,0 +1,12 @@ +import { makeStyles } from '@material-ui/core/styles'; + +export const useStyles = makeStyles(theme => ({ + valueContainer: { + display: 'flex', + alignItems: 'center', + gap: '1ch', + }, + valueSeparator: { + color: theme.palette.grey[700], + }, +})); diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.tsx index 224032e135..aa777845ad 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.tsx @@ -9,6 +9,7 @@ import StringTruncator from 'component/common/StringTruncator/StringTruncator'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import { FeatureOverviewSegment } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment'; import { ConstraintAccordionList } from 'component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList'; +import { useStyles } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.styles'; interface IFeatureOverviewExecutionProps { parameters: IParameter; @@ -22,6 +23,7 @@ const FeatureOverviewExecution = ({ constraints = [], strategy, }: IFeatureOverviewExecutionProps) => { + const styles = useStyles(); const { strategies } = useStrategies(); const { uiConfig } = useUiConfig(); @@ -165,20 +167,27 @@ const FeatureOverviewExecution = ({ ); case 'string': - const numValue = strategy.parameters[param.name]; + const value = strategy.parameters[param.name]; return ( -

+

{' '} - is set to {numValue} + /> + + is set to + +

); case 'number': - const value = strategy.parameters[param.name]; + const number = strategy.parameters[param.name]; return ( -

+

{' '} - is set to {value} + /> + + is set to + +

1 ? `${text}s` : text} will get access.

- {value.map((userId: string) => ( + {value.map((v: string) => ( + } className={styles.chip} /> ))} diff --git a/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx b/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx index 52fd2fc1d8..4c08472e6f 100644 --- a/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx +++ b/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx @@ -3,6 +3,7 @@ import { Button, Chip, TextField, Typography } from '@material-ui/core'; import { Add } from '@material-ui/icons'; import ConditionallyRender from 'component/common/ConditionallyRender'; import { ADD_TO_STRATEGY_INPUT_LIST, STRATEGY_INPUT_LIST } from 'utils/testIds'; +import StringTruncator from 'component/common/StringTruncator/StringTruncator'; interface IStrategyInputList { name: string; @@ -80,7 +81,13 @@ const StrategyInputList = ({ {list.map((entryValue, index) => ( + } style={{ marginRight: '3px' }} onDelete={disabled ? undefined : () => onClose(index)} title="Remove value"