From b5a1d1a89536c12f5d320abd265be71f1e2f71ab Mon Sep 17 00:00:00 2001
From: Lucas Bordeau <bordeau.lucas@gmail.com>
Date: Mon, 14 Apr 2025 10:43:20 +0200
Subject: [PATCH] Improving empty filter chip UI (#11537)

This PR is simply removing the : character on the filter chip when the
filter value is empty.

The issue originally was about removing the filter chip when closing the
filter value dropdown with an empty value but it is already the default
behavior.

Fixes https://github.com/twentyhq/core-team-issues/issues/658
---
 .../src/modules/views/components/EditableFilterChip.tsx    | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/views/components/EditableFilterChip.tsx b/packages/twenty-front/src/modules/views/components/EditableFilterChip.tsx
index 0875c2454..9cd6c2545 100644
--- a/packages/twenty-front/src/modules/views/components/EditableFilterChip.tsx
+++ b/packages/twenty-front/src/modules/views/components/EditableFilterChip.tsx
@@ -2,6 +2,7 @@ import { useFieldMetadataItemById } from '@/object-metadata/hooks/useFieldMetada
 import { getOperandLabelShort } from '@/object-record/object-filter-dropdown/utils/getOperandLabel';
 import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
 import { SortOrFilterChip } from '@/views/components/SortOrFilterChip';
+import { isNonEmptyString } from '@sniptt/guards';
 import { useIcons } from 'twenty-ui/display';
 
 type EditableFilterChipProps = {
@@ -21,11 +22,15 @@ export const EditableFilterChip = ({
 
   const FieldMetadataItemIcon = getIcon(fieldMetadataItem.icon);
 
+  const operandLabelShort = getOperandLabelShort(viewFilter.operand);
+
+  const labelKey = `${viewFilter.label}${isNonEmptyString(viewFilter.value) ? operandLabelShort : ''}`;
+
   return (
     <SortOrFilterChip
       key={viewFilter.id}
       testId={viewFilter.id}
-      labelKey={`${viewFilter.label}${getOperandLabelShort(viewFilter.operand)}`}
+      labelKey={labelKey}
       labelValue={viewFilter.displayValue}
       Icon={FieldMetadataItemIcon}
       onRemove={onRemove}