fix(dataset): sync columns checkbox not responding to clicks in virtual dataset modal

superset-frontend/src/components/Datasource/DatasourceModal/DatasourceModal.test.jsx

@@ -136,4 +136,44 @@ describe('DatasourceModal', () => {
       expect(errorTitle).toBeInTheDocument();
     });
   });
+
+  test('shows sync columns checkbox when SQL changes', async () => {
+    cleanup();
+    const datasourceWithSQL = {
+      ...mockedProps.datasource,
+      sql: 'SELECT * FROM original_table',
+    };
+    const modifiedDatasource = {
+      ...datasourceWithSQL,
+      sql: 'SELECT * FROM new_table', // Different SQL to trigger checkbox
+    };
+
+    const { rerender } = render(
+      <DatasourceModal {...mockedProps} datasource={datasourceWithSQL} />,
+      { store, useRouter: true },
+    );
+
+    // Update with modified SQL
+    rerender(
+      <DatasourceModal {...mockedProps} datasource={modifiedDatasource} />,
+    );
+
+    const saveButton = screen.getByTestId('datasource-modal-save');
+    await act(async () => {
+      fireEvent.click(saveButton);
+    });
+
+    // Wait for confirmation modal to appear
+    await waitFor(() => {
+      expect(screen.getByText('Confirm save')).toBeInTheDocument();
+    });
+
+    // Checkbox should be present and checked by default when SQL changes
+    const checkbox = await screen.findByRole('checkbox');
+    expect(checkbox).toBeInTheDocument();
+    expect(checkbox).toBeChecked();
+
+    // Should show the sync columns message
+    expect(screen.getByText('Automatically sync columns')).toBeInTheDocument();
+  });
 });

superset-frontend/src/components/Datasource/DatasourceModal/index.tsx

@@ -108,6 +108,7 @@ const DatasourceModal: FunctionComponent<DatasourceModalProps> = ({
   const [isSaving, setIsSaving] = useState(false);
   const [isEditing, setIsEditing] = useState<boolean>(false);
   const [modal, contextHolder] = Modal.useModal();
+  const [confirmModalOpen, setConfirmModalOpen] = useState(false);
   const buildPayload = (datasource: Record<string, any>) => {
     const payload: Record<string, any> = {
       table_name: datasource.table_name,
@@ -275,7 +276,7 @@ const DatasourceModal: FunctionComponent<DatasourceModalProps> = ({
             <Checkbox
               checked={syncColumns}
               onChange={() => {
-                setSyncColumns(!syncColumns);
+                setSyncColumns(prev => !prev);
               }}
             />
             <span
@@ -300,14 +301,17 @@ const DatasourceModal: FunctionComponent<DatasourceModalProps> = ({
   }, [datasource.sql, currentDatasource.sql]);
 
   const onClickSave = () => {
-    modal.confirm({
-      title: t('Confirm save'),
-      content: getSaveDialog(),
-      onOk: onConfirmSave,
-      icon: null,
-      okText: t('OK'),
-      cancelText: t('Cancel'),
-    });
+    setConfirmModalOpen(true);
+  };
+
+  const handleConfirmModalClose = () => {
+    setConfirmModalOpen(false);
+  };
+
+  const handleConfirmSave = async () => {
+    await onConfirmSave();
+    // Note: on success, onConfirmSave calls onHide() which closes parent modal
+    // On error, confirmModal stays open so user can see the error and try again or cancel
   };
 
   return (
@@ -371,6 +375,16 @@ const DatasourceModal: FunctionComponent<DatasourceModalProps> = ({
         currencies={currencies}
       />
       {contextHolder}
+      <Modal
+        title={t('Confirm save')}
+        show={confirmModalOpen}
+        onHide={handleConfirmModalClose}
+        onHandledPrimaryAction={handleConfirmSave}
+        primaryButtonName={t('OK')}
+        primaryButtonLoading={isSaving}
+      >
+        {getSaveDialog()}
+      </Modal>
     </StyledDatasourceModal>
   );
 };