Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-09 00:18:00 +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'; import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({ export const useStyles = makeStyles()(theme => ({
container: {
display: 'grid',
gap: theme.spacing(4),
},
helpText: { helpText: {
color: 'rgba(0, 0, 0, 0.54)', color: theme.palette.text.secondary,
fontSize: theme.fontSizes.smallerBody, fontSize: theme.fontSizes.smallerBody,
lineHeight: '14px', lineHeight: '14px',
margin: '0.5rem 0', margin: 0,
}, marginTop: theme.spacing(1),
generalSection: {
margin: '1rem 0',
}, },
})); }));

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

@ -53,14 +53,13 @@ const GeneralStrategy = ({
} }
return ( return (
<> <div className={styles.container}>
{strategyDefinition.parameters.map( {strategyDefinition.parameters.map(
({ name, type, description, required }) => { ({ name, type, description, required }) => {
if (type === 'percentage') { if (type === 'percentage') {
const value = parseParameterNumber(parameters[name]); const value = parseParameterNumber(parameters[name]);
return ( return (
<div key={name}> <div key={name}>
<br />
<RolloutSlider <RolloutSlider
name={name} name={name}
onChange={onChangePercentage.bind( onChange={onChangePercentage.bind(
@ -103,7 +102,7 @@ const GeneralStrategy = ({
value.length > 0 ? !regex.test(value) : false; value.length > 0 ? !regex.test(value) : false;
return ( return (
<div key={name} className={styles.generalSection}> <div key={name}>
<TextField <TextField
error={error} error={error}
helperText={ helperText={
@ -132,7 +131,7 @@ const GeneralStrategy = ({
} else if (type === 'boolean') { } else if (type === 'boolean') {
const value = parseParameterString(parameters[name]); const value = parseParameterString(parameters[name]);
return ( return (
<div key={name} style={{ padding: '20px 0' }}> <div key={name}>
<Tooltip <Tooltip
title={description} title={description}
placement="right-end" placement="right-end"
@ -158,7 +157,7 @@ const GeneralStrategy = ({
} else { } else {
const value = parseParameterString(parameters[name]); const value = parseParameterString(parameters[name]);
return ( return (
<div key={name} className={styles.generalSection}> <div key={name}>
<TextField <TextField
rows={1} rows={1}
placeholder="" 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 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 { Add } from '@mui/icons-material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { ADD_TO_STRATEGY_INPUT_LIST, STRATEGY_INPUT_LIST } from 'utils/testIds'; import { ADD_TO_STRATEGY_INPUT_LIST, STRATEGY_INPUT_LIST } from 'utils/testIds';
@ -12,6 +19,21 @@ interface IStrategyInputList {
disabled: boolean; 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 = ({ const StrategyInputList = ({
name, name,
list, list,
@ -61,49 +83,42 @@ const StrategyInputList = ({
); );
}; };
// @ts-expect-error const onChange: TextFieldProps['onChange'] = event => {
const onChange = e => { setInput(event.currentTarget.value);
setInput(e.currentTarget.value);
}; };
return ( return (
<div> <Container>
<Typography variant="subtitle2" component="h2"> <Typography variant="subtitle2" component="h2">
List of {name} List of {name}
</Typography> </Typography>
<div <ConditionallyRender
style={{ condition={list.length > 0}
display: 'flex', show={
flexWrap: 'wrap', <ChipsList>
margin: '10px 0', {list.map((entryValue, index) => (
}} <Chip
> key={index + entryValue}
{list.map((entryValue, index) => ( label={
<Chip <StringTruncator
key={index + entryValue} maxWidth="300"
label={ text={entryValue}
<StringTruncator maxLength={50}
maxWidth="300" />
text={entryValue} }
maxLength={50} onDelete={
disabled ? undefined : () => onClose(index)
}
title="Remove value"
/> />
} ))}
style={{ marginRight: '3px' }} </ChipsList>
onDelete={disabled ? undefined : () => onClose(index)} }
title="Remove value" />
/>
))}
</div>
<ConditionallyRender <ConditionallyRender
condition={!disabled} condition={!disabled}
show={ show={
<div <InputContainer>
style={{
display: 'flex',
alignItems: 'center',
gap: '1rem',
}}
>
<TextField <TextField
name={`input_field`} name={`input_field`}
variant="outlined" variant="outlined"
@ -128,10 +143,10 @@ const StrategyInputList = ({
> >
Add Add
</Button> </Button>
</div> </InputContainer>
} }
/> />
</div> </Container>
); );
}; };