Changed multiple active subscriptions filter to a Yes/No select

ref https://linear.app/ghost/issue/BER-3720/cleanupimprove-multi-sub-filter-implementation

Matches the established Yes/No pattern used by the comments moderation "Reported" filter instead of introducing a one-off boolean toggle. The field is now a select with Yes/No options, so its predicates carry string values like every other select filter, the chip reads "Multiple active subscriptions is Yes" rather than an unlabelled switch, and the bespoke 'boolean' ui type added to the shared filter framework is no longer needed.

Author: kevinansfield

apps/posts/src/views/filters/filter-types.ts

@@ -24,7 +24,7 @@ export interface FilterField {
     parseKeys?: readonly string[];
     ui: {
         label: string;
-        type: 'text' | 'select' | 'multiselect' | 'date' | 'number' | 'boolean' | 'custom';
+        type: 'text' | 'select' | 'multiselect' | 'date' | 'number' | 'custom';
         [key: string]: unknown;
     };
     options?: Array<{value: string; label: string}>;

apps/posts/src/views/members/hooks/use-members-filter-state.test.tsx

@@ -79,7 +79,7 @@ describe('useMembersFilterState', () => {
                 id: 'count.active_stripe_customers:1',
                 field: 'count.active_stripe_customers',
                 operator: 'is',
-                values: [true]
+                values: ['true']
             }
         ]);
         expect(result.current.query).toBe('filter=count.active_stripe_customers%3A%3E1');
@@ -108,7 +108,7 @@ describe('useMembersFilterState', () => {
                 id: 'count.active_stripe_customers:1',
                 field: 'count.active_stripe_customers',
                 operator: 'is',
-                values: [false]
+                values: ['false']
             }
         ]);
         expect(result.current.query).toBe('filter=count.active_stripe_customers%3A%3C2');

apps/posts/src/views/members/member-fields.test.ts

@@ -148,44 +148,45 @@ describe('multipleActiveSubscriptionsCodec', () => {
         timezone: 'UTC'
     };
 
-    it('serializes the boolean predicate to count comparisons', () => {
+    it('serializes the Yes/No predicate to count comparisons', () => {
         const predicate: FilterPredicate = {
             id: '1',
             field: 'count.active_stripe_customers',
             operator: 'is',
-            values: [true]
+            values: ['true']
         };
 
         expect(field.codec.serialize(predicate, context)).toEqual([
             'count.active_stripe_customers:>1'
         ]);
-        expect(field.codec.serialize({...predicate, values: [false]}, context)).toEqual([
+        expect(field.codec.serialize({...predicate, values: ['false']}, context)).toEqual([
             'count.active_stripe_customers:<2'
         ]);
     });
 
-    it('rejects non-boolean values and other operators', () => {
+    it('rejects unknown values and other operators', () => {
         const predicate: FilterPredicate = {
             id: '1',
             field: 'count.active_stripe_customers',
             operator: 'is',
-            values: [1]
+            values: [true]
         };
 
         expect(field.codec.serialize(predicate, context)).toBeNull();
-        expect(field.codec.serialize({...predicate, operator: 'is-greater', values: [true]}, context)).toBeNull();
+        expect(field.codec.serialize({...predicate, values: [1]}, context)).toBeNull();
+        expect(field.codec.serialize({...predicate, operator: 'is-greater', values: ['true']}, context)).toBeNull();
     });
 
     it('parses only the comparisons it serializes', () => {
         expect(field.codec.parse({'count.active_stripe_customers': {$gt: 1}}, context)).toEqual({
             field: 'count.active_stripe_customers',
             operator: 'is',
-            values: [true]
+            values: ['true']
         });
         expect(field.codec.parse({'count.active_stripe_customers': {$lt: 2}}, context)).toEqual({
             field: 'count.active_stripe_customers',
             operator: 'is',
-            values: [false]
+            values: ['false']
         });
         expect(field.codec.parse({'count.active_stripe_customers': {$gt: 2}}, context)).toBeNull();
         expect(field.codec.parse({'count.active_stripe_customers': 1}, context)).toBeNull();

apps/posts/src/views/members/member-fields.ts

@@ -105,30 +105,32 @@ const multipleActiveSubscriptionsCodec: FilterCodec = {
             return {
                 field: ctx.key,
                 operator: 'is',
-                values: [true]
+                values: ['true']
             };
         }
 
         if (comparator.operator === '$lt' && comparator.value === 2) {
             return {
                 field: ctx.key,
                 operator: 'is',
-                values: [false]
+                values: ['false']
             };
         }
 
         return null;
     },
     serialize(predicate) {
+        const value = predicate.values[0];
+
         if (predicate.operator !== 'is') {
             return null;
         }
 
-        if (predicate.values[0] === true) {
+        if (value === 'true') {
             return [MULTIPLE_ACTIVE_STRIPE_CUSTOMERS_FILTER];
         }
 
-        if (predicate.values[0] === false) {
+        if (value === 'false') {
             return [NO_MULTIPLE_ACTIVE_STRIPE_CUSTOMERS_FILTER];
         }
 
@@ -447,10 +449,14 @@ const baseMemberFields = defineFields({
         operators: ['is'],
         ui: {
             label: 'Multiple active subscriptions',
-            type: 'boolean',
-            defaultValue: true,
+            type: 'select',
+            searchable: false,
             hideOperatorSelect: true
         },
+        options: [
+            {value: 'true', label: 'Yes'},
+            {value: 'false', label: 'No'}
+        ],
         codec: multipleActiveSubscriptionsCodec
     }
 });

apps/posts/src/views/members/use-member-filter-fields.test.ts

@@ -204,9 +204,12 @@ describe('useMemberFilterFields', () => {
 
         expect(multipleSubscriptionsField).toMatchObject({
             label: 'Multiple active subscriptions',
-            type: 'boolean',
-            defaultValue: true,
-            hideOperatorSelect: true
+            type: 'select',
+            hideOperatorSelect: true,
+            options: [
+                {value: 'true', label: 'Yes'},
+                {value: 'false', label: 'No'}
+            ]
         });
     });