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

Comment fixes and polishing

Browse Source
This commit is contained in:
andreas-unleash 2022-07-22 13:34:39 +03:00
parent 5ea7e8781f
commit 1cb632b561
8 changed files with 54 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx
View File

@ -64,37 +64,37 @@ export const RestrictiveLegalValues = ({
}; };
return ( return (
<ConditionallyRender <>
condition={Boolean(values.length > 500)} <ConstraintFormHeader>
show={ Select values from a predefined set
<> </ConstraintFormHeader>
<ConstraintFormHeader> <ConditionallyRender
Select values from a predefined set condition={Boolean(legalValues.length > 100)}
</ConstraintFormHeader> show={
<ConstraintValueSearch <ConstraintValueSearch
filter={filter} filter={filter}
setFilter={setFilter} setFilter={setFilter}
/> />
{filteredValues.map(match => ( }
<LegalValueLabel />
key={match.value} {filteredValues.map(match => (
legal={match} <LegalValueLabel
control={ key={match.value}
<Checkbox legal={match}
checked={Boolean(valuesMap[match.value])} control={
onChange={() => onChange(match.value)} <Checkbox
name={match.value} checked={Boolean(valuesMap[match.value])}
color="primary" onChange={() => onChange(match.value)}
/> name={match.value}
} color="primary"
/> />
))} }
<ConditionallyRender />
condition={Boolean(error)} ))}
show={<p className={styles.error}>{error}</p>} <ConditionallyRender
/> condition={Boolean(error)}
</> show={<p className={styles.error}>{error}</p>}
} />
/> </>
); );
}; };

2
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx
View File

@ -37,7 +37,7 @@ export const SingleLegalValue = ({
Add a single {type.toLowerCase()} value Add a single {type.toLowerCase()} value
</ConstraintFormHeader> </ConstraintFormHeader>
<ConditionallyRender <ConditionallyRender
condition={Boolean(legalValues.length > 500)} condition={Boolean(legalValues.length > 100)}
show={ show={
<ConstraintValueSearch <ConstraintValueSearch
filter={filter} filter={filter}

7
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx
View File

@ -1,12 +1,11 @@
import { styled } from '@mui/system'; import { styled } from '@mui/system';
import { Button } from '@mui/material'; import { IconButton } from '@mui/material';
export const StyledToggleButtonOff = styled(Button)(({ theme }) => ({ export const StyledToggleButtonOff = styled(IconButton)(({ theme }) => ({
width: 28, width: 28,
minWidth: '28px!important', minWidth: '28px!important',
minHeight: 40, minHeight: 40,
backgroundColor: 'white', backgroundColor: 'white',
color: theme.palette.inactiveIcon,
borderRadius: theme.shape.borderRadius, borderRadius: theme.shape.borderRadius,
padding: '0 1px 0', padding: '0 1px 0',
marginRight: '1rem', marginRight: '1rem',
@ -15,7 +14,7 @@ export const StyledToggleButtonOff = styled(Button)(({ theme }) => ({
}, },
})); }));
export const StyledToggleButtonOn = styled(Button)(({ theme }) => ({ export const StyledToggleButtonOn = styled(IconButton)(({ theme }) => ({
width: 28, width: 28,
minWidth: '28px!important', minWidth: '28px!important',
minHeight: 40, minHeight: 40,

4
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx
View File

@ -7,11 +7,13 @@ import { useStyles } from '../ConstraintAccordion.styles';
interface ConstraintAccordionHeaderActionsProps { interface ConstraintAccordionHeaderActionsProps {
onDelete?: () => void; onDelete?: () => void;
onEdit?: () => void; onEdit?: () => void;
disableEdit?: boolean;
} }
export const ConstraintAccordionHeaderActions = ({ export const ConstraintAccordionHeaderActions = ({
onEdit, onEdit,
onDelete, onDelete,
disableEdit = false
}: ConstraintAccordionHeaderActionsProps) => { }: ConstraintAccordionHeaderActionsProps) => {
const { classes: styles } = useStyles(); const { classes: styles } = useStyles();
const onEditClick = const onEditClick =
@ -31,7 +33,7 @@ export const ConstraintAccordionHeaderActions = ({
return ( return (
<div className={styles.headerActions}> <div className={styles.headerActions}>
<ConditionallyRender <ConditionallyRender
condition={Boolean(onEditClick)} condition={Boolean(onEditClick) && !disableEdit}
show={() => ( show={() => (
<Tooltip title="Edit constraint" arrow> <Tooltip title="Edit constraint" arrow>
<IconButton <IconButton

15
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx
View File

@ -8,7 +8,8 @@ import { objectId } from 'utils/objectId';
import { useStyles } from './ConstraintAccordionList.styles'; import { useStyles } from './ConstraintAccordionList.styles';
import { createEmptyConstraint } from 'component/common/ConstraintAccordion/ConstraintAccordionList/createEmptyConstraint'; import { createEmptyConstraint } from 'component/common/ConstraintAccordion/ConstraintAccordionList/createEmptyConstraint';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { Button } from '@mui/material'; import { Button, IconButton } from '@mui/material';
import { Help } from '@mui/icons-material';
interface IConstraintAccordionListProps { interface IConstraintAccordionListProps {
constraints: IConstraint[]; constraints: IConstraint[];
@ -102,11 +103,19 @@ export const ConstraintAccordionList = forwardRef<
condition={Boolean(showCreateButton && onAdd)} condition={Boolean(showCreateButton && onAdd)}
show={ show={
<div> <div>
<p>
Add any number of custom constraints
<a href={'https://docs.getunleash.io/advanced/strategy_constraints'}>
<IconButton>
<Help />
</IconButton>
</a>
</p>
<Button <Button
type="button" type="button"
onClick={onAdd} onClick={onAdd}
variant="text" variant="outlined"
color="primary" color="secondary"
> >
Add custom constraint Add custom constraint
</Button> </Button>

2
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator/ConstraintViewHeaderOperator.tsx
View File

@ -22,7 +22,7 @@ export const ConstraintViewHeaderOperator = ({
condition={Boolean(constraint.inverted)} condition={Boolean(constraint.inverted)}
show={ show={
<Tooltip title={'Operator is negated'} arrow> <Tooltip title={'Operator is negated'} arrow>
<StyledIconWrapper marginRight={'0'}> <StyledIconWrapper marginright={'0'}>
<NegatedIcon /> <NegatedIcon />
</StyledIconWrapper> </StyledIconWrapper>
</Tooltip> </Tooltip>

2
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx
View File

@ -70,7 +70,7 @@ export const ConstraintAccordionViewHeaderMultipleValues = ({
} }
show={ show={
<Tooltip title="Case sensitive is active" arrow> <Tooltip title="Case sensitive is active" arrow>
<StyledIconWrapper marginTop={'7px'}> <StyledIconWrapper margintop={'auto'}>
<CaseSensitive />{' '} <CaseSensitive />{' '}
</StyledIconWrapper> </StyledIconWrapper>
</Tooltip> </Tooltip>

12
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper/StyledIconWrapper.tsx
View File

@ -1,16 +1,16 @@
import { styled } from '@mui/material'; import { styled } from '@mui/material';
export const StyledIconWrapper = styled('div')<{ export const StyledIconWrapper = styled('div')<{
marginRight?: string; marginright?: string;
marginTop?: string; }>(({ theme, marginright }) => ({
}>(({ theme, marginRight, marginTop }) => ({
backgroundColor: theme.palette.grey[200], backgroundColor: theme.palette.grey[200],
width: 28, width: 28,
height: 47, height: 48,
display: 'inline-flex', display: 'inline-flex',
justifyContent: 'center', justifyContent: 'center',
padding: '10px 0', padding: '10px 0',
color: theme.palette.primary.main, color: theme.palette.primary.main,
marginRight: marginRight ? marginRight : '0.75rem', marginRight: marginright ? marginright : '1rem',
marginTop: marginTop ? marginTop : 0, marginTop: 'auto',
marginBottom: 'auto',
})); }));