mirror of
https://github.com/Unleash/unleash.git
synced 2025-07-21 13:47:39 +02:00
c3dda01d53
This PR continues the cleanup after removing the addEditStrategy flag (part 2 of ???). The primary purpose of this PR is to delete and remove all references to the LegacyConstraintAccordion. I've gone and updated all references to the legacy files in external components and verified manually that they still work. Most of the files in this PR are changing references. I've extracted two bits into more general constants/utils: 1. Constraint IDs are a symbol. it was exported as a const from the previous createEmptyConstraint file. I've moved it into constants. 2. formatOperatorDescription was similarly used all over the place, so I've placed it in the shared utils directory. In reviewing this, you can ignore any changes in the legacy constraint accordion folder, because that's all been deleted. Instead, focus on the changes in the other files. It's primarily just import updates, but would be good to get a second set of eyes, anyway.
107 lines
3.4 KiB
TypeScript
107 lines
3.4 KiB
TypeScript
import type React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import type { ISegment } from 'interfaces/segment';
|
|
import Clear from '@mui/icons-material/Clear';
|
|
import VisibilityOff from '@mui/icons-material/VisibilityOff';
|
|
import Visibility from '@mui/icons-material/Visibility';
|
|
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
|
import { styled, type Theme, Tooltip } from '@mui/material';
|
|
import { constraintAccordionListId } from 'component/common/NewConstraintAccordion/NewConstraintAccordionList/NewConstraintAccordionList';
|
|
|
|
interface IFeatureStrategySegmentListProps {
|
|
segment: ISegment;
|
|
setSegments: React.Dispatch<React.SetStateAction<ISegment[]>>;
|
|
preview?: ISegment;
|
|
setPreview: React.Dispatch<React.SetStateAction<ISegment | undefined>>;
|
|
}
|
|
|
|
const StyledChip = styled('span')(({ theme }) => ({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: theme.spacing(0.5),
|
|
paddingInlineStart: theme.spacing(2),
|
|
paddingInlineEnd: theme.spacing(1),
|
|
paddingBlockStart: theme.spacing(0.5),
|
|
paddingBlockEnd: theme.spacing(0.5),
|
|
borderRadius: '100rem',
|
|
background: theme.palette.background.elevation1,
|
|
color: theme.palette.text.primary,
|
|
}));
|
|
|
|
const StyledButton = styled('button')(({ theme }) => ({
|
|
all: 'unset',
|
|
height: theme.spacing(2),
|
|
cursor: 'pointer',
|
|
color: theme.palette.secondary.dark,
|
|
}));
|
|
|
|
const StyledLink = styled(Link)(({ theme }) => ({
|
|
marginRight: theme.spacing(1),
|
|
color: 'inherit',
|
|
textDecoration: 'none',
|
|
}));
|
|
|
|
const styledIcon = (theme: Theme) => ({ fontSize: theme.fontSizes.bodySize });
|
|
|
|
export const FeatureStrategySegmentChip = ({
|
|
segment,
|
|
setSegments,
|
|
preview,
|
|
setPreview,
|
|
}: IFeatureStrategySegmentListProps) => {
|
|
const onRemove = () => {
|
|
setSegments((prev) => {
|
|
return prev.filter((s) => s.id !== segment.id);
|
|
});
|
|
setPreview((prev) => {
|
|
return prev === segment ? undefined : prev;
|
|
});
|
|
};
|
|
|
|
const onTogglePreview = () => {
|
|
setPreview((prev) => {
|
|
return prev === segment ? undefined : segment;
|
|
});
|
|
};
|
|
|
|
const togglePreviewIcon = (
|
|
<ConditionallyRender
|
|
condition={segment === preview}
|
|
show={<VisibilityOff titleAccess='Hide' sx={styledIcon} />}
|
|
elseShow={<Visibility titleAccess='Show' sx={styledIcon} />}
|
|
/>
|
|
);
|
|
|
|
const previewIconTooltip =
|
|
segment === preview
|
|
? 'Hide segment constraints'
|
|
: 'Preview segment constraints';
|
|
|
|
return (
|
|
<StyledChip>
|
|
<StyledLink
|
|
to={`/segments/edit/${segment.id}`}
|
|
target='_blank'
|
|
rel='noreferrer'
|
|
>
|
|
{segment.name}
|
|
</StyledLink>
|
|
<Tooltip title={previewIconTooltip} arrow>
|
|
<StyledButton
|
|
type='button'
|
|
onClick={onTogglePreview}
|
|
aria-expanded={segment === preview}
|
|
aria-controls={constraintAccordionListId}
|
|
>
|
|
{togglePreviewIcon}
|
|
</StyledButton>
|
|
</Tooltip>
|
|
<Tooltip title='Remove segment' arrow>
|
|
<StyledButton type='button' onClick={onRemove}>
|
|
<Clear titleAccess='Remove' sx={styledIcon} />
|
|
</StyledButton>
|
|
</Tooltip>
|
|
</StyledChip>
|
|
);
|
|
};
|