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

Constraint View header adjustments

Browse Source
This commit is contained in:
andreas-unleash 2022-07-21 15:22:49 +03:00
parent f34aafade5
commit 9316b633a2
4 changed files with 103 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts
View File

@ -46,6 +46,11 @@ export const useStyles = makeStyles()(theme => ({
position: 'relative',
},
},
headerValuesContainerWrapper: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'center'
},
headerValuesContainer: {
display: 'flex',
flexDirection: 'column',

1
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
View File

@ -60,6 +60,7 @@ export const ConstraintAccordionView = ({
onDelete={onDelete}
singleValue={singleValue}
allowExpand={setExpandable}
expanded={expanded}
/>
</AccordionSummary>

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

@ -10,8 +10,11 @@ import { formatConstraintValue } from 'utils/formatConstraintValue';
import { useLocationSettings } from 'hooks/useLocationSettings';
import { ConstraintOperator } from 'component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator';
import classnames from 'classnames';
import ReactDOM from 'react-dom';
import { getTextWidth } from '../../utils';
import { ReactComponent as NegatedIcon } from 'assets/icons/24_Negator.svg';
import { ReactComponent as CaseSensitive } from 'assets/icons/24_Text format.svg';
import { stringOperators } from 'constants/operators';
import { oneOf } from 'utils/oneOf';
const StyledHeaderText = styled('span')(({ theme }) => ({
display: '-webkit-box',
@ -50,12 +53,27 @@ const StyledSingleValueChip = styled(Chip)(({ theme }) => ({
},
}));
const StyledIconWrapper = styled('div')<{ marginRight?: string, marginTop?: string }>(
({ theme, marginRight, marginTop }) => ({
backgroundColor: theme.palette.grey[200],
width: 28,
height: 47,
display: 'inline-flex',
justifyContent: 'center',
padding: '10px 0',
color: theme.palette.primary.main,
marginRight: marginRight ? marginRight : '0.75rem',
marginTop: marginTop ? marginTop: 0
})
);
interface IConstraintAccordionViewHeaderProps {
compact: boolean;
constraint: IConstraint;
onDelete?: () => void;
onEdit?: () => void;
singleValue: boolean;
expanded: boolean;
allowExpand: (shouldExpand: boolean) => void;
}
@ -66,6 +84,7 @@ export const ConstraintAccordionViewHeader = ({
onDelete,
singleValue,
allowExpand,
expanded,
}: IConstraintAccordionViewHeaderProps) => {
const { classes: styles } = useStyles();
const { locationSettings } = useLocationSettings();
@ -113,40 +132,88 @@ export const ConstraintAccordionViewHeader = ({
{constraint.contextName}
</StyledHeaderText>
</Tooltip>
<div className={styles.headerConstraintContainer}>
<ConstraintOperator constraint={constraint} />
<div className={styles.headerValuesContainerWrapper}>
<ConditionallyRender
condition={Boolean(constraint.inverted)}
show={
<Tooltip title={'Operator is negated'} arrow>
<StyledIconWrapper marginRight={'0'}>
<NegatedIcon />
</StyledIconWrapper>
</Tooltip>
}
/>
<div className={styles.headerConstraintContainer}>
<ConstraintOperator constraint={constraint} />
</div>
</div>
<ConditionallyRender
condition={singleValue}
show={
<StyledSingleValueChip
label={formatConstraintValue(
constraint,
locationSettings
)}
/>
}
elseShow={
<div className={styles.headerValuesContainer}>
<StyledValuesSpan ref={elementRef}>
{constraint?.values
?.map(value => value)
.join(', ')}
</StyledValuesSpan>
<div className={styles.headerValuesContainerWrapper}>
<ConditionallyRender
condition={expandable}
condition={
!Boolean(constraint.caseInsensitive) &&
oneOf(stringOperators, constraint.operator)
}
show={
<p
className={classnames(
styles.headerValuesExpand,
'valuesExpandLabel'
)}
<Tooltip
title="Case sensitive is active"
arrow
>
Expand to view all (
{constraint?.values?.length})
</p>
<StyledIconWrapper>
<CaseSensitive />{' '}
</StyledIconWrapper>
</Tooltip>
}
/>
<StyledSingleValueChip
label={formatConstraintValue(
constraint,
locationSettings
)}
/>
</div>
}
elseShow={
<div className={styles.headerValuesContainerWrapper}>
<ConditionallyRender
condition={
!Boolean(constraint.caseInsensitive) &&
oneOf(stringOperators, constraint.operator)
}
show={
<Tooltip
title="Case sensitive is active"
arrow
>
<StyledIconWrapper marginTop={'7px'}>
<CaseSensitive />{' '}
</StyledIconWrapper>
</Tooltip>
}
/>
<div className={styles.headerValuesContainer}>
<StyledValuesSpan ref={elementRef}>
{constraint?.values
?.map(value => value)
.join(', ')}
</StyledValuesSpan>
<ConditionallyRender
condition={expandable}
show={
<p
className={classnames(
styles.headerValuesExpand,
'valuesExpandLabel'
)}
>
{!expanded ? `Expand to view all (
${constraint?.values?.length})` : 'Collapse to view less' }
</p>
}
/>
</div>
</div>
}
/>

11
frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx
View File

@ -1,6 +1,10 @@
import { IConstraint } from 'interfaces/strategy';
import { formatOperatorDescription } from 'component/common/ConstraintAccordion/ConstraintOperator/formatOperatorDescription';
import { useStyles } from 'component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.styles';
import { ConditionallyRender } from '../../ConditionallyRender/ConditionallyRender';
import { ReactComponent as NegatedIcon } from '../../../../assets/icons/24_Negator.svg';
import { colors } from '../../../../themes/colors';
import React from 'react';
interface IConstraintOperatorProps {
constraint: IConstraint;
@ -14,15 +18,8 @@ export const ConstraintOperator = ({
const operatorName = constraint.operator;
const operatorText = formatOperatorDescription(constraint.operator);
const notLabel = constraint.inverted && (
<div className={styles.not}>
<span>NOT</span>
</div>
);
return (
<div className={styles.container}>
{notLabel}
<div className={styles.name}>{operatorName}</div>
<div className={styles.text}>{operatorText}</div>
</div>