[8.2] [Dashboard] [Controls] Fix bug when combining filters (#134606) (#134702)

* [Dashboard] [Controls] Fix bug when combining filters (#134606)

* Combine filter arrays directly to prevent overwriting

* Add Jest tests

(cherry picked from commit 4406ff3b60)

* Go back to old import style

* Fix types

* Fix imports

Co-authored-by: Hannah Mudge <Heenawter@users.noreply.github.com>
Co-authored-by: Hannah Mudge <hannah.wright@elastic.co>

src/plugins/controls/common/mocks.tsx

@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { getDefaultControlGroupInput } from '.';
+import { ControlGroupInput } from './control_group/types';
+
+export const mockControlGroupInput = (partial?: Partial<ControlGroupInput>): ControlGroupInput => ({
+  id: 'mocked_control_group',
+  ...getDefaultControlGroupInput(),
+  ...{
+    panels: {
+      control1: {
+        order: 0,
+        width: 'medium',
+        type: 'mockedOptionsList',
+        explicitInput: {
+          id: 'control1',
+        },
+      },
+      control2: {
+        order: 1,
+        width: 'large',
+        type: 'mockedRangeSlider',
+        explicitInput: {
+          id: 'control2',
+        },
+      },
+      control3: {
+        order: 2,
+        width: 'small',
+        type: 'mockedOptionsList',
+        explicitInput: {
+          id: 'control3',
+        },
+      },
+    },
+  },
+  ...(partial ?? {}),
+});

src/plugins/dashboard/public/application/lib/dashboard_control_group.test.ts

@@ -0,0 +1,92 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { Filter } from '@kbn/es-query';
+import { mockControlGroupInput } from '../../../../controls/common/mocks';
+import { ControlGroupContainer } from '../../../../controls/public/control_group/embeddable/control_group_container';
+import { combineDashboardFiltersWithControlGroupFilters } from './dashboard_control_group';
+
+jest.mock('../../../../controls/public/control_group/embeddable/control_group_container');
+
+const testFilter1: Filter = {
+  meta: {
+    key: 'testfield',
+    alias: null,
+    disabled: false,
+    negate: false,
+  },
+  query: { match_phrase: { testfield: 'hello' } },
+};
+
+const testFilter2: Filter = {
+  meta: {
+    key: 'testfield',
+    alias: null,
+    disabled: false,
+    negate: false,
+  },
+  query: { match_phrase: { testfield: 'guten tag' } },
+};
+
+const testFilter3: Filter = {
+  meta: {
+    key: 'testfield',
+    alias: null,
+    disabled: false,
+    negate: false,
+  },
+  query: {
+    bool: {
+      should: {
+        0: { match_phrase: { testfield: 'hola' } },
+        1: { match_phrase: { testfield: 'bonjour' } },
+      },
+    },
+  },
+};
+
+const mockControlGroupContainer = new ControlGroupContainer(mockControlGroupInput());
+
+describe('Test dashboard control group', () => {
+  describe('Combine dashboard filters with control group filters test', () => {
+    it('Combined filter pills do not get overwritten', async () => {
+      const dashboardFilterPills = [testFilter1, testFilter2];
+      mockControlGroupContainer.getOutput = jest.fn().mockReturnValue({ filters: [] });
+      const combinedFilters = combineDashboardFiltersWithControlGroupFilters(
+        dashboardFilterPills,
+        mockControlGroupContainer
+      );
+      expect(combinedFilters).toEqual(dashboardFilterPills);
+    });
+
+    it('Combined control filters do not get overwritten', async () => {
+      const controlGroupFilters = [testFilter1, testFilter2];
+      mockControlGroupContainer.getOutput = jest
+        .fn()
+        .mockReturnValue({ filters: controlGroupFilters });
+      const combinedFilters = combineDashboardFiltersWithControlGroupFilters(
+        [] as Filter[],
+        mockControlGroupContainer
+      );
+      expect(combinedFilters).toEqual(controlGroupFilters);
+    });
+
+    it('Combined dashboard filter pills and control filters do not get overwritten', async () => {
+      const dashboardFilterPills = [testFilter1, testFilter2];
+      const controlGroupFilters = [testFilter3];
+      mockControlGroupContainer.getOutput = jest
+        .fn()
+        .mockReturnValue({ filters: controlGroupFilters });
+      const combinedFilters = combineDashboardFiltersWithControlGroupFilters(
+        dashboardFilterPills,
+        mockControlGroupContainer
+      );
+      expect(combinedFilters).toEqual(dashboardFilterPills.concat(controlGroupFilters));
+    });
+  });
+});

src/plugins/dashboard/public/application/lib/dashboard_control_group.ts

@@ -186,22 +186,6 @@ export const deserializeControlGroupFromDashboardSavedObject = (
 export const combineDashboardFiltersWithControlGroupFilters = (
   dashboardFilters: Filter[],
   controlGroup: ControlGroupContainer
-) => {
-  const dashboardFiltersByKey = dashboardFilters.reduce(
-    (acc: { [key: string]: Filter }, current) => {
-      const key = current.meta.key;
-      if (key) acc[key] = current;
-      return acc;
-    },
-    {}
-  );
-  const controlGroupFiltersByKey = controlGroup
-    .getOutput()
-    .filters?.reduce((acc: { [key: string]: Filter }, current) => {
-      const key = current.meta.key;
-      if (key) acc[key] = current;
-      return acc;
-    }, {});
-  const finalFilters = { ...dashboardFiltersByKey, ...(controlGroupFiltersByKey ?? {}) };
-  return Object.values(finalFilters);
+): Filter[] => {
+  return [...dashboardFilters, ...(controlGroup.getOutput().filters ?? [])];
 };