Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-06-27 01:19:00 +02:00
Code Issues Projects Releases Wiki Activity

fix: truncate long parameter values (#928)

Browse Source 
* refactor: improve parameter variable names

* fix: truncate long parameter values

* refactor: remove extra spacing

Co-authored-by: sighphyre <liquidwicked64@gmail.com>
This commit is contained in:
olav 2022-04-29 15:06:36 +02:00 committed by GitHub
parent 774157b8d7
commit fd44844f15
4 changed files with 56 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.styles.ts Normal file
View File

@ -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],
},
}));

36
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.tsx
View File

@ -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 = ({
</Fragment>
);
case 'string':
const numValue = strategy.parameters[param.name];
const value = strategy.parameters[param.name];
return (
<ConditionallyRender
condition={numValue !== undefined}
condition={value !== undefined}
key={param.name}
show={
<>
<p>
<p className={styles.valueContainer}>
<StringTruncator
maxWidth="150"
maxLength={15}
text={param.name}
/>{' '}
is set to {numValue}
/>
<span className={styles.valueSeparator}>
is set to
</span>
<StringTruncator
maxWidth="300"
text={value}
maxLength={50}
/>
</p>
<ConditionallyRender
condition={notLastItem}
@ -189,20 +198,27 @@ const FeatureOverviewExecution = ({
/>
);
case 'number':
const value = strategy.parameters[param.name];
const number = strategy.parameters[param.name];
return (
<ConditionallyRender
condition={value}
condition={number !== undefined}
key={param.name}
show={
<>
<p>
<p className={styles.valueContainer}>
<StringTruncator
maxLength={15}
maxWidth="150"
text={param.name}
/>{' '}
is set to {value}
/>
<span className={styles.valueSeparator}>
is set to
</span>
<StringTruncator
maxWidth="300"
text={String(number)}
maxLength={50}
/>
</p>
<ConditionallyRender
condition={notLastItem}

13
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecutionChips/FeatureOverviewExecutionChips.tsx
View File

@ -1,6 +1,7 @@
import { Chip } from '@material-ui/core';
import ConditionallyRender from 'component/common/ConditionallyRender';
import { useStyles } from './FeatureOverviewExecutionChips.styles';
import StringTruncator from 'component/common/StringTruncator/StringTruncator';
interface IFeatureOverviewExecutionChipsProps {
value: string[];
@ -24,10 +25,16 @@ const FeatureOverviewExecutionChips = ({
{value.length > 1 ? `${text}s` : text} will get
access.
</p>
{value.map((userId: string) => (
{value.map((v: string) => (
<Chip
key={userId}
label={userId}
key={v}
label={
<StringTruncator
maxWidth="300"
text={v}
maxLength={50}
/>
}
className={styles.chip}
/>
))}

9
frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx
View File

@ -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) => (
<Chip
key={index + entryValue}
label={entryValue}
label={
<StringTruncator
maxWidth="300"
text={entryValue}
maxLength={50}
/>
}
style={{ marginRight: '3px' }}
onDelete={disabled ? undefined : () => onClose(index)}
title="Remove value"