feat: Add confirmation modal for unsaved changes (#33809)

superset-frontend/src/explore/exploreUtils/formData.test.ts

@@ -16,13 +16,83 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { sanitizeFormData } from './formData';
+import { SupersetClient } from '@superset-ui/core';
+import { postFormData, putFormData } from './formData';
 
-test('sanitizeFormData removes temporary control values', () => {
-  expect(
-    sanitizeFormData({
-      url_params: { foo: 'bar' },
-      metrics: ['foo', 'bar'],
-    }),
-  ).toEqual({ metrics: ['foo', 'bar'] });
+jest.mock('@superset-ui/core', () => ({
+  SupersetClient: {
+    post: jest.fn(),
+    put: jest.fn(),
+  },
+}));
+
+test('postFormData should call SupersetClient.post with correct payload and return key', async () => {
+  const mockKey = '123abc';
+  const mockResponse = { json: { key: mockKey } };
+
+  (SupersetClient.post as jest.Mock).mockResolvedValue(mockResponse);
+
+  const result = await postFormData(
+    1,
+    'table',
+    { some: 'form', data: true },
+    42,
+    'tab-7',
+  );
+
+  expect(SupersetClient.post).toHaveBeenCalledWith({
+    endpoint: 'api/v1/explore/form_data?tab_id=tab-7',
+    jsonPayload: {
+      datasource_id: 1,
+      datasource_type: 'table',
+      form_data: JSON.stringify({ some: 'form', data: true }), // assuming sanitizeFormData is a passthrough
+      chart_id: 42,
+    },
+  });
+
+  expect(result).toBe(mockKey);
+});
+
+test('putFormData should call SupersetClient.put with correct payload and return message', async () => {
+  const mockMessage = 'Form data updated';
+  const mockResponse = { json: { message: mockMessage } };
+
+  (SupersetClient.put as jest.Mock).mockResolvedValue(mockResponse);
+
+  const result = await putFormData(
+    10,
+    'druid',
+    'abc123',
+    { another: 'value' },
+    undefined,
+    'tab-5',
+  );
+
+  expect(SupersetClient.put).toHaveBeenCalledWith({
+    endpoint: 'api/v1/explore/form_data/abc123?tab_id=tab-5',
+    jsonPayload: {
+      datasource_id: 10,
+      datasource_type: 'druid',
+      form_data: JSON.stringify({ another: 'value' }), // again, assuming sanitizeFormData is passthrough
+    },
+  });
+
+  expect(result).toBe(mockMessage);
+});
+
+test('postFormData without optional params should work', async () => {
+  (SupersetClient.post as jest.Mock).mockResolvedValue({
+    json: { key: 'abc' },
+  });
+
+  await postFormData(2, 'table', { foo: 'bar' });
+
+  expect(SupersetClient.post).toHaveBeenCalledWith({
+    endpoint: 'api/v1/explore/form_data',
+    jsonPayload: {
+      datasource_id: 2,
+      datasource_type: 'table',
+      form_data: JSON.stringify({ foo: 'bar' }),
+    },
+  });
 });

superset-frontend/src/explore/exploreUtils/formData.ts

@@ -16,8 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { omit } from 'lodash';
-import { SupersetClient, JsonObject } from '@superset-ui/core';
+import { SupersetClient, JsonObject, JsonResponse } from '@superset-ui/core';
+import { sanitizeFormData } from 'src/utils/sanitizeFormData';
 
 type Payload = {
   datasource_id: number;
@@ -26,19 +26,12 @@ type Payload = {
   chart_id?: number;
 };
 
-const TEMPORARY_CONTROLS = ['url_params'];
-
-export const sanitizeFormData = (formData: JsonObject): JsonObject =>
-  omit(formData, TEMPORARY_CONTROLS);
-
 const assembleEndpoint = (key?: string, tabId?: string) => {
   let endpoint = 'api/v1/explore/form_data';
-  if (key) {
-    endpoint = endpoint.concat(`/${key}`);
-  }
-  if (tabId) {
-    endpoint = endpoint.concat(`?tab_id=${tabId}`);
-  }
+
+  if (key) endpoint = endpoint.concat(`/${key}`);
+  if (tabId) endpoint = endpoint.concat(`?tab_id=${tabId}`);
+
   return endpoint;
 };
 
@@ -47,15 +40,15 @@ const assemblePayload = (
   datasourceType: string,
   formData: JsonObject,
   chartId?: number,
-) => {
+): Payload => {
   const payload: Payload = {
     datasource_id: datasourceId,
     datasource_type: datasourceType,
     form_data: JSON.stringify(sanitizeFormData(formData)),
   };
-  if (chartId) {
-    payload.chart_id = chartId;
-  }
+
+  if (chartId) payload.chart_id = chartId;
+
   return payload;
 };
 
@@ -74,7 +67,7 @@ export const postFormData = (
       formData,
       chartId,
     ),
-  }).then(r => r.json.key);
+  }).then((r: JsonResponse) => r.json.key);
 
 export const putFormData = (
   datasourceId: number,
@@ -92,4 +85,4 @@ export const putFormData = (
       formData,
       chartId,
     ),
-  }).then(r => r.json.message);
+  }).then((r: JsonResponse) => r.json.message);