Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-04 13:48:56 +02: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', position: 'relative',
}, },
}, },
headerValuesContainerWrapper: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'center'
},
headerValuesContainer: { headerValuesContainer: {
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',

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

@ -60,6 +60,7 @@ export const ConstraintAccordionView = ({
onDelete={onDelete} onDelete={onDelete}
singleValue={singleValue} singleValue={singleValue}
allowExpand={setExpandable} allowExpand={setExpandable}
expanded={expanded}
/> />
</AccordionSummary> </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 { useLocationSettings } from 'hooks/useLocationSettings';
import { ConstraintOperator } from 'component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator'; import { ConstraintOperator } from 'component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator';
import classnames from 'classnames'; import classnames from 'classnames';
import ReactDOM from 'react-dom';
import { getTextWidth } from '../../utils'; 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 }) => ({ const StyledHeaderText = styled('span')(({ theme }) => ({
display: '-webkit-box', 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 { interface IConstraintAccordionViewHeaderProps {
compact: boolean; compact: boolean;
constraint: IConstraint; constraint: IConstraint;
onDelete?: () => void; onDelete?: () => void;
onEdit?: () => void; onEdit?: () => void;
singleValue: boolean; singleValue: boolean;
expanded: boolean;
allowExpand: (shouldExpand: boolean) => void; allowExpand: (shouldExpand: boolean) => void;
} }
@ -66,6 +84,7 @@ export const ConstraintAccordionViewHeader = ({
onDelete, onDelete,
singleValue, singleValue,
allowExpand, allowExpand,
expanded,
}: IConstraintAccordionViewHeaderProps) => { }: IConstraintAccordionViewHeaderProps) => {
const { classes: styles } = useStyles(); const { classes: styles } = useStyles();
const { locationSettings } = useLocationSettings(); const { locationSettings } = useLocationSettings();
@ -113,40 +132,88 @@ export const ConstraintAccordionViewHeader = ({
{constraint.contextName} {constraint.contextName}
</StyledHeaderText> </StyledHeaderText>
</Tooltip> </Tooltip>
<div className={styles.headerConstraintContainer}> <div className={styles.headerValuesContainerWrapper}>
<ConstraintOperator constraint={constraint} /> <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> </div>
<ConditionallyRender <ConditionallyRender
condition={singleValue} condition={singleValue}
show={ show={
<StyledSingleValueChip <div className={styles.headerValuesContainerWrapper}>
label={formatConstraintValue(
constraint,
locationSettings
)}
/>
}
elseShow={
<div className={styles.headerValuesContainer}>
<StyledValuesSpan ref={elementRef}>
{constraint?.values
?.map(value => value)
.join(', ')}
</StyledValuesSpan>
<ConditionallyRender <ConditionallyRender
condition={expandable} condition={
!Boolean(constraint.caseInsensitive) &&
oneOf(stringOperators, constraint.operator)
}
show={ show={
<p <Tooltip
className={classnames( title="Case sensitive is active"
styles.headerValuesExpand, arrow
'valuesExpandLabel'
)}
> >
Expand to view all ( <StyledIconWrapper>
{constraint?.values?.length}) <CaseSensitive />{' '}
</p> </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> </div>
} }
/> />

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

@ -1,6 +1,10 @@
import { IConstraint } from 'interfaces/strategy'; import { IConstraint } from 'interfaces/strategy';
import { formatOperatorDescription } from 'component/common/ConstraintAccordion/ConstraintOperator/formatOperatorDescription'; import { formatOperatorDescription } from 'component/common/ConstraintAccordion/ConstraintOperator/formatOperatorDescription';
import { useStyles } from 'component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.styles'; 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 { interface IConstraintOperatorProps {
constraint: IConstraint; constraint: IConstraint;
@ -14,15 +18,8 @@ export const ConstraintOperator = ({
const operatorName = constraint.operator; const operatorName = constraint.operator;
const operatorText = formatOperatorDescription(constraint.operator); const operatorText = formatOperatorDescription(constraint.operator);
const notLabel = constraint.inverted && (
<div className={styles.not}>
<span>NOT</span>
</div>
);
return ( return (
<div className={styles.container}> <div className={styles.container}>
{notLabel}
<div className={styles.name}>{operatorName}</div> <div className={styles.name}>{operatorName}</div>
<div className={styles.text}>{operatorText}</div> <div className={styles.text}>{operatorText}</div>
</div> </div>