Fix clearing optional dashboard filters (#2913) (#3003)

Author: jerome-ng

plugins/ui/apps/vue-mri-ui-lib/src/components/ShinyViewer/CompleteRequiredFiltersModal.vue

@@ -154,7 +154,7 @@ import MessageBox from '../MessageBox.vue'
 import appButton from '@/lib/ui/app-button.vue'
 import ConceptSetTypeaheadField from './ConceptSetTypeaheadField.vue'
 import type { WizardFieldDefinition } from '@/utils/dashboardFlowUtils'
-import { isConditionField } from '@/utils/dashboardFlowUtils'
+import { isConditionField, normalizeWizardFieldValueForComparison } from '@/utils/dashboardFlowUtils'
 import InputParser from '@/lib/utils/InputParser'
 import RangeConstraintTokenDefinition from '@/lib/utils/RangeConstraintTokenDefinition'
 import RangeConstraintPatternDefinition from '@/lib/utils/RangeConstraintPatternDefinition'
@@ -460,7 +460,8 @@ function markFieldDirty(fieldId: string) {
   }
 
   // For regular fields
-  const hasChanged = currentValue !== initialValue
+  const hasChanged =
+    normalizeWizardFieldValueForComparison(currentValue) !== normalizeWizardFieldValueForComparison(initialValue)
 
   if (hasChanged) {
     dirtyFields.add(fieldId)

plugins/ui/apps/vue-mri-ui-lib/src/composables/useDashboardFlow.ts

@@ -998,6 +998,12 @@ export function useDashboardFlow(
     }
     const rawValue = rawInput?.value ?? rawInput
     if (rawValue === null || typeof rawValue === 'undefined' || String(rawValue).trim() === '') {
+      if (constraintType === 'text' || constraintType === 'conceptSet') {
+        return dispatch('updateConstraintValue', {
+          constraintId: constraint.id,
+          value: [],
+        })
+      }
       return Promise.reject(new Error(`Missing value for ${constraint.props.name || constraint.id}`))
     }
     const finalDisplayValue = displayValue || rawInput?.displayName || String(rawValue)

plugins/ui/apps/vue-mri-ui-lib/src/utils/__tests__/dashboardFlowUtils.test.ts

@@ -1,5 +1,11 @@
 import { describe, expect, it } from 'vitest'
-import { getWizardFlow, isWizardVisibleOnSurface, parseNumericInput, validateRequiredFields } from '../dashboardFlowUtils'
+import {
+  getWizardFlow,
+  isWizardVisibleOnSurface,
+  normalizeWizardFieldValueForComparison,
+  parseNumericInput,
+  validateRequiredFields,
+} from '../dashboardFlowUtils'
 
 const createExpression = (operator: string, value: string | number) => ({
   type: 'Expression' as const,
@@ -214,3 +220,15 @@ describe('wizard metadata helpers', () => {
     expect(getWizardFlow({ flow: 'table1-config' })).toBe('table1-config')
   })
 })
+
+describe('wizard field value helpers', () => {
+  it('treats null, undefined, and an empty string as the same empty form value', () => {
+    expect(normalizeWizardFieldValueForComparison(null)).toBe('')
+    expect(normalizeWizardFieldValueForComparison(undefined)).toBe('')
+    expect(normalizeWizardFieldValueForComparison('')).toBe('')
+  })
+
+  it('preserves non-empty field values', () => {
+    expect(normalizeWizardFieldValueForComparison('FEMALE')).toBe('FEMALE')
+  })
+})

plugins/ui/apps/vue-mri-ui-lib/src/utils/dashboardFlowUtils.ts

@@ -100,6 +100,10 @@ export interface RequiredFieldValidationResult {
   breakdown: FieldComparisonBreakdown[]
 }
 
+export function normalizeWizardFieldValueForComparison(value: unknown): unknown {
+  return value === null || typeof value === 'undefined' ? '' : value
+}
+
 function getLastPathSegment(path: string): string {
   const tokens = path.split('.')
   return tokens[tokens.length - 1] || path