feat: Allow creation and editing of static list filters in the UI

.changeset/wicked-ads-admire.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+feat: Allow creation and editing of static list filters in the UI

packages/app/playwright.config.ts

@@ -106,7 +106,7 @@ export default defineConfig({
           // Full UI: Alerts + Dashboards. Not local mode; Alerts enabled;
           command: USE_DEV
             ? `SERVER_URL=http://localhost:${API_PORT} PORT=${APP_PORT} NEXT_DIST_DIR=.next-e2e NEXT_PUBLIC_ENABLE_ALERT_DETAILS=true NEXT_PUBLIC_ENABLE_PROMQL=true next dev --webpack`
-            : `SERVER_URL=http://localhost:${API_PORT} PORT=${APP_PORT} NEXT_DIST_DIR=.next-e2e NEXT_PUBLIC_ENABLE_ALERT_DETAILS=true NEXT_PUBLIC_ENABLE_PROMQL=true yarn build && SERVER_URL=http://localhost:${API_PORT} PORT=${APP_PORT} NEXT_DIST_DIR=.next-e2e NEXT_PUBLIC_ENABLE_DASHBOARD_VARIABLES=true NEXT_PUBLIC_ENABLE_ALERT_DETAILS=true NEXT_PUBLIC_ENABLE_PROMQL=true yarn start`,
+            : `SERVER_URL=http://localhost:${API_PORT} PORT=${APP_PORT} NEXT_DIST_DIR=.next-e2e NEXT_PUBLIC_ENABLE_ALERT_DETAILS=true NEXT_PUBLIC_ENABLE_PROMQL=true yarn build && SERVER_URL=http://localhost:${API_PORT} PORT=${APP_PORT} NEXT_DIST_DIR=.next-e2e NEXT_PUBLIC_ENABLE_ALERT_DETAILS=true NEXT_PUBLIC_ENABLE_PROMQL=true yarn start`,
           port: parseInt(APP_PORT, 10),
           reuseExistingServer: !process.env.CI,
           timeout: APP_SERVER_STARTUP_TIMEOUT_MS,

packages/app/src/ServicesDashboardPage/ServicesDashboardPage.tsx

@@ -377,6 +377,7 @@ function ServicesDashboardPage() {
                   variant="secondary"
                   onClick={() => setShowFiltersModal(true)}
                   size="lg"
+                  data-testid="edit-filters-button"
                 >
                   <IconFilterEdit size={18} />
                 </ActionIcon>

packages/app/src/__tests__/DashboardFilters.test.ts

@@ -88,6 +88,23 @@ describe('getFilterEffect', () => {
     ).toEqual('Filters 2 sources');
   });
 
+  it('describes a static filter as a variable only', () => {
+    expect(
+      getFilterEffect({
+        id: 'filter2',
+        type: 'STATIC_LIST',
+        name: 'Environment',
+        options: ['prod', 'staging', 'dev'],
+        isBroadcastEnabled: false,
+        isVariableEnabled: true,
+        variableName: 'env',
+      }),
+    ).toEqual({
+      hasEffect: true,
+      tooltip: 'Available as variable ($env)',
+    });
+  });
+
   it('ignores the stored scope while broadcasting is off', () => {
     expect(
       getFilterEffect({

packages/app/src/components/DashboardFiltersModal/CustomInputWrapper.tsx

@@ -1,12 +1,12 @@
-import { FieldError } from 'react-hook-form';
+import { FieldError, Merge } from 'react-hook-form';
 import { Input, Tooltip } from '@mantine/core';
 import { IconInfoCircle } from '@tabler/icons-react';
 
 interface CustomInputWrapperProps {
   children: React.ReactNode;
   label: string;
   tooltipText?: string;
-  error?: FieldError;
+  error?: FieldError | Merge<FieldError, (FieldError | undefined)[]>;
 }
 
 export const CustomInputWrapper = ({