Short variant for filter texts (#943)

* - added a short variant for filter labels in the filter bar

* - fixed tests
- moved colon to shortoperand

* - fixed formatting

front/src/modules/ui/filter-n-sort/components/SortAndFilterBar.tsx

@@ -9,7 +9,7 @@ import { useRemoveFilter } from '../hooks/useRemoveFilter';
 import { availableFiltersScopedState } from '../states/availableFiltersScopedState';
 import { filtersScopedState } from '../states/filtersScopedState';
 import { SelectedSortType } from '../types/interface';
-import { getOperandLabel } from '../utils/getOperandLabel';
+import { getOperandLabelShort } from '../utils/getOperandLabel';
 
 import SortOrFilterChip from './SortOrFilterChip';
 
@@ -126,7 +126,7 @@ function SortAndFilterBar<SortField>({
             <SortOrFilterChip
               key={filter.field}
               labelKey={filter.label}
-              labelValue={`${getOperandLabel(filter.operand)} ${
+              labelValue={`${getOperandLabelShort(filter.operand)} ${
                 filter.displayValue
               }`}
               id={filter.field}

front/src/modules/ui/filter-n-sort/components/SortOrFilterChip.tsx

@@ -59,7 +59,7 @@ function SortOrFilterChip({
   return (
     <StyledChip>
       <StyledIcon>{icon}</StyledIcon>
-      {labelKey && <StyledLabelKey>{labelKey}:&nbsp;</StyledLabelKey>}
+      {labelKey && <StyledLabelKey>{labelKey}</StyledLabelKey>}
       {labelValue}
       <StyledDelete onClick={onRemove} data-testid={'remove-icon-' + id}>
         <IconX size={theme.icon.size.sm} stroke={theme.icon.stroke.sm} />

front/src/modules/ui/filter-n-sort/utils/getOperandLabel.ts

@@ -18,3 +18,21 @@ export function getOperandLabel(operand: FilterOperand | null | undefined) {
       return '';
   }
 }
+export function getOperandLabelShort(
+  operand: FilterOperand | null | undefined,
+) {
+  switch (operand) {
+    case 'is':
+    case 'contains':
+      return ': ';
+    case 'is-not':
+    case 'does-not-contain':
+      return ': Not';
+    case 'greater-than':
+      return '\u00A0> ';
+    case 'less-than':
+      return '\u00A0< ';
+    default:
+      return ': ';
+  }
+}