mirror of
https://github.com/Unleash/unleash.git
synced 2025-08-27 13:49:10 +02:00
Jaanus Sellin
GitHub
parent
77d72ce5a1
commit
a2e39a05c4
@ -1,67 +0,0 @@
|
|||||||
import { ConstraintIcon } from 'component/common/LegacyConstraintAccordion/ConstraintIcon';
|
|
||||||
import type { IConstraint } from 'interfaces/strategy';
|
|
||||||
import { ConstraintAccordionViewHeaderInfo } from './ConstraintAccordionViewHeaderInfo';
|
|
||||||
import { ConstraintAccordionHeaderActions } from '../../ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions';
|
|
||||||
import { styled } from '@mui/system';
|
|
||||||
import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
|
|
||||||
|
|
||||||
interface IConstraintAccordionViewHeaderProps {
|
|
||||||
constraint: IConstraint;
|
|
||||||
onDelete?: () => void;
|
|
||||||
onEdit?: () => void;
|
|
||||||
singleValue: boolean;
|
|
||||||
expanded: boolean;
|
|
||||||
allowExpand: (shouldExpand: boolean) => void;
|
|
||||||
compact?: boolean;
|
|
||||||
disabled?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const StyledContainer = styled('div')(({ theme }) => ({
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
width: '100%',
|
|
||||||
[theme.breakpoints.down('sm')]: {
|
|
||||||
flexDirection: 'column',
|
|
||||||
alignItems: 'center',
|
|
||||||
position: 'relative',
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @deprecated use NewConstraintAccordion components
|
|
||||||
*/
|
|
||||||
export const ConstraintAccordionViewHeader = ({
|
|
||||||
constraint,
|
|
||||||
onEdit,
|
|
||||||
onDelete,
|
|
||||||
singleValue,
|
|
||||||
allowExpand,
|
|
||||||
expanded,
|
|
||||||
compact,
|
|
||||||
disabled,
|
|
||||||
}: IConstraintAccordionViewHeaderProps) => {
|
|
||||||
const { context } = useUnleashContext();
|
|
||||||
const { contextName } = constraint;
|
|
||||||
|
|
||||||
const disableEdit = !context
|
|
||||||
.map((contextDefinition) => contextDefinition.name)
|
|
||||||
.includes(contextName);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<StyledContainer>
|
|
||||||
<ConstraintIcon compact={compact} disabled={disabled} />
|
|
||||||
<ConstraintAccordionViewHeaderInfo
|
|
||||||
constraint={constraint}
|
|
||||||
singleValue={singleValue}
|
|
||||||
allowExpand={allowExpand}
|
|
||||||
expanded={expanded}
|
|
||||||
disabled={disabled}
|
|
||||||
/>
|
|
||||||
<ConstraintAccordionHeaderActions
|
|
||||||
onEdit={onEdit}
|
|
||||||
onDelete={onDelete}
|
|
||||||
disableEdit={disableEdit}
|
|
||||||
/>
|
|
||||||
</StyledContainer>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,107 +0,0 @@
|
|||||||
import { styled, Tooltip } from '@mui/material';
|
|
||||||
import { ConstraintViewHeaderOperator } from './ConstraintViewHeaderOperator';
|
|
||||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
|
||||||
import { ConstraintAccordionViewHeaderSingleValue } from './ConstraintAccordionViewHeaderSingleValue';
|
|
||||||
import { ConstraintAccordionViewHeaderMultipleValues } from './ConstraintAccordionViewHeaderMultipleValues';
|
|
||||||
import type { IConstraint } from 'interfaces/strategy';
|
|
||||||
|
|
||||||
const StyledHeaderText = styled('span')(({ theme }) => ({
|
|
||||||
display: '-webkit-box',
|
|
||||||
WebkitLineClamp: 3,
|
|
||||||
WebkitBoxOrient: 'vertical',
|
|
||||||
overflow: 'hidden',
|
|
||||||
maxWidth: '100px',
|
|
||||||
minWidth: '100px',
|
|
||||||
marginRight: '10px',
|
|
||||||
marginTop: 'auto',
|
|
||||||
marginBottom: 'auto',
|
|
||||||
wordBreak: 'break-word',
|
|
||||||
fontSize: theme.fontSizes.smallBody,
|
|
||||||
[theme.breakpoints.down(710)]: {
|
|
||||||
textAlign: 'center',
|
|
||||||
padding: theme.spacing(1, 0),
|
|
||||||
marginRight: 'inherit',
|
|
||||||
maxWidth: 'inherit',
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
const StyledHeaderWrapper = styled('div')(({ theme }) => ({
|
|
||||||
display: 'flex',
|
|
||||||
width: '100%',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
borderRadius: theme.spacing(1),
|
|
||||||
}));
|
|
||||||
|
|
||||||
const StyledHeaderMetaInfo = styled('div')(({ theme }) => ({
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'stretch',
|
|
||||||
marginLeft: theme.spacing(1),
|
|
||||||
[theme.breakpoints.down('sm')]: {
|
|
||||||
marginLeft: 0,
|
|
||||||
flexDirection: 'column',
|
|
||||||
alignItems: 'center',
|
|
||||||
width: '100%',
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
interface ConstraintAccordionViewHeaderMetaInfoProps {
|
|
||||||
constraint: IConstraint;
|
|
||||||
singleValue: boolean;
|
|
||||||
expanded: boolean;
|
|
||||||
allowExpand: (shouldExpand: boolean) => void;
|
|
||||||
disabled?: boolean;
|
|
||||||
maxLength?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @deprecated use NewConstraintAccordion components
|
|
||||||
*/
|
|
||||||
export const ConstraintAccordionViewHeaderInfo = ({
|
|
||||||
constraint,
|
|
||||||
singleValue,
|
|
||||||
allowExpand,
|
|
||||||
expanded,
|
|
||||||
disabled = false,
|
|
||||||
maxLength = 112, //The max number of characters in the values text for NOT allowing expansion
|
|
||||||
}: ConstraintAccordionViewHeaderMetaInfoProps) => {
|
|
||||||
return (
|
|
||||||
<StyledHeaderWrapper>
|
|
||||||
<StyledHeaderMetaInfo>
|
|
||||||
<Tooltip title={constraint.contextName} arrow>
|
|
||||||
<StyledHeaderText
|
|
||||||
sx={(theme) => ({
|
|
||||||
color: disabled
|
|
||||||
? theme.palette.text.secondary
|
|
||||||
: 'inherit',
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
{constraint.contextName}
|
|
||||||
</StyledHeaderText>
|
|
||||||
</Tooltip>
|
|
||||||
<ConstraintViewHeaderOperator
|
|
||||||
constraint={constraint}
|
|
||||||
disabled={disabled}
|
|
||||||
/>
|
|
||||||
<ConditionallyRender
|
|
||||||
condition={singleValue}
|
|
||||||
show={
|
|
||||||
<ConstraintAccordionViewHeaderSingleValue
|
|
||||||
constraint={constraint}
|
|
||||||
allowExpand={allowExpand}
|
|
||||||
disabled={disabled}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
elseShow={
|
|
||||||
<ConstraintAccordionViewHeaderMultipleValues
|
|
||||||
constraint={constraint}
|
|
||||||
expanded={expanded}
|
|
||||||
allowExpand={allowExpand}
|
|
||||||
maxLength={maxLength}
|
|
||||||
disabled={disabled}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</StyledHeaderMetaInfo>
|
|
||||||
</StyledHeaderWrapper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,104 +0,0 @@
|
|||||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
|
||||||
import { styled } from '@mui/material';
|
|
||||||
import { useEffect, useMemo, useState } from 'react';
|
|
||||||
import type { IConstraint } from 'interfaces/strategy';
|
|
||||||
|
|
||||||
const StyledValuesSpan = styled('span')(({ theme }) => ({
|
|
||||||
display: '-webkit-box',
|
|
||||||
WebkitLineClamp: 2,
|
|
||||||
WebkitBoxOrient: 'vertical',
|
|
||||||
overflow: 'hidden',
|
|
||||||
wordBreak: 'break-word',
|
|
||||||
fontSize: theme.fontSizes.smallBody,
|
|
||||||
margin: 'auto 0',
|
|
||||||
[theme.breakpoints.down('sm')]: {
|
|
||||||
margin: theme.spacing(1, 0),
|
|
||||||
textAlign: 'center',
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
interface ConstraintSingleValueProps {
|
|
||||||
constraint: IConstraint;
|
|
||||||
expanded: boolean;
|
|
||||||
maxLength: number;
|
|
||||||
allowExpand: (shouldExpand: boolean) => void;
|
|
||||||
disabled?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const StyledHeaderValuesContainerWrapper = styled('div')(({ theme }) => ({
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'stretch',
|
|
||||||
margin: 'auto 0',
|
|
||||||
}));
|
|
||||||
|
|
||||||
const StyledHeaderValuesContainer = styled('div')(({ theme }) => ({
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'stretch',
|
|
||||||
margin: 'auto 0',
|
|
||||||
flexDirection: 'column',
|
|
||||||
marginLeft: theme.spacing(1),
|
|
||||||
[theme.breakpoints.down('sm')]: {
|
|
||||||
marginLeft: 0,
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
const StyledHeaderValuesExpand = styled('p')(({ theme }) => ({
|
|
||||||
fontSize: theme.fontSizes.smallBody,
|
|
||||||
marginTop: theme.spacing(0.5),
|
|
||||||
color: theme.palette.links,
|
|
||||||
[theme.breakpoints.down('sm')]: {
|
|
||||||
textAlign: 'center',
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @deprecated use NewConstraintAccordion components
|
|
||||||
*/
|
|
||||||
export const ConstraintAccordionViewHeaderMultipleValues = ({
|
|
||||||
constraint,
|
|
||||||
expanded,
|
|
||||||
allowExpand,
|
|
||||||
maxLength,
|
|
||||||
disabled = false,
|
|
||||||
}: ConstraintSingleValueProps) => {
|
|
||||||
const [expandable, setExpandable] = useState(false);
|
|
||||||
|
|
||||||
const text = useMemo(() => {
|
|
||||||
return constraint?.values?.map((value) => value).join(', ');
|
|
||||||
}, [constraint]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (text) {
|
|
||||||
allowExpand((text?.length ?? 0) > maxLength);
|
|
||||||
setExpandable((text?.length ?? 0) > maxLength);
|
|
||||||
}
|
|
||||||
}, [text, maxLength, allowExpand, setExpandable]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<StyledHeaderValuesContainerWrapper>
|
|
||||||
<StyledHeaderValuesContainer>
|
|
||||||
<StyledValuesSpan
|
|
||||||
sx={(theme) => ({
|
|
||||||
color: disabled
|
|
||||||
? theme.palette.text.secondary
|
|
||||||
: 'inherit',
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
{text}
|
|
||||||
</StyledValuesSpan>
|
|
||||||
<ConditionallyRender
|
|
||||||
condition={expandable}
|
|
||||||
show={
|
|
||||||
<StyledHeaderValuesExpand
|
|
||||||
className={'valuesExpandLabel'}
|
|
||||||
>
|
|
||||||
{!expanded
|
|
||||||
? `View all (${constraint?.values?.length})`
|
|
||||||
: 'View less'}
|
|
||||||
</StyledHeaderValuesExpand>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</StyledHeaderValuesContainer>
|
|
||||||
</StyledHeaderValuesContainerWrapper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,51 +0,0 @@
|
|||||||
import { useEffect } from 'react';
|
|
||||||
import { Chip, styled } from '@mui/material';
|
|
||||||
import { formatConstraintValue } from 'utils/formatConstraintValue';
|
|
||||||
import type { IConstraint } from 'interfaces/strategy';
|
|
||||||
import { useLocationSettings } from 'hooks/useLocationSettings';
|
|
||||||
|
|
||||||
const StyledSingleValueChip = styled(Chip)(({ theme }) => ({
|
|
||||||
margin: 'auto 0',
|
|
||||||
marginLeft: theme.spacing(1),
|
|
||||||
[theme.breakpoints.down('sm')]: {
|
|
||||||
margin: theme.spacing(1, 0),
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
interface ConstraintSingleValueProps {
|
|
||||||
constraint: IConstraint;
|
|
||||||
allowExpand: (shouldExpand: boolean) => void;
|
|
||||||
disabled?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const StyledHeaderValuesContainerWrapper = styled('div')(({ theme }) => ({
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'stretch',
|
|
||||||
margin: 'auto 0',
|
|
||||||
}));
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @deprecated use NewConstraintAccordion components
|
|
||||||
*/
|
|
||||||
export const ConstraintAccordionViewHeaderSingleValue = ({
|
|
||||||
constraint,
|
|
||||||
allowExpand,
|
|
||||||
disabled = false,
|
|
||||||
}: ConstraintSingleValueProps) => {
|
|
||||||
const { locationSettings } = useLocationSettings();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
allowExpand(false);
|
|
||||||
}, [allowExpand]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<StyledHeaderValuesContainerWrapper>
|
|
||||||
<StyledSingleValueChip
|
|
||||||
sx={(theme) => ({
|
|
||||||
color: disabled ? theme.palette.text.secondary : 'inherit',
|
|
||||||
})}
|
|
||||||
label={formatConstraintValue(constraint, locationSettings)}
|
|
||||||
/>
|
|
||||||
</StyledHeaderValuesContainerWrapper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,75 +0,0 @@
|
|||||||
import type { IConstraint } from 'interfaces/strategy';
|
|
||||||
import { ConditionallyRender } from '../../../ConditionallyRender/ConditionallyRender';
|
|
||||||
import { Tooltip, Box, styled } from '@mui/material';
|
|
||||||
import { stringOperators } from 'constants/operators';
|
|
||||||
import { ReactComponent as NegatedOnIcon } from 'assets/icons/not_operator_selected.svg';
|
|
||||||
import { ConstraintOperator } from '../../ConstraintOperator/ConstraintOperator';
|
|
||||||
import { StyledIconWrapper } from './StyledIconWrapper';
|
|
||||||
import { ReactComponent as CaseSensitive } from 'assets/icons/24_Text format.svg';
|
|
||||||
import { oneOf } from 'utils/oneOf';
|
|
||||||
import { useTheme } from '@mui/material';
|
|
||||||
|
|
||||||
interface ConstraintViewHeaderOperatorProps {
|
|
||||||
constraint: IConstraint;
|
|
||||||
disabled?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const StyledHeaderValuesContainerWrapper = styled('div')(({ theme }) => ({
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'stretch',
|
|
||||||
margin: 'auto 0',
|
|
||||||
}));
|
|
||||||
|
|
||||||
const StyledHeaderConstraintContainer = styled('div')(({ theme }) => ({
|
|
||||||
minWidth: '152px',
|
|
||||||
position: 'relative',
|
|
||||||
[theme.breakpoints.down('sm')]: {
|
|
||||||
paddingRight: 0,
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @deprecated use NewConstraintAccordion components
|
|
||||||
*/
|
|
||||||
export const ConstraintViewHeaderOperator = ({
|
|
||||||
constraint,
|
|
||||||
disabled = false,
|
|
||||||
}: ConstraintViewHeaderOperatorProps) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
return (
|
|
||||||
<StyledHeaderValuesContainerWrapper>
|
|
||||||
<ConditionallyRender
|
|
||||||
condition={Boolean(constraint.inverted)}
|
|
||||||
show={
|
|
||||||
<Tooltip title={'Operator is negated'} arrow>
|
|
||||||
<Box sx={{ display: 'flex' }}>
|
|
||||||
<StyledIconWrapper isPrefix>
|
|
||||||
<NegatedOnIcon />
|
|
||||||
</StyledIconWrapper>
|
|
||||||
</Box>
|
|
||||||
</Tooltip>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<StyledHeaderConstraintContainer>
|
|
||||||
<ConstraintOperator
|
|
||||||
constraint={constraint}
|
|
||||||
hasPrefix={Boolean(constraint.inverted)}
|
|
||||||
disabled={disabled}
|
|
||||||
/>
|
|
||||||
</StyledHeaderConstraintContainer>
|
|
||||||
<ConditionallyRender
|
|
||||||
condition={
|
|
||||||
!constraint.caseInsensitive &&
|
|
||||||
oneOf(stringOperators, constraint.operator)
|
|
||||||
}
|
|
||||||
show={
|
|
||||||
<Tooltip title='Case sensitive is active' arrow>
|
|
||||||
<StyledIconWrapper>
|
|
||||||
<CaseSensitive />
|
|
||||||
</StyledIconWrapper>
|
|
||||||
</Tooltip>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</StyledHeaderValuesContainerWrapper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
import { forwardRef, type ReactNode } from 'react';
|
|
||||||
import { styled } from '@mui/material';
|
|
||||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
|
||||||
|
|
||||||
export const StyledIconWrapperBase = styled('div')<{
|
|
||||||
prefix?: boolean;
|
|
||||||
}>(({ theme }) => ({
|
|
||||||
backgroundColor: theme.palette.background.elevation2,
|
|
||||||
width: 24,
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignSelf: 'stretch',
|
|
||||||
color: theme.palette.primary.main,
|
|
||||||
marginLeft: theme.spacing(1),
|
|
||||||
borderRadius: theme.shape.borderRadius,
|
|
||||||
}));
|
|
||||||
|
|
||||||
const StyledPrefixIconWrapper = styled(StyledIconWrapperBase)(({ theme }) => ({
|
|
||||||
width: 'auto',
|
|
||||||
paddingLeft: theme.spacing(1),
|
|
||||||
paddingRight: theme.spacing(1),
|
|
||||||
marginLeft: 0,
|
|
||||||
borderTopRightRadius: 0,
|
|
||||||
borderBottomRightRadius: 0,
|
|
||||||
}));
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @deprecated use NewConstraintAccordion components
|
|
||||||
*/
|
|
||||||
export const StyledIconWrapper = forwardRef<
|
|
||||||
HTMLDivElement,
|
|
||||||
{ isPrefix?: boolean; children?: ReactNode }
|
|
||||||
>(({ isPrefix, ...props }, ref) => (
|
|
||||||
<ConditionallyRender
|
|
||||||
condition={Boolean(isPrefix)}
|
|
||||||
show={() => <StyledPrefixIconWrapper ref={ref} {...props} />}
|
|
||||||
elseShow={() => <StyledIconWrapperBase ref={ref} {...props} />}
|
|
||||||
/>
|
|
||||||
));
|
|
||||||
Loading…
Reference in New Issue
Block a user