diff --git a/web/src/pages/CERulePage/CERulePage.tsx b/web/src/pages/CERulePage/CERulePage.tsx index 76efb24fd4..72b91d9347 100644 --- a/web/src/pages/CERulePage/CERulePage.tsx +++ b/web/src/pages/CERulePage/CERulePage.tsx @@ -698,21 +698,24 @@ const Content = ({ rule: initialRule }: Props) => { /> - {isPresent(aliasesOptions) && - aliasesOptions - .filter((alias) => field.state.value.has(alias.id)) - .map((option) => ( - { - const newState = new Set(field.state.value); - newState.delete(option.id); - field.handleChange(newState); - }} - /> - ))} + {isPresent(aliasesOptions) && ( + + {aliasesOptions + .filter((alias) => field.state.value.has(alias.id)) + .map((option) => ( + { + const newState = new Set(field.state.value); + newState.delete(option.id); + field.handleChange(newState); + }} + /> + ))} + + )} > )} @@ -1067,23 +1070,43 @@ type AliasDataBlockProps = { values: string[]; }; +const normalizeAliasValues = (values: string[]) => { + const seenValues = new Set(); + + return values.reduce((normalizedValues, value) => { + const trimmedValue = value.trim(); + + if (trimmedValue.length === 0 || seenValues.has(trimmedValue)) { + return normalizedValues; + } + + seenValues.add(trimmedValue); + normalizedValues.push(trimmedValue); + return normalizedValues; + }, []); +}; + const AliasDataBlock = ({ values }: AliasDataBlockProps) => { - if (values.length === 0) return null; + const normalizedValues = normalizeAliasValues(values); + + if (normalizedValues.length === 0) return null; + return ( {`Data from aliases`} - {values.map((value) => ( + {normalizedValues.map((value) => ( ))} - {values.length > 4 && ( + {normalizedValues.length > 4 && ( { openModal(ModalName.DisplayList, { title: 'Data from aliases', - data: values, + data: normalizedValues, }); }} > diff --git a/web/src/pages/CERulePage/style.scss b/web/src/pages/CERulePage/style.scss index 7e0c4db899..c52f7ee7cb 100644 --- a/web/src/pages/CERulePage/style.scss +++ b/web/src/pages/CERulePage/style.scss @@ -75,6 +75,12 @@ } } } + + .aliases-selected { + display: flex; + flex-flow: row wrap; + gap: var(--spacing-sm); + } } .selection-section .item .destination-selection-item {
{`Data from aliases`}