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

refactor: improve spacing between strategy form parameters (#1188)

Browse Source
This commit is contained in:
olav 2022-08-02 14:08:07 +02:00 committed by GitHub
parent f44b169ca7
commit ee3f5be522
3 changed files with 63 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.styles.ts
View File

@ -1,13 +1,15 @@
import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
container: {
display: 'grid',
gap: theme.spacing(4),
},
helpText: {
color: 'rgba(0, 0, 0, 0.54)',
color: theme.palette.text.secondary,
fontSize: theme.fontSizes.smallerBody,
lineHeight: '14px',
margin: '0.5rem 0',
},
generalSection: {
margin: '1rem 0',
margin: 0,
marginTop: theme.spacing(1),
},
}));

11
frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.tsx
View File

@ -53,14 +53,13 @@ const GeneralStrategy = ({
}
return (
<>
<div className={styles.container}>
{strategyDefinition.parameters.map(
({ name, type, description, required }) => {
if (type === 'percentage') {
const value = parseParameterNumber(parameters[name]);
return (
<div key={name}>
<br />
<RolloutSlider
name={name}
onChange={onChangePercentage.bind(
@ -103,7 +102,7 @@ const GeneralStrategy = ({
value.length > 0 ? !regex.test(value) : false;
return (
<div key={name} className={styles.generalSection}>
<div key={name}>
<TextField
error={error}
helperText={
@ -132,7 +131,7 @@ const GeneralStrategy = ({
} else if (type === 'boolean') {
const value = parseParameterString(parameters[name]);
return (
<div key={name} style={{ padding: '20px 0' }}>
<div key={name}>
<Tooltip
title={description}
placement="right-end"
@ -158,7 +157,7 @@ const GeneralStrategy = ({
} else {
const value = parseParameterString(parameters[name]);
return (
<div key={name} className={styles.generalSection}>
<div key={name}>
<TextField
rows={1}
placeholder=""
@ -185,7 +184,7 @@ const GeneralStrategy = ({
}
}
)}
</>
</div>
);
};

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

@ -1,5 +1,12 @@
import React, { ChangeEvent, useState } from 'react';
import { Button, Chip, TextField, Typography } from '@mui/material';
import {
Button,
Chip,
TextField,
Typography,
styled,
TextFieldProps,
} from '@mui/material';
import { Add } from '@mui/icons-material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { ADD_TO_STRATEGY_INPUT_LIST, STRATEGY_INPUT_LIST } from 'utils/testIds';
@ -12,6 +19,21 @@ interface IStrategyInputList {
disabled: boolean;
}
const Container = styled('div')(({ theme }) => ({
display: 'grid',
gap: theme.spacing(1),
}));
const ChipsList = styled('div')(({ theme }) => ({
display: 'flex',
gap: theme.spacing(1),
}));
const InputContainer = styled('div')(({ theme }) => ({
display: 'flex',
gap: theme.spacing(1),
}));
const StrategyInputList = ({
name,
list,
@ -61,49 +83,42 @@ const StrategyInputList = ({
);
};
// @ts-expect-error
const onChange = e => {
setInput(e.currentTarget.value);
const onChange: TextFieldProps['onChange'] = event => {
setInput(event.currentTarget.value);
};
return (
<div>
<Container>
<Typography variant="subtitle2" component="h2">
List of {name}
</Typography>
<div
style={{
display: 'flex',
flexWrap: 'wrap',
margin: '10px 0',
}}
>
{list.map((entryValue, index) => (
<Chip
key={index + entryValue}
label={
<StringTruncator
maxWidth="300"
text={entryValue}
maxLength={50}
<ConditionallyRender
condition={list.length > 0}
show={
<ChipsList>
{list.map((entryValue, index) => (
<Chip
key={index + entryValue}
label={
<StringTruncator
maxWidth="300"
text={entryValue}
maxLength={50}
/>
}
onDelete={
disabled ? undefined : () => onClose(index)
}
title="Remove value"
/>
}
style={{ marginRight: '3px' }}
onDelete={disabled ? undefined : () => onClose(index)}
title="Remove value"
/>
))}
</div>
))}
</ChipsList>
}
/>
<ConditionallyRender
condition={!disabled}
show={
<div
style={{
display: 'flex',
alignItems: 'center',
gap: '1rem',
}}
>
<InputContainer>
<TextField
name={`input_field`}
variant="outlined"
@ -128,10 +143,10 @@ const StrategyInputList = ({
>
Add
</Button>
</div>
</InputContainer>
}
/>
</div>
</Container>
);
};