From 3513741f74a662268fdd9887cc60f5a901fc9dd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20W=C3=B3jcik?= <maciej@defguard.net>
Date: Mon, 16 Mar 2026 10:47:19 +0100
Subject: [PATCH 1/4] don't show empty alias data

---
 web/src/pages/CERulePage/CERulePage.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/web/src/pages/CERulePage/CERulePage.tsx b/web/src/pages/CERulePage/CERulePage.tsx
index 76efb24fd4..97c9ee101a 100644
--- a/web/src/pages/CERulePage/CERulePage.tsx
+++ b/web/src/pages/CERulePage/CERulePage.tsx
@@ -1067,23 +1067,29 @@ type AliasDataBlockProps = {
   values: string[];
 };
 
+const normalizeAliasValues = (values: string[]) =>
+  values.map((value) => value.trim()).filter((value) => value.length > 0);
+
 const AliasDataBlock = ({ values }: AliasDataBlockProps) => {
-  if (values.length === 0) return null;
+  const normalizedValues = normalizeAliasValues(values);
+
+  if (normalizedValues.length === 0) return null;
+
   return (
     <div className="alias-data-block">
       <div className="top">
         <p>{`Data from aliases`}</p>
       </div>
       <div className="content-track">
-        {values.map((value) => (
-          <Chip key={value} text={value} />
+        {normalizedValues.map((value, index) => (
+          <Chip key={`${value}-${index}`} text={value} />
         ))}
-        {values.length > 4 && (
+        {normalizedValues.length > 4 && (
           <button
             onClick={() => {
               openModal(ModalName.DisplayList, {
                 title: 'Data from aliases',
-                data: values,
+                data: normalizedValues,
               });
             }}
           >

From d6ebe8c00b139d563d846db340bd0a05fa84e68b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20W=C3=B3jcik?= <maciej@defguard.net>
Date: Mon, 16 Mar 2026 10:52:23 +0100
Subject: [PATCH 2/4] avoid invalid submit

---
 web/src/pages/CERulePage/CERulePage.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/src/pages/CERulePage/CERulePage.tsx b/web/src/pages/CERulePage/CERulePage.tsx
index 97c9ee101a..7808dd12c1 100644
--- a/web/src/pages/CERulePage/CERulePage.tsx
+++ b/web/src/pages/CERulePage/CERulePage.tsx
@@ -1086,6 +1086,7 @@ const AliasDataBlock = ({ values }: AliasDataBlockProps) => {
         ))}
         {normalizedValues.length > 4 && (
           <button
+            type="button"
             onClick={() => {
               openModal(ModalName.DisplayList, {
                 title: 'Data from aliases',

From 13773c03fdf7c9dd53e261494b226192ba90d94c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20W=C3=B3jcik?= <maciej@defguard.net>
Date: Mon, 16 Mar 2026 10:52:38 +0100
Subject: [PATCH 3/4] remove duplicates

---
 web/src/pages/CERulePage/CERulePage.tsx | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/web/src/pages/CERulePage/CERulePage.tsx b/web/src/pages/CERulePage/CERulePage.tsx
index 7808dd12c1..bed2225194 100644
--- a/web/src/pages/CERulePage/CERulePage.tsx
+++ b/web/src/pages/CERulePage/CERulePage.tsx
@@ -1067,8 +1067,21 @@ type AliasDataBlockProps = {
   values: string[];
 };
 
-const normalizeAliasValues = (values: string[]) =>
-  values.map((value) => value.trim()).filter((value) => value.length > 0);
+const normalizeAliasValues = (values: string[]) => {
+  const seenValues = new Set<string>();
+
+  return values.reduce<string[]>((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) => {
   const normalizedValues = normalizeAliasValues(values);
@@ -1081,8 +1094,8 @@ const AliasDataBlock = ({ values }: AliasDataBlockProps) => {
         <p>{`Data from aliases`}</p>
       </div>
       <div className="content-track">
-        {normalizedValues.map((value, index) => (
-          <Chip key={`${value}-${index}`} text={value} />
+        {normalizedValues.map((value) => (
+          <Chip key={value} text={value} />
         ))}
         {normalizedValues.length > 4 && (
           <button

From 8febad0d92e61af25787344167261a643cfb5a3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20W=C3=B3jcik?= <maciej@defguard.net>
Date: Mon, 16 Mar 2026 11:51:30 +0100
Subject: [PATCH 4/4] fix alias badge spacing

---
 web/src/pages/CERulePage/CERulePage.tsx | 33 ++++++++++++++-----------
 web/src/pages/CERulePage/style.scss     |  6 +++++
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/web/src/pages/CERulePage/CERulePage.tsx b/web/src/pages/CERulePage/CERulePage.tsx
index bed2225194..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) => {
                               />
                             </ButtonsGroup>
                             <SizedBox height={ThemeSpacing.Xl} />
-                            {isPresent(aliasesOptions) &&
-                              aliasesOptions
-                                .filter((alias) => field.state.value.has(alias.id))
-                                .map((option) => (
-                                  <Chip
-                                    size="sm"
-                                    text={option.label}
-                                    key={option.id}
-                                    onDismiss={() => {
-                                      const newState = new Set(field.state.value);
-                                      newState.delete(option.id);
-                                      field.handleChange(newState);
-                                    }}
-                                  />
-                                ))}
+                            {isPresent(aliasesOptions) && (
+                              <div className="aliases-selected">
+                                {aliasesOptions
+                                  .filter((alias) => field.state.value.has(alias.id))
+                                  .map((option) => (
+                                    <Chip
+                                      size="sm"
+                                      text={option.label}
+                                      key={option.id}
+                                      onDismiss={() => {
+                                        const newState = new Set(field.state.value);
+                                        newState.delete(option.id);
+                                        field.handleChange(newState);
+                                      }}
+                                    />
+                                  ))}
+                              </div>
+                            )}
                           </>
                         )}
                       </form.AppField>
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 {