fix(Filters): ensure "is empty" filter is synced with URL (#205)

* fix: ensure "is empty" filter has value set This way it won't be filtered out during URL synchronization * Fix tests * Ensure "is-empty" is removed from the value when user switches away from "is empty" filter

Author: ifrost

src/pages/ProfilesExplorerView/domain/variables/FiltersVariable/FiltersVariable.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import { AdHocFiltersVariable, SceneComponentProps, sceneGraph } from '@grafana/scenes';
 import { useStyles2 } from '@grafana/ui';
-import { CompleteFilters } from '@shared/components/QueryBuilder/domain/types';
+import { CompleteFilters, OperatorKind } from '@shared/components/QueryBuilder/domain/types';
 import { QueryBuilder } from '@shared/components/QueryBuilder/QueryBuilder';
 import React from 'react';
 
@@ -19,7 +19,11 @@ export class FiltersVariable extends AdHocFiltersVariable {
  label: 'Filters',
  filters: FiltersVariable.DEFAULT_VALUE,
  expressionBuilder: (filters) =>
- filters.map(({ key, operator, value }) => `${key}${operator}"${value}"`).join(','),
+ filters
+ .map(({ key, operator, value }) =>
+ operator === OperatorKind['is-empty'] ? `${key}=""` : `${key}${operator}"${value}"`
+ )
+ .join(','),
  });
 
  this.addActivationHandler(this.onActivate.bind(this));

src/pages/ProfilesExplorerView/domain/variables/FiltersVariable/filters-ops.tsx

@@ -1,12 +1,12 @@
 import { AdHocVariableFilter } from '@grafana/data';
 import { parseRawFilters } from '@shared/components/QueryBuilder/domain/helpers/queryToFilters';
-import { CompleteFilter, OperatorKind } from '@shared/components/QueryBuilder/domain/types';
+import { CompleteFilter } from '@shared/components/QueryBuilder/domain/types';
 
 import { FiltersVariable } from './FiltersVariable';
 
 export const convertPyroscopeToVariableFilter = (filter: CompleteFilter): AdHocVariableFilter => ({
  key: filter.attribute.value,
- operator: filter.operator.value === OperatorKind['is-empty'] ? OperatorKind['='] : filter.operator.value,
+ operator: filter.operator.value,
  value: filter.value.value,
 });
 

src/shared/components/QueryBuilder/domain/actions.ts

@@ -16,6 +16,7 @@ import {
  FilterKind,
  FilterPartKind,
  Filters,
+ IsEmptyFilter,
  OperatorKind,
  PartialFilter,
  QueryBuilderContext,
@@ -87,7 +88,7 @@ export const actions: any = {
  // FILTER OPERATORS
  setFilterOperator: assign((context: QueryBuilderContext, event: SelectEvent) => {
  const newOperator = event.data;
- const newValue = newOperator.value === OperatorKind['is-empty'] ? { value: '', label: '' } : undefined;
+ const newValue = newOperator.value === OperatorKind['is-empty'] ? IsEmptyFilter.value : undefined;
 
  const newFilters = context.filters.map((filter) => {
  if (isPartialFilter(filter)) {
@@ -126,12 +127,14 @@ export const actions: any = {
 
  const previousOperator = filter.operator!.value;
 
+ if (previousOperator === OperatorKind['is-empty']) {
+ filter.value = { value: '', label: '' };
+ }
+
  if (newOperator.value === OperatorKind['is-empty']) {
  return {
  ...filter,
- type: FilterKind['attribute-operator'],
- operator: newOperator,
- value: { value: '', label: '' },
+ ...IsEmptyFilter,
  active: false,
  };
  }

src/shared/components/QueryBuilder/domain/helpers/__tests__/queryToFilters.spec.ts

@@ -74,7 +74,7 @@ const cases: TestCase[] = [
  },
  value: {
  label: '',
- value: '',
+ value: 'is-empty',
  },
  },
  ],

src/shared/components/QueryBuilder/domain/helpers/queryToFilters.ts

@@ -1,6 +1,6 @@
 import { nanoid } from 'nanoid';
 
-import { FilterKind, Filters, OperatorKind } from '../types';
+import { FilterKind, Filters, IsEmptyFilter, OperatorKind } from '../types';
 
 export const parseRawFilters = (rawFilters: string) =>
  rawFilters.split(',').map((f) => {
@@ -36,15 +36,9 @@ export function queryToFilters(query: string): Filters {
  if (shouldChangeToIsEmptyOperator) {
  return {
  id: nanoid(10),
- type: FilterKind['attribute-operator'],
  active: true,
  attribute: { value: attribute, label: attribute },
- // TODO: don't hardcode the label
- operator: { value: OperatorKind['is-empty'], label: 'is empty' },
- value: {
- value: '',
- label: '',
- },
+ ...IsEmptyFilter,
  };
  }
 

src/shared/components/QueryBuilder/domain/types.ts

@@ -15,6 +15,18 @@ export enum OperatorKind {
  'in' = 'in',
 }
 
+export const IsEmptyFilter = {
+ type: FilterKind['attribute-operator'],
+ operator: {
+ value: OperatorKind['is-empty'],
+ label: 'is empty',
+ },
+ value: {
+ value: OperatorKind['is-empty'],
+ label: '',
+ },
+};
+
 export type PartialFilter = {
  id: string;
  type: FilterKind;