From 2418efe85c2fbdd33365b9776fe416a87bf7b4b4 Mon Sep 17 00:00:00 2001
From: Ross Mabbett <92495987+rtexelm@users.noreply.github.com>
Date: Fri, 14 Jun 2024 12:40:05 -0400
Subject: [PATCH] test(Explorer): Fix minor errors in ExploreViewContainer
 syntax, add tests (#29249)

---
 .../ExploreViewContainer.test.tsx             | 73 +++++++++++++++++++
 .../components/ExploreViewContainer/index.jsx |  5 +-
 2 files changed, 75 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/explore/components/ExploreViewContainer/ExploreViewContainer.test.tsx b/superset-frontend/src/explore/components/ExploreViewContainer/ExploreViewContainer.test.tsx
index 02b652d1014..7a150373daf 100644
--- a/superset-frontend/src/explore/components/ExploreViewContainer/ExploreViewContainer.test.tsx
+++ b/superset-frontend/src/explore/components/ExploreViewContainer/ExploreViewContainer.test.tsx
@@ -22,6 +22,7 @@ import {
   getChartMetadataRegistry,
   ChartMetadata,
 } from '@superset-ui/core';
+import { QUERY_MODE_REQUISITES } from 'src/explore/constants';
 import { MemoryRouter, Route } from 'react-router-dom';
 import { render, screen, waitFor } from 'spec/helpers/testing-library';
 import userEvent from '@testing-library/user-event';
@@ -221,3 +222,75 @@ test('preserves unknown parameters', async () => {
   );
   replaceState.mockRestore();
 });
+
+test('retains query mode requirements when query_mode is enabled', async () => {
+  const customState = {
+    ...reduxState,
+    explore: {
+      ...reduxState.explore,
+      controls: {
+        ...reduxState.explore.controls,
+        query_mode: { value: 'raw' },
+        optional_key1: { value: 'value1' },
+        all_columns: { value: ['all_columns'] },
+        groupby: { value: ['groupby'] },
+      },
+      hiddenFormData: {
+        all_columns: ['all_columns'],
+        groupby: ['groupby'],
+        optional_key1: 'value1',
+      },
+    },
+  };
+
+  await waitFor(() => renderWithRouter({ initialState: customState }));
+
+  const formDataEndpointCalls = fetchMock.calls(/api\/v1\/explore\/form_data/);
+  expect(formDataEndpointCalls.length).toBeGreaterThan(0);
+  const lastCall = formDataEndpointCalls[formDataEndpointCalls.length - 1];
+
+  const body = JSON.parse(lastCall[1]?.body as string);
+  const formData = JSON.parse(body.form_data);
+
+  const queryModeFields = Object.keys(
+    customState.explore.hiddenFormData,
+  ).filter(key => QUERY_MODE_REQUISITES.has(key));
+
+  queryModeFields.forEach(key => {
+    expect(formData[key]).toBeDefined();
+  });
+  expect(formData.optional_key1).toBeUndefined();
+});
+
+test('does omit hiddenFormData when query_mode is not enabled', async () => {
+  const customState = {
+    ...reduxState,
+    explore: {
+      ...reduxState.explore,
+      controls: {
+        ...reduxState.explore.controls,
+        optional_key1: { value: 'value1' },
+        all_columns: { value: ['all_columns'] },
+        groupby: { value: ['groupby'] },
+      },
+      hiddenFormData: {
+        all_columns: ['all_columns'],
+        groupby: ['groupby'],
+        optional_key1: 'value1',
+      },
+    },
+  };
+
+  await waitFor(() => renderWithRouter({ initialState: customState }));
+
+  const formDataEndpointCalls = fetchMock.calls(/api\/v1\/explore\/form_data/);
+  expect(formDataEndpointCalls.length).toBeGreaterThan(0);
+  const lastCall = formDataEndpointCalls[formDataEndpointCalls.length - 1];
+
+  const body = JSON.parse(lastCall[1]?.body as string);
+  const formData = JSON.parse(body.form_data);
+
+  Object.keys(customState.explore.hiddenFormData).forEach(key => {
+    expect(formData[key]).toBeUndefined();
+  });
+});
diff --git a/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx b/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx
index c79ccda832a..3d263671c1b 100644
--- a/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx
+++ b/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx
@@ -711,11 +711,10 @@ function ExploreViewContainer(props) {
 
 ExploreViewContainer.propTypes = propTypes;
 
-const retainQueryModeRequirements = hiddenFormData => {
+const retainQueryModeRequirements = hiddenFormData =>
   Object.keys(hiddenFormData ?? {}).filter(
     key => !QUERY_MODE_REQUISITES.has(key),
   );
-};
 
 function mapStateToProps(state) {
   const {
@@ -732,7 +731,7 @@ function mapStateToProps(state) {
   const hasQueryMode = !!controls.query_mode?.value;
   const fieldsToOmit = hasQueryMode
     ? retainQueryModeRequirements(hiddenFormData)
-    : hiddenFormData;
+    : Object.keys(hiddenFormData ?? {});
   const form_data = omit(getFormDataFromControls(controls), fieldsToOmit);
   const slice_id = form_data.slice_id ?? slice?.slice_id ?? 0; // 0 - unsaved chart
   form_data.extra_form_data = mergeExtraFormData(